I got a question from Puja who has a text entry activity in Articulate Storyline, and she wondered if a user clicks on the submit button without answering the question, the user won’t see an incorrect feedback layer, but the methods that the question must be filled in to continue. In this video, I’ll explain how to set this up in Articulate Storyline.
cta under video
How to set up a mandatory text entry
So as you can see, I already prepared a slide with a sample question. Now, to set up a mandatory text entry functionality in Storyline we need a text entry field, a submit button, a correct and incorrect feedback layer, a text that can be shown when the question is not answered. And when we have all elements in place, we need three triggers to make things work, but let’s start with a text entry fields. So the first step is to add a text entry field. So let’s go to insert, I’ll go to inputs, I’ll select my text entry field box, and I drag it on my screen. And now here, you see there is a text entry field and with every text entry field in Articulate Storyline, there is automatically a variable attached to it. And you’ll see it here, it’s text entry one, because there’s already another text entry field in this module.
The submit button
Now let’s add a submit button. So I’ll go to insert again, click on button and let’s choose this button, type submit. And I want an arrow, don’t want it left, but I want it right. So that’s our submit button. So I’ll give this a proper name. Our submit button. So what we now need is a correct and incorrect feedback layer. So this will be our correct layer. And what it will do now is apply the team layouts for the correct and incorrect layer. So if I am on my slide layer, I can right-click on my slide with my right mouse, I’ll go to apply layout. And now you see the feedback layers. So I’ll choose here, correct feedback. And now can I type that’s correct. And now let’s add an incorrect feedback layer.
A new layer
So I’ll add a new layer, incorrect, go to my slide again, right mouse click, apply layout and incorrect feedback and I’ll type it. That’s wrong, right answer is red. So now we need the text field that a user can see that he doesn’t filled in the question. So I’ll go back to the base layer of the slides. Now I could go to the insert tab and go to a text tool, but what I also can do is press control and T on my keyboard, and you’ll see, you can now start typing. So I’ll paste the text that I already prepared to something with alignments and what I’ll do now on state step, I’ll set the initial states to hidden because we won’t want to see this text. We want only to see this text, if a user doesn’t has filled in the entry field and clicks the submit button. And now that we have all items in place, let’s add the triggers that we need.
Select the triggers
So we’ll start with the first trigger. And therefore, what I will do is I’ll select the submit button. So if I do this and I go to triggers, add new trigger, you’ll see that it’s automatically set when a user clicks on the submit button and the action will be instead of jump to slide show layer, and it will be layered correct. And I’ll also add a condition, and the condition here is if text entry, and I’ll choose, is it equal to, but ignore case, red. And ignore case here means that Storyline doesn’t pay attention to capital letters and give an answer. So this means that red with a capital letter and also with, without a capital letter are both correct for this question. So let’s click on, okay right now. And you’ll see, we’ve created the first trigger. Now let’s add the incorrect trigger.
So my button is selected. So I’ll go to triggers, new trigger. So that when the user clicks button submit. And now I’ll show layer, incorrect, and we’ll give two conditions right now. So the first one is when the text entry field is not equal to the answer, red, but we need another condition. And that condition is when text entry field is not equal to blank. And this condition we need, because if we don’t have this condition and a user doesn’t fill it in the text entry field and he clicks on submit. He will be shown the incorrect layer, and that is something we won’t want. So click on okay. Now let’s preview what we’ve got so far. So I’ll go to preview the slides. So I’m now in storyline preview mode. So let’s type in red and click on the submit button and we’ll see our correct layer right now.
So let’s replay the slide now type in blue. That’s not correct because the right answer is red, and I’ll show what we will do if he doesn’t type anything, and then nothing happens. But that’s okay because we need another trigger to create the functionality that if a user doesn’t fill in the text entry fields and he clicks on submit, it will show this text item. So I’ll have my submit button selected, and let’s add the third trigger and this will be a change state of trigger. So let’s go to change state of, and I’ll want to change state of this text box from hidden to normal. And I want it when the user clicks on the button submit, and I want it only when the text entry field is blank. So when a user doesn’t fill in anything, in a text entry field, then this will be shown.
Preview
So let’s click on okay. And let’s preview it right now. So let’s go to preview and this slide again. So let’s see what happens if we don’t fill in the answer and click on submit. So I’ll click on submit right now and you’ll see, you must fill in an answer before you can click on submit. And if I type in red right now and I click on submit, you’ll see that is correct. So what I will do right now is let’s run to the triggers in detail once more. So I’ll close my preview because why do we need two conditions on the incorrect trigger. And I will show you and I’ll click on submit. So I’ll copy my incorrect trigger, paste it. And what I’ll do now is I’ll disable this trigger. And on this trigger, I will delete the second condition. So I’ll delete this one and let’s go to preview again.
So I’ll click on preview. And now if we don’t fill in our answer and click on submit, you see two things happen, the wrong answer will be shown and also on the background, you’ll see the text. We don’t want the wrong answer slightly or to be shown. And therefore we need the two conditions. So delete this one and show this one so therefore we need text entry is not equal to red because then the answer is incorrect. But also that the text entry is not blank, because when the text entry is blank, we want only to show this text. So I hope this makes it clear how to create a mandatory text entry field in Articulate Storyline. Now, do you have your own question about Articulate Storyline? Place it in the comments below, and maybe I’ll create a video for you in the upcoming weeks.
