“Time flies over us, but leaves its shadow behind.” –Nathaniel Hawthorne

Book Time

A book has pages. You read pages in a consecutive order. You advance by flipping. It’s a page-turner. Each page takes you a certain amount of time to read. Adding up all that time gives you the total time you spent on reading the book. Like 10 hours? You may even calculate the average time you spent on each page. 5 minutes? You may count how many books you read a month. Like 3?

“However, all these numbers have nothing to do with how much time you travel within the story!” — Anonymous

Time in Instructional Design

Traditionally, when designing elearning, you may think in slides. The term “page-turner,” in elearning has a pejorative connotation: a course that is boring without any meaningful interaction where you advance the slides by clicking the next button. Sounds like reading a book?

Game Thinking Essentials: Time to Forget About Slides

When applying game thinking to learning (whether it’s gamification or game-based learning as an outcome), it’s time to forget about slides. Think of the experience as a whole, see it from the user’s perspective. You don’t start out writing a book by filling each page. Think of your gamified elearning as a system. A system that the user interacts with over time.

The time the user spends with interacting the system (like reading a book) and the time the user experiences within the system (the story itself) are two different concepts.

[code]If (you = just want to download and play around the time ticking engine in Storyline)

{

here’s the[/code] download link

[code]}

else

{

continue reading…[/code]

Example:

Let’s say you want the user to be able to grow some produce in the field. There are seven major steps they need to follow in order. Instead of creating an introduction to growing produce, a chapter on history of agriculture and a click and reveal interaction on each of the seven steps, you decide to apply game thinking.

This is a prototype of your market. We’re focusing on functionality for now. The goal is to grow produce by applying the correct steps in order. Once you go through all steps, you can then harvest your produce and sell it on the market. In return, you get coins. For coins, you can buy more land. The game mechanics used in this prototype is: match/order (match the correct step of growing produce with the stage each land). (It will also have some others like strategy, randomization/unpredictability, etc.)

You own one land when you start. The rest of the lands are locked. The actions (steps to grow produce and sell/buy) are available at the bottom:

 

Once you own a land, you can start growing produce. When you visit the land, you see what the last step you have completed. In this case, you’ve prepared the land. Now it’s time to plant. Matching the land with the correct next step starts the land’s timer because it does take time in real life to plant, right? It’s not a drag and drop with immediate feedback on the field. Once you get through all seven steps, you’re ready to harvest…

This is where strategy comes in. You may sell your harvest any time on the market. However, market changes like in real life (unpredictability/risk), so does the land market to buy land. You may want to hold on to your harvest and grow more… But you can only hold on to up to 5 harvests any time (strategy). If you wait too long with a harvest on the land, it goes bad and you waste money invested.

And in Level 3? Your action no longer show up in order. Good luck remembering what comes after what 🙂

Using a game engine, this would be easy to make. A game engine like Construct 2 comes with a “ticking time”. You would have to create only one land and its behavior, and just clone it as many times as you want…

I Don’t Have a Game Engine

Let’s say you do not have a game engine. You want to do this in Articulate Storyline 2. Storyline has slides, and each slide has its own timeline, so in a sense, there’s ticking built in. However, remember, we’re not thinking in slide-time. We’re thinking in global time, system time ticking. That means, if each land is a slide above, you want to be able to travel from slide to slide, yet you want each slide-timer to keep ticking, growing the produce. If you do no action, your produce would go bad, not matter where you are.

JavaScript and GameTime

Variables are global in Storyline, which means no matter where you travel (slides or scenes), the variable does not change its value, and it is always accessible. So, it would be great to have a variable, called “Tick,” to just keep ticking every X seconds, for example. Right? JavaScript can do that. This JS engine updates the Tick variable in Storyline every second. You can then use that variable to trigger actions on any slide, any time.

CLICK IMAGE TO TRY

In Storyline, as you see below, we’re showing the variable, Tick. Once you click the START TICKING button, a JS executes the trigger: startGameTime(); This will start the ticking. Every second (approximately). the variable Tick is updated. You can then use this to trigger actions anywhere. If you do not want to know how it works, you can just copy paste the JS code into your project (instructions here), create a variable called Tick, and add trigger startGameTime(); somewhere in your Storyline file as a JavaScript trigger.

That’s all good but…

This will tick forever, showing the absolute time lapsed. What about relative time? In our example, we’re growing produce. We don’t know WHEN we start growing produce, the only thing we know is how long it takes to complete each step in the process. The solution is to be able to add other timers as well. It’s like a countdown. You can start it any time, and it will tell you when time is up. Let’s see an example:

CLICK IMAGE TO TRY

This is a little more complex than the previous example. You start the main ticking clock by clicking the TICK button. However, you can adjust the slider how fast/slowly you want the ticking happen. The quickest is 1 second but you can adjust it to 5 if you want. Sometimes you don’t need changes every second… Previously, you added a startGameTime(); JS trigger to start the ticking. The default speed is 1 second. You can, however, slow it down by startGameTime(5); for example, to tick every 5 seconds.

The other important thing here is the secondary timer. Let’s say you grow produce (represented by the blue square). The produce has four states to show. What you want is to show each state (size difference to display growth) for 3 seconds, and then move on to the next. Do you see the complexity? If you’re only using the main tick, how do you stop for three seconds for each state? You can actually do that in Storyline with extra variables but it is much easier with the JS engine: you can always start a secondary timer like the one above: it will count down from 3 to 0 (four states). Each count takes 3 main ticks. You can also adjust it with the slider.

The following JavaScript is triggered when you click the secondary timer button:

addTicker("tick2",4,3,0,"tick2status");

adTicker -- Name the function. You just use it as is.

Arguments:
"tick2" -- Name of the Storyline variable you want the system to countdown to 0.
4 -- That is how many ticks it will take to count down 1 on the secondary timer. For example, setting it to 1, your countdown happens at every main tick.
3 -- This is where the countdown starts with: 3-2-1-0. With each countdown the tick2 variable is updated.
0 -- 0 or 1. 0 means no recycling. When countdown ends, it ends. 1 means recycling. When countdown ends, it restarts again.
"tick2status" -- Name of the variable (number) that you can designate as status. When the countdown starts, it is set to 2. You can use that to check if counting is progress. 
When counting is complete, it is set to 1.

 

When the counter stops, it changes the status of a variable (of your choice) to indicate that it is done. You can then trigger something based on the counter:

The ticking takes place globally, so you can go to another scene or slide and it’s still going. You can pause and resume the game time ticking, which would stop all secondary ticking, so you can show a message or feedback if you want.

What if something should be continuously counting down? What if there’s a cycle you want to represent? In other words, you want to count down from 3 -0, and then again 3-0, etc. With a little extra info, you can:
addTicker(“tick2″,4,3,1,”tick2status”); Changing the 0 to 1, the system now knows that the countdown should be recycled.

Ready to try?

Download the zip file from here. Beta. Expect bugs.

1. Unzip

2. Open source story file. Tweak. Publish.

3. Copy the content of rabbitoreg_timer.js into the end of the /story_content/user.js file. Save it.