How I Built This: How I Vibe-Coded a People Manager Simulation
When the new Rise 360 Code Block (Beta) feature launched, I wanted to see just how far it could be pushed. Could you build something more than static content? That’s how the People Manager Simulation came to life – a fully playable, story-driven experience built entirely inside a single Rise code block, using only HTML, CSS, and JavaScript. In this video, I explain how it was created and how you can repurpose this approach in your own projects. Why I Made This In my day job, I design learning experiences for real teams, often around leadership, people management, and workplace decision-making. I wanted to create something that shows how these kinds of soft-skills topics can be transformed into immersive simulations without needing heavy development tools. The result is a game where you step into the shoes of a brand-new team leader, navigating real-world decisions that impact morale, performance, retention, and stress. Each choice has a trade-off, and yes, you can get “sacked” if you mismanage your stats. In the video, I mention that this project was built gradually, late evenings, after work, once my son was asleep. There were plenty of failed tests, odd bugs, and “why won’t this work” moments along the way. I did consider going back and documenting every single prompt and adjustment… but honestly, that would read like an increasingly impatient diary of me negotiating with ChatGPT! So instead, I wanted to share a simpler, more practical way for you to repurpose what already works. How I Built It Rather than starting from scratch, the method I show in the walkthrough involves: Uploading the existing working code of the simulation. Giving ChatGPT a single clear prompt that explains: This is for Rise 360’s custom code block. It should learn the structure and logic of the original simulation. It should rewrite the theme, dialogue, and characters for a new scenario. In the video, I demonstrate how to use the current People Manager Simulation code as context; use the download attached below. 📁 Download: People Manager Simulation HTML; attached below. You then give this to your LLM of choice as an attachment and provide your repurposing prompt; the one I used can also be downloaded below. 📁 Download: GPT Prompt for Repurposing Existing Demo; attached below. Key Takeaways Start from a working simulation instead of a blank page. Use a single, focused prompt to repurpose the entire code and story. Attach your full code as context so the model understands structure and logic. Re-use this workflow to adapt learning scenarios quickly—no coding expertise required. The Result Here’s the outcome of my own repurposing test from the walkthrough: a completely new narrative built using the same base code and single prompt. Is it perfect? No. But it’s a solid foundation—and all this came together in about ten minutes. 📁 Download: The Result — Full New HTML Code; attached below. Final Thought The best part of this approach is accessibility: you don’t need to be a coder to build something that feels custom. By starting with a working framework and iterating through clear, focused prompts, you can turn any learning scenario into a playable, data-driven experience. Whether it’s leadership, compliance, or customer service, this structure gives you the foundation to explore how choices shape outcomes, all inside Rise 360. My final ask is: please repurpose and improve on any of the ideas shared in this article. Let me and the wider community know how you get on. 💬 Ask Me Anything! I’d love to hear your feedback and answer any questions about the build. Drop your thoughts in the comments below—I’ll be checking in and responding! Want to Share Your Build? Do you have a project you’d love to share with the community? We’re always looking for more How I Built This stories. Whether it’s a game, interaction, or unique design, we’d love to feature your process. Drop a note in the comments or reach out to the community team if you’re interested!Made By Members: Rise Code Blocks
This month, we’re spotlighting creative ways community members are experimenting with Rise 360’s new Code Block (Beta) feature. From quick prototypes to full mini-games and simulations, these projects show how custom HTML, CSS, and JavaScript can bring fresh interactivity to Rise, whether you’re vibe coding with AI or hand-crafting from scratch 💡 Try It Yourself: Rise 360: How to Use Code Block, Creating Blocks with Vibe Coding 👽 Alien Lifespan Challenge by GrahamBetts-add Graham created a fast-paced trivia game that challenges learners to keep Brian the Alien alive by answering 10 questions correctly. The project combines timers, progress tracking, and custom feedback, powered by code. 🔗 View the post | 🎮 Try the demo Build It with AI: Kick off your own build with prompts like these, or start from scratch with your own code or customizations: “Write HTML, CSS, and JavaScript for a 10-question timed quiz game that tracks correct answers and shows a 3-star progress meter inside a Rise 360 Code Block.” “Structure the code so all quiz content lives in a QUESTIONS array and settings in a CONFIG object, making it easy to update questions, feedback, and timer length.” “Create an interactive quiz where each correct answer extends the player’s time and updates a character’s emotion from happy to sad based on performance.” 🧭 Explore Cardinal Directions by ilgunapo Apo built a playful, interactive experience to help learners explore the four cardinal directions. After discovering each direction on a compass, players test what they’ve learned in a mini treasure-hunt game. 🔗 View the post | 🎮 Try the demo Build It with AI: Kick off your own build with prompts like these, or start from scratch with your own code or customizations: “Write HTML, CSS, and JavaScript for an interactive compass that lets users explore the four cardinal directions, then unlocks a short treasure hunt game inside a Rise 360 Code Block.” “Structure the code so text content, directions, and object positions are easy to edit through a CONFIG or LEVELS object.” “Create a grid-based navigation game where players move a character using arrow keys or on-screen buttons to reach a treasure.” 🔋 Check Your Battery by Kate_Golomshtok This playful Caffeine Cat Test helps learners check their energy levels through a short, interactive quiz. Despite having no coding background, Kate used AI to create animated elements, like moving paws, a cat-face divider, and clickable cards, that make the experience feel warm and personal. 🔗 View the post | 🎮 Try the demo Build It with AI: Kick off your own build with prompts like these, or start from scratch with your own code or customizations: “Write HTML, CSS, and JavaScript for a 6-question personality quiz with animated feedback cards, designed for use inside a Rise 360 Code Block.” “Include visual elements like progress bars, emoji icons, and a results screen with simple charts showing fatigue, energy, and motivation.” “Structure the quiz content in a QUESTIONS array and use a CONFIG object to store colors, icons, and category names for easy editing.” 🐸 Hoppy Adventures: Coin Capture by destery1kenobi Destery created a retro-inspired game where players collect coins, dodge predators, and answer quiz questions to level up. Each set of 10 coins triggers a multiple-choice question, all managed through a JSON file for easy updates and tracking. 🔗 View the post | 🎮 Try the demo Build It with AI: Kick off your own build with prompts like these, or start from scratch with your own code or customizations: “Write HTML, CSS, and JavaScript for a mini-game where players use arrow keys (or WASD) to move a character around and collect coins.” “After every 10 coins, pause the game and display a multiple-choice quiz question inside a modal.” “Store quiz questions and answers in a QUESTIONS array for easy editing, and use variables for score, time, and level tracking. The game should run entirely inside a Rise 360 Code Block.” ☎️ People Manager Simulation by Daniel-Benton Daniel created a simulation where learners step into the role of a new call-centre manager, making choices that impact morale, performance, and stress. It features avatars, tooltips, and a narrative end summary, all co-coded through an iterative vibe-coding process. 🔗 View the post | 🎮 Try the demo Build It with AI: Kick off your own build with prompts like these, or start from scratch with your own code or customizations: “Build a browser-based management simulation with multiple-choice decisions that adjust player stats like performance, morale, and stress.” “Add tooltips to each choice explaining what the decision affects, and include a narrative end summary with a performance rating.” “Create an HTML layout for avatars and dialogue boxes that display manager and team interactions inside a Rise 360 Code Block.” 💬 Your Turn: Share your examples and tell us what you created, how you built it, or which prompts helped you along the way. 💡 Pro Tip: When posting your own Code Block examples, add the “Code Block” tag so others can find them more easily. And if you haven’t already, join our Code Block Group to keep the conversation going! 🏅 Want to Be Featured Next? We’re always looking to highlight inspiring examples from the community, and your work could be next! Here's what we look for in a standout submission: A downloadable .story file or link to your Rise course so others can explore, adapt, and learn from your build. A clear explanation of what you built, how it works, and what makes it unique. Behind-the-scenes insight into your process, techniques, tools, or challenges you tackled. Purposeful design, whether it’s solving a problem, teaching a concept, or experimenting with a new approach. Bonus: Share your ideas for how your design is widely applicable beyond the specific example. Got something cool to share? Post it in Share Examples and you might see it featured in an upcoming roundup!Made by Members: Code Block Build-a-thon Highlights
The Code Block Build-a-thon wrapped last month with three winners, 60+ submissions, and so much creativity! This month, we’re exploring the highlights from the event: creative submissions, topic trends, and what you can learn from the build-a-thon, even if you didn’t participate 🎨 Creative Submissions These submissions were not only fun and functional, but novel uses of the code block focused on game-type interactions. 👑Paint by Num-Birds by ArthaLearning03 This winning submission is a fresh take on a classic pastime, helping novice bird watchers over a large hurdle in the hobby. Wizard Maze Game by KayleneWance Have you wished that pac-man was a little more magical? This submission will be right up your alley as a mix between familiar gameplay and unique graphics. CMY Mixer by ISa Color theory is one of those skills that can take a lifetime to master, but this mixer lets you practice with hexcode and percentage mixing support. 💭 Play is a great way to improve engagement and recall—what type of game could you include in your next course? 📈 Trending Content There were a few noticeable trends in submissions: those that taught, encouraged thought, or sought to help with professional development. Australian Sign Language by ShwetaArun Visual and kinesthetic learners will appreciate this lesson that not only runs you through the Australian Sign Language Alphabet, but teaches you how to sign your name. Using Time with Intention by AnnaRabasso This thoughtful lesson takes you through practical time awareness in a kind and beautiful exercise. 👑 Meet your Learner Persona - by ClaudiaNadol891 Our first place winner shines as both a code block example and professional development session. 💭 What trends are you seeing in the Instructional Design space? Which do you enjoy the most? 🥡Takeaways These submissions were thoughtfully made as templates and tools for the community so that you can start experimenting with them right away. Custom Tab Interaction by JenChang You can plug-and-play with this interaction, and use it for a wide variety of learner interactions. 👑Accessibility Checker by SheriLee A winning submission through and through, this accessibility checker can levelset your accessibility related decision making in just a few interactions. Custom Interactive Product Match by VirginieBergon If you’re looking for a variation of a matching knowledge check with learner feedback, this code block is for you. 💭Templates and checker-type tools can be incorporated into your work today. What are some other tips or tricks you’ll be able to implement? Experiment with games for learners, get inspired by trending topics, or try one of these templates in your work and let us know how it goes. You can also share any new code block examples for others to see and learn from, too. Thank you to everyone who participated in our first ever build-a-thon! 🗨️Let us know Which submission was your favorite? Were there any that surprised you? 🏅 Want to Be Featured Next? We’re always looking to highlight inspiring examples from the community, and your work could be next! Here's what we look for in a standout submission: A downloadable .story file or link to your Rise course so others can explore, adapt, and learn from your build. A clear explanation of what you built, how it works, and what makes it unique. Behind-the-scenes insight into your process, techniques, tools, or challenges you tackled. Purposeful design, whether it’s solving a problem, teaching a concept, or experimenting with a new approach. Bonus: Share your ideas for how your design is widely applicable beyond the specific example.How to Copy Blocks from One Lesson to Another in Rise 360
Have you ever built a course in Rise 360 and realized, later on, that some of the content in one lesson would work great in a different lesson? Or maybe you want to reuse the same content structure? I’ve been there! Luckily, it’s super easy to copy blocks from one Rise lesson to another, thanks to the blocks template feature. Here’s how it works. 1. Open the Blocks Library The first thing you’ll want to do is navigate to the lesson that contains the block you want to copy and open up the block library. You can do that either by clicking the plus sign (+) between two blocks … … or by clicking All Blocks in the blocks shortcut bar. 2. Create a New Template Next, select the templates tab in the block library and click the New Template button. 3. Select the Blocks to Copy Then, select the block or blocks you want to copy by clicking the checkmark for each one. 4. Save Your Template Next, click Save, name your template, and click Save once again. 5. Insert Your Template Finally, navigate to the lesson where you’d like your copied block to go, open up the blocks library, and select your template. Wrap-Up Et voilà! It’s that easy. With blocks templates, you can copy blocks from one lesson to another within the same course and copy blocks to lessons in other courses; you can even share your blocks with members of your team if you have an Articulate 360 Teams subscription. It’s super handy! Want to try block templates out, but don’t have Rise 360? Start a free 30-day trial of Articulate 360. And subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).
