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

Open an existing quiz or create a new one.

2

Select Properties on the QuizMaker toolbar.

3

Go to Result on the left-hand side menu.

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.

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:

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.

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!

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.

Was this article helpful?

Thanks for your feedback!

How can we help you?

EMAIL

MESSAGE

Your request to iSpring has been submitted.

Please check your email for support replies. We reply to every message asap. If you don't hear back from us, check your spam folder and add to your list of approved senders.