Example
Let's Grill Pizza #506 Using JavaScript
For this week’s eLearning Heroes challenge, I created a Build Your Own Pizza interaction — complete with falling toppings and a pizza that (almost) follows your mouse!
This was my first time using JavaScript in Storyline, so it definitely pushed me out of my comfort zone — but I really enjoyed it. I started with the sample code for hiding the cursor and having an object follow the mouse. I edited that code to fit my interaction.
Originally, I wanted the pizza image to move around the screen and catch the toppings, but I ran into trouble replacing the default shape with a picture without breaking the code. So in the end, I kept the pizza in one spot and used a shape as the drop zone.
I’m actually really happy with how it turned out! The toppings can appear multiple times on the pizza, which adds a fun visual effect.
To make the toppings fall, I created custom motion paths for each one, triggering them in sequence. I layered several identical topping images on the pizza and used variables to control when they switched from Hidden to Normal, making it look like more toppings were being added each time.
Let me know what you think! 😄
Play "Let's Grill Pizza" Here
https://www.elizabethqueiroz.com/
1 Reply
Hungryyyyyyyyyyyyyyy!
I was surprised by a few ingredients that I would have preferred not to put on my pizza. I see you've avoided a topic that's been tearing this community apart for years: pineapple or not pineapple. Well done, Elizabeth.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.