The WildCard: Adding Random Outcomes to Gamified Learning Experiences with Javascript

Randomised outcomes can inject excitement, unpredictability, and engagement into gamified e-learning. This type of interaction is particularly useful when you want to simulate real-world scenarios where outcomes can vary based on decisions or chance.

By incorporating JavaScript, you can control not only all of the potential decisions, but also the weighting of positive and negative outcomes to align with your learning objectives.

PREVIEW COURSE

For this demonstration, I’ve kept the weighting at an even 50/50 split to showcase the interaction’s versatility. A preview link and the master Storyline file (attachment below article) are included, so you can explore, enhance, and repurpose the setup for your own projects. Whether you're designing for gamification or just adding a touch of randomness to keep learners intrigued, this interaction can elevate your course design.

Layer Overview

• Base Layer:
  The positive and negative outcome sounds are controlled here via True/False variables (PlayPositiveSound and PlayNegativeSound). These sounds were generated using Storyline's AI sound effects tool. The triggers on this layer are designed to reset these variables back to false once the audio completes, ensuring they’re ready for the next interaction. The learner's score is displayed in the top-right corner, dynamically updated by the JavaScript executed on the 'Outcome' layer.
• Outcome Layer:
  This layer contains the core interaction. The JavaScript here determines whether the outcome is positive or negative and adjusts the score accordingly. The same "Execute JavaScript" trigger is used twice: first when the layer is initially displayed, and then again each time the user clicks the new 'Go' button on this layer. The JavaScript includes comments explaining each step, so you can easily tweak it to fit your needs.
• Hide Button Layer:
  This layer acts as a temporary mask over the 'Go' button. It ensures learners have enough time to read the outcome text and allows the audio tracks (both under 2 seconds) to play fully and reset before another interaction is triggered. Without this layer, repeated clicks could interrupt the audio, preventing a smooth experience.

This setup provides a flexible, reusable framework for gamified interactions with random outcomes. Feel free to dissect, modify, and enhance any part of this file to inspire your own projects! The images were also generated with Storyline's AI. 

Variables Setup in Storyline:

• Score (Number): Default value should be 0.
• DecisionText (Text): To display the selected decision statement.
• FeedbackStatement (Text): To display the feedback with points.
• PlayPositiveSound (Boolean): For triggering positive feedback animations/sounds.
• PlayNegativeSound (Boolean): For triggering negative feedback animations/sounds.