Example
57 TopicsChicago Map Challenge (Mobile Layout)
I recently moved to Chicago and am historically terrible with directions! I wanted to learn the 77 Community Areas in a fun and interactive way. Unable to find a pre-built learning solution, I built one myself. It’s been fun sharing it with fellow Chicagoans. Try it out! To learn more about this project, visit my portfolio to see a full write-up. LinkedIn7Views0likes0CommentsCustom Text Contain Trigger
Hi All, As a learning experience designer, I am often tasked to develop a pause and reflect for asynchronous learners. I have many thoughts about how those should look and feel, but I wanted to share one powerful example. Storyline cannot accept more than one word when inputting text data to trigger an action. So, I've developed a "trigger" that allows a user to type in as much text as they like, and Storyline will look for words contained within. In this example, there are three parent keywords that trigger a layer based on what is typed. For example: Teamwork is a parent word, but I've also developed children keywords, so if a user were to put in team work (adding a space), the same layer would be triggered. Where I have a parent keyword for Innovation, there are children words like creativity, etc. You can add in as many words to be trigged as you like. Custom Contain Trigger Yes, you can use A.I. for a feature like this, but at the risk of making your API public (as far as I understand). Do you think there is use for this? Thanks for the feedback.17Views1like0CommentsInteractive Audio Story (Rise)
Pixel Perfect is an interactive audio story about creatives juggling high standards with real-world demands. It explores the balance we all try to strike between creative vision and practical realities. While you follow the story, you uncover practical insights every designer can relate to. Experience Pixel Perfect.687Views7likes9CommentsA straightforward (no JavaScript) approach for adding AI to E-Learning.
Here’s one of the simplest ways I’ve tried for bringing AI into e-learning: a Microsoft Form embedded in Articulate Storyline, connected to the OpenAI API via Power Automate, no JavaScript, and your API key stays secure. This setup works well for basic Q&A or providing custom feedback on assignments. I’ve put together a short guide covering how it works, along with the pros and cons of this approach I’ve put together a short guide here:210Views1like3CommentsGamified Onboarding
Collect the gems by exploring the office! This gamified eLearning was developed for team members to explore their workspace while getting some product knowledge. The process: Conducting a training needs analysis through discussions with leaders Building a learner persona using surveys and polls Planning the desired outcomes Create a fun course Explore the project.425Views2likes3CommentsPopcorn Words Game (sight words)
My 5-year old is learning to read. He was struggling to focus on memorizing a list of sight words (which they call popcorn words). When he could focus, he would memorize the words in order and wasn't recognizing them outside of the context of the list. I created this game to make the learning more fun, and used a bit of Javascript (with help from my computer programmer husband) to randomize the list of words. The Javascript also makes it easier to add in new words each week. I used AI to create all the graphics and the audio, which made the job quicker. And honestly, the little popcorn characters turned out pretty great! Now he's recognizing popcorn words in bedtime stories, signs etc. I would welcome any advice for improvement. For example, I need a way to make the letter sounds come closer to natural letter sounds. (For letter N, "nnn" not "nuh".) You can check out the game on this website. Popcorn Words! 12/16/202490Views2likes0CommentsSUDOKU GAME
I was looking for a way to create a Sudoku game using Storyline 360 but couldn't find any resources, so I decided to create it myself. I'm sharing it here for others to explore. Attaching the story file and Link: https://360.articulate.com/review/content/2485c0f8-b4f8-4619-a1ef-7fd272cb58a5/review126Views1like3CommentsUsing multiple sliders as an alternative to drag-and-drop, with dynamic Z-index control
Hello! For this week's ELH Challenge (#489), DavidAnderson asked us "to share an interactive example that shows people how to set a table. Go formal, go casual, or mix it up. It is totally your call." So, of course, I built a pirate-themed demo inspired by The Goonies.... This is my latest experiment using customised sliders as an accessible alternative to drag-and-drop. As shown below, by replacing the slider thumb with an image, it's possible to build an 'on rails' drag-and-drop that is also accessible from the keyboard: Being a bit of a perfectionist, I also used Javascript to change the Z-index position of the 'goblet' slider, so it passes in front of the knife and fork when it is moved, despite initially appearing beneath them. (We're setting a table - everything needs to be in the right place!) Z-index is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Changing the z-index number with Javascript means I can move the goblet from its starting position behind the knife and fork, placing it in front of the knife and fork when appropriate. This also helped to make all of the sliders 'grabbable' within such a small area, where otherwise the larger slider could block out the other two. This code moves the goblet to the very top: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "999" This code returns it to its starting position: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "4" And this IF/ELSE trigger moves the goblet to the back when the slider is at position 0 and 2.5, or to the very front when it is in any other position: For good measure, I also added a trigger that moves the slider to the very front whenever it is clicked. For more information on manipulating the z-index number of objects in Storyline, check out JeffBatt-bf4917's brilliant tutorial here. But hang on a minute Testing my demo, I found that the sliders for the knife and fork were accessible from the keyboard, but the slider I used for the goblet was not. It appears that changing the z-index of the slider also knocks out the accessibility controls. While I could still highlight the slider using the tab key in the usual fashion, I could no longer change its position using the arrow keys. It took a bit of lateral thinking, but I found a workaround... document.querySelector("#acc-5xjQeS51pKT").addEventListener("keydown", function(e) { if (e.key === "ArrowLeft") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal > 0) { GetPlayer().SetVar("GOBLET", Math.max(0, currentVal - 0.5)); } } else if (e.key === "ArrowRight") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal < 10) { GetPlayer().SetVar("GOBLET", Math.min(10, currentVal + 0.5)); } } }) When the user highlights the goblet with the Tab key, the above code listens for whether they then press the left or right arrow keys. If they press the left arrow, the code checks the current position of the goblet and moves it half a step to the left - but won't let it go below zero. If they press the right arrow, it does the same thing but moves it half a step to the right - but won't let it go above ten. I've basically replaced the accessibility controls that were affected by the z-index changes, all to ensure the goblet appears in front of the cutlery... 😃 Every day's a school day! I've attached my master file for anyone who'd like to take a closer look at this. My original idea was to dynamically change the z-index position of all three sliders in relation to each other, to ensure they are all consistently 'grabbable', but I just couldn't get this to work smoothly. But for my money, this technique presents a viable alternative to drag-and-drop that has potential if explored further. Let me know what you think! EDIT: I've also now attached v2 of the master file which incorporates Nedim's debugging. The z-index of all three sliders are now dynamically controlled to maintain the perspective throughout the interaction, and the accessibility controls are working without additional code.Solved350Views3likes14Comments