Working With Scrolling Panels In Storyline 360

Storyline-scrolling-panels

In this video, I’ll show you what scrolling panels are, and how you can use them to create scrollable content in your next Storyline project.

cta under video

What is a scrolling panel in storyline 360?

The scrolling panel in Articulate Storyline is a feature that you can use to show extra content on your slide in Storyline. Now, the scrolling panel can scroll vertically. This way you can, for instance, place a large amount of text on your slide, and you see it with a scroll bar in your preview mode, or when you publish your course. Now, besides text, you can also add shapes, images, buttons, even web objects in your scrolling panel.

How do you make a scrolling panel in Articulate Storyline?

And now you know what a scrolling panel is, let me show you how you can add a scrolling panel in Articulate Storyline. To add a scrolling panel in Articulate Storyline, go to your Insert tab, and here on the right, you will find the scrolling panel option. Click the scrolling panel, and you can drop the scrolling panel on the slide. And if the scrolling panel is on slide, you can resize the scrolling panel by dragging it in the width and height that you need.

Add Objects to the Scrolling Panel

Now, let’s add some objects to our scrolling panel, and the first one is text box. So I’ll go to the Insert tab again, click Text Box, and draw a text box on my slide, and I will type #lorem and six between brackets, and I’ll show you what it does. So type #lorem, bracket, 6, bracket, and I’ll enter it. And Storyline now automatically adds six paragraphs of lorem ipsum text, so this is dummy text. Let’s change the font size a little bit, and it’s okay, and I’ll make it a little bit wider. And now let’s add this text box to our scrolling panel. So you see here on the timeline, I have a text box here and a scrolling panel. Now, I grab my text box, and I drag it onto my scrolling panel, and I’ll release it. And now you see, it’s in the scrolling panel, so it’s no more on the timeline, but if I click here on the triangle before the scrolling panel and I open it, you’ll see the scrolling panel here. And you’ll see here, my text box inside the scrolling panel.

Now let’s preview this slide to show how the scrolling panel looks like in your course. So I’ll go to Preview here, and I’ll preview this slide. So I now see the scrolling panel, the text inside, and you see here the scroll bar. So I scroll, so the whole text is visible. You see that now only the scroll bar is visible, so what you can do is format the scrolling panel, so let’s close our preview right now.

And what I will do, I’ll go to my Format tab and give the scrolling panel a shape fill, for instance, this one, and I can also give it a border, a black border, and I want it to have a weight of one. So let’s preview it again and see how it looks like. So you see now, our scrolling panel has the background and also a border. And you see here the scroll bar. So now you see that the scrolling panel is here and the white area is the rest of our slide. So let’s close our preview right now.

Remove objects from the Scrolling Panel

We’ve added an object to our scrolling panel, but how do we remove an object from our scrolling panel? You’ll select the object in scrolling panel that you want to remove from the scrolling panel, and if you want it outside your scrolling panel, you will grab the object and drag it outside the scrolling panel. And what you’ll now see is Storyline automatically removes it from the scrolling panel, and your object is now outside of the scrolling panel. If your object is inside the scrolling panel and you don’t need it anymore, you can also press, for instance, the Delete key on your keyboard, and the object is deleted off your slide.

Now I said earlier, you can resize the scrolling panel by dragging the width and the height, but you can also go to the Format tab, and here, with width and height, set correct numbers. For instance, I want the height of 500 pixels and a width of 425, so this is okay, and I want it to be centered on my slide vertically.

Now you’ve seen the basics, with one object in our scrolling panel in Storyline. Now let’s add more objects to the scrolling panel.

Insert Multiple objects to Scrolling Panels

I’ll now show you how you can insert multiple objects in a scrolling panel in Articulate Storyline. And the way I normally do this, what I will do is I’ll add two text objects and an image. So let’s start with the text objects. So I can go to the Insert tab, but I also can press Control key on my keyboard. I want some paragraphs of lorem ipsum text, so what I will do is type #lorem and two, and give them Enter, so there are now two paragraphs of text, and I’ll make it a little bit less wide, for instance, 400 pixels, that’s okay. And I can also get a little bit smaller font size, this, okay. This is my first scrolling panel.

Now, let’s add an image. So I’ll go to Insert, I’ll use the content library in Storyline, a nice image of a forest, for instance, forest. I think this is a nice image. So Storyline will now add it to my slide, so I will make it a little bit smaller. You can do this by dragging, but you can also do it on the Format tab here to adjust the width and the height. And what I’ll do now is I’ll copy this text box. So this will be my second text box, and I will place it under my image.

So I want to set the margin left on zero pixels so I can align them all to the left and vertically align them. What I’ll now do is I’ll press Control and G on the keyboard, so I’ll create a group, and I’ll direct the group inside the scrolling panel. And you’ll see here, now in the scrolling panel, here is my group, and here are the different objects. And it show how this looks like when I preview this slide. So you see here our scrolling panel with the text, the image, and the other text box. So what I normally do is I’ll create the content outside of the scrolling panel and then drag it inside the scrolling panel.

I’ll show you that it’s a little bit difficult to add another object, for instance. Let’s say we want to add a button beneath that second text box. So I’ll close my preview, go to Insert, add a button. I can type next into it. If I want to drag it, I cannot drag it here. You see it’s not on my text box, it’s inside my scrolling panel. But it’s a little bit difficult now to move it. I cannot see, because it’s now, we are outside of my scrolling panel. So let’s add it inside my scrolling panel. And what I can do now is I have to adjust the width or the height. So it’s on 483 now, 600. You see it’s now under my second text box. If I want to have it a little bit higher, I can do it with the arrow key on my keyboard or adjust the height here. So I think this is okay. And now, let me show you how it looks like if I preview it.

You see here is our scrolling panel. We have the first text box, the image, second text box, and here is the button. You see it’s a little bit more work to add something inside the scrolling panel when there are already objects, so my tip is to think about what objects you want in your scrolling panel, create them outside the scrolling panel, group them, and then drag it into the scrolling panel.

Use Scrolling Panels for Masking

You can use a scrolling panel in Articulate Storyline also for masking. I’ve used this, for instance, in my video about video backgrounds, on the icon and the text on this video background slide. And I’ve added a car to this video, so you can view this video. But now, let me show you how you can use masking in your next Storyline project.

Now for your second slide, with a text box called Title, and I’ll show you what I’ll mean with masking. Normally, if you add an animation, for instance, if I’ll add a fly-in animation for one and I’ll set it to from left, and now let’s preview our slide to see what it does. You see the animation flies in from the left, from the slide, but from the left. But for instance, I don’t want it. I have a line on the slide and I want the animation to appear from, as it look likes behind it, this line. So what I’ll do, I’ll draw a line on the slide, go here to insert shape, and add a line here. This is okay.

Now, if I preview it, the text box will still be flying in from the left of the slide. What I’ll do now, can do now, is I’ll create a scrolling panel. I’ll create a scrolling panel here. I’ll grab the title here on top of it, and now I’ll place the title inside my scrolling panel. So I drag it and place it inside of the scrolling panel. And I want it to be aligned a little bit like this.

Now, if we now look at the slide in our preview mode, let’s see how this looks. So you have the line, and you’ll see now it looks like the title is appearing from behind of this line. Now with this technique, you can create awesome, for instance, cover slides in your next Articulate Storyline course.

So now you know how scrolling panels work in Articulate Storyline. You can use it to add large amount of text on your slide, for instance, or use it with animations and the masking option to create cool slides in your next Storyline project.

Want to learn how to create effective and engaging e-learning courses quicker and with less errors? Then download my ebook now, where I review my personal eight-step process on how to create effective and engaging e-learning courses that I use for all my e-learning projects in Articulate Storyline for my clients.

And was this video useful to you? Then don’t forget to hit the Like button below. And if you don’t want to miss any upcoming videos, then hit the Subscribe button and the bell notification icon. Thanks for watching.

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

Fill in the blanks articulate storyline

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.

How To Create A Timed Quiz In Articulate Storyline

Timed quiz Articulate Storyline

In this video I’ll show you how you can set up a timed quiz in Storyline 360.

cta under video

Are you using time or timers in your e-learning project?

Because time [is 00:00:23] to create a sense of urgency or force quick decisions. But how do you create a timed quiz in Articulate Storyline? In this video I will show you. And you’ll see I already did some preparations. I created a quiz here with slide from the Articulate Storyline content library. You see here a welcome slide, three different question slides, and last slide is a quiz results slide. Let’s go to the design tab of the quiz results slides. And you’ll see here that you have the option for a timed quiz. Now, if you un-select it, it’s now not blue anymore and you’ll see that the options are gray. If you select it you’ll see that the options are editable. For instance, first the time. You can [here 00:01:09] set a time limit. Normally it’s set to 60 minutes, but this is a short quiz. I will set it to 5 minutes. I think that this is enough for three questions. And then you have some timer options. You can decide when to start a timer, for instance with the first question or with the first slide, and you can also set how you want to display. For instance, you don’t want to show time and then you only get a message if the time ends. And now I’ve set it to remaining.

Preview

And now let me show you how this works if you preview this in Articulate Storyline preview. Now I’m in the preview mode of this course. Let’s collapse the menu. First slide, and you’ll see there is no timing in the player. Let’s continued to the first question, and you’ll see Articulate Storyline now automatically is timing here. I can now for instance, add the questions. I have to complete this one, submit, correct, and I’ll go to the third question, correct. And now I have another option, submit. And now I’m on my quiz results slides and you’ll see the time is stopped. I have for 4 minutes and 35 seconds left. I have a passing score of 80%. My score was 100%. And this was because I can do the third question another time.

Time options

Now let’s go back to the edit mode and see for the other time options. Now the timer option was remaining, but we can also set it elapsed from total. And now if you go to the preview mode again, we’re in the preview mode of this course again and [inaudible 00:03:02] no time, so I’ll go to the first question slide and you’ll see here now that the timing appears different. You’ll see here I have five minutes in total and this is [suspend 00:03:13] time and it adds up. With the previous example, it subtracts from the total time.

Now let’s go to the last example. I’ll go back to edit modes. And here you have also elapsed. If I select this one and preview my course, now we’re in storyline preview mode again. I’ll click to go to the first question slide, and you see here now it’s only the elapsed time, but I think a drawback is that you don’t see the time remaining. You don’t know how much time you have. You can set it on the first slide with some explanation about the quiz, but I think it’s also logical to set it here in the player.

Let’s go back to the preview mode. For me if I should choose one time, it should remaining because it counts down or elapsed out of total so you see how many time you have in total and how many time you spent on the quiz and not only elapsed.

Now before you’re [add 00:04:21] time in your next evening project, be aware that time pressure doesn’t work for everyone. For instance, it can limit the accessibility of your course and other people just get nervous as soon as they find out that their actions are timed, and that doesn’t benefit learning at all. So, think carefully if time at something to your course or not, but you now know how you can simply add time to a quiz in Articulate Storyline.

Realtime Quiz Scores On Every Quiz Slide In Storyline 360

Realtime Quiz Scores

Did you know that people forget, on average, 70% of what they learned within 24 hours? Shocking, isn’t it? Adding quizzes in your e-learning project can help people remember more of what they learned. And to build effective quizzes in Articulate Storyline, by the end of this video, you know exactly how to set up a quiz where a user can see his score on every slide of the quiz in Articulate Storyline. Are you ready? Then let’s get started.

cta under video

A Storyline Quiz With A Result Slide

Now, to create a quiz where a user sees his current score on every slide, you could build a solution with variables in Storyline. But there’s a faster way with the score variables that belongs to a result slide. Now, I have a brand new Storyline project here, and let’s check the variables very quickly. I’ll go to variables here. Now you’ll see there aren’t any project variables, and with built-in, you don’t see any score variables at this moment. Let’s close this.

Now to show the result slide variables, I will set up a quiz with one question for now and a results slide. So let me double click this to go to the slide view.

Add Quiz And Result Slide

Now, what I could do is I could go to slides, pick a graded question and results slide question, but I want also something let’s choose a quiz slide and results slide from the content library. So I’ll click the content library here. And now if you select quizzing, you only see quiz templates. So I want the synergy templates to use for this project today, so I’ll select the multiple choice. I hope my control key and I also select the question results slide. So I have now two slides selected, and I click on insert two slides. Now do some tidying up very quickly. So let’s remove the first blank slide. Yes, I want that. And now we can continue.

Result Slide Variables

Now let’s check the variables again. So I’ll go to variables, and under built-in variables, you’ll see now, if I scroll down, that there are four result variables, two path variables, and two score variables, and we are going to use the score variables, and that is the score points variable.

Add A Result Slide Variable To All Quiz Slides

Because this variable is not only active on the results slide, but you can also use this variable on all slides of your quiz. So what I’ll do, I’ll click on, okay here, and I’ll go to my question slide. I’m already there. So what I’ll do is I’ll add a text box, so you can go to enter textbooks or press control T on your keyboard. So what I’ll so is I’ll type score, and now I’ll go to insert, reference. I’m on the built-in variable step, I scroll down, and choose results score points, and click on okay. And now Storyline as a reference to the variable.

Set Points Per Question

But I can imagine that you ask yourself, “But how does the variable get filtered during a quiz?” That’s a good question. And therefore, let’s go to form view here, and here down under feedback and brunching, behind the correct answer you see that a correct answer gets 10 points, and zero answer for incorrect points. And these points are the points that that a user will see.

So what we’re going to do now is let’s return to slide view for that, copy this slide. So I’ll have now two slides and quiz results slides, and now what we can do is check our results slides because here there are using the percent score. And let’s delete this score here, and I’ll go to insert, and to reference again, and here I fill in the score points, and let’s remove this one, and here I can remove this one, and go to insert, reference, and here I’ll add the pass points. So [inaudible 00:04:00] points.

And what we can do now is preview this quiz and see how it works. So I’m now in the preview mode for Articulate Storyline, and you’ll see here that my quiz score is zero. So let’s answer this quiz correctly, submit, and you’ll see that I’ll score 10 points. Now I’m on my second quiz slide so answered the second quiz slide correctly, and you’ll see that I’ve now deserved 20 points, and I had a passing score of 16 points.

Set Points Per Answer Option

Now, let’s close this preview and go back to our quiz question because I want to show you something else. So let’s go to the first question, and I’ll go back to form view here because you don’t have to give each answer 10 points, you can give a correct answer points ranging from one, that you can see here if I click to 1,000, add the zeros, so to 1,000 points. And for an incorrect answer, you don’t have to give zero points, it’s also possible to subtract points from the users score. So you can, for instance, use minus one, or to minus 1,000.

Now, and in this example, the user only gets points for a correct or an incorrect answer, but maybe you want to give points per answer option, and this is also possible in Storyline. So to do this, at the top here by score, we set this [inaudible 00:05:28] by question by score. And you see now that Storyline changes the points from here to here, and at every choice has it’s own points. So what you can do for instance here, give this option 10 points, this answer option five points, this answer option, I want to give it minus five, and let’s give this answer option also minus five points.

Preview The Quiz

Now let’s preview our mini quiz again. So I’ll go to preview, preview the scene. Let’s answer the first answer incorrectly. So I have now minus five points, and I can do it again. I don’t want it, so let’s do it, continue. And now I’m on the second slide, so I’ll give the question the correct answer, and you continue. So I’ve scored now five points, first minus five, and then 10 points makes it five points, I didn’t completed the quiz because I needed a passing score of 16 points. So this way, with the variables for the results slides, you can build a quiz where the user sees his current quiz score on every slide of the quiz.

I’m transforming my Articulate Storyline classroom training, and also my YouTube tutorials to a laser-focused online course on how to create engaging e-learning training with Articulate Storyline. Now are interested, you can join my waiting list, and you will the first one to know when my online course will launch. You can find the link to the waiting list in the description of this video below.

And if you want to create great engaging e-learning in Articulate Storyline, make sure that you get my free step by step guide on how I create e-learning in Articulate Storyline. And I know for sure that will help you because it describes my whole process that I use for every e-learning module in Articulate Storyline that I build. And was this video useful to you, then hit the like button below, and don’t forget to hit the subscribe button, and the bell notification icon so you won’t miss any of my upcoming videos.

Rounding Storyline Quiz Scores in Storyline 360

Rounding Storyline Quiz Scores

In this video, I’ll show you two solutions to remove the decimal digits in a quiz score on the quiz results slide in Articulate Storyline 360.

When I delivered a client project last week, I got feedback where I was asked if it was possible to not show the decimal points in the quiz score in my delivered Storyline module. Now, in this video, I’ll show you two solutions to do this. One solutions is with triggers in Articulate Storyline and another solution is with a little bit of JavaScript edit in storyline.

The problem: Decimal digits

But, first, let’s take a look at the problem. Now, I have here a quiz with six question slides and results slide. Now, let’s preview this quiz, so I’ll click “Preview This scene” and now Articulate Storyline will preview my quiz. So, I’ll click on next and the first answer is right, so the first three questions I will answer correctly, and the four answers I will answer incorrectly. So, I have two correct answers and four incorrect answers. And if I click “Submit”, we will jump to the quiz results slide and see what happens.

So, you see that my score is now 33.33%, and my client wanted to show only 33%. Now, on the E-Learning Heroes forums, you can find a lot of old solutions that worked in Storyline 3, but not in Storyline 3 and 360 because Articulate changed the handling of decimal numbers. But I want to show you two solutions that will solve this issue. Now the first solution is a solution with triggers in Articulate Storyline. And the second solution is to add a few lines of JavaScript into Storyline. Now let’s go to the first solution. So, let’s close the Storyline preview, and I will go to my results slide. But before I’ll show you the first solution, I want to mention that this great solution is provided by Mitch Hayashi on the E-Learning Heroes forums almost two years ago, and you can find the link to the form thread in the description below this video.

A solution with triggers in Storyline

Now, what is the solution? Now the first step is to create a variable called “floorscore” in Storyline. So I’ll go to my variables panel here and I’ll click the green plus sign and type the name floorscore. And it will be a number variable and a default value is zero and I click “OK”. And I click on “OK” now, now the floor in the variable name refers to the JavaScript function, math.floor, where it rounds down number with decimal places to the largest integer. And that is what we are going to do with Java Storyline triggers. I’ll add a trigger now that sets the variable floorscore to a 100 when the timeline starts on the “Results” slide. So I’ll create a new trigger that says “Adjust variable”, adjust variable floorscore. That sets floorscore to 100 when the timeline starts on this slide.

So on the next step is to create another trigger where we subtract one from the floorscore variable, when this variable changes, just as long as the variable floorscore is greater than the default Articulate Storyline score. So let’s create this variable. So what we’ll do is adjust the variable floorscore. So the floorscore variable, and what we will do now is we’ll subtract one from floor score. When the timeline starts on this slide, where when the variable changes, Oh, let me see where it is. Here are “Variable changes”, and it will be floorscore. And we also create a condition. So the condition will be if our floorscore variable is greater than, and this won’t be a value but a variable. And let’s see where it is. A “Results.ScorePercent” we all going to use and take up.

Now, if our Storyline score is a 33.33%, what we saw in the example, Storyline subtracts one from floorscore until it reaches 33 and then floorscore is not greater anymore than the Storyline quiz variable. And the trigger will not be executed again. So what we can do now is that on the results slide, we can change the reference to a preferable result.score percent into floorscore. Now I will change this reference so we can see what it does. So I’ll add floorscore here and now let’s preview the module and answer the questions again. So I’m in the Storyline preview again. So let’s answer the first two questions correctly, and the other four answers incorrectly and six, and I’ll submit and jump to the results slide and what you see here. This is the standard Storyline quiz score that shows 33.33%.

And here at passing score, we changed it to the floorscore and our floorscore shows 33%. So this was the first solution in Articulate Storyline triggers. And I’ll now show you the second solution with a little bit of JavaScript codes.

Solution with Javascript in Storyline

Now and in the second solution, we’ll add some Javascript, but first for the second solution, we need two variables. So let’s go to our variables. We do, and you need the variables, nonrounded score and rounded score. So I already created them here, but you can create them here and then we’ll create a trigger. So I’ll create a trigger and not execute JavaScript, but adjust variable that says the nonrounded score will set it equal to the variable score percent. So let’s see where it is, it’s result.score percent. When the time I start on this slide and I will add it above the actions that will show the success and failure layer.

And the next step is to add a trigger that execute JavaScript. So let’s see where it is, execute JavaScript. Now it’s red so it means there is no Javascript included right now. So if you click it, the JavaScript window will open. Now I can add my lines of JavaScript. So I’ll copy them here and I can explain what they are doing. So the first line of JavaScript will rep all the Storyline variables and combine them to JavaScript. So you can communicate. The second line gets the value of the Storyline variable nonrounded score and sets it to the JavaScript variable rounded num value, for num value we’ll do a mass truncate. And that means that we’ll lose all the numbers after a coma or digit, and we’ll save it in the JavaScript variable here as “RoundedNum”. Now the Javascript here has rounded num”. The failure therefore will put it in the rounded score or firewall, so let’s click on “OK”. And “OK” here. And here, you see “RoundedScore”.

So now we can test our solution if it works now, because we all use JavaScript, we can’t use the preview function in Articulate Storyline, but we have to do it in the HTML output. So let’s open HTML output now. So I have here now, my Articulate storyline HTML output. So what we’ll do is I’ll answer the first two answers correctly, or questions correctly, and the third, fourth and fifth and sixth incorrectly. And now I’ll go to my “Results” slide. And you see here, this is the standard Storyline variable score with 33.33%. And this is the rounded num variables, a score. And you’ll see it’s 33%. So in this video, I’ll give you two solutions to lose the .33 in the result slide score.

You can do triggers in Articulate Storyline, or you can also do it with a four lines of JavaScript.

Create An Automatic Progressbar With Built-in Variables in Storyline 360

Progress-bar-builtin-variables

In this video, I’ll show you step-by-step two ways how you can create an automatic progress indicator with built-in variables in your next Storyline 360 e-learning course.

In one of my YouTube videos that I recorded in 2019, I showed you step by step how you can create a automatic progress bar in Articulate Storyline with variables. But that was quite complicated and I also got a lot of questions about it. Now fortunately, it’s a lot easier nowadays since we have built-in storyline variables. So today it’s time for a new video in which I show you two ways to indicate progress in your e-learning course with building variables. Now, let’s start with way one.

cta under video

Progressbar With Percentages

Now for way one, I also already did some preparations. You see here, a scene with 10 slides and let’s go to slide view, just a little bit down, and there are objects on my slide you see, but there are no things on the timeline. So that means we have to go to the slide master because I prepared something on the slide master. Not what you see here, if I go to the master slide, I have here a text box that displays the project.progress and this variable, building variable in Storyline shows the progress in percentages, for instance, 10, 20, 30, et cetera. And what I also have on this slide is a progress indicator.

Set Up The Progress Indicator

Now, I created progress indicator with shape, simple. And I added some states, so what you see here is I added a state for 10%, 20%, 30%, 40%, up to 100%, and then it’s full. So these you can use throughout your whole module and what you also can do is create smaller steps. For instance, five, 10, 15, 20, and so on. Now, let’s create some variables or triggers to make this work. So I’ll click on done editing state here and I go into create my first trigger. And that’s really simple.

Create Triggers

What I will do is I will say, change state of progress one to, for instance, 10% or 10. When the timeline start on, and it must not be progress one, but this slide and we create a condition with a variable and we choose a built-in variable. Go to slide numbers and then choose progress through module. So if and it’s not has to be manual, but I want to, this project progress is 10. And let’s duplicate this trigger and set it on this slide and set it to 20 and make it 20 here. And now we can see what happens if we preview this scene that we already created.

Preview

So I closed the master slide and I’m now in my preview, you’ll see that this scene has 10 slides. Storyline automatically says here, I’m on 10%, and you’ll see that the progress indicator indicates 10%. Now, let’s continue to the next slide and you’ll see 20% and a progress indicator goes to 20%. Now we only created two triggers, so if I go to the next slide, you’ll see it will goes to state normal and this is 100%, so if I create triggers for the rest, you will have working progress indicator for 30, 40, 50, 60, up to 100%.

ProgressIndicator with a dot per slide

Now, this was the progress indicator way one and the second progress indicator that I want to show you is with circles, so you have a circle for each stage where you are in your module, or for instance, in your scene. So this is the second option for a progress indication, for instance, you can use in a scene. So you see here 10 dots, every dots represents a slide. So you can see that 10 slides and they are now hidden as we scroll this a little bit down and they have a state.

Set Up The Progress Indicator

So the normal state is whites and the visited state is blue. So therefore you can say, if it’s white, then it’s not visited, if it’s blue, it is visited. Now you can also create more bullets than you have slides, so then you can use this in your course and you can see, for instance, if I have a scene with five slides, I can use this. If I have a scene with eight slides, I can also use this. So let’s create the first variable or trigger.

Create Triggers

So what I will do is change the state of, and this will P1, to normal. When the timeline start on this slide and now we are going to use a built-in variable, slide number, project, and what we are wanting to do is here total slides in scene. And I’ll set it to one and the indicator here, I set it to greater or equal to one. So this means, it shows the first bullet if there are more than one slide or if there’s more than one slide in my project. This I can also do for the other bullets.

So I create triggers for five bullets. So for P1 to P5. So if I close my master view and I preview this scene, or moment when the preview is finished, you’ll see here that you see five bullets, no, but we also want the triggers that are set to visited. So I’ll go back to my slide master and go to the master slide and add a new trigger. So in a new trigger where we can copy this one and paste it. So P1, we’ll set to selected or visited. One moment to check which state I used. I used visited. Visited when the timer starts on the slide and now, I’ll not use scene total slides, but I’ll use scene slide number.

So when scene slide number is one or more than one, that means that you can see the indicator, so it will be set to visited if slide is one, but also if it’s two, three, four, or five. So let me create the triggers for slide one to five and I’ll show you how it works.

Preview

So I created the other triggers. Now, let’s go to preview and see what it does. So, preview the scene and you’ll see now I’m on page one. So the first is set to visited. I go to page two. So the second is set to visited. I go to page three, the third is visited. And it’s also for four and for five. And if you go back, you’ll see also, “Oh, I’m on four, so I’ve seen slide one to four.” Slide one to three, two, and slide one. So these are two ways to create a progress indicator, for instance, for your whole module or within a scene with building variables in Articulate Storyline.

I’m transforming my Articulate Storyline classroom training, also my YouTube tutorials to a laser-focused, online course on how to create engaging e-learning training with Articulate Storyline. Now, are interested, you can join my waiting list and you’ll be the first one to know where my online course will launch. You can find the link to the waiting list in the description of this video below.

And if you want to create great engaging e-learning in Articulate Storyline, make sure that you get my free step-by-step guide on how I create e-learning in Articulate Storyline. And I know for sure that it will help you because it describes my whole process that I use for every e-learning module in Articulate Storyline that I’ve built. And was this video useful to you? Then hit the like button below. And don’t forget to hit the subscribe button and the bell notification icon so you won’t miss any of my upcoming videos.

New Accessibility Controls Player Feature In Storyline 360

Accessibility-controls

In the upcoming video’s I’ll teach you how you can create Accessibile e-learning courses with Articulate Storyline. In the first video in this series I’ll explain the new Storyline Player Accessibility Controls feature, how it works and how you can use it for more Accessibility e-learning courses.

In the december 2020 update Articulate gave the Storyline 360 player a big facelift and They changed the order of the controls to a more logical order but also added Accessibility Controls for users and keyboard shortcuts so users can use shortcuts to operate your storyline course.

Accessibility Controls

In this video I’ll zoom in on the Accessibility Controls. This is the gear icon in the Storyline player.
If you start a new project they are turned on by default. For now there are three controls:

  • zoom to fit
  • Accessible text
  • and Keyboard shortcuts

You can choose to show the Accessibility Controls to your users. For a new project the controls are turned on by default. To hide them go to the Home Tab. Click player and uncheck accessibility controls to hide them from the player.

Let’s dive in the different controls

Zoom to fit

When the switch is turned on, learners can use the zoom settings in their browsers to make slides bigger and easier to see.

The “Zoom to fit” option is turned off by default. If you’d prefer to start with it turned on, open the variables manager and set the Player.ZoomToFit variable to True.

Go to Variables > Built-in Variables double click the variable Player.ZoomToFit and change the defaukt value from false to true.

Accessible text

Learners can switch between high-fidelity SVG text and accessible HTML text. When accessible text is enabled, learners can use custom stylesheets or browser extensions to change how text displays. For example, they might swap fonts, enlarge the font size, or increase the line spacing.

Be aware that if you want to use Accessible text modern text rendering must be turned on. For new Storyline projects Modern text is turned on by default. If you want to use Accessible text in an existing module you can check if modern text rendering is turned on go to the design tab > Click Fonts and at the bottom of the dropdown menu see if Modern text is checked.

Accessible text is turned off by default if you want to make sure your users can use it from the start you can turn it in trough the variable manager. Open the variables manager double-click the Player.AccessibleText variable and set the default value to true.

Keyboard Shortcuts

This switch appears when learners view the course on a laptop or desktop computer. Keyboard shortcuts are enabled by default, but learners can turn them off if they conflict with shortcuts in browser extensions or other apps.

Keyboard shortcuts are turned on by default in Storyline 360. There is no variable to disable them.

In a published course a user can click SHIFT + ? to see which keyboard shortcuts are available in the e-learning.

The following shortcuts are available:

A user can tab trough the player controls and there are several other shortcuts to operate the storyline player. For the seekbar a user can use the following shortcuts:

  • Spacebar: Plays and pauses the timeline; replays the slide when the timeline has ended
  • Home/End: Jumps to the beginning or the end of the timeline
  • Arrows: Jumps backward or forward in 0.1-second increments
  • Page Up/Page Down: Jumps backward or forward in 1-second increments

For the audio toggle a user there are the following shortcuts available:

  • Enter/Spacebar: Toggles audio on and off
  • Home: Mutes audio
  • End: Jumps to max volume
  • Arrows/Page Up/Page Down: Adjusts volume in 10% increments

This was the first video in a series on how to build more accessible e-learning with Articulate Storyline. See you in the next video.

Create Engaging Drag And Drop Interactions With States In Storyline 360

Storyline-drag-and-drop

In this video, I’ll show you step-by-step how you can create a more engaging drag-and-drop interaction in Articulate Storyline with states.

So here’s my Storyline project, and you’ll see I already did some preparations. You’ll see here a background photo, a rectangle, and question texts. Can you file the documents in the right place? Drag the documents to the right folder. So we’re going to create a drag-and-drop interaction where you must drag documents to a folder. Now, let’s start.

Create Drop Items

Now, the first step is to create my drop items, and therefore, I go to the insert tab and click on the icons, and now my search icons window will open and I’ll choose folder here. And now let’s scroll down to see the folder from my example, and that is this one. So I’ll select it and click on insert. Now it’s on my slide, so let make it a little bit larger right now. That’s okay. And this will be our normal state. And now let’s create the open state of the folder.

So what I’ll do now is I’ll go to states, go to edit states, click on new states, says open, click add, and I’ll create my own state. So therefore I go to insert, shape. I’ll choose this shape and I’ll position it a little bit down. I will format it with color. So no fill color but will a shape outline with a width of three, no, I think four is okay. So with a width of four pixels.

Create Drag Items

We now have our first drop target with a normal state and an open state. And later on, we’re going to add another state, a field state, where there is document in the folder. But now we’re going to create our drag target. So I’ll close. I’m done editing states. I’ll go to insert again, icons. And now I want to search for a document, and this is a good document. So let’s insert this one. It can be a little bit larger. I think this is very good.

But what you see now is that the document is transparent. So what we ware going to do now is add two shapes with white. So we will give this document a fill because it cannot be this white. As we choose shape fill the lines will be white and not center. So what I’ll do is I’ll go to insert, go to shape, select a rectangle here. One rectangle and another, make it a little bit smaller. That’s okay. And now format this one and no outline, and I was clicking with my right mouse and for send it to back, I click send backwards. So it’s behind my folder now, and now I will crop this. So for this, I press control G on my keyboard and it’s cropped right now. So this is our first drag target.

And now create the new state of the drop target, where the drop target with the document and therefore I’ll copy the folder. I’ll go … sorry, copy the document, control C. I go to the folder, click here on states and click on edit states. And what I’ll do now is I’ll duplicate this state and I’ll choose the name fields. You see I now copied the state. And what I’ll do now is I’ll paste the document here. It’s now here. But what I can do is I can drag it over here with my right mouse. I’ll choose send back and send it backward. And now it looks like it’s in the folder. So what I’ll do is I’ll rotate it a little bit. So now we have a field state with one document.

Now what we can do now is to copy this one and paste it. So we have a second drop target and we can align it on the slide. So this is okay. What I’ll do is I’ll align them. I cropped them and now I’ll align them on my slide. And I ungroup them with control shift and G, and now I want a new text label under the folders. So here I draw a text label that says lift, make a little bit smaller, and placed in the middle. And we’ll copy this text box and paste it here, and here it’s right.

Convert Storyline Slide To Freeform Drag And Drop Interaction

So this will be a little bit of a word joke, drag the documents to the right folder. This is the right folder. So it must be here. So what we have now on our slide, are drop target one, drop target two, and a drag item. So what we can do now is go to insert and click on convert to free form, and on the convert slide to free form question, we choose drag and drop and click on okay.

And Storyline converts our slide now to drag-and-drop free form question. And what we can do now is choose here for the different objects. So our document group will be the first drag item and the drop targets will be icon one and it has to be icon three. And we can also icon one, for instance. And now let’s go back to slides view.

Match Drag And Drop Targets

Now we have our drag and drop targets in place. We can use some triggers to make it more engaging. So what I’ll do is I’ll drag the folder for the document over the folder, the folder will open. So that’s created for now. So what I’ll do is I’ll go to triggers. I’ll choose change state of icon one to open and the user drags over. The object is group one and the target is icon one.

So let’s see what it does when we preview it. So if we drag this one and go here and you see that we can open that folder. Now let’s close our preview and make the next trigger that it looks like the document goes into the folder. Therefore, what we can do is create a new trigger that says change state of icon to field one when and not user drags … when user drops the object on the target. And the object here is group one and the target is icon one.

Create Triggers

And what we’re going to do now is we have created a next trigger that will hide the document. So we’ll choose change state of. And I see now that we have a group and we can now change the state of a group, is what I’ll do, is I’ll go to the document, to my timeline, ungroup this. And I’ll pick the rectangles, cut them, and I’ll select my documents, go to states, edit states, and now I’ll paste them and I’ll send them backwards. So they’re behind my document.

And now it’s possible, what I want with the action, but you see that my first action also disappeared right now because it was a group and we changed group to this documents. So let’s recreate the first action that says change date of icon one to open when the user drags the object, and the object here is, let me see, icon two into icon one. Let’s click it and let’s preview it quickly. So if I pick the document and you’ll see the folder will open, so now we create our next trigger and the next trigger will be change state of icon one to field one when the user drops an object on this.

So the object will be icon two. So that is the document. And the target is here, icon one. So what happens right now, if we preview it and open it, you see the folder will open, and now I’ll drop it. So I’ll remove my mouse and you’ll see the folder is now … of the document is now in the folder, but the document is also in front of the folder. So we will create a new trigger that will hide this folder, sorry, hide the document.

So what I’ll do is I’ll create a new trigger that says change state of icon two to hidden when user drops the target. So the object will be icon two and it will be on icon one and let’s preview it again.

So drag it, it will open, and I’ll drop it, and you’ll see it’s gone and it’s now in the folder. So this way you can create more interaction, engaging drag-and drop-interactions, where things really happen when a user uses the drag-and-drop interaction.

So I hope this gives you inspiration for the next project when you’re using drag-and-drop interactions.

I’m transforming my Articulate Storyline classroom training also my YouTube tutorials to a laser-focused online course on how to create engaging e-learning training with Articulate Storyline. Now if you are interested, you can join my waiting list and you will the first one to know when my online course will launch. You can find the link to the waiting list in the description of this video below.

And if you want to create great engaging drag and drop interactions in Articulate Storyline, make sure that you get my free step-by-step guide on how I create e-learning in Articulate Storyline. And I know for sure that it will help you because it describes my whole process that I use for every e-learning in module in Articulate Storyline that I’ve built.

And was this video useful to you? Then hit the like button below, and don’t forget to hit the subscribe button and the notification icon so you won’t miss any of my upcoming videos.

How To Create Interactive Videos With Multiple Select Questions In Storyline 360

Interactive videos with multiple select questions

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.