Text over image? | XM Community
Skip to main content

Hi XM Community!

 

I am trying to design a survey that is based around the following image:

 

https://drive.google.com/file/d/1mmiEROJw2n8embXkae-KW6jek6vcGVYz/view?usp=sharing

 

I want to set-up text boxes in each of the 4 quadrants for the respondents to type in. I contacted Qualtrics support and advised this was not possible.

 

Option B-- I have the respondent type in a traditional text box not on the image but then have that text populate on the image in subsequent questions (maybe with piped text)? Support also advised this wasn’t possible.

 

Any ideas for workarounds? I’ll admit to not being good with java / html. 

Hi, I tackled a post once about watermarking images that I think might help you with option B. If you use the piped text approach for each of the 4 open ends, you could create a JS var for each like in the below JS to display it on top of the image. Update the QIDs for your open ends. Be sure to add the code to the Header and update the question text to include a div with the IMGID id as mentioned in the other post.

setTimeout(function () { //ensure font faces are loaded

var EMB1 = "${q://QID35/ChoiceTextEntryValue}";
var EMB2 = "${q://QID36/ChoiceTextEntryValue}";
var EMB3 = "${q://QID37/ChoiceTextEntryValue}";
var EMB4 = "${q://QID38/ChoiceTextEntryValue}";

var text = watermark.text;

watermark(['https://yourbrand.az1.qualtrics.com/CP/Graphic.php?IM=IM_38Y8dGQPZMMQbMW'])
        .image(text.lowerRight(EMB1, '48px Josefin Slab', '#fff', 1))
        .render()
        .image(text.lowerLeft(EMB2, '48px Josefin Slab', '#fff', 1))
	    .render()
        .image(text.upperRight(EMB3, '48px Josefin Slab', '#fff', 1, 48))
	    .render()
        .image(text.upperLeft(EMB4, '48px Josefin Slab', '#fff', 1, 48))
        .then(function (img) {
          var pre = document.querySelector('#IMGID');
          pre.parentNode.insertBefore(img, pre);
        });

}, 100);

 

 

Leave a Reply


Terms & Conditions