Are you sure?

Question

&nbsp;
Hello!Personally, I've always found confirmation prompts like "Are you sure?" to be a little ominous and creepy.

This week's demo is inspired by the hit horror movie, #Backrooms. This was another chance for me to practice with branching video scenarios, modal screens, and pairing footage created using Rise's new AI avatar feature with environments built in Google Flow.There are seven individual videos, which are shown/hidden depending on your choices. I found the AI text-to-speech in Storyline to be very versatile - the more you go round in circles, the more desperate the protagonist of the story sounds.
Different audio tracks are triggered at each decision point depending on how many times you have been around the corridors.
There are four different routes through the demo. Be warned, two of the routes end in jump scares. You only have a 66% chance of making it through to the 'good' ending on one of the routes.Fancy your chances in the Backrooms? CLICK HERE

larryvanwave-ff · Answer

Amazing, love the branching and flickering text effect. I am not sure how you are able to always come up with these great examples.

jonathan_hill · Answer

Thanks larryvanwave-ff​ - here's the Javascript I used to closely define the position of the captions and make them flicker like that:
const mobileView = window.innerWidth &lt; 768 || window.innerHeight &lt; 500;

var captionFontSize = 16;

// Define positions as percentages of screen/viewport, not story dimensions
var boxLeftPct   = 25;  // % of screen width 
var boxTopPct    = 25;  // % of screen height 
var boxWidthPct  = 50;  // % of screen width

function positionCaptions() {
    if (mobileView === true) {
        console.log("Mobile view detected - caption positioning skipped.");
        return;
    }

const css = `
        .caption-container {
            position: absolute !important;
            transform: none !important;
        }

.caption {
            position: absolute !important;
            left:      ${boxLeftPct}%        !important;
            top:       ${boxTopPct}%         !important;
            width:     ${boxWidthPct}%       !important;
            font-size: ${captionFontSize}pt !important;
            transform: none !important;
            z-index:   1000 !important;
        }

@keyframes glitchstutter {
            0%   { opacity: 0;   transform: translate(-10px,  4px) skewX(-8deg);  filter: blur(6px);   }
            8%   { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg);  filter: blur(3px);   }
            12%  { opacity: 0;   transform: translate(-8px,   2px) skewX(-6deg);  filter: blur(7px);   }
            18%  { opacity: 0.9; transform: translate( 8px,   3px) skewX( 6deg);  filter: blur(1px);   }
            22%  { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px);   }
            28%  { opacity: 1;   transform: translate( 6px,   0px) skewX( 4deg);  filter: blur(1px);   }
            35%  { opacity: 0.3; transform: translate(-6px,   4px) skewX(-6deg);  filter: blur(3px);   }
            42%  { opacity: 1;   transform: translate( 4px,  -2px) skewX( 3deg);  filter: blur(1px);   }
            50%  { opacity: 0.6; transform: translate(-3px,   1px) skewX(-2deg);  filter: blur(1px);   }
            60%  { opacity: 1;   transform: translate( 2px,   0px) skewX( 1deg);  filter: blur(0px);   }
            75%  { opacity: 0.95; transform: translate(-1px,  0px) skewX( 0deg);  filter: blur(0px);   }
            100% { opacity: 1;   transform: translate( 0px,   0px) skewX( 0deg);  filter: blur(0px);   }
        }

.caption-glitch {
            animation: glitchstutter 0.6s ease-out forwards !important;
        }
    `;

let style = document.getElementById('custom-caption-style');
    if (!style) {
        style = document.createElement('style');
        style.id = 'custom-caption-style';
        document.head.appendChild(style);
    }
    style.textContent = css;

var capEl = document.querySelector('.caption');
    if (capEl) {
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                capEl.classList.remove('caption-glitch');
                void capEl.offsetWidth;
                capEl.classList.add('caption-glitch');
            });
        });

observer.observe(capEl, {
            childList:     true,
            subtree:       true,
            characterData: true
        });

capEl.classList.add('caption-glitch');
    }

console.log(`Captions positioned at left:${boxLeftPct}% top:${boxTopPct}% width:${boxWidthPct}%`);
}

document.addEventListener('DOMContentLoaded', positionCaptions);
positionCaptions();
This code only kicks in when the demo is viewed on a desktop, as my experience has been that it's far trickier to manipulate the captions on smaller screens.

larryvanwave-ff · Answer

I tried your code, and it works wonderfully! I really appreciate you sharing the JavaScript for this. It's a fantastic way to add an interesting effect to closed captioning.😀

cydwalker_mwh · Answer

How fun, reminded me a bit of Severance with the weird rooms, hallways, and doors.

Example

Are you sure?

4 Replies

Recap

Confirmation Prompts in E-Learning #555

Challenge

Using Confirmation Prompts to Ask Learners, “Are You Sure?” in E-Learning #555

Getting Started with the E-Learning Challenges

Learn

Community Blog

Connect

Community

Company

Trust Center