JavaScript Customization

iSpring QuizMaker allows you to create simple JavaScript programs that will run after a quiz is finished.

For example, it can run an animation on web pages or show popup alert messages. This program can also utilize user variables and result values such as score or time.

Check out this example alert message that pops up in Google Chrome:

How to execute JavaScript

1. Open an existing quiz or create a new one.
   
   
2. Select Properties on the QuizMaker toolbar.
   
   
   
   
3. Go to Reporting on the left-hand side menu. Then, check Execute JavaScript and click Customize...
   
   
   
   

4. The JavaScript Editor window will open.
   
   
   
   The JavaScript Editor lacks any debugger options, but highlights your code for better reading. If your code contains an error, the script simply won’t do anything. Use a third-party editor such as Notepad++ or a JS code debugger to feel comfortable, and just paste the finished code in the iSpring JavaScript Editor before publishing.
   
   You can insert quiz variables in Insert Variable drop-down and set Target to define script execution area. 
   
   

   Variable	Description
   %PASSING_SCORE%	Quiz passing score (for graded quizzes only)
   %AWARDED_SCORE%	User score for the quiz (for graded quizzes only)
   %PASSING_PERCENT%	Quiz passing percent is a number from 1 to 100.
   %AWARDED_PERCENT%	User score for the quiz in percent of total. Percent is a number from 1 to 100.
   %QUIZ_STATUS%	Status of the quiz: "Passed", "Failed", "Completed".
   %QUIZ_DURATION%	Time in seconds spent by the user to pass the quiz.

   Quiz variable must be surrounded by "%" characters. Otherwise it will be defined as a string.

   
   

   Also, you can use user variables, such as %USER_NAME%, %USER_EMAIL%, etc. Make sure that you receive these variables by either asking the user for this information or placing it in an LMS where it is passed automatically.

   Also, you can execute script in a specific window using these standard HTML choices:

   • The same window ("_self") — we recommend that you use this option

   • New browser window ("_blank")

   • Parent window ("_parent")

   • Top window ("_top")

How to add an alert message

Let’s add a simple alert message with JavaScript that will use some variables. Put your alert message in quotes and in one line. The command ‘\n’ is used to create a line break.

1. Add a User Info slide to your quiz. To do that, click on Introduction > User Info.
   
   
   
   
2. Make sure that the Name field condition is set to Mandatory. 
   
   
   
   
3. Go to Quiz Properties >Reporting > Check Execute JavaScript and click Customize.
   
   
   
   

4. Select this code and copy to the clipboard:
   
   

   alert("%USER_NAME%, you passed the test!\nYou got %AWARDED_SCORE% points.")

   CODE

   
   
   

5. Paste the code from the clipboard to the JavaScript Editor window and click Save.
   
   
   
   
6. Publish your quiz and open it in a web browser to test.
   
   The learner will enter a name, which will be stored in the %USER_NAME% variable:
   
   
   
   After successful quiz completion, the learner will see the following message:
   
   
   

How to add a custom alert with grading

If we take JS coding a little further, we can add some logic over the results that we get and show a custom message, not just the name or score. For example, we can program a school grade scale, where A-F grades are related to certain score intervals.

We will use logical operators to solve this task. Let’s stick with ‘if’ and ’else’ operators in this example.

Let’s take that Number to Letter conversion table for schools:

And write it in JavaScript:

if (%AWARDED_PERCENT% < 60 ) {
  alert("Your grade is F");
}
else {
  if (%AWARDED_PERCENT% <= 70 ) {
    alert("Your grade is D");
  }
  else {
    if (%AWARDED_PERCENT% <= 80) {
      alert("Your grade is C");
    }
    else {
      if (%AWARDED_PERCENT% <= 90) {
        alert("Your grade is B");
      }
      else {
        alert("Your grade is A!");
      }
    }
  }
}

This will give the respective reply to a learner according to the awarded percent value. A similar solution can be applied to a psychological test where score intervals match character type, not grade.