Radar chart for self assessment

Hi,

This is designed to help a learner self-assess their ability prior to starting a course, and then display their learning gaps visually on a radar chart. It does not control the availability of modules in a learning path!

Setup
Create sliders attached to variables “Score0” to “ScoreX”. You could also use numeric data entry fields, or dials.

Create a shape on your chart slide. Right click on it, select Accessibility, check “Object is visible to accessibility tools". Enter a name in the alternative text field – for example chartShape. This is the link between the JavaScript chart drawing and Storyline.

Using
The code creates an HTML canvas on the Storyline page and then draws the chart inside it. The position of the chart on screen is controlled by the position of the shape. The size of the chart is set in the code.

For demo purposes this uses 7 sliders and variables. Change the numberOfLevels and labels values to match your setup. Colours of the chart are set in the ctx.fillStyle commands.

History

I originally tried to created this with multiple diamond shapes and multiple states of each shape. It rapidly became a trigger nightmare hence the JavaScript solution.