I recently worked on a Storyline project that provides information about the dangers of concussions to sports coaches. The client wanted to use ‘virtual tours’ (360 degree interactive images) of an  ice rink, gym, soccer field, etc. to have learners check  for possible hazards in these environments. The idea was to  have leaners browse the virtual tour, zoom in/out to identify potential hazards (and recognize that some items are not hazardous at all) and click each hazard. That sounds simple enough; with the right camera equipment and software (e.g. easypano Tourweaver) a virtual tour can be built quite easily. Once completed, this tour can be published to Flash/HTML and then displayed as a web object inside Storyline.

But it’s never that easy. Rather than simply displaying the virtual tour element inside Storyline, the client wanted to:

• set a time limit (2.5 min.) to the virtual tour interaction, but the timer should start only when the tour is fully loaded and the learner clicks a button to begin
• display the remaining time
• collect one point for each clicked hazard and deduct a point for each ‘non-hazard’
• display the current score and update it as the learner clicks items in the virtual tour.

So the challenge was to find a mechanism for the virtual tour ‘to talk’ to Storyline, aka pass on scores  to Storyline. At first glance that seemed impossible. It’s like asking Storyline to change the value of a variable whenever my neighbour opens his garage door! First I experimented with a layer that is displayed on top of the web object but quickly realized that there is no way of knowing the exact location within the virtual tour when a mouse click occurs. After all the virtual operates completely isolated from Storyline.

After some research I found out that easypano, the software used to create the virtual tour, can attach a JavaScript to a hotspot and with that, a solution began to emerge:

• when the timeline starts, have Storyline execute a JavaScript to create a ‘blank’ cookie
• attach a JavaScript to each hotspot which, when clicked, writes a value to the cookie
• have Storyline periodically execute a JavaScript that reads the value element of the cookie
• based on the retrieved value, start the timer, and update and display the score variables in Storyline

It took A LOT of testing and tinkering with both easypano and Storyline, but the end result was exactly what the client wanted. With JavaScript and cookies enabled in your browser, you can try the completed test for this solution here.

For some information about cookies and how to work with them in JavaScript see here.

While this project was sports related, I can see this type of interaction being used for all sorts of workplace training e.g. identifying fire hazards, safety training for hospital workers and many more.

Once again, JavaScript and Storyline saved the day!