Anyone have any tips or suggestions for creating a drop-down menu in Storyline? I am trying to create my own from scratch but having issues with making the drop down menu funtion properly (i.e, making the menu items appear and disappear as the user mouses over the menu).
Can some body please advise, I cannot open any of the examples! they download as a PDF file and I get an error message that the file has not been decoded correctly?
Custom Pop-up Menu - A slide level trigger is used to change a T/F variable to true when a section of the module is completed - The variable change is used to both allow the learner to progress to the next section using the forward arrow and to show the section is completed when the pop-up menu is displayed - A trigger is set on each menu button to check for completion of the prior section before allowing the button to be selected, this ensures that each section is completed in order - Once a section has been completed, it may selected on the menu and re-visited at any time - All coding for the pop-up menu is contained on the menu layer of the master slide
The tricky part:
Master slide settings go back to their preset defaults each time it loads for a slide ...and we usually like this, but in this case it was wiping out the updated state information for the menu layer.
To retain the button completion states from slide to slide as the learner progresses through the module, the solution I found was to set triggers on the menu layer of the master slide to re-check the values of the T/F variables (one trigger per button/variable) and force a refresh on the menu button states each time the menu is displayed.
The settings are still lost each time a slide is advanced and another loads, but now the settings are also instantly replaced
... so when the menu displays it shows the current learner progress and section completion state that we were after
I've created a template with a few slides from Jill's posting to show how it works. There's a few project notes entered on the notes tab of the introduction slide, and also a text box set up for variable tracking on each slide to make it easier to see what's changing when.
The template should be highly customizable for those who may wish to re-purpose it!
Can some body please advise, I cannot open any of the examples! they download as a PDF file and I get an error message that the file has not been decoded correctly?
Hi Paul, this might be a stupid question but do you have Storyline installed? These files are all storyline source files so need to have Storyline installed in order to open them. I'm not sure why they would download as PDFs.
Thank you Nancy ...I'm not so sure about the menu guru part, but I do like working out trigger/state/variable interactions, with maybe a now growing specialization in menus
Can some body please advise, I cannot open any of the examples! they download as a PDF file and I get an error message that the file has not been decoded correctly?
Oops, I accidentally clicked Suggest as Answer, but meant to click Quote.
FYI, After seeing Paul's plea for help, I tried to open a file I posted back on March 12, and it opened strange for me, too (though not as a pdf). I re-posted the file in that post and it seems ok.
I've played with the pop-up menu template a little more and re-purposed it to create another variation re-using many of the original elements (many thanks Jill for outstanding inspiration!).
Here's the changes:
- the menu is still customizable, but is now fixed instead of pop-up, moved to the left, and also has an optional "pop-up" progress bar starting on slide two
- it's now themed in blue and with its title screen has a somewhat of a medical feel to it
Reflecting after the fact: I guess it probably didn't need BOTH the menu and progress bar since the menu shows progress. However, it is optional, and depending on the project could be helpful to show progress within a module segment while the custom menu tracks overall course progress.
Features: - A slide level trigger is used to change a T/F variable to true when a section of the module is completed (the choice on how to do this will vary by project) - The variable change is used to both allow learner progress to the next section using the forward arrow button and to show the section is completed on the menu display - A trigger is set on each menu button to check for completion of the prior section before allowing the button to be selected, this ensures that each section is completed in order - Once a section has been completed, it may selected on the menu and re-visited at any time - A progress bar is also optionally displayed at the bottom of the slide and can be turned on or off by the learner
Project notes: - All coding for the fixed menu is contained on the base of the master slide - All coding for the progress bar is contained on the progress bar layer of the master slide and uses state changes to show progress - So that the progress bar option would not need to show on the opening slide, a second layout of the master with just the fixed menu was also set up - To prevent the completion states from being reset from slide to slide as the learner progresses through the module, triggers are set to check the values of the T/F variables and refresh the menu and progress bar states each time they are displayed. - To show changes while the learner is still on the slide, another set of triggers is used to refresh the menu and progress bar states each time a T/F variable changes
Please feel free to further re-purpose as may be helpful!
Greg my friend, you are an artist (read with a French accent)! Many thanks to you for sharing your creativeness here in the community... This thread has been a real pleasure to follow
I've been away from the board awhile, but happened in for a visit this evening and saw your post. Sorry to hear you are having difficulty with your project.
80 items seems very manageable if broken down over several drop downs (7 or 8 drop downs with 10-12 items each).
Would it be possible to post your project file?
This is a great community! I'm sure many may be able to lend a hand to help sort out the issue you are having and get your project back on track.
You can see the menu in the master slide which has 15 tabs that means the menu contains 15 tabs on which when we click you will be taken to the specific slides. Now there will be 80 in total which will be included in the menu. only 10 will be displayed in total and the rest will have a scroll so that I can scroll the menu and click on the tabs to go to the respective menus.
Also as the articulate has a ready made option for the menu to be restricted i need the same thing to work on my menu i.e. I need the menu to be restricted so that the user will go through each tab in a sequential manner.
Also I need a on off button. Initially my voiceover is playing and i need the button to off the audio and when i click the button again the audio should get on when i click the button again.
Just a question can we put a customised progress bar in articulate.
Please accept my apologies - I didn't initially see that you had responded back to this post, and am just re-visiting today. It has been a busy time over the past few weeks! Thank you for posting your project file and for the additional notes. Its still pretty busy, so it may take a few days before I have the flexibility to take a good look. It seems there may be a few complexities to work through, I'll look to see if there may be a few suggestions to help meet your project requirements. Best regards, Greg
Thanks Greg for popping back in to help Vishal! You can also be updated any time there are new replies by clicking on "Subscribe to replies" at the very top of the thread, and you'll have to do it each time you post a reply.
Thanks also Ashley and Leslie - I've had a computer crash and a pretty full schedule - sorry for the delay in getting back. I did make it in to PM Vishal and let him know it may be a little longer.
Vishal,
Thank you for your patience! You were looking for a solution for:
- a drop down (now popup) scrolling menu that can hold up to 80 items
- restrict the menu so slides must be seen in order
- a customized progress bar
- an audio control to allow you to pause/play the on slide audio
I've used your sample file as a base and think we may have 4 for 4. Please take a look and see what you think.
Notes:
- The project has a good concept! Others in the community may also find it useful either as a whole template or maybe just a part or two. The audio control is really portable and the progress bar can be used by itself without the menu.
- The bad news: If your users may be accessing the scrolling menu on mobile devices it may not be as user friendly/reliable as on a traditional desktop
Here's a quick look - I've moved the three control buttons to the bottom and created a tool bar to hold them, the progress bar, and the slide level navigation controls.
Since you mentioned wanting to display 10 menu items at a time in the scroll, I've set one master slide to display them that way. I've also created a second master slide that would display 20 items at a time, as you initially had shown them in your sample file. It seems for mouse selection the 20 items will work well, but they will likely be too small for easy selection for iPad users.
The menu layer still makes use of the hover border, but now the border is just needed to the immediate right of the scroll bar. In this way you will have full access to all three control buttons (Menu, Glossary, and Help) before collapsing the menu. As another button is selected the menu closes and the new selected layer opens. Each layer is set to reset its control button back to normal when the layer closes. All coding for the menu layer, control buttons, and progress bar is located on the master slide. Audio and slide navigation controls are both located at slide level with in the project.
The audio control can be set to either play immediately as the slide starts (slide one click to play, slide two auto plays in the sample file) or when the user clicks play by adjusting the initial value of the audioON variable and the state of the Play button control. I've just used a single variable for the audio state, but it may be helpful to assign an audio variable per slide depending on your use.
The menu is restricted so the user must go in sequential order. The visited# variable is used to track the visited state of each slide and display the custom "visited slide" state of the tab once there. Its important to note NOT to use the default built in "visited" state because the tab will show visited as soon as it is clicked whether the user was permitted to go there or not.
The progress bar on the 20 menu item master is set up using states to track 15 increments for the 15 slides that are present and will go across the complete scale (although 20 items are shown for display of the menu only 15 of them exist, the buttons after 15 are just place holders).
The progress bar on the 10 menu item master is also set up using states to track the 15 increments for the 15 slides that are present, but does not go across the complete bar (goes less than a quarter), because I've set it as the progress bar you may want to build out for your project needing 80 menu irems. With 80 increments needed, a width of 4px seemed to work well for the space available and to represent the progress of each slide a total of 320px will be needed (80x4). The actual working part of the progress bar and the scale behind it are two separate items. I'll follow this message up with a second one with more detail on building out the progress bar.
153 Replies
Can some body please advise, I cannot open any of the examples! they download as a PDF file and I get an error message that the file has not been decoded correctly?
Thanks everyone! And a HUGE thanks to Greg Damron who found a solution! (He will post it here soon.)
Cool project Jill!
I was happy to help and here's the solution...
Custom Pop-up Menu
- A slide level trigger is used to change a T/F variable to true when a section of the module is completed
- The variable change is used to both allow the learner to progress to the next section using the forward arrow and to show the section is completed when the pop-up menu is displayed
- A trigger is set on each menu button to check for completion of the prior section before allowing the button to be selected, this ensures that each section is completed in order
- Once a section has been completed, it may selected on the menu and re-visited at any time
- All coding for the pop-up menu is contained on the menu layer of the master slide
The tricky part:
Master slide settings go back to their preset defaults each time it loads for a slide ...and we usually like this, but in this case it was wiping out the updated state information for the menu layer.
To retain the button completion states from slide to slide as the learner progresses through the module, the solution I found was to set triggers on the menu layer of the master slide to re-check the values of the T/F variables (one trigger per button/variable) and force a refresh on the menu button states each time the menu is displayed.
The settings are still lost each time a slide is advanced and another loads, but now the settings are also instantly replaced
... so when the menu displays it shows the current learner progress and section completion state that we were after
I've created a template with a few slides from Jill's posting to show how it works. There's a few project notes entered on the notes tab of the introduction slide, and also a text box set up for variable tracking on each slide to make it easier to see what's changing when.
The template should be highly customizable for those who may wish to re-purpose it!
Hi Paul, this might be a stupid question but do you have Storyline installed? These files are all storyline source files so need to have Storyline installed in order to open them. I'm not sure why they would download as PDFs.
Thanks for this Greg - you are the official menu Guru.
Thank you Nancy ...I'm not so sure about the menu guru part, but I do like working out trigger/state/variable interactions, with maybe a now growing specialization in menus
Paul- the pdf format is really strange, have you been able to save and reopen projects you have created?
Nicole -thank you for the kudos and kind words in your Screenr, and double kudos to you for your demo - nicely done!
Oops, I accidentally clicked Suggest as Answer, but meant to click Quote.
FYI, After seeing Paul's plea for help, I tried to open a file I posted back on March 12, and it opened strange for me, too (though not as a pdf). I re-posted the file in that post and it seems ok.
This menu is great thanks
Thanks Yusuf!
Here's another template...
I've played with the pop-up menu template a little more and re-purposed it to create another variation re-using many of the original elements (many thanks Jill for outstanding inspiration!).
Here's the changes:
- the menu is still customizable, but is now fixed instead of pop-up, moved to the left, and also has an optional "pop-up" progress bar starting on slide two
- it's now themed in blue and with its title screen has a somewhat of a medical feel to it
Reflecting after the fact: I guess it probably didn't need BOTH the menu and progress bar since the menu shows progress. However, it is optional, and depending on the project could be helpful to show progress within a module segment while the custom menu tracks overall course progress.
Features:
- A slide level trigger is used to change a T/F variable to true when a section of the module is completed (the choice on how to do this will vary by project)
- The variable change is used to both allow learner progress to the next section using the forward arrow button and to show the section is completed on the menu display
- A trigger is set on each menu button to check for completion of the prior section before allowing the button to be selected, this ensures that each section is completed in order
- Once a section has been completed, it may selected on the menu and re-visited at any time
- A progress bar is also optionally displayed at the bottom of the slide and can be turned on or off by the learner
Project notes:
- All coding for the fixed menu is contained on the base of the master slide
- All coding for the progress bar is contained on the progress bar layer of the master slide and uses state changes to show progress
- So that the progress bar option would not need to show on the opening slide, a second layout of the master with just the fixed menu was also set up
- To prevent the completion states from being reset from slide to slide as the learner progresses through the module, triggers are set to check the values of the T/F variables and refresh the menu and progress bar states each time they are displayed.
- To show changes while the learner is still on the slide, another set of triggers is used to refresh the menu and progress bar states each time a T/F variable changes
Please feel free to further re-purpose as may be helpful!
Greg my friend, you are an artist (read with a French accent)! Many thanks to you for sharing your creativeness here in the community... This thread has been a real pleasure to follow
Brian, thanks very much for the compliment ...I'll have to brush up on my french accent!
Hi Greg,
First of all I would like to thank you for the support you have given me for the customised menu and it has really helped me in my work.
I am facing an issue.
I have developed an e-learning course and have menu also in it but, the issue is I have 80 buttons in the menu which is going to call 80 slides.
If I add a scroll in the menu which is developed by you it doesn't work. Can you please help.
Hi Vishal and welcome to E-Learning Heroes! I'm not sure if Greg is still subscribed to this thread, so you may need to send him a PM.
Hello Vishal and Leslie,
I've been away from the board awhile, but happened in for a visit this evening and saw your post. Sorry to hear you are having difficulty with your project.
80 items seems very manageable if broken down over several drop downs (7 or 8 drop downs with 10-12 items each).
Would it be possible to post your project file?
This is a great community! I'm sure many may be able to lend a hand to help sort out the issue you are having and get your project back on track.
Greg
Hi Greg,
I have attached the sample file of my project.
You can see the menu in the master slide which has 15 tabs that means the menu contains 15 tabs on which when we click you will be taken to the specific slides. Now there will be 80 in total which will be included in the menu. only 10 will be displayed in total and the rest will have a scroll so that I can scroll the menu and click on the tabs to go to the respective menus.
Also as the articulate has a ready made option for the menu to be restricted i need the same thing to work on my menu i.e. I need the menu to be restricted so that the user will go through each tab in a sequential manner.
Also I need a on off button. Initially my voiceover is playing and i need the button to off the audio and when i click the button again the audio should get on when i click the button again.
Just a question can we put a customised progress bar in articulate.
And also one more thing to highlight. the menu cannot be broken down in different drop downs it will be in the same drop down.
Thanks in advance for the help.
Vishal,
Please accept my apologies - I didn't initially see that you had responded back to this post, and am just re-visiting today. It has been a busy time over the past few weeks! Thank you for posting your project file and for the additional notes. Its still pretty busy, so it may take a few days before I have the flexibility to take a good look. It seems there may be a few complexities to work through, I'll look to see if there may be a few suggestions to help meet your project requirements. Best regards, Greg
Thanks Greg for popping back in to help Vishal! You can also be updated any time there are new replies by clicking on "Subscribe to replies" at the very top of the thread, and you'll have to do it each time you post a reply.
Hi Greg,
Great work! It was just what i needed to make my menu.
Glad this was helpful for you Frederik! Thanks for the update
Thank you Frederick, glad it was of help!
Thanks also Ashley and Leslie - I've had a computer crash and a pretty full schedule - sorry for the delay in getting back. I did make it in to PM Vishal and let him know it may be a little longer.
Vishal,
Thank you for your patience! You were looking for a solution for:
- a drop down (now popup) scrolling menu that can hold up to 80 items
- restrict the menu so slides must be seen in order
- a customized progress bar
- an audio control to allow you to pause/play the on slide audio
I've used your sample file as a base and think we may have 4 for 4. Please take a look and see what you think.
Notes:
- The project has a good concept! Others in the community may also find it useful either as a whole template or maybe just a part or two. The audio control is really portable and the progress bar can be used by itself without the menu.
- The bad news: If your users may be accessing the scrolling menu on mobile devices it may not be as user friendly/reliable as on a traditional desktop
Here's a quick look - I've moved the three control buttons to the bottom and created a tool bar to hold them, the progress bar, and the slide level navigation controls.
Since you mentioned wanting to display 10 menu items at a time in the scroll, I've set one master slide to display them that way. I've also created a second master slide that would display 20 items at a time, as you initially had shown them in your sample file. It seems for mouse selection the 20 items will work well, but they will likely be too small for easy selection for iPad users.
The menu layer still makes use of the hover border, but now the border is just needed to the immediate right of the scroll bar. In this way you will have full access to all three control buttons (Menu, Glossary, and Help) before collapsing the menu. As another button is selected the menu closes and the new selected layer opens. Each layer is set to reset its control button back to normal when the layer closes. All coding for the menu layer, control buttons, and progress bar is located on the master slide. Audio and slide navigation controls are both located at slide level with in the project.
The audio control can be set to either play immediately as the slide starts (slide one click to play, slide two auto plays in the sample file) or when the user clicks play by adjusting the initial value of the audioON variable and the state of the Play button control. I've just used a single variable for the audio state, but it may be helpful to assign an audio variable per slide depending on your use.
The menu is restricted so the user must go in sequential order. The visited# variable is used to track the visited state of each slide and display the custom "visited slide" state of the tab once there. Its important to note NOT to use the default built in "visited" state because the tab will show visited as soon as it is clicked whether the user was permitted to go there or not.
The progress bar on the 20 menu item master is set up using states to track 15 increments for the 15 slides that are present and will go across the complete scale (although 20 items are shown for display of the menu only 15 of them exist, the buttons after 15 are just place holders).
The progress bar on the 10 menu item master is also set up using states to track the 15 increments for the 15 slides that are present, but does not go across the complete bar (goes less than a quarter), because I've set it as the progress bar you may want to build out for your project needing 80 menu irems. With 80 increments needed, a width of 4px seemed to work well for the space available and to represent the progress of each slide a total of 320px will be needed (80x4). The actual working part of the progress bar and the scale behind it are two separate items. I'll follow this message up with a second one with more detail on building out the progress bar.
This discussion is closed. You can start a new discussion or contact Articulate Support.