How can I return user to a specific div working with current code

Question

I have a form questionnaire with 12 divisions. The first div is display block and the others are display none. The div's are then shown and hidden with a tab function on click. The last div is a review of the form which is loaded by an ajax call. The code below is working fine up to the point where I want to add a button so user can go back and answer the unanswered questions

this code is working fine ** $(document).ready(function () { var tab_pool = ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6", "Q7", "Q8", "Q9", "Q10", "Q11", "Q12"]; var visible = $(".tab:visible").attr('class').split(" ")[1]; var curr_ind = $.inArray(visible, tab_pool);

        $('.next').click(function () {
             $("#processing").show();
                $.ajax({
                    type: "POST",
                    url: "process.php",
                    data: $('.data').serialize() + "&data=" + data,
                    success: function (data, status, xhr) {
                        if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
                 $("#processing").hide();
                        } else {
                 $("#processing").hide();
                            alert("Save failed");
                return false;
                        }
                    }
                });
    // There are conditions here such as if this then
    //  curr_ind = curr_ind + whatever to move to next relevant question 
        if (curr_ind < 11) {
            $(".tab:visible").delay(750).hide(0);
         $("#processing").delay(750).hide(0);
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).delay(750).show(0);
            $(".finished").delay(750).hide(0);
            $(".back").delay(750).show(0);
        }
    // if the user has reached the end then below we show the review of questionaire
        if (curr_ind === 11) {
         $("#processing").delay(750).hide(0);
            $(".finished").delay(750).show(0);
            $.ajax({ 
              type: "POST",
              url: 'review.php',
            data:  "username=" + username,
            success: function (data, status, xhr) {
             if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
             $("#review").show();
                $('#review').html(data);
              } else {
                alert("Review not available");
                return false;
                }
            }
            });
             }
        });
    // after the first question a back button is display for
    //  user to go back to previous question
        $('.back').click(function () {
            if (curr_ind > 0) {
                $(".tab:visible").hide();
    // There ar conditions here so user is brought back to 
    // the right div and not one that was skipped from conditions above     
                $("." + tab_pool[curr_ind]).show();
        document.getElementById(tab_pool[curr_ind]).checked=false;
                $(".finished").hide();
                $(".next").show();
            }
            if (curr_ind === 0) {
                $(".back").hide();
            }
        });

end working code **

// **** what I want here is a button for unanswered questions that will bring user
// back to that specific unaswered question
// I tried assigning a class and a numeric value to those buttons but
// for some reason I get a new blank page??? 
// I tried a few variations of the code below 
        function answerQ (value) {
        var returnTo = value;
            curr_ind = curr_ind - returnTo;
                $(".tab:visible").hide();
                $("." + tab_pool[curr_ind]).show();
        document.getElementById(tab_pool[curr_ind]).checked=false;
                $(".finished").hide();
                $(".back").hide();
                $(".next").show();
        }
    });

* * a sample of the button to go back to unanswered question

ANSWER

Answer 1

The easiest is probably to set a cookie.

Another option is to set localStorage or sessionStorage (if you can count on them having a modern browser).

Some reading on the topic:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ http://www.sitepoint.com/html5-web-storage/
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Answer 2

You need to remember how many times they have viewed the form. You didn't mention PHP but you have that as a tag so I'll assume that is what you are using. You could create a session variable for storing how many times the user has viewed the page/form. (this psuedo-code was written late at night and not tested but you should be able to get the jist of it)

if (!isset($_SESSION['viewCnt']))
    $_SESSION['viewCnt'] = 1;
else { //not the first time viewing the page/form, so increment counter and setup ajax
    $_SESSION['viewCnt'] = $_SESSION['viewCnt']+1;
    echo'
    <script>
        $(function() {
            //do your ajax call here to fill div6
        });
    </script>
    ';
}

echo'
<div id="1" style="display:'.($_SESSION["viewCnt"] == 1 ? 'block' : 'none').';"></div>
<div id="2" style="display:none;"></div>
<div id="3" style="display:none;"></div>
<div id="4" style="display:none;"></div>
<div id="5" style="display:none;"></div>
<div id="6" style="display:'.($_SESSION["viewCnt"] == 1 ? 'none' : 'block').';"></div>
';

If you don't want to use session variable then you can use cookies or HTML5 web storage: http://www.w3schools.com/html/html5_webstorage.asp

NOTE: the session method will start over with each new sign in to the application and the cookie method will start over depending on its expiration date or when the user clears their temporary internet files