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.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!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>Spotlight using JavaScript and Alt Text
I created a spotlight feature, with some help from AI, to focus on specific areas of the screen in e-learning. I didn't create it for spotlight interactive gaming scenarios. I use it for software focal areas. You can add a shape or multiple shapes to your slide and add alt text, and JavaScript on the master slide recognizes the text. It currently works with circles, ovals, rectangles, squares, and rounded-edge shapes. However, I couldn't get triangle or star shapes to work. You can also change other features. For example, you can adjust blur and Mask color and apply them to a button to toggle them on or off. Let me know your thoughts. I provide a step-by-step guide in the downloadable storyline file. Spotlight in Storyline using JavaScript Demo LinkArticulate Localization: Switch languages anytime in localized Rise courses
The problem Articulate Localization is a great product for working with multiple languages and a large number of courses. However, it has a limitation that prevents some organizations from adopting it: In Rise courses localized using Articulate Localization, learners cannot change their language after their initial selection unless the LMS administrator resets their progress. The solution With the help of Claude.ai, I have developed a workaround in the form of an tool (HTML5 app) to address this language-switching limitation. It allows learners to switch languages at any point without losing their progress or quiz results. Please test it thoroughly before using it for live courses. The tool works with Rise courses that have been localized using Articulate Localization and then exported from Rise as separate LMS packages for each language. These exports share a common course structure and matching lesson IDs, with language-specific content stored in localization tables. Selecting a language changes how the shared course content is displayed. Because lesson IDs remain consistent across translations, bookmarks and progress continue to refer to the same lessons. Saved quiz results are retained when learners switch languages. Learners can also resume on another device when the LMS returns the saved language, bookmark, and progress for the same learner and attempt. The tool is a standalone HTML file that runs offline in a browser. It is compatible with SCORM 1.2 and SCORM 2004 (all editions). I have attached a ZIP file containing the tool and a PDF guide. To get started 1. Unzip the attached ZIP file and open the HTML file in your browser. 2. Publish all languages of the same localized Rise course, or only the languages you need, by choosing “Publish separate LMS packages for each selected language”. 3. Rise will download a ZIP file containing the language packages. Upload this ZIP file to the tool, then customize settings such as the default language and language order. 4. Download the combined package and upload it to your LMS. I tested the solution on SCORM Cloud, and the results were as expected: learners could switch languages at any point in the course, including during a quiz, without losing progress, bookmarks, or completion data. The course also reopened in the last language used. Every LMS behaves a little differently, so please test the tool thoroughly with your own courses and LMS. A sample localized course Here is a sample localized course, available in 2 versions: SCORM 1.2 and SCORM 2004, 4th Edition. You can use it to test, as a learner, how the course resumes across multiple devices for the same learner and attempt. The course is hosted on scormcloud.com. It is available in English, French, and Arabic, demonstrating both left-to-right and right-to-left languages. It also includes a localized voiceover, a localized image, and a quiz. SCORM 1.2: https://app.cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=99d5680d-df60-440b-81ad-8be9f3f5d1d2 SCORM 2004, 4th Edition: https://app.cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=316dc6ca-83d6-419c-b144-a4ec978d8652 Please let me know your feedback. I will be happy to update the tool if needed based on your comments.Free: 3 Copy-Paste Storyline JS Interactions (Confetti, Progress Bar, Timer)
Hey everyone — long-time Storyline builder here. I kept running into the same wall: I wanted confetti on quiz wins, a real progress bar, and timed questions, but every solution I found was either a forum snippet with no instructions or an expensive subscription product. So I built my own set of 10 JavaScript interactions, tested each one by hand in a real Storyline project, and wrote beginner-proof setup guides for all of them (exact variable names, literal click paths, wiring recipes, test checklists — no "figure it out yourself" steps). I'm giving away 3 of them free — confetti burst, course progress bar, and countdown timer: https://ronaldhicks.gumroad.com/l/storyline-js-sampler Each one is a single paste-ready snippet plus plain Storyline variables. No JavaScript experience needed. Works in Storyline 360 and Storyline 3, including LMS/SCORM wrappers. If you find them useful, the full pack of 10 is $19 — but the sampler is free forever, no strings attached. Hope these save somebody an afternoon.Storyline360 Printable Multi-Question Free-Response Reflection Template
Turn learner reflection into something they can take with them. This customizable Storyline 360 template includes five required free-response fields and a Save My Commitment button that creates a clean, print-friendly summary of the learner’s responses. Required-field validation prevents learners from continuing until all five prompts are complete, and the printable version preserves longer, multi-line responses. Learners can print their completed action plan or use their browser’s Save as PDF option to keep a digital copy. The interaction uses Storyline text-entry variables, trigger conditions, and JavaScript to create the printable output. Both the on-slide experience and print layout can be customized, including the prompts, colors, fonts, title, and footer. The included JavaScript is commented to make key customization points easier to find. Good for: reflection activities, action plans, learning commitments, goal setting, post-training application, and other activities where learners benefit from leaving with a copy of what they entered. Explore how this project looks as a Storyline360 (opens in Review360)3 Copy-Paste Storyline JS Interactions (Confetti, Progress Bar, Timer)
Hey everyone — long-time Storyline builder here. I kept running into the same wall: I wanted confetti on quiz wins, a real progress bar, and timed questions, but every solution I found was either a forum snippet with no instructions or an expensive subscription product. So I built my own set of 10 JavaScript interactions, tested each one by hand in a real Storyline project, and wrote beginner-proof setup guides for all of them (exact variable names, literal click paths, wiring recipes, test checklists — no "figure it out yourself" steps). I'm giving away 3 of them free — confetti burst, course progress bar, and countdown timer: https://ronaldhicks.gumroad.com/l/storyline-js-sampler Each one is a single paste-ready snippet plus plain Storyline variables. No JavaScript experience needed. Works in Storyline 360 and Storyline 3, including LMS/SCORM wrappers. If you find them useful, the full pack of 10 is $19 — but the sampler is free forever, no strings attached. Hope these save somebody an afternoon.Scenario-Based Quiz: Recognizing, Preventing, & Reporting Harassment
About For an instructional design & eLearning developer portfolio project, I created a fictional scenario quiz about reporting harassment using Articulate Storyline and generative AI characters. Links To learn more about this project visit my portfolio. You can also view the published Storyline project here. To see the full course that the scenario quiz was embedded into, view the course. Screens View select screens from the Articulate Storyline file below: You are welcome to let me know if you have questions or suggestions!
