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!The Secret to Create Great E-Learning Videos
Videos let you show a learner what they need to know, not just tell them. And for soft-skills training, they’re invaluable for capturing the subtleties of personal interactions. In this e-book, we’ll share our expert tips on creating compelling videos and screencasts. Learn how to set up a professional-quality studio with simple, affordable equipment, including lighting you can find at your local hardware store. Get tips for speaking or narrating with a natural, authentic tone. Save time by effectively preparing your desktop for screen recordings. Enhance your videos with captions and interactions to make sure they communicate key points. You’ll learn how to: Find the equipment you’ll need on a budget you can afford Create the best environment for creating training videos Prepare to record your video Create screencasts efficiently Add interactions to your videoHow I Built This Recycling Parallax Interaction in Storyline 360
If you’ve ever been on a road trip and gazed out the side window (hopefully only as a passenger 😉), you’ve probably noticed that objects close to you—like trees—appear to zip by really fast, while objects further in the distance—such as mountains—seem to barely move. This phenomenon is known as motion parallax. In the digital world, the parallax effect gives the illusion of depth and movement. Combine that with a realistic learning scenario—like in this Recycling Guide example—and you’ve got yourself a truly engaging interaction. View | Download Let’s take a look at how to create this interactive parallax example in Storyline 360! Create layered components To create a parallax effect you need several layered components that move at different speeds. So, the first thing I did was create all my slide elements with the different layers in mind. Using a combination of shapes in Storyline 360 and Content Library 360 assets, I ended up with six layered components. Component 1: Recycling bin For this example, I wanted the recycling bin to be the main focus—after all, that’s what the course is all about. Since I planned to tilt the bin and make the wheels spin, having it front and center would give the optical illusion that the bin was rolling as the background moved. Component 2: Park Next, I needed to create the main interactive piece—the park. This is the only component that learners engage with to reveal additional content, so I was very intentional about how I designed the space. Since the graphics were going to move horizontally, I made sure to extend those designs past the slide size. I carefully placed each object—such as buttons and litter—in different parts of the park and in a specific order to help guide the experience. And because I used only Content Library 360 icons/illustrations and simple shapes, it was easy to move things around and reposition them as needed. Pro tip: Before duplicating a button, create all the states beforehand so they copy over. Big time-saver! Component 3: Mountains (light) To add a sense of depth and movement, I included mountains in the background. I combined several different mountain-shaped icons to create the extra-wide graphic. I made the first mountain layer a light tan color since objects up close are generally lighter in color. Component 4: Mountains (dark) Behind the lightly colored mountains, I added a darker version for contrast. To save time, I copied and pasted some of the shapes from the lighter mountain. Since not all mountains look alike, I flipped and resized some of the shapes so that when they moved, they didn’t line up exactly the same. Component 5: Sky The scene wouldn’t be complete without a sky! I added a sun for reference. I mostly kept this component simple to save time and to keep the main focus on content. Component 6: Frame (optional) Okay, so this is where it gets a little tricky. I could’ve made things easier by extending the sky and ground to fill the slide. That way, I wouldn’t need a frame and objects could freely animate on and off the rectangular slide. But I really wanted to create a unique learning experience. To give this course a custom look and feel I designed a frame to show content within a unique shape. The frame is comprised of the title, a white border, arrow buttons, a background, and two side shapes to match so that the other components only show inside the unique shape. Pro tip: To make the slide look seamless with the player background, go to your Player settings and change the background color to match. And here’s how it all looks together. Save static objects Once I created all the components, I realized there were a lot of objects on my slide. So, I decided to make my file easier to manage by saving some of the layered components that had a lot of objects—such as the Park, Mountains (Light), and Mountains (Dark)—as their own image and then replacing them with a scalable vector graphic (SVG) to keep image quality. For example, I selected all the objects in the Mountains (Dark) component, right-clicked, and selected Export Shape as Picture. I saved the shapes as a PNG. For the best image quality, I simply opened that PNG file in Adobe Illustrator and saved it as an SVG. I went back to my Storyline 360 project, inserted and resized my SVG to match the objects on the slide, and then deleted all of the Mountains (Dark) objects. I repeated this process with the Mountains (Light) component. For the Park component, I took a few extra steps before exporting it as a picture since it had a lot of interactive elements and I only wanted to save the static parts of the image. On the timeline, I clicked the eye icon to hide objects with states, animations, and text so I could still edit them or assign triggers at any time. Here are all of the static components I exported as a shape to save as an SVG. And for context, here are all the elements I did not include in the export. After inserting and resizing the Park SVG, I moved it beneath the hidden park objects on the timeline. I selected the eye icons to make all the Park components visible again where they remained in the same location as designed. Then, I grouped them and renamed the group “Park.” Saving some of the components as an SVG really sped up my workflow. With fewer objects on my timeline, it was easier to select the ones I wanted to edit or add triggers to. It also reduced the file size so content could load faster. To learn more about scalable vector graphics (SVG), check out this article: Storyline 360: SVG Support. Get things moving With all the graphics on the base layer in place, I created several additional layers to reveal content and help tell the story. Now it was time to connect everything with movement. To explain how to create the parallax effect, let’s roll through the example.😊 Background When you move right, the background moves left, making it look like the recycling bin is rolling forward. If you move left, those same background components move right, making it look like the recycling bin is rolling backward. To create this parallax effect, I added motion path animations to move some of the background components—Park, Mountains (Light), and Mountains (Dark). And in case you didn’t already know, you can add more than one motion path to the same object. That feature really came in handy here. For each component, I added a Left and Right line motion path. Since I wanted the components to all move at the same pace, I edited the easing direction to None for each motion path. I also selected Relative Start Point to ensure each component always moved from its current position. Next, I changed the duration of the paths to one second. I chose this duration because I planned to have the recycling bin roll left or right for one second as well. That way, all the animations would stop and start at the same time. To make it easier to manage triggers later on, I also renamed the motion paths to include the component name and the direction of the path. For example, I named the motion path that moves the park group right “Park Right.” Next, I changed the length of the paths. This is where it differs for each component. Since I wanted the background objects to move at a slower speed than the foreground objects, I edited the left and right motion path lengths for each component to the following. Park: 180 px Mountains (Light): 90 px Mountains (Dark): 40 px Using these settings, the furthest-away component, Mountains (Dark), would only move left and right 40 px during the one-second duration. Whereas, Mountains (Light) would move about twice the distance, at 90 px, during that same time. And that was it for the motion path settings! Now it was time to add triggers to make these components move in the right direction. By default, when you add a motion path animation to an object, a trigger is automatically created. Since I wanted the components to move based on the user selecting Right or Left, I deleted those triggers from the base layer and instead added them to the Bin Right and Bin Left layers. On the Bin Left layer, I added triggers to move the components right when the timeline starts. And on the Bin Right layer, I added triggers to move the components left when the timeline starts. Now, when the learner selects Left or Right, they’ll see the background move accordingly. Recycling bin Now for the recycling bin. I put it front and center to make it appear like it was rolling when the background moved. When you go right, the bin tilts and rolls forward. When you move left, it tilts and moves backward. After one second, the animations stop and the recycling bin returns to its upright position. To create this optical illusion, on the Bin Right and Bin Left layers I hid the recycling bin that was on the base layer so it was no longer visible. In its place, I added a tilted bin with dirt paths depending on the direction it was going to move. Bin left layer Bin right layer Next, I added a Spin entrance animation to the wheels. Just like a regular wheel, if you go left, the wheel’s direction moves counterclockwise. If you go right, the wheel’s direction moves clockwise. As for the amount it spins in each direction, I landed on a quarter spin since that looked the most accurate. To emphasize the direction the recycling bin was moving, I included dirt paths and added Wipe and Fade animations. And because both the duration of the background components and the timeline on these layers are set to only one second, all the animations come to a stop at the same time. To ensure the recycling bin returned to its original upright position, I added a trigger to hide whichever layer you’re on—Bin Left or Bin Right—when the timeline ends. The learner automatically returns to the base layer, where they can continue the learning journey. Set boundaries With the freedom to move the recycling bin left and right as you please, you may be wondering how I stopped the background components from moving too far. If you go left at the very beginning, you’ll see a little tortoise and a deactivated Left button so you can’t move any further. To keep learners from navigating outside of the main area, I needed to set some boundaries. To achieve this, I added a Deactivated button over the Left button that only shows when you navigate to that side of the screen. To make the button visible, I added a transparent shape and pasted it inside the existing group, “Park.” When you navigate left, the Park group moves right, causing the bin and the transparent shape to intersect, which changes the Deactivated button to Normal (visible). When you navigate away, it stops intersecting and returns to its original hidden state. I used this same technique at the end of the learning experience. When the recycling bin intersects with the transparent shape next to the house, it shows the final layer. This allowed me to end the parallax learning experience at the end of the graphic. Wrap-Up And that’s all there is to it! Using the parallax effect can create an engaging learning experience that truly brings your content to life. If you haven’t already, download this Recycling Guide project to take a closer look at how I built it. For more advice on working with motion paths, head on over to this article: 7 Pro Tips for Working With Motion Path Animations in Storyline 360. If you want to see more ways to create a motion effect, check out this webinar: Create Parallax Effects With Sliders in Storyline 360. Want to try to create your own parallax example, 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.How to Customize This Storyline 360 Countdown Quiz Game Template
A few weeks ago I decided to create this Storyline 360 gamified quiz template: Click here to view the interactive version and download the template. If you’re curious about my thought process in creating this example, jump over to this article: A Behind-the-Scenes Look at How I Designed This Gamified Quiz. If you’ve downloaded this template and want to adapt it, keep reading! In this article, I’m going to walk you through the top-four FAQs about adapting this template: How do I change the passing score? How do I change the number of questions in each level? How do I change the amount of time in each level? How do I change the number of levels? This template uses Storyline 360 features like question banks, states, variables, trigger conditions, and slide masters. If you’re not comfortable with how those work, you might want to check out the linked tutorials before continuing. Alright, here we go! How do I change the passing score? By default, I’ve set the passing score to 50 percent. However, depending on the project, you may need learners to get a higher percentage of correct answers to pass. Good news: making this update is super easy! Simply open each result slide, click on Edit Result Slide, and change the percent required to pass, as shown in the GIF below: Note that if you update the passing score, you might decide you also want to update the scores required to earn one, two, or three stars. See the next section of this article to learn how to do that. How do I change the number of questions in each level? By default, each question bank in this template includes 20 questions. If you want to increase or decrease the number of questions, in addition to adding or deleting those questions in the question banks, there are a few other things to update. Let’s walk through each of them. Update the Instructions Slide If you update the number of questions, it’s important to update the on-screen instructions so learners understand how the course works. To update the instruction text, go to your timeline and click on the eye icon to hide the objects that you don’t need to edit. After you’re done making edits, remember to show all the objects again. Update the Question Slide Master Another place you’ll want to update the on-screen text is on the question slide master. Next to the variable that keeps track of the question number you’re currently on, you’ll see it shows the total number of questions—which in this case is 20. Once again, this is a pretty quick fix. Simply replace the number after the slash with the total number of questions in your project. Update the Result Slide for Each Level On the Success layer of the result slide for each level, learners see how many stars they earned as well as a message that explains what those stars mean. Both the number of stars and the message displayed are personalized depending on their score. By default, it’s set up so that: If learners get 10-14 questions right, they’ll see one star and a message saying they got at least 10 questions right. If learners get 15-19 questions right, they’ll see two stars and a message saying they got at least 15 questions right. If learners get a perfect score, they’ll see three stars and a message saying they answered all 20 questions correctly. To make this happen, I’ve added states to both the stars and the feedback textbox. I also added triggers to show the state that corresponds to the learner’s score. Here’s what those triggers look like: If you change the number of questions in each level, you’ll need to update these triggers. But before you do that, you’ll need to calculate the scores that learners need to get to earn one, two, or three stars. For example, let’s say you want to reduce the number of questions per level from 20 to 10. You decide that to earn one star learners need to get five questions right, to earn two stars they need to get seven, and to earn three stars they need to get a perfect score. Assuming that each question is still worth 10 points, here’s what that calculation would look like: 1 star: 5 questions x 10 points each = 50 points 2 stars: 7 questions x 10 points each = 70 points 3 stars: 10 questions x 10 points each = 100 points Since technically learners will earn one star if they get five or six right answers, and two stars if they get seven, eight, or nine right answers, the triggers associated with those stars and the associated feedback messages will need to cover a range of points, unlike the ones associated with three stars. Here’s what those values look like if we use the example above: 1 star: between 50 and 69 points 2 stars: between 70 and 99 points 3 stars: equal to 100 points Thanks to the new trigger panel, it’s quick and easy to make those edits, as you can see in the GIF below: Finally, remember to update the text in the feedback message states to reflect the number of questions learners need to get right to earn one, two, or three stars, as shown in the GIF below: Update the Gameboard Slide The number of points earned—which, as we saw in the previous section, changes when you adjust the number of questions in each level—also impacts two things on the gameboard slide: The number of stars that learners earn The layer that appears when a learner unlocks a new level Updating these triggers looks very similar to what you just did on the result slides. Here’s a GIF that shows me updating those triggers for Level Two: You’ll need to repeat the above process for Levels Three to Five. The good news is that even though there are a bunch of triggers to update here, it’s super-fast since you can do it directly in the trigger panel. And those are all the updates you’ll need to make if you want to change the number of questions in each level. You did it! How do I change the amount of time in each level? By default, learners get one minute to complete each level. For every correct answer, they get an extra five seconds added to their time. If you want to change the amount of time learners start off with, you’ll need to do a few things. Let’s walk through the steps together. Update the Default Value of the Time Variable Start by adjusting the X variable, which counts the total amount of time remaining in seconds. In my template, I set the default value to 60—to give learners one minute to complete each level: If you want to give your learners more or less time, you’ll need to adjust the default value of this variable. Extend the Timer Past Two Minutes (Skip If Decreasing Time) If you’re decreasing the amount of time learners have to complete a level, you can skip this step. However, if you’re increasing it, you’ll want to pay close attention. In my template, a variable called M displays the number of minutes remaining. Even if learners get all the questions right, it’s not set up to work for anything above two minutes. If you decide to give learners extra time, you’ll need to make a couple of adjustments. The minuter-counter functionality is set up on the top-level slide master, on the Slide Loop layer: To figure out how many triggers you’ll need to add, start by calculating the maximum number of minutes that learners could end up with if they got all the questions right. For example, let’s say you decide to give learners two minutes (or 120 seconds) to start out with. To figure out how much total time they could end up with if they get all 20 questions right—and receive a five-second bonus for each—you’d end up with this calculation: 120 + (5 x 20) = 220 seconds. To find the number of minutes, simply divide that number by 60. In this case, the answer is three minutes. To make the timer work for this scenario, you’ll need to: Update the trigger that sets the number of minutes, in this case two, to include a range rather than anything above 120. In other words, you want to set M to 2 if X is between 120 and 179, instead of if it’s equal to or greater than 120. Add a new trigger to set M to 3 if X is greater than or equal to 180. Note that these triggers appear twice—once when the timeline starts and again when the timeline ends—so you’ll need to update them twice. Here’s a GIF that shows me updating them: Update the Reset Triggers Since the timer needs to start over whenever learners begin a new level, you’ll need to update the triggers that reset the starting value of the X variable—which controls the time remaining—in a few spots: On the gameboard slide: On the retry buttons located on the Success and Failure layers of the result slides for each level: Remember to do this on the Success and Failure layers for every single level, or the timer will automatically reset to 60, since that’s the amount of time I set the template up for initially. And you’re done! You’ve successfully updated the amount of time learners have to complete each level. How do I change the number of levels? If you want to split your quizzes up by topic, but you have more or fewer levels than are included in the template, no problem! In this section, I’ll walk you through how to customize the number of levels. If you want to decrease the number of levels, all you need to do is delete the associated scenes as well as the buttons and layers on the gameboard slide. Easy-peasy! However, if you want to add an extra level, there are a few additional steps. Let’s take a closer look. Create a New Level To create a new level, start by inserting a new scene. From there, duplicate one of the existing question banks and insert a new draw into your scene. If you’ve never used question banks before, check out this tutorial: Understanding Question Banks. Next, copy one of the existing result slides and paste it into the new scene, after the question bank draw. If you want, you can update the color of the buttons learners use to select their answers. In my template, I used a different color for each level—to match the color of the button leading to that level on the gameboard slide. Update the Gameboard Slide On the gameboard slide, decide where to insert the button for the new level. As you can see in the screenshot below, there’s a good amount of space between Levels Four and Five, so that may be a good place to put it. To create the Level Six button, duplicate the Level Five button and the associated stars. Then, update the button’s fill color so that it’s different from all the other levels. Next, move the Level Five button to the left, making sure to delete a few of the circles on the path to make space for the new button. Then, update the level number on the duplicated button to 06: Remember to update the fill color and level number in both the Normal and Disabled states, so that they appear correctly whether the level is locked or unlocked. For more tips on working with states, check out this tutorial: Adding and Editing States. Each level has its own layer on the gameboard slide. On each layer, you’ll notice that the path animates to lead up to the button for that level. An arrow and an instruction also appear so learners know which button to click. Finally, the button state changes, effectively unlocking the level. If you’re adding one new level, here are the updates you’ll need to make. On the Level Five layer, delete the part of the path that leads to Level Six and move the arrow and text so that they point to the Level Five button: Then, on the Level Six layer, get rid of the animations—without deleting the circles themselves—on the part of the path that leads to Level Five, and delete the circles that overlap with the Level Five button. Next, update the instruction text to say “Level Six” and update the button that the trigger points to. When you duplicated the level button earlier, the triggers associated with the level button were also duplicated. However, you still need to update a few things: The value of the variable that’s updated when the user clicks to indicate the level the user is currently working on The result slide the button resets The quiz slide the button jumps to Here’s a GIF that shows how to update those triggers: Update the Question Slide Master On the question slide master, duplicate the Level Five variable trigger. Then, change the value to 6 and update the slide it points to, as shown in the GIF below: Update the New Level’s Result Slide On the Level Six result slide, update the triggers on the Try Again buttons on both the Success and Failure layers: Update the Cumulative Result Slide Finally, on the cumulative result slide, check the box to include the result slide for the new level in the cumulative result calculation: Hopefully, this tutorial will help you customize this template to fit your needs! If you run into any issues or if you’d like to update this template in a way that’s not covered in this tutorial, please leave me a comment below. Looking for more gamified course templates? Here are few of my favorites: Randomized Board Game Dice Quiz Game E-Learning Battleship Game Crossword Puzzle Game 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.How to Customize This Storyline 360 Flexible Quiz Scoring Template
Have you ever needed to create a self-assessment, a personality test, or another quiz type that requires custom feedback depending on the score (e.g., What type of manager are you?)? If so, this Storyline 360 Flexible Quiz Scoring template is the perfect starting point. In this article, I’ll walk you through how to customize this template to fit your needs. I’ll show you how to: Add questions Edit the point values of each choice Add more feedback options Display a score or percentage on the results screen What’s the fastest way to add questions? The template includes a total of five questions. To add more questions, simply: Right-click a question slide Select Duplicate That’s it! I also included the question number along with the total number of questions in the quiz. I personally like adding this detail so learners can see their progress. And because I used the built-in slide number variables, there’s no need to update the numbers manually. When you duplicate a slide, you’ll see both the question number and the total number of questions in the quiz update on all slides—automatically. Pro tip: If you want to customize the look and feel of the quiz slides, making these changes before you duplicate them will save you time. Can I change how many points each choice is worth? Absolutely! By default, Storyline 360 lets you assign a point value for getting the question right and another point value for getting it wrong. But did you know you can also assign a different score to each answer choice? That’s exactly what I did for this template. For each question, I assigned a different point value to each choice—one choice is worth one point, one is worth three points, and the other choice is worth five points. If you want to edit the point value for each choice, simply: Select a question slide Click Form View In the Points column, edit the number value for each choice You’ll notice I included the point values for each choice in Slide View. This can be helpful for development or review purposes. Just remember to delete the point values before publishing your course so the learner is focused on their options rather than on how much each option is worth. Pro tip: If you edit the point values and want to keep the same scoring for all quiz questions, delete the other question slides in the template, and duplicate the one you customized. How do I add more feedback options? For this template, I decided to use a blank results slide so I could design the slide from scratch. I created three custom feedback layers: low score, medium score, and high score. If that works for your project as well, then simply edit the feedback text as needed and you’re all set! But what if you want to include more than three possible outcomes? No problem! Just follow the steps below. 1. Duplicate layers Start by duplicating the existing layers as many times as needed and editing the text. It’s always a good idea to rename the layers so they’re easy to identify. For template purposes, I included the text—high/medium/low score—in the results to indicate which layer is showing. You can customize it or delete it altogether so it’s not visible to learners. 2. Add/edit triggers on the base layer Once you have your layers in place, you’ll need to add/edit the triggers on the results slide (base layer). Since my template has three possible outcomes, I created three triggers to show the appropriate layer depending on the score. If you have four possible outcomes, then you’ll need to add one more trigger so that you have a total of four triggers. For five outcomes, you’ll need five triggers, and so on. Once you’ve added your additional triggers, make sure you edit each trigger to show the correct layer. You’ll also want to edit the point values that display each layer to match your own scoring rubric. What if I want to display a score or percentage on the results screen? If you’re creating a quiz that requires you to display a score or percentage at the end, you’ll want to add variable references or the following text to the results slide (base layer): Display Type Add the Text Score %Results.ScorePoints% Percentage %Results.ScorePercent%% Pro tip: Since the feedback text is on the layers, make sure you place the score/percentage text where it will be visible. One idea would be to replace the icon at the top with your chosen scoring method. Before After Wrap-Up I hope this article helps you to easily create a more personalized experience for your learners by customizing this Storyline 360 Flexible Quiz Scoring template. If you need help or have any additional questions on updating this template, please leave a comment below. Want to see more customizable quiz templates? Check out these free downloads: Storyline: Gamified Quiz Template with Timer Storyline: Countdown Quiz Game Storyline: Risk Assessment Quiz Storyline: Unconscious Bias Quiz Storyline: Timed Quiz Challenge Storyline: Around the World Quiz Want to try customizing this Storyline 360 quiz, 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.5 Ways You Can Advocate for Your Value to the Business as a Course Creator
In an ideal world, leadership would always have a clear view of the impact of your e-learning projects and your unique value to the organization. But that view can be much foggier in real life than we’d like it to be. When our company or leadership doesn’t get what course creators like us do or how it benefits them, we can end up on shaky ground. That lack of understanding makes it hard for us to push back against training cuts. It makes it tricky to get budget increases for tech investments or team expansion. And it can even lead to the mistaken belief that we can easily be replaced by new technology or people without e-learning expertise. Thankfully, many of these issues stem from an easy-to-address source—a lack of awareness. Tipping the balance back in your favor is often as easy as advocating for your work and yourself. Not sure how to do that? Here are a few good places to start. 1. Find your champions It’s possible to do this self-advocacy work on your own. But you’ll probably reach more ears and shift perceptions faster if other people are talking up your work too. Think of it like how you might decide where to eat when traveling to a new city. Intriguing social media posts from a restaurant might get your attention. But chances are a trusted friend telling you about their favorite dining spot in town is more likely to influence your decision. Who might step up to champion your work or team? Consider tapping into people like: Subject matter experts (SMEs) that you have a strong working relationship with. Learners who’ve given your e-learning glowing reviews. Stakeholders who’ve seen the impact your past projects made on the business. Trusted coworkers who know how great your work is—and why it should matter to others. If you’re feeling awkward about asking people to praise your work, just keep your requests small at first. For instance, if an SME emails you a compliment about how easy you’ve been to work with, ask them to forward it to your manager as well. 2. Be loud and proud about your successes We sometimes get siloed off in learning and development. As a result, other teams may have no idea what we’re working on and why it’s so important to the company. If you’re feeling a bit invisible, a good solution is to put on your marketing hat and pursue opportunities to share what you’re doing. This is a great time to tap into your manager and champions to help you find ways to share your work. Large-scale efforts—like presenting at a department meeting, sharing an eye-catching infographic about the impact of a course, or making a year-in-review video highlighting your team’s biggest wins—can all help. But even smaller actions—like asking someone who gave a glowing review of your course to tell their team why they should take it too—can get the word out there. While you’re doing this promo work, don’t just focus on the final project. Also talk up the unique skills and ideas you and your team contributed to make it succeed. That way people don’t just get excited about the finished content—they’ll also get excited about what you and your team bring to the table. 3. Share how what you do connects to broader business goals The people we work with may have a vague sense that e-learning benefits the company in some way. But they may not know precisely how. Or sometimes they understand the surface benefits of our e-learning—like how compliance training checks off a legal requirement—but may not see the deeper, more meaningful impacts it makes in the long run. The best way to turn this situation around is to help these colleagues make those connections. Look for opportunities to call out the specific ways your projects contribute to key company goals. For instance, maybe that compliance course also helped reduce workplace injuries or prevented costly fines. And be sure to be direct about these links so there’s no ambiguity about the impact of your work. 4. Talk to your audience in terms they care about While you’re talking up what you do, also think about how you’re framing that information. When you’re chatting with other learning professionals, eyes will often light up when you share how a project met your learning objectives, used a development tool in a creative way, or tied into learning research. But that likely won’t mean as much—or sometimes anything—to people outside our field. Instead, promote your work in ways that will speak to your audience. For instance, if they’ve complained to you about the boring and useless e-learning at their last job, tell them about all the ways you're making your courses interesting and practical. If your project can help with their team’s goals, tell them how it does that. Or, if you know they’re constantly feeling crunched for time, play up the key ways you’re streamlining your projects. That way, they’ll know you’re making a difference on things that matter to them personally. 5. Do the math to connect your successes to the bottom line Want a measure of success that’s easy to get people excited about? Focus on money. In some cases, financial numbers are easy to uncover—for instance, if you launched training on upselling a new product and the sales numbers immediately went up. Other times, though, you might need to break out your calculator to convert one kind of win into a financial one. For example, if you shaved ten minutes off of your company’s annual compliance training, that may not initially sound like a big deal. But if you have 60,000 employees that have to take it, that’s 10,000 hours of saved work time. If your company’s average hourly salary is $25, that ten-minute trim saved the company $250,000. And those are numbers that can impress! Have a situation where your training wasn’t the only factor at play? You can still frame the final savings or profits as something your work contributed to. That way, you’re acknowledging the other factors but not downplaying that your work had an important part to play in the mix. Wrap-Up Advocating for yourself and your work may not solve all the challenges you face in your professional life. But it’s a good first step toward boosting your visibility and ensuring your organization knows just how much you have to offer. Not only that, but it can even open doors for your career that you didn’t know were possible. Want more ideas on building buy-in for you and your work? Check out these articles: 2 Ways To Show the Value of Online Training Here’s How To Prove the Value of Training to Your Organization Use KPIs To Demonstrate the Value of E-Learning 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). And if you have questions, please share them in the comments.Five Overlooked Timesavers for Working with the Timeline in Storyline 360
When I need to create richly interactive, custom learning experiences, my go-to Articulate 360 app is Storyline 360. With features like the timeline, Storyline 360 makes it simple to work with objects on my slides—making them appear and disappear in tandem with audio narration, for instance. So let’s take a look at one of the most low-key, powerful features in Storyline 360—the timeline—and five overlooked timesavers for making the most of it. Managing Objects with the Timeline When you’re building highly interactive e-learning with lots of audio and animations, it’s not unusual to end up with a number of objects on a slide. And when you’re working with so many objects, it’s also easy to get confused. Here are some timeline features and tips that can help you avoid that confusion and stay organized! Rename Objects Every object on your slide also appears on the timeline. So when you’ve got, say, 12 rectangles on your slide, Storyline 360 will number each rectangle on the timeline as Rectangle 1, Rectangle 2, etc. One of the fastest ways to confuse yourself is to leave these default labels in place. That’s because later on when you’re adding triggers to your project or building things like a drag-and-drop, you’ll waste precious time trying to figure out which of the many pictures on your slide is “Picture 27.” Save yourself a lot of trigger troubleshooting time and headaches by simply renaming objects on the timeline. To do that, just double-click on the name to the left of each object and type in a more descriptive name then hit Enter on your keyboard. It looks like this: That’s all it takes. And while it might seem a bit tedious to name every object on your slides, I guarantee it will save you loads of frustration! Undock the Timeline When you’re working with a lot of objects, scrolling through the timeline to find the ones you need can get challenging. That’s why it’s so helpful that Storyline 360 lets you undock the timeline panel and even place it on another monitor. To undock the timeline panel and place it elsewhere, just click Timeline and drag it to a new spot. I like to drag mine over to my bigger monitor so I can expand it and see everything. Ready to redock the timeline? Select Redock icon, in the upper right corner of the panel. Here's a gif showing how to undock and redock the timeline: Working with Grouped Objects on the Timeline One of my favorite timesaving tricks is to group objects on my slide so there are fewer individual items on my timeline. You can group objects by holding the CTRL key while you select the assets you want to include in the group. With all the items selected, simply right-click and choose Group. Grouping objects is especially helpful when you have a lot of assets like textboxes and shapes. I find it makes it easier to adjust timing when I can grab and place the entire grouping rather than each individual object. Expand an Object Grouping Need to make a change to an object that’s part of a group? Just click the triangle next to the group name to expand it so you can see all of the individual objects nested beneath it. Then, make your changes and click the triangle again to collapse the grouping. In short, not only does grouping assets keep your timeline looking tidy, it also makes it easier to hide/show or lock a group of objects so you can remove distractions and focus on other objects on the slide. Let’s take a look at how hiding and locking objects works. Hide and Lock Objects on the Timeline Sometimes it’s helpful to temporarily hide some objects so you can focus on others. To hide an object, click the eye icon to the left of its name on the timeline. Click the eye icon again to unhide it. There are also times when you want to see objects on your slide, but you’d rather not accidentally grab them when you’re working with other adjacent objects. To prevent one element from being moved or modified while you’re working with another, click the box before its name on the timeline. Clicking that will change it to a padlock icon. Simply click it again to unlock it. Here’s what hiding/unhiding and locking/unlocking looks like: Pro Tip: If you’ve hidden objects on the timeline, they won’t appear in your published output, so remember to unhide them before you publish! Syncing Objects on the Timeline I like to think of the timeline as a director, the objects on my slide as actors, and the slide as my stage. Thinking in these terms helps you see how the function of the timeline is to orchestrate your entire slide. By positioning and dragging the “actors” (objects) on the timeline, I can control when they’ll appear on stage (my slide) and when they’ll exit the stage in concert with other actors or my narrator. One way to orchestrate all of this activity is to use cue points. Let’s take a closer look at how cue points work. Quickly Add Cue Points To quickly add cue point markers, click Play, in the lower left corner of the timeline, then press C on your keyboard at any point where you want to insert a cue point, like this: To remove a cue point, right-click the cue point marker you want to delete and select Delete Cue Point or right-click anywhere in the timeline and select Delete All Cue Points. More Timeline Timesavers As you’ve seen, the timeline in Storyline 360 is pretty awesome. It’s hard to believe that something this simple is so powerful! In this article, I’ve covered five of my favorite overlooked timeline features, but there’s much more to learn! For more tips and tricks about using the timeline, don’t miss these articles: 3 Time-Saving Storyline Timeline Tips 11 Awesome Things You Can Do with the Storyline Timeline Storyline 360 User Guide: Working with the Timeline What’s your favorite Storyline 360 timesaver? Do you have a best tip or trick for working smarter? Share them with us in a comment, 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.How to Create a Personality Test in Storyline
Over the years, there have been countless discussions in the forums about how to create a personality test or magazine-style quiz in Storyline, like this one, or this one … the list goes on. Unlike standard quiz questions, personality quiz questions don’t have correct answers. That’s because the purpose of a personality quiz isn’t to check your knowledge; it’s to classify you into a given category based on your responses. Whether your categories are personality types or knowledge levels, these kinds of quizzes can be a useful tool. I decided to try building this type of quiz so I could share the wealth with you fine folks. But before we get into the nitty-gritty, first check out my example. If you’re really short on time, you can skip the instructions and just download the template. For those of you who are hungry to learn, let’s break it down here, step by step. 1. Define Categories Before you start working on your quiz in Storyline, make sure to define the different categories you want to sort learners into. In my example I chose to create four categories, but you can do more or less; it’s up to you. 2. Create Quiz Questions Next, insert your first multiple choice or “pick one” quiz question. I decided to pick a quiz template from Content Library so I didn’t have to worry about the design. I really liked the layout options for multiple choice questions in the Focus template, so I went with that. For my personality test, I kept it simple by sticking to four choices per question, each corresponding to one of my four categories. I also chose to keep the choices in the same order on each slide. This way all the “As” correspond to the same category, and all the “Bs” correspond to the same category, etc. Keep in mind that you don’t have to do it that way. You could have six choices per question, but only four categories. Or you could have an equal amount of choices per question and categories, but mix up the order to keep learners guessing. If you decide to opt for a more complex scenario, I recommend creating a spreadsheet to keep track of which choices correspond to which categories, so you don’t get mixed up. Before you move onto the next step, go into form view and set feedback to “None.” 3. Create Variables Next, create a number variable with an initial value of 0 for each category. Make sure to choose names that are meaningful to make it easy to identify which variables correspond to which category. For my example, I created four variables: A, B, C, and D. 4. Add Triggers Now, back in slide view, add a trigger for every choice that adds 1 to the corresponding variable when the learner clicks the submit button. Here’s my trigger for choice A: When the learner selects response A and clicks on “Submit,” variable A will be equal to 1 instead of 0. Copy and paste that trigger for each of your choices, making sure to swap out the variable and shape for each. Before you move onto the next step, make sure to move all these new triggers to the top using the arrow button: Otherwise, the interaction will be submitted before the triggers are executed and the variables won’t increment. If the value of your variables doesn’t change, the interaction won’t work. Your trigger panel should look like this: 5. Duplicate Questions Now that your first question is all set up, duplicate it for all your other questions. This way, if you keep all your choices in the same order, you only have to set up your triggers once. Easy-peasy! If you do decide to mix up the order, make sure to update your triggers so the appropriate variable is being incremented when the learners make their selection. 6. Set Up Results Slide Insert a graded results slide and delete all the objects on the slide except for the retry button (unless you don’t want to allow learners to retry the quiz). Go ahead and delete the incorrect and correct slide layers as well. Then, insert a layer for each category. Next, add a trigger to display each category layer when that variable is greater than all the other variables: Then, insert an additional layer called “Tie” in case learners end up with an equal amount of answers from two or more categories. Before you add a trigger to show this layer in case of a tie, create a chart like the one below to figure out all the possible combinations resulting in a tie: Then write them down in a table to make it easy to set up the trigger correctly in Storyline. Now add a trigger to show the “Tie” layer when the timeline starts if any of the variables are equal. Your trigger should look like this: When you’re selecting the other conditions, make sure to select “or” (not “and”) so that no matter which combination is present, the learner will see the “Tie” layer. Finally, when your trigger is all set up, move it all the way to the top of the slide triggers list using the arrow. If you don’t, the “Tie” layer will appear when two variables have the same value even if there’s another variable that’s greater than both of them. This is what your trigger panel should look like: 7. Add Dynamic Results Graph (Optional) If you want learners to see how many of their answers correspond to each category, like in my example, it’s fairly easy to set up. This step is entirely optional, so if you don’t want a dynamic results graph, go ahead and skip to the next section of this article. If you do want to create a dynamic results graph, start by figuring out how many steps you’ll need. In my example I have five questions, so I created five steps. Once you’ve determined the steps you want, insert a rectangle. In my example I gave my rectangle a height of five pixels. Then, add a custom state for each step. In my first state I changed the height of my rectangle to 25 pixels. From there, I added 25 pixels to my rectangle for each step. In the end, my states looked like this: Next, copy and paste your rectangle until you have one for each category, adjust the colors, and add labels. Now, add a trigger to adjust the state of your rectangles based on the value of the corresponding variable. For example, if variable A is equal to 1, I want the state of rectangle A to be 1 as well. You’ll need to add the same amount of triggers as you have states for each object. My triggers look like this: Since you can copy and paste your triggers and just swap out the variable name and value, this actually takes a lot less time than you’d think. 8. Configure Quiz Reset (Optional) If you want learners to be able to try again, add a trigger to set each number variable back to zero when they click on the retry button. Your trigger should look like this: Once you’ve created the trigger, you can copy and paste it for all the other variables. Don’t forget to swap out the variable each time. If you added a dynamic results graph, you’ll also need to add a trigger to each object to reset the object’s state to “Normal” when the user clicks on the retry button. Your trigger should look like this: Go ahead and copy and paste that trigger for all the shapes in your dynamic results graph, swapping out the object each time. Then, move all of these triggers up using the arrow button so that they’re above the “Jump to” trigger. When you’re done, the triggers on your retry button should look like this: More Resources That’s all there is to it! As you can see, the most difficult part about this kind of project is figuring out the logic behind it. Once you’ve got that down, it’s super-easy to build in Storyline! If you feel like you’ve followed all the directions, but your interaction still isn’t working, check out this article on troubleshooting advanced interactions. Nicole shared some great tips that are sure to get you back on the right track. And of course, if you have any questions or comments, please let me know in the space 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.
