Using Javascript to run complex mathematical simulations in a 'space survival' game
As a learning designer, I'm always looking for new ways to engage learners and create immersive experiences. I'm a big fan of boardgames likeCatan and 7 Wonders, where you have to manage resources and make strategic decisions. It struck me that we could use similar game mechanics in corporate e-learning to make it more compelling and realistic, and help people refine their decision-making skills. I started experimenting with this waaaay back inE-Learning Heroes Challenge #314, with my Usable Suspects game: In that game, the player has to pick the best gang member to crack a safe within 20 seconds. Fast forward to E-Learning Heroes Challenge #430, and I took this 'resource management' concept much further in No Sushi!: This game involved a lot of complex math that nearly broke Storyline and me. (Yes, I did it all with triggers and, no, I wouldn't do that again!) Recently, I've discovered that large language models are great at writing code - it's just another language after all - which makes it astonishingly easy to write custom Javascript for use in Storyline. No more triggers! No more headaches! With the help of Claude.ai, I built this 'space survival' game: PLAYSURVIVAL HERE! The Concept The game is a first-person survival scenario set on a remote planet. Players must choose two out of three specialists, each with unique skills, to awaken from cryosleep and keep everyone alive for 90 days until rescue arrives. The challenge? Managing four critical resources: Food, Shelter, Security, and Communications. Collaborating with Claude To create the game's underlying simulation, I explained my idea to Claude, outlined what I wanted the code to do, and then defined the specific outcomes I was seeking in Storyline. The Development Process Establishing the Basics: We started by defining the core mechanics – how resources would deplete over time and how each specialist would influence these rates. Creating the Simulation: Claude generated JavaScript code that would run within Storyline, simulating the daily resource changes and determining the mission's outcome. Balancing Act: One of our biggest challenges was fine-tuning the resource depletion rates to ensure each team combination (A+B, A+C, B+C) presented unique challenges and outcomes. This required multiple iterations and careful adjustments. Implementing Cascading Effects: We introduced more complex mechanics, such as security breaches leading to rapid resource loss, and the effects of malnutrition on the crew's ability to maintain systems. Crafting Narratives: For each possible outcome, we developed detailed feedback messages to provide players with a clear understanding of their mission's fate. Debugging and Refinement: Throughout the process, we encountered and solved various issues, from unexpected behaviour in certain scenarios to ensuring the correct triggers for different endings. Lessons Learned Iterative Development is Key: Our back-and-forth process, constantly testing and refining the simulation, was crucial to creating a balanced and engaging game. Claude as a Collaborative Tool: Claude proved helpful in rapidly prototyping ideas, generating code, and problem-solving. However, human oversight and creative direction were essential in shaping the final product. Balancing Realism and Gameplay: We often had to strike a balance between realistic outcomes and maintaining engaging gameplay. For instance, we adjusted how quickly resources depleted to create tension without making the game overly difficult. The Importance of Narrative: While the underlying mechanics were crucial, we found that crafting compelling narratives for each outcome enhanced the player experience. The characters define the mechanic and vice versa. Flexibility in Design: Being open to unexpected outcomes led to more interesting gameplay. For example, we implemented a system where the communication beacon could continue functioning even after the crew had perished, adding a thoughtful touch to certain failure scenarios. Technical Challenges and Solutions One particular challenge we faced was ensuring that for certain team combinations (like A+B), security would fail before other resources reached critical levels. This required careful adjustment of depletion rates and the implementation of conditional penalties. We also had to be mindful of some limitations, particularly how Storyline displays text generated by variables. This led to problem-solving sessions, where Claude and I used the console log to dig into what was happening. Conclusion While collaborating with Claude felt very natural, we did at times have to go back a few steps to debug the code. I am not a coder, so I don't know whether 12 iterations to get this to work as I liked is unreasonable by human standards. But I'm really pleased with the results. SURVIVAL teaches resource management and strategic thinking while also telling a story of survival against the odds. And it conveys this lesson in just two slides and a few minutes of your time. I haven't shared my master file as I'm still tinkering with the visual design and this will likely become a portfolio piece, but I'm happy to share what I've learned and answer any questions you may have. For anyone interested, here's the latest version of the code that powers this game. If you want to know more about any part of this demo, please ask.Demo Game: Running Race
Running Race Gamification Development This demo game is a running race with gamified elements, featuring obstacle achievements and an attempt counter starting at zero. Players must overcome obstacles to earn points, making each successful jump an achievement in the race. This is my demo development. I welcome your feedback to help me improve and grow. Review Demo Here : https://sites.google.com/view/demogmesample-virendra/home?authuser=2 #gamification #demoMobile Version Demo Micro Course : (RAG) Inspired by Mobile for Mobile Users
This is the alpha version of my micro-learning course on Retrieval Augmented Generation (RAG). The course has been developed with mobile users in mind, ensuring a responsive design that enhances learning on the go. It offers a brief, engaging introduction to the RAG model, focusing on its role in improving question-answering systems. As a work-in-progress demo, I welcome your feedback to help me refine this course and enhance the overall user experience. Your insights will assist me in improving the course's content, design, and functionality. #mobile #example #demo-work #prototype #vrendramoakdam Review Demo Here : Micro-Course LinkAI & Me: Creating a Family Feud/Wordle Style Game in Storyline
In the world of e-learning, engagement is key. That's why I created “Focus Feud”, an interactive game supported by a Rise companion guide that features an interactive coach. This project transforms a static article about maintaining focus at work into a fun, memorable learning experience, built with AI assistance. In this post, I'll walk you through how AI simplified complex tasks, elevated creativity, and streamlined the development process - all without extensive coding or a team of developers. Motivation & Concept Inspired by Articulate's new AI features, I set out to showcase how AI can be integrated into content development. My goal was to: Gamify an article on maintaining focus at work Use Storyline for interactive game slides Create a Rise companion guide featuring a digital twin as an interactive coach Tools of the Trade Here's a quick look at the AI-powered toolkit that made Focus Feud possible: Articulate Storyline and Rise:Game development and companion guide creation. ChatGPT:Content summarization, game ideation, JavaScript co-creation. HeyGen:Digital host avatar with a custom voice. Camtasia:Video editing of avatar. Canva/Photoshop:Graphic tweaks. Word/PowerPoint: Storyboarding and scriptwriting. Game Planning & Storyboarding I kicked off the process by feeding the original article into ChatGPT. It helped me extract key points from the article, convert these points into game objectives and elements, and brainstorm game show formats that would work well with the content. After settling on a Wordle/Family Feud hybrid, I created a PowerPoint storyboard to visualize the game flow and mechanics. Graphics and Narration Storyline's AI generated most of the images, requiring only minor tweaks in Canva and Photoshop. While Storyline’s neural voices worked well, for the game show host, I used HeyGen to create a video-style avatar with a custom voice, which I then refined in Camtasia. Coding and Development This was a balancing act between AI assistance and traditional development: JavaScript and AI:Initially, I used ChatGPT to co-create JavaScript for input validation, scoring, and timers. While this was incredibly helpful for complex functionalities, it sometimes led to troubleshooting challenges. Storyline Triggers:As the project progressed, I found that leveraging Storyline's built-in triggers and variables was more effective for many game mechanisms. This brought me back to familiar territory and improved overall stability. Variables:I set up numerous variables for each mini-game in Storyline, testing incrementally to isolate and fix issues as they arose. Content Creation and Editing AI tools proved invaluable for content creation. ChatGPT helped generate and edit content. This was useful as Storyline's current AI features cannot evaluate external links/content (and the game was based on a web-based source). Storyline's AI features significantly reduced the time needed to generate images, sounds, and edit text. Overcoming Challenges with AI Throughout the development process, AI helped me overcome several hurdles: Complex Functionality:AI-assisted JavaScript allowed me to implement features I couldn't have coded on my own, and in a matter of minutes. Time Constraints:Storyline's AI features dramatically sped up image generation, sound creation, text editing, and overall development. Consistency Issues:When AI-generated graphics needed adjustments, non-AI tools like Photoshop helped maintain visual consistency. The Rise Companion Guide To complement the game, I created acompanion guide in Rise that features my digital twin. This guide explains the game’s content and includes an interactive digital avatar trained on the article’s material that acts as a live coach. While an API allows direct integration, for this example, it launches into a new window. Conclusion: AI - A Solo Developer's Powerful Equalizer Combining Storyline's AI features with tools like ChatGPT has revolutionized content creation for solo developers. Limited knowledge of JavaScript or advanced Storyline triggers and variables is no longer a barrier. AI acts as both tool and tutor, enabling the creation of complex learning experiences beyond one's coding abilities while consistently suggesting efficient solutions. These new AI tools are leveling the playing field, allowing solo developers to create sophisticated e-learning rivaling team-produced content. By accelerating ideation, prototyping, and media generation, AI dramatically reduces development time. We're just at the beginning of this transformation, with even more accessible and innovative opportunities on the horizon as AI continues to evolve.Showcasing My Course: International Workplace Safety and Compliance
Hi everyone, I’ve been working on e-learning development for a few years now, and I’d love to share one of my recent projects with you. This course is a selection from International Workplace Safety and Compliance, a topic I am passionate about. My journey with multimedia goes back to the 1990s, and the experiences I gained during that time have greatly influenced my current work in e-learning. Demo | International Workplace Safety and Compliance Although I’m Italian, I primarily work in English, and I would really appreciate an honest review of the course, along with any suggestions for improvement. I value the expertise of this community and look forward to your feedback. Thank you for your time!Portfolio
Make the Moment This eLearning course was developed using Storyline 360 with a focus on interactive learning and accessibility. Key Features: Markers (Hotspots): Learners are guided through the basics of place setting using interactive hotspots. Drag-and-Drop Interaction: Learners actively engage by creating a formal table setting, reinforcing their understanding of the material. Guest-Employee Dialogues: Realistic conversations simulate on-the-job interactions, helping learners practice communication and decision-making skills. Accessibility Considerations: The course was designed with accessibility in mind, adhering to 508 compliance standards to ensure it’s accessible for all users. While I considered audio elements, I opted for a text-based course for better accessibility, with future plans to offer optional audio narration for a more flexible learning experience. Gamification and Storytelling: I implemented a badge system to reward learners, driving engagement throughout the course. Storytelling techniques were also incorporated through a relatable scenario, featuring a niece and aunt on a wedding day, to deepen emotional connection and contextual understanding. View the "Make the Moment" eLearning Course Acing Your Internship Interview This Storyline 360 course helps learners master the STAR method for interview success, utilizing interactive features to build skills progressively. Key Features: Drag-and-Drop Interactions: Learners start by identifying key story parts and work up to creating their own stories with feedback, applying the STAR method. Branching Scenarios: Tailored learning paths cater to specific career interests, enhancing relevance and engagement. The course combines interactive storytelling with practical skill-building to prepare learners for real-world interviews. View the "Acing Your Internship Interview" eLearning Course Luminex xMAP® Technology Overview I took full ownership of this explainer video, handling everything from start to finish—scriptwriting, graphic design, animation, and narration—using a variety of tools to bring the concept to life. Project Scope: Scriptwriting and Narration: I developed a clear, engaging script that simplifies the technology for a lay audience and recorded the narration. Graphic Design and Animation: I created all visuals using Microsoft PowerPoint, Photoshop, and After Effects. The animations were designed to visually complement the content and ensure a seamless learning experience. Collaboration with SMEs: Partnered with subject matter experts to ensure the content accurately represents the technology, making it both technically sound and accessible. Accessibility Considerations: The video was designed with 508 compliance in mind, ensuring that all content—including visuals, captions, and audio—meets accessibility standards. Features such as descriptive text, closed captions, and appropriate color contrast were incorporated to make the video accessible to all users. Watch the Luminex xMAP Technology Overview Video
