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!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).
