Integration of a javascript timer with storyline

using a random question bank

Version 1.1
11-10-2016

Isabelle Aubin
Programmer-Analyst
 Table of Contents
INTRODUCTION ......................................................................................................................................................................................................................... 3
STEPS ......................................................................................................................................................................................................................................... 4

1 – THE BEGINNING OF THE GAME ............................................................................................................................................................................................................ 4

2 – THE RESULT SLIDE............................................................................................................................................................................................................................. 7
3 – RANDOM QUESTION BANK ............................................................................................................................................................................................................... 10
3 – HTML, CSS AND JAVASCRIPT TO ADD AFTER PUBLISHING THE STORYLINE .................................................................................................................................................... 17
Introduction

This document aims to explain the integration of a javascipt timer with storyline that uses a random question bank. We did this to counter a bug
with the storyline timer when you use random questions. In future versions of storyline, perhaps the following procedure will no longer be
necessary.
Javascript timer with a random question bank

Steps

1 – The beginning of the game

a) You have to add a Javascript trigger to « start the game »

Storyline Integration 4
Javascript timer with a random question bank

b) Once you’ve selected the settings, click the button script.

Storyline Integration 5
Javascript timer with a random question bank

c) Copy the following code, « starttimer(); » in the text box and click « OK ».

Storyline Integration 6
Javascript timer with a random question bank

2 – The result slide

a) You have to add a Javascript trigger to the start of the sequence.

Storyline Integration 7
Javascript timer with a random question bank

d) Once you’ve selected the settings, click the button script.

Storyline Integration 8
Javascript timer with a random question bank

c) Copy the following code, « stoptimer(); » in the text box and click « OK ».

Storyline Integration 9
Javascript timer with a random question bank

3 – Random question bank

a) Add the following variables : Nombre_question, Question et Timer_test. The variable Question will be displayed at the top of each
question.

Storyline Integration 10
Javascript timer with a random question bank

You have to do the next steps for each question in the question bank

b) You have to create a layer for the error message when the timer is up with a button that returns the user to the results page.

Storyline Integration 11
Javascript timer with a random question bank

c) Add a trigger to view the layer if the time has elapsed.

Storyline Integration 12
Javascript timer with a random question bank

d) You have to add a trigger to the start of the sequence and click the button script « timeline starts ».

Storyline Integration 13
Javascript timer with a random question bank

e) Copy the following code :

var player=GetPlayer();
var vNQ = player.GetVar("Nombre_question");
var vQ = "Question " + vNQ;
player.SetVar("Question", vQ);
in the text box and click OK ».

Storyline Integration 14
Javascript timer with a random question bank

f) You have to add 2 triggers the button « next ». Please note the order of the triggers are important.

Storyline Integration 15
Javascript timer with a random question bank

g) Do not activate the storyline timer

Storyline Integration 16
Javascript timer with a random question bank

3 – Html, css and javascript to add after publishing the storyline

a) In the output file of your storyline, open the document « story_html5.html »

Storyline Integration 17
Javascript timer with a random question bank

b) Add the following lines of code:

<script src="story_content/timer.js"></script>

<link href="mobile/timer.css" rel="stylesheet" type="text/css" />

Storyline Integration 18
Javascript timer with a random question bank

c) And add the following line of code :

<div id="time"></div>

Storyline Integration 19
Javascript timer with a random question bank

d) Put the file « timer.js » in the folder « story_content » of the output of the project

Storyline Integration 20
Javascript timer with a random question bank

e) Modify the time in the file « timer.js »

Eg for a period of 5 minutes :

Change these numbers

o 05 :00
o 4, 59

Storyline Integration 21
Javascript timer with a random question bank

f) Place the file « timer.css » in the folder « mobile » of the output of the project

Storyline Integration 22