A Simple One Page Javascript Quiz

A simple question asked over at Web Developer Forum got me interested in writing a simple one page javascript quiz. So, in this article I am going to do a little tutorial on how to write a simple one page javascript quiz.

First of all, the concept.

In his/her post, the poster have developed a three page html file with some css files. However he/she has problems with the results only showing on the question page. It should be on the result page. He/she uses JQuery to help with loading the question and calculating the result.

From my point of view, the problem is with storage of result. I have yet to know a way to store result across pages using Javascript. Why ? Because when a page is changed, a new Javascript is loaded. So, the new page have no idea what happened in the previous page. It is there for security reason. To disable injection attack. But that is another story.

The solution is to load all three page in one HTML file.

It is possible to do it with Javascript alone. Another way is with HTML5 persistent storage. But, I am going with Javascript method for now.

simple-one-page-javascript-quiz-page-introSo, first, I create three div that will contain intro, question and result. This one is quite simple, just create three div with different id.

<div id='intro'>
 Hello and welcome to javascript quiz!
 Click next to continue.
 <a href="#" onclick=showQuestion();>NEXT</a>
 </div>
 <div id='question'>
 Question:
 <form>
 question 1:<br />
 <input type="radio" name="question1" value="1">1</input>
 <input type="radio" name="question1" value="2">2</input>
 <br />
 question 2:<br />
 <input type="radio" name="question2" value="1">1</input>
 <input type="radio" name="question2" value="2">2</input>
 <br />
 </form>
 Click see result to continue.
 <a href="#" onclick=showResult();>SEE RESULT</a>
 </div>
 <div id='result'>
 Result
 <span id='quizresult'>0</span>
 Click redo to redo the quiz.
 <a href="#" onclick=showIntro();>REDO</a>
 </div>

To move along the “pages”, we create a simple link using <a href> pointing to nowhere (#) and use javascript onClick event to move forward. The onClick event are actually Javascript functions that play with the visibility of the document element.

I did remember that Javascript have the getElementById method, but I forgot the exact method. A simple lookup on Google and I got the answer at W3C School.

simple-one-page-javascript-quiz-page-questionIn the past (circa early 2000), we would use CSS properties to hide/ show a div. But today life is more simple. I found a great solution at JavascriptKit to show/hide a div. It can even remove the extra document space used for each div. Excellent!

function showQuestion()
 {
 intro = document.getElementById('intro');
 intro.style.display = 'none';
 question = document.getElementById('question');
 question.style.display = 'block';
 }
function showResult()
 {
 processQuiz();
question = document.getElementById('question');
 question.style.display = 'none';
 result = document.getElementById('result');
 result.style.display = 'block';
 }
function showIntro()
 {
 result = document.getElementById('result');
 result.style.display = 'none';
 intro = document.getElementById('intro');
 intro.style.display = 'block';
 }

Now, if you notice in the showResult() function, there is another function being called, the processQuiz() function. This is where the score calculation for the quiz result are done.

simple-one-page-javascript-quiz-page-resultIt has been a long time since I got to play with a radio button, so my memory are a bit rusty. A quick Tryit Editor at W3School and great answers from StackOverflow quickly refresh my memory.

function processQuiz()
 {
 total = 0;
 value1 = 0;
 value2 = 0;
answer1 = document.getElementsByName('question1');
 for (var i = 0, length = answer1.length; i < length; i++) {
 if (answer1[i].checked) {
 // do whatever you want with the checked radio
 value1 = answer1[i].value;

 // only one radio can be logically checked, don't check the rest
 break;
 }
 }
answer2 = document.getElementsByName('question2');
 for (var i = 0, length = answer2.length; i < length; i++) {
 if (answer2[i].checked) {
 // do whatever you want with the checked radio
 value2 = answer2[i].value;

 // only one radio can be logically checked, don't check the rest
 break;
 }
 }
 total = parseInt(value1) + parseInt(value2);
result = document.getElementById('quizresult');
 result.innerHTML = total;
 }

The result are stored in the <span> called quizresult inside the result <div>.

There was one problem with the calculation. Javascript assumes the values are string, so when 1 + 0, it becomes 10. Now, we do not want that do we. Again, great answers from StackOverflow comes to the rescue. We use parseInt() function to force the math calculation.

And there we have it, a simple Javascript quiz in a single page. You can modify the quiz question and processing to fit your needs. And the best thing is it looks like three separate pages.

You can view the full script over at my answer at Web Developer forum.