7 Most Popular Storyline 360 Examples & Downloads of 2023
E-Learning Heroes Community is the perfect place to get inspired by examples from both our amazing community members and our Articulate staff members. Below are the top seven Storyline 360 examples from 2023. 1. Storyline Comics Style Communication: Branched Scenario See how you can use interactive storytelling elements and branching techniques to teach learners the skills they need in this cool example. 2. Power of Self-Motivation Scrolling Experience Check out this completely unique interactive example that engages learners right from the start. 3. Office Safety Training Template Want to teach workplace safety in a memorable and interactive way? Check out this downloadable template to help kickstart your project. 4. Interactive Storytelling Template Learn how to leverage storytelling in Storyline 360 to help your learners apply their skills in a real-life scenario with this inspiring example. 5. Room Exploration Interaction Template Make searching an office, home, warehouse, store, or any other 2D environment feel more cinematic with this downloadable interaction. With the help of hotspots, triggers, and layers, learners can use the on-screen flashlight to help them discover clues. 6. Reset Drag-and-Drop Incorrect Choices Template Ever wanted to reset only the incorrect drag choices in Storyline 360? Use this starter template and supporting video tutorial to learn how to reset your own drag-and-drop interactions. 7. Employee Health and Wellness Check out this stunning example to see some of the immersive and custom learning experiences you can create with Storyline 360. Wrap-Up We hope these examples inspire you as you work on your next e-learning projects! Did we miss any of your favorites? Be sure to let us know in the comments below. You can view more article recaps from 2023 by checking out our latest compilation of articles here: All the Best E-Learning Heroes Content from 2023 in One Place. 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.7 Most Popular Rise 360 Examples of 2023
Rise 360, the web-based app for creating responsive e-learning that’s part of Articulate 360, makes it easy to create gorgeous, fully responsive e-learning quickly. And the E-Learning Heroes community is chock-full of stunning and creative examples that put Rise 360 to work creating all kinds of content. We’ve gathered the most popular Rise 360 examples of 2023 to inspire your next course. Check out these examples from your laptop, phone, and tablet, so you can see how great they look on any device. 1. Microlearning Retail Example If you work in the retail industry and would like some course inspiration, check out our latest retail microlearning example. 2. Class Syllabus Template Grab this template to provide your students or trainees with an online document that outlines introductory course information, expectations, materials, assignments, grading, contact details, and more. 3. Class Syllabus One-Pager Template Give your students or trainees a digital document that outlines basic course information by starting from this free template. 4. Virtual Training Presentation (Microlearning Template) Looking for a fast and easy way to create a sharp-looking presentation for your virtual training? Grab this microlearning template to get the job done in minutes. 5. Virtual Training Presentation (Full Course Template) If you like the microlearning version above but have a more lengthy session, this course is just what you need. 6. E-Learning Narration Guide Use this guide to find everything you need to know about producing engaging narration in a timely manner. 7. Interactive Short Story Check out this creative example that uses beautiful graphics and storytelling to create a seamless learning experience. Wrap-Up We hope these examples have given you the inspiration you need for your next project! And if you’re finding our Best of 2023 content helpful, head over here to check out the top Storyline examples and downloads. 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.7 Most Popular Rise 360 Examples of 2022
If you’re looking for course design inspiration, E-Learning Heroes is a great place to go. That’s because our amazing members generously share examples they’ve created with the community, so we can all learn from one another! Here are some of the most popular Rise 360 examples published in 2022, in case you missed them: 1. Implementing WCAG Guidelines for Instructional Designers Refer to this resource created by our very own Community Team to make your e-learning courses more accessible to all learners. 2. Interactive Sales Brochure See how Rise 360 empowers everyone to create gorgeous sales assets like this stunning interactive brochure built by Trina Rimmer. 3. Airline Innovation 101 Learn how to help others proactively bring their ideas to life in this infographic-style e-learning course. 4. Comics-Inspired Empathy Training Combine the storytelling powers of graphic novels and e-learning in this interactive example brought to you by Tracy Carroll. 5. Rise 360: Performance Support Demo This handy example by Allison LaMotte shows how you can easily use Rise 360 to create job aides or quick reference guides. 6. Mocktail Recipes Guide This example by Ron Katz shows how mixing and matching a variety of block types while still using a similar layout for each lesson can help learners easily find what they’re looking for and follow along. 7. Interactive Event Guide Check out this creative example by Bianca Woods to get ideas for building a custom conference app fast with the help of a tool you already have. Wrap-Up We hope these examples will get your creative juices flowing! And if you’re looking for more helpful content from 2022, don’t miss the articles below: A Year of Quick Tips & Tricks from Articulate Training Explore the 65+ Articulate 360 Features We Added in 2022 Your 10 Favorite General E-Learning Articles of 2022 10 Most Popular Storyline 360 Examples and Downloads of 2022 If we missed any other general e-learning articles that you found helpful over the past year, comment below and let us know what they are. And remember to follow us on Twitter and LinkedIn and come back to E-Learning Heroes for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Rise 360 or Storyline 360: Which One Should You Use for Your Project?
Ever since we launched Rise 360, customers have been asking me the same question: How do I decide whether to use Storyline 360 or Rise 360 for my e-learning project? This is what I usually say: Personally, I find that Rise 360 is perfect for most of my projects. It lets me create beautiful, responsive e-learning courses in a matter of hours. If I need a custom interaction or two, I’ll build them out in Storyline 360 and insert them into my Rise 360 course as blocks. And when I need to be able to customize my entire course down to the last pixel, I use Storyline 360. To help you better understand the kinds of projects that are best suited for each app, I pulled together some examples. Rise 360 Course Examples Rise 360 makes it easy to create lessons by mixing and matching different blocks—or stackable multimedia elements—to create a unique learning experience. Here are some examples of Rise 360 courses to give you an idea of the types of projects you could create in Rise 360: New Employee Orientation New Manager's Toolkit Sales Fundamentals Conflict of Interest Compliance Example Can You Talk Your Way Into Higher Pay? Driving in France What You Need to Know About Multi-Device E-Learning Common Workplace Injuries Training Schedule Template Training Needs Analysis 101 Rise 360 Course Examples with Storyline 360 Blocks If you’re creating a course in Rise 360 and realize that you need to create a custom interaction, no need to start over! Simply create your custom interaction in Storyline 360 and add it to your Rise 360 course as a block. Here are some examples of projects that seamlessly combine Rise 360 and Storyline 360: Space Travel–Themed Interactive Infographic Nursing Module Working Across Cultures How to Create E-Learning The Four Mindsets of Change Your Kidneys at Work The Mars Curiosity Rover Name That Breed If you’re looking for some inspiration for when to use the Storyline 360 block in Rise 360, check out these resources: When to Use the Storyline 360 Block in Rise 360 Three Ideas for Enhancing Rise 360 Courses Using the Storyline 360 Block Here’s How Course Designers Are Using Storyline 360 Blocks in Rise 360 Storyline 360 Course Examples Some projects call for a more tailored look and feel throughout—for example, if you want to immerse learners in a realistic scenario. Others require a lot of custom interactions. For those projects, you'll want to use Storyline 360. Here are some examples of courses where authors have leveraged the features in Storyline 360 to create a fully customized experience: How to Fight a Bear Follow Santa’s Instructions for Packing a Gift Movie Trivia Game Instructional Design Basics Review 101 Software Simulation Customer Service Scenario Multilingual Course with Text to Speech Further Reading Hopefully, these examples give you a clearer picture of the types of courses you can create in both Rise 360 and Storyline 360 so you can more easily decide which to use for your next project. To dig deeper into this topic, check out this article: How Pros Use Rise 360 and Storyline 360. Want to try out Rise 360 and Storyline 360 for yourself, but don’t have Articulate 360? Start a free 30-day trial. And if you found this article helpful, subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.10 Most Viewed Rise 360 Examples of 2021
One of the greatest things about the E-Learning Heroes community is that our members share their creative examples throughout the year. With all the inspiring content posted in our weekly challenges and examples hub, you’ll find everything you need to get your creative juices flowing. And when you’re ready to create and share your own Rise 360 project, you can either start from scratch or customize one of the many course templates. To highlight what’s possible and inspire your next course, we’ve gathered the most viewed Rise 360 examples of 2021. Read on and take the most popular projects for a spin! 1. Software Training Example See how to introduce your team to a new app with this practical example by Madison McCartney. 2. Spotting and Managing Burnout Help learners assess if they’re at risk of workplace burnout with this helpful course by Chris Foster. 3. Marine Motion Path Game This underwater-themed example by Lacey Wieser lets you test your marine life knowledge. 4. Fighting Climate Change Learn planet-saving tips with this interactive course by Ashley Park. 5. Inclusive Language Guide This useful example by the Community Team shares tips on communicating in a way that’s inclusive and respectful to all. 6. Animal Sounds Guessing Game Allison LaMotte invites learners to listen to and guess the noises made by different animals in this playful course. 7. How to Choose and Combine Instructional Methods Expand your knowledge of instructional design methodologies with this educational example by Alex Wilcox. 8. Instructions for Learners Make sure learners know how to access and interact with your content by using this introductory course example by Stan Dormer. 9. Continuing Education Course for Teachers This course for K-12 teachers by Matt Madsen walks through how to create more inclusive classrooms. 10. Healthy Debate Culture at Work See how disagreement can actually be a good thing when handled properly in this beautifully designed course by Teresa Moreno. More Resources Now that you’ve seen the most popular Rise 360 courses of 2021, we hope you’re feeling inspired and ready to take on the new year. And don’t forget to share your favorite projects in the comments below! Want more Best of 2021 content? Check out the top Storyline 360 downloads from the E-Learning Heroes community. Follow us on Twitter and come back to E-Learning Heroes soon for more helpful advice on everything related to e-learning.How I Made This Progress Meter in Storyline 360
Including a progress meter in your e-learning course is a great way to give learners visual feedback about how far along in the course they are. Progress meters can take many shapes and forms, but typically you’ll see a bar near the bottom of the slide that fills up as the learner moves forward in the course, like in the animated .GIF below. Click here to see the interactive version. It’s particularly useful to include a progress meter in longer courses, so learners can estimate how much longer they’ll need to finish the course and can then decide whether to finish up or come back later. Orienting learners also helps prevent them from feeling lost or overwhelmed due to having no clue as to where they are in a course. Thanks to slide numbers in Storyline 360, you can create a custom progress meter like the one above by adding a single trigger. Let me quickly walk you through how I created mine. 1. Insert & Format a Slider If you want the progress bar to appear on all your slides, you’ll need to put it on your slide master. To do that, open the view tab and click Slide Master. From there, open the insert tab, click Slider, and select one of the slider options. For this example, it doesn’t really matter which one you choose because of the formatting options you’ll apply later. Next, go ahead and insert a thin rectangle that’s the same length as your slide. This rectangle will be what fills up the progress bar as the learner advances through your course. With your rectangle selected, choose the fill color you want and select No Outline. When you’re happy with the formatting, right-click on the rectangle and choose Export Shape as Picture. Save your rectangle to an easy-to-find location—like your desktop—and give it a name that’s easy to identify. Then, click on the rectangle in your project, go down to the timeline, and click on the eye to hide it. We’ll use it again later, but for now we want to make sure it doesn’t get in the way. Now, select your slider, open the format tab, click Thumb Fill, select Picture, and browse for the rectangle you just saved. The next step is to adjust the size of your slider until the rectangle (or thumb) is entirely off the slide, as shown in the animated .GIF below. If you’ve set it up correctly, the rectangle (or thumb) should be completely off the slide. The part of the track that's on the slide should be empty but take up the entire width of the slide, like in the screenshot below: Once your slider is the right size, you’ll format it to look the way you want. For this example, you’ll choose No Outline for the thumb border ... … and No Fill and No Outline for the track fill and border. Next, unhide that rectangle you used to create the slider thumb. You’re going to use this rectangle to create the outline of the progress bar. For this example, get rid of the fill color and add a gray contour, so it looks like the screenshot below. Then move your slider and rectangle to the bottom of the slide and line them up. You want the rectangle to be slightly taller than the slider thumb—as pictured below—so you might need to adjust the height of your rectangle. Once your rectangle is the right height, center it on your slide. Finally, click on your slider, open the design tab, and change the end value to 100. 2. Create a Trigger Now that your slider is all set up, you’ll need to add a trigger to make it show your learner’s progress. Here’s what the trigger should look like: Note that the object should be the name of your master slide, so it might be different than what you see above. 3. Insert a Hotspot Next, you’ll want to add a hotspot to prevent learners from clicking on the slider and changing its position manually. To do that, simply open the insert tab, click Hotspot, and select the rectangle. Then, right-click on your hotspot and uncheck Show Hand Cursor on the hover option so learners don’t think there’s something to click on. If you’d like, you could stop here! Your progress bar should now be fully functional. However, if you want to take it further, move on to step four. 4. Add a Hover State (Optional) To take your progress bar to the next level, add the exact percentage of the course that’s been completed to the hover state for learners to see when they hover over the progress meter. To do so, open the insert tab, choose Slide Number, and click More in the drop-down menu. Then select Progress through project (or Progress through menu, if you’re using the menu order to number your slides) and click on the place you’d like to insert it on your slide. The percentage will appear in a textbox, like this: From there, you can format the text—change the color, for example—and move it to the exact spot you’d like it to appear, like I’ve done below: To make the hover state work, you’ll need to add a trigger since there’s a hotspot preventing the learner from interacting with the slider. Here’s what that trigger should look like: And that’s it! Now your learners can see how they’re progressing through your course. Here’s what the end result looks like. Keep in mind that this isn’t the only way to create a progress meter. Feel free to get creative! Want to download my file to better understand how I've set everything up? Pop on over to this page. More Resources Want to learn more about the slide number feature? Check out this article for ideas of ways to use this feature and this tutorial for a step-by-step guide on adding slide numbers to your project. If you want to try something you learned here, but don’t have Articulate 360, why not start a free 30-day trial? And be sure to 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).8 Microlearning Examples That Prove Less Is More
Microlearning is more than just a buzzword–it’s the future of e-learning. In today’s attention economy, grabbing and keeping your learners’ attention is no small feat. And it doesn’t help that these days learners are busier than ever before. Lengthy courses covering a lot of content in one sitting can overwhelm learners and lead to information overload. Instead of packing tons of content into a single course, why not split it up into a series of bite-size courses, aka microlearning courses? Learners prefer to digest content in small morsels and are more likely to engage with short-form content. Microlearning courses focus on one learning objective per course, with only “need to know” information, making them more effective. So now you’re probably wondering, how do I transform my long-form content into easy-to-digest mini-courses? Well, good news! The super-skilled members of the E-Learning Heroes community have got you covered with these eight microlearning examples. Check 'em out: Think it’s impossible to create microlearning courses that teach hands-on skills? Think again! Don’t believe us? Just take a look at this clever one-slide course by David Field on how to wire a three-pin plug. Explore the different systems in the body in less time than it takes to tie your shoes in this colorful example by Andrzej Jabłoński. Get up to speed quickly on Facebook, Instagram, and Twitter with this short and sweet Rise 360 course by Taylor Tomanio. Check out this medical-themed example by Angela Conrad to see how adding a Storyline 360 block to your Rise 360 course can provide the perfect format for your next microlearning course. Take note of how Sarah Hodge breaks down complex concepts into a bite-size course in this Storyline 360 project created for e-learning newbies. Discover the rhythms of the human heart in this brief but informative Rise 360 course by Richard Hill. Get inspiration from the simple structure of this Rise 360 mini-course by Allison LaMotte to jumpstart your next project. See how you can use Storyline 360 to create custom experiences for your microlearning courses in this creative example by Priyanka Chandel about writing postcards. Check out these two articles: What Is Microlearning? and Microlearning: How to Keep Your E-Learning Courses Short and Sweet to learn more. And if you’re still craving more course design inspiration, or if you just want to connect with other e-learning pros, visit the Building Better Courses forum.8 Business Use Cases for Microlearning
Are you excited to try out microlearning, but unsure when to use it? Below, we outline eight common workplace situations that benefit from a short-form course. Each situation includes a sample microlearning. At the end, learn how you can customize these templates for your own company and training needs. 1. Create Organizational Alignment To hit a business target, everyone needs to be moving in the same direction. Creating that alignment starts with clear, frequent communication of the shared mission, vision, and values. Microlearning can help. The following editable template shows how you can align employees through regular executive “micro” updates: Executive Update 2. Highlight HR Information, Notices, or Reminders Educating employees about annual events like open enrollment, tax season, and compliance training is a critical function of HR teams. The problem? Important announcements often get missed when they’re embedded in long paragraphs or endless emails. Grab the following templates to see how microlearning makes HR communications more digestible and engaging: A Quick Guide To Open Enrollment Internal Company Newsletter 3. Strengthen Company Culture and DEI Initiatives Fostering an inclusive company culture is a continuous process—not a one-time effort. A series of microlearnings can support your larger culture-building and DEI efforts. Check out the following examples for ideas on how to get started: Are You an Ally? Try Taking on These 5 Roles How To Identify and Stop Using Ableist Language Gossip-Proof Your Workplace 4. Streamline Business Processes You can also use microlearning to document and streamline business processes or workflows—such as employee onboarding or performance management. Notice how the following examples make it easy for employees to work through the steps of a process independently: New Hire Pre-Hire Checklist Performance Review and Feedback 5. Increase Security Awareness Most successful data breaches, phishing attacks, and other cybersecurity incidents are caused by human error. Adding refresher microlearnings throughout the year can fortify your defenses. See an example for safeguarding against phishing attacks below: Spot the Phish 6. Enhance Employee Wellness A successful business needs thriving employees. But employee wellness training often ends up buried under competing priorities. Microlearning makes it easy for employees to fit in short breaks for self-care throughout the workday. Check out these two wellness-related microlearning examples: 3 Desk Stretches to Instantly Improve Your Day 5 Tips for Better Naps 7. Provide Quick-Reference Guides Microlearning is the perfect resource for one-off training questions: Employees can quickly find the answers they need—when they need them. Below, we’ve created templates for product and software training. But you could easily create quick-reference guides for sales, customer service, and other teams. Get To Know [Name of Product] Software Training 8. Reinforce and Assess Key Takeaways Finally, who says you have to choose between a more sizable course and microlearning? Repetition aids retention. Consider following up longer training sessions with a microlearning quiz, scenario, or summary. The examples listed below demonstrate how you might do this: Can You Recover From a Workplace Mistake? Training Refresher Wrap-Up There’s no shortage of creative ways you can use microlearning to achieve your business training objectives. The examples above are just a starter list. You might also check out submissions to one of our weekly community challenges, 40+ Microlearning Examples Created in Rise 360 #407. Interested in customizing one of these examples for your team? If you’re an Articulate 360 subscriber or trialer, you can edit all of the examples linked throughout this post by choosing the course from our Rise 360 microlearning content templates. Here’s a short video showing how to do that: What’s the latest microlearning course you’ve created? Tell us about it in the comments—and feel free to ask any questions you might have! Like this article? Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and Twitter.6 Software Training Examples That Will Make Learners “Screen” With Joy
Employees often come to an organization with a wide range of technical experience. But one thing is certain—software training empowers employees to perform more efficiently and confidently. For intuitive software, a simple screencast can orient your employees to an app’s layout and features. Other times, you might need to give learners a more hands-on learning experience with a simulation that creates a risk-free practice environment. In either case, if you need some inspiration for creating software training, check out our favorite community examples. From screencasts to simulations, you’ll find creative solutions to spark your next project! Rise 360: Project Management Software Training Use labeled graphics, multimedia, and interactive blocks to give learners both an introduction and inspiration for how to use new software like Madison McCartney does in this Rise 360 course. Storyline: E-Learning Heroes 101 Guide learners through the step-by-step process to create an E-Learning Heroes community profile with this helpful simulation from Allison LaMotte. Storyline: Audio Editing Simulation Get learners comfortable using audio editing tools before even downloading any software, thanks to this simulation by Josh Petermann that includes both a view and try mode. Storyline: Learn Triggers Software Simulation Safely introduce new software to learners and let them practice risk-free, like in this handy simulation by Richard Watson. Storyline: Review 360 Software Simulation Replicate the experience of using new software by taking inspiration from this helpful Review 360 software simulation created by the Community Team. Storyline: Video Editing Controls Simulation Give learners a realistic opportunity to practice interacting with video editing software just as Dan Sweigert does in this guided simulation. Wrap-Up Hopefully, these examples spark ideas for how you’ll empower learners with your next software training. Our generous community members share their projects in weekly challenges, downloads, and examples, so check back regularly for new inspiration. What type of software training do you plan on tackling next? Let us know in the comments! To learn more about creating software training, check out these articles: The Difference Between Screencasts and Software Simulations 4 Tips on Creating Software Tutorials in Rise 360 2 Reasons to Use Storyline 360 for Software Simulations Everything You Need to Know About Creating Software Simulations with Storyline How to Decide Which Articulate 360 App to Use for Screen Recording Follow This Process to Create Software Simulations and Systems Training Like a Pro Follow us on Twitter 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.Blow Your Learners Out of the Water with This Battleship E-Learning Game
Quizzing is a huge part of e-learning course development, because you want to know if learners have understood the material. That makes sense! But that doesn’t mean your quizzes have to be boring. Take this e-learning battleship game, for example. When you strip away the game elements, it’s just a simple quiz. But to your learners, the game elements can mean the difference between a snoozefest and a fun and meaningful learning experience! In this article, I’ll show you how I built this from A to Z. Don’t be put off by the number of steps—it’s a lot easier than it looks. If you’ve been wanting to give e-learning games a go, but have been too intimidated by triggers and variables, this step-by-step tutorial is the perfect jumping-off point. The detailed explanations and screenshots will ensure you get it right the first time. Here we go! 1. Create Player Grids and Ships First, you’ll create your gameboard. To do this, just insert the number of squares needed using the “insert shapes” feature, and arrange them in a grid. The squares on the left (in the learner’s grid) should have no fill color. The squares on the right (in the enemy’s grid) should have the same fill color as the slide background. I’ll explain why later on in this article. Before moving on, you should create a naming convention for your squares. This will make the rest of the process much easier. In this example, I’ve given each row a letter and each column a number, as pictured below. The left grid squares are named as follows (from left to right and top to bottom): W1, W2, W3, W4, X1, X2, and so on. Next, design your ships using a combination of shapes, or insert them as images. The number and size of your ships depends on how many quiz questions you’d like to include. Each player should have the same number of ships and squares overlapped. (In my example, each player has three ships that span eight squares, so I have eight total questions.) Then place your ships on the grids as desired. When the learner clicks on these squares, they will be brought to the corresponding question slide. Once your ships are in place, make a list of all the squares the learner’s ships and the enemy’s ships are on. My list looks like this: We’ll use this list later, so keep it handy! 2. Add Visual Feedback to Squares Now that your player grids are set up, it’s time to add states to your squares. These serve as visual cues to the learners about how they’re doing. The real Battleship game offers only two possibilities: players either hit or miss their enemy’s ships. For the e-learning version, I created this third option: If learners find the ship but get the corresponding question wrong, they don’t get the points. For each square I created custom states named hit (correct answer), miss (no ship is present), and misfire (incorrect answer). If you’re not sure how to add states to an object, check out this tutorial before moving on. For the hit and miss states, I inserted a colored explosion shape—red for hit, blue for miss—and changed the fill color of the rectangle to None, so the square is transparent. Note that all of the learner squares are already transparent, so only the enemy square hit and miss states needed to be adjusted at this level. You’ll see why later on. For the misfire state, I combined a circle and four lines to create a crosshair icon. Here’s a quick look at my square states: Since the squares in the learner’s grid are transparent and the squares in the enemy’s grid have a fill color, the states look slightly different. 3. Add Interactivity to Empty Enemy Squares Now let’s add the interactivity, starting with the enemy squares without ships on them. For each of these squares, we’ll add a trigger so that when the learner clicks, the miss state will appear. (If you’re new to triggers, read this tutorial to see how they work.) Here’s what it should look like: To add this trigger to all of the other empty squares on the enemy’s grid, simply select the trigger, click Copy Trigger, select all of the other empty squares, and choose Paste Trigger. It’s that easy! 4. Create Variables for Enemy Squares with Ships Remember that list of squares with ships on it we made earlier? It’s time to get that out! We’re going to create a number variable for each of the squares in the enemy’s ships column with a default value of 1. (To learn more about adding variables, see this tutorial.) Once I created all of my variables, the variable manager window looked like this: These variables will allow us to change the state of the squares on the player grids to hit or misfire, depending on the learner’s answers. We’ll see how in Step 5. 5. Insert Your First Quiz Slide The next step is to create your first quiz slide. I chose to create a freeform pick-one question, but you can use any kind of question you’d like. Use the same name for your quiz slide as for the corresponding square. The first step in making player grids function correctly is to adjust the variables created earlier by adding a trigger on each feedback layer. On the correct layer, insert a trigger that adjusts the variable with the same name to add 1 when the timeline starts (in this example I’m on slide A2, so I’ll adjust variable A2). It should look like this: You’ll also want to change the “jump to” trigger on the continue button so when your learner clicks on it, they go back to the gameboard instead of to the next slide. On the incorrect layer, we’re going to add a similar trigger, except this time we’ll subtract 1 instead of adding 1. It should look like this: Don’t forget to change the “jump to” trigger on the incorrect layer as well, so learners go back to the gameboard when they click Continue. 6. Duplicate Quiz Slides Now that you’ve created one quiz slide, you can duplicate it for all of your other questions, assuming you’re using the same question type. Once you’ve duplicated the question slides, change the titles so they match the names of the different squares, then change the variable referenced in the trigger on both the correct and incorrect slides using the drop-down menu. Once you’ve done that for all of your question slides, you’re ready for Step 7! 7. Bring Your Gameboard to Life It’s time to go back to the gameboard and make the magic happen. First you’ll need to link your squares to your question slides. To do this, set up a trigger with a condition for each enemy square with a ship on it (column 2 on your list). The trigger should jump to the corresponding slide when the user clicks, if the state of the square is equal to normal. (Click here to find out more about trigger conditions.) It should look like this: Remember, you can use the trigger copy/paste buttons to get this done faster. Just make sure to change the slide reference so the button leads to the correct question. Next we’re going to add triggers to make the squares with ships on them change states (hit or misfire) depending on the learner’s answer. For each of these squares (see column 2 of your list once again), you’ll create two slide triggers with conditions, with an optional third trigger. Slide triggers rely on the slide’s timeline to make something happen. (To learn more about slide triggers, click here.) The first slide trigger will adjust the state of the square to misfire when the timeline starts if the value of the associated variable is equal to 0, as pictured below. This trigger will ensure that when a learner responds incorrectly, they will see the crosshair icon we created earlier. This next slide trigger will do the opposite: show the explosion icon when the learner responds correctly. It’s set up in almost exactly the same way, but this time you’ll have it adjust the state of the square to hit when the timeline starts if the value of the associated variable is equal to 2, as you can see below. The third slide trigger is optional. If you do set it up, then when the learner responds incorrectly, not only will they not hit their enemy’s ship but their enemy will hit their ship. In order to make this happen, you’ll have to link each enemy square with a ship on it to one of the learner’s squares with a ship on it. To do this, take out your list once again. You could just link the ships in the order they are written on your list, or you could randomize, like I did. It’s completely up to you. This is how I did it: Once I decided which squares to link, I duplicated the first slide trigger and changed the state to misfire, changed the object reference from A2 to X3, and changed the state to hit, as you can see in the screenshot below. Now when the learner answers incorrectly, they’ll see a crosshair on one of their enemy’s ships and an explosion on one of their ships. Phew! Your gameboard is set up. Time to select all of the ships, then right-click and select Send to Back to ensure that the states on the squares appear on top of the ships instead of underneath them. Since the squares on the learner’s grid are transparent, they can still see their ships, while the enemy squares have a fill, so their ships are hidden until the learner uncovers them. Last but not least, change the slide properties to "resume saved state" so that when the learner comes back to the gameboard after answering a question, the state changes remain intact. 8. Set Up Results Slide Next, insert a graded results slide. Make sure all of the questions in your project are selected and adjust the passing score. For my quiz, I chose 62% because I wanted the learner to have to get five out of eight questions correct to pass. For my results slide, I unchecked the “show passing score” and “review quiz” options and selected the “retry quiz” option. I only wanted the points to show, not the percentage, so I deleted the score percent variable reference, leaving only the score points variable reference. Then I deleted all of the text labels on the base layer and the success layers, inserted my own, and adjusted the layout. Then I created a true/false variable with a default value of false; this allows me to reset my gameboard if the learner wants to try again. I then added a trigger to the retry button to change the value of this variable to true when the user clicks. I also added a trigger to reset the value of each of the other custom variables to 1, so that the states on my gameboard squares will work as they did the first time around. Remember, you can use the copy/paste trigger icon to do this more quickly. If you use that method, then all you have to do is select the appropriate variable from the drop-down menu. Once you’ve added all of the triggers, you’ll want to adjust the “jump to” trigger so that it takes the learner back to the gameboard. You’ll also want to make sure that this trigger is the last trigger in the list. If it isn’t the last one in the list, the learner will be brought to the gameboard prematurely, before all of the variables are adjusted, as the triggers are executed in order from top to bottom. If that happens, the gameboard won’t be reset when they arrive. 9. Add “Game Over” Message Now it’s time to add a layer on your gameboard to let learners know when they have found all of the enemy’s ships. On my layer, I’ve added a rectangle to cover the text on the base layer, some explanations and instructions for the learner, a button to take them to the results page, and an arrow to draw attention to the button. On my button, I’ve added a trigger to hide the layer and jump to the results slide when they click. That way, if they decide to try again, this layer will not appear when they return to the gameboard. Back on the base layer, add a slide trigger to show the layer when the states of all of the enemy squares with ships underneath are not equal to normal. That way, once the learner has clicked on all of them (meaning the states are now either hit or misfire), the “game over” layer will appear. 10. Finalize Gameboard Reset Almost there! To force the enemy squares to reset, add a slide trigger changing the state of all of the enemy squares (with and without ships on them) and all of the learner squares with ships on them to normal if the value of the retry variable is equal to true. That way, if the learner decides to give it another try, the gameboard will be blank. The last step is to add a slide trigger to change the retry variable back to false, so the gameboard doesn’t continue to reset itself each time the learner answers a question and comes back to the gameboard. Make sure that this trigger is the last in the list of triggers, just before the list of object triggers. Otherwise, the value of the retry variable will be changed to false too early, and the board will not reset correctly. And there you have it: your very own e-learning battleship game! I hope you had as much fun creating it as I did. Pat yourself on the back; your learners are going to love it. If you liked this example but don’t have time to build it yourself, no problem! We’ve made it available for free: download here. Did this article light your fire for gamification? Check out this series of articles, examples, and downloads for all the gamification tips and inspiration you’ll ever need. Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.
