How to Create a Pizza Game in Storyline

Play the Pizza game:

Let's look into how to create this game step by step.

Prepare the slide

You can use our Storyline exercise file or create your own for this exercise. Create a slide where users will drag and drop ingredients into the pizza base. Have the ingredient and pizza base images ready. 

Important: Ensure that the images you use for the drag and drop are all in PNG format. I made the mistake of using an SVG and the Drop Correct state was not displaying correctly. But it works fine with PNG.

 

Set Up Drag & Drop

• Convert the slide to Freeform:
  Select the ‘INSERT’ tab on the Storyline ribbon, click ‘Convert to Freeform slide’, and select ‘Drag and Drop.’ Click OK.
• Select your ingredients and the Drop Targets (the pizza base/pizza-target). 

Note: 

Instead of using the pizza base image as the drop target, I created an oval shape in Storyline, set it as invisible, and laid it on top of the pizza base image - where the tomato base is. This is done to ensure that the toppings don’t go outside the tomato base area and that the drop state is not activated as soon as it enters the pizza base image area.

Adding the Drag & Drop Interaction

1. Select the Slide view.
2. Click on the 'Question Tools: Design' tab on the Storyline ribbon. 
3. Click on 'Drag & Drop Options'. A window will pop up. 
   On the Drag & Drop Options window:

• Drag Item Options:
  Tick: Return item to start point if dropped outside > a correct drop target
• Drop Target Options:
  Tick: Snap dropped items to drop target > Snap to center
• Feedback:
  Tick: Delay item drop states until interaction is submitted

4. Click' OK'.

Setting Triggers for the Correct Ingredients

If you are using our exercise file, you can see that we have set up the ingredient items to include two states: 

• a Normal state, as how the ingredients would be displayed before they are dragged onto the pizza; and
• A Drop Correct state, where the items look as how we want them to look on the pizza. 

Now let's set up the interaction so that when users drop the right ingredients into the pizza base, the chopped/shredded items are shown on top. For this example, we will use Pepperoni pizza, which only has two ingredients: pepperoni and cheese.

1. Under the 'Triggers' panel, select the left button to create a new Trigger.
2. In the Trigger Wizard window put the following settings:
   

   Action	Change state of
   Object	pepperoni 1
   State	Set state to Drop Correct
   When	When the user drops the object on the target
   Object	pepperoni 1
   Target	Pizza-target 1

   
   Click OK.
3. Create another Trigger for the cheese.
4. In the Trigger Wizard window put the following settings:
   

   Action	Change state of
   Object	cheese 1
   State	Set state to Drop Correct
   When	When the user drops the object on the target
   Object	cheese 1
   Target	Pizza-target 1

   
   Click OK.

Preview the Slide to check if it works properly. (On the Storyline ribbon, click: Preview > Slide)

Setting Triggers for the Wrong Ingredients

For this interaction, several things are happening:

1. A popup appears that lets the user know that they have dropped the wrong ingredient on the pizza base
2. The wrong ingredient does not appear on the pizza base when dragged onto the target.
3. A ‘disabled’ state of the item appears on the ingredients list in place of the one that had been dragged.

Create the Popup message.

1. At the bottom right corner of your Storyline window, Open the Slide Layers panel. By default, a 'Correct' and an 'Incorrect' layer should have been created for you. Delete these two layers.
2. Create a new layer. Rename it as 'wrong ingredient' or similar. In the new layer, create a popup dialog, and write a message.
3. Create a button to close the layer. 
4. Set a trigger for the close button: Under the 'Triggers' panel, select the left button to create a new Trigger. In the Trigger Wizard window put the following settings:

   Action	Hide layer
   Object	This layer
   When	When the user clicks
   Object	[your close button name]

   
   Click OK.

1. Activate the popup

Click on the Base Layer. Add a trigger so that the popup appears when users drag the wrong ingredients on the pizza base.
Under the 'Triggers' panel, select the left button to create a new Trigger. In the Trigger Wizard window put the following settings:

Action	Show layer
Object	Wrong ingredient
When	When the user drops the object on the target
Object	mince 1
Target	Pizza-target 1

Click OK.

2. Wrong Ingredients Drop state

Under the 'Triggers' panel, select the left button to create a new Trigger. In the Trigger Wizard window put the following settings:

Action	Change state of
Object	mince 1
State	Set state to Hidden
When	When the user drops the object on the target
Object	mince 1
Target	Pizza-target 1

Click OK.

3. Disable Wrong Ingredients

3.1 - Create the ‘Disabled’ state

This step aims to create a duplicate item of the wrong ingredient (because the original will be hidden when dropped on the target). This item will be hidden at first; but will turn visible at the same time as when the original is hidden to give the impression that the original item has returned to its position but is now disabled.

• Copy and paste the ingredient, then align them to ensure they are at the exact same spot. Ensure the duplicated item is directly below the original item on the timeline. (this makes it easier to move them around together).
• Click on the duplicated item, and go to States. Click 'Edit states'.
• Delete the ‘Drop Correct’ state.
• Create a new State, and name it 'Disabled'.
• On the Storyline ribbon, go to Picture tools: Format, then change the brightness to a darker color (e.g. 30%).
• Click on the Normal state, right-click on the image, then choose ‘Format Shape’. Change the Transparency to 100%. Click close.
• Your disabled state might have turned transparent too now. Click on the ‘Disabled’ state, right-click on the image, then choose ‘Format Shape’. Change the Transparency to 0%. Click close.
• Click 'Done'.

3.2 - Set the trigger

Under the 'Triggers' panel, select the left button to create a new Trigger. In the Trigger Wizard window put the following settings:

Action	Change state of
Object	Mince-backup (duplicated item)
State	Set state to Disabled
When	When the user drops the object on the target
Object	mince 1 (original item)
Target	Pizza-target 1

Click OK.

Preview the Slide to check if it works properly. (On the Storyline ribbon, click: Preview > Slide).

Repeat step 1-3 for all the remaining wrong ingredients.

Linking to the End Screen

Prepare an end screen, or use one from our exercise file. 

Go back to the main slide with the pizza drag-and-drop interaction. 

We’ll create a button that goes to the End screen when you click it. However, we need to set conditions on it so that it validates whether the correct ingredients are on the pizza base before it sends the user to the end screen. Otherwise, a popup will appear that sends a warning message. 

Create a popup notification for incomplete ingredients.

• At the bottom right corner of your Storyline window, Open the Slide Layers panel. 
• Duplicate the ‘wrong ingredient’ layer. Rename it as ‘incomplete’.
• Change the message on the popup to “The ingredients are incomplete” or something similar.

 Set up a ‘Cook’ button

• Go back to the Base Layer.
• Create a button. 
• Under the 'Triggers' panel, select the left button to create a new Trigger. In the Trigger Wizard window put the following settings: 

  Action	Jump to slide
  Slide	End Screen (or whatever you name your end screen)
  When	When the user clicks
  Object	Btn_cook (or whatever you name your cook button)
  Conditions*	(click on Object, select a correct item) If the state of pepperoni = Drop Correct And the state of cheese = Drop Correct
  Else	Show layer
  Layer	incomplete

  
  Click OK.

*Change the conditions according to the ingredients you put on your pizza base. Add as much or as little ingredients as you want, and make sure they are set to Drop Correct. This makes it that users can go to the end screen only if all the correct ingredients are on the pizza.

 

You have created your first pizza drag-and-drop interaction. Duplicate the slide and modify the items if you want to create other types of pizza; and modify the triggers according to the ingredients you want/don't want on the pizza.

To download the working Storyline file, click the button below.