Making Your E-Learning Interactive: Fun with UFOs and JavaScript

natestoker 10 July 2024 JavaScript or Logic

Making Your E-Learning Interactive: Fun with UFOs and JavaScript

We’ve all seen those e-learning courses that feel a bit… static. Let’s add some truly dynamic elements. In this post, we’ll dive into a simple JavaScript code snippet that lets you create a fun, interactive effect: a UFO that gracefully follows your mouse around a slide. It’s a small touch, but it can make a big difference in learner engagement.

The Code: Breaking it Down

var player = GetPlayer();
var UFO = document.querySelector("[data-acc-text='UFO']");

var offsetX = -UFO.offsetWidth / 2; // Center UFO under the mouse
var offsetY = -300;

var rotationStrength = .1;  // Adjust as needed
var maxRotation = 7;  // Limit rotation to +/- 7 degrees

document.addEventListener('mousemove', function(event) {
    var adjustedX, adjustedY; 

    var slide = document.querySelector("[data-acc-text='slide']");
    var slideRect = slide.getBoundingClientRect();
    var mouseX = event.clientX;
    var mouseY = event.clientY;

    if (mouseX >= slideRect.left && mouseX <= slideRect.right &&
        mouseY >= slideRect.top && mouseY <= slideRect.bottom) {

        adjustedX = mouseX - slideRect.left + offsetX;
        adjustedY = mouseY - slideRect.top + offsetY;

        adjustedX = Math.max(0, Math.min(slideRect.width - UFO.offsetWidth, adjustedX));
        adjustedY = Math.max(0, Math.min(slideRect.height - UFO.offsetHeight, adjustedY));

        // Sends these variables to storyline variables, make sure you have SL variables with these names if you desire to use them for logic
        player.SetVar("SL_mouseX", adjustedX);
        player.SetVar("SL_mouseY", adjustedY);

        // Calculate rotation based on horizontal mouse position
        var slideCenterX = slideRect.left + slideRect.width / 2;
        var deltaX = mouseX - slideCenterX;

        rotationAngle = Math.tanh(deltaX * rotationStrength) * maxRotation;  
    }

    gsap.to(UFO, {
        x: adjustedX,
        y: adjustedY,
        rotation: rotationAngle,
        transformOrigin: "50% 50%", 
        duration: 0.1, // Smooth animation
        ease: "power1.out"
    }); 
});

Let’s not get overwhelmed! We’ll take it step-by-step. At the very beginning, we’re grabbing two important things:

  • player: This is a special object provided by your e-learning authoring tool (like Articulate Storyline). It gives you the power to interact with the course itself.
  • UFO: This is the element on your slide that represents the UFO image. We’re using a special way to find it (the data-acc-text attribute), but the main idea is that we’re telling JavaScript: “Hey, we want to work with this UFO thing!”
  • slide: We’ll use this to figure out the dimensions and boundaries of the slide so the UFO knows where it’s allowed to move and use this to help rotate the UFO.

Mouse Moves, UFO Follows

var offsetX = -UFO.offsetWidth / 2; // Center UFO under the mouse
var offsetY = -300;

var rotationStrength = .1;  // Adjust as needed
var maxRotation = 7;  // Limit rotation to +/- 7 degrees
document.addEventListener('mousemove', function(event) {

// ... some calculations ...

gsap.to(UFO, {
        x: adjustedX,
        y: adjustedY,
        rotation: rotationAngle,
// ... some animation options ...
    }); 
});

The heart of the code is this mousemove event listener. In plain English, we’re saying: “Every time the mouse moves, do this stuff.”

  • Offsetx and y: Where your mouse is compared to the UFO.
  • rotationStrength & maxRotation: Play with these numbers for more exaggerated rotations, I found 7 degrees to be a sweet spot for me.
  • Calculate Position and Rotation: We do some calculations to figure out exactly where the mouse is on the slide, and then we apply some clever math to figure out how the UFO should tilt based on the mouse’s horizontal movement.
  • GSAP (GreenSock Animation Platform): This is a powerful JavaScript library for creating animations. We use it to smoothly move the UFO to the calculated position and apply the rotation. This is what gives it that nice, flowing motion instead of just jumping around.

Why This Matters for Your E-Learning

Don’t underestimate the power of this interactive code! It’s more than a playful trick – it’s a versatile engagement booster. Whether it’s a UFO, a magnifying glass, or surgical instruments following the cursor, the possibilities are endless. This code not only adds a touch of delight, it also enhances learning through interactive visualization. And because your hover and click logic remains intact, you can use these interactions to reveal information, objects, or even trigger animations – making your e-learning truly come alive!

Try It Out!

Don’t be afraid to experiment with the code. You can change the speed of the UFO, how much it rotates, or even swap in a different object! The goal is to make your e-learning experiences more engaging and memorable.

See video below:

Related Posts