That sounds like a real fun interaction. To achieve that scenario, you would need to use triggers with conditions.
A. Make the "Select" rectangle move 1.) Create 2 move motion for select triangle 1.1) Move motion going up. Set duration to 10s. Click on path options and set to relative start point. 1.2) Move motion going down. Set duration to 10s. Click on path options and set to relative start point.
2.) Create two move triggers 2.1) If user clicks on arrow up, activate "Select" rectangle's move up motion. 2.2) If user clicks on arrow down activate "Select" rectangle's move down motion.
The relative start point that we set is so that the "Select" rectangle can move up or down indefinitely, without resetting to the original stand point.
B. Make "Select" rectangle move "Item 3" to "Item one", vice versa. 1.) Create two hotspots 1.1) One hotspot is a little directly above "Item 1" 2.2) One hotspot is a little directly below "Item 2 "
2.) Create two move motions for the "Select" rectangle 2.1) Move motion start point is on top of "Item 1" and end point is "Item 3" Set duration to 10s. 2.2) Move motion start point is on top of "Item 3" and end point is "Item 1" Set duration to 10s.
3.) Create 2 move triggers for "Select" rectangle 3.1) If "Select" rectangle intersects with the top hotspot, activate move motion "Item 1" to "Item 3". 3.2) If "Select" rectangle intersects with the bottom hotspot, activate move motion "Item 3" to "Item 1".
C. Right option trigger 1.) Insert a new rectangle on top of Item 2 (let's call it "correct spot" rectangle) 1.2) Set rectangle to have no outline. 1.3) Right click on the rectangle and choose format shape. 1.4) Set rectangles transparency to 100%. 1.5) Highlight "correct spot" rectangle and click on Manage Project variables. 1.6) Set type to true/false and value to false.
2.) Create 2 variable change triggers 2.1) If "Select" rectangle intersects with "correct spot" rectangle, change "correct spot's" variable to true. 2.2) If "Select" rectangle leaves intersection with "correct spot" rectangle, change "correct spot's" variable to false.
3.) Insert a rectangle shape with "Correct Answer" text 3.1) Under states section, set initial state to hidden.
4.) Create a state change trigger. 4.1) If "Correct spot" variable is set to true, change state of "Correct Answer" text to normal. 4.2) If "Correct spot" variable is set to false, change state of "Correct Answer" text to hidden.
1 Reply
Hello Ludek,
That sounds like a real fun interaction.
To achieve that scenario, you would need to use triggers with conditions.
A. Make the "Select" rectangle move
1.) Create 2 move motion for select triangle
1.1) Move motion going up.
Set duration to 10s.
Click on path options and set to relative start point.
1.2) Move motion going down.
Set duration to 10s.
Click on path options and set to relative start point.
2.) Create two move triggers
2.1) If user clicks on arrow up, activate "Select" rectangle's move up motion.
2.2) If user clicks on arrow down activate "Select" rectangle's move down motion.
The relative start point that we set is so that the "Select" rectangle can move up or down indefinitely, without resetting to the original stand point.
B. Make "Select" rectangle move "Item 3" to "Item one", vice versa.
1.) Create two hotspots
1.1) One hotspot is a little directly above "Item 1"
2.2) One hotspot is a little directly below "Item 2 "
2.) Create two move motions for the "Select" rectangle
2.1) Move motion start point is on top of "Item 1" and end point is "Item 3"
Set duration to 10s.
2.2) Move motion start point is on top of "Item 3" and end point is "Item 1"
Set duration to 10s.
3.) Create 2 move triggers for "Select" rectangle
3.1) If "Select" rectangle intersects with the top hotspot, activate move motion "Item 1" to "Item 3".
3.2) If "Select" rectangle intersects with the bottom hotspot, activate move motion "Item 3" to "Item 1".
C. Right option trigger
1.) Insert a new rectangle on top of Item 2 (let's call it "correct spot" rectangle)
1.2) Set rectangle to have no outline.
1.3) Right click on the rectangle and choose format shape.
1.4) Set rectangles transparency to 100%.
1.5) Highlight "correct spot" rectangle and click on Manage Project variables.
1.6) Set type to true/false and value to false.
2.) Create 2 variable change triggers
2.1) If "Select" rectangle intersects with "correct spot" rectangle, change "correct spot's" variable to true.
2.2) If "Select" rectangle leaves intersection with "correct spot" rectangle, change "correct spot's" variable to false.
3.) Insert a rectangle shape with "Correct Answer" text
3.1) Under states section, set initial state to hidden.
4.) Create a state change trigger.
4.1) If "Correct spot" variable is set to true, change state of "Correct Answer" text to normal.
4.2) If "Correct spot" variable is set to false, change state of "Correct Answer" text to hidden.
Here are some videos too that can help:
Here you can see the use of path animations
https://community.articulate.com/series/107/articles/articulate-storyline-360-tutorial-how-to-add-interactivity-with-triggered-motion-path-animations
Here you can see the use of hotspots
https://community.articulate.com/series/107/articles/articulate-storyline-360-tutorial-how-to-create-a-drag-and-drop-interaction
I hope, I was able to answer all your issues, if you have any questions or clarifications, please let me know.
In the meantime, happy course making!
This discussion is closed. You can start a new discussion or contact Articulate Support.