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).Community Insights: Preparing and Planning your visual design for Articulate Rise
The beauty of Articulate Rise is that when it comes to development, you don’t always have to plan everything. You can jump into the blank canvas, easily add and delete blocks, play with interactions and figure out what works as you go. The ease in which you can chop and change things is often what draws people to rapid authoring tools. Being able to bring your ideas to life in the click of a button, without any complex programming or coding. Whilst this method of ‘figuring things out’ as you go can often work well for building out ideas, when it comes to visual design, sometimes a little bit of planning can go a long way! The blank canvas that Rise brings can offer scope to be as creative as you wish with the visual identity of your course, but naturally this can also feel just a tad overwhelming. This sometimes then leads to two outcomes. We have those who love the freedom of a blank canvas but try to shoehorn in too many styles at once. Or those who just don’t know where to start, so play it safe and end up with a boring, blocky, black and white build. The good news is with proper planning you can avoid both those eventualities and craft a beautiful, accessible build without needing to be a graphic designer! Consistency is key So, what is the point in planning your visual design before jumping into development? Well, it’s not about creating something overly complex, or spending hours crafting a character that you’ll only use once in the course. No. It’s about ensuring consistency. Consistency plays a big role in how our learners are going to perceive the eLearning. Good design will go unnoticed, but bad design sticks out like a sore thumb! Even something as simple as having different icon styles or suddenly switching from using photography to illustrations, can be jarring to a learner. This results in the focus being drawn away from the content and can actually have a negative impact on a learner’s perception of the quality of the content too. Think about it, have you ever visited a website and been immediately put off because of the way it looks? Did you buy the product or access that service? Probably not. Quality of design and consistency of design can have a significant impact on perceived quality and cognitive load. We want our design choices to enhance and support the user experience, not detract from it. Making design decisions before jumping into your authoring tool can help support consistency and leave you with a Rise build that feels polished and professional! So how do you start planning and what do you need to include or consider? Let’s take a look! Create a blank moodboard space. This can be in whichever tool you prefer using. I like PowerPoint or Miro as I can quickly copy and paste things into the slide space. The key thing is that you can access this moodboard easily and have enough page or slide space to jot down your ideas. This will become a bit of working document that you can add to during the initial scoping of your project. Add in any existing brand assets. If you’re working within an organization or with a client, it is likely they will already have some brand guidelines for you to work with. This could include font choices, colour schemes and even suggestions for photography styles. Often these come in very large PDF documents, so take half an hour to read through and pull out any information that could be useful for you. Within your mood board add a title for ‘fonts’ and make a note of the chosen font for both your body text and headers. Sometimes I even add a little paragraph of dummy text so I can see how the font will look. At this stage you can also decide on font sizing too and make a note of this. Next, begin to pull together your colour scheme from the brand guidelines. I like to create a few rectangles within my moodboard and fill them with my chosen colours. Next to each swatch I add the HEX or RGB code so that I can easily copy this over when I get to development. It’s also a good idea to label your colour swatches with their intended use, for example header text, body text and accent colours (colours used for icons, graphs etc.). Sometimes brand guidelines will contain multiple different colour palettes for different uses. This is where it may be worth a chat with your Stakeholders to ask them to decide on just four or five colours. Too many can become overly busy and distracting! Check for accessibility Now that you have fonts and a colour scheme decided, it’s important to check for accessibility. I like to have at least two accessible colour pairings within my colour palette. This means that the contrast between the two colours is great enough to pass accessibility standards. There are lots of helpful websites out there that can allow you to check the contrast of two colours and will let you know if it passes accessibility standards. On your moodboard create a separate section that says ‘accessible colour pairings’ and include swatches of the pairings that can be used. This is particularly important for text and background colour pairings. It’s important to consider the accessibility of fonts too. It can be tempting to go for an elaborate or decorative curly font. As a header with font size 44pt, this may be absolutely fine. But as 16pt body text, could be completely unreadable. Standard fonts such as Poppins, Arial and Open Sans tend to work really well for body text and offer bold / black alternatives for headings too. Decide on an illustration, photo and icon style It may seem pedantic, but sudden changes in icon style can be really noticeable. So next up on your moodboard add the title ‘icons’ and provide a couple of icon examples in a consistent style. Sites like Flaticon are fantastic for sourcing icons of a particular look and feel. Consider whether you want icons coloured or just an outline and how detailed you wish them to be. Play around with a few different styles until you find something that you like. I sometimes find it useful to visit my client’s website and get inspiration from the icons used there. Once you have decided on a style and the colours in which your icons should be, add your examples to your moodboard. If you want to go one step further, why not create a folder in your documents called ‘icons’ and quickly gather a bank of icons that you feel you’re likely to use in your course. When you start the development, you can just grab and go! Make sure you don’t forget to jot down where you sourced your icons from too. This will make it much quicker to find others in the same style at a later date. When it comes to photography and illustrations, the likelihood is your client / Stakeholders may already have guidance on what is appropriate to use. Whether you go down the route of characters, or stock imagery, it’s important to keep this consistent throughout. Head over to a royalty free site and search for a range of images based on the content or subject matter of your eLearning. In the case of photography, search for consistencies in backgrounds, shot type (close up versus wide screen), colours and poses. As a rule of thumb, I tend to avoid overly staged imagery where the person is staring directly into the camera. More subtle stagings where people appear to be interacting more naturally with each other can feel a bit more pleasant and less uncanny valley! Look for diversity in your images too, try to ensure a range of ethnicities, races and genders. Once again, add the title ‘imagery’ to your moodboard and provide a handful of examples you can refer back to later. When using characters or illustrations it can be slightly more tricky to ensure consistency in the style. However, royalty free sites such as Storyset allow you to search through a bank of illustrations all created in the same look and feel. You can even recolour them on the website without needing any graphic design software too! Gather inspiration for layouts and interactivity Did you know website designs can offer a great source of inspiration for Rise? Due to the continuous, one-page, nature of Rise it functions in a similar way to a website. Whilst you may not be able to replicate the functionality or interactivity of a website, you can translate some of the design choices! Head over to Google or Pinterest and type in ‘UI website design inspiration’. Here you will be able to find flatlay images of websites. Consider how the text is segmented, how colour and shape is used, and how images are presented. It can help spark ideas for dividers, background styles and more! Gather your reference images and drop them into your moodboard with the title 'layout inspiration'. Check everything fits together Great, you’ve finished gathering the pieces for your visual design puzzle. But now the most important step, looking at everything together and making sure it fits nicely. So, what do I mean by this? Essentially it means looking at everything as a whole and considering if it is conveying the message you want. For example, moodboard containing a colour palette with sunshine yellow and bright orange and photography of people smiling, may be a rogue choice for a fraud eLearning. This can also include looking for any contradictory elements to your moodboard too, for example a bubbly, rounded font but imagery that is serious and corporate. 🌟 All elements need to feel cohesive and intentional. Consider if you can explain the decision making behind your choices, if you’re finding you can’t really express why you’ve chosen a particular font, or colour, or image style, it’s probably not the right fit! And you’re done! You have your completed moodboard now ready to present to your client, share with colleagues, or to use as your reference to begin developing your Rise build. Remember, this doesn’t need to be a polished document, it should support you in maintaining consistency throughout your build and provide a point of inspiration to help you create Rise courses that break free from being boring and blocky. Once finished, why not share an example of a moodboard you’ve created? Share the tool you used and where you sourced any assets. 💡 Keep Learning Explore more member spotlight articles to discover how other learning designers are building their skills—and shaping the future of learning. Community Insights: Peer Guide Spotlight | E-Learning Heroes Community Insights: How Support Takes You Far | E-Learning HeroesLabs: Explore, Experiment, and Help Shape What’s Next
The best features we build don’t come from us alone. They come from you! From the courses you build to the creative ways you push our tools, your ideas shape what we create next. And while we’ve always listened through surveys, interviews, and community conversations, we wanted a way to work with you even more closely. So we started looking for a way to build more collaboratively, bringing you into the process while ideas are still evolving, not just before or after they ship. That’s how Labs came to be. With Labs, you can opt in to try early features and explore new ideas in the context of your real work. Instead of relying on retrospective feedback, Labs gives us a chance to learn alongside you in real time. Most experiments include built-in ways to share feedback, so what you’re experiencing can immediately inform what we improve next. It also helps us connect with creators who want to be more involved in the process. If you’re exploring an experiment, there’s a good chance we’ll reach out to hear more about your experience and keep the conversation going. Some experiments will be a success. Others will help us pivot in a new direction. Either way, they help us move faster and build better tools for you. Not every feature will go through Labs, but when something is available, you’ll find all the details in the Labs community group. That includes what the feature does, any current limitations, and the type of feedback we’re looking for. Following the group is the best way to stay up to date on new experiments. Labs isn’t a replacement for the ways we’ve always worked with you. It’s an extension of that relationship and a new way to shape the future of the authoring experience together. Explore Labs, try out what’s new, and let us know what you think. Go to Labs *All features on Articulate Labs and are subject to change. These features are experimental and may be modified or removed at any time. Beta Services Terms apply.
