How do I post random images in my survey and then embed the images using JS?

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?[c,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?(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=[];for(c||(a=[c++]);l>e;)g[e]=e++;for(e=0;l>e;e++)g[e]=g[f=s&f+a[e%c]+(b=g[e])],g[f]=b;(d.g=function(a){for(var b,c=0,e=d.i,f=d.j,g=d.S;a--;)b=g[e=s&e+1],c=c*l+g[s&(g[e]=g[f=s&f+b])+(g[f]=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(a[c],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 = ["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 = ["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 = [randomCellBG()];
    
    // Use math.random to randomly select traits for each dimension for candidate B
    traits_b = [randomCellBG()];
    
    // Create list of variables to use when setting attributes
    a_list = ["a1"]; 
    b_list = ["b1"]; 


    // set html values in conjoint table
    for(i=0;i<1;i++){
        document.getElementById(a_list[i]).src=traits_a[i];
        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("|"));


});

icon

Best answer by hy9fesh 18 May 2020, 21:44

View original

• HTML
• Javascript

• Like
• Quote
• Share

---

1 reply

H

+2

• hy9fesh
• Author
• 11 replies
• 3 years ago

  18 May 2020
• Answer

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?[c,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?(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=[];for(c||(a=[c++]);l>e;)g[e]=e++;for(e=0;l>e;e++)g[e]=g[f=s&f+a[e%c]+(b=g[e])],g[f]=b;(d.g=function(a){for(var b,c=0,e=d.i,f=d.j,g=d.S;a--;)b=g[e=s&e+1],c=c*l+g[s&(g[e]=g[f=s&f+b])+(g[f]=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(a[c],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 = [
"https://i.picsum.photos/id/0/5616/3744.jpg",
"https://i.picsum.photos/id/1/5616/3744.jpg"
];


var description2 = [
    "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 = [description[Math.floor(Math.random()*description.length)]]

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


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


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


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


});