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

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.