Security Code Number Pad
This is a project I have been working on for quite some time, due to the Storyline 360 limitations etc using expressions and having to use several triggers to do one thing, as part of this project. This is an advanced setup so I do not really want to have to troubleshoot or explain if possible. So I am providing as much info as I can here. All shapes and buttons are Storyline shapes and buttons so you can style any way you please. The font for the numbers I used is Digital-7 a free font available online. This is a single slide of a Security Pad where you can add 4 one/two digit codes, so that when they are all correct a Continue button will appear. This can obviously be changed to show a layer or do something else. I left the instructions on the slide that Correct1-4 in the Variables management can be manually changed to the 4 different numbers up to 99. When the number is correct it will be green, when it is incorrect it will be red. All 4 numbers must be correct to show the continue button. The USERINPUT field at the top will show the number currently being input by the user, when the user hits submit the USERINPUT field clears for the next number and moves to the allocated Code to the side. Javascript has been used where necessary such as each number button has a JavaScript code assigned to it to add its value to the USERINPUT with a limitation on 2 numbers. I comment in the codes where possible to explain what is happening. Also, you will see in the triggers panel greyed out triggers. Activating these triggers will allow you to Randomly generate the 4 numbers so that each user gets a unique set of numbers that will avoid copying or code sharing if it is a requirement. Now it is not practical to do this on this slide, so you can move the triggers to different slides in the course to generate the code. Below is the matching pair that you put on a different slide that you want the random number to appear. So RandomNumber1 generates a random number, and the second trigger assigns that random number to Correct1, and so on. They must be in the order below as the RandomNumber1 has to be generated first before populating Correct1 for example. *By leaving those triggers inactive simply means you manually change the Correct1-4 values in the Variable section. Uses for this. Usually for re-enforcement and to ensure attention and focus. At the end of a section you can show a slide that generates a random number or the manual number by adding a text filed with the %Correct1% etc reference and you give instructions to the user to write down the number or whatever, so that at the end of the course they need to input all 4 codes to either complete or move on etc. I have also put a code into a video (sneaky I know) so that they must watch the video to get the number. You can also use a quiz question to give a number answer which can be a "Clue". Good for re-enforcement and remembering and attention. Many applications for this. The Reset Button also has inactive randomising triggers also but activating them will cause the random numbers to regenerate when the reset button is clicked. I have also left on the slide the four Variable references of Correct1, 2, 3 and 4 so you can see the correct answers required. Remove them when publishing. Manually it is Correct1 = 10, Correct2 = 20, Correct3 = 30, and Correct4 = 40. But you will most likely change them to whatever you want. You will find the values in the Variables panel where you can manually change them to whatever you like. Simple place their reference %Correct1% etc, into the section or slide in your course where you want it to be shown for the user to take note of. To use in an existing project, simply go to File-Import, and find the .story file. Import it and if there are more than 1 slide in the .story file you will be asked to choose the slide you want. In this case there is only one slide. By doing this, all triggers and variables will also be imported correctly into the project. I suggest you keep a backup copy of the .story file, and also if you have advanced knowledge of Storyline, spend some time going through everything to help understand what is going on. I am not always available to respond and this is a project that works as is and you are free to adapt change and improve it as you wish. You might want to add an audio beep for each button press for example... I hope this might be useful in some way to add a bit more user interactivity.Parking inspector safety
This interaction uses a 360 street photo with three markers to locate and learn about how inspectors stay safe on the street. Each learning pop up is accompanied by a text to speech option. On the bottom right on the page, you can view your progress out of the three tasks. Review link: Parking inspector safety | Review 360Knowledge Check Drag-Drop-Submit
This slide is from a phishing scam awareness training module I designed. The interactions I like most about it are: An info button that displays on hover reminds the learner of the interaction expectation. The learner must examine the image to decide if they feel it is a scam. Then, DRAG their answer ONTO the picture. Then click submit. Lastly, there is custom feedback. Throughout the scam module, the learner sees a "hacker." When they answer a KC correctly, they win against the hacker; when they answer incorrectly, they lose. My attempt at adding a bit of gamification to the module. I was first going to build the knowledge check (6 questions total) as true/false questions without any visuals. But, I really wanted to include a practice that mimicked what the learner would have to do in real life, i.e., visually scan the email and make a decision.Flip animation using GSAP in Articulate Storyline to have smooth flip animation.
We recently faced a challenge with the built-in swirl animation in Storyline (SL). Our client found it cluttered and pointed out that the animation flipped twice, which logically should result in showing the same side again. We agreed with this feedback and decided to explore alternative solutions. After some research and experimentation, we discovered that using GSAP (GreenSock Animation Platform) provided a much cleaner and more logical flip animation. GSAP allowed us to create a smooth and visually appealing flip effect that only flips once, addressing the client's concerns effectively. By integrating GSAP with Storyline, we were able to enhance the overall user experience and meet the client's expectations. This solution not only resolved the issue but also opened up new possibilities for creating more sophisticated animations in our e-learning projects. Hope it will be helpful..An audio on/mute button controlled by JavaScript
I have been using an on/off toggle button on all my eLearning slides to allow the learner the option of turning off the sound. I thought I'd show how this works in case others need an on/off button for the audio track. Without sound, the content is delivered exclusively from slides or in the Notes. Turning off the sound allows the learner some control of their experience, such as if they don't want the sound playing in an office environment. I have been using a snippet of JavaScript that I found on e-learning heroes forum somewhere. I can show you what it does, and how to trigger the snippet, but I've no clue how it works on a JavaScript level. I have two ways to toggle the audio on/off. One is by clicking a button at the top of the screen. The other is through the key combination Control-Alt-M (which you can set up). Having a key combination is ADA compliant for sight-challenged people (they don't need to click on something). I created the variable varAudioOn and set it by default to true, so the audio plays whenever the course starts until it gets turned off. I created an audio button (Insert > Button) with 3 states, one is the speaker symbol and the others with a line through the speaker or a "down" state. This is called the "Audio button" object and is the same on all slides. Place your button where you want it before setting up the JavaScript trigger. I highlight the button object in the timeline and use the Size and Position controls to move it precisely. It seems that when adding the JavaScript trigger, the Audio button cannot be dragged onscreen, just positioned with Size and Position. [By the way, I believe I chose not to set this button up on a Master slide because I think JavaScript won't run when the Audio button "lives" on a Master slide. That seems like a logical choice so you don't have to copy it over and over, but t just wouldn't work for me. So I put it instead on all my slides as an object with 3 states.] Wait until your JavaScript triggers are hooked up (i.e. typed out in Triggers) before copy/pasting, so the triggers will copy along with the object. In the Triggers, I first had each slide check the status of the audio button when the slide begins, and then set the correct state or appearance of the button. Here's the logic: 1) If the audio was "on" for the previous slide, it should be audible on this one. 2) If the audio button state was in the OnState, then make the "Audio button" state on this slide to show the "on" state. 3) If the audio state on previous slide was "normal" = off, then show the off-state as this slide begins. I also have a trigger to start the audio after .5 seconds on every slide. For controlling the varAudioOn variable, I have these trigger sets: After these triggers, there's the usual two triggers (not shown) for moving to the next slide with Next and the previous slide with Previous. Inside the "Execute Javascript" (click on this link) you'll find this Javascript snippet that toggles the audio from audible to mute and back. //mute/unmute // Use the global DS object if it exists, otherwise try require: varappState = window.DS ? DS.appState : require("helpers/appState"); appState.onToggleVolume(); Hope this is useful to somebody. It took me many weeks to figure this out.Collection of Carousel Templates
Some experiments! Hope this gives you some inspo. Vertical Sliding Interaction (Light): Preview Notes: Uses hover layers which don't work on mobile. Features: Two options for vertical progress bars, swipe forward and back animations Horizontal Swipe Interaction (Dark): Preview Notes: Uses hover layers which don't work on mobile. Features: "Dot" progress animations
