30+ Best E-Learning Portfolio Examples for Inspiration in 2024 #451
E-Learning Portfolios for 2024 RECAP #451: Challenge | Recap Are you looking for fresh, visually engaging ways to showcase your e-learning projects? Or perhaps you're looking to hire talented e-learning designers to help with your next project. Either way, we've got you covered with 30+ e-learning portfolio examples. From simple portfolios using E-Learning Heroes profile pages to custom-designed websites, this week's roundup features a range of creative ways to present your best e-learning work. Jonathan Hill Portfolio Tip: Share your E-Learning Heroes profile page to showcase examples of your work. Example | Jonathan Hill | Website | @DevByPowerPoint Jeniffer Brubaker Example | Jeniffer Brubaker Christine Vadovszki Portfolio Tip: Networking is so important! I think it's really important to talk to people, build relationships and connections as I often find these one-to-one interactions are what often land jobs rather than sending a resume or portfolio into the oblivion. Example | Christine Vadovszki Anel Albertao Example | Anel Albertao | Website Kari Edmonds Example | Kari Edmonds | Website Ayla Blacklaw Example | Ayla Blacklaw | Website Cherisse Lipps Example | Cherisse Lipps | Website Joanne Chen Example | Joanne Chen | Website Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Teo Karageorgakis Example | Teo Karageorgakis | Website Michael Schleicher Example | Michael Schleicher Alexander Salas Example | Alexander Salas | Website | @stylelearn Thaddaeus Smith Portfolio Tip: Portfolios are living documents and grow and change with the person they represent. As existing skills are sharpened, new skills are obtained, new technologies are incorporated, and new practices are implemented, the portfolio should be modified to reflect those changes. Example | Thaddaeus Smith | Website Ilona Winnemore Example | Ilona Winnemore | Website Samuel Apata Portfolio Tip: Before having a dedicated portfolio, I used to share my demos through the community page which is still a free and viable option. Example | ELH Portfolio | Samuel Apata | Website | @afrostem Thierry EMMANUEL Example | Thierry EMMANUEL | Website Michelle Susar Example | Michelle Susar Amar Kulshreshtha Portfolio Tip: I create articles on my LinkedIn profile Example | Amar Kulshreshtha | Website | @AmarShreshtha Julie BIGOT Example | Julie BIGOT | Website Laura Hansen Portfolio Tip: Set achievable and measurable goals for your own development. This year I have created a goal for myself to submit at least one E-Learning Heroes challenge a month and have two virtual networking calls a month. Example | Laura Hansen Silver Echo77 Portfolio Tip: Showcase a variety of projects that highlight different skills and strengths. It's all about demonstrating versatility! Silver Echo77 Missy Hovland Example | Missy Hovland Maria Munoz Portfolio Tip: Every day is a new opportunity to learn something new. Set realistic and achievable goals that will help you grow. Example | Maria Munoz Tracy Carroll Example | Learn more | Tracy Carroll | Website | @1tracycarroll Emma B Portfolio Tip: Curate! Don't put everything in there and ensure your portfolio really is a demonstration of your best work. Try to include a variety of examples and put in some good quality images / screenshots of your work. Focus on how you solved problems or tackled challenges, to achieve your end result. Also take a look at what other people are doing and learn from them. Don't put too much pressure on yourself to get it perfect and remember you can always change things as you, your skills and your style changes. Example | Emma B | Website Logan Monday Portfolio Tip: Keep showing your work and network with people that can support you as well as inspire you. Example | Logan Monday Wrenn Corcoran Example | Wrenn Corcoran Courtney Roberts Portfolio Tip: Have fun building your portfolio. Do what you like and what inspires YOU! Example | Courtney Roberts Kate Golomshtok Portfolio Tip: Learn how to be inspired by the world around you. Inspiration can come from a variety of sources: films, music, advertising, books, and many others. It’s important to see the ideas around you and use them to create interesting and helpful courses. Example | Kate Golomshtok | Website Anne-Marie Fiore Example | Anne-Marie Fiore | Website Jared Speight Portfolio Tip: Have a flagship project where you include design documents, discuss accessibility features, and show the results of your course/job aid if possible. Jared Speight Jayashree Ravi Networking Tip: Be genuine and proactive in building relationships. Connect with fellow professionals through online communities like LinkedIn, engage in meaningful conversations, and offer value. Authentic relationships can lead to collaborations and opportunities. Career Tip: Never stop learning. The digital learning landscape evolves rapidly. Stay curious, invest in continuous learning, and embrace challenges as opportunities for growth. Committing to lifelong learning sets you apart and fuels success in your career journey. Example | Jayashree Ravi | LinkedIn Teammate Learning and Development Example | Teammate Learning and Development | Website 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 E-Learning Portfolio Examples! The e-learning portfolio 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.19 E-Learning Storyboard Templates and Examples #251
E-Learning Storyboard Templates RECAP #251: Challenge | Recap Love ‘em or hate ‘em, storyboards are critical to e-learning success. Whether you’re using text-based storyboards or detailed visual storyboards, there’s a storyboard format for every project and course designer. This week's challenge features free storyboard templates, tips and insights, and even video tutorials! Please take some time to read and comment on the uber helpful storyboard articles your fellow community members shared this week. Bryan Jones Learn more | Download | Bryan Jones | Website | @elearningart Kevin Thorn Download | Kevin Thorn | Website | @learnnuggets Teresa Vanderpost View project | Teresa Vanderpost Alex Jinca View project | Alex Jinca | Website Jodi Sansone Download | Jodi Sansone | @jodimsansone Allison Goldthorpe Learn more & download | Allison Goldthorpe | Website | @AGoldthorpeID Karyn Jones View project | Karyn Jones Joe Waddington Download | Joe Waddington Joan Campbell View project | Joan Campbell Paula Rademacher Download | Paula Rademacher | Website Farah Azadeh View project | Farah Azadeh Candice Pitman Download (.pdf) | Download (.pub) | Candice Pitman Nicki Berry Download | Nicki Berry | Website Teo Karageorgakis View storyboard | Learn more | Teo Karageorgakis | Website Samuel Apata View project | Samuel Apata | Website | @afrostem Ernesto Yannini View project | Ernesto Yannini | Website Kelly H Download | Kelly H Andrew Geaghan Download | Andrew Geaghan Anouk Van Dijk Download | Anouk Van Dijk Mykhaylo Zakryzhevskyy Download | Mykhaylo Zakryzhevskyy 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 consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, please include #ELHChallenge so your tweeps can track your e-learning coolness. Share Your E-Learning Storyboard Templates and Examples! The storyboard 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.40+ Interactive E-Learning Games and Examples #24
E-Learning Games RECAP #24: Challenge | Recap This week’s challenge was around e-learning games. We shared a quick idea for creating your own e-learning games. Based on the success of this week’s challenge, I expect we’ll do a lot more around this topic. Thanks to everyone who shared demos or feedback in this week's challenge. I know the e-learning community appreciates seeing what you come up with each week. Remember: The challenges are always open. You can jump into this or any previous challenge anytime and we'll update the recap post to include your work. Dan Sweigert View demo | Dan Sweigert | Website | @elearningwdan Przemyslaw Hubisz View demo | Przemyslaw Hubisz | @phubisz Montse Anderson View demo | Montse Anderson | Website | @mLearning Nick Russell View demo | Download | Nick Russell | Benchmark Learning Nancy Woinoski View demo | Nancy Woinoski | Website | @pinchedhead Allison Nederveld View demo | Learn more | Download | Allison Nederveld | @abnederveld Charles Hamper View demo | Charles Hamper | Website | @cfhamper Jackie Van Nice View demo | Learn more | Jackie Van Nice | @jackietrains Till Then View demo | Till Then Stephanie Harnett View demo | Learn more | Stephanie Harnett | Website | @slhice Sol Moh View demo | Sol Moh Gemma Henderson View demo | Learn more | Download | Gem Henderson | @gemdemhen Alex O'Byrne View demo | Alex O'Byrne Jason Renshaw View demo | Jason Renshaw | Website Jason Renshaw View demo | Jason Renshaw | Website Jay Yearley View demo | Jay Yearley | Website Ian McConnell View demo | Learn more | Ian McConnell | Website | @tlslearning Melissa Milloway View demo | Melissa Milloway | Website | @MelMilloway Charles Hamper View demo | Charles Hamper | Website | @cfhamper Richard Watson View demo | Learn more | Richard Watson | Website | @rwatsonID Przemyslaw Hubisz View demo | Download | Przemyslaw Hubisz | @phubisz Jackie Van Nice View demo | Learn more | Jackie Van Nice | @jackietrains Ridvan Saglam View demo | Ridvan Saglam | Website | @rbsaglam John Wagner View demo | John Wagner | Website Alexander Salas View demo | Learn more | Alexander Salas | Website | @stylelearn Chris Lee View demo | Chris Lee | Website Till Then View demo | Till Then Linda Lorenzetti View demo | Linda Lorenzetti | @lindalor Mohammad Hassam View demo | Learn more | Mohammad Hassam | Website Alex Lapthorne View demo | Alex Lapthorne Amar Kulshreshtha View demo | Learn more | Amar Kulshreshtha | Website Darren Heath View demo | Learn more | Darren Heath Nicholette Inman View demo | Nicholette Inman Aman Vohra View demo | Aman Vohra | LinkedIn Chris Hodgson View demo | Learn more & download | Chris Hodgson | Website | @skriss Nicola Fern View demo | Learn more | Nicola Fern | @maddiezahatter Aman Vohra View demo | Aman Vohra | Website Dane Hartman View project | Download | Dane Hartman | Website Amy Lamb View project | Download | Amy Lamb | @aangrimson Katherine Jackson View project | Katherine Jackson More E-Learning Games & Templates 10 Free E-Learning Game Templates for Articulate Storyline 11 Free Tabbed Navigation Templates for Articulate Storyline 12 Free E-Learning Games for Articulate Storyline 10 Fresh and Free E-Learning Templates for Articulate Storyline 5 Free E-Learning Games for Articulate Storyline 30+ Interactive E-Learning Games and Examples 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 consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness. Share Your E-Learning Game Examples! The e-learning games challenge is still open! If you have one or more game 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.30+ Creative Examples of E-Learning Activities #129
Choose Your Own Challenge RECAP #129: Challenge | Recap This week’s challenge asked course designers to share their own e-learning challenge and example. Examples include games, quizzes, interactive videos, brain games, and more! Special thanks to first-time challengers: Irshad kachchi, Terry Springer, Adriana Bertolani, Wade Murphy, and Kevin Parker! Ashley Chiasson Create an e-learning resource inspired by one of your favourite, existing, applications. View project | Learn more | Download | Ashley Chiasson | Website | @amdchiasson Magic Johnson Create a semi-intelligent game in Articulate Storyline. View project | Learn more | Magic Johnson | Website | @elearningnetwrk Linda Lorenzetti Recreate an animation effect in Articulate Storyline. View project | Linda Lorenzetti | Website | @lindalor Ari Avivi Using sliders to compare and contrast distances. View project | Ari Avivi Cecilia Bernal Convert a double-entry table into an interactive graphic. View project | Learn more | Cecilia Bernal | Intexpliki | @intexpliki Create a double-tab navigation chart in Articulate Storyline. View project | Learn more | Cecilia Bernal | Intexpliki | @intexpliki Maija Perfiljeva Create practical training for a travel agency using variables. View project | Download | Maija Perfiljeva | Website | @GamayunTraining Irshad kachchi Teach learners how to tie a tie with e-learning. View project | Irshad kachchi | Website | @swift_elearning Zsolt Olah Demonstrate how Action Mapping works using animated stories. View project | Learn more | Zsolt Olah | Website | @Rabbitoreg Alexander Salas Create a basic game with conditional variables. View project | Download | Alexander Salas | Website | @stylelearn Tracy Carroll Develop an e-learning template with built-in closed captioning. View project | Learn more | Download | Tracy Carroll | @1tracycarroll John Toh Create an interactive way to teach users how to make sushi. View project | Download | John Toh Dianne Hope Show an example of interactive video in e-learning. View project | Learn more | Dianne Hope | Website | @DianneHope Veronica Budnikas Use the credit sequence of a movie in an e-learning course. View project | Learn more | Veronica Budnikas | Website | @verobudnikas Adam Gavarkovs Transform a magazine into an interaction in Articulate Storyline. View project | Adam Gavarkovs | @adamgavarkovs Piewsook Fong KP Simulate a video game by letting users control character movement. View project | Download | Piewsook Fong KP Ashi Tandon Create an business game or activity to teach management skills. View project | Ashi Tandon | Website | @ashi_tandon Joanne Chen Create an interactive game based on popular brain teasers. View project | Download | Joanne Chen Melissa Milloway Gamify your course background using JavaScript. Learn more | Melissa Milloway | Website | @MelMilloway Daniela Slater Create your own custom illustrated character poses and animate them in Articulate Storyline. View project | Daniela Slater | Website | @LetMeTeachU View project | Daniela Slater | Website | @LetMeTeachU Joanna Kurpiewska Design an interaction to test how well users see colors. View project | Learn more | Joanna Kurpiewska | Website | @elearningjoanna Terry Springer Design a drag-and-drop activity that’s keyboard accessible for JAWS screen readers. View project | Learn more & download | Terry Springer Alexander Salas Design a Zika awareness safety course. View project | Download | Alexander Salas | Website | @stylelearn Adriana Bertolani Create an interaction to help learners practice a new language. View project | Adriana Bertolani | Website | @actuasolutions Saurabh Dua Design an example to demonstrate height or distance. View project | Saurabh Dua Nagarjuna Veeramallu Show an engaging way to teach software training. View project | Learn more | Nagarjuna Veeramallu | Website | @pixentia Colleen Manning Design an e-learning scenario to help users practice decision-making skills. View project | Colleen Manning Arkadiusz Malkowski Design a retro-style computer training interaction. View project | Arkadiusz Malkowski | @amalkowski_ Wade Murphy Use a point-and-click set up to allow a user to explore local history. View project | Wade Murphy Daniel Adeboye Design a mini-course to help research students choose an appropriate topic. View project | Daniel Adeboye | Website | @danno4krist Kevin Parker Build something cool in Articulate that most people say can only be built in JavaScript. View project | Kevin Parker | Website Lesley Bart View project | Lesley Bart Jamie Borreggine Use motion paths to create a simple, realistic animation-based quiz. View project | Jamie Borreggine Fun way to teach children and adults the phonetic alphabet. View project | Jamie Borreggine Tracy Carroll Design a course to help designers decide on whether to build a course. View project | Tracy Carroll | Website | @1tracycarroll Ben Hall Design a branching scenario game where players get to create their own video game company. View project | Ben Hall Nick Petch Create a fun and creative ways to educate learners using Storyline's variables. View project | Nick Petch Inserver Create looping animations to give a dynamic aspect to courses. View project | Emilio Lozano | Website | @inelearning David Tait Create a 3D character that can be rotated with Storyline's sliders. View project | David Tait | Website | @4ptLtd Paige Talbot Share a gamification example in a simulation style environment. View project | Paige Talbot Hector Martinez View project | Hector Martinez Kimberly Strough-Wingo View project | Kimberly Strough-Wingo 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 consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness. Share Your Challenge Ideas and Examples! The choose your 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.Using JavaScript and Articulate Storyline #132
Using JavaScript with Articulate Storyline #132: Challenge | Recap Extend Your E-Learning Development Skills with JavaScript In a recent screencast challenge, we looked at using variables in e-learning. Since most course designers don’t work with variables, it was a good opportunity to learn how variables can be used to create more dynamic and personalized learning experiences. Another way to create dynamic courses is by using JavaScript, which is a scripting language that allows users to interact with web pages. Events like hovering, clicking, and typing can execute JavaScript to trigger an action. In Articulate Storyline, this is all handled for you with built-in triggers. You don’t need to know a thing about JavaScript to build advanced courses. But Storyline is designed to grow with you. If you look down the list of triggers, you’ll find one dedicated to executing JavaScript. Keep in mind that you do not need to learn JavaScript to create highly interactive projects in Storyline. Storyline’s states, triggers, and layers are all you need to create Guru-worthy projects. Challenge of the Week This week, your challenge is to share a Storyline example that features JavaScript. You don’t need to build anything complicated or overly technical. Instead, focus on learning how to insert JavaScript and make something happen. JavaScript isn’t the easiest thing to learn. If your project doesn’t work as intended, don’t sweat it. I’ll still feature your work in the recap. Finally, keep in mind that Articulate doesn’t provide support for using JavaScript. If you run into any sticking points this week, please post your questions in the Building Better Courses forums. If the community can help, they will. JavaScript Examples from the Articulate Community The Articulate community has shared some amazing examples, source files, and tutorials that can help you get started. Feel free to use any of the Storyline-JavaScript downloads as the starting point for your project. Zsolt Olah Zsolt Olah comes up with some highly creative ways to include JavaScript with Storyline. He also does a fantastic job of writing about his projects. Here are some articles, demos, and tutorials that will help you get started working with JavaScript in Storyline: JavaScript & Storyline Keep Your Head in the Game: Advanced Storyline Voice Recognition Experiment Storyline Communication with a Web Server How did I make the gamified video interview challenge? QR Code Generator Full Control Over YouTube Videos in Storyline Storyline Variables for Non Coders Storyline Variables and JavaScript JavaScript And Storyline: Time Saver Hook them! JavaScript and Storyline to engage learners! Melissa Milloway Every time I open Twitter, it seems Melissa Milloway has posted another advanced idea for blending programming languages with Storyline. Here are a few of my favorites: 5 ideas on using JavaScript to change background color in Storyline E-Learning and Retro Games Sample Gamify your next e-learning project's background with this trick Aman Vohra If you follow the weekly challenges, you know Aman Vohra is someone who likes to share advanced ways to push Storyline’s limits. Here are a few of Aman’s examples that feature JavaScript: Adding a Live Chat Box to Your Course Weather App in Storyline 2 Leaderboard example in Articulate Storyline Kristin Anthony Kristin Anthony shared some super-cool projects that feature JavaScript and Storyline. Check out her posts below because she does a great job of writing about her development process. A Medical Demo and a bit of Coding, too! GDS Challenge No. 2: Zombie Acme U Storyline+JavaScript Source Files Storyline 2: L&D Title Generator By Trina Rimmer Storyline 2: Word Count JavaScript By Phil Mayor Storyline 2: Controlling Variables from JavaScript By Zsolt Olah Resources Product support articles JavaScript Best Practices and Examples Articulate Support resources for Storyline and JavaScript Last Week’s Challenge: Before you geek out on this week’s e-learning challenge, take a look at the blurred background designs your fellow community members shared over the past week: Blurred Backgrounds in E-Learning RECAP #131: Challenge | Recap Wishing you a JavaScriptastic week, E-Learning Heroes! 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.40+ Gamification Examples in E-Learning #102
Gamify an E-Learning Course RECAP #102: Challenge | Recap Thanks to everyone who shared demos or feedback in this week's challenge. Remember: The challenges are always open. You can jump into this or any previous challenge anytime and we'll update the recap post to include your work. Alexander Salas Gamified demo | Original | Download | Alexander Salas | Website | @stylelearn Rıdvan Saglam View e-learning game | Ridvan Saglam | Website | @rbsaglam Ashi Tandon View demo | Ashi Tandon | Website | @ashi_tandon Amar Kulshreshtha View the juice store game | Learn more | Amar Kulshreshtha | Website Marcus Ritter View demo | Marcus Ritter | Website Bob Kaart View demo | Bob Kaart | Website Richard Watson View gamified example | View original | Learn more | Richard Watson | @rwatsonID Tracy Carroll View game | Learn more | Tracy Carroll | Website | @1tracycarroll Jeff Kortenbosch Learn more & download | Jeff Kortenbosch | Website | @elearningjeff Ashi Tandon View demo | Ashi Tandon | Website | @ashi_tandon Bob Kaart View maze game | Bob Kaart | Website Bob Kaart View demo | Bob Kaart | Website Tracy Carroll View game | Learn more | Tracy Carroll | Website | @1tracycarroll Amar Kulshreshtha View game | Learn more | Amar Kulshreshtha | Website Zsolt Olah View game | Learn more | Zsolt Olah | Website | @Rabbitoreg Stratbeans C View demo | Stratbeans C | Website | @stratbeans Phil Eagles View demo | Phil Eagles | Website Tim Neill View demo | Download | Tim Neill | Website Nagarjuna Veeramallu View demo | Learn more | Nagarjuna Veeramallu | @pixentia Alphonso Hendricks View demo | Alphonso Hendricks | Website David Tait View demo | David Tait | Website | @4ptLtd View demo | David Tait | Website | @4ptLtd Robbie Chui View demo | Robbie Chui | Website | @RobbieChui Yuna Buhrman View demo | Yuna Buhrman Noelle Dattilo View demo | Noelle Dattilo Meaghan Lister View project | Learn more | Meaghan Lister | Website | @MeaghanLister Matt Aldred View project | Learn more | Matt Aldred New to 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 consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness. Gamify an E-Learning Course #102 The gamification 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.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 Animation Techniques to Create Countdown Timers in E-Learning #298
Animated Timers in E-Learning #298: Challenge | Recap Timers are a common element in game-based learning where time constraints play a role in the success or failure of a task. Timers can be used for most decision-making activities that require learners to quickly process information. Animated timers can be used to: Create a sense of urgency, tension, or pressure Simulate real-world tasks that involve time constraints Gamify decision-making activities Create timed skill and drill exercises Timers can be created using a variety of techniques including video clips and basic entrance animations. The best part is that timers can be visually themed to align with your course content. Let's look at a few examples: Card Match Game Try your memory in this card matching game from Richard Hill. First shared in the memory game challenge, this game features an animated timer that puts learners under pressure to complete the puzzle. View and download the timer in action Wait! How’d he do that? The effect was created using Storyline’s wheel entrance animation and a 35-second duration. Using a longer duration, the entrance animation creates the visual countdown effect. Brilliant! One Creative Timer Begets Another Following up in the same memory game challenge, community member Ridvan Saglam used a similar technique for his airplane countdown timer. I really like the way he visually connected the design of his timer to the theme of his game. Ridvan shared a few more visual timers that you can download from this discussion thread. Using Timers to Gamify Existing Slides Here’s an example that Alexander Salas shared for a previous challenge where he took an existing template and gamified it by adding a simple countdown timer. You can download his source file and use that as a starting point for this week's challenge. View and download the timer Using Video Clips as Timers Animated timers can even be created with simple tools like PowerPoint. In this example, Tracy Parish created an animated loading bar effect in PowerPoint. Using a screencasting tool, she recorded the animation as it played back. Learn more and download the source file Because Storyline has a trigger to evaluate when a when a media clip completes, the video’s duration becomes the timer. Challenge of the Week This week, your challenge is to share an example that demonstrates how animated timers can be used in e-learning. NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on. Last Week’s Challenge: Before you put the time squeeze on your learners, check out the interactive Tour de France examples your fellow community members shared in last week's challenge: Tour de France Interactive Examples RECAP #297: 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.
