Fake a Blinking Cursor

Hi Kris,... firstly, respect for mentioning DOS and the command prompt - takes me back to my good old days of games programming! ;)

Second, you can absolutely fake a blinking cursor in a text field. The blink is fairly easy to do. Set up two layers, each one 0.5 seconds long (thats about how long a "blink" lasts)

On Layer 1 you will show your white cursor

On Layer 2, it wont show anytihng (but the timeline is still set to 0.5s)

Now on Layer 1, add a trigger that says SHOW LAYER "Layer 2" WHEN TIMELINE ENDS on THIS LAYER

And the same for Layer 2 (except of course you are showing Layer 1 when timeline ends)

This is a nice little timer hack, so SL will automatically swap between the layers at the right time and it will look like a blinking cursor.

If you then need to MOVE your cursor as the user types (just like in DOS), then I would just use a state in Layer 1 for each position of your cursor (1,2,3,4,5... etc)

Once you have the states set up, you just need to show the correct state WHEN TIMELINE STARTS on Layer 1. TO do this, you could use JS if you are comfortable with it, or a Numeric SL variable could hold the character count of the text field, and  show the corresponding blinking cursor state.

Does that help at all?

Respect!

If it's timed on the timeline, doesn't it stop blinking when the timeline ends? I'd like it to blink continuously until someone types in the text enter field.

No it will blink until the Second Coming if you leave it XD

Each layer will call the other, so it will show, then hide, then show, hide, etc etc

Its a great little timer hack that I use alot for timers, countdowns etc.

You could also insert a pipe or vertical bar (|), align it with the cursor, and animate it with CSS. Initially, hide the pipe. When the text field is not in focus, the pipe will show and start blinking. When the text field is in focus, the pipe will be hidden, and the cursor will show. I know it might be a bit much, but it's the only solution I can think of right now. I did not have time to try Andrew's solution but it looks like it could work too. It sounds like JAWS is automatically focusing on the data entry field as soon as it’s loaded, which might be interfering with your testing or development. I think the issue is due to the removal of the data entry field placeholder. To fix it, create a new data entry field, remove the placeholder from this new field, position it off-screen, and exclude it from the focus order. This way your original data entry field will not get immediate focus. Anyway, a fake cursor code:

const addCSS = css => {
    const style = document.createElement("style");
    style.textContent = css;
    document.head.appendChild(style);
};

addCSS(`
    .blink {
    -webkit-animation: blink 1.1s step-start infinite;
            animation: blink 1.1s step-start infinite;
}

@-webkit-keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}
`);

const pipe = document.querySelector('[data-acc-text="pipe"]');
const textField = document.querySelector('.acc-textinput');

textField.addEventListener('focus', function() {
    pipe.classList.remove('blink');
    pipe.classList.add('hidden');
});

textField.addEventListener('blur', function() {
    pipe.classList.remove('hidden');
    pipe.classList.add('blink');
});

How do you add css to Storyline?
CSS is added dynamically with JavaScript. You can find the code in my previous post. This approach would only be relevant if you decide to use a pipe/vertical bar solution to ensure continuous cursor/fake cursor blinking.

What is the placeholder? The "Type your response here" text?
Yes.

You wrote this: I think the issue is due to the removal of the data entry field placeholder
Put the placeholder back and run the slide with JAWS to see what happens.

You wrote this: This way your original data entry field will not get immediate focus. 
Having two data entry fields on the slide will prevent immediate focus on the first one without a placeholder. Place the second field off-screen and remove it from the focus order to ensure it is not visible on the slide or to screen readers (it won't be outlined). Keep in mind that this is not a standard procedure; we are doing this solely to implement the continuous cursor blinking effect. You can see it in action in the attached video.   

P.S. for the project file above, simply run it and type - the text field is already auto selected (focussed) for you, so you can just start typing.

Ive added up to 10 positions for the cursor. You can add way more if you want, but I was just messing around for now.

Finally, if you open up the console window (press F12 when previewing the slide, then click the CONSOLE tab) , you will see some JS messages being shown which monitor the character count of the input field in realtime (using an eventListener)

Now.... how do we get it to play Doom 2?! :P

Andrew, do you think it's possible to use your technique with a freeform quiz slide (Pick 1)?

Absolutely! The technique should be pretty portable to any slide/question type.

Are you thinking for something like they enter in the answer and it checks to see if they are correct/incorrect?

I should have tested before texting! Yes, it works with the quiz slide. I wish there was a way to get rid of the vertical bar. 

What you've done is really cool. Thank you so much for teaching me something new!

Yeah I was thinking the same thing about the vertical i bar... maybe we could actually focus on another text field that is off slide (so invisible).
As the user types there, we copy the value of that text field immediately in to another text field that IS on screen.

That might work?!.... :D

I'll leave that juicy nugget up to you! Good luck with the development. It sounds intriguing!