Persist JavaScript values between pages

Question

I am trying to create a quiz on a web-page using HTML and JavaScript. Each question (having 4 options to choose from) is a seperate html file but uses the same JavaScript file to evaluate whether the choice entered is right or wrong.

However, I’m struggling to find a way to keep track of the number of correct answers provided by the users to calculate his/her score.

Is there a method to create static or static-like variables in JavaScript? Solutions involving cookies are also appreciated.

possible duplicate of [Persist javascript variables between GET requests?](http://stackoverflow.com/questions/1253821/persist-javascript-variables-between-get-requests) and [Persist javascript variables across pages?](http://stackoverflow.com/q/1981673/218196) and [persist value between two pages using javascript](http://stackoverflow.com/q/2477784/218196) --- please use the earch before you ask a new question. — Felix Kling, Aug 14 '12 at 14:28

score 5 · Answer 1 · answered Aug 14 '12 at 14:18

One possible solution is to load the HTML from your question file into a parent page, but have the whole quiz on that one page. That way, you still get the flexibility of having different pages for each question, but to the browser they are all one page. In addition, any variables created or traked in Javascript will persist throughout the entire quiz.

This is fairly easy to do with Jquery's .load function. You have a div in the middle of your page which loads its content from whichever HTML page you would have navigated to.

Do keep in mind that it is trivially easy for me to go into Javascript and change the number of correct answers. In fact, that problem exists for any client side solution. Should this be for more than fun, and accuracy is important, you may want to send results back to your server after each question. That way, no matter how you implement the quiz, results are persisted back on your end.

I am trying to keep it fairly simple as I'm new to Javascript.Hence I'd avoid doing things at the server side as much as possible at the moment.Thanks for your input.I'll look into this. — passmaster10, Aug 14 '12 at 14:34
@user1598264 Then I recommend sticking with the single-page application. You can keep it no more complicated than `$('#question-box').load("q" + questionNumber + ".html");` and it allows you to work with only a single page's Javascript scope — Nick, Aug 14 '12 at 14:36

score 2 · Answer 2 · answered Aug 14 '12 at 14:15

2

Have a look at http://www.electrictoolbox.com/jquery-cookies/ This allows you to easily set and read cookies.

answered Aug 14 '12 at 14:15

Johan Haest

4,391
28
37

score 1 · Answer 3 · answered Aug 14 '12 at 14:20

You can keep the data in cookie. however an user may change the cookie and produce better result. Using session is a better choice in this scenario. because whatever you store in client side is unsafe.

However It is better to get the questions in json format with xhr and display them in browser and keep the track in memory

score 0 · Answer 4 · answered Aug 14 '12 at 14:20

If you are developing a HTML5 application you may wish to investigate DOM storage facilities such as localStorage and sessionStorage: https://developer.mozilla.org/en-US/docs/DOM/Storage

Here are some useful resources / info:

http://ejohn.org/blog/dom-storage/

http://viralpatel.net/blogs/introduction-html5-domstorage-api-example/

http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx

score 0 · Answer 5 · answered Aug 14 '12 at 14:22

These days I would focus on making this a one-page app rather than relying on page loads. This not only has the advantage of solving your problem, it also means a more responsive, faster experience for the user.

If you must use page transitions, and you're happy to work with modern browsers only, look into localStorage. Far easier to use and more flexible than cookies - it works just like a serialised JavaSCript object.

Persist JavaScript values between pages

5 Answers5