How To Create A Fill In The Blank Interaction In Articulate Storyline

Last updated:

In today’s video I’ll show you how to set up a gradable Fill in the blank question with multiple blanks in Storyline 360.

You can use Fill in the blank questions in your next e-learning project to effective determine learner knowledge, as learners must know the information rather than choosing from a set of multiple choice answers or guessing “yes” or “no”.

Storyline has a standard graded fill in the blank interaction. A drawback of this interaction is that you can have only one blank that a user must fill in.

But with a workaround it’s possible to create a gradable Fill in the blank question with multiple blanks in Storyline.

cta under video

Now, I’ve already created the basics of our fill-in-the-blanks interaction in articulate Storyline. So we don’t have to start from scratch. Now, what you see here is a title text with some white spaces, where the blanks become, a submit button, and in image on the right. Now, let’s insert the blanks. Therefore, I’ll go to insert here, click on input, and choose the text entry fields. And now, I can draw a text entry field on my screen. So this is okay. I remove the textiles in the text entry field, and I’ll do something on the color and the boarder. So therefore I’ll go to format, I’ll get it to white fill, and I’ll give it a grayish outline, but I want to have this outline dashed. So I’ll choose these dashes. And I think it has to be a width of two. Let me see the result. Yeah. This is okay.

Text entry

So what you see here at the right is that Storyline created the first text entry, and also created the variable that is called text entry. Now, I want to give the text entry some more descriptive variable name. So I click here on text entry, and click on new variable. Now, my variable window will open, and I’ll just FIB, as in fill-in-the-blank, one. So I’ll know this is the fill-in-the-blank one variable. And now, what we’ll do is I’ll copy this fill-in, and paste it on the other places. Here, there must be a fill-in-the-blank, and here, the third fill-in-the-blank. It must be a little bit smaller. And now, I’ll rename the other variables. So therefore, I’ll choose new variable again, make this FIB two, click on okay, and the third one will be FIB three.

So what we have now is a slide, with three fill-in-the-blanks, and a submit button, but our interaction doesn’t work right now. So this is the next step to make it work, and also make it gradable. And therefore, we will make it a freeform question. And it will be a freeform, a pick one question. And I’ll explain later on why I do this.

So to create a freeform question, go to insert, and click here on convert to freeform. Now, you can choose what for freeform slide you want. I want to pick one question, and I’ll click on okay. And Storyline now converts this slide to a gradable freeform, pick one question. You see, there is now a form view and a slide view, and what I will do now, I’ll add two buttons that I’ll place outside of my slide.

So go here to button, and this button, I’ll call, correct, and there is also a button, wrong. And these buttons will be the buttons for my pick one question. So I’ll go to form view, I’ll choose here the correct button, and I’ll state this to correct, and also the wrong button, and this will be wrong. And now, we can create some triggers to ensure that the question will work. The first trigger that I’ll create is on the submit button, and this will be submit, pick one. So if I click on the submit button, I’ll submit the pick one, and you see the correct or the incorrect feedback. So I’ll choose here for triggers to submit interaction pick one, when user clicks on button one, and this is button one. So this is okay. But the pick one interaction does not do something. So we’re going to make it work.

True-false variable

And for each of the text entry fields, I’ll create a true-false variable that will be set to true if the answer that is filled in is correct, and if all the true-false variables are true, I will set the correct button to select it, so then the pick one question is okay, and then we can submit it. So what I’ll first will do is create the three true or false variables. So I’ll go here to my variable window, and I’ll click on the green plus sign, choose true-false, FIB1_correct, and the default value is false. Now, I can now copy this and paste it, and change the name. So this is logical FIB2_correct is false. And I’ll also create the third one is FIB3_correct to false. And now we can create some more triggers.

So here, the sentence will be the Suntrust tower. So what I’ll do is create a trigger that says adjust variable, and the variable that we’ll want to adjust is FIB_correct to true, when the user clicks button one, if the condition is that FIB1, so this is the variable of text entry field, is equal to tower, and we can make it also case sensitive. We add another condition, and we fill in tower with a capital T, and we set the end to or. So FIB1_correct will be set to true when FIB1 is tower with a normal T, or FIB1 is correct if tower is written with a capital T. And this trigger has to come before the submit button.

And now, we have to create also the trigger for the second and the third text entry fields. So I can copy this one and paste it. And let’s make it FIB2 correct, when FIB2 is equal to, this will be tallest or largest. So tallest. And FIB, or you can also fit in largest. This is also okay. Largest. And we have to now create the trigger for the third variable, the third text entry fields. So FIB3_correct is equal to two, when FIB three is, and here, the answer is Florida. So Florida what a capital F, and also to be sure, with a minor F. So this is okay.

So we have now set the three true-false variables to true. And what we’re now going to do is set a new trigger that says change the state of our correct button. Where is it? Here, to select it if the user clicks button one, because that is our submit button. If FIB1_correct is equal to true, and FIB2_correct is equal to true, and FIB3_correct is also equal to true. So now, and this button has to become before the submit pick one.

Now, we also create a trigger to set the wrong button, to select it. So I can copy this trigger and paste it, click button one, and it has to come before the pick one interaction, because Storyline automatically executes the triggers in the order that they are here in your trigger panel, from top to bottom. So three, select it, when FIB1 is not equal to, or FIB2 is or not equal to, or FIB3 is not equal to. Now, let’s preview this interaction and see if it works.

So now, I’m in preview mode. So let’s fill in the answers. So the first answer was tower. The second answer was tallest or largest. So I did type in largest. And this was Florida. And now I’ll press submit, and you see, it is correct. My fill-in-the-blank interaction with multiple blanks is correct. And it’s also gradable, because on the backend, it’s a pick one question. So you can also use it in a quiz right now.

Make your form more appealing

Now, to make it even more appealing, you can also add some feedback options for instance, to see if this is correct or wrong. So I’ll show you this for one subject. So I’ll go close my preview. And what I’ll do now is I’ll add a line underneath this box. So I’ll go to insert, shape, and pick a line. And if I press my shift key, I’ll draw a straight line, and I want the line to be two-pixels thick. And we are going to add some states to the line. So I’ll go to edit states, copy the line, and add a new state that says correct, and also a state for wrong.

And now, I’m going to change the colors. So for the wrong state, it’s logical, let’s select the line that this will be red. So I’ll go to format, shape outline, and I’ll choose red here, and for the correct option, and that’s logical, it will be green. So I’ll choose the green right now. And we don’t want to see the normal state. So what we’ll do, the initial states will be hidden. And now, I can, for instance, go to correct layer, and add feedback, or add a trigger, trigger, change state of, and here, you can also change states of objects that are on my base layer. So line1 to correct, and I can choose here when time it starts, when time I start on this layer, if FIB1_correct is equal to two, and I can also create a trigger for when it’s false.

So when it’s false, we set it to the state wrong, and this has to be false. Now, let’s preview it again, and see if this works. So I’m in the preview again. So let’s fill in the first answer, the second answer, largest, and this was Florida. And now I’ll hit submit, and see that there is now a line under my textbox. So in this way, you can create a fill-in-the-blank with multiple blanks, that is also gradable, and you can use it in quizzes in your articulate Storyline project.


You've just read an article from Upward Online Learning

Want to read more articles like this? Sign up for my weekly emails. As a bonus, you'll receive my ebook with my 7 top Articulate Storyline time-saving tips for a perfect start to learning Storyline faster and without any hassle!

Want to know more about creating more effective and engaging e-learning? This is how I can help:

Ultimate Articulate Storyline Online Course

Want to learn Articulate Storyline the smart way? So that you can save up to 40 hours per e-learning course? Subscribe now to my Ultimate Articulate Storyline Training with a $50 discount with the coupon UPWemail.

This online Articulate Storyline course is the fastest way to speed up your Articulate Storyline e-learning skills and learn a proven e-learning development process from design to implementation.

Knowledge Library

Watch over 100 detailed tutorials, reviews and how-to videos from my popular Youtube channel.

Build Better E-learning With Templates


Leave a Comment