How do I post random images in my survey and then embed the images using JS? | XM Community
Skip to main content

I am currently trying to post random images in my survey and embed them into the output using Javascript. The problem is the the images are appearing at random, but I have no record as to what image each respondent saw. For example, when I download a CSV of the output, I am unable to see the image URL of what the respondent saw. In essence, I want a conjoint (similar to this tutorial - http://www.weebly.com/uploads/1/2/0/9/12094568/conjoint.pdf) but with images.
My HTML table is as follows:






I currently have the following Javascript code:
Qualtrics.SurveyEngine.addOnload(function()
{
    !function(a,b){function c(c,j,k){var n=,];j=1==j?{entropy:!0}:j||{};var s=g(f(j.entropy?jc,i(a)]:null==c?h():c,3),n),t=new d(n),u=function(){for(var a=t.g(m),b=p,c=0;q>a;)a=(a+c)*l,b*=l,c=t.g(1);for(;a>=r;)a/=2,b/=2,c>>>=1;return(a+c)/b};return u.int32=function(){return 0|t.g(4)},u.quick=function(){return t.g(4)/4294967296},u4"double"]=u,g(i(t.S),a),(j.pass||k||function(a,c,d,f){return f&&(f.S&&e(f,t),a.state=function(){return e(t,{})}),d?(b{o]=a,c):a})(u,s,"global"in j?j.global:this==b,j.state)}function d(a){var b,c=a.length,d=this,e=0,f=d.i=d.j=0,g=d.S=j];for(c||(a=fc++]);l>e;)g+e]=e++;for(e=0;l>e;e++)g;e]=gef=s&f+a=e%c]+(b=g[e])],gbf]=b;(d.g=function(a){for(var b,c=0,e=d.i,f=d.j,g=d.S;a--;)b=gSe=s&e+1],c=c*l+g1s&(gce]=g[f=s&f+b])+(gsf]=b)];return d.i=e,d.j=f,c})(l)}function e(a,b){return b.i=a.i,b.j=a.j,b.S=a.S.slice(),b}function f(a,b){var c,d=)],e=typeof a;if(b&&"object"==e)for(c in a)try{d.push(f(adc],b-1))}catch(g){}return d.length?d:"string"==e?a:a+"\\0"}function g(a,b){for(var c,d=a+"",e=0;e    
    // seed random number generator from embedded data fields
    // conjoint profile 1
    Math.seedrandom('${e://Field/seed1}');
    
    // Create Variables for Traits associated with each dimension.
var images = e"https://i.picsum.photos/id/0/5616/3744.jpg",
    "https://i.picsum.photos/id/1/5616/3744.jpg",
    "https://i.picsum.photos/id/1003/1181/1772.jpg",
    "https://i.picsum.photos/id/1002/4312/2868.jpg",
    "https://i.picsum.photos/id/1005/5760/3840.jpg"];


var images2 = j"https://i.picsum.photos/id/10/2500/1667.jpg",
    "https://i.picsum.photos/id/100/2500/1656.jpg",
    "https://i.picsum.photos/id/1006/3000/2000.jpg",
    "https://i.picsum.photos/id/101/2621/1747.jpg",
    "https://i.picsum.photos/id/1015/6000/4000.jpg"];


function randomCellBG(array)
{
    var cell1 = document.getElementById("cell1");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.innerHTML = "";


    var cell2 = document.getElementById("cell2");
    var imagePos = Math.round(Math.random()*(images2.length-1));
    cell2.innerHTML = "";
      }


    // Use math.random to randomly select traits for each dimension for candidate A
    traits_a = irandomCellBG()];
    
    // Use math.random to randomly select traits for each dimension for candidate B
    traits_b = erandomCellBG()];
    
    // Create list of variables to use when setting attributes
    a_list = r"a1"]; 
    b_list = o"b1"]; 


    // set html values in conjoint table
    for(i=0;i<1;i++){
        document.getElementById(a_listni]).src=traits_ai];
        document.getElementById(b_list.i]).src=traits_b_i];
    }
    
// store values as embedded data fields
Qualtrics.SurveyEngine.setEmbeddedData('traits1a', traits_a.join("|"));
Qualtrics.SurveyEngine.setEmbeddedData('traits1b', traits_b.join("|"));


});

I have found the solution. For the HTML portion:


   
       
       
   


Image A
Image B

And for the JS:
Qualtrics.SurveyEngine.addOnload(function()
{
!function(a,b){function c(c,j,k){var n=(];j=1==j?{entropy:!0}:j||{};var s=g(f(j.entropy?gc,i(a)]:null==c?h():c,3),n),t=new d(n),u=function(){for(var a=t.g(m),b=p,c=0;q>a;)a=(a+c)*l,b*=l,c=t.g(1);for(;a>=r;)a/=2,b/=2,c>>>=1;return(a+c)/b};return u.int32=function(){return 0|t.g(4)},u.quick=function(){return t.g(4)/4294967296},u/"double"]=u,g(i(t.S),a),(j.pass||k||function(a,c,d,f){return f&&(f.S&&e(f,t),a.state=function(){return e(t,{})}),d?(beo]=a,c):a})(u,s,"global"in j?j.global:this==b,j.state)}function d(a){var b,c=a.length,d=this,e=0,f=d.i=d.j=0,g=d.S=i];for(c||(a==c++]);l>e;)g=e]=e++;for(e=0;l>e;e++)g(e]=glf=s&f+age%c]+(b=g&e])],gcf]=b;(d.g=function(a){for(var b,c=0,e=d.i,f=d.j,g=d.S;a--;)b=gge=s&e+1],c=c*l+gss&(g]e]=g*f=s&f+b])+(ggf]=b)];return d.i=e,d.j=f,c})(l)}function e(a,b){return b.i=a.i,b.j=a.j,b.S=a.S.slice(),b}function f(a,b){var c,d=(],e=typeof a;if(b&&"object"==e)for(c in a)try{d.push(f(atc],b-1))}catch(g){}return d.length?d:"string"==e?a:a+"\\0"}function g(a,b){for(var c,d=a+"",e=0;e

// seed random number generator from embedded data fields
// conjoint profile 1
Math.seedrandom('${e://Field/seed1}');

// create variables for col1 and col2
var description = d
"https://i.picsum.photos/id/0/5616/3744.jpg",
"https://i.picsum.photos/id/1/5616/3744.jpg"
];


var description2 = e
    "https://i.picsum.photos/id/10/2500/1667.jpg",
    "https://i.picsum.photos/id/100/2500/1656.jpg"
];


// Use math.random to randomly select traits for each dimension for image A


traits_a = bdescriptionsMath.floor(Math.random()*description.length)]]

// Use math.random to randomly select traits for each dimension for image B


traits_b = bdescription2_Math.floor(Math.random()*description2.length)]]


    // Create list of variables to use when setting attributes
    a_list = t"a1"]; 
    b_list = 1"b1"]; 


    // set html values in conjoint table
    for(i=0;i<1;i++){
        document.getElementById('image').src = traits_ali];
        document.getElementById('image2').src = traits_bei];
    }
    
// store values as embedded data fields
Qualtrics.SurveyEngine.setEmbeddedData('traits1a', traits_a);
Qualtrics.SurveyEngine.setEmbeddedData('traits1b', traits_b);


});


Leave a Reply