Football Manager
Hello there! š I've been looking for different ways to start building out a portfolio and this weekly challenge caught my attention! I love football, despite supporting Everton... and wanted to trial some gamification in storyline! ā½ Please have a look using the link and let me know your thoughts in the comments! š Confession: I spent a bit more time on this than I planned! š Enjoy! š Link: Football Manager Module Website: 22Studio.ukRace Back To Base
Hello! Can you make it back to base before the sandstorm hits? Play now. The thing I really love about working with vectors is how scalable they are. Even the tiniest details remain crystal clear when you scale them up. I built this demo using elements from a single vector pack created by Macrovector on Freepik. To create the illusion of movement, I used PowerPoint to recolour the wheels on the Mars Rover vehicle, and isolated parts of the tyre track. I then made a GIF using these shapes. And then placed the GIF over the modified SVG image in Storyline. This allowed me to turn the motion on/off using state changes. Pretty much everything that moves in this demo is a GIF, tucked away in a state change until it's needed. Having access to high-quality, easy-to-use graphics allowed me to focus on the instructional elements and the scoring mechanic. The 'wronger' your answer, the quicker your oxygen will deplete. Even if you reach the third question, if your oxygen hits zero, you will have to start again. This is controlled by JavaScript, which adjusts the value of the variable by a set amount when triggered. var player = GetPlayer(); var penalty = 35; // Change to 45 or 55 depending on the button var battery = player.GetVar("Battery"); var elapsed = 0; var interval = 100; var steps = 10000 / interval; var amountPerStep = penalty / steps; var timer = setInterval(function() { elapsed++; battery = Math.max(0, battery - amountPerStep); if (battery === 0) { player.SetVar("Battery", 0); clearInterval(timer); } else if (elapsed >= steps) { player.SetVar("Battery", Math.round(battery)); clearInterval(timer); } else { player.SetVar("Battery", Math.round(battery)); } }, interval); The eagle-eyed among you will have also noticed that when this demo runs on a desktop, the closed captions that accompany the narration have been repositioned and have a slight 'glitch' effect as they appear. This is also achieved with JavaScript. Despite the recent improvements to the closed caption feature in Storyline, sometimes I prefer to manually override the position of the captions to better suit my layout. This code only reliably works in desktop view, though. const mobileView = window.innerWidth < 768 || window.innerHeight < 500; var storyW = 1280; var storyH = 720; var boxLeft = 850; var boxTop = 430; var boxWidth = 350; var boxHeight = 200; var captionFontSize = 20; function positionCaptions() { if (mobileView === true) { console.log("Mobile view detected - caption positioning skipped."); return; } var leftPct = (boxLeft / storyW * 100).toFixed(2) + "%"; var topPct = (boxTop / storyH * 100).toFixed(2) + "%"; var widthPct = (boxWidth / storyW * 100).toFixed(2) + "%"; const css = ` .caption-container { position: absolute !important; transform: none !important; } .caption { position: absolute !important; left: ${leftPct} !important; top: ${topPct} !important; width: ${widthPct} !important; font-size: ${captionFontSize}pt !important; transform: none !important; z-index: 1000 !important; } @keyframes glitchstutter { 0% { opacity: 0; transform: translate(-10px, 4px) skewX(-8deg); filter: blur(6px); } 8% { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg); filter: blur(3px); } 12% { opacity: 0; transform: translate(-8px, 2px) skewX(-6deg); filter: blur(7px); } 18% { opacity: 0.9; transform: translate( 8px, 3px) skewX( 6deg); filter: blur(1px); } 22% { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px); } 28% { opacity: 1; transform: translate( 6px, 0px) skewX( 4deg); filter: blur(1px); } 35% { opacity: 0.3; transform: translate(-6px, 4px) skewX(-6deg); filter: blur(3px); } 42% { opacity: 1; transform: translate( 4px, -2px) skewX( 3deg); filter: blur(1px); } 50% { opacity: 0.6; transform: translate(-3px, 1px) skewX(-2deg); filter: blur(1px); } 60% { opacity: 1; transform: translate( 2px, 0px) skewX( 1deg); filter: blur(0px); } 75% { opacity: 0.95; transform: translate(-1px, 0px) skewX( 0deg); filter: blur(0px); } 100% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); filter: blur(0px); } } .caption-glitch { animation: glitchstutter 0.6s ease-out forwards !important; } `; let style = document.getElementById('custom-caption-style'); if (!style) { style = document.createElement('style'); style.id = 'custom-caption-style'; document.head.appendChild(style); } style.textContent = css; var capEl = document.querySelector('.caption'); if (capEl) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { capEl.classList.remove('caption-glitch'); void capEl.offsetWidth; capEl.classList.add('caption-glitch'); }); }); observer.observe(capEl, { childList: true, subtree: true, characterData: true }); capEl.classList.add('caption-glitch'); } console.log(`Captions positioned at left:${leftPct} top:${topPct} font:${captionFontSize}pt`); } document.addEventListener('DOMContentLoaded', positionCaptions); positionCaptions(); I had a lot of fun making this. It still surprises how much mileage you can get from a small number of visual assets. If you have any more questions about this demo, please ask.
OPERATION CIPHER - Can you crack the code before time runs out?
This weekās eLearning challenge was to create something using desktop folder tabsā¦ so naturally I turned it into a covert infiltration mission. Check out what I created by clicking this link! OPERATION CIPHER Stolen intelligence is hidden inside a secure office. Learners must infiltrate the location, search the filing cabinet, locate the Operation Cipher folder, uncover hidden clues and crack the 3-number safe code before the alarm system activates. The entire experience was built in Articulate Storyline 360 using: ā¢ Interactive folder tab mechanics ā¢ A cinematic countdown timer ā¢ Layer-based scene progression ā¢ Graphic novel-inspired visual animations created using AI ā¢ First-person POV immersion ā¢ Safe code logic and trigger systems Rather than feeling like traditional eLearning, I wanted this to feel more like stepping into an interactive espionage experience. Can you crack the code before time runs out? Try it out! Check out what I created by clicking the link!WordTwist: A fun code-based game
Hey everyone! I finished creating WordTwist, a lighthearted quiz game to spice up e-learning sessions. Itās built using plain HTML, CSS, and JavaScript with some help from AIāsuper easy to tweak and drop into existing projects. Players unscramble letters to discover key words while answering a quick question. They can shuffle letters if they get stuck, remove a mistake, or even reveal the answer (though that yields zero points). All you have to do is customize the question and answer array in the code, and voilĆ āinstant quiz. Give WordTwist a try through this link and let me know what you think. Feel free to share any creative ways you end up using it, or suggest improvements to the game if you think of any!5-Minute Makeovers for E-Learning #532
We updated our menu slides. Originally the buttons just ticked off to show that each section was completed (we used variables at the end of each section that ticked the buttons off on the menu slide). We updated the menu slides to have badges instead that changed from black to coloured badges (using variables at the end of each section that ticked the buttons off on the menu slide). This was to link in with the gamification aspect for staff to collect the badges throughout the course for each section.Wings or Flames - Halloween Jeopardy Game
Hi Articulate Heroes! I was super excited about this weekās challenge (I love Halloween!), but time got away from me between all the spookyāand not-so-spookyāactivities. My original plan was to create a full Halloween Edition of my Jeopardy-style game: new graphics, UI, questions, and sound effects (based on the same build I used for my cooking-themed game). But since the deadline arrived and my idea turned out to be a bit ambitious, Iāve only managed to complete the first category: Creepy Creatures (and it still needs some testing too). Feel free to check it out! Iām hoping to finish the rest of the game and do some proper testing by the end of the week. Happy Halloween, everyone! š Wings or FlamesWelcome to the Respectful Workplace Behaviour Gamified Training!
Navigate real-life scenarios where your choices shape a respectful and inclusive workplace. Learn, respond, and grow. One decision at a time. Course Key Features: Objective: Recognize and respond to disrespectful behaviour Action: Make respectful choices in workplace situations Feedback: Get instant insights on your decisions Badge: Earn the Respect Champion Badge Summary: Print your results at the end Take the quiz and complete the challenge now! https://www.swiftelearningservices.com/custom-elearning-respectful-behaviour-training/E-Learning Game Design: Development & Review #472
Game Design: Development & Review #472: Challenge | Recap Welcome to the third week of our e-learning game design challenge. Last week, you built a working prototype from your storyboard or design concept. This week, youāll focus on bringing the core elements of the e-learning game together to create a detailed and functional model. Your game should be far enough along to submit for final QA and testing. š Challenge of the Week This week, your challenge is to share a fully developed version of the game that incorporates all designed elements, interactive features, animations, and multimedia components. Optional: Since this is our last week of development before submitting the final project, let a few friends or fellow challengers play your game and gather feedback in Review 360. Itās the best way to spot any problems and see what people like or donāt like. I know many of you have been gathering feedback all along, but Iād like to highlight the testing and review process this week. Week 1: Concept & Storyboarding Week 2: Design & Prototyping Week 3: Development & Review Goal: Develop a detailed and functional version of your game Deliverables: Apply and refine the visual design elements Integrate the interactive elements, animations, and multimedia components Refine the visual design and user interface to enhance the overall user experience Submit to Review 360 for user testing and feedback (optional but encouraged) Share a link to your project Week 4: Final Testing & Project Submission šØ NOTE: Even if you didnāt participate last week, youāre still welcome to join this weekās challenge. Ideally, youāll complete all four weeks, but any participation is appreciated. Share what you can. š Last Weekās Challenge: Before you complete your game design, check out the interactive prototypes your fellow challengers shared over the past week: Interactive Prototypes in E-Learning RECAP #471: Challenge | Recap š New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. Iāll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. š Upcoming Challenges Challenge #473 (08.09): Week 4: Final Testing & Project Submission
Prioriza o colapsa
š Esta semana participĆ© junto con CAMPOS OROZCO ELIA PAULINA en el #ElearningChallenge diseƱando una actividad interactiva con scaffolding para ayudar a los jugadores a desarrollar habilidades de priorizaciĆ³n bajo presiĆ³n. š® āPrioriza o Colapsaā es un mini-juego donde los usuarios clasifican tareas que van apareciendo cada vez mĆ”s rĆ”pido y con menos ayudas visuales, hasta enfrentarse al caos de un nivel final sin apoyo, a contrarreloj, y con dos tareas simultĆ”neas. š” La progresiĆ³n de dificultad (niveles 1, 2 y 3) promueve confianza inicial, independencia progresiva y toma de decisiones rĆ”pidas, cumpliendo los principios de chunking y fade-out de ayuda. š Puedes verlo aquĆ: https://360.articulate.com/review/content/46cd160f-1926-46f4-8e5a-20a97c7f0466/review
