← BACK

This tutorial will provide you with a basic framework to create a quiz project, where the user will be provided a specific result based on the selections they make. The setup and functionality used in this tutorial is also used in the “What Type of Coffee Are You?” quiz template in Studio. 

Download project for this tutorial

 

Step 1: Project Setup
  1. Create 11 scenes using the following naming conventions
    1. Question_1
    2. Answer_Selection_1
    3. Question_2
    4. Answer_Selection_2
    5. Result_1
    6. Result_2
    7. Result_3
    8. Result_4
    9. Result_5
    10. Result_6
    11. Logic Scene
      1. In the Properties for this scene, make sure Logic Only is checked       
Step 2
  1. Select Question_1 from the scenes panel
    1. Click and drag from the assets panel to add the image Quiz_Template_Q1 to the canvas.
    2. Name this image Question_1 in the Properties panel. You will see the image appear in the Layers panel.
    3. Click and drag a Gesture Area from the Elements panel and resize the element to fit the entire canvas.
      1. Name this element Full Screen Tap in the Properties panel. You will see the element appear in the Layers panel.
      2. Click on the icon in the Layers panel to toggle on the Global Layers functionality. The Full Screen Tap gesture will now appear in every scene of your project.                                   
      3. In the Properties panel, use the Add Gesture to Area menu to add a Tap command to this gesture.
      4. Also in the Properties panel, add a Transition from Question_1 to Answer_Selection_1. This action requires the user to tap in order for the unit to progress to the next scene
    4. In the Events & Actions panel, click the Add an Action menu and select Set Counter
      1. A Set Counter panel will appear. In the Counter field, select New Counter and enter Q1 as the name for this counter.
      2. Close the panel and repeat this step to set another counter, this time called Q2.
Step 3
  1. Select Answer_Selection_1 in the Scenes panel
    1. In the Layers panel, locate the Full Screen Tap gesture and toggle the . This will hide the gesture from appearing in this scene and provide you with a blank canvas.
    2. Click and drag from the assets panel to add the asset Answer_Selection_Q1.jpg
    3. Name this element Answer_Selection_Q1 in the Properties panel. You will see this image appear in the Layers panel.
    4. Click and drag a Gesture Area over Choice 1
      1. In the Properties panel, name this Gesture Element Q1_Choice_1
      2. Use the Add Gesture to Area menu to add a Tap command to this gesture.
      3. Also in the Properties panel, got to the Add an Action menu and select Set Counter. Choose Q1 as your counter and set the value to 1. This will let the Q1 counter know to add 1 to its value when a user selects this answer choice.
      4. Add a Transition in the Properties panel from Answer_Selection_Q1 to Question_2. This action requires the user to tap on an answer choice in order for the unit to progress to the next scene.
    5. Right click on the Q1_Choice_1 element and select Duplicate.
      1. Move the duplicated gesture over Choice 2 on the canvas.
      2. In the Properties panel, name this Gesture Element Q1_Choice_2
      3. Update the counter value to 2
      4. Leave everything else as is.
    6. Repeat Step E to add gesture elements to Choices 3 and 4, naming them Q1_Choice_3 and Q1_Choice_4, respectively.
      1. Update the counter values to 3 and 4, respectively.
Step 4
  1. Select Question_2 in the Scenes panel
    1. Click and drag from the assets panel to add the asset Quiz_Template_Q2.jpg
    2. Name this element Question_2 in the Properties panel. You will see this image appear in the Layers panel.
    3. In the Properties panel, add a Transition from Question_2 to Answer_Selection_Q2. This action requires the user to tap in order for the unit to progress to the next scene
Step 5
  1. Select Answer_Selection_Q2 in the Scenes panel
    1. In the Layers panel, locate the Full Screen Tap gesture and toggle the . This will hide the gesture from appearing in this scene and provide you with a blank canvas.
    2. Click and drag from the assets panel to add the asset Answer_Selection_Q2.jpg
    3. Name this element Answer_Selection_Q2 in the Properties panel. You will see this image appear in the Layers panel.
    4. Click and drag a Gesture Area over Choice 1
      1. In the Properties panel, name this Gesture Element Q2_Choice_1
      2. Use the Add Gesture to Area menu to add a Tap command to this gesture.
      3. Also in the Properties panel, got to the Add an Action menu and select Set Counter. Choose Q2 as your counter and set the value to 1. This will let the Q2 counter know to add 1 to its value when a user selects this answer choice.
      4. Add a Transition in the Properties panel from Answer_Selection_Q2 to Logic Scene.
    5. Right click on the Q2_Choice_1 element and select Duplicate.
      1. Move the duplicated gesture over Choice 2 on the canvas.
      2. In the Properties panel, name this Gesture Element Q2_Choice_2
      3. Update the counter value to 2
      4. Leave everything else as is.
Step 6
  1. Select Result_1 in the Scenes panel
    1. In the Layers panel, locate the Full Screen Tap gesture and toggle the . This will hide the gesture from appearing in this scene and provide you with a blank canvas.
    2. Click and drag from the assets panel to add the asset Result_1.jpg
    3. Name this element Result_1 in the Properties panel. You will see this image appear in the Layers panel.
    4. Repeat these steps for each Result scene.
Step 7

Prior to completing this section, you will need to determine which counter values will determine each result scene. We recommend making a list of your result scenes and assigning them a combination of counter values. Ex: Result 1: Q1=1, Q2=1

  1. Select Logic Scene in the Scenes panel
    1. In the Events & Actions panel, add a transition to the Result_1 scene
    2. Click the Add Counter Conditionals button and complete the fields as follows:
      1. Counter: Q1
      2. Conditional: Equal To
      3. Value: 1
    3. Click the Add Counter Conditionals button again and complete the fields as follows:
      1. Counter: Q2
      2. Conditional: Equal To
      3. Value: 1
    4. This setup means that when the Q1 response choice where the counter is equal to 1, and the Q2 response choice where the counter is equal to 1, the project will transition the user to Result_1.
    5. Repeat this using the following Result/Counter combinations
Transition To Q1 Value Q2 Value
Result_2 1 2
Result_3 2 1
Result_4 2 2
Result_5 3 1
Result_6 3 2
Result_1 4 1
Result_2 4 2
Step 8: Preview & Share

Click the Preview icon to preview the project on desktop, or the Connect icon to preview the project on your device. Once you’ve built your own project, select Share to generate a shareable URL!

Was this helpful?

Updated October 01, 2019