I’ve got a question from the user, Ornella Studio , how to create a multiple select question in an interactive video. Now, in this video, I’ll show you step-by-step how to set this up in Storyline 360.
cta under video
So when a user clicks the oval slide layer, question one should appear. So let’s add a trigger that shows question one when a user clicks. So I’ll select our oval, go to triggers, and now, I’ll create an action that says Show Layer, not feedback one, but question one, and when the user clicks on oval one and I’ll click Okay. Now we’re finished on the base layer for now. Let’s go to slide A or question one. So I’ll click slide layer question one for now. So it’s selected. And the first step is to change the properties of the slide layer. So I right click with my mouse and I’ll go to Properties. And what I’ll do now is I’ll check Pause Timeline of Base Layer. So the video pauses when question one layer show. And I uncheck Hide Other Slide Layers. And I’ll close that.
Add the objects
And the next step is to add the objects that’s for my question. So what I’ll need is four answer options, now a question and a Submit button, and we must make sure that the answer options have a selected state. Now we need to state when we create triggers on the Submit button, but first, let’s create the objects. So for the question, I go to Insert, go to text box and you can also press Control + T on your keyboard. And I’ll paste my question. So now let’s do some formatting. So I want to make it bold, white and I think 20 pixels is okay. And now let’s align this in the middle.
Background
Oh, yeah. And before I forget what we also need is a background. Otherwise, the text is not readable on the video. So what I will do is I’ll insert a shape and I can go out here on my slide and it must be on the timeline behind the text layer. I want it to be black. And now I’ll go to black. And I want now to go to the Format Shape window. And I set the transparency on 50%. So I think this is okay. Now I create four answer options. So what I’ll do, I’ll go to Insert, go to Shape, pick an oval, press one. And what I will do now is I’ll choose a fill color and also a border. You think why can’t you see the text? And what I’ll do is I’ll go to the Format Shape window again, and I’ll set the transparency to a 100%. And now you can click in the middle. Otherwise, that is impossible.
Create a selected state
So what I’ll do is add some white to the border and add this bold. So this is okay. And let’s create also a selected state. So therefore I go to States, Edit States, Create New States and I’ll choose Select It, go to Add. And now the state is created. And now let’s format this states. So that’s okay. But I don’t want it to be blue. I want it to be white and… No. Shape fill doesn’t has to be white. It can be blue. So this is okay for now. Right click on Done Editing States. And what I do now is I’ll copy this and paste it. This will be answer option two, three and four.
Add the text to answer options
And now let’s add the text to answer options. I already prepared them. So I will paste them on my slide. You’ll see it here. And I also only have to do some alignment. So the alignment’s done. So now let’s create a Submit button. So I’ll go to Insert and I create a shape here. I enter Submit. Okay. And I’ll give it a white field and also a white border. And I’ll go to my Format Shape window again and set the transparency to a 100, not at 1400 but a 100%. So that’s okay. Then this can be bold. And I want the corners that they be more rounded. So that’s the Submit [inaudible 00:04:15] button.
True false variable
And the next step is to create a true false variable called Q1. So we know that it’s connected to this question and we need this variable later on. So I’ll go to my variable panel. You’ll see that I already created a variable here. So what you must do click the plus sign, enter your variable name, go to type, check true, false, and then you can click on Okay. Now let’s go click on Add. And now we can go to feedback layer one. Here, I’ll also inject the settings in the Properties to hide all slide layers. So that I have done.
Add feedback text
And now the next step is to add feedback text here. Now on the feedback one layer, I’ll add two text boxes for the feedback. So I’ll go to Insert Here, text box and I’ll draw on text box on my slide. So the first is that right. “All answers are correct.” Now let’s do some formatting again. I want it white. I want it all to be at one line. I see I have a mistake here. So that’s better. And now let’s arrange it in the middle horizontally and give this text box the proper name. So this will be Text Correct. Now I can copy this text, paste it and make this wrong. And that’s wrong. “All answers are correct.” Let’s arrange this in the middle. And that’s okay.
Add triggers
Now what I’ll do for this two text boxes, I’ll set the initial state on hidden. So that’s done for this one and let do it also for this one. And the next step is to add two triggers that will show the text boxes if you answer the question on this layer. So what I’ll do is I’ll go to Triggers. I’ll choose Change State of Action. And we can do first. I want to first do it the correct slide layer to normal, and not when user clicks, but when the timeline starts on this layer. And I’ll give it a condition that when Q1 is equal to true. So then we know Storyline has to show the correct layer.
Correct text
Now I can copy this and paste it. And what I will do now is we stay on this layer and now we change Text Correct to Text Wrong and Q1 to false. So this means that if we answer the question incorrectly, Storyline shows Text Wrong because Q1 is false. But when does the variable Q1 changes? Not yet in this example. So we go back to slide layer question one and add some triggers to the Submit It button there to let the Q1 variable change. Now I’m on the question one slide layer again. And remember that all the answer options have a selected state, and we’re going to use that selected state as a condition.
So what I’ll do now, I’ll create a trigger that changes the variable Q1 to true when all the answer options are selected. So let’s change the action to Adjust Variable, which one correct variable Q1 to true not when timeline starts, but when the user clicks on my rectangle button two. And I give it a condition. And I’ll not use variable but objects. So what I’ll do now here is say if oval one is equal to selected and I’ll do the same for the other ovals. So oval two is selected. Oval three is selected. And also oval four is selected.
Now and to trigger the incorrect feedback on the Feedback layer, we don’t need a trigger, because if not all answer options are selected, the Q1 variable does not change and is still false. But we need another trigger here to show the new layer. So what I’ll do now is create a trigger that says, “Show layer feedback one when user clicks rectangle two.” And what I also want is that I’ll want to hide the Submit button. So I’ll say, “Change state of button Submit to hidden when user clicks on rectangle two.” And now I click on Okay. So now let’s preview this interactive video slide. So I’ll go to Preview and go to this slide. Now we have to wait when it’s loaded and also wait when the hotspot appears. So the hotspot appears. You see the video is still playing. I click on your hotspot. Now the video stops on the background and we now see question one layer.
Select answer options
So what I’ll do now is I’ll select all the answer options and click on Submit, and you’ll feedback, “That’s right. All the answer options are correct.” Now let’s replay this slide to see what it does if you don’t click all the answer options. So I click here and for instance, I click only on the fourth answer option, click on Submit, and you see, “That’s wrong. All answer options are correct.” So this way you can build a multiple select question on top of an interactive video. I hope that this is something that you can use in your next Storyline project.
