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 videoGetting Started with Articulate Studio
If you’re new to Articulate Studio ’13, this quick-start guide is for you. It’ll help you ramp up on core features, so you can begin turning your PowerPoint content into e-learning courses. You’ll learn how to: Create your first e-learning project, right in PowerPoint Make your slides more engaging with multimedia Quickly create cool interactions Show your learners what they need to know with simple screencasting tools Add effective quizzes and knowledge checks Publish your course to web or mobileTips on Designing E-Learning for Folx with Slow Internet
Speedy access to the internet is easy to take for granted. Throughout much of the western world, high-speed internet access is almost ubiquitous. We simply assume we’ll have a good Wi-Fi connection wherever we are and whenever we need one. But in many parts of the world, high-speed internet access is limited. In many developing countries, mobile cellular networks are the main—and sometimes only—way to access an internet connection. And according to the Facts and Figures 2021 report from the International Telecommunications Union (ITU), large portions of rural populations only have access to basic 2G cellular networks, if they have coverage at all. Over a 2G network, it can take nearly 30 minutes to download even one very simple app. Imagine how agonizing that feels if you’re paying for mobile network access by the minute. Downloading just one app can be an expensive proposition! Even in the United States, where high-speed internet access is fairly common, there are still large pockets of low-bandwidth communities completely reliant upon mobile networks for their internet access. And even in areas that are better served by high-speed internet providers, bandwidth issues are common for people like retail workers and deskless workers, who may struggle with unstable cellular and Wi-Fi connections. What does this mean for e-learning developers like you? Well, if many people have limited or unreliable access to the internet, the odds are pretty good that at least some of your learners simply can’t use the e-learning you’re working so hard to create for them. People with low internet bandwidth are the one type of accessibility challenge you might not even recognize until your course is out the door. But there are some relatively simple things you can do to tackle this challenge before it’s too late. Let’s take a closer look at some helpful tips. Get to Know Your Learners One of the fundamentals of good instructional design practice is to know your audience before you start designing anything. Who are they? Where are they? What sorts of devices do they use to access e-learning? What’s their work environment like? These are critical questions you can ask to identify learners with a current or potential bandwidth issue. And once you know who they are and their constraints, you can identify the appropriate training strategies for reaching them. Not sure what questions to ask to get to know your audience? Download this detailed list of needs analysis questions for some fresh ideas. Wondering how to tell if your learners have a low-bandwidth challenge? Talk them through checking their connection speed using free tools like Speedtest or Fast.com. Rethink Your Content Strategy Once you know what your audience needs from you, it’s a good idea to think through how you’ll design content that will work well for everyone. Here are a few content strategies to consider: Use microlearning: It’s helpful to break down big ideas into smaller chunks to support comprehension and retention of information. That approach is also helpful from a technology standpoint. Breaking down larger courses into smaller ones makes them quicker to load on mobile devices, especially over cellular connections. Consider an audio-only course: Sometimes we get hung up on the idea of creating full-blown, slide-based e-learning courses, when what our learners really need from us is more accessible learning content they can consume on the go! An audio-only course is a great alternative for these learners. Audio files are a small fraction of the size of an HD video file and can be an engaging way to learn while driving or commuting. Consider a text-only course: Anyone who’s ever enjoyed a book will agree that text can be an engaging way to learn! If you’re trying to come up with a lightweight way to reach everyone, try providing a snappy, well-written PDF that’s quick to download—and that learners can review from their mobile device. Create a low-bandwidth version of your course: If you can target learning content towards a specific audience, or you only have a small, concentrated group of learners with bandwidth challenges, consider using strategies like the ones in this article to create a special low-bandwidth version of your course just for them. Be Mindful When Using Video Video content is rich and engaging and a great way to consume content on a mobile device. But if you’re a learner with an unstable internet connection, or someone who relies on a mobile network to connect, waiting for a video to buffer can be sheer agony. Save your learners from this experience with these tips: Use video smartly: Video can be a great way to deliver content to everyone. You just need to be a little savvy in how you’re doing it! The following strategies can help: If you can’t break up your courses into smaller chunks, at least break up your video! Aim for videos that are as short as possible—two to three minutes max—and break one longer video up into several shorter videos, if necessary. For courses with lots of media, it’s a good idea to sacrifice a little quality to save on bandwidth. Some things you can do include compressing the video and reducing audio or image quality. These tactics will help reduce demand on the device as well as the learner’s internet connection. Avoid having videos (or lots of layers or object states) on consecutive slides in the course. That will lighten the load time a little. Design simple slides between multimedia-content slides. For instance, if the first slide in your project is a video, put three slides ahead of it to give your video content some time to preload. The first two slides can be fake “loading” slides. Then the third slide can remind the learner that the course has sound, with a button for them to hit “start.” All this is done to build in a delay. Making the first three slides lightweight gives the richer multimedia slides a little more time to preload in the background. That way the transition to those slides is smoother and the media loads more quickly. Finally, consider outsourcing your video hosting to YouTube or Vimeo and embedding video into your projects. This approach keeps your course lightweight, and video hosts tend to do a pretty good job of balancing quality with bandwidth. Consider avoiding video altogether: Even when compressed, video files can be large and consume a lot of bandwidth. If bandwidth constraints are a big problem for your learners, consider eliminating video from your courses and go with more mobile-friendly alternatives, like static images or animated gifs. Get Creative with Course Distribution What if you can’t design (or redesign) a course and you need to work with what you already have? Try publishing your courses for the web and sending learners a link to open the course in a place where the internet connection is stronger. Then, have them save the course to their mobile devices for offline viewing. That way they can view it later without an internet connection. Note that this approach circumvents an LMS, so learner progress and scores won’t be tracked. However, this can be a smart way to share learning content that’s also used as performance support. More Learning By getting to know your learners and their needs, and brainstorming some alternative design, development, and delivery methods, you can help your audience and your organization anticipate and overcome the challenge of sharing learning content with folks who have limited internet connectivity. For more information about recommended browsers and mobile apps for viewing content created with Articulate 360, check out these Articulate 360 System Requirements. What are your top tips for supporting learners with low-bandwidth challenges? Share them with us by leaving a comment below. And while you’re thinking about it, follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.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.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).4 Time-Saving Ways to Use Review 360
Review 360, the web-based project review app that’s included with a subscription to Articulate 360, is one of my favorite apps—period. That’s because it saves me loads of time when I’m working with Subject Matter Experts (SMEs) since all my reviewers can see my course and leave their comments right from their web browser. Even better, they can see each other’s comments, so when there are disagreements about changes the experts can debate and reach a compromise without involving me. But there are loads of brilliant little ways e-learning pros get the most out of Review 360—many of which might not even be on your radar. What follows are four of my favorite ways to use Review 360 to save time. Keep reading and I’ll fill you in on all the details! 1. Use Review 360 When You're Doing Rapid Prototyping Following an agile or iterative development process to build custom e-learning in Storyline 360? If so you’ve probably found that rapid prototyping is the key to building alignment between you and your project team. One approach many e-learning pros take with rapid prototyping is to give their project teams a series of unpolished but functional interactions to react to quickly, so critical pieces of the course can be nailed down early on and the rest of the course built around them. If this approach to rapid prototyping sounds like a good idea to you, here’s how you can direct your reviewer’s attention to only that interaction with the publishing options in Storyline 360. Click on Publish on the Home tab. On the Publish pop-up, you'll see that Review 360is selected by default. Under Properties, click onthe hyperlinked text to the right of Publish. Now you can choose topublish the entire project, a single scene, or even just a single slide. Once your interaction is published, send your review team a link to your prototype and ask for their feedback. Since you’re just showing them one interaction at a time, instead of an entire course, your reviewers can stay focused and not get too distracted by other screens. And because reviewers can see each other’s feedback, any differences in opinion on how an interaction should function can be worked out early on. Getting meaningful feedback about a critical interaction early on in the process can also save you time by informing your designs for the next interaction you’ll prototype. 2. Use Review 360 for Kickstarting New E-Learning Projects When I’m trying to get a new e-learning project off the ground, I find it’s helpful to show examples of other projects I’ve created. This gives the project team some concrete ideas to inspire their thinking, helps build trust in my skills and abilities, and removes some of the mystery from the process of transforming static content into interactive e-learning. By providing your project team with links to an assortment of handpicked past projects published to Review 360, you can give them a chance to click through relevant interactions and actually experience different visual and functional design treatments for themselves. You can even encourage your clients to use the comments field to note their preferences or vote on their favorites. All of this adds up to a lightweight and collaborative approach for exploring creative ideas with your project team! 3. Use Review 360 to Streamline the Work of Applying Changes I don’t know about you, but I find using two monitors is a huge timesaver when I’m creating courses. That’s because I can have my source material displayed on my smaller laptop screen while my authoring app is open on my big monitor. It might seem obvious, but using two monitors is also a great way to boost your productivity when you’re editing your courses. I like to have Review 360 up on my smaller monitor so I can see my reviewer’s comments and cross-reference their feedback with the project file, open in my authoring app on my big monitor. That way, there's lesstoggling back and forth between Review 360 and my project file. And asI make changes to my project file, I can click on the little checkmark next to the comment to resolve it in Review 360 and get it off my fix-it list. SometimesI even use Review 360 toleave notes to myself in the comments about items I need to revisit, later. 4. Use Review 360 for Capturing Edits to Video I find Review 360 especially helpful when I’m working on projects that include video. That’s because Review 360 takes a snapshot of the screen as soon as my reviewer starts to leave a comment, making it way easier for me to put their comments into context. In fact, I find this feature so helpful that I often publish just my videos to Review 360 and circulate them for feedback while I’m working on otherparts of the course. That way I can keep my reviewers engaged in the development process throughout the project. I find this also gives them more visibility into the work I’m doing and helps me get out in front of any big changes to my video content that could be time-consuming or labor-intensive to resolve. Even if you don’t have a lot of video in your e-learning projects, you’ll still find that using Review 360 withPeek 360 (the lightweight screen capture app included with a subscription to Articulate 360) is a super-smart way to share tips and tricks or quick changes to almost anything. For example, let’s say you need a change made to a graphic in your course.Make a quick Peek 360 video to walk the graphic designer through your changes. In turn,your graphic designer can leave you questions and attach revised versions to the image right in Review 360, since you can attach files to comments. It’s so much easier than going back and forth over email! You can learn more about using this powerful app duo in this article, One Cool Peek Trick You Might Not Know About. There’s More to Learn So those were just four of my favorite timesaving ways to use Review 360. I’m sure there are lots more because I’m constantly learning new tricks for using all the apps in Articulate 360! If you want to learn more about using Review 360, check out the following resources forsome great tips, tricks, and timesavers. Review 360 User Guide 3 Ways Review 360 Is a Big Gift to Course Developers 5 Steps to an Easier Course Review Process Are you using Review 360 in a clever, timesaving way? Share your pro tips with the community and leave me 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 I Made This Randomized Math Game in Storyline 360
When I was in fourth grade, my teacher would hold math competitions. He’d call two students to the front of the class and then give us a multiplication problem to solve. The first student to answer correctly would remain at the front and another student would be called up until there were no more students left. The last person remaining was the winner. It was a fun yet nerve-wracking challenge. I liked math (note: this was before calculus 😆), but didn’t always like practicing in front of a large group of people. That’s what inspired me to create an online version: View | Download In my version, instead of competing against others, learners can either answer at their own pace or race against the clock. And thanks to random number variables in Storyline 360, I built it all without any coding skills! Curious how I did it? Let me walk you through my process. 1. Create the Storyboard The concept for this game was pretty simple: I wanted to present learners with 10 questions and see how many in a row they could answer correctly. With that in mind, I decided to draft a storyboard using this visual template. Here’s how it turned out: Basically, I mapped out: An intro slide with a Start button and an Instructions layer, where learners decide whether they want to race against the clock. A main slide for all the math questions, with some feedback layers. A final slide where learners can see if they passed or failed and decide if they want to try again. 2. Build the Slides The first thing I did to bring that storyboard to life in Storyline 360 was build each slide and layer. From there, I inserted the text, shapes, icons, and graphics. I found the background image and all the monster illustrations in Content Library 360. Then, I used the media library feature to quickly open and edit the illustrations in Photoshop. For example, I was able to transform this free purple monster asset … Before (Content Library 360 illustration) … into four additional options by removing the background and making more poses and facial expressions, for a more engaging learning experience. After (edited versions) After I finished building and designing all my slides and layers, I was ready to focus on the more technical aspects—math!😬 3. Display Random Questions and Feedback To make this game challenging, I wanted learners to see different math problems each time they played. I also wanted to show a variety of feedback messages so it felt more personalized. To do this, I used variables. Variables collect and store data in Storyline 360 that you can use to display information anywhere in your course. This can be text—the learner’s name, for example—or numbers—like in math problems. Most people create variables first and then insert the references to display the values on the screen. However, I decided to type my variable names on the slide before creating them to figure out exactly how many—and what kind—I needed. In Storyline 360, it’s easy to manually insert variable references. Simply insert a textbox and type percentage signs on each side of the variable name, as shown below. Slide On the base layer, I ended up with the following variables: Variable Name Type Default Value Purpose score Number 0 The total score. a Number 0 First number in the math problem. b Number 0 Second number in the math problem. I also planned to add one behind-the-scene variable that wasn’t going to be visible on the base layer: Variable Name Type Default Value Purpose timer True/False False To make the timer visible for learners who want it, and invisible for those who don’t. Layers For the layers, I added the following variables: Layer Name Variable Name Type Default Value Purpose Correct FeedbackCorrect Text blank The Correct feedback text. Incorrect FeedbackIncorrect Text blank The Incorrect feedback text. Incorrect and Time’s Up answer Number 1 The Correct answer. I also planned to add one behind-the-scene variable that wasn’t going to be visible on the correct and incorrect layers: Layer Name Variable Name Type Default Value Purpose Correct and Incorrect FeedbackNumber Number 0 Decides which Correct and Incorrect feedback phrases to display Once I identified all the variables I needed, I went ahead and created them by clicking the Manage Project Variables icon at the top right of the triggers panel. I then selected the plus (+) sign to create each new variable. When you’re done, this is what it should look like: Once everything’s set up, the default values will appear automatically in place of the variable references, as shown below with light yellow boxes. But don’t worry, these boxes won’t show when you preview/publish. They’re simply there to help you see which variables are being referenced. All you need to do is hover over each yellow box to see the name of the variable. Slide Layers 4. Make a Space for Learners to Type Their Answers Next, I needed to create a space for learners to type their answers. I went to the Insert tab, clicked Input, and chose Numeric Entry Field. Then, I drew the data-entry field on my slide. I customized the formatting of the text in the numeric entry field to match my course design and formatted the shape by removing the outline and making the fill color completely transparent. (Note: Do not select the No Fill option. Doing so will prevent learners from clicking on the object and typing an answer.) When you add a numeric entry field, Storyline 360 automatically creates a variable to save the data … … and a trigger to set the value of the variable to whatever the learner types in the field. So there’s nothing else for you to do! It’s supereasy. And now, when the learner enters their answer and then clicks away—or selects the Submit button—the NumericEntry variable automatically updates to the value they typed. 5. Set Up the Math Calculations With the variables and the numeric entry field all set up, it was time to add triggers to make the math problems work! Triggers make it so easy to build these types of interactions without any code. All you have to do is choose an action and decide when you want it to occur. Let’s take a look at the triggers I created on my slide. First, the base layer. I organized the triggers into two parts: when the timeline starts and when the user clicks Check Answer. Let’s take a look at the triggers I created. 1. When the timeline starts on this slide. At the start of the slide, learners are presented with a random math problem. Here’s the image with the variable names so it’s easier to follow along. Variable Trigger Purpose a Set a to random number between 1 and 12 when the timeline starts on this slide I chose to pull from a range of 1 to 12 since this is a common range used for testing multiplication. You can easily edit the trigger to display a different range. b Set b to random number between 1 and 12 when the timeline starts on this slide NumericEntry Set NumericEntry to value 0 when the timeline starts on this slide I wanted the data field to display a neutral number so the learner knows to type their answer there. 2. When the user clicks Check Answer. Once the learner types their answer in the numeric entry field, they click the Check Answer button and are automatically directed to a custom feedback layer—Correct or Incorrect—depending on their response. Here are the triggers I created to ensure they were directed to the right layer. Variable Trigger Purpose answer a Multiply answer by variable a when the user clicks Check Answer When I created the variables earlier, I set the default value of answer to 1. That’s because this is a multiplication problem and anything multiplied by 0 is 0. Setting answer to 1 makes it so: answer (1) x a = a answer (1) x b = b Which then makes the correct answer: a x b = answer answer b Multiply answer by variable b when the user clicks Check Answer NumericEntry answer Show layer Correct when the user clicks Check Answer if NumericEntry＝ variable answer This lets learners know when their response is the same as the correct answer. Show layer Incorrect when the user clicks Check Answer if NumericEntry ≠ variable answer This lets learners know when their response doesn’t match the correct answer. 6. Add Some Feedback When it comes to quizzes, feedback is essential because it lets learners know how they’re doing. Since this is a game, I kept the feedback simple to keep the momentum going. Let’s take a quick look at how I set up the feedback from a technical perspective. Correct layer For the Correct layer, I organized the triggers into three different categories—Score, Feedback, Next button. 1. Score: Displaying a score helps learners gauge their progress. Since the goal of this game is for the learner to get 10 questions right in a row, I created the following trigger to calculate the score. Variable Trigger Purpose score Add value 1 to score when the timeline starts on this layer For every question the learner gets right, a point is added to their score. 2. Feedback: When I first created the Correct layer, I typed the feedback phrase, “That’s right!” But as I reviewed this interaction, seeing “That’s right!” 10 times in a row felt too repetitive. So, in addition to random math problems, I decided to add random feedback phrases for some variety. I wasn’t quite sure how to randomize words, but I remembered seeing this awesome Storyline: E-Learning Needs Analysis Generator by Montse. The concept was similar to what I was looking to do, so I dug into her file to see how she set it up. Here’s how I got the randomized feedback to work in my project: Variable Trigger Reason FeedbackNumber Set FeedbackNumber to random number between 1 and 10 when the timeline starts on this layer Since the goal of the game is to answer 10 questions right in a row, I included 10 different feedback phrases. This random number determines which phrase displays each time the learner answers correctly. FeedbackCorrect FeedbackNumber Set FeedbackCorrect to value Way to go! when FeedbackNumber = value 1 These are all the positive feedback phrases that display depending on the FeedbackNumber. I assigned each phrase a different number. Set FeedbackCorrect to value Outstanding! when FeedbackNumber = value 2 Set FeedbackCorrect to value Marvelous! when FeedbackNumber = value 3 Set FeedbackCorrect to value Incredible! when FeedbackNumber = value 4 Set FeedbackCorrect to value Right on! when FeedbackNumber = value 5 Set FeedbackCorrect to value You’re on fire! when FeedbackNumber = value 6 Set FeedbackCorrect to value I’m impressed! when FeedbackNumber = value 7 Set FeedbackCorrect to value Good thinking! when FeedbackNumber = value 8 Set FeedbackCorrect to value Grrr … eat! when FeedbackNumber = value 9 Set FeedbackCorrect to value Brilliant! when FeedbackNumber = value 10 3. Next button: After the learner reviews the correct feedback, they can move on to the next question. But since I built this entire interaction on just one slide, there are a few other triggers to add to reset everything after each question. Variable Trigger Purpose n/a Hide this layer when the user clicks Next button If the learner hasn’t earned 10 points yet, the layer closes and they’re presented with a new question to earn more points. score Jump to 1.3 Pass when the user clicks Next button if score = value 10 Once a learner earns 10 points, instead of hiding the layer to display the next question they’re directed to the final slide. answer Set answer to value 1 when the user clicks Next button Since the learner is moving onto the next question, this trigger resets the correct answer to its default value of 1. NumericEntry Set NumericEntry to value 0 when the user clicks Next button Instead of leaving the previously typed answer visible, this trigger resets the numeric entry field to 0 so the learner can start with a neutral number. a Set a to random number between 1 and 12 when the user clicks Next button These triggers reset both number fields to display a new math problem within the selected range. b Set b to random number between 1 and 12 when the user clicks Next button Incorrect layer For the Incorrect layer, I organized the triggers into two categories—Feedback and Next button. This layer didn’t require as many triggers since the Next button takes them to a final slide that allows them to restart the game. 1. Feedback: Similar to the Correct layer, I wanted to present different feedback phrases for incorrect responses. This is how that works: Variable Trigger Reason FeedbackNumber Set FeedbackNumber to random number between 1 and 3 when the timeline starts on this layer This random number determines which phrase displays each time the learner answers incorrectly. Incorrect FeedbackNumber Set FeedbackIncorrect to value Ahhh! when FeedbackNumber = value 1 These are all the Incorrect feedback phrases that display depending on the FeedbackNumber. I assigned each phrase a different number. I only included three different feedback phrases since the game is set up to get more answers right and the learners won’t see this layer as often. Set FeedbackIncorrect to value Grrr … when FeedbackNumber = value 2 Set FeedbackIncorrect to value Eeek! when FeedbackNumber = value 3 2. Next button: After the learner reviews the Incorrect feedback, they’re directed to the final slide. Here’s how I set that up: Variable Trigger Purpose n/a Jump to slide 1.4 Fail when the user clicks the Next button Since the learner didn’t answer 10 questions right in a row, they’re directed to the final slide, where they can play again. n/a Hide this layer when the user clicks Next button Left this trigger in to ensure the slide resets on restart. 7. Include an Optional Timer I decided to give learners the option to race against the clock, to make it even more challenging if they wanted to. Timed quizzes make for a more gamified experience, but—for accessibility purposes—I made the timer optional. Timers put learners who have visual, cognitive, or motor impairments and those using screen readers at a disadvantage. By providing two options, all learners are empowered to personalize the experience to fit their needs. Here’s how I set that up. Create the Timer Graphic To create the timer graphic, I inserted three long, thin rectangles at the top of the main quiz slide. Then, I changed the fill colors of each so that I had one white, one gray, and one red rectangle. Hide the Timer For learners who want to answer the questions at their own pace, I hid the timer. To do this, I changed the initial state of each shape to Hidden. Now, if a learner selects “Not timed,” the timer remains hidden. No triggers necessary. Show the Timer Then, to ensure the timer is visible for learners who want it, I added the following trigger to the Instructions layer of the introduction slide. Variable Trigger Purpose timer Set timer to True when the user clicks Timed button To save the option selected by the learner: Timed or Not Timed. Then, I added three triggers to the base layer of the main quiz slide—one for each of the colored rectangles—so that the timer displays if the learner selects the Timed button: Variable Trigger Purpose timer Change state of [timer color] to Normal when the timeline starts on this slide if timer = value True To show the timer at the start of this slide when the learner selects the Timed option. Remember: You need to add the above trigger to each colored rectangle, so in the end, you should have three almost identical triggers: Make the Timer Work Now it’s time to add animations to the timer so it looks like time is running out. To do that, I added a Fade and Wipe from Right animation to the red timer rectangle at the top of my slide. I changed the duration of the wipe to 30 seconds to give learners 30 seconds to complete the 10-question quiz before the timer runs out. Next, I extended the timeline of my slide to 30.75 seconds to take into account the animation durations. Then, I added the following trigger to display the Time’s Up layer when the time runs out: Variable Trigger Purpose timer Show layer Time’s Up when the animation Exit on red completes if timer = value True To make the Time’s Up layer appear when the red shape is no longer visible. Here’s what that layer looks like: Since the Time’s Up layer appears automatically when time runs out, there’s no time for learners to click on the Check button to see if they answered the questions correctly. For this reason, I added the following triggers to this layer: Variable Trigger Purpose answer a Multiply answer by variable a when the timeline starts on this slide To show the correct answer on this layer. answer b Multiply answer by variable b when the timeline starts on this slide Then, I added a trigger to jump to the Fail slide when learners click on Next so they can see their score and decide whether they want to play again. Variable Trigger Purpose n/a Jump to 1.4 Fail when the user clicks Next button To see their final results and give them another chance to play. Finally, I adjusted the settings of each layer on the main quiz slide so that the timer would only run when the learner was solving a math problem—not when they were viewing feedback. To do that, I clicked the properties icon and selected the Pause Timeline of Base Layer option: 8. Add Finishing Touches Once everything worked the way I wanted it to, I added some finishing touches to make it feel more game-like. For example, I inserted music I found on YouTube Studio and included a few sound effects I downloaded from Freesound. I also added subtle fade-ins and wipe-up animations for a smoother gaming experience. It’s amazing what a difference these small details can make when it comes to the overall experience. Wrap-Up In this project, I used random number variables to generate unpredictable math problems and phrases to make a more dynamic learning experience, but there are so many other cool ways to use this feature. Want to take a deeper dive into this game? You can download it here. How have you used random number variables in your projects? Please share your ideas or examples in the comments below. Looking for more inspiration on how to use variables in your projects? Check out these these e-learning challenges: 39 Brilliant Ways to Use Random Number Variables in E-Learning 24 Dynamic Ideas for Using Number Variables in E-Learning 33 Random Number Variable Examples in E-Learning Want to try building something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial.4 Easy Tips for Writing Great Training Video Scripts
When you think about your favorite movies or TV shows, they likely have one thing in common: a great script. A solid script sets up the story and characters, clarifies the setting and tone, and contains all the character dialogue. Moreover, it’s the blueprint for all the creative work that goes into every form of filmmaking, from the budget, location, and visual design to the costumes, makeup, and special effects. But don’t take my word for it … “To make a great film you need three things – the script, the script and the script.” – Alfred Hitchcock But what does filmmaking have to do with training? Most training teams don’t have access to a multimillion-dollar budget, nor to a multiyear production timeline, but that shouldn’t lead to scrimping on the quality of the training video script. In fact, you should take a cue from filmmaking pros and focus on nailing down a good script first and foremost, since a good script is absolutely essential for creating an effective training video. After all, a training video needs to do more than just entertain people; it actually needs to influence their behavior. So, how can you add “Hollywood-Level Screenwriting Pro” to your training skill set? I’ve pulled together the following four tips to get you started. 1. Identify the type of training video you need Training videos come in many different flavors, from purely demonstrative with short screencasts walking users through an app or highlighting product features to sweeping cinematic experiences with storylines and richly drawn characters. Sometimes training videos feature a narrator who tells learners what’s most important, while other times they follow characters as they navigate situations similar to what learners face on the job, allowing learners to draw their own conclusions about the key messages. There are almost endless ways to mix and match all the different flavors of training videos. But before you sit down to write anything, think about the best way to use video to achieve the outcomes you’re looking for. I find that searching YouTube for examples of different types of training videos can be a helpful way to get inspired if I’m feeling overwhelmed or just unsure where to start. 2. Draft a video treatment before the script Just as you would write a quick design brief for an e-learning course to flesh out ideas with stakeholders, writing a video treatment is a great way to present your ideas to the team before you start writing a full-blown script. A video treatment can be a simple one-page document that provides a high-level summary of the characters and key events in the story. An effective video treatment should be high-level enough for stakeholders to quickly read and comprehend, but detailed enough to paint a picture of the story and setting of the video. To break it down further, an effective video treatment should: Clarify the desired learning outcomes of the training video Provide the structure and key plot points of the story Highlight the characters and their roles in the story Help you pinpoint potential plot holes or areas of confusion before you start writing the script For these reasons and more, taking a few minutes to sit with the objectives of the training video and pull together a short treatment is not only a valuable creative exercise but also a smart strategy for avoiding time-consuming rework. If you’re not quite sure how to structure a video treatment or what to include, download this free templateto get started. 3. Keep your videos short and sweet Whether you’re writing an e-learning course or a training video (or both!), it’s always best to keep content succinct. Just as lengthy courses can wear down your learner’s attention, lengthy videos—no matter how well written—can do the same. I like to aim for videos that range from 3 to 8 minutes. Sometimes, however, a longer video is needed to support the learning objectives for the project; in those cases, try writing short scenes and transitions into the script. Doing so will make it easier to edit down a big video into smaller videos in post-production—and ensures your story doesn’t feel too choppy. 4.Keep it real One easy way to spot a poorly written video script is by dialogue that sounds robotic and forced. That’s not what you want! (Side note: there’s a terrible/delightful example of stilted dialogue in this classic example of a cheesy training video.) Avoid this error by writing content that’s meant to be heard and seen. Not sure what I mean? Here are some more scripting tips that can help: Write in a conversational tone. Read your dialogue aloud as you write it. As you hear the words, try swapping out formal language for informal language and phrasing (e.g., use “can’t” instead of “cannot”). Speak to the viewer. When your audience is watching your video, ready to learn, they expect to be spoken to rather than spoken at. That means writing in ways that are engaging and personal. For instance, avoid wordy third-person phrasing like, “Before we get started, viewers should note that the audio volume can be adjusted by clicking on the + or - icons” and try something more personal and direct, such as “You can adjust the volume of this video by clicking the + or - icons.” Use the active voice. Passive voice, particularly when spoken, sounds incredibly awkward. For instance, try reading the following sentence aloud: “The car was started by Tom.” Painful, right? Now read this rewrite aloud: “Tom started the car.” Aah! That’s so much better, isn’t it? Not only is the active voice version much clearer and easier to understand—it’s also shorter! Don’t use dialogue to describe things viewers can see for themselves. For example, avoid having the protagonist say things like, “The customer walked in looking angry” just as the actor playing the role of the customer walks in glaring. Not only is that painfully obvious and far-from-compelling dialogue, but it’s also an acting direction for theperson playing the role of the customer! Burying that direction in another character’s dialogue is confusing and may cause cast members to struggle to decipher their character’s moods and motivations. Summing It Up It can be challenging to write a video script that’s engaging and effective for learners and easy to follow for the video’s cast and crew—but it’s a challenge you’re sure to embrace with a little practice. By using the tips I’ve shared here, you’ll be cranking out a training blockbuster in no time! Liked these writing tips? You’ll find loads more on E-Learning Heroes. Here are a few of my favorites: More Than a Dozen Tips for Writing Awesome Audio Narration Scripts Top Writing Tips for E-Learning 4 Impactful Ways to Boost Your E-Learning Writing Skills What are your top writing tips and tricks? How do you keep things conversational when you’re writing dialogue? Share your ideas and experiences with me and the rest of the E-Learning Heroes community by leaving a comment below. 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.How 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 I Built This Dial-Driven Map Activity in Storyline 360 (With Help from ChatGPT)
Despite our increasingly ‘touchscreen’ and ‘hands-free’ world, dials are still a big part of everyday life. If you need to emulate a dial in your e-learning experience, this feature can make your interaction more realistic, tactile, and relevant for the learner. For the Using Interactive Dials E-Learning Challenge, I created a Storyline 360 example that used dials as a sort of drag-and-drop. Along the way, I tried out some creative techniques that helped this project work in unexpected ways—including using the dial feature to animate an object and an unconventional approach to enable the dial to spin in both directions. Here’s a behind-the-scenes look at how this project works. Project Overview This demo project teaches people some simple map navigation techniques. You can try it out for yourself here and download the Storyline 360 project file here. To complete the activity, you end up interacting with three ‘picture as dial’ controls: To start the course, you need to turn the compass so its edge connects Point A and Point B Then, you have to turn the compass housing to the correct orientation to get your bearing While you’re doing this, the compass needle—which is also a dial locked in a disabled state—will oscillate slightly Creating my dial graphics I created the compass in PowerPoint and exported it as a large, hi-res PNG image. I doubled its height using Pixlr and used Storyline’s Convert to Dial feature to create a custom dial. Using the dial as a drag-and-drop This dial has four states, which are triggered by changes to the associated Compass_Base variable: Changes to the same variable also trigger events within the demo, effectively making this a drag-and-drop activity, but with a fixed axis. Unlike most drag-and-drops, though, it is accessible via the keyboard. Allowing the dial to turn in both directions In its default setting, a dial can only make one complete turn, which is limiting when you are trying to mimic a real-life object that can turn in both directions. To overcome this, the second dial in my demo has a 1440° rotation and its starting position is 687°—about halfway, just left of center—to match the appearance of the compass base. This dial can turn clockwise or counterclockwise for two rotations in each direction before coming to a stop. But that does make it quite tricky to use its position to calculate a bearing, as positions 0, 360, 720, 1080, and 1440 all point north. To compensate for this, I asked ChatGPT to write some custom JavaScript for me: // Function to calculate the heading function calculateHeading(compass) { // Calculate the heading with special handling for multiples of 360 var heading = 360 - (compass % 360); // Adjust heading for cases where it's 360 but should be 0 if (heading === 360) { heading = 0; } return heading; } // Function to adjust heading to 0 whenever it becomes 360 function adjustHeading(heading) { if (heading === 360) { heading = 0; } return heading; } // Get the value of the Storyline variable Compass and calculate Heading var Compass = player.GetVar("Compass"); // Assuming "Compass" is the name of your Storyline variable var Heading = calculateHeading(Compass); // Adjust Heading to 0 whenever it becomes 360 Heading = adjustHeading(Heading); // Set the Storyline variable "Heading" to the adjusted value player.SetVar("Heading", Heading); // Assuming "Heading" is the name of your Storyline variable And this is the result: With this code, I can tell if the compass housing is upside down even if it has been turned more than once. Pointing the compass housing south is a common mistake for novice navigators, but my demo will spot this and provide correction. Using animation to enhance the dial experience The third dial is purely for decoration. During the second part of the activity, I wanted the compass needle to move gently as you were turning the compass housing—just as it does in real life. This dial has a more limited rotation and range: I used ChatGPT again to create some custom JavaScript that makes the compass needle oscillate each time the compass housing is turned: // Function to randomly adjust Compass_Needle between 8 and 15, returning to 11 within 0.50 seconds function adjustCompassNeedle() { var randomValue = Math.floor(Math.random() * 8) + 8; // Generates a random number between 8 and 15 player.SetVar("Compass_Needle", randomValue); setTimeout(function() { player.SetVar("Compass_Needle", 11); // Return Compass_Needle to 11 after 0.50 seconds }, 500); } // Variable to store the previous value of Compass var previousCompassValue; // Function to handle changes in the Compass variable function handleCompassChange() { var currentCompassValue = player.GetVar("Compass"); // Get the current value of the Compass variable // Check if the Compass value has changed if (currentCompassValue !== previousCompassValue) { // Call the function to adjust Compass_Needle adjustCompassNeedle(); // Update the previous value of Compass previousCompassValue = currentCompassValue; } } And here’s a close-up of the result: Wrap-Up As you can see, there are lots of creative ways to use dials to produce all sorts of fascinating interactions! And I hope these insights about my project creation process give you ideas to try in your own work. As you might imagine, there’s quite a bit more going on in this demo beyond just dials—notably some Jump to Time–powered animations and an approach for controlling a Zoom panel with pause/play timeline triggers. So be sure to check out the project Storyline 360 file to see how the whole experience comes together. And please dial me up if you have any more questions! Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox. If you have questions, please share them in the comments.
