How I Created This Interactive Chocolate Cupcake Preparation Interaction in Storyline2

Mar 18, 2016

In this exclusive example, I have used almost all the features available in Storyline 2 such as Slider, JavaScript, Variables, Drag-and-Drop, States, Triggers, Animations, and Sound Effects.


I designed this example to accomplish the following goals:

  • Make it highly interactive.
  • Present the desired information via illustrations and instructions, but not through audio narration.
  • Present the learner with a unique interaction in each screen.
  • Graphically pleasing and easy to navigate.
  • Should be accessible through all the devices.
  • Use realistic effects to make the user feel he/she is actually preparing the cupcake.
  • To understand how I created this, you can go through the description given below:

Let’s start with Slider.

I have used Slider to select the number of servings.

On the 3rd Screen I have extensively used the new feature of storyline 2 i.e. Slider, to select the number of servings.  As you move the slider, a new layer comes up which displays the revised amount of ingredients required for that number of servings.


Next is JavaScript

On the main page, when you click on the “Ingredients” icon, a layer opens up with the list of ingredients required. In this layer you will also see a Print button.  Similarly, in Screen 3, where you select the number of servings, a Print button is also displayed. The main idea of having this Print button is to allow you to have a hard copy of the ingredients and the amount of ingredients as per the number of servings.

I have made this possible using the Javascript: window.print();  (Script for your reference)


Next is Variables

I have used a variable to set the temperature of the oven. Initially the value of the variable “overheat” is set to 0. Each time when you click on (+) button, the value increases by 50, and when you click on (-) button, the value decreases by 50.


 Next is Drag and Drop and States

Drag and Drop and States are the main keys of this interaction. I have used them to make the user feel he/she is actually preparing the cupcake. 
I have used Drag and drop trigger to allow you to mix the ingredients in the bowl. And states for previewing the ingredients present in the bowl. In this entire interaction I have used multiple states of objects.

How I used Drag and Drop with States

In this interaction drag and drop and States work together. I have created six different states of object (bowl) as shown in the image below.

 And then added the trigger to change the state of the bowl when the ingredient is dropped. When the first ingredient is dropped in the bowl, the state of the bowl changes to 1. Similarly, when the next ingredient is dropped, the state of the bowl changes to 2 and so on.


Next comes Animation and Sound effects

We all know that Animation and SFX gives the realistic feel and makes the content more interactive.

When you click on the Scoop to fill the muffin tray, I have created an animation on the new layer which gives the feeling that the tray is being filled with the batter as shown in the image below.


To give realistic feeling I have used sound effects in various activities such as when you press the buttons of the oven, when you use the blender, etc.

I have also set a background music which plays in loop. I have done this using HTML code.

HTML code for your reference:

<audio preload="auto" autoplay loop autobuffer>

<source src="story_content/Music Background.mp3"> 





 I have referred the following sites to create this example. / /

4 Replies

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