Here's a simple tab interaction template*. You can change the background by switching to a different color theme or apply your own background if you prefer.
*This template will work for folks using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here.
I have used this template for a course but have a challenge with the triggers. I have a similar problem with hotspots. Essentially, any time I have layers I am having a hard time figuring out how to automate the slide. Here it goes:
I am having difficulty requiring the user visit each of the 5 tabs on my slide before automatically moving forward to the next slide. Each tab has a voice recording and I am trying to eliminate use of the “next button”. When I try to use states, by changing the layers of each tab to "visited" when the user clicks, the last tab that would be visited gets skipped because the instant that the user clicks it, the tab is now "visited".
I have been trying to figure out a way to make the media on each layer dictate the timeline and the state, but can' t figure o... Expand
I have used this template for a course but have a challenge with the triggers. I have a similar problem with hotspots. Essentially, any time I have layers I am having a hard time figuring out how to automate the slide. Here it goes:
I am having difficulty requiring the user visit each of the 5 tabs on my slide before automatically moving forward to the next slide. Each tab has a voice recording and I am trying to eliminate use of the “next button”. When I try to use states, by changing the layers of each tab to "visited" when the user clicks, the last tab that would be visited gets skipped because the instant that the user clicks it, the tab is now "visited".
I have been trying to figure out a way to make the media on each layer dictate the timeline and the state, but can' t figure out how to make each layer's state communicate with the overall slide timeline.
Thanks in advance for any advice any of you may have!
Hey Sarah - So just to clarify: are you wanting the slide to advance automatically at the end of the layer's timeline if all layers have been visited? Here's one way that you can accomplish that: http://www.screenr.com/Jhf8
HI Jeanette, This is very helpful and solves one of the main problems I was having. The remaining challenge is that if the user goes through and quickly clicks each tab without spending any time on it, each tab is now "visited" and the slide auto advances after the timeline of the tab they are currently on finishes. Is there a way to create a condition where it is only "visited" if the timeline on every tab is viewed through completion?
Thank you!
Hi Sarah, yes. You could do this:
(1) create a true/false variable for each tab (I'd name them something like "Tab1Complete," "Tab2Complete," and so on) so that Storyline can monitor whether each layer has been played through to the end..
(2) Set the default value of each one of these variables to false.
(3) Then create a trigger on each layer which adjusts the value of the variable to True when the timeline of the layer ends.
(4) Lastly, change the conditions on your auto-advance triggers, so that the auto-advance only happens when the value of all 3 true/false variables equals True.
1st time user here. Love the tool, the forums, and the folks designing the tutuorials and free templates. Articulate just elevated me from being an MS PPT user to a presentation god! You guys rule!
This is wonderful. But I have a question -- I copied the main layer's objects into one of my own template's slides, and am basically rebuilding your interaction. I can't for the life of me get the first layer's text to disappear the way you do. If I go into layer 1's properties, I can tell it to hide all of the other layers, but then I lose all the tabs and everything. I was thinking about adding a white box to each layer, to cover up the main layer's text, but that doesn't seem to be what you did... Can you (or someone) explain? Thanks a bunch!!
I need to clarify. For each "tab text layer", I've chosen "Hide other slide layers" (as you did), but I can still see the text on the base layer. What I meant to say was that if I "hide objects on the base layer," then I have basically nothing. What I want is to hide the introductory text in the base layer while showing the new next pertaining to each tab. Yours does it effortlessly, even without going to preview. When I click on Layer 2, the base layer's text disappears.
Hey Luke! See if this helps you with your question about how to hide base-layer objects from appearing on the other slide layers in your published output: http://www.screenr.com/uev8
Just thought I'd post that I've incorporated this into a training I'm developing, but as the current interaction stands, it's not 508 compliant/accessible for keyboard navigation. You can press the tab key sequentially to select any of the 3 bars (I'll use bars instead of tabs to describe these objects), but pressing the space bar does not select them. If you take away the added object (the little indicator triangle), then space bar selection works. Removing the little triangle takes away a little of the "sparkle" but none of the functionality, so it's OK.
Going a step further in accessible development, however, from simple keyboard navigation for a sighted user to keyboard navigation for the user of a screen reader, further modification is preferable. I ended up getting all "old-sc... Expand
Just thought I'd post that I've incorporated this into a training I'm developing, but as the current interaction stands, it's not 508 compliant/accessible for keyboard navigation. You can press the tab key sequentially to select any of the 3 bars (I'll use bars instead of tabs to describe these objects), but pressing the space bar does not select them. If you take away the added object (the little indicator triangle), then space bar selection works. Removing the little triangle takes away a little of the "sparkle" but none of the functionality, so it's OK.
Going a step further in accessible development, however, from simple keyboard navigation for a sighted user to keyboard navigation for the user of a screen reader, further modification is preferable. I ended up getting all "old-school powerpointy" by using 4 slides instead of 4 layers. The reason is that at this stage of the game with Storyline, the developer has no control over the tab order or tab focus. So, in the current, single-slide configuration, after tabbing to the first bar, you hit the space bar to select, and the new layer appears. But to "read" it, the screen reader (hereafter JAWS) has to "find" the text on that layer, i.e., it can't read the text until the tab focus is on the object on that new layer. If the new layer automatically took precedence in tab order, all would be OK, but it doesn't work like that. Keep pressing the tab key over and over. Sadly, what happens is that tab focus goes in order to every subsequent object on the original layer, then the player controls, then back to the top, THEN finally to the objects on the new layer. So close your eyes and imagine pressing spacebar to select bar A to find out what's behind curtain A, but then not hearing the text for Information A. Tab? No. Tab? No. Tab? No. Tab? Now it's the previous button. Tab? Now it's the Next button. 3 or 4 or 5 tabs later you finally get to hear Information A.
If you go old school and have each tab open a new slide, it saves maybe half a dozen tabs for the user to get the information. Makes the story view more cluttered and the navigation buttons don't work as seamlessly, but it gets the disabled user their information in a more friendly way.
I sincerely hope Articulate addresses tab order and tab focus control SOON so this can be the ultimate e-learning development tool for building accessible training.
Hi Luke and thanks so much for taking the time to post! I totally hear you on the accessibility points, and you're correct, this particular interaction was not specifically designed to meet 508 compliance requirements. While Storyline does provide many features to optimize the accessibility of course content (www.articulate.com/.../storyline-section-508.php) it's up to individual course developers to decide which accessibility features they want to incorporate into their courses. That said, I agree that it would be GREAT to have more control over tab order and the ability to turn off screen-reader-visibility on layers. These kind of things make excellent feature requests, and it would really help our dev team to hear from accessibility experts like yourself who value these features. I'd en... Expand
Hi Luke and thanks so much for taking the time to post! I totally hear you on the accessibility points, and you're correct, this particular interaction was not specifically designed to meet 508 compliance requirements. While Storyline does provide many features to optimize the accessibility of course content (www.articulate.com/.../storyline-section-508.php) it's up to individual course developers to decide which accessibility features they want to incorporate into their courses. That said, I agree that it would be GREAT to have more control over tab order and the ability to turn off screen-reader-visibility on layers. These kind of things make excellent feature requests, and it would really help our dev team to hear from accessibility experts like yourself who value these features. I'd encourage you to share your needs with them via this page: www.articulate.com/.../submit.php so that your thoughts are formally recorded & logged in the feature request system. Thank you so much!
i have a question: when i want to write on the Layer 1, it remains the text box of the initial tab, and when i select hide objects on the base of slide, desappears everything (i dont understand how Louis spencer could fix it). please heeeelp
Hey Andrea, instead of choosing "hide objects on base layer" within the layer properties, keep that box UNMARKED, and use this method to hide specific objects on the base layer from appearing on other layers: community.articulate.com/.../hiding-a-base-layer-object-from-appearing-on-other-slide-layers-in-articulate-storyline.aspx If you continue to have trouble, could you post your file in the Storyline forum so we can help? community.articulate.com/.../65.aspx
I need more than 5 tabs. When I copy and paste a new tab, it's labelled 11 (instead of 6) under the Triggers pane on the right. Can I also rename the tabs?
48 Comments
I have used this template for a course but have a challenge with the triggers. I have a similar problem with hotspots. Essentially, any time I have layers I am having a hard time figuring out how to automate the slide. Here it goes: I am having difficulty requiring the user visit each of the 5 tabs on my slide before automatically moving forward to the next slide. Each tab has a voice recording and I am trying to eliminate use of the “next button”. When I try to use states, by changing the layers of each tab to "visited" when the user clicks, the last tab that would be visited gets skipped because the instant that the user clicks it, the tab is now "visited". I have been trying to figure out a way to make the media on each layer dictate the timeline and the state, but can' t figure o... Expand
Just thought I'd post that I've incorporated this into a training I'm developing, but as the current interaction stands, it's not 508 compliant/accessible for keyboard navigation. You can press the tab key sequentially to select any of the 3 bars (I'll use bars instead of tabs to describe these objects), but pressing the space bar does not select them. If you take away the added object (the little indicator triangle), then space bar selection works. Removing the little triangle takes away a little of the "sparkle" but none of the functionality, so it's OK. Going a step further in accessible development, however, from simple keyboard navigation for a sighted user to keyboard navigation for the user of a screen reader, further modification is preferable. I ended up getting all "old-sc... Expand
Hi Luke and thanks so much for taking the time to post! I totally hear you on the accessibility points, and you're correct, this particular interaction was not specifically designed to meet 508 compliance requirements. While Storyline does provide many features to optimize the accessibility of course content (www.articulate.com/.../storyline-section-508.php) it's up to individual course developers to decide which accessibility features they want to incorporate into their courses. That said, I agree that it would be GREAT to have more control over tab order and the ability to turn off screen-reader-visibility on layers. These kind of things make excellent feature requests, and it would really help our dev team to hear from accessibility experts like yourself who value these features. I'd en... Expand