Creating an educational simulation to show how sizes of shadow changes when user adjusts slider

When you insert a slider, Storyline automatically creates a number variable to track its position. You can use the variable's value as a condition in other triggers. For example: change the state of [this object] to [this state] when Slider1 changes if Slider1=2. 

It’s worth the effort to learn about variables and trigger conditions, because they provide the real power in Storyline. Here’s more info:

• https://community.articulate.com/discussions/articulate-storyline/the-value-of-variables
• https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-work-with-triggers#conditions

Also, you could use the flashlight image as the "thumb" of the slider. That would make it more realistic. Here's the User Guide article about working with sliders: 

• https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-work-with-sliders

With some javascript you can solve this.
This Javascript library would connect arrows from any object ( the flashlight ) to the beam at the end.
https://github.com/anseki/leader-line 

The attached file demonstrates how to change an object based on the position of a slider. 

The slider has 5 stops (1-5). The object has 5 custom states, with names that also go from 1 to 5. This makes it easy to match the variable value with the correct state in the triggers.

You could add triggers to change the state of as many objects as needed.

FYI: I find that it's sometimes difficult to get a slider started when in Preview. But it works fine when published.

Find the attached video of this slider interaction. By following Judy's tutorial, you can achieve a similar effect. Use arrow shapes instead of images, as you will find it easier to rotate them as needed in different states. It takes time and patience, but it's doable. 

Dear all, many thanks! I will try it out and get back again. :)

Hi Judy and Nedim, I was trying to edit the states after reading through the information. I realised that I cannot adjust states of 3 objects concurrently (e.g adjusting the position of the torch, the arrows and the shadow).

Okay, i think i managed to get it. I have to adjust the states of the 3 objects separately and then add the triggers separately. Thanks everyone for your guidance!

I've worked on a similar simulation before. For the arrows representing the light rays, you might want to look into using dynamic SVG elements. They can be adjusted based on the slider's value in real-time. Also, using a tweening library like GSAP can make these transitions smoother. Hope this helps!

Hi Chris... I'm actually a novice so I have no idea how to use dynamic SVG elements. How do I use these elements from library?

Also, I faced difficulty in my drag and drop slide (2nd last slide). I realised that user cannot answer question if he/she gets the first answer wrong. The objects cannot be dragged to the blank anymore. 

Please see the attached document.