Creating a dynamic score bar (circle) using JavaScript

Mar 05, 2019

Hi - first timer poster here.

I am trying to implement a score circle - similar to the one used in Rise - in Storyline. I've found some great js code here: https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

I haven't been successful in implementing this. Yet! I've managed to implement the script in the html output (nested in a div in the top left corner), but never inside the player/on the stage. The reference to the 'container' div, seems to be the major issue, as I cannot create the div in Articulate.

Can anyone tell me if this is even possible?

7 Replies
David Tait

I've taken a different approach to this and created something using states instead of JavaScript.

It takes a little bit of work to set up so isn't truly dynamic but everything is contained in the SL file so you don't have the worry of dealing with elements that might fail in certain environments.

For the purpose of the example I've only used four questions, assigning a weighting of 25% to each correct answer. It would be a case of creating your own graphics to display all possible percentages on the results circle if you went with the idea.

Quick 'n' dirty example here: http://www.4-pt.co.uk/samples/rise-results-in-sl360/story_html5.html

Source file attached.

This discussion is closed. You can start a new discussion or contact Articulate Support.