801.796.BROS (2767)

How to Build a Random Spinner in Storyline

How to Build a Random Spinner in Storyline_Blog Header 800x350

A few days ago I noticed a discussion in the Articulate Storyline forum about creating a random spinner for a game. I took up the challenge and created a solution that combines Storyline states, variables, and triggers. Of course there is some JavaScript sprinkled in there as well :-)

How to Build a Random Spinner in Storyline

Check out the demo here before reading on so you can see what the end result was.

View Demo

The goal was to:

  • Create a spinner that the learner can trigger.
  • It will land on a random number.
  • It will not land on the same number twice.

My solution was to use:

  • Pie segments.
    • States for normal, active, and disabled.
  • A Storyline knob.
  • Storyline variables for each segment.
  • Triggers to change the segment's state when the variable changes.
  • JavaScript that:
    • Selects a random number.
    • Removes that number from future spins.
    • Spins the knob.
    • Lands on the segment.
    • Changes the corresponding variable for that segment.

Check out the video below to see how it all works together.

 

var currentSlice = 0;

var spinLimit = 5;

var spinCount = 0;

var slices = [1, 2, 3, 4, 5];

var targetSlice = 0;

var spinning;

 

function getNextSlice() {

return slices.splice(Math.floor(Math.random() * slices.length), 1)[0];

}

 

function spinWheel() {

  var p = GetPlayer();

  p.SetVar("pieVisited_" + targetSlice, true);

  targetSlice = getNextSlice();

  if (!targetSlice) return;

  spinning = setInterval(function() {

    currentSlice++;

    spinCount++;

    p.SetVar("Dial1", currentSlice);

    if (currentSlice > 5) currentSlice = 0;

    if (spinCount >= spinLimit && currentSlice === targetSlice) {

      clearInterval(spinning);

      p.SetVar("pieSelected_" + targetSlice, true);

      currentSlice = 0;

      spinCount = 0;

    }

  }, 250);

}

 

Want more Storyline resources?

Sign up for a free 7-day trial of the eLearning Brothers Asset Library and gain access to tons of Storyline course starters, stock assets, cutout people, and more.

Free Trial

 


About the Author

James Kingsley headshot

James Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. James is a Solver of Complex eLearning Puzzles, Founder of CoursePortfolios.com, and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples.