Adding in a back-ground image for ChoiceStructure | XM Community
Solved

Adding in a back-ground image for ChoiceStructure

  • 29 April 2021
  • 2 replies
  • 77 views
H

I am trying to insert a back-ground image behind the ChoiceStructure for individual questions (so for some question answer options but not others). Is there a simple way to do this? I am not proficient in CSS or HTML but am happy to make small edits to suit.
I was able to do this behind ALL answer options using CSS as follows:
.ChoiceStructure {
background-image:url("URL");
background-repeat: no-repeat;
width: 100%;
height:100%;
background-position: center center;
text-align:center;
margin:auto;
padding:0;
}

icon

Best answer by faris 29 April 2021, 23:18

View original

2 replies

faris
Rank
Userlevel 2
Badge +3

helzpieOT Sounds like you want to use Javascript.
You can use the code below just be sure to swap out the URL value to the desired URL.
Qualtrics.SurveyEngine.addOnReady(function() {
    var qid = this.questionId;
    var url = 'INSERT_URL_HERE';
    document.querySelector('#'+qid+' .ChoiceStructure').style.background = 'url("'+url+'") no-repeat center center';
    document.querySelector('#'+qid+' .ChoiceStructure').style.width = '100%';
    document.querySelector('#'+qid+' .ChoiceStructure').style.height = '100%';
    document.querySelector('#'+qid+' .ChoiceStructure').style.margin = 'auto';
    document.querySelector('#'+qid+' .ChoiceStructure').style.padding = '0';
});

If you don't know how to add JS to a question, see support page: https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/

H

Awesome thank you so much, works exactly as I expected. ☺️

Leave a Reply


Terms & Conditions