ChangeBlindnessInQualtricsJquery.js

var qthis;
var globalInterval;
var counter = 0;
var continuecounter = 0;

Qualtrics.SurveyEngine.addOnload(function() {
    qthis = this;
});

jq(window).load(function() {
    jq('#basicdiv').waitForImages(function() {
        doConvert();
    });
});

function doConvert() {
    imgArray = jq("img");
    for (var i = 0; i < imgArray.length; i++) {
        convertImageToCanvas(imgArray[i]);
    }
    setTimeout(function() {
        globalInterval = setInterval(showHide, 300);
    }, 300);
}

jq.Event.prototype.rgb = function() {
    var x = this.offsetX || (this.pageX - jq(this.target).offset().left);
    var y = this.offsetY || (this.pageY - jq(this.target).offset().top);
    if (this.target.nodeName !== "CANVAS") return null;
    return jq('#imgmask').get(0).getContext('2d').getImageData(x, y, 1, 1).data;
}

function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    jq(canvas).attr('id', jq(image).get(0).id)
    jq(image).replaceWith(canvas);
    jq(canvas).on('click', function(e) {
        if (Array.prototype.join.call(e.rgb(), ',') != "255,255,255,255") {
            window.clearInterval(globalInterval);
            setTimeout(function() {
                qthis.clickNextButton();
            }, 2000);
            jq('#psych').html("<strong><span style='display:block;color:#000000;background-color:#FFFFFF;padding:10px;font-size:35px;z-index:99;position:absolute;top:50px;right:50px;'>right</span></strong>").show();
        } else {
            jq('#psych').html("<strong><span style='display:block;color:#000000;background-color:#FFFFFF;padding:10px;font-size:35px;z-index:99;position:absolute;top:50px;right:50px;'>wrong</span></strong>").show().delay(1000).hide(0);
        }
    })
}

function showHide() {
    continuecounter++;
    if (continuecounter > 133) {
        jq('#psych').html("<strong><span style='display:block;color:#000000;background-color:#FFFFFF;padding:10px;font-size:35px;z-index:99;position:absolute;top:50px;right:50px;'>time is up</span></strong>").show();
        window.clearInterval(globalInterval);
        setTimeout(function() {
            qthis.clickNextButton()
        }, 2000);
    }
    if (counter >= 0 && counter <= 5) {
        jq('#imgself2').css('opacity', '1');
        jq('#imgself1').css('opacity', '0');
        counter++;
        return;
    }
    if (counter == 6) {
        jq('#imgself1').css('opacity', '0');
        jq('#imgself2').css('opacity', '0');
        counter++;
        return;
    }
    if (counter > 6 && counter <= 11) {
        jq('#imgself1').css('opacity', '1');
        jq('#imgself2').css('opacity', '0');
        counter++;
        return;
    }
    if (counter == 12) {
        jq('#imgself1').css('opacity', '0');
        jq('#imgself2').css('opacity', '0');
        counter = 0;
        return;
    }
}