Hot Spot image swap on translation selector change

w.patrick.gale · 2018-09-11T11:48:09+00:00

I have a survey serving both english and spanish, and one of the questions uses a Hot Spot image that maps anatomy of the foot with words embedded in the image describing the anatomical features. There is no built-in way that I'm aware of to have a different Hot Spot image for each language so I am using a javascript change event on the language selector to swap the images. Below is what my code looks like. You can find the URL to the graphics you upload by copying the image URL from the Graphics Library. Also make sure you add the code to the addOnload function because it will not work using the addOnReady function. I also just realized that the solution below will most likely not work using the Qualtrics offline application, but I do not need that for my purposes (however using the alternate method I mention above would probably solve that problem). Qualtrics.SurveyEngine.addOnload(function() { // get document objects var objLangSel = jQuery("select[id='Q_lang']"); // language selection var objFootImg = jQuery("img[class='HotSpotImage']"); // hotspot image // when the language selector changes objLangSel.change(function() { // if english language selected then display english image, else display the spanish image if (objLangSel.val()=='EN'){ objFootImg.attr('src', 'https://[subdomain].qualtrics.com/WRQualtricsControlPanel/Graphic.php?IM=[IM string]'); } else { objFootImg.attr('src', 'https://[subdomain].qualtrics.com/WRQualtricsControlPanel/Graphic.php?IM=[IM string 2]'); } }); });

Hot Spot image swap on translation selector change | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded