How to add a bookmarking feature?

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. 
  • Here's info about toggling a T/F variable: TIP: Master Toggling On and Off - Articulate Storyline Discussions - E-Learning Heroes

That much gives you the info about which slides are booked. Here's how to build a custom menu that highlights bookmarked slides:

• Create a custom menu slide. I suggest you make it available as a lightbox that is accessed via a custom Player tab.
  • Here's info about custom tabs: TIP: Create Custom Player Tabs for Your Resources, Glossary, and More - Articulate Storyline Discussions - E-Learning Heroes 
• 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.)

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

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. 

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.

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

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 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

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