Integration of a javascript timer with storyline. using a random question bank. Version Isabelle Aubin. Programmer-Analyst

Transcription

1 Integration of a javascript timer with storyline using a random question bank Version Isabelle Aubin Programmer-Analyst

2 Table of Contents INTRODUCTION... 3 STEPS THE BEGINNING OF THE GAME THE RESULT SLIDE RANDOM QUESTION BANK HTML, CSS AND JAVASCRIPT TO ADD AFTER PUBLISHING THE STORYLINE... 17

3 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.

4 Steps 1 The beginning of the game a) You have to add a Javascript trigger to «start the game» Storyline Integration 4

5 b) Once you ve selected the settings, click the button script. Storyline Integration 5

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

7 2 The result slide a) You have to add a Javascript trigger to the start of the sequence. Storyline Integration 7

8 d) Once you ve selected the settings, click the button script. Storyline Integration 8

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

10 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

11 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

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

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

14 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

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

16 g) Do not activate the storyline timer Storyline Integration 16

17 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

18 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

19 c) And add the following line of code : <div id="time"></div> Storyline Integration 19

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

21 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

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