Typewriter from old Qualtrics script broken | XM Community
Skip to main content
Question

Typewriter from old Qualtrics script broken


Forum|alt.badge.img+1

The javascript below used to work with the old Qualtrics, but no longer does. Can anyone suggest how to repair it? Javascript console is throwing an error related to $(document).ready(function()). GPT suggested removing that code but it didn’t work. 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    $(document).ready(function() {
        var $boxel = $("#textgoeshere");

        var typeWriter = function(selector, type, interval, callOnDone, callwait) {
            "use strict";

            var el = document.querySelectorAll(selector), // Getting elements in the DOM
                i = 0,
                len = el.length, // Length of element on the page
                list = [], // List of elements on the page in the DOM
                a,
                all,
                text,
                start,
                end,
                nextText,
                style,
                clear;
            for (; i < len; i++) {
                list.push(el[i]); // Pushing the element in the list array
            }
            for (a in list) {
                all = list[a]; // List of all element
                text = all.innerHTML += " <span id='cursor'>|</span>"; // InnerHTML of the elements 
                start = 0; // Start index of the text in the elements 
                end = 0; // End index of the text in the elements
                style = document.createElement("style");
                document.head.appendChild(style);
                //Setting the default interval to 100 when interval is not set by the user
                if (typeof interval === "undefined") {
                    interval = 100;
                }
                if (arguments[1] === "true") {
                    clear = setInterval(function() { // Animation start
                        var newText = text.substr(start, end);
                        all.innerHTML = newText += " <span id='cursor'>|</span>";
                        if(end === 0){
                            $boxel.css("visibility", "visible");
                        }
                        end = end + 1; //loops through the text in the element
                        // Insert stylesheet to the document to animate cursor 
                        style.sheet.insertRule("@-webkit-keyframes cursor {0% { opacity : 1;}100% { opacity : 0;}}", 0);
                        style.sheet.insertRule("@keyframes cursor {0% { opacity : 1;}100% { opacity : 0;}}", 0);
                        cursor.style.fontSize = "30px";
                        cursor.style.fontWeight = "bold";
                        cursor.style.webkitAnimation = "cursor 0.5s infinite";
                        cursor.style.animation = "cursor 0.5s infinite";
                        all.scrollTop = all.scrollHeight;
                        if (newText === text) {
                            clearInterval(clear); // Animation end
                            setTimeout(callOnDone, callwait);
                        }
                    }, interval);
                }
                return all;
            }
        };

        // replace the relative size of the div with a fixed size to prevent the firefox issue where it goes on forever.
        var height = $boxel.height() + 80;
        $boxel.css("height", height + "px");


        // SC: This is where we populate the text.
        // We can pull from a database, etc. in the future.
        var textToShow = [
"You are playing in the Championship Soccer Tournament.",
"There are about 25 minutes left in the match and your team is tied.",
"If you win this game, your team will advance to the Finals.",
"As you are running down the field, a player from the opposing team kicks the ball in your direction.",
"You leap up for a header to win the ball. ",
"A player from the opposing team jumps up to challenge you, and you take a hard shot to the head.",
"Immediately after the hit, you open your eyes and see stars.",
"You hear ringing in your ears.",
"As you begin to move, your head starts to hurt.",
"You feel pressure developing in your head.",
"Once up on your feet, you realize that you are disoriented.",
"A few seconds pass, and you feel dizzy as you begin to jog.",
"You see that your opponents have won possession of the ball and are moving quickly down field."

        ];

        var idx = 0;
        var callbackfn = function(){
        	if(idx >= textToShow.length){
        		return;
        	}

            $boxel.css("visibility", "hidden");
        	var d = document.getElementById("textgoeshere");
        	d.innerText = textToShow[idx];

        	typeWriter("#textgoeshere","true",100, arguments.callee,1500);

        	idx++;
        };

        callbackfn();
    });

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

 

0 replies

Be the first to reply!

Leave a Reply