The document attached below demonstrates how to create a simple quiz:
The number of correct answers are displayed at the end of the document (scene 3)
Incorrect answers play a ‘Wrong’ timeline
Correct answers add one number to the score, and play a ‘Correct’ timeline.
The number of correct answers are tallied on the final scene.
The following scripts are used:
Run this JavaScript when a correct answer is submitted:
// If this is the first question, make sure we start with a value of 0 for the score.
if(typeof quizScore === 'undefined'){
window.quizScore = 0;
};
// This is a correct answer, so we'll add 1 to the score.
window.quizScore ++;
// We'll also play the timeline 'Correct' to allow them to continue the quiz.
hypeDocument.startTimelineNamed('Correct', hypeDocument.kDirectionForward);
Run this on the last scene to calculate the score:
// Place the value of 'quizScore' in the element with the Unique Element
// id set to 'score'.
// You can set the Unique Element ID of elements in the Identity Inspector
hypeDocument.getElementById('score').innerHTML = quizScore;
You can optionally reset the score on each load by running the following function ‘On Scene Load’:
window.quizScore = 0;
Scoring / Results
Since we have the window.quizScore = 0; variable, if you want to tally the score at the end, and reward your quiz takers who get a certain number of points, use this function ‘On Scene Load’ in the last scene:
if (window.quizScore >= 6) {
// run a timeline, or something to show that the score is 6 or higher
} else {
// they didn't do so well, so run a timeline or some other action
}
For a great example of a quiz using LocalStorage (a persistent storage system supported by many browsers that retains data after closing the browser), please check out this example by @MarkHunte.
Question & Answer Template
There are many more examples of quizzes on the forums – search for ‘quiz’ or ‘test’. Here’s a recent on by @59shasta: Another Q & A template
Thanks for this. I’m using this for a touchscreen display. Throughout the quiz folks have an option to return to the beginning and try again. The problem is that the score just keeps adding up. I need a way to reset the score upon return to the first scene. Any assistance very, very much appreciated.
This is great! Question though - even with the sample file I (again, it’s my lack of Javascript knowledge) can’t figure out how to get the final score to show up on my last slide. What calls it from the background and physically puts it next to the “Total Correct” text?
I have a question. Everything went fine with this, but what if I want to play another timeline if my score is Zero? I have the window.quizScore at the first scene, I’ve tried to modify the “if, else” with no success. What can I do?
The example only increments the score when you are correct and the starting score is zero, so there’s not really a time when it would drop back down to zero. If you are decrementing the count in your code, perhaps you could post the zip of your own .hype document and we could provide better guidance for the changes.
Great functions! I have run into problem though, I have made two layouts for each scene, one for desktop and one for mobile. I have duplicated the scripts and renamed the second ones to ie quizScore2, so each layout has its own scripts. The second IDs are taged with “xxx2”. Everything works fine - except for android phones. They double the score. Why? Any help much appreciated.
i did not test anything here in this thread, but if the above remains on click-events then for example android chrome will fire twice+. so you’ll better go with touchstart there …
Hi everyone, I am experimenting with Hype-javascript. I created a simple quiz. The quiz is almost working but I have 2 small issues:
1- When score is 0 the score window doesn't display any number
2- When user score max (5) the final score indicates 4 instead. (if you score lower result is correct)
Could you help me solve this issue. I been reading a lot of posts but I cannot find something directly related to my issue. I've enclosed the file here.
it worked!!!!! I still cannot see the 0 when someone gets 0 correct answers. Is it also something that simple or can I use a specific function? Something like if score=0 window.quizScore=0 ?
I think I also found the solution to the 0 issue. If I input the 0 in the text box. It will show 0+'X'
where X is the actual score. So 1 correct answer will display 01 but 0 correct answer will simply display 0. Haven't tried yet but I think it's most def the case.
