Storyline Tips

Have you ever needed to lock down a slide so the learner couldn’t move forward until they completed the activity? This tutorial will help you do just that! It is intended for Articulate Storyline 1 or 2, but the concepts can be applied to any authoring tool. I have created a starter with three simple click to reveal slides. Note that the screenshots are of Storyline 2, but the options are also found in Storyline 1. There are three ways to lock down a slide.

Option #1: Take away the next button

This one works in both Storyline 1 and 2.

The learner won’t physically be able to move forward until all steps have been fulfilled. They won’t have any expectation that they can. “There is no next button to click, so I need to do this slide.”

What do we need to do for this setup?

  1. Select the Base layer. A gear icon should appear. Deselect the Next button. I also have selected “When revisiting: Reset to initial state.” And since this is the first slide of the course, I took away the Previous button as a best practice.
    Option1_step1_slideProperties
  2. Create variables for each step. I have named these: eLB_noNext_1, eLB_noNext_2, eLB_noNext_3, eLB_noNext_4, eLB_noNext_5.
    Option1_step2_variables
  3. Create triggers for the variables.
    Option1_step3_trigger
    Make sure these triggers are above the Show Layer trigger. This will assure that each trigger gets activated before showing the layer.
    Option1_step3_b_moveAbove
  4. Create a Continue button with a trigger to “Jump to next slide” when clicked.
    Option1_step4_a_jumpToNextSlide
    Select the States and set the initial state to hidden.
    Option1_step4_b_continueHidden
  5. Create a trigger to show the Continue button on the Base layer if all the “noNext” variables are True in each layer when timeline starts (or ends if you have audio).
    Option1_step5_a_trigger
    Copy this trigger and paste in each layer.
  6. Create a debugger textbox with the variables for this option, I placed the following text in a textbox and named that layer DEBUGGER HIDE so I remember to hide it when publishing: %eLB_noNext_1%, %eLB_noNext_2%, %eLB_noNext_3%, %eLB_noNext_4%, %eLB_noNext_5%. Preview. Did it work? If not why? What trigger didn’t turn true? This information is valuable if you need to fix anything.

Option #2: Hide the next button

This only works in Storyline 2.

Just like the first option, the learner won’t physically be able to move forward until all steps have been fulfilled. Most of the steps will be very similar to option #1.

What do we need to do for this setup?

  1. Select the Base layer, and then select the gear icon. Make sure Next is selected in the Slide Navigation Controls. I also have “When revisiting: Reset to initial state” selected.
    Option2_step1_a_NextSelected
  2. Create a trigger to hide the next button on the base layer.
    Option2_step2_hideNextBtn
  3. Create variables for each step. I have named these: eLB_hideNext_1, eLB_hideNext_2, eLB_hideNext_3, eLB_hideNext_4, eLB_hideNext_5.
    Option2_step3_variables
  4. Create triggers for the variables.
    IMG_10092015_161608
    Make sure these triggers are above the Show Layer trigger. This will assure that each trigger gets activated before showing the layer.
    Option2_step4_moveAbove
  5. Create a trigger to show the Next button if all variables are true in each layer when timeline starts (or ends if you have audio).
    Option2_step5_trigger
    Copy this trigger and paste in each layer.
  6. Create a debugger textbox with the variables for this option, I placed the following text in a textbox and named that layer DEBUGGER HIDE so I remember to hide it when publishing: %eLB_hideNextt_1%, %eLB_hideNext_2%, %eLB_hideNext_3%, %eLB_hideNext_4%, %eLB_hideNext_5%. Preview. Did it work? If not why? What trigger didn’t turn true? This information is valuable if you need to fix anything.

Option #3: Keep the next button, but have a notice that they can’t move on until they have completed the activity

This works in both Storyline 1 and 2.

With this setup the Next button stays where it’s at. The learner may click on it thinking they can move to the next slide, but they will receive a popup box that notifies them that they need to finish the activity before moving on.

What do we need to do for this setup?

  1. Make sure Next is selected. I also made sure that “When revisiting: Reset to initial state” is selected.
    Option3_step1_slideProperties
  2. Create variables for each step. I have named these: eLB_prompt_1, eLB_prompt_2, eLB_prompt_3, eLB_prompt_4, eLB_prompt_5.
    Option3_step2_variables
  3. Create triggers for the variables.
    Option3_step3_a_trigger
    Make sure these triggers are above the Show Layer trigger. This will assure that each trigger gets activated before showing the layer.
    Option3_step3_b_moveAbove
  4. Modify the trigger that says Jump to next slide when user clicks the Next button.
    Option3_step4_a_modifyThisTrigger
    Under Show conditions, make sure all eLB_prompt triggers are set to “Equal to True.”
    Option3_step4_b_onCondition
  5. Create a new layer. Name it “Prompt.” Make sure “Hide other slide layers” is deselected in your Slide Layer Properties. I have also disallowed seeking and selected “When revisiting: Reset to initial state.”
    Option3_step5_slideLayerProperties
  6. Create your message. Include a Close button that hides that layer.
    Option3_step6_simpleMessage
  7. Next we need to create a trigger that says when to go to the Prompt layer. I find the easiest way to create this is to copy the trigger from step 5 and change the Action from “Jump to next slide” to “Show layer”. Then, change the On Conditions ANDs to ORs and then all the “Equal to True” to “Equal to False” instead.
    Option3_step7_promptVariables
  8. Create a debugger textbox with the variables for this option, I placed the following text in a textbox and named that layer DEBUGGER HIDE so I remember to hide it when publishing: %eLB_prompt_1%, %eLB_prompt_2%, %eLB_prompt_3%, %eLB_prompt_4%, %eLB_prompt_5%. Preview. Click 1, now click next, did the prompt show up? Do this for all the other numbers. Do it in any order. You should be getting the prompt layer each time until all are correct.

Bonus: Hover states

This works in both Storyline 1 and 2.

What if you wanted to do a hover instead of a click to control any one of these options. I would discourage it, there are a few more things involved. But let’s grab Option #1 and convert it to to be controlled by hover instead.

What do we need to do for this setup?

  1. I am copying from the first slide we did but making sure it has the Previous button selected in the Base Layer Slide Properties since we’re now a little later on in the course. As a reminder, I am not selecting the Next button since we’re using the example of Option #1. You could copy any of the Options and the basic idea would work. I am using the first one, but you can follow along with any of them.
    Bonus_step1_SlideProperties
  2. We will need to create six variables: five for the steps, and one to be a counter. In Storyline, we can control the triggers through actions. We can “watch for a variable change,” or we can “perform an action when something is clicked,” or “when the timeline starts, if these conditions are met, then do this.”In the other three options, we had a variable in each layer for “when the timeline starts, if these conditions are met then do this,” But, since we are doing hover states, we can’t use the same logic. Instead, we will watch for a variable change. We will be looking at the counter variable. In order to prevent cheating by rolling over the same number over and over, we will use the other five true/false variables like before.
    Bonus_step2_a_variables
    I chose to keep each text box in its own layer. If you want them to be on the Base Layer, they would be set to hidden initially in the States tab and then later shown after being hovered over. But to simplify the steps we need to take, I am leaving it as it was.
  3. Create a trigger that adds 1 to the “counter” variable when the Mouse is hovered over. Deselect Restore on mouse leave. On Condition if eLB_hover_# (where # is 1-5) Do this for all five triggers, remembering to change the # to whatever variable you’re on. Make sure this trigger stays on top. This needs to happen before the trigger in the next step.
  4. Delete the triggers that say “Set eLB_noNext_# to True when the user clicks…” and replace them with “Set eLB_hover_# to True when the Mouse hovers over” deselect Restore on mouse leave. This trigger should happen before the trigger in step 5.
    Bonus_step4_adjustVarWhenHover
  5. Delete Show layer # (where # is 1-5). Replace with “Show layer # where Mouse hovered over step #” and deselect “Restore on mouse leave” as before.
    Bonus_step5_ShowLayer
    So the trigger hierarchy should look like this.
    Bonus_step5_b_hierarchy
  6. Delete all the triggers in all the layers that says “Change state of Continue Btn…” On the base layer create a trigger that says “Change state of Continue Btn to Normal when eLB_hover_CTR is greater than or equal to 5″ (the number of steps).
    Bonus_step6_hoverCtr
  7. Create a debugger textbox with the variables for this option, I placed the following text in a textbox and named that layer DEBUGGER HIDE so I remember to hide it when publishing: %eLB_hover_CTR%, %eLB_hover_1%, %eLB_hover_2%, %eLB_hover_3%, %eLB_hover_4%, %eLB_hover_5%. Preview. Hover over each number more than once. You should see the counter variable only increase 1. And the other variables only show True. Once the Counter reaches 5, the Continue button should show up.

If you didn’t want to do a hover activity but some other kind of interactivity like a drag and drop, these concepts can still be applied. With a drag and drop, I might change when the Next button shows up or Prompt displays to “When all items have been dropped on any of these zones, then do this.” Or if it’s just an animation, change it to have one true/false that starts false and ends true. It can also be helpful to lockdown the seekbar (a feature of Storyline 2).

final_thoughts_1

I hope you enjoyed this tutorial. Here is the final file I ended up with. Your welcome to download it and dissect it! Let us know creative ways you like to lock down your slide in the comments below!

Pin It on Pinterest