Hello, I would like the size of an image to increase or decrease depending on whether the person hits the "I" or "M" key.
I would like to reverse the keys for some questions/images. Each image is in a separate question.
Thanks-
Page 1 / 1
Can't take credit for this, but it works. You need to replace #$# with the specific image tag from Qualtrics. Below shows place keepers for two images following this "const images = ["
Qualtrics.SurveyEngine.addOnReady(function()
{
(function() {
const images = [
"https://survey.az1.qualtrics.com/CP/Graphic.php?IM=#$# ",
"https://survey.az1.qualtrics.com/CP/Graphic.php?IM=#$# ",
];
const defaultWidth = 400;
const frame = document.getElementById('frame');
const msg = frame.appendChild(document.createElement("h3"));
const img = frame.appendChild(document.createElement("img"));
var awaiting = false;
var loaded = true;
var counter = 0;
var loadedTs;
frame.style["text-align"] = "center";
img.style.margin = "3em auto";
msg.innerHTML = "Press ENTER to start";
function resize(img, factor) { img.style.width = (defaultWidth * factor) + "px"; }
img.onload = function() {
img.style.height = "auto";
resize(img, 1);
img.style.display = "block";
loadedTs = Date.now();
awaiting = true;
loaded = true;
msg.innerHTML = "Press I to zoom in and M to zoom out";
}
document.addEventListener('keydown', function(event) {
const ts = Date.now();
if (!awaiting && loaded && event.keyCode == 13) {
img.style.display = "none";
loaded = false;
if (counter < images.length) {
img.src = images[counter++];
msg.innerHTML = "Loading...";
} else {
msg.innerHTML = "Done!";
}
} else if (awaiting) {
if (event.keyCode === 73) { resize(img, 2); }
else if (event.keyCode === 77) { resize(img, 0.5); }
else { return; }
awaiting = false;
msg.innerHTML = "Press ENTER for next image";
Qualtrics.SurveyEngine.setEmbeddedData('Img'+counter, ts-loadedTs);
}
});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.