Extreme E-Learning Challenge #248: Challenge | Recap
Challenge of the Week
This week, your challenge is to combine three or more e-learning challenge topics in a single entry. When you po...
Published 6 years ago
Version 1.0
Blog Post
My entry allows you to paint in different colors using custom hover states and print your masterpiece using a bit of javascript.
Online Coloring Book Examples in E-Learning #190
Using JavaScript in Articulate Storyline #13
Slide, Drag, and Hover Past Boring Next Buttons #144
http://www.mindstreamelearning.com/paint
Online Coloring Book Examples in E-Learning #190
Using JavaScript in Articulate Storyline #13
Slide, Drag, and Hover Past Boring Next Buttons #144
http://www.mindstreamelearning.com/paint
That's fun! For people like me who don't know javascript can you describe what was done in javascript and what was done with the existing Storyline tools? Thanks for posting it!
- Hi Jodi. Glad you liked it! To answer your question, javascript was only used to enable the screen printing functionality. The rest was all Storyline:
- I created one shape that had 6 states: white plus the five colors.
- Then I made a variable called paint_color that changed based on the number typed.
- Then I made five triggers that changed the shape's state when the mouse hovers over if paint_color equalled 1,2,3 etc.
- Then I copied this shape enough times to fill the screen.
Here's a link to the source file in case you're curious :
https://drive.google.com/file/d/1RUZr_JstIRd0Ab7KfxAg59e9x_XnfDgU/view?usp=sharing
(Be warned that the large number of shapes on the base layer slows SL down quite a bit. I ended up hiding everything on the base layer during development to speed things up and then un-hiding right before publishing.)- You're the best! Thank you! I saw "javascript" and stopped trying to figure it out.