Using JavaScript in QuizMaker

JavaScript is a programming language that works in a web browser on a client computer. For example, it can run an animation on web pages or show popup alert messages.

iSpring QuizMaker allows you to create simple JavaScript programs that will run after a quiz is finished. 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 the Google Chrome browser:

You can add some logic over the standard result procedures in your JavaScript program. For example, it can show a grade (A–F) instead of absolute score or percentage.

How to Execute JavaScript

1. 1

   Open an existing quiz or create a new one.

2. 2

   Select Properties on the QuizMaker toolbar.

3. 3

   Go to Result on the left-hand side menu.

4. 4

   Check the checkbox next to Execute JavaScript and click Customize...

Note the If user passes and If user fails options that appear as tabs on the top. If you want to execute JavaScript in both cases, make sure that you use the same code on both tabs.

In other words, programming starts here—you can execute the script only if the user passes (or fails), set a specific script per outcome, and other combinations of these choices.

Writing a script

After you click Customize, the JavaScript Editor will come up:

As you can see, it’s super simple and uncomplicated. It 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 use the following Quiz Variables in your script:

• Passing Score (%PASSING_SCORE%)

• Awarded Score (%AWARDED_SCORE%)

• Passing Percent (%PASSING_PERCENT%)

• Awarded Percent (%AWARDED_PERCENT%)

• Quiz Title (%QUIZ_TITLE%)

• Quiz Status (%QUIZ_STATUS%)

• Duration (%QUIZ_DURATION%)

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")

Simple 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. 1

   Go to Quiz Properties > Main > Check Ask for quiz taker information and click Customize.
   

2. 2

   Make sure that USER_NAME is a mandatory field.

3. 3

   Go to Quiz Properties > Result > Check Execute JavaScript and click Customize.

4. 4

   Select this code and copy to the clipboard:

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

5. 5

   Paste the code from the clipboard to the JavaScript Editor window and click Save.
   

6. 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:

Adding some logic

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.

You are welcome to share your JavaScript examples with our community. The best JS snippets will go to iSpring’s GitHub!

Important notes

• Don’t use Desktop (Flash) or EXE publishing options. We recommend Mobile (HTML5) or Combined mode.

• Make sure that JavaScript is enabled in your web browser’s security settings. See how to do it in all browsers: http://enable-javascript.com/

• JavaScript execution is not a part of the quick Preview option. Publish your quiz to preview it. If you opened QuizMaker within iSpring Suite, click the menu button in the upper-left corner to find the option to publish.

• Mobile devices might render alert messages in a specific way, so be sure to test it out prior to sharing quizzes with your mobile users. Read more here.