Highlighting next button

Apr 11, 2019

I have been searching for a while now and cannot seem to find an option to highlight the next button once the timeline finishes. With classic player it was easy to just add an arrow indicating towards the next button, but with the new modern player, the next button is not static anymore and the arrow can only create confusion. It feels like such a basic function to guide the user to continue when slide is complete.

Is there a way to do it somehow or is this feature being somehow overlooked? 

6 Replies
Leslie McKerchie

Hey Joosep,

Highlighting the next button is not a built-in feature of the software and it looks like you found a workable solution using the Classic Player.

You can still use the Classic Player if it's better for your design and I look forward to hearing the ideas for the new modern player from the community.

Laura Cooper

Hey, I am also interested in highlighting the next button when the user gets to the end of a timeline. This is something we are doing in our courses, and we have to make custom next buttons. We want to use the player versus making workaround buttons that do not enable us to easily use some of storyline's features. But the client is set on the highlight. Just an outline around the button. Like a state. An outline that highlights the next button when the timeline finishes. We use a 4 px light green to help give a visual cue to go to the next slide.

Becca Levan

Welcome to E-Learning Heroes, Laura!

I appreciate you sharing these details of what you'd like to see in the software. I can see how this would be beneficial, so I've created a feature request on your behalf. We'll return here if we have news to share!

In the meantime, I'm curious to hear what other folx in the community have come up with!

Russell Killips

Hi Laura,

Try this:

Create an Execute JavaScript trigger for timeline start:

document.getElementById("next").style.border = "medium solid transparent";

 

Then create another Execute JavaScript trigger for timeline end:

document.getElementById("next").style.border = "medium solid #00FF00";