Random numbers in Articulate Storyline 3

Random numbers in Articulate Storyline 3

Articulate Storyline 3 is one of the highly recommended authoring tool in e-learning industry. Using this tool we can create custom eLearning, engaging and interactive multi-device e-learning solutions. The flexibility to use JavaScript in Articulate Storyline 3 opens new door to customize things beyond the limits.

We came across a customization requirement from our client in which every time the user visits a slide, a random image need to be displayed. To meet this requirement, we used JavaScript and here is the description of the code.

 

Step 1

Create two layers and name them as “Min value” and “Max value”.

Layers_Random_numbers_in_Articulate_Storyline_3

Step 2

In the “Min value” layer, create a Number entry box.

Min_Value_Random_numbers_in_Articulate_Storyline_3

Next, create a button and name it as “Submit”.

Min_value_Submit

Rename the “Numeric entry” variable as shown.

Min_Value_Var

Step 3

In the “Max value” layer, create a Number entry box and a submit button as we did for “Min value” layer.

Max_Value_Random_numbers_in_Articulate_Storyline_3

Rename the “Numeric entry” variable as shown.

Max_Value_Var_Random_numbers_in_Articulate_Storyline_3

Step 4

Now, create one Text variable and one Number variable as shown.

RandSet_Var_Random_numbers_in_Articulate_Storyline_3

RandomValue_Var_Random_numbers_in_Articulate_Storyline_3

Step 5

Create a text box with “RandomValue” variable.

Textbox_Random_numbers_in_Articulate_Storyline_3

Now, create two buttons in the base layer and name them as “Click me” and “Reset me”.

Step 6

Add the following triggers to the “Max value” layer.

window.player = GetPlayer(); window.g_min = parseInt(player.GetVar('MinValue')); window.g_max = parseInt(player.GetVar('MaxValue'));
window.generateRand = function(){
	window.g_arr = player.GetVar('RandSet').split(',');
	var randValue = g_arr[Math.floor(Math.random() * g_arr.length)];
	if(randValue){
		g_arr.splice(g_arr.indexOf(randValue),1);
		player.SetVar('RandomValue',randValue);
		player.SetVar('RandSet',g_arr.toString());
	}else{
		alert("Randomization completed. Please reset.");
	}
}
window.resetRand = function (){
	buildRandArr();
}
window.buildRandArr = function(){
	g_arr = [];
	for(var i=g_min; i < (g_max+1); i++){g_arr.push(i)};
	player.SetVar('RandSet',g_arr.toString());
}
buildRandArr();

Max_Trigger_Random_numbers_in_Articulate_Storyline_3

Hide layer “This layer” when the user clicks “submit” button.

Max_Submit_Action

Step 7

Add the following trigger to the “Min value” layer.

1. Show layer “Max value” layer when the user clicks “submit” button.

Min_Submit_Action_Random_numbers_in_Articulate_Storyline_3

Step 8

Add the following triggers to the Base layer.

1. Execute JavaScript when the user clicks “Click me” button. In the script box, add below given code and click “OK”.

generateRand();

Base_Trigger1_Random_numbers_in_Articulate_Storyline_3

Execute JavaScript when the user clicks “Reset me” button. In the script box add below code and click “OK”.

resetRand();

Base_Trigger2_Random_numbers_in_Articulate_Storyline_3

Here, we have assigned code to a button for randomizing numbers. You can add this code to timeline or layer depending on your requirement.

Finally, publish the file to view the output.

Note: This code does not work in preview mode.
This method will be useful for an earlier versions Articulate Storyline 2 or 3. By default, the random variable is available in Articulate Storyline 360.

Click below to view this Sample:

Our Portfolio

Our Services: Rapid eLearning, Custom eLearning Solutions, Flash to HTML5 Conversion

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *