How to change the background according based on an embedded data? | XM Community
Skip to main content
Solved

How to change the background according based on an embedded data?

  • 28 April 2021
  • 5 replies
  • 229 views

I would like to change my background based on an Embedded Data.


If the responder has as embded data Product=moto the background will be a motorcycle and if the responder has as embded data Product=bike the background will be a bike.
Can you guide me or tell me if there is a possibility to do this or if some of them managed to do it.
Thanks


I would like to change my background based on an Embedded Data.
If the responder has as embded data Product=moto the background will be a motorcycle and if the responder has as embded data Product=bike the background will be a bike.
Can you guide me or tell me if there is a possibility to do this or if some of them managed to do it.
Thanks


Yasmine asked me this via private message. I answered and it is working.


TomG Would you be willing to share how you set that up?
Thanks!


https://www.qualtrics.com/community/discussion/comment/36955#Comment_36955My advice to her was in two messages...

Yes, you can do this. In the survey flow set an embedded data field (e.g. bgUrl) to the value of a motorcycle or bike image url based on the value of Product.

Add JavaScript to your survey header that changes the background properties of the appropriate element to use the image as a background. Pipe the bgUrl value into your script.

Then she sent me a picture of her survey flow and a picture of some JS. My reply was:
If you are going to hard code the urls into the script like you have, then you don't need to set embedded data fields for them.

As far as your script goes, you used embedded data field Brand, not Product. You want to put the script in the header so it applies to every page in the survey. It would be something like:



For this solution to work, there must be a page break between the point in the survey where the Embedded Data Field is set and where it is used.
In order to accomplish what you want, you need to use JScript.
Before the question where you need to set the background, put the following code (assuming the EmbeddedDataField is called "Product"):
Qualtrics.SurveyEngine.addOnload(function()
{
var product = "${e://Field/Product}";
if (product == "moto"){
Qualtrics.SurveyEngine.setEmbeddedData('url', YOUR_MOTO_PIC_URL);
};
if (product == "bike"){
Qualtrics.SurveyEngine.setEmbeddedData('url', YOUR_BIKE_PIC_URL);
};
});
Like this, the URL of the image will be assigned based on the value of the EmbeddedDataField.
In the question where you want the background to be set, paste the following:
jQuery("#Questions").css("background-image","url('${e://Field/url}')");
The script changes the background of the page wi
This will change the background of the current page using the picture linked through ${e://Field/url}.
If you need this for more than one page you have to paste this code on each page you need it. Similarly, to change the background assigned by the code you need to change the URL contained in ${e://Field/url}.


Leave a Reply