Search Knowledge Base
Tutorial: Make a Quiz Project in Studio
Posted
Updated
Byuser
← 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
- Create 11 scenes using the following naming conventions
- Question_1
- Answer_Selection_1
- Question_2
- Answer_Selection_2
- Result_1
- Result_2
- Result_3
- Result_4
- Result_5
- Result_6
- Logic Scene
- In the Properties for this scene, make sure Logic Only is checked
- In the Properties for this scene, make sure Logic Only is checked
Step 2
- Select Question_1 from the scenes panel
- Click and drag from the assets panel to add the image Quiz_Template_Q1 to the canvas.
- Name this image Question_1 in the Properties panel. You will see the image appear in the Layers panel.
- Click and drag a Gesture Area from the Elements panel and resize the element to fit the entire canvas.
- Name this element Full Screen Tap in the Properties panel. You will see the element appear in the Layers panel.
- 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.
- In the Properties panel, use the Add Gesture to Area menu to add a Tap command to this gesture.
- 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
- In the Events & Actions panel, click the Add an Action menu and select Set Counter
- A Set Counter panel will appear. In the Counter field, select New Counter and enter Q1 as the name for this counter.
- Close the panel and repeat this step to set another counter, this time called Q2.
- A Set Counter panel will appear. In the Counter field, select New Counter and enter Q1 as the name for this counter.
Step 3
- Select Answer_Selection_1 in the Scenes panel
- 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.
- Click and drag from the assets panel to add the asset Answer_Selection_Q1.jpg
- Name this element Answer_Selection_Q1 in the Properties panel. You will see this image appear in the Layers panel.
- Click and drag a Gesture Area over Choice 1
- In the Properties panel, name this Gesture Element Q1_Choice_1
- Use the Add Gesture to Area menu to add a Tap command to this gesture.
- 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.
- 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.
- Right click on the Q1_Choice_1 element and select Duplicate.
- Move the duplicated gesture over Choice 2 on the canvas.
- In the Properties panel, name this Gesture Element Q1_Choice_2
- Update the counter value to 2
- Leave everything else as is.
- Repeat Step E to add gesture elements to Choices 3 and 4, naming them Q1_Choice_3 and Q1_Choice_4, respectively.
- Update the counter values to 3 and 4, respectively.
- In the Layers panel, locate the Full Screen Tap gesture and toggle the
Step 4
- Select Question_2 in the Scenes panel
- Click and drag from the assets panel to add the asset Quiz_Template_Q2.jpg
- Name this element Question_2 in the Properties panel. You will see this image appear in the Layers panel.
- 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
- Select Answer_Selection_Q2 in the Scenes panel
- 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.
- Click and drag from the assets panel to add the asset Answer_Selection_Q2.jpg
- Name this element Answer_Selection_Q2 in the Properties panel. You will see this image appear in the Layers panel.
- Click and drag a Gesture Area over Choice 1
- In the Properties panel, name this Gesture Element Q2_Choice_1
- Use the Add Gesture to Area menu to add a Tap command to this gesture.
- 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.
- Add a Transition in the Properties panel from Answer_Selection_Q2 to Logic Scene.
- Right click on the Q2_Choice_1 element and select Duplicate.
- Move the duplicated gesture over Choice 2 on the canvas.
- In the Properties panel, name this Gesture Element Q2_Choice_2
- Update the counter value to 2
- Leave everything else as is.
- In the Layers panel, locate the Full Screen Tap gesture and toggle the
Step 6
- Select Result_1 in the Scenes panel
- 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.
- Click and drag from the assets panel to add the asset Result_1.jpg
- Name this element Result_1 in the Properties panel. You will see this image appear in the Layers panel.
- Repeat these steps for each Result scene.
- In the Layers panel, locate the Full Screen Tap gesture and toggle the
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
- Select Logic Scene in the Scenes panel
- In the Events & Actions panel, add a transition to the Result_1 scene
- Click the Add Counter Conditionals button and complete the fields as follows:
- Counter: Q1
- Conditional: Equal To
- Value: 1
- Click the Add Counter Conditionals button again and complete the fields as follows:
- Counter: Q2
- Conditional: Equal To
- Value: 1
- 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.
- 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?
Let us know if this helped answer your question or solve your problem so we can continue to improve our documentation and training.
Table of Contents
No Comments