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!Record and Edit Videos Like a Pro with Peek 360 and Replay 360
We're ending support for Studio 360, Replay 360, and Peek 360 on December 31, 2026. Learn more. Did you know your Articulate 360 subscription has everything you need to create videos? That’s right—from the initial recording to making basic edits and gathering feedback to the final publishing of your video, Articulate 360 has you covered with Peek 360 and Replay 360. These are two extremely handy, easy-to-use tools you can use in conjunction with each other to create simple and professional video tutorials. Here’s an example of a video that was recorded with Peek 360 and then edited with Replay 360 to transform it into a step-by-step tutorial. The best part is, from start to finish, it was all done in just a few minutes, including the narration. Video tutorial created with Peek 360 and Replay 360 Let’s take a look at how you can use Peek 360 and Replay 360 to create quick and simple videos like the one above. Record Your Video with Peek 360 The first step is to create your screen recording. You have a few options for how to do this, since both Peek 360 and Replay 360 have recording abilities. Personally, I like to use Peek 360 for my recordings. Why? I love how the Peek 360 recorder is easily launched directly from my taskbar, and the videos are automatically uploaded to Review 360 when I’m done recording. I also like how completed Peek 360 recordings are converted to an .MP4 file (which are all stored in your MyDocuments/Peek folder). Here’s a tip for quickly accessing the .MP4 version of your Peek 360 videos: right-click on the video in question and choose “View in Folder” from the menu that appears. Right-click on a Peek 360 video and select “View in Folder” to easily access the .MP4 version of the recording I can also click “View on Articulate 360” from the menu to open up my Peek 360 recording in Review 360. From there, I typically grab the Share link and send it off to my reviewers or Subject Matter Experts. This way, I can get approval from stakeholders that the video covers all the appropriate content before I start working on final touches. Edit Your Video with Replay 360 Once you’ve created your Peek 360 video, you can jazz up the .MP4 version with Replay 360 by adding images, subtitles (called “Lower Thirds”), and audio narration. To make edits to the .MP4 video you created with Peek 360, launch a new Replay 360 project and insert the video. Click the Video button to insert the .MP4 version of your Peek 360 video in a Replay 360 project You’ll notice that your video is added to the A track in Replay 360 (there are two tracks: A and B). The inserted Peek 360 video has been added to the A track in Replay 360 and is ready for editing This is when it starts to get fun, when you can start making edits and tweaks. Here are a few things you might want to consider doing: Add an introduction photo and a wrap-up photo using the “Image” option Use “Lower Thirds” text to add an introduction and summary to your video Use “Lower Thirds” to add text captions to your video describing high-level steps or key information about what is happening in the video Use the Cut, Delete, and Split tools to edit your video; for example, to remove any unnecessary parts of the video. Remove original audio. If you included audio in your original Peek 360 recording and you want to remove it to re-record the narration after you’ve made edits to your video, simply use the Silence tool to remove the original audio. Record narration using the Audio tool. You can either insert existing audio files, or you can record from your mic directly in Replay 360. The nice thing is that Replay will play your video while you’re recording, so you can easily pace your timing so that it works with what’s happening on-screen. Your audio file will be added to the B track. These are just some examples of things you can do to improve and refine your Peek 360 and Replay 360 videos. Share Your Video With Learners Once you’ve got this great video, you’re going to want to share it with learners. Ways to share your videos include: Inserting the video in Rise 360 using a video block. Inserting the video in a Storyline 360 course. This is a great option if you want to add interactivity. For example, you could bring up a pop-up with additional information or a quiz question. The sky’s the limit with Storyline 360! Uploading the video directly to your LMS. To get a SCORM output, start by publishing or manually uploading your video to Review 360. Then, navigate to your Review 360 dashboard, hover over the video, and click on the ellipsis on the video card. From there, select Export to LMS and choose the reporting options. See this article for more details. These are just a few tips for how you can use the tools available in your Articulate 360 subscription to create quick and easy videos. Have you created videos of your own with Peek 360 or Replay 360? I’d love to hear about your experiences, tips, or tricks in the comments below. Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Unlock New Skills with AI Assistant Training
We’re thrilled that AI Assistant is here, and the Articulate 360 training page is packed to the brim with videos and resources designed to get you up and running fast. Whether you're looking to sharpen your skills with AI image generation or refine your writing using the power of AI, our on-demand video library is here to support you on your journey. Live Webinars Save your spot in our live sessions! You’ll learn how to partner with AI Assistant to improve writing, generate content and images, instantly convert blocks, create text-to-speech narration, and more. Live Training Webinars Skill Builders Skill builder videos help you sharpen how you work with AI Assistant. You’ll learn practical tips, tricks, and prompting techniques that lead to stronger, more useful content. You'll find videos tailored to Rise, Storyline, and general AI tips, so you can start improving your AI-generated content right away no matter which tool you're using. AI Assistant Skill Builders Feature Tutorials Our easy-to-follow video tutorials walk you through all the key functionalities of AI Assistant, ensuring you get the most out of every feature. Whether you’re looking to master a specific function or explore new capabilities, our short tutorial videos are designed to make learning quick and enjoyable. AI Assistant Tutorials Resources to Bookmark For more help getting started with these features, check out our handy user guides: Accelerate Course Creation with Articulate AI Rise 360: Create Content with AI Assistant Storyline 360: Create Content with AI Assistant And if you want more information about AI Assistant and the other AI features we’re working on, head over to these resources: Articulate 360 FAQs: Articulate AI Build Compelling Courses Up to 9x Faster with Articulate’s AI Assistant How E-Learning Experts Are Shaping Articulate AI How Articulate AI Safeguards Your Data Articulate 360 Feature Roadmap8 Business Use Cases for Microlearning
Are you excited to try out microlearning, but unsure when to use it? Below, we outline eight common workplace situations that benefit from a short-form course. Each situation includes a sample microlearning. At the end, learn how you can customize these templates for your own company and training needs. 1. Create Organizational Alignment To hit a business target, everyone needs to be moving in the same direction. Creating that alignment starts with clear, frequent communication of the shared mission, vision, and values. Microlearning can help. The following editable template shows how you can align employees through regular executive “micro” updates: Executive Update 2. Highlight HR Information, Notices, or Reminders Educating employees about annual events like open enrollment, tax season, and compliance training is a critical function of HR teams. The problem? Important announcements often get missed when they’re embedded in long paragraphs or endless emails. Grab the following templates to see how microlearning makes HR communications more digestible and engaging: A Quick Guide To Open Enrollment Internal Company Newsletter 3. Strengthen Company Culture and DEI Initiatives Fostering an inclusive company culture is a continuous process—not a one-time effort. A series of microlearnings can support your larger culture-building and DEI efforts. Check out the following examples for ideas on how to get started: Are You an Ally? Try Taking on These 5 Roles How To Identify and Stop Using Ableist Language Gossip-Proof Your Workplace 4. Streamline Business Processes You can also use microlearning to document and streamline business processes or workflows—such as employee onboarding or performance management. Notice how the following examples make it easy for employees to work through the steps of a process independently: New Hire Pre-Hire Checklist Performance Review and Feedback 5. Increase Security Awareness Most successful data breaches, phishing attacks, and other cybersecurity incidents are caused by human error. Adding refresher microlearnings throughout the year can fortify your defenses. See an example for safeguarding against phishing attacks below: Spot the Phish 6. Enhance Employee Wellness A successful business needs thriving employees. But employee wellness training often ends up buried under competing priorities. Microlearning makes it easy for employees to fit in short breaks for self-care throughout the workday. Check out these two wellness-related microlearning examples: 3 Desk Stretches to Instantly Improve Your Day 5 Tips for Better Naps 7. Provide Quick-Reference Guides Microlearning is the perfect resource for one-off training questions: Employees can quickly find the answers they need—when they need them. Below, we’ve created templates for product and software training. But you could easily create quick-reference guides for sales, customer service, and other teams. Get To Know [Name of Product] Software Training 8. Reinforce and Assess Key Takeaways Finally, who says you have to choose between a more sizable course and microlearning? Repetition aids retention. Consider following up longer training sessions with a microlearning quiz, scenario, or summary. The examples listed below demonstrate how you might do this: Can You Recover From a Workplace Mistake? Training Refresher Wrap-Up There’s no shortage of creative ways you can use microlearning to achieve your business training objectives. The examples above are just a starter list. You might also check out submissions to one of our weekly community challenges, 40+ Microlearning Examples Created in Rise 360 #407. Interested in customizing one of these examples for your team? If you’re an Articulate 360 subscriber or trialer, you can edit all of the examples linked throughout this post by choosing the course from our Rise 360 microlearning content templates. Here’s a short video showing how to do that: What’s the latest microlearning course you’ve created? Tell us about it in the comments—and feel free to ask any questions you might have! Like this article? 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 Twitter.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.Time-Saving Tips for Formatting Tables in Rise 360
Do you love the table block in Rise 360 as much as I do? It’s a great way to organize content so it’s easy for learners to digest. And there are so many different ways to use it! Whether you want to display product specs, outline your weekly schedule, or compare and contrast concepts, tables are an excellent option. Depending on how you’re using tables, you might want to customize their look and feel by adding a background color to certain cells, for example, or by changing the font size. Luckily, personalizing table formatting is super quick and easy in Rise 360! Read on to find out how to efficiently format multiple cells at once. Formatting Multiple Cells If you want to change the way your cells look—say, change the background color from white to green or gray—there’s an easy way to apply that formatting to multiple cells at once. Simply click inside a cell, press and hold Shift, use the arrows on your keyboard to select the other cells you want to apply the formatting to, and select the format you want to apply in the toolbar. It’s super easy! Check out the GIF below to see how it works. Formatting Text Across Cells Once you’re happy with the formatting of the cells themselves, you might want to change the formatting of the text within those cells. For example, let’s say you want all your text to be a little smaller. No problem! There are a couple of different ways to quickly format your text across cells, depending on what you want to do. To apply the same text formatting to all the cells in your table, simply highlight the text in one cell, press and hold Control+A (or Command+A on a Mac), and select the format you want to apply in the toolbar. Take a look at the GIF below for a quick preview of how this works. If you want to reformat the text across some cells, but not all, highlight the text in one cell, press and hold Shift, and use the down arrow to select the cells with text you want to format. Every time you press on the down arrow, it’ll automatically select the entire text in the next cell. Once you’ve selected all the cells with text you want to format, choose the formatting options you want to apply in the toolbar. Get a clearer picture of how this works by checking out the GIF below. You can also select text that you want to format letter by letter. To do this, highlight the text in one cell, press and hold the Shift key, use the right arrow to select the cells with the text you want to format, and select the format you want to apply in the toolbar. See how this works in the GIF below. More Resources As you can see, formatting tables in Rise 360 is super fast and easy. To find out more about inserting table blocks into your Rise 360 courses, check out this helpful article. And if you’re looking for some creative ideas on how to use the table block in your next course, be sure to check out the following resources: Displaying Your Data with Rise 360 Tables Rise 360 Example Featuring Table Blocks If you’re dying to try out Rise 360 but don’t have Articulate 360, be sure to grab a free 30-day trial. 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).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).
