Forum Discussion
Creating an educational simulation to show how sizes of shadow changes when user adjusts slider
Hi everyone, I'm trying to create a simulation to show how the height of a shadow changes when a user adjusts the distance between object and light source.
I have written in to articulate support for assistance and they have advised to change the states when slider is being adjusted. While the size of shadow can be change based on the states, the corresponding arrows representing the light rays from the torch light is different to change.
I'm writing to see if the community here has any similar experience creating such simulation and can provide help?
Please see Slide 2.1 for the scenario mentioned. Appreciate if anyone here could help! :)
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:
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-lineThe 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!
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.
Set "Attempts" to Unlimited. Storyline will generate "Try Again" layer. Create same triggers you already have on "Incorrect" layer. Change them to When the user click "Try Again".
