Choice Based Conjoint analysis with pictures

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