How Are Designers Using Toggle Buttons in E-Learning? #460
Toggle Buttons in E-Learning#460: Challenge | Recap đ Challenge of the Week This week, your challenge is to share an example that shows how toggle buttons and switches can be used in e-learning. You can create a simple example using normal and selected states with button sets or build something more advanced using variables. Let us know if you get stuck or need help with your project. 𧰠Resources E-Learning Challenge #97: 35+ Wicked Toggle Button Effects for E-Learning Designers Video tutorial: Here's how you can create a toggle button effect using Storyline's âš 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 switch to this weekâs challenge, check out the creative ways your fellow course designers use photo collages to create interactions: Interactive Photo Collage ExamplesRECAP#459:Challenge|Recap đ New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. Iâll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. đ Upcoming Challenges Challenge #461(05.10): Interactive Podcasts. SeeELC364for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills. Challenge #462(05.17): Click. Hover. Drag. SeeELC144for a general idea of what we're doing. đš2024 Articulate User Conference Call for Proposals Weâre now accepting proposals for this yearâs in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.How are You Using Drag-and-Drop Interactions in E-Learning? #468
Using Drag-and-Drop in E-Learning#468: Challenge | Recap If thereâs one e-learning interaction that belongs in every instructional designerâs toolkit, itâs drag-and-drops. Drag-and-drop interactions are a fun way to engage learners and encourage them to interact with the screen. Theyâre also one of the most flexible interactions you can create. So, whether youâre designing straightforward question slides or custom freeform slides, drag-and-drop interactions are one of the best ways to get learners to stop, think, and interact with the content. And thatâs what this weekâs challenge is all about. đ Challenge of the Week This week, your challenge is to share a drag-and-drop interaction to show how they can be used in e-learning. You can use any authoring tool you like and make it as simple or custom as you have time for. Note: Since Storylineâs drag-and-drop interactions arenât currently keyboard accessible, they can create serious barriers for learners who rely on keyboard navigation or use screen readers. Check out the following on-demand training for some ideas on creating accessible drag-and-drops: How to Create an Accessible Drag-and-Drop Interaction in Storyline 360 𧰠Resources User Guide Storyline 360: Drag-and-Drop Questions Related Challenges: Drag-and-Drop Practice Activities#380:Challenge|Recap Drag-and-Drop Sorting Activities#439:Challenge|Recap Webinars: How to Build Drag-and-Drop Interactions in Storyline 360 5 Ways to Customize Drag-and-Drop Interactions 6 Ways to Customize Drag-and-Drop in Storyline 360 Discover six creative techniques every course designer needs to know to customize their drag-and-drop interactions in Articulate Storyline 360 View on YouTube âš Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a newthreadand 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#ELHChallengeso your tweeps can follow your e-learning coolness. đ Last Weekâs Challenge: While you're dragging through the ideas for this week's challenge, check out the 360° image interactions your fellow challengers shared over the past week: Using 360° Images in E-Learning RECAP #467: Challenge | Recap đ New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. Iâll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article.Creating Immersive Learning Experiences with 360° Images #467
Labeled graphics interactions are one of the most popular interactions because theyâre easy to create and only need a single image to turn static visuals into interactive, explore-type activities. Similarly, 360° images offer the same ease of creation but on a whole new level. They bring static images to life, allowing learners to explore real-world environments as if they were actually there. And thatâs what this weekâs challenge is all about! đ Challenge of the Week This week, your challenge is to show how 360° images can be used in e-learning. If you're a Rise 360, the 360° images feature is a fantastic way to enhance your courses by using Rise 360's Storyline blocks. đïž Looking for 360° Panoramic Stock Photos? Storyline 360 supports equirectangular panoramas in all standard image formats for creating 360° image interactions. Here are some places you can find royalty-free images: Pixabay 360Cities Flickr Pixexid đž 360°Degree Cameras Here arefour of the most popular 360° cameras: Insta360 ONE X2andInsta360 X3 Ricoh Theta Z1 GoPro MAX Ricoh Theta SC2 𧰠Resources 360° Images User Guide Adding and Editing 360° Images Tutorials: How to Create a Progressive Scavenger Hunt with 360° Images in Storyline 360 How to Create Badges for a Gamified Scavenger Hunt Using 360° Images âš Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a newthreadand 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#ELHChallengeso your tweeps can follow your e-learning coolness. đ Last Weekâs Challenge: Before you take this weekâs challenge for a spin, check out the accessibility makeovers your fellow challengers shared over the past week: E-Learning Accessibility Makeovers RECAP #466: Challenge | Recap đ New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. Iâll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. đ Upcoming Challenges Challenge #468(07.05): Drag-and-drop interactions. This will be a general drag-drop challenge, so you can share anything you like.Using Photo Mosaics to Design Interactive Stories #459
Interactive Photo Collages in E-Learning#459: Challenge | Recap Visual Storytelling with Photo Collages Build an interactive slide or course from a single image Get rid of bullet points You don't need to be a photographer to make this work Use your own photos or prebuilt stock photo collages Create multiple panel layouts similar t comic books From straightforward panel layoutsto asymmetrical compositions, photo collages offer a quick and effectiveway to craftimage-driven storiesusing stock photo collages. Here's a simple mockup of how the effect can work from a stock photo. A quick search in your favorite stock photo site returns a variety of photo collage styles and possibilities. Here are two more ideas: To learn more about this creative effect, check out Tom's post onconverting courses to interactionswith photo stories. Challengeof the week This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos and graphics or rework an existing project into a photo collage. Want some examples? Check out the ELC322 recap for community examples of this effect. Here are a few ideas to get you started: Design your story around a common problem or challenge Rework an existing scenario or interaction using a photo collage Use the built-in characters (illustrated and photographic), which include multiple expressions and poses Map collages are ideal for interactive org charts or customer profiles đ Last Weekâs Challenge: Check out the spinning wheel and roulette-inspired examples from last week's challenge: Roulette & Spinning Wheel GamesRECAP#458:Challenge|Recap đ New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. Iâll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. đ Upcoming Challenges Challenge #460 (05.03): Toggle Buttons. See ELC97 for an idea of what we're going for in next week's challenge. Challenge #461 (05.10): Interactive Podcasts. See ELC364 for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills. Challenge #462 (05.17): Click. Hover. Drag. See ELC144 for a general idea of what we're doing. đš2024 Articulate User Conference Call for Proposals Weâre now accepting proposals for this yearâs in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.23 Ways to Use Drag-and-Drop Interactions in E-Learning #468
Drag-and-Drop in E-Learning RECAP #468: Challenge | Recap This weekâs challenge asked course designers to show how theyâre using drag-and-drop interactions in e-learning. Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Ron Katz Example | Download | Learn more | Ron Katz | Website sebastien daubert Example | sebastien daubert Thierry EMMANUEL Example | Thierry EMMANUEL | Website Rosemary Trahan Example | Rosemary Trahan Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Walkabout Learning Example | Walkabout Learning Nichole Codrington Example | Nichole Codrington Tamara HĂ€feli Example | Tamara HĂ€feli eLearn Dev Example | Learn more | eLearn Dev Angela Thomas Example | Angela Thomas Jesse Wu Example | Jesse Wu | Website Alex Milyaev Example | Learn more | Alex Milyaev Ron Katz Example | Download | Template | Learn more | Ron Katz | Website Courtney Roberts Example | Courtney Roberts Kate Golomshtok Example | Kate Golomshtok | Website Thaddaeus Smith Example | Thaddaeus Smith | Website GĂŒlsĂŒm GĂŒneĆen Yıldız Example | GĂŒlsĂŒm GĂŒneĆen Yıldız Hilla Schlegel Example | Hilla Schlegel Phezulu Dhlodhlo Example | Phezulu Dhlodhlo Sabrina Sgoda Example | Sabrina Sgoda David D Example | David D Samuel Apata Example | Download | Samuel Apata | Website | @afrostem 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your Drag-and-Drop E-Learning Examples! The drag-and-drop challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.16 Examples of Interactive 360° Images in E-Learning #467
Using 360° Images in E-Learning RECAP #467: Challenge | Recap This weekâs challenge asked course designers to show how 360° images can transform static visuals into interactive, explore-type activities. Jonathan Hill Example | Download | Jonathan Hill | Website | @DevByPowerPoint Jayashree Ravi Example | Jayashree Ravi | LinkedIn Elizabeth Kuhlmann Example | Learn more | Elizabeth Kuhlmann Thierry EMMANUEL Example | Thierry EMMANUEL | Website Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Samuel Apata Example | Samuel Apata | Website | @afrostem eLearn Dev Example & learn more | eLearn Dev Mallory Frazier Example | Mallory Frazier Ron Katz Example | Ron Katz | Website Angela Thomas Example | Angela Thomas Trey McNabb Example | Trey McNabb bylittle learning Example | Download | bylittle learning | Website Sonya Crider Example | Sonya Crider Andreas Paul Example | Andreas Paul Kate Golomshtok Example | Kate Golomshtok | Website Sabrina Sgoda Example | Sabrina Sgoda Walkabout Learning Example | Walkabout Learning 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your 360° E-Learning Examples! The 360° image challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.How are Course Designers Using Labeled Graphics in E-Learning? #464
Using Labeled Graphics in E-Learning#464: Challenge | Recap Labeled graphics are one of the most popular explore-type interactions in e-learning. And creating them in Rise 360 or Storyline 360 is a breezeâjust drop some markers on an image, add your content to the labels, and voilĂ ! You've got an engaging interaction in minutes. But here's the best part: labeled graphics aren't just quick and easy to build; they're also incredibly flexible. They're perfect for getting learners to drill down into timelines, maps, floorplans, diagrams, org charts, screenshotsâyou name it. đ Challenge of the Week This week, your challenge is to share an example of a labeled graphics interaction. You can use Rise 360, Storyline 360, or any tool you like. Just show us how youâre using interactive markers to create explore-type activities. In case you missed it, this weekâs Storyline 360 update included the option to easily adjust interactive marker sizes to optimize accessibility for any screen. 𧰠Resources Check out the previous labeled graphics challenge recap to see how this popular interaction can be used in e-learning: Labeled Graphics in E-Learning RECAP #371: Challenge | Recap âš 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 drill down into this weekâs challenge, check out the progressive disclosure techniques your fellow challengers shared over the past week: Progressive Disclosure in E-Learning RECAP #463: Challenge | Recap đ New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. Iâll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. đš 2024 Articulate User Conference Call for Proposals Weâre now accepting proposals for this yearâs in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.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.26 Examples of Labeled Graphics & Interactive Markers in E-Learning #464
Using Labeled Graphics in E-Learning RECAP #464: Challenge | Recap This weekâs challenge asked course creators to show how labeled graphics and interactive markers can be used in e-learning. jĂ”ao almeida Example | jĂ”ao almeida | Website Stephen Taperek Example | Stephen Taperek Daniel Canaveral Example | Daniel Canaveral Fabienne Werder Example | Fabienne Werder Stephen Taylor Example | Stephen Taylor | Website Ange CM Example | Ange CM Maren West Example | Maren West Jonathan Hill Example | Download | Jonathan Hill | Website | @DevByPowerPoint Ziping Wu Example | Ziping Wu Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Emily Williams Example | Emily Williams Thierry EMMANUEL Example | Thierry EMMANUEL | Website GĂŒlsĂŒm GĂŒneĆen Yıldız Example | GĂŒlsĂŒm GĂŒneĆen Yıldız eLearn Dev Example & Learn more | eLearn Dev Eva Ludowig Example | Eva Ludowig | Website Ron Katz Example | Download | Learn more | Ron Katz | Website Suzanne Neafus Example | Download | Suzanne Neafus Jayashree Ravi Example | Jayashree Ravi | LinkedIn Ashi (Neha) Tandon Example | Ashi (Neha) Tandon | Website | @ashi_tandon Tom Kuhlmann Example | Tom Kuhlmann | Website | LinkedIn | @TomKuhlmann bylittle learning Example | Download | bylittle learning | Website Samuel Apata Example | Samuel Apata | Website | @afrostem Kate Golomshtok Example | Kate Golomshtok | Website Preston Ruddell Example | Preston Ruddell Sabrina Sgoda Example | Sabrina Sgoda 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your Labeled Graphic E-Learning Examples! The 2024 labeled graphic challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.
