Using Interactive Calculators in E-Learning #430
Financial Calculators in E-Learning #430: Challenge | Recap Using variables to capture and display a learner’s name is one of the most common ways to practice working with text variables. When you’re learning number variables, there’s no better way to work with basic operations than to build a simple calculator. With Storyline variables, you can easily build simple or complex equations right into your project. And that’s what this week’s challenge is all about! Calculator Example Check out David Charney’s calculator, which lets learners perform math and calculations right in your project. View the example | Download Square Root Calculator Check out three ways to calculate square roots in Storyline in this dynamic example by Alphonso Hendricks. View the example | Download Simple Calculator Go old school with a classic example by Dave Mozealous. It’s the first fully-functional calculator created in Storyline, and shows you that the sky’s the limit with variables! View the example | Download Resources Storyline 360: Working with Variables Storyline 360: Adding Variable References Storyline: What "Object Loses Focus" Means E-Learning Challenges Use Learner's Name in E-Learning Course #222: Challenge | Recap Using True/False Variables in E-Learning #271: Challenge | Recap Using Variables to Compare Learner's Answers #292: Challenge | Recap Random Number Variables in E-Learning #278: Challenge | Recap On-Demand Training Getting Started with Variables in Storyline 360 Using Number Variables in Storyline 360 Challenge of the Week This week, your challenge is to build a simple calculator that can be used in e-learning. New to variables? Try starting with one of the free calculator templates below. Depending on your comfort level, you can redesign one of the calculator templates or use it as a guide for creating your example. Comfortable working with variables? Try adding multiple variables, sliders, and interactive elements to create a more advanced calculator. Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. Last Week’s Challenge: Before you budget time for this week’s challenge, check out the alt text examples your fellow community members shared over the past week: Using Alt Text in E-Learning RECAP #429: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Next Week’s Challenge Next week's challenge (9/8/23): Bullet Point Makeovers or Making Bullet Points More Engaging. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.How Can Designers Use Interactive Videos in E-Learning? #414
Interactive Video in E-Learning #414: Challenge | Recap Using videos in e-learning is an excellent way to grab learners' attention and develop engaging and relevant e-learning content. Incorporating interactive elements such as cue points, hotspots, buttons, and markers into videos allows you to elevate typical e-learning quizzes or scenarios into more engaging interactions for learners. And that's what this week's challenge is all about! Here are a few examples to give you an idea of what’s possible. Video Interview with Branching Quiz Questions This is one of my favorites. Amar first shared this example in the video interview challenge. I really like how this project alternates between presentation and quizzing modes. View the interactive video quiz Video as Answer Choices I like how Nick uses looping video clips as answer choices in the video quiz example. This approach is great for moving from static, text, and image quizzes to video-based assessments. View the video choices example Video Interviews Here's an older video interview I recorded with my daughter. I used an iPhone 5 to capture the audio and video and some background paper from Savage. The original idea was to make the pink paper fill the entire background, but my kid moved around so much that I had to cover part of the background. View the video interview example Videos to Show Progress in Quizzes Here’s a different take on using video in quizzes. In this example, Jonathan uses background video to show learner progress. Answer the question correctly, and you’ll see an upward-moving video taking you to the next floor. Conversely, answer the question incorrectly, and the video shows you moving down to the bottom, where you can try again. Brilliant. View the video background quiz example Challenge of the Week This week, your challenge is to share examples that show how interactive video can be used in e-learning. You can reshare a previous example or build something new this week. Related Challenges We’ve hosted several interactive video challenges over the years. Below you’ll find some recent challenges and recaps to help you get started. Cloning Yourself in E-Learning Video #289: Challenge | Recap Interactive Video Quizzes in E-Learning #258: Challenge | Recap Interactive Video Quizzes in E-Learning #157: Challenge | Recap Video Interviews in E-Learning #94: Challenge | Recap Resources Webinar: Create Interactive Video Quizzes with Storyline 360 How to Create Interactive Video Quizzes in E-Learning Interactive Video Made Easy Convert Your Bullet Points to Interactive E-Learning with Video Create Interactive Videos with These Storyline 360 Features Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. Last Week’s Challenge: Before you interact with this week’s challenge, check out the enlightening ways course designers use lightbox slides to provide performance support to learners: Using Lightbox Slides in E-Learning #413: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.How are Designers Using Lightbox Slides in E-Learning? #316
Using Lightbox Slides in E-Learning #316: Challenge | Recap Lightbox slides give course designers an elegant solution for presenting learners with important resources without leaving the current slide. Some of the most common use cases for lightbox slides include: Job aids and handouts Tables of contents and menu navigation Extended resources and reading lists Video how-tos and other types of media How Do Lightbox Slides Work? Lightbox slides are loaded on top of the current slide and resized to 80% of the original slide. To help learners focus on the lightbox content, the main slide background is dimmed, emphasizing the lightbox. The best part about Storyline's lightbox slides is that any slide in your course can be used as a lightbox slide. This means any slide in your course (menu, dashboard, quiz results, interaction) can double as a lightbox slide. There are dozens of practical uses for lightbox slides. Let's look at a couple of examples. Workplace Learning & Performance This meet-the-team interaction from Joe Waddington is a fantastic example of how lightbox slides can reuse content across an entire course. Each team member profile presents both individual and shared information. Personal info like one's name, job title, bio, and StrengthsFinder profiles are presented on the slide. But the shared info, the StrengthsFinder profile definitions, are loaded as lightbox slides since they're generic descriptions of each strength. View project | Learn more & download | Joe Waddington DiSC Insights for Managers I like to share Jodi's example in my lightbox webinars because it shows how lightbox slides can be used to present content while helping learners remain focused in the moment without jumping out to new slides or scenes. View project | Download | Jodi Sansone Challenge of the Week This week, your challenge is to share one or more examples that demonstrate how lightbox slides can be used in e-learning courses. Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s challenge, check out the interactive timeline examples your fellow community members shared over the past week: Interactive Timelines in E-Learning RECAP #315: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.Chunking Content with Scrolling Panels #415
Scrolling Panels in E-Learning #415: Challenge | Recap When working with lengthy text blocks in your course design, you can do a few things to ensure the composition is manageable and easy to read: Break up the text into smaller paragraphs. Use typographic hierarchy to ensure the most important information stands out. Use whitespace to create visual interest and balance. But there may be times when you still may need a little extra help. That's where scrolling panels can help. Scrolling panels are a great option when you're looking for ways to present large images, lengthy text blocks, or other graphics that don't fit well on a slide. For example, you can divide a long list or set of instructions into manageable chunks by placing each piece of content in its own text box within the scrolling panel. And managing large blocks of content is what this week's challenge is all about. Challenge of the Week This week, your challenge is to share an example to show how scrolling panels can be used to present content that doesn't fit well on the slide. Resources User Guide: Working with Scrolling Panels Scrolling Panels in E-Learning #169: Challenge | Recap Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you slide into this week’s challenge, check out the creative ways designers use interactive video in e-learning: Webcam & AI Avatars in E-Learning RECAP #410: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Next Week’s Challenge Next week's challenge #415 (May 05, 2023): Using AI in E-Learning #415. This includes AI images, characters, graphics, chat, content, and more. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.Using Variables to Create Question-and-Answer Activities #392
Interactive Questions and Answers #392: Challenge | Recap If you're looking for a way to liven up your next lesson, try out some interactive question-and-answer activities. These activities are a great way to engage learners and get them to think critically about the content. And they're also a great way to practice working with variables. What do Q&A interactions look like? For an idea of how Q&A interactions work, check out this example Sarah recently shared: View the example | Download the project How do Q&A interactions work? The key is to use Storyline's text-entry fields to capture learner input and variable references to display the learner's answers. And with the new print slide trigger, learners can easily print their responses. Comparing Learner's Answer with an Expert's Recommendation This week's challenge is similar to the comparison challenge we hosted 100 challenges ago. In the comparison challenge, learners typed their answers in a text-entry field and could compare what they typed to an expert's recommendation. You can check out the challenge recap post to view the examples. And below is a quick tutorial on how it works. Challenge of the Week This week, your challenge is to work with text variables and variable references to create an interactive question-and-answer activity. If you’re new to Storyline or have never worked with variables, don’t worry. We’ll help you out. Use the comments section below to tell us what you’re like to build, and we’ll help you out. Text variables are one of the easiest ways to get started with variables. Resources User Guides Storyline 360: Print Slide Trigger Storyline 360: Adding Variable References Storyline 360: Working with Variables Storyline 360: Working with Data-Entry Fields Webinars Getting Started with Variables in Storyline 360 Using Text Variables in Storyline 360 Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s challenge, check out the graphic design video tutorials your fellow community members shared over the past week: E-Learning Graphics Tutorials RECAP #391: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.Customizing Storyline Interactions for Rise 360 Templates #306
Using Storyline Blocks in Rise 360 #306: Challenge | Recap The great thing about Rise 360 is that it’s super-fast and easy to create fully responsive e-learning courses. The best part about Storyline is that you have endless possibilities to create whatever you can imagine. And with Storyline blocks in Rise 360, you get the best of both worlds: custom interactivity in a fully responsive course. In a previous challenge, we looked at inserting Storyline blocks into Rise 360 courses. We had just released the Storyline block, and this challenge provided designers an opportunity to practice working with this exciting new block type. As always, the examples shared were terrific. Building a Cohesive Visual Design with Storyline Blocks With Rise 360, the blocks are visually designed to always look consistent and intentional. A common design challenge is applying the same intentional designs to your Storyline interactions. Since Rise 360 uses light and minimalist designs, your Storyline interactions should also share similar design elements. This card trick demo from Own Holt is an excellent example of customizing Storyline interactions to align visually with Rise 360 blocks. View the example | Owen Holt Using Rise 360 Templates A great way to practice designing Storyline interactions for your Rise 360 courses is to start with the built-in, customizable templates. The templates include relevant headings, imagery, and interactions. This makes it easy for you to focus on your Storyline interactions. Challenge of the Week This week, your challenge is to share an example demonstrating how Storyline blocks can be customized and used in Rise 360. You can use your own content or start with one of the Rise 360 templates. Articulate Training Looking to learn more about using Storyline blocks in Rise 360? Check out this on-demand webinar to learn how to set up your Storyline interactions to use in Rise 360. Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: To help you rise to this week’s challenge, check out the interactive cooking examples your fellow challengers shared in last week’s challenge: Online Cooking Recipes and Interactions #305: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.Creating Animated Button Styles and Effects in E-Learning #285
Animated Buttons in E-Learning #285: Challenge | Recap Animated button effects are one of the best ways to prompt learners to touch the screen. From animated submit buttons to the despised next button, there are countless designs, styles, and effects to choose from. You can pack a lot of engagement into three basic states: How to Create Animated Button Effects in Storyline 360 By default, animations can’t be added to existing states. To enable animation effects, you first need to add an extra shape to the state you want to animate. If this sounds confusing, don’t worry. I recorded a quick video to show you everything you need to know. View the tutorial on YouTube Animated Button Example and Practice Slide Here’s a simple example to help get you started. I included a practice slide with ready-made shapes that you can use to practice adding different animation styles. View the example | Download the source Using Animated Button Effects with Characters Guess what? You’re not limited to using the animation effect on buttons. The technique works really well when you want to create subtle or soft transitions between object or character states. Here’s a good example of how animated states works with characters in Storyline 360. View the example | Download the source When you check out the source file, you’ll see the timeline example doesn’t use the animated states effect. The animation effects are created by applying entrance and exit animations to multiple characters on the slide. This is a good example of where it’s easier to create and manage everything on the timeline rather than adding the animation to each state. Challenge of the Week This week, your challenge is to show one or more examples of animated button effects. Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work. Using Storyline for this week’s challenge? Please consider sharing your .story files. Button graphics make popular giveaways and the source files will help a lot of users get up to speed with more advanced button concepts. Not using Storyline? No problem! You can mock up your 3-state buttons designs in PowerPoint or any other tool. I'm mostly interested in seeing your creative button ideas. How are Animated Button Effects Used in E-Learning? Animated Button Effects #89: Challenge | Recap Looking for more ideas and source files? Check out the creative examples shared in our first animated buttons challenge. The challenge is almost five years old but the examples are still amazing. Resources The Ultimate Guide to Buttons in Storyline 2: Fantastic resource on using buttons in Storyline 2. Tips for Creating Great Buttons That Stand Out: Bookmark this article for tips on common button characteristics and ideas for creating engaging buttons. E-Learning Icons: Show and Share Your Favorite Styles #78: Icon challenge with some great tips and examples for creating your own graphics. In Defense of Eye Candy: Great article that makes the case for design and beauty in web interfaces. The same research applies to the types of graphics we build in e-learning. Articulate Training Webinars Tom recently hosted a training webinar that shows you everything you need to know about creating animated buttons in Storyline 360. View the Articulate Training webinar recording Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s animated button challenge, check out the interactive ADDIE examples your fellow challengers shared over the past week: Using the ADDIE Model in E-Learning #284: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.Using Dials and Sliders to Select E-Learning Characters #311
Using Sliders with E-Learning Characters #311: Challenge | Recap Using characters in e-learning courses is one of the easiest ways designers can personalize the learning experience. In a previous challenge, we looked at different ways learners can choose their avatars. Character selection techniques shared include text entry, drag-and-drop, click-to-select, surveys, dials, and sliders. Regardless of the technique, you’ll need to work with variables to track the learner’s choice and display the correct character throughout the course. Selecting Characters Using Sliders in Storyline 360 If you haven't worked with variables, dials and sliders make the process a little easier to get started. When you insert a dial or slider, Storyline automatically creates a number variable for you. Thanks, Storyline! As you drag the slider, the variable's value is adjusted based on the range you define. Based on the number variable's value, you can perform any number of actions such as jumping to slides, personalizing feedback, and identifying which character to use throughout the course. I put together a simple demo and source file to help you get started. View example | Download Challenge of the Week This week, your challenge is to share an example that lets learners choose their avatar using either a dial or slider. You don't have to create two examples. Choose either a dial or slider to use in your demo. If you have time, you're welcome to create two versions of your example using one of each. Please consider sharing your source file this week. Resources Webinars: Getting Started with Variables in Storyline 360 Using Number Variables in Storyline 360 Using Text Variables in Storyline 360 Using True/False Variables in Storyline 360 5 Ways to Personalize E-Learning Courses User Guide: Storyline 360: Working with Variables Storyline 360: Adding Variable References E-Learning Challenges: Use Learner's Name in E-Learning Course #222: Challenge | Recap Using True/False Variables in E-Learning #271: Challenge | Recap Using Variables to Compare Learner's Answers #292: Challenge | Recap Random Number Variables in E-Learning #278: Challenge | Recap Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dial into this week’s challenge, check out the creative ways the glassmorphism design style can be used in e-learning: Glassmorphism Design in E-Learning #310: Challenge | Recap Wishing you a great week, E-Learning Heroes! New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.Interactive Coloring Book Activities in E-Learning #323
Interactive Coloring Books in E-Learning #323: Challenge | Recap Interactive coloring books may not be your go-to interaction for most e-learning projects, but they are a fun way to get learners to interact with the screen. They're also a fantastic way for course designers to sharpen their course-building skills by working with multiple triggers, states, and variables. Let's look at a few examples to get a better idea of how these interactions work. Changing Colors with Click Events Using click-and-reveal events to change object colors is probably the most straightforward and intuitive approach because it simulates what users expect to do in the real world. Choose a color and then select the part of the illustration you want to color. And here's a fun example to help get you started. View project | Download | Dan Graham | Website | @EzLearnin Changing Colors with Drag-and-Drop In this example, click events are combined with drag over events to change objects' colors. The way this works is really cool. First, you click one of the tree ornaments to select it, and then you drag the eyedropper tool over the color swatches to change the color. I like this example because it shows another way to create these types of interactions. View project | Learn more & download | Paul Alders Changing Colors with Dials Here's a fantastic example that uses interactive dials to adjust color values on an object. The chameleon object contains multiple custom states that change based on the combined value of the dials. View project | Learn more | Jackie Van Nice Basic Drawing Book Here's another example I found when I was putting together this challenge. Even though it's a simple example, I'm thrilled I found it because it's ideal for anyone who's just getting started with this type of interaction. View project | Learn more & download | Chibuikem Nwani Challenge of the Week This week, your challenge is to share an interactive coloring book or similar activity that lets users customize the colors in one or more on-slide graphics. Keep in mind that this type of activity can be designed with either basic states or variables. You’re welcome to use one or both techniques in your example. Last Week’s Challenge: Before you sharpen your e-learning crayons, check out the visual storytelling examples your fellow challengers shared over the past week: Interactive Photo Collages and Visual Stories #322: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.Digital Magazines and Interactive E-Learning #58
Digital Magazines for E-Learning #58: Challenge | Recap The Daily My all-time favorite digital magazine was The Daily. It did a really great job integrating video, multimedia, embedded interactions, and clickable graphics into news stories. Unfortunately, The Daily closed in late 2012. You can view a video overview of the app on YouTube. WIRED Another magazine app I subscribe to is WIRED. They don’t include as much multimedia as The Daily, but they do a really good job re-using interactive templates. National Geographic I haven’t looked at this app in a while but they’re always mentioned as one of the better interactive magazines. Last week Kimberly Bourque shared some screenshots from a recent issue. Subscription: activated. Challenge of the week This week your challenge is to design a digital learning magazine. Resources For inspiration, check out some of the more popular digital magazines. Magazine apps: WIRED Magazine iPad | Android National Geographic Traveler iPad | Android Oprah Magazine iPad | Android Video overviews of digital magazines: National Geographic Magazine Introducing Polo Basics for iPad The Daily Blog posts: How to Build an E-Learning Template with No Money Down How to Build an E-Learning Template in 30 Seconds Share your e-learning work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness. Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example. Last week’s e-learning challenge: E-Learning Challenge #57: Challenge | Recap New to the e-learning challenges? The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
