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.

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.

• javascript
• html
• cookies
• static

• 1 possible duplicate of Persist javascript variables between GET requests? and Persist javascript variables across pages? and persist value between two pages using javascript --- please use the earch before you ask a new question. – Felix Kling Commented Aug 14, 2012 at 14:28

5 Answers 5

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.

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

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

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

Here are some useful resources / info:

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

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

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

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.