Custom javascript to flash images from a github directory for a set time and then auto advance | XM Community
Skip to main content

Hi all, 

I’m looking to create a question in Qualtrics that requires an image to be flashed for 100 milliseconds and then another image to be flashed for another 100 milliseconds - this should auto-advance to another question where respondents will be able to answer a multiple choice question about the images flashed. 

I want to pull the images from two separate URLs - I was thinking of either hosting the images on github or I can upload them to the Qualtrics library and pull them from there but they should be randomly pulled (not sure how that would work via the latter option). 

Can anyone help out with the javascript required for something like this? 

Please and thanks!!

Try this JS:

Qualtrics.SurveyEngine.addOnload(function () {
this.hideNextButton();
});
Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.getQuestionContainer();

//Add links to images here
const imgLinks = [
"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_cCQ21dgfJJU1JDT",
"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_03uFE9bjTVeXlad",
"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9LTvOOtrgXEorQh",
"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9z9n5amvozfILqZ",
"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0jH3QAOZh6Av7Dv"
];

// How many images do you want to show?
const numImages = 2;

// Duration of the flash in ms
const flashTime = 200;

const images = [];

for (let i = 0; i < numImages; i++) {
const random = Math.floor(Math.random() * imgLinks.length);
const img = imgLinks.splice(random, 1).pop();
images.push(img);
}

const imageHTMLs = images.map((url, index) => {
const html = '<div id="img_' + index + '" style="text-align: center;opacity:0"><img src="' + url + '" width="80%" style="margin: auto" /></div>';
return html;
});

imageHTMLs.forEach((item) => {
qc.insertAdjacentHTML("beforeend", item);
});

const allImages = Array.from(qc.querySelectorAll("img"));
allImages.forEach((item) => {
item.style.display = "none";
item.parentElement.style.opacity = 1;
});

setTimeout(() => {
const startTime = Date.now();
for (let i = 0; i < allImages.length; i++) {
const image = allImages[i];
setTimeout(() => {
image.style.display = "";
}, i * flashTime);
setTimeout(() => {
image.style.display = "none";
}, flashTime + i * flashTime);
}
setTimeout(() => {
quest.clickNextButton();
}, flashTime + allImages.length * flashTime);
}, 500);
});

Demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_7OMuuVVOdTtgmma?Q_SurveyVersionID=current


This was very helpful, thank you! Do you know if this will record which image is selected? Or if I’m able to locate the URLs once data is collected? Or maybe there is an option for setting embedded data? 


Leave a Reply