I've made an Allegro.cc site tour. It's an interactive tour that I'd ideally like to get newbies to try out before making their first post. Presently, I've finished chapters 1-3, and it has 82 separate slides. When it's finished, the chapters will be:

• Main Page (Done!)

• Manual (Done!)

• Forums (Done!)

• Control Center

• Depot

• Creating Threads

• Posting

• Editing

To install it, head over to your Custom JS/CSS page and put this in the JS box:
document.write('<script type="text/javascript" src="http://cgamesplay.com/bin/tour/"></script>');Then empty your cache, and press save (or press save and then Ctrl+Refresh the page you get redirected to).

I've tested this in Firefox, and I'd like to get others to try it out, and let me know if it works in their browsers, as well as their opinion of the actual idea of a site tour. Thanks!

No workie de konqueror.

edit, infact, in the upper left hand corner of the custom css/js page, there is now this: ').js">

I have the same thing. Not my fault

Does Konqueror produce a script error?

Let me give more concise directions: add the above javascript to your custom JS box, save, control refresh, and be on the control center page. The control center page is what makes the tour start

Yeah see, I did the ctrl+refresh from the cc page the first time, then I tried others.

No errors except on the actual theme-css page:
Error: http://www.allegro.cc/cc/theme-css: TypeError: Undefined value

It showed the "Loading" screen for entirely too long at first.

Hey, great idea. I take it that it'll kick in once a new member has registered?

I tried it out on FF Portable (it worked fine), and had a n00b moment - actually learnt a little bit more about the site.

Odd. I'll see if it's the balloon library I wrote causing the problem. Oh, are cookies enabled?

It's actually loading, so...

Nope, I don't have control over what new members see, they'd have to install it themselves.

I tried to throw something in there for everyone

Neat. The dialog needs a "Back" link, though.

How is this supposed to be used? Newbies would have to know how to change their custom JS before they can use it to learn.

Will Matthew do anything about it?

I'm thinking about making a website "installer" where you provide your user name and password and it installs it for you.

I tested it and it worked nice !

If only I had something equal when I first came there

In Opera it just shows the Loading... screen. But I suspected something like that. Opera has a lot stricter JavaScript implementation compared to Firefox or IE.

Tested it in Firefox and it worked great. It looks like it was a lot of work.

I had the same problem. The status bar showed it loading to about 13Kb, and after that it just hung on the loading message.

Can you give me a script error or something? Just for background information, the initial loading screen: creates an iframe; loads the custom js/css page; updates the tourConfig variable; submits the form; removes the iframe; then closes the loading screen. You can see the code for it at http://cgamesplay.com/bin/tour/steps.js, right up near the top, in the 'saveConfig' key.

The script uses cookies to decide where to open the tour to when the page changes... those have to be enabled as well.

[edit]
Link updated.

Error log attached.

edit: There are some unrelated CSS errors n there as well.

I had no problems, but it would be nice if there was something like a table of contents, so newbies might be more likely to go straight to the part they are concerned with.

And thats exactly why there shouldn't be a table of contents

Many of them couldn't be bothered to thumb through the reference that came with it, much less the manual on the site... You really think they'll stick around if the tour doesn't answer their question immediately?

All the better.

Head back to the control center and press Begin Tour

Yeah, giving out one's password is never a bad thing to do.

CGamesPlay already has pages that use the A.cc login.

It's different in this case (at least if you mean Minorhack). The password never actually leaves A.cc, only some login information identifying you as a user.

I was really looking forward to a tour but I'm using Opera...
I tried IE 6, but it doesn't work at all.(Perhaps of some crappy settings; I never use it.)
I've attached a un-/barely readable error output of opera. Hope you make it work for all the browsers.

Okay, I downloaded Opera and messed with it. Opera supports neither the toSource function nor the uneval function, so I had to get an additional JSON library to cope. Because of the increasing number of JS files, I combined them into a single one. Finally, due to Opera caching the old JS on refresh, I had to write a somewhat dirty hack to work around it.

/* BEGIN TOUR */
var tourConfig = null;
if(typeof(dryrun)!='undefined') document.write('<script type="text/javascript" src="http://cgamesplay.com/bin/tour/"></script>');
else{dryrun = false;var d = new Date();document.write('<script type="text/javascript" src="http://www.allegro.cc/js/user.js/2559?'+((d.getTime()-d.getMilliseconds())/1000)+'"></script>');}
/* END TOUR */

Should work in Opera and Firefox. Try it out in Konqi as well!

I'm aware of the arrow alignment issues in Opera. Don't know why they happen.

It's a great idea and I'm impressed by the interface, but it's far too demanding on resources... Why does it take so long to load each time? And why are you hiding the bulk of code?

In the amount of time I'm waiting for the tour on each page to load I could have downloaded a flashy, user-friendly Flash interface and not have to wait for loading times anymore (and it would also take care of some browser-compatibility issues).

Yet, it'd be just as demanding on resources, and take MUCH longer to capture and turn into a nice interactive video walkthrough.

If you are referring to the "Loading..." screen, then it's because it has to perform an RPC to Allegro.cc. If you're not referring to the "Loading..." screen, then keep in mind that the tour bubble won't pop up until the page has finished loading (including all images).

"Hiding"? http://cgamesplay.com/bin/tour/ is all of the javascript. json.js (available via google) is JSMin'ed, the rest is there, uncompressed and neatly formatted.

Is my coding style that bad?

I think he meant because you only paste in a tiny snippet in your custom JS box..?

I just would like to point out that no one can see your private user.js file. (That would be a privacy breach.) The user id parameter is completely ignored and really only exists in case multiple people share the same browser.

Yeah, I drew that conclusion. In either case it still works out because the correct user JS file will be returned (the current, uncached one, with dryrun defined).

The problem was that the user JS file was cached, so when I perform the RPC to update the tourConfig variable, the browser uses the cached value (well, Opera did. Firefox refreshed on document.location.reload()). By varying the URL with the current time it always gets updated. Of course it's slower.

If you feel like adjusting the cache settings for the user JS, I'd appreciate it

I wonder how long it took to get this much done... We've seen it's still buggy... As well as unresponsive and slow loading... And unless I missed something it's still very short. I'm not trying to put down your efforts, CGamesPlay. It's really rather cool, but this might be a good application for Flash...

It seems odd that you would have us load code from your custom js (even though what appears to be happening per Matthew Leverton's rule is our own user.js file is loaded again... ) and from a file on your domain. Why didn't you just post all of the code (all 1471 lines of it )?

I like the tour and refuse to comment on the soon-to-be argument...;D;)

The entire thing has taken roughly 10 hours of work. I originally wrote the balloon library and wanted to test it and show it off a bit. So I made this.

Could you please be more specific?

See my above post, I need more information. Also, what browser and machine specs?

Well, there's the front page chapter, which takes you through the news, the front page, the IOTD, and the resources section. Then there's the manual chapter, which includes a short breakdown of the manual page. Then there's the forum chapter, which goes through the thread list as well as the actual thread page. All in all it'll take about 15 minutes to go through if you read everything.

It's not possible to do the balloon tips in Flash, or to provide the interactivity part, or to navigate to separate pages on the site. Also the upcoming Posting chapter will really be inappropriate for Flash (it's going to make sure you've selected a good topic, used good writing style, not posted code without code tags, etc).

Ideally, the finished product will have all the ugliness of packaging and distribution worked out. Unfortunately, there's going to be at least 200 KB of javascript, even if it's compressed. I want to keep the steps part on my server so that updates happen without reinstalling. And with that vein in mind, tour.js, balloon.js, and json.min.js just follow suit. Btw, "hiding" was a bad choice of words. You can navigate to any of the URLs to read the source yourself. You can copy them to your server, too

What I'd like to happen is have a newbie come to my tour installer, put in their user and password, and have a script copy the necessary code into their custom JS field. Of course, I will also include directions for manually installing, for those who don't feel like giving away their user information. I'm also going to write an uninstaller directly from the tour (after you've seen everything there is to see it will prompt to automatically uninstall itself).

Thanks for everything you guys have said; I'll definitely keep working on it. I'd really appreciate it if you guys kept the bug reports coming in!

After it loads, it's not unresponsive at all. But go ahead and make one in flash if you feel you can do it better.

Because it's easier not to do that, and also much cleaner and easier to paste, not to mention it saves space on a.cc from multiple copies of the same code.

Let me break the process down in pseudo-code:
Process of any single page view while the tour is installed:

User custom JS is loaded (possibly from cache)
User custom JS is loaded with caching disabled
JS files from my domain are loaded (possibly from cache)
If the tour has not been run before
    Put up the loading screen
    Open the theme-css page in an iframe
    Set the configuration variable specifying that the tour has been run
    Save the page
    Close the iframe
    Show the welcome screen
Else if the cookie tourWhenPageChanges is set
    Go to that tour page

The second step is necessary because the user JS file is cached by the browser, so tour configuration values are cached, so it will assume the tour has never been run before until the cache expires.

That's why the post goes to "my" user javascript: it's loading a non-cached version of the current user's javascript, so the configuration is guaranteed to be updated. It's very hackish, but without very much thought going towards it I can't see any other way. Well, I could store the tour configuration off-site, but that's evil.

Apparently I was mistaken. A coworker was actually in control of the interface at the time (I was bragging about Allegro.cc again ) and without reading the IOTD bubble we saw only a close [X] button to interact with. Upon clicky we were suddenly alone in the scary world of Allegro.cc...

So the bug I thought there was wasn't (missing controls in the bubble). It might assist the tour to explain all of the ways you'll navigate the tour at the beginning so users know the tour includes actual A.cc links as well as it's own. There is also the text that is displayed at the top of the custom js page when your JavaScript is loaded... It also seems to have duplicated the csmiley smiley counter, though mine is slightly modified and I don't know where the fault is...

{"name":"592355","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/a\/6a14c02f776288fc0ca1cf83beef2b1c.png","w":896,"h":244,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/a\/6a14c02f776288fc0ca1cf83beef2b1c"}

Going through it a second time I wound up stuck in the Manual section... Am I mistaken or was I supposed to navigate to the blit function? I did that (twice) and the tour never came back up...

My only real complaint as of yet is that for a n00b it might be more difficult to navigate. And unfortunately, a simple mistake will close the tour. It might be more user-friendly to keep a Tour icon in a standardized place. If possible it would be more user-friendly to use Flash, which requires no 'installation' and no guessing, but I don't know how feasible it is with your model...

I'm not really experienced with Flash so I don't know it's limits for interacting with a Web page. It could be done in a literal tutorial/tour like movie that takes them through the site. If you can load the Web site into the Flash interface you could still make it live, but I don't know about that...

Of course you can. If it executes client-side then I can obviously see it. Hiding is actually a pretty good word. Consider hidden files in a file system. You can actually get complete access to them, however, they're [by default] hidden from normal viewing. It's really a similar concept.

From home, it functions very nicely (Pentium D Duo Core 3.2 GHZ, 2 GB RAM). From work (Celeron 1.0 GHz, 384 MB RAM - or something) it was very poor.

That's true, but it's not very wise to execute code from a random user on a Web domain... For a n00b coming to Allegro they might not want to do that. :) It is a lot cleaner though. He could have just attached it to this thread and linked everybody to that (which would only be one copy on Allegro.cc).

It might not hurt for Matthew Leverton to actually add the tour/tutorial to the site after it's completely finished and polished.

In any case, I'm biased about JavaScript so I hate when it's used for really cool things. :)

Seems the top row is counting the smilies below the reply box ....

The top row is counting the bottom row's smileys.

There shouldn't be a top or bottom row. The user.js file is being loaded twice, hence a second csmiley bar is created, which also counts the smileys in the first row...

Matthew recently fixed that afaik.

CGames's javascript loads it a second time...

Oh. Silly CGames.

Matthew fixed the "There is also the text that is displayed at the top of the custom js page when your JavaScript is loaded...", but I've explained why I load the user JS file 3 times so I'm not going to do it again.

Did you get the "Tour Exited" balloon? Btw, if you go back to the control center, press the "Begin Tour" link by the Log Out link to skip to a particular chapter.

Yeah I've been wanting to make a js 'platform' to allow 1 click (maybe 2) installation of various scripts without leaving the page.

Also, you mentioned that tour config can't update itself without reloading the js file. Is there a reason you can't just store the information in a cookie?

A cookie isn't persistent. Short-term things like the next page in the tour can be stored in a cookie, but whether or not a user has ever seen the tour before needs to be stored in a manner that will affect all browsers he connects to the site from.

Hm I see what you're saying. Maybe store it in the "About Me" in the profile.

Matthew seems to have added a field for me

[append]
Thanks, Matthew, that will work a lot better! I'll switch to using it ASAP.

Wow, that's awesome.

Now the script is nice and simple. It uses the new User Data feature of Allegro.cc, so it doesn't require any weird hacks. Here's your new JavaScript:
document.write('<script type="text/javascript" src="http://cgamesplay.com/bin/tour/"></script>');The old JS either will or will not work at this point. I'm banking on "will not".

Test this one out, let me know if anybody has any bugs. Tomasu, does it work in Konqueror?

Does nothing. No error, no tour. Js is in my user js just fine as well (viewed source, and took a look at "/js/user.js/476").

The tour came up for me fine, but I didn't actually go through it. I assume if it came up fine it should still function as before.

In konqueror?

The only browsers I ever use are IE and FF.

And therein lies the rub.

Wha? What does that even mean!?

Konqueror is dumb. I can't use it as both a file manager and a web browser. So I chose to use it as a file manager. Now, whenever I click a link in a web page, it opens it up in KWrite So yeah, that's why I don't use Konqi.

Technically it only e-mails you the first response after last viewing the thread. So if you subscribe, and ten people respond, you'll only get the first one. After reading the thread, the flag is reset and you'll get the next message.

As the e-mail says: "You will not receive another notification until you read the thread. The first post is listed below. There may be more replies that follow it."

You must be either the first or last poster, and the time limit is one hour.

Hide Thread (formally known as Kill Thread) is permanent.

AHah, you did something wrong. Somehow you set your text/html mime to kwrite instead of embedded khtml. So basically, you must have set it to do that so html files on disk show up in kwrite? how silly.

Matthew: Thanks for the review. I'll correct those points.

Yes, exactly. It got so annoying having Konqi open up my HTML files, XML files, and PHP files as HTML. I suppose I will switch back to get this script working, though.

In recent usage I've found it to only work when you're the last poster and at least one hour has passed since the post (or last Send To Top operation).

I just tested it out by trying to send my Extending Built-In Object With prototype Property (JavaScript) thread to the top, but it resulted in a blank/white page and the thread's position (timestamp) never changed; I assume because Dustin Dettmer was the last to respond.

A typo was preventing that from working.

Ah, I see.