Place an image using Javascript at the top of a question, or at least not at the very bottom | XM Community
Skip to main content

Hi all,
I'm working on a survey where I am adding images via Javascript (I cannot add the images manually because there are hundreds of images based on different conditions).
I have done the following where I have a block with two separate questions, one blank question with Javascript to display the image, and then below the text of the question.
image.pngHowever, when I preview the survey, the image always appears at the very bottom of the page, no matter how I reorder the blocks.
image.pngHere is the Javascript I've written to display the image:
Qualtrics.SurveyEngine.addOnload(function()
{

function display_image(src, width, height) {
  var a = document.createElement("img");
  a.src = src;
  a.width = width;
  a.height = height;
  document.body.appendChild(a);
}

display_image('URL GOES HERE', 
         770, 
         385);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
Any ideas? I can't seem to find any advice on this online.

The reason it is always at the bottom is because you are appending it to the bottom of the element.
This would do what you are attempting:
jQuery("#"+this.questionId+" .QuestionText").prepend("");
Since you are using a loop & merge, and I'm guessing the image url is a loop & merge field, I don't think you need JS at all. You could probably use something like this question text html (where field 1 is a text description and field 2 is the image url):
${lm://Field/1}


https://community.qualtrics.com/XMcommunity/discussion/comment/46722#Comment_46722Thanks very much!

Leave a Reply


Terms & Conditions