Overview

There are lots of fun ways to include randomness into your learning interactions. For example, your design might include a point system, and every correct response the learner gets a change to spin a wheel to earn a random amount of points. Or you may have designed your learning as a board game that requires learners to ‘randomly’ travel across a board. Each board square would offer different challenges, information or rewards.  You could also have a scenario where you offer series of challenges or obstacles that are randomly selected.

This blog tutorial covers how to create your own animated spinner.  As a warning this tutorial uses a lot of javascript and some basic geometry. There are lots of ways to modify this method, and of course change the design to look much nicer.

I will attempt to explain a little bit of the javascript at the end.   Please feel free to download the example .cptx file.

randomSpinner

*Note that for the purposes of this tutorial, I will be using a 6 section wheel, with the arrow’s starting point at 90 degrees.  This can all be modified, but the numbers would need to be altered. 

Step 1: Create your image assets

• Import an image of a wheel with 6 sections.    I aligned the image horizontally and vertically on the slide. Note that the arrow should align with the 90 degree section on the wheel.
• Import an image of an arrow pointing at 90 degrees (i.e. to the right). Align horizontally and vertically as well.  Give the arrow the id ‘arrow’.
• I added a little Captivate shape circle in the center as well.
• Add the text to each section (I used numbers, but you could substitute for words as well.

Step 2: Add variables

• Click project –> variables.
• Add a variable called ‘prize’ with the value of 0

Step 3: Add Textbox

• Create a textbox with the id ‘txt’ and hide it from view
• Have it display the variable ‘prize’

Step 4: Create and program Spin Button

Create a shape and use as a button.

On press Execute the following javascript:

var eRot = Math.random() * (2520 – 2160) + 2160;
cp.hide(‘txt’)

switch (true) {
case (eRot < 2220):
prize = 3;
break;
case (eRot < 2280):
prize = 4;
break;
case (eRot < 2340):
prize = 5;
break;
case (eRot < 2400):
prize = 6;
break;
case (eRot < 2460):
prize = 1;
break;
case (eRot < 2520):
prize = 2;
break;
}

arrowc.animate([
{
transform: ‘rotate(0deg)’,
transformOrigin: ‘center’,
},
{
transform: ‘rotate(‘ + (eRot) + ‘deg)’,
transformOrigin: ‘center’,
}
], {fill: ‘forwards’, easing: ‘cubic-bezier(0, 0, 0.10, 1)’, duration: 7000 }).onfinish = revealPrize;

function revealPrize(){
cp.show(‘txt’)
}

Explanation of Javascript (for those interested )

There are two main principles used in this script – the animation and the random number.

Random Number

When the script is executed, the variable eRot is assigned a random number between 2160 – 2520 and evaluated in a switch statement.  Why 2160?  I wanted the arrow to rotate 6 times before stopping.  So 360 x 6 = 2160  and add another 360 gives you a range between 2160 and 2520.  Therefore the arrow will spin five times and then stop somewhere between 1 and 360 degrees.

The ‘switch’ statement evaluates eRot and determines what to set ‘prize’.  Because there are 6 sections (360 / 6 = 60) each section is 60 degrees.  Therefore stopping anywhere between 2160 and 2220 will give you the ‘3’ wedge.  (Remember that the arrow started pointing at 90 degrees).   This is how the random number corresponds exactly with the prize number.

Animation

I have a few other blog tutorials on animation but will point out a few additional details here.

https://elearning.adobe.com/2018/01/how-to-animate-buttons-and-lots-of-other-cool-javascript-stuff/

https://elearning.adobe.com/2018/03/animated-scale-drag-drop/

I am using a transform rotate animation and have set the transformOrigin to center (so that the arrow will rotate around the middle).

transform: ‘rotate(0deg)’,
transformOrigin: ‘center’,

On the second animation ‘frame’ I set the rotate to eRot using

transform: ‘rotate(‘ + (eRot) + ‘deg)’,

For the options I’m using a custom easing (using a ‘cubic-bezier’)  so that the arrow slows down gradually.

easing: ‘cubic-bezier(0, 0, 0.10, 1)’

The other feature on this animation is it uses a callback function. Essentially this executes another function when the animation ends.

.onfinish = revealPrize;  //executes revealPrize when the animation ends

I then create a function called revealPrize that shows the text box.

cp.show(‘txt’)

I hope this will be useful to some people in their projects.  Please feel free to comment or ask any questions about the script.