5 Mental Health Resources You Can Share With Your Learners Today
Did you know that May is Mental Health Awareness Month? Individuals aren’t the only ones impacted by mental health challenges—businesses can feel the effects, too. Polling from Gallup indicates that employees with mental health challenges miss four times more work than those who rate their mental health positively. This lost productivity costs the economy some $47.6 billion annually. As an e-learning designer, you can help employees feel supported by providing resources that raise awareness of the importance of mental health and outline helpful tips for improving it. If you’re an Articulate 360 subscriber or trialer, you can get the ball rolling quickly by using the ready-to-use mental health training materials in Rise 360—just in time for Mental Health Awareness Month. Curious what’s available? Check out some of the new releases below. You can learn how to customize these templates for your own company and training needs at the end of this article. 1. Stress Busters Microlearning Course Encourage employees to feel more relaxed with the 9 Simple Stress Busters You Can Do Today microlearning course. Moving through this quick learning exercise reveals proven strategies for relieving stress and activating feel-good endorphins. 2. Breathing Exercises Microlearning Course Anyone feeling tense can benefit from the Melt Away Stress With a 3-Minute Breathing Exercise microlearning course. With each successive swipe through a guided breathing exercise and accompanying graphics, learners will feel more peaceful and serene. 3. Feel Your Feelings Microlearning Course Reinforce the message that it’s OK not to be OK with the Feel Your Feelings microlearning course. This quick activity helps people process difficult emotions by prompting them to name and explore their feelings from a place of compassion and understanding. 4. Get Grounded Microlearning Course Support employees through worry spirals and mental fog with the Escape Anxiety With a 5-Minute Grounding Practice microlearning course. Moving through this 5-minute practice roots learners in the here and now as they engage their senses of taste, touch, smell, sight, and hearing. 5. Day-by-Day Challenge Course To offer access to a more in-depth daily challenge, check out the 5-Day Challenge To Improve Mental Health course. Each day, learners can refer to this course, explore a different facet of mental health, and follow simple exercises for putting concepts into practice. Wrap-Up Providing mental health resources as part of your business training is a win-win. Employees have access to support at work, and businesses benefit from employees who are less stressed and anxious. The examples above can help you get started, but the sky’s the limit for how you can use Articulate’s creator tools to achieve your business training objectives. Interested in sharing one of the supportive resources with your team? If you’re an Articulate 360 subscriber or trialer, you can access and edit all the examples linked throughout this post directly from your Rise 360 dashboard. Simply click Create New, choose Microlearning and select the template you want to use, as shown in the video below: Looking for even more ready-to-use, customizable mental health content? You'll find those in your Rise 360 dashboard too. Just click Create New, choose Course, and then select Mix & Match Lessons. Here are some relevant topic categories to check out: Stress Management: covers stress management fundamentals, stress and work performance, and strategies to relieve stress. Health and Wellness: includes dealing with difficult emotions and life events, exercise, forming healthy habits, mental health awareness in the workplace, positive psychology fundamentals, and positive psychology in the workplace. Resilience: features content on resilience fundamentals, building career resilience, leadership and resilience, emotional and physical resilience, and thriving through challenges. Be sure to also follow us on Twitter and LinkedIn and come back to E-Learning Heroes for more advice on everything related to e-learning. If you have any questions, please share them in the comments.Weekly Challenge Submission: "Screaming Service"
Cross-posting my weekly challenge submission here for wider viewing—enjoy! -- In a nod to this week's challenge title, I created a just-for-fun Halloween scenario in Storyline where you browse a "Screaming Service" of Halloween movies and try to pick a movie that all three of your guests will enjoy based on their specific preferences. In this build, I wanted to focus on up-leveling my visuals from my last challenge submission, cementing my skills with True/False variables, and making greater use of Hover states and slide layers. Visually, I wanted to give this a cozy, autumnal 90's feeling. I added a few video-game-like elements, too, like the transparent pulsing green ovals to "select" objects. I also asked TomKuhlmann to generate character packs for me so that I could have this scenario feature community team staff that are probably familiar to you — Tom, AlyssaGomez, and Katie-Jordan. There is one particular slide of the three of them I quite enjoy 🤣 I used two instances of True/False variables in this build to allow the learner to explore different decisions in any order. On the initial browsing TV slide, the learner can explore all six movies in any order, but their guests don't "arrive" until they've looked at every movie (I set the "Knock Knock" layer to reveal after all six variables became true). I like how this gives a sense of the scenario unfolding "naturally." I also used True/False variables to let the learner ask Tom, Alyssa, and Katie about their movie preferences in any order before asking the learner to suggest a movie. I had a really fun time building this and hope that if you take a look, you find it atmospheric and enjoyable. Looking forward to taking a peek at some of my fellow challengers work. You can check out the scenario here.My Custom Rise Block Component Library
Hi everyone! I wanted to share a custom library of Rise-compatible interactive components I’ve been building and experimenting with for eLearning projects. The library includes custom-designed blocks and interactions intended to help make Rise courses more engaging, flexible, and visually dynamic beyond the default block set. You can explore the library here: https://cognitoblox.netlify.app/ This is an ongoing project, and I’d genuinely love feedback from the community: Which components do you find most useful? What kinds of interactions would you like to see added? Any ideas for improving usability or accessibility? Happy to connect with fellow developers who are experimenting with custom Rise code blocks as well! Thanks for checking it outSliders and States
View the project here This is my first time participating in a challenge and this week's was a choose-your-own. I decided to utilize sliders and states to create an interactive short course on The Exposure Triangle. My aim was to allow the user to manipulate an image to see the effect of shutter speed, ISO levels, and aperture. I used sliders and dials to create a fun interactive process. I set triggers to change the image's states based on the slider position. For shutter speed, I made different image states with varying levels of brightness. For ISO, I added a textured rectangle over the image and changed it's transparency across different states so it added more grain over the image when the slider was moved. For aperture I created different states for the backround image with increasing blur effect (completed outside of Storyline) and added a character on top so she stayed in focus while the background blurred. The aperture slider was the most complicated! I think one way I could try to take it further is to figure out how to get multiple sliders to work together on the same image. For example, allowing the learner to have a shutter slider, ISO slider, and aperture slider on the same image to find the exact perfect settings. Thanks for reviewing! Any feedback is helpful!Gamified Learning | What is 5S
Hi Heroes. I'd like to share a recent project developed for our Supply Chain teams. The course has now been rolled out to over 900 learners and has received very positive feedback. I designed a 15-minute Articulate Storyline course introducing the fundamentals of 5S. The goal was to transform a traditional Lean Manufacturing topic into a more engaging digital learning experience. One of the highlights is a gamified 5S activity. This activity was originally delivered in the classroom using cardboard number cards. Recreating it in Storyline with all sorts of number variables and calculations was a challenge🙃. Some of the features include: Custom-built 5S game using Storyline variables and calculations. Advanced reporting using JavaScript to capture learner responses and game results in an online Excel spreadsheet. Selection of male or female narration. Anyone working in Manufacturing or Continuous Improvement? What topics or activities do you think could be transformed into a gamified learning experience? Link to the course “What is 5S”: https://storage.googleapis.com/fischer_e_learning/SHARE/What%20is%205S/story.htmlDecision Trees: Exploring the Road Not Taken
We ask learners to make decisions all the time. But how often do we give them the opportunity to see what would have happened if they'd made a different choice? That's one of the things I like most about decision trees. Instead of presenting a question, collecting an answer, and moving on, a decision tree allows learners to explore how one choice influences the next. They can follow a path to its conclusion, return to an earlier decision, and discover how a different choice changes the outcome. Sometimes the most valuable learning happens when they explore the path they didn't take. When would I use a decision tree? Decision trees work particularly well when decisions have consequences that aren't immediately obvious. A few examples: Troubleshooting: Explore how different diagnostic decisions lead to different solutions. Customer service: Follow the consequences of different responses to a customer situation. Leadership development: Examine how communication and management decisions influence team outcomes. Compliance and policy: Apply policies to realistic situations where context influences the appropriate response. Process training: Understand how an early decision affects subsequent steps, responsibilities, or outcomes. Why does this work for learning? What I particularly like about decision trees is that they encourage learners to examine the relationships between decisions and consequences. They're practicing more than recall. They're applying information, analyzing cause-and-effect relationships, comparing alternatives, and evaluating outcomes. These are the kinds of thinking we want learners to develop, particularly when the goal is sound judgment rather than memorizing information. There's also value in being able to backtrack. When learners revisit an earlier decision and explore another branch, they can compare outcomes and reconsider their original reasoning. And unlike real life, a poor decision doesn't require an incident report. About this interaction The example in the GIF explores decisions surrounding a compliance training problem. Learners follow different paths, examine the consequences, and return to explore alternatives. I built the interaction as standalone HTML, so it can be embedded into Articulate Rise 360 using an Embed block or incorporated into Storyline 360 as a web object. The content and visual design can be customized for different learning scenarios. I'm curious how others are using branching activities. Do you typically guide learners toward one correct outcome, or give them the freedom to explore multiple paths and compare what happens?Football Basics: Click the Pitch to Learn the Game
DEMO LINK For this week’s challenge, I created a simple interactive football basics activity for new fans, casual viewers and beginners who want to understand the game without feeling overwhelmed. The idea is built around a top-down football pitch with numbered clickable markers. Each marker opens a short explanation of one key football concept, such as the goal, players, positions, the ball, passing, dribbling, shooting, defending, set pieces and offside. I wanted the interaction to feel like the learner is reading the game from the pitch itself rather than moving through a traditional slide deck. The pitch acts as the main navigation screen, and the markers guide learners through the basics in a clear, visual way. How I approached the design I used a clean football pitch as the central visual so that the learning stayed connected to the game environment. The numbered markers are deliberately large and easy to spot, so learners know where to click without needing long instructions. Each pop-up includes: Element Purpose Short explanation Introduces the football term in plain English Quick example Helps the learner understand how it appears in a real match Visual support Shows the concept rather than only describing it Learner takeaway Gives the learner one simple point to remember Design rationale The design is intentionally simple because the audience is new to football. I avoided too much technical detail at the start and focused on helping learners build confidence. For example, the offside section ( Marker 10) uses a visual comparison of not offside and offside, showing what the situation looks like before and after the pass. The key message is: Freeze the picture at the moment the ball is passed. That one sentence gives beginners a practical way to understand a rule that many people find confusing. Interaction idea The learner clicks each marker on the pitch to reveal a short learning point. This could easily be expanded with: Possible addition How it could improve the activity Progress tracking Shows how many basics the learner has completed Audio narration Supports learners who prefer listening Short quiz questions Checks understanding after each topic Match scenario cards Lets learners apply each rule in context Final recap jingle Helps learners remember the key basics Reflection This was a fun way to turn football rules into a small exploratory learning experience. Instead of explaining the game as a long list of rules, I tried to make the learner feel as if they are standing above the pitch, clicking into the parts of the game they want to understand. I look forward to your input and feedback. Best Nadia :-) Here is my example: DEMO LINKCustom HTML code blocks inside Rise 360: six short examples
Hi all, As many have been doing, I’ve been building my own HTML blocks to sit inside Rise 360, and wanted to share where they’ve got to. Why build my own? Rise has some limitations and glitches, and it doesn’t always let me have full branding and style. I like the look of CSS and JavaScript branding tokens and behaviours... those micro-interactions that support the learner’s journey. Code blocks are also really useful for quizzes and knowledge checks. Build those in Rise 360 and an update tends to reset progress in some LMSs, even with a connected package. As a code block, it doesn’t cause that issue. What caught me out this round: • Mobile: getting every build working on phones, using a full device emulator as best as possible. • Glitches between pages, and not just pages, between clicks. Rather like Storyline, you just have to make sure everything’s lined up. Each course holds one block, as a learner would see it: • Confidence self-check: https://360.articulate.com/review/content/d58cf155-636e-4f43-82c9-1832035cd504/review • 3D molecule viewer with a case study: https://360.articulate.com/review/content/438ac80f-37c1-4fc9-9e63-bf352321f713/review • Reveal cards: https://360.articulate.com/review/content/ce4bf4c4-569b-4952-a194-979d0c778cec/review • Chart-choice swipe: https://360.articulate.com/review/content/f520b311-9cc7-49d2-aa67-f79c8dba84ff/review • Magnifier: https://360.articulate.com/review/content/52955237-15b1-4735-a948-9dd001060ae2/review • Reflection notepad: https://360.articulate.com/review/content/b9fdc4cf-8d53-4cf5-8200-828eba12524a/review The main thing I want to show is that you don’t have to step away completely from Rise 360. You can supplement and enhance it with bespoke blocks, once you understand the learner journey and those interactions... interactive WITHOUT being gimmicky. Happy to talk through how I built any of them and pass on my "coding" pitfalls 😁My New “Missed Questions Only” Quiz Format for Rise 360.
One quiz. Many chances. Zero wasted time Ever wished you could skip the boring parts of a quiz and just focus on what you got wrong? Well, now you can. I’ve created a “Missed Questions Only” quiz — a smarter, faster way to learn. Instead of starting from scratch, you get a second chance only at the questions you missed. No wasted time, no repeating what you already know — just targeted practice that helps you master the tricky stuff and hit that perfect score. It’s like a quiz with a built-in comeback round — your mistakes become your roadmap to success. Ready to turn wrong answers into wins? Give it a try and see how well you know your fun facts. 🔗 Rise Link: https://360.articulate.com/review/content/7126ec89-ff0c-4595-bac3-a0fe5e2c6a26/review 🖥️ Code Block: Copy the code below. 📄 Template: See an example of my template for organizing images, questions, answers, and each JS snippet. <div id="quiz-app"> <div class="quiz-card"> <div class="quiz-header"> <div> <div class="quiz-label">Fun Facts Quiz</div> <h2 id="quiz-title">Quiz</h2> </div> <div class="quiz-status"> <span id="round-badge">Round 1</span> <span id="progress-text">Question 1 of 1</span> </div> </div> <div id="scorebar" class="scorebar"> <div>Correct: <strong id="correct-count">0</strong></div> <div>Incorrect: <strong id="incorrect-count">0</strong></div> <div>Remaining in Round: <strong id="remaining-count">0</strong></div> </div> <div id="question-container"> <img id="question-image" src="" alt="Question Image" style="max-width:100%; border-radius:12px; margin-bottom:16px; display:none;" /> <div id="question-text" class="question-text"></div> <div id="answers" class="answers"></div> <div id="feedback" class="feedback"></div> </div> <div class="quiz-actions"> <button id="next-btn" disabled>Next</button> <button id="retry-btn" style="display:none;">Retry Missed Questions</button> <button id="restart-btn" style="display:none;">Restart Full Quiz</button> </div> </div> </div> <style> /* Same styling as before */ * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f4f7fb; color: #1f2937; } #quiz-app { max-width: 900px; margin: 0 auto; padding: 20px; } .quiz-card { background: #ffffff; border: 1px solid #dbe4f0; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .quiz-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; } .quiz-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2563eb; margin-bottom: 6px; } .quiz-header h2 { margin: 0; font-size: 28px; } .quiz-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; font-size: 14px; } .quiz-status span { background: #eef4ff; color: #1d4ed8; padding: 8px 12px; border-radius: 999px; font-weight: 600; } .scorebar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; padding: 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; } #question-image { display: block; /* ensure image is shown */ max-width: 920px; /* maximum width */ max-height: 300px; /* maximum height */ width: 100%; /* scale to container width if smaller */ height: auto; /* maintain aspect ratio */ margin: 0 auto 16px auto; /* center horizontally with bottom margin */ object-fit: contain; /* scale image without cropping */ border-radius: 12px; /* consistent border radius */ background-color: #f3f4f6; /* subtle background color for empty space */ } .question-text { font-size: 22px; font-weight: 700; line-height: 1.35; margin-bottom: 20px; } .answers { display: grid; gap: 12px; } .answer-btn { width: 100%; text-align: left; border: 2px solid #d1d5db; background: #fff; color: #111827; border-radius: 12px; padding: 14px 16px; font-size: 16px; cursor: pointer; transition: .2s ease; } .answer-btn:hover:not(:disabled) { border-color: #93c5fd; background: #f8fbff; } .answer-btn:disabled { cursor: default; opacity: 1; } .answer-btn.correct { border-color: #16a34a; background: #ecfdf3; color: #166534; font-weight: 700; } .answer-btn.incorrect { border-color: #dc2626; background: #fef2f2; color: #991b1b; font-weight: 700; } .feedback { margin-top: 18px; min-height: 28px; font-size: 16px; font-weight: 600; } .feedback.correct { color: #15803d; } .feedback.incorrect { color: #b91c1c; } .quiz-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; } .quiz-actions button { border: none; border-radius: 10px; padding: 12px 18px; font-size: 15px; font-weight: 700; cursor: pointer; } #next-btn { background: #2563eb; color: #fff; } #next-btn:disabled { background: #9ca3af; cursor: not-allowed; } #retry-btn { background: #f59e0b; color: #fff; } #restart-btn { background: #111827; color: #fff; } .final-message { padding: 18px; border-radius: 14px; background: #effaf3; border: 1px solid #86efac; color: #166534; font-size: 18px; line-height: 1.5; } .small-note { margin-top: 10px; font-size: 14px; color: #4b5563; } MeDia (max-width: 640px) { .quiz-header { flex-direction: column; align-items: flex-start; } .quiz-status { align-items: flex-start; } .question-text { font-size: 20px; } } </style> <script> // Questions with imageUrl placeholder (replace URLs with your uploaded Rise 360 images) const fullQuiz = [ { question: "Which animal can sleep standing up?", imageUrl: "https://images.articulate.com/f:jpg,a:retain,b:fff,w:1680,q:90/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/z45b6W_xMLJUUJld.jpg", options: ["Horse", "Dog", "Penguin", "Kangaroo"], answer: "Horse" }, { question: "What is the only food that essentially never spoils?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/MddUJBQTsySlOvqv.jpg", options: ["Rice", "Honey", "Peanut butter", "Chocolate"], answer: "Honey" }, { question: "True or False: Bananas are berries, but strawberries technically aren’t.", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/GSei0ep7BuNe7mfL.png", options: ["True", "False"], answer: "True" }, { question: "What is a group of flamingos called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/9bCYyNGee1QQRUWC.jpg", options: ["A flock", "A flamboyance", "A parade", "A bouquet"], answer: "A flamboyance" }, { question: "Which country has more pyramids than any other country in the world?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/srrP1z5U7J1QaYow.jpeg", options: ["Egypt", "Mexico", "Sudan", "Peru"], answer: "Sudan" }, { question: "Which animal has fingerprints so similar to humans that they can be difficult to tell apart?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/z32I4pCG_PvYZDUD.jpg", options: ["Chimpanzee", "Koala", "Raccoon", "Sloth"], answer: "Koala" }, { question: "How many hearts does an octopus have?", imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/1EOT8Ml6xu2_Lmvd.png", options: ["1", "2", "3", "8"], answer: "3" }, { question: "Which fruit floats in water because about 25% of its volume is air?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/kRIyy568MhLPiEFd.jpg", options: ["Apple", "Orange", "Grape", "Strawberry"], answer: "Apple" }, { question: "What is the national animal of Scotland?", imageUrl: "https://images.articulate.com/f:jpg,a:retain,b:fff,w:1680,q:90/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/Tl89HrMYH0AyvzF2.jpg", options: ["Highland cow", "Golden eagle", "Unicorn", "Red deer"], answer: "Unicorn" }, { question: "True or False: A day on Venus is longer than a year on Venus.", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/WBnprMTKTGmJCPre.jpg", options: ["True", "False"], answer: "True" }, { question: "What is a group of crows called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/QhTq5yGSSxZC45ZF.jpg", options: ["A mystery", "A murder", "A mob", "A shadow"], answer: "A murder" }, { question: "What is a group of owls called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/d_g79Dx03aWnVP2S.jpg", options: ["A parliament", "A council", "A jury", "A congress"], answer: "A parliament" }, { question: "What is a group of giraffes called?", imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/-jRiKJcZZX1mWlfh.jpg", options: ["A tower", "A skyscraper", "A stretch", "A column"], answer: "A tower" }, { question: "What is a group of rhinos called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/jilS2EvEMWFQCHLN.jpg", options: ["A crash", "A charge", "A stampede", "A rumble"], answer: "A crash" }, { question: "What is a group of porcupines called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/WwtKh0xFKUgG07x1.jpg", options: ["A pricker", "A prickle", "A pincushion", "A spike"], answer: "A prickle" }, { question: "What is a group of zebras called?", imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/G-vljexS-nyS4lg3.jpg", options: ["A dazzle", "A stripe", "A blur", "A flash"], answer: "A dazzle" }, { question: "What is a group of hippos called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/M-1LbZ5VHqL28Ez4.jpg", options: ["A splash", "A bloat", "A barrel", "A wallow"], answer: "A bloat" }, { question: "What is a group of ferrets called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/ob7XOK2dtuA2btB-.jpg", options: ["A mischief", "A trouble", "A business", "A chaos"], answer: "A business" }, { question: "What is a group of ravens called?", imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/L6_Yxla0T9t97Qx8.jpg", options: ["An unkindness", "A darkness", "A conspiracy", "A haunting"], answer: "An unkindness" }, { question: "What is a group of bears called?", imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/5fA5geB-XbftAeB6.jpg", options: ["A grumble", "A sleuth", "A lumber", "A maul"], answer: "A sleuth" } ]; let currentQuiz = []; let currentIndex = 0; let selectedAnswer = null; let totalCorrect = 0; let totalIncorrect = 0; let roundNumber = 1; let missedQuestions = []; const questionContainer = document.getElementById("question-container"); const questionImage = document.getElementById("question-image"); const questionText = document.getElementById("question-text"); const answersEl = document.getElementById("answers"); const feedbackEl = document.getElementById("feedback"); const nextBtn = document.getElementById("next-btn"); const retryBtn = document.getElementById("retry-btn"); const restartBtn = document.getElementById("restart-btn"); const correctCountEl = document.getElementById("correct-count"); const incorrectCountEl = document.getElementById("incorrect-count"); const remainingCountEl = document.getElementById("remaining-count"); const progressTextEl = document.getElementById("progress-text"); const roundBadgeEl = document.getElementById("round-badge"); function shuffle(array) { const arr = [...array]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function prepareQuiz(questions) { return shuffle(questions).map(q => ({ ...q, options: shuffle(q.options) })); } function initQuiz() { currentQuiz = prepareQuiz(fullQuiz); currentIndex = 0; selectedAnswer = null; totalCorrect = 0; totalIncorrect = 0; roundNumber = 1; missedQuestions = []; retryBtn.style.display = "none"; restartBtn.style.display = "none"; nextBtn.style.display = "inline-block"; questionContainer.style.display = "block"; renderQuestion(); updateScore(); } function startRetryRound() { currentQuiz = prepareQuiz(missedQuestions); currentIndex = 0; selectedAnswer = null; missedQuestions = []; roundNumber++; retryBtn.style.display = "none"; restartBtn.style.display = "none"; nextBtn.style.display = "inline-block"; questionContainer.style.display = "block"; renderQuestion(); updateScore(); } function renderQuestion() { const q = currentQuiz[currentIndex]; // Show or hide image depending on if imageUrl is set if (q.imageUrl) { questionImage.src = q.imageUrl; questionImage.style.display = "block"; } else { questionImage.style.display = "none"; } feedbackEl.textContent = ""; feedbackEl.className = "feedback"; nextBtn.disabled = true; selectedAnswer = null; roundBadgeEl.textContent = `Round ${roundNumber}`; progressTextEl.textContent = `Question ${currentIndex + 1} of ${currentQuiz.length}`; remainingCountEl.textContent = currentQuiz.length - currentIndex; questionText.textContent = q.question; answersEl.innerHTML = ""; q.options.forEach(option => { const btn = document.createElement("button"); btn.className = "answer-btn"; btn.type = "button"; btn.textContent = option; btn.addEventListener("click", () => handleAnswer(btn, option, q.answer)); answersEl.appendChild(btn); }); } function handleAnswer(button, chosen, correct) { if (selectedAnswer !== null) return; selectedAnswer = chosen; const buttons = document.querySelectorAll(".answer-btn"); buttons.forEach(btn => btn.disabled = true); if (chosen === correct) { button.classList.add("correct"); feedbackEl.textContent = "Correct!"; feedbackEl.className = "feedback correct"; totalCorrect++; } else { button.classList.add("incorrect"); feedbackEl.textContent = "Incorrect."; feedbackEl.className = "feedback incorrect"; totalIncorrect++; missedQuestions.push(currentQuiz[currentIndex]); } updateScore(); nextBtn.disabled = false; } function updateScore() { correctCountEl.textContent = totalCorrect; incorrectCountEl.textContent = totalIncorrect; remainingCountEl.textContent = currentQuiz.length > 0 ? Math.max(currentQuiz.length - currentIndex - (selectedAnswer ? 1 : 0), 0) : 0; } function goNext() { currentIndex++; if (currentIndex < currentQuiz.length) { renderQuestion(); updateScore(); } else { showRoundResults(); } } function showRoundResults() { questionText.textContent = ""; answersEl.innerHTML = ""; feedbackEl.textContent = ""; questionImage.style.display = "none"; nextBtn.style.display = "none"; if (missedQuestions.length > 0) { questionText.innerHTML = ` <div class="final-message" style="background:#fff7ed;border-color:#fdba74;color:#9a3412;"> <strong>Round ${roundNumber} complete.</strong><br> You have <strong>${missedQuestions.length}</strong> question(s) to retry. <div class="small-note">Click the button below to retake only the questions you missed.</div> </div> `; retryBtn.style.display = "inline-block"; restartBtn.style.display = "inline-block"; remainingCountEl.textContent = missedQuestions.length; } else { questionText.innerHTML = ` <div class="final-message"> <strong>Congratulations!</strong><br> You have answered all questions correctly. <div class="small-note"> Final score: ${totalCorrect} correct, ${totalIncorrect} incorrect attempts. </div> </div> `; retryBtn.style.display = "none"; restartBtn.style.display = "inline-block"; remainingCountEl.textContent = 0; } } nextBtn.addEventListener("click", goNext); retryBtn.addEventListener("click", startRetryRound); restartBtn.addEventListener("click", initQuiz); initQuiz(); </script>Crack the Case: A Detective-Themed eLearning Challenge
How do you make a final knowledge check feel less like a test and more like an experience? For the final assessment of my Talent Acquisition Hiring Manager Training, I wanted to move away from a traditional series of multiple-choice questions. Instead, I transformed the assessment into a detective-themed investigation where learners have to use what they’ve learned throughout the training to successfully work through the case. Learners progress through a series of checkpoints and realistic hiring scenarios, gathering information and making decisions along the way. Each challenge connects back to concepts covered throughout the training, requiring learners to think about how they would actually respond as a hiring manager rather than simply recall information from earlier slides. The Design Approach The detective theme gave me a way to connect otherwise separate assessment questions into one cohesive experience. Instead of moving from Question 1 to Question 2 to Question 3, learners feel like they are progressing through an investigation. Throughout the experience, I incorporated: A detective/investigation theme that carries through the entire assessment Case-file-inspired visuals and challenge screens Multiple checkpoints that give learners a sense of progress Realistic hiring scenarios and conversations Decision-based challenges focused on applying knowledge rather than simply recalling it Custom graphics and environments designed to make each part of the investigation feel connected Feedback within the experience to reinforce key concepts and help learners understand the impact of their decisions Why I Built It This Way Because this was the final knowledge check for the training, I wanted learners to demonstrate that they could pull together what they had learned across the course and apply it in context. The goal wasn't to make the assessment more complicated. It was to make the experience more meaningful. By framing the assessment as an investigation, each question becomes another piece of the case. Learners aren't just trying to select the correct answer. They're being asked to analyze a situation, make a decision, and determine what should happen next. It also allowed the assessment itself to feel like a culminating experience, rather than something learners simply had to complete after finishing the “real” course content. Behind the Scenes I built the experience in Articulate Storyline, using a combination of scenario-based learning, custom visuals, interactive elements, and themed feedback. One of my biggest design priorities was making sure the detective concept wasn't just decorative. I wanted the theme to support the learning experience. The checkpoints, scenarios, visual environments, and challenges all work together to create the feeling that the learner is actively working through a case. The End Goal Ultimately, I wanted learners to finish the training feeling like they had completed a challenge, not just passed another quiz. This project was a fun opportunity to explore how gamification, storytelling, and scenario-based learning can turn a traditional final knowledge check into something much more immersive. Explore the experience: https://360.articulate.com/review/content/0f7c56d1-c7d9-4bef-8538-bf29ce8722db/review I left the Menu unlocked in this review to allow viewers to move around freely, as desired. For my learner audience, the menu has been locked.
