I would like to integrate a bookmarking button on every page of my training, with which the user can tag slides - for example, to review them in more detail at a later time. The bookmarked pages should be listed in a dropdown menu or highlighted in the TOC. It is not necessary to store the information in the LMS. I only need the bookmarks during the current training session. They may be forgotten when the training is closed.
Is it possible to implement such a function using variables?
You can't highlight slides on the built-in Menu (at least, not without JavaScript). But it's possible to create a custom menu that highlights bookmarked slides. And, yes, it involves variables.
Create a T/F variable (default value = False) for every slide.
Use a bookmark button on each slide to toggle that variable: turn on bookmark = True; turn off bookmark = False.
Create separate buttons with the appropriate jump-to-slide triggers for each slide.
If this requires more buttons than can easily fit on a slide, put them all in a scrolling panel.
Give those buttons a custom Bookmarked state.
For each button, add a trigger that changes it to the Bookmarked state when the timeline starts with the condition that the corresponding T/F variable = True.
Another option would be to build the custom menu in a scrolling panel that's on the Master Slide. In that case, give the buttons a Normal and Selected state. Then use triggers on the Master that toggle the state when the associated variable is adjusted. (See toggling post referenced above.)
To highlight slides in the built-in menu, you would have to use a javascript to target these blocks in Storyline. Please note that slides with Execute javascript triggers would not work in Storyline preview. You would have to publish to Web or Review to check it out. Below is the link to my solution with javascript. Bookmarked slides are highlighted in MENU (if bookmark is on), or they appear normal (if bookmark is off). Bookmarked slides are also accessible through "MY BOOKMARKED SLIDES" tab in the top right corner. If you are not a big fun of javascript then I strongly recommend Judy's solution above.
thank you so much for your great support and sorry for my late reply.
Judy, I was able to add your solution to my training and it works great. However, I'd love to have a list view that only shows the bookmarked slides, not all the slides with/without highlights. This will probably be difficult to accomplish, since the position of the slide names in the list view would have to be determined dynamically.
Nedim, your JS solution to highlight menu items directly in the TOC looks fantastic. Is there a way to download your example training to have a closer look at how you made it work?
I'd love to have a list view that only shows the bookmarked slides, not all the slides with/without highlights. This will probably be difficult to accomplish, since the position of the slide names in the list view would have to be determined dynamically.
Storyline doesn't do that kind of dynamic adjusting. That would require JavaScript (which I'm not qualified to help with).
Christoph, please find the attached story file. You may find the JS codes in the master view. All other triggers needed for this to work are in the slide view.
Hi Nedim, thank you so much for the story file and - once again - sorry for the late reply. I have modified the JS to have bookmarks highlighted with a green color bar on the left edge, analogous to the blue bar on the selected TOC item (see screenshot).
However, while I could build a simple working demo with the code in place, it stopped working when I added it to a larger project. I've spent hours troubleshooting and I'm at a point where I assume that a storyline bug is the reason for this. I'm still looking for an explanation, though.
I tried your code as well and it works just fine, although I don't have too many slides in my project. I don't think it's a storyline bug because we are tweaking something that is not meant to work out of the box. Does the number of "Execute JavaScript" triggers match the number of "Bookmarked" variables? The code should run ok as long as you follow some rules such as: 1. the data-title name that you initially put in your code to grab the Menu element should be the same as the slide title 2. the code should run only when the "BookmarkedX" variable is True 3. if "const" = (eg. bookmarked10), the same variable should be used to grab and change the value of the CSS property 4. although there are only 3 triggers to ensure the "BookmarkedX" variable is properly toggled, it's still something that should be thoroughly checked on each individual slide 5.
In addition to your screenshot. Keep in mind that your style will be overridden by the Storyline cs-selected property if your slide is bookmarked but currently selected.
You can also send a sanitized version of your story file for me to troubleshoot. I'll be glad to assist you.
thank you for your suggestions. Yes, the number of JS triggers matches that of my (six) bookmark variables. "Data slide title" strings align with my slide titles and all the other rules are met as well (I think).
Thank you so much for your offer to have a look at my training. If I don't find a solution, I will remove any customer data from the slides and send you the story file by Friday.
please find attached my story file. I've removed all content and only left the empty slide structure. Use the sliders to switch layers in some of the slides. When publishing the project, please add the attached image file at the top level of the directory tree, next to the story file. It is the green background I use in my JS.
The "Execute Javascript" triggers can be found on every template slide I'm using in the project. I've also tried adding them to the master page instead but that didn't work either.
Current problems: Bookmarking doesn't work (but does in a smaller demo project) and the "bookmarked" state of the pin button won't stick.
Thank you so much for your help an best regards, Christoph
There was a some sort of glitch with the "Toggle" trigger on each slide. It did not not work as intended - a variable value would always be False. It may have been caused by copying and pasting from the original project. Not a big deal. I created a new "Toggle" triggers to do just the same. In the updated project I referenced the "Bookmarked" variables on each slide just to make sure they do what they suppose to do. In your project (ExecuteJavaScript triggers), I noticed you were to change appearance of the "background-image" , and few more CSS properties common for the Menu buttons selected state. It somehow interfered with the Menu buttons normal state under conditions we set in our triggers. Therefore, I added Else statements with a similar code that would reset (set the background-image to none) buttons if the bookmarked variables were not True. It all looks good now. Please check it out and let me know if it worked for you. One more thing, I used the placeholder for the background-image ( https://placehold.co/100x100/4cc30b/4cc30b/png) so I did not have to keep adding it to my published file every single time.
So there has been some kind of internal issue with the toggle triggers? It was easy enough to fix by deleting them on every slide and creating new identical ones. However, knowing that something like this could happen for no apparent reasons is kind of spooky. I don't think I've copied the triggers over from your project, but I'm not 100% sure.
I've also added "Else" statements to the JS code as suggested to reset the styles and make sure that everything is running smoothly.
Once again, thank you so much for your time and effort! Best regards, Christoph
12 Replies
You can't highlight slides on the built-in Menu (at least, not without JavaScript). But it's possible to create a custom menu that highlights bookmarked slides. And, yes, it involves variables.
That much gives you the info about which slides are booked. Here's how to build a custom menu that highlights bookmarked slides:
Another option would be to build the custom menu in a scrolling panel that's on the Master Slide. In that case, give the buttons a Normal and Selected state. Then use triggers on the Master that toggle the state when the associated variable is adjusted. (See toggling post referenced above.)
Christoph,
To highlight slides in the built-in menu, you would have to use a javascript to target these blocks in Storyline. Please note that slides with Execute javascript triggers would not work in Storyline preview. You would have to publish to Web or Review to check it out. Below is the link to my solution with javascript. Bookmarked slides are highlighted in MENU (if bookmark is on), or they appear normal (if bookmark is off). Bookmarked slides are also accessible through "MY BOOKMARKED SLIDES" tab in the top right corner. If you are not a big fun of javascript then I strongly recommend Judy's solution above.
https://360.articulate.com/review/content/55785300-8a53-4ead-ad13-4d4fd5fc753c/review
Dear Judy and Nedim,
thank you so much for your great support and sorry for my late reply.
Judy, I was able to add your solution to my training and it works great. However, I'd love to have a list view that only shows the bookmarked slides, not all the slides with/without highlights. This will probably be difficult to accomplish, since the position of the slide names in the list view would have to be determined dynamically.
Nedim, your JS solution to highlight menu items directly in the TOC looks fantastic. Is there a way to download your example training to have a closer look at how you made it work?
Thank you both again and best regards,
Christoph
Storyline doesn't do that kind of dynamic adjusting. That would require JavaScript (which I'm not qualified to help with).
Christoph, please find the attached story file. You may find the JS codes in the master view. All other triggers needed for this to work are in the slide view.
Hi Nedim, thank you so much for the story file and - once again - sorry for the late reply.
I have modified the JS to have bookmarks highlighted with a green color bar on the left edge, analogous to the blue bar on the selected TOC item (see screenshot).
This is my code:
bookmarked1.style.color = "#fff";bookmarked1.style.backgroundImage = "url('bg_green.png')";bookmarked1.style.backgroundRepeat = "repeat-y";bookmarked1.style.backgroundSize = "6px auto";However, while I could build a simple working demo with the code in place, it stopped working when I added it to a larger project. I've spent hours troubleshooting and I'm at a point where I assume that a storyline bug is the reason for this. I'm still looking for an explanation, though.
Hi Christoph,
I tried your code as well and it works just fine, although I don't have too many slides in my project. I don't think it's a storyline bug because we are tweaking something that is not meant to work out of the box. Does the number of "Execute JavaScript" triggers match the number of "Bookmarked" variables? The code should run ok as long as you follow some rules such as:
1. the data-title name that you initially put in your code to grab the Menu element should be the same as the slide title
2. the code should run only when the "BookmarkedX" variable is True
3. if "const" = (eg. bookmarked10), the same variable should be used to grab and change the value of the CSS property
4. although there are only 3 triggers to ensure the "BookmarkedX" variable is properly toggled, it's still something that should be thoroughly checked on each individual slide
5.
In addition to your screenshot. Keep in mind that your style will be overridden by the Storyline cs-selected property if your slide is bookmarked but currently selected.
You can also send a sanitized version of your story file for me to troubleshoot. I'll be glad to assist you.
Hi Nedim,
thank you for your suggestions. Yes, the number of JS triggers matches that of my (six) bookmark variables. "Data slide title" strings align with my slide titles and all the other rules are met as well (I think).
Thank you so much for your offer to have a look at my training. If I don't find a solution, I will remove any customer data from the slides and send you the story file by Friday.
Best regards,
Christoph
Hi Nedim,
please find attached my story file. I've removed all content and only left the empty slide structure. Use the sliders to switch layers in some of the slides. When publishing the project, please add the attached image file at the top level of the directory tree, next to the story file. It is the green background I use in my JS.
The "Execute Javascript" triggers can be found on every template slide I'm using in the project. I've also tried adding them to the master page instead but that didn't work either.
Current problems:
Bookmarking doesn't work (but does in a smaller demo project) and the "bookmarked" state of the pin button won't stick.
Thank you so much for your help an best regards,
Christoph
Christoph,
There was a some sort of glitch with the "Toggle" trigger on each slide. It did not not work as intended - a variable value would always be False. It may have been caused by copying and pasting from the original project. Not a big deal. I created a new "Toggle" triggers to do just the same. In the updated project I referenced the "Bookmarked" variables on each slide just to make sure they do what they suppose to do. In your project (ExecuteJavaScript triggers), I noticed you were to change appearance of the "background-image" , and few more CSS properties common for the Menu buttons selected state. It somehow interfered with the Menu buttons normal state under conditions we set in our triggers. Therefore, I added Else statements with a similar code that would reset (set the background-image to none) buttons if the bookmarked variables were not True. It all looks good now. Please check it out and let me know if it worked for you. One more thing, I used the placeholder for the background-image ( https://placehold.co/100x100/4cc30b/4cc30b/png) so I did not have to keep adding it to my published file every single time.
Hi Nedim,
you have solved the riddle! Thank you so much!!!
So there has been some kind of internal issue with the toggle triggers? It was easy enough to fix by deleting them on every slide and creating new identical ones. However, knowing that something like this could happen for no apparent reasons is kind of spooky. I don't think I've copied the triggers over from your project, but I'm not 100% sure.
I've also added "Else" statements to the JS code as suggested to reset the styles and make sure that everything is running smoothly.
Once again, thank you so much for your time and effort!
Best regards,
Christoph
No problem, Christoph. You are welcome.