Howto: Simple Quiz Example

Interested in using Tumult Hype for educational content? Read this blog post: https://blog.tumult.com/2014/04/16/creating-interactive-educational-content/

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:

  1. 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);
    
  2. 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;
    

This example demonstrates this code: quizdemo.hype.zip (391.6 KB)

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 
   }

(Thanks @drewbullen!)

Using LocalStorage

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

7 Likes

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.

In your first scene, add an onSceneLoad function that resets the quizScore variable to zero (i.e. window.quizScore = 0;)

1 Like

Thanks drewbullen—much appreciated.

I have some questions.

  1. If my correct answer is a word, how can i count the answer to the score???
  2. If i want each answer to count more than 1 point how i do that???
  3. If i want to compete all the questions of the quiz and then to show the results, how i do that???
    Thank you in advanced.
1 Like

Is it possible to record the student’s score so that a teacher could review how the students did in the quiz?

You will probably need to use PHP post message to do this. Search the forum for php to see some example.

But an example is here

1 Like

Many thanks Mark.

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?

Never mind…I ran it through EdgeCodeCC to look under the hood. Once I made the empty text box identifier “score” it worked like a charm.

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 …

3 Likes

Oh, didn’t know that. Great! That did the work! Many thanks Hans-Gerd!

1 Like