How can I implement a "wizard" style page using JQuery?

Question

I am implementing a questionnaire on the web and I'd like for each block of questions to have its own "page" so the user doesn't have to scroll. However, page loads have two problems: a) they take time (and have a noticeable flicker/refresh) and b) such an approach would force me to do a data table insert plus multiple updates (or store it all in my session).

How can I use JQuery to let the user page through the questionnaire on the client side, answering questions as he goes? I'll then be able to handle the data store when all the answers are submitted at the end.

One other thing...is there a way to make sure that the session doesn't time out if the user takes awhile?

Answer 1

This is a pretty simple thing to do in JavaScript/jQuery. What's wrong with loading the entire questionnaire HTML and hide all the blocks except the one you want to show? This is as simple as $(element).hide(); and $(element).show();.

If the HTML of the entire questionnaire is too big, you could try separating each block into its own HTTP Request, and have JavaScript load it every 5 seconds (or so) through Ajax. This way the user can start the questionnaire right away instead of waiting for the entire thing to load, and it can also be one way to keep your session alive.

Answer 2

A quick google search yielded this - http://plugins.jquery.com/project/formwizard.

As for your second question, you can perhaps implement a 'keep-alive' page which you can periodically send AJAX requests to using setInterval.

Answer 3

Personally, I'd probably go with simplicity in this case. Load all of the content up front in the initial page load in hidden divs. Then use jQuery to show/hide each of the questionnaire "pages":

div#pageTwo {
     display: none;
}

<div>
    <div id="pageOne">
        <p>Do you like the color blue?<p>
        <p>What about green?</p>
        <a href="#" onClick="gotoPageTwo();">Next Page</a>
    </div>
    <div id="pageTwo">
        <p>...</p>
    </div>
</div>

Where gotoPageTwo is a function that utilizes jQuery to make the transition between divs. This can be as simple as $("div#pageOne").hide() and $("div#pageTwo").show() or you could add some nice smooth animated transitions for a slightly enhanced User Experience (just don't go overboard as too many animations can quickly become distracting.)

You would also then use jQuery to make AJAX calls back to the server at some interval (shorter than your session timeout time) to make a simple request. That simple request in the background will ensure that the User Session stays alive.

Answer 4

I'm not just trying to hawk my jQuery plugin or anything, but I do have a decent jQuery Wizard implementation which may help you a lot: http://github.com/desdev/jWizard / http://plugins.jquery.com/project/jwizard