HELP -Tab interaction and the next button

Hi,

I am running into a number of issues related to my e-learning project.

I have selected the Tab Interaction template in storyline. I want the user to listen to each tab fully before they can click the next button to move to the next slide.

Currently when I hit preview project I am able to move around and click each tab without having to listen to the entire tab.

i.e Click on tab 1 listen part way then I click on tab 3 and it moves to tab 3. I want to add a condition which prevents the user from clicking on another tab until they have finished listening to the current tab their in.

Secondly I want the user to listen and click on all 5 tabs before the next button can be activated.

Any help would be appreciated. The more I try and add triggers with conditions the more the whole presentation stops working.

Thanks,

Kristine

11 Replies
Christine Hendrickson

Hi Kristine! :)

Are you able to share the .STORY file here? Sounds like you could use an extra pair of eyes on this one :)

You should be able to use some variables and conditions that adjust when the audio played on the tabs completes. 

You won't be able to hide the "Next" button, but you should be able to apply conditions that will only allow it to advance if the user has completed all of the tabs. 

Kristine Y

Hi Christine,

Im very confussed with using variables and states. I have looked through the tutorials but it doesn't seem to apply with the tabs im using.

I have tried to hid layers, show states, add variables but each time I try and add it, the screen either disapears or it doesn't work.

I have audio files for each tab that the person will select. I also have audio on the main page before any tabs are selected.

Currently the user can click on any tab and the voices will all override on eachother. What I would like to incorporate is as follows:

1) Firstly add a condition that does not allow the user to click on any of the tabs until the home page audio is complete.

2) Secondly when the user clicks on a tab they must listen to the entire audio for that tab before selecting another tab. (Note the order of the tabs selected is not important, but they need to listen to each tab fully)

3) Finally the user should not be able to click or activate the next button until all the tabs have been visited and listened to.

This is the first time I am using this software. Unfortunatly I have no experience in coding so the variable statements are not clear. When i entered a true/false statement I still couldn't get it to work.

Thanks,

Kristine

Christine Hendrickson

Hi Kristine :)

Since you have quite a few things going on here, I want to try to tackle one issue at a time.

First, for this:

  • 1) Firstly add a condition that does not allow the user to click on any of the tabs until the home page audio is complete.

This was actually quite simple and I believe you should be able to get this set up pretty quickly. I went ahead and created a new variable "MainAudioFinished", which is a True/False variable with the initial value of False. The triggers you're using for the layers are fine, but you'll want to add an additional condition to them so that the layers will only show if that variable changes to "True". 

You'll want a new trigger that adjusts the initial value of the variable to True when the Media Completes

I've tested this out on your file and it's working quite well :)

You should be able to use a similar method for each layer and audio. You may want to make new variables for each audio, so you can keep track of what's finished and what hasn't. 

For the next button, you can actually either work with states or variables. I see that you have some states already applied to the tabs, so, what you could do is add a condition for the states of the buttons. However, since your final tab will be in the "Selected" state and not the "Visited" state, that may not work.

The best option for this, I think, is to add a condition for all of the audio variables. So, your "Next" button trigger will jump to the next slide only if all of those variables are True. Now, keep in mind that the default value for variables is "True", so you want to make sure you set that up as "False" when you create the variable. 

I'm attaching the modified version with the initial changes made for the main audio, variable and condition. On the main slide I added some small variable text. If you listen to the audio, you'll see the text change from "false" to "true" when the audio completes, and you'll be able to view the other layers.

Kristine Y

Hi Christine,

I appreciate your help. For some reason I had a lot of difficulties wrapping my head around variables and states.

I will try to apply the principles and concepts as you indicated.

This is my first attempt tackling an e-learning module for my company. Its a side project that I have been tasked with.

But it's a great learning opportunity for me.

I will keep you posted if I run into issues.

Thanks again,

Kristine

Kristine Y

Hi Christine,

I have attempted to add variables to each layer. However despite my true false statement, I can still play Tab 2 before Tab 1 is complete.

Am I adding the Variables in the wrong section? I have put them in each slide layer and the main page.

Could you take a look at my triggers?

Thanks,

Kristine

Christine Hendrickson

Hi Kristine!

You're so very close! :) You did a great job, but I noticed one thing that needs to be changed. As I mentioned earlier, the default value for a True/False variable is "True". You need to change this initial value to "False". If the value starts off at "True" that condition will always be applied, because it never actually equaled "False".

Looks like this is the case for both "Variable1" and "Variable2". So, you'll just need to open the variable pane, double-click on the variable and change the value to "False":

 I'm attaching the updated version :)

Thanks!

Kristine Y

Hi Christine,

Sorry for all the questions, but I'm still running into some issues.

I have the triggers working so that they cannot move to another tab until they have completely listened to the tab they are in.

However if I am listening to tab 1 and I click on tab 2, 3, 4 or 5 the button will change to visited "green" which is not what I want.

I do not want any of the buttons to change color until they have visited i.e listed to the entire media for that tab. I thought by adding the "change state" of the button to "visited" when media plays and on the condition that variable is true would control the color change.

Your assistance is greatly appreciated. I'm not sure what I am missing.

Kristine

Christine Hendrickson

Hi Kristine! I hope you had a happy 4th :)

I apologize for the delay, I've been out of the office for the holiday and trying to catch up on the forums today.

I think the easiest approach here would be to set the initial state for the tabs to "Disabled". That way, if a learner clicks or hovers, they won't be able to access the content on those tabs or see the state changes. You can trigger the state to change to "Normal" by using the same type of condition for the variables. 

For example, if you set the initial state to "Disabled" for the "Service Counters" button and trigger that state to change to "Normal" when the "Design" variable is "True", the states will not change until that first initial media has completed.

You can do the same for each tab, simply triggering the state change when the variable for the audio and the layer have completed.

I went ahead and made the changes for the "Service Counters" button in the project you attached, if you'd like to take a look.

I hope this helps!