Hey Community!
I am trying to implement a choice based conjoint survey in qualtrics and I need your help.
I have 4 different pictures and I want to pair them and show each combination (6 in total) to all the survey participants. Then the participants need to take preferences, so they have to click on the picture they like more compared to the other picture. Further this setting needs to be complete randomized.
Now I ask my self It is even possible to click on a picture to take a choice? And is it possible to ad more then 1 picture to a block at a time?
I hope you can help me
kind regards
yaaayannu
Page 1 / 1
Yes, it is possible! Here's where you find it, under multiple choice question type:
!
So use that and just 2 responses for each multiple choice question. Good luck, sounds like a fun conjoint to take!
!
So use that and just 2 responses for each multiple choice question. Good luck, sounds like a fun conjoint to take!
Hi @yaaayannu,
if you'd like to have there just images without the radio buttons, it's little bit more complicated, but also possible. You could assign ids to your images and then add an onclick events to them. The advantage would be
1) more flexible layout of the images
2) randomization can be done using Loop&merge and it is not necessary to design six blocks which are almost exactly the same
3) many other functions can be added easily: you could for example randomize which image will be on the left and which on the right side, make a colorful border around currently selected image, autoadvance when user clicks the next button...
Here is an example using 3 images:
1) The simplest possible HTML:
<img id="i1" src="">
<img id="i2" src="">
2) Loop&merge:
!
Here are ids of the images. In this version of code it has to be numbers from 1 to the number of the images.
3) The code:
Qualtrics.SurveyEngine.addOnReady(function()
{
var URLs = ["url1", "url2", "url3"]; //your URLs
var img1 = Number( "${lm://Field/1}"); //without using the function Number you could not use ids of images as indexes
var img2 = Number("${lm://Field/2}");
var el1 = document.getElementById("i1");
var el2= document.getElementById("i2");
el1.src=URLs[img1-1]; //Put the correct url to the HTML tag of the image
el2.src=URLs[img2-1];
var pref = "";
el1.onclick = function(){ //assign the id of the image which was clicked to a variable
pref = img1;
return (pref);}
el2.onclick = function(){
pref = img2;
return (pref)}
document.getElementById("NextButton").onmousedown = function () {
var results = "${e://Field/results}" + img1 + "_" + img2+ ":" +pref + "," ;
Qualtrics.SurveyEngine.setEmbeddedData("results", results);} //Send the images which was most recently clicked when the user clicks the NextButton
});
Note:Do not forget to define the embedded field "results" in the survey flow
if you'd like to have there just images without the radio buttons, it's little bit more complicated, but also possible. You could assign ids to your images and then add an onclick events to them. The advantage would be
1) more flexible layout of the images
2) randomization can be done using Loop&merge and it is not necessary to design six blocks which are almost exactly the same
3) many other functions can be added easily: you could for example randomize which image will be on the left and which on the right side, make a colorful border around currently selected image, autoadvance when user clicks the next button...
Here is an example using 3 images:
1) The simplest possible HTML:
<img id="i1" src="">
<img id="i2" src="">
2) Loop&merge:
!
Here are ids of the images. In this version of code it has to be numbers from 1 to the number of the images.
3) The code:
Qualtrics.SurveyEngine.addOnReady(function()
{
var URLs = ["url1", "url2", "url3"]; //your URLs
var img1 = Number( "${lm://Field/1}"); //without using the function Number you could not use ids of images as indexes
var img2 = Number("${lm://Field/2}");
var el1 = document.getElementById("i1");
var el2= document.getElementById("i2");
el1.src=URLs[img1-1]; //Put the correct url to the HTML tag of the image
el2.src=URLs[img2-1];
var pref = "";
el1.onclick = function(){ //assign the id of the image which was clicked to a variable
pref = img1;
return (pref);}
el2.onclick = function(){
pref = img2;
return (pref)}
document.getElementById("NextButton").onmousedown = function () {
var results = "${e://Field/results}" + img1 + "_" + img2+ ":" +pref + "," ;
Qualtrics.SurveyEngine.setEmbeddedData("results", results);} //Send the images which was most recently clicked when the user clicks the NextButton
});
Note:Do not forget to define the embedded field "results" in the survey flow
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.