How To: Create An Interactive Exercice In The VR Experience

In this tutorial, we will use the following scenario:

“The user is at his workplace. The fire alarm goes on. Two actions are proposed to the user. The latter must choose the most appropriate action in this situation. He receives a feedback based on his choice.”

This scenario is presented like a quiz with two answer propositions.

Main steps

This example is created in two main steps:

• Put the quiz together (the elements of it)
• Create the interactions

Necessary elements

To create this scenario, you will need either a 360 image or a 360 video.

Main Step 1 – Put the quiz together

First, create and rename the scene of the experience. Next, enter the scene and add the elements.

As a reminder, the quiz is made of one question and two answer propositions, one of them is the correct answer. The quiz appears a few seconds after the arrival of the user in the scene.

To put together this quiz, you will only use the text element and you will need four:

• The question
• The correct answer
• The incorrect answer
• The feedback (success and fail)

INSERT THE TEXT ELEMENTS

The question

Once you’ve added a text element to the scene and named it “question”, open its properties window.

Aspect

• Name the aspect of the element “normal”
• Enter text in the text field (and any necessary formatting)

State

The question is initially invisible but has to become visible a few seconds after entering the scene.

• Initial state (named “invisible”): invisible and non-interactive
• Add a second state (named “visible”): visible and non-interactive
• Close the properties window

Answers

Let’s start with the first answer proposition. Once the text element is added to the scene and named “answer_1”, open its properties window.

Aspect

• Name the aspect “normal”
• Enter text in the text field
• Use the tools available to format your text
• Add a new aspect and name it “selected” (the aspect change will help the user identify the selected answer).
• Enter the same text in the text field
• Change the formatting to differentiate it from the “normal” aspect

By creating these two aspects, the user will be able to identify the answer he selected.

State

Answers are initially invisible but have to become visible at the same time as the question. In addition to that, answers are interactive but have to become non-interactive once an answer is selected.

• Initial state (named “invisible”): invisible and non-interactive
• Second state (named “visible”): visible and interactive
• Third state (named “inactive”): visible and non-interactive
• Close the properties window

For the second answer, follow the same steps. To save some time:

• Copy and paste the first answer
• Rename the element “answer_2” in the Elements column
• Place the element on the scene
• Open its properties window
• Modify the text in both aspects: “normal” and “selection”

Feedback

Once the text element is created, open its properties window.

Aspect

The feedback has two aspects: success and fail. You can differentiate them visually by changing the color of the font of each feedback or by changing the background color.

• Name the first aspect “success”
• Enter the text of the feedback for the correct answer
• Change the formatting if necessary
• Add a new aspect by clicking on the +
• Name this second aspect: “failure”
• Enter the text of the feedback for the incorrect answer
• Format the text

State

The feedback is initially invisible but has to become visible once the user has selected one of the two answers.

• Initial state (named “invisible”): invisible and non-interactive
• Second state (named “visible”): visible and non-interactive
• Close the properties window

Main step 2 – Make the quiz interactive

TIMELINE

Start by configuring the display of the quiz using the timeline:

• Open the Event tool
• Add an event at 3 seconds and name it “question”
• In the “Add events” window, create the necessary conditionals:

[At 00:03, Then element “question” becomes state “visible”

And “answer_1” becomes “visible”

And “answer_2” becomes “visible”]

CHOICE OF THE ANSWER AND DISPLAY OF THE FEEDBACK

When the user selects an answer, the feedback (success or fail) appears depending on the selected answer.

If “answer_1” is the correct answer, open its conditionals window:

• Add a conditional
• Define the condition and the consequences:

 [If click on “answer_1”, Then “answer_1” becomes aspect “selected”

And “answer_1” becomes state “inactive”

And “feedback” becomes state “visible”

And “feedback” becomes aspect “failure”

And “answer_2” becomes “inactive”]

• Close the window

Follow the same steps for the display of the fail feedback by opening the conditionals window of “answer_2”

• Add a conditional
• Define the condition and the consequences:

[If click on “answer_2”, Then “answer_2” becomes aspect “selection”

And “answer_2” becomes state “inactive”

And “feedback” becomes state “visible”

And “feedback” becomes aspect “success”

And “answer_1” becomes “inactive”]

• Close the window

Please note, since the initial aspect is “success”, as soon as the element is visible, and without other conditionals, the element will show in his initial aspect so we do not really need a specific change of aspect here.

You can make this experience even more immersive thanks to simple tricks.

Are you interested in getting to know them? Then, click here to discover more.

Now, it’s your turn and do not hesitate to give us your feedback and ask any questions in the comment section!

See you soon for a new tutorial!