Games and a slider from the beta

May 09, 2012

There were several projects that I created during the beta that I wanted to share now that Storyline has been released.  Two of these are games and the third is a slider control that changes the size of a circle.  Below is a short description of each project followed by a link to the published content and the project file.


The slider is a dragable control that will change the state of a circle based on the position of the slider's handle. This project uses states, variables, and drag objects to complete the effect.


Published Project

Matching Game

This matching game uses 9 animal pictures with 18 cards in all.  The cards are randomly placed so each time you take it, the cards will be in a different location.  In all, this project only using four variables, two to keep track of what is selected, one to track the total number of attempts, and a final variable to determine when all matches have been made.  States and layers play a key role in resetting when there is no match and hiding the cards when there is a match.  To randomize the placement of the shapes, I converted the slide to a freeform pick many question, made all the cards choices, and set the Shuffle property to Answers.


Published Project

Reversi Game

The reversi game is an advanced Storyline project that relies heavily upon javascript triggers.  This projects requires that you add an external javascript reference to story.html after publishing.  Because of the use of javascript triggers this project will not function properly when viewing the HTML5 output or when viewed within the Articulate Mobile Player.


Published Project

Once you have published the Reversi project you will need to add a reference to the included reversi.js file included in the project zip by following the steps below:

  • Open story.html in your favorite text editor 
  • Find the line listed below:

<script LANGUAGE="JavaScript1.2" SRC="story_content/user.js" TYPE="text/javascript"></script>  

  • Right above this line, add the following code:

<script LANGUAGE="JavaScript1.2" SRC="story_content/reversi.js" TYPE="text/javascript"></script>

  • Your code should now look similar to the following:

<script LANGUAGE="JavaScript1.2" SRC="story_content/reversi.js" TYPE="text/javascript"></script> 

<script LANGUAGE="JavaScript1.2" SRC="story_content/user.js" TYPE="text/javascript"></script> 

  • Copy the included reversi.js file to the story_content folder.
23 Replies
Sayuj Ravindran

Hi Theodre... Cool stuff...

I had a query... for the Slider project... i am wondering how you managed to make the slider (the red circle), 'dragable' only along the straight line? Why is it not possible for the users to drag the Red Circle along any other path...?? Sorry.. I dont knw if I am missing anything very obvious here...

saffir test

Nice with the matching game, so simple yet functional.

Confused, please explain:

Why did you use the second trigger of the two below? and why doesn't that make the picture disappear when it is clicked on?

It seems when the user clicks, the card is flipped(first trigger), then immediately should become disabled (2nd trigger)

saffir test

yep, me again.

When I copy one of your buttons and paste it in a new blank slide, it doesn't display the same when clicked on. This is what it looks like below one of yours. To get it like this I copied it to a new slide, and then pasted it back into the original slide with no modifications. I suspect his has something to do with my question above, I guess we'll have to wait and see...

Gerry Palmer

saffir test said:

Nice with the matching game, so simple yet functional.

Confused, please explain:

Why did you use the second trigger of the two below? and why doesn't that make the picture disappear when it is clicked on?

It seems when the user clicks, the card is flipped(first trigger), then immediately should become disabled (2nd trigger)

Hi Saffir,

The disabled state is a special built in state that is applied to the current state.  By default, when you set an object to the disabled state, the object is no longer clickable if it has a trigger assigned to it and it will retain the formatting of any custom state that was previously applied.  However, if you modify the appearance of the disabled state, this will override this behavior and the previously applied state's formatting will be lost.  I've attached a sample project that should demonstrate how this works.

Greg Cannon

Hello...I've used something similar to this slider (thanks for the inspiration!) as a way of assigning a level of guilt to a character in a Data Security course, however I have encountered a problem with my scoring mechanism. Basically as it stands at the moment once the slider is put in position along the track it adds or subtracts a score from the course total score variable which is great.

However problems start arising when the learner decides that their initial placement of the slider was incorrect and moves the slider again; this logically and technically correctly (but also annoyingly from my perspective!) triggers more points to be added/subtracted to the"totalscore" variable. Any idea how I can limit the adjusting of the variable to happen only once?

Could I create a submit button and trigger the points to be added only upon the clicking of the submit button?



Elizabeth Coughanour


I was so excited to try out your slider, and it worked just perfectly but for one really strange issue... When I put it into my project, the player buttons (next/prev) on the slide with the slider disappeared. Not only was the player trigger gone, but the buttons themselves had vanished as well.

I tried to fix the problem by creating a new slide (with the player buttons) and copying the slider content onto it. Unfortunately, when the player buttons are there and functioning, the slider does not function. 

I've tried every fix I can think of, but it seems the player buttons and the slider just don't want to be in the same place at the same time. Any advice you can offer would be fantastic. I am stumped. 



Rebekah Massmann

I just thought I would respond here because I encountered a similar situation to Greg's. I wanted participants to see how moving the slider impacted the total score, but to Greg's point, it was creating a cumulative effect. I'm sure there are a couple of ways around it, but what I did was set the TotalScore variable = the appropriate total (rather than using the add/subtract command).


Var 1a = 5

Var 1b = 10

Var 1c = 15

TotalScore = 20 + Var 1

So adjust TotalScore = 25 when Var1a changes (set condition when Var1a=5).

Hope this helps someone.

Trish Redd

Hi Christie,

When you hit Theodore's "contact me" link, you get the following message:


We'd love for everyone to benefit from your question. Can you please start a discussion in the community?

And if you need product support, just open a support case and we'll help you every way we can.



Any other way to access the files, they sound incredibly helpful?



Leslie McKerchie

Hey Trish - This thread is a bit dated and you are correct. The user you are trying to reach is a staff member, so we like to keep those conversations in the forums or within support cases.

I do see that the links are no longer working, but it was 5 years ago. I've reached out in case they may still have them...but no promises.

This discussion is closed. You can start a new discussion or contact Articulate Support.