Solved

Adding in a back-ground image for ChoiceStructure

Forum|Forum|4 years ago
April 29, 2021
2 replies
113 views

helzpieOT

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;
}

Best answer by faris

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/

+3

faris
QPN Level 2 ●●
Answer
Forum|Forum|4 years ago
April 29, 2021

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/