Howto: Simple Quiz Example

knowledgebase

#1

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.


Interactive Quizzing
Type-in/Written Quiz
How to do such a test question?
Share quiz score on Facebook and twitter?
How to create a text box which, when filled correctly, starts a timeline?
#2

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.


(drewbullen) #3

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


#4

Thanks drewbullen—much appreciated.


(kostas) #5

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.

#6

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


(Mark Hunte) #7

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


#8

Many thanks Mark.


(DaveJohnson) #9

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?


(DaveJohnson) #10

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.


Knowledge base: Guides from the Tumult Team