How do I filter out images for randomization without replacement?

Hey hy9fesh! The slice looks okay to me. But to be sure, you should put some console.log() between each shuffle so you can see what the array looks like while the code is running. A trick I learned recently was adding a line 'debugger;' anywhere in your code will create a breakpoint in the browser and you can step through your running code just like a local IDE. Super useful for tracking variable values. I also recommend using console.log() with getEmbeddedData() to ensure the embedded data fields are being set correctly.

Actually, if you'd like me to take a look, you can export your survey to a qsf file and upload it here. I won't have your photos, but I can run through the variables and test the array.

https://community.qualtrics.com/XMcommunity/discussion/comment/39980#Comment_39980sample_preferences_survey.qsfIn the current version of the code, the image in the first block just won't load at all, and the subsequent images seem to repeat either the letter or the number.

https://community.qualtrics.com/XMcommunity/discussion/comment/39978#Comment_39978I apologize that I'm new to JS, but could you please elaborate on where I should place the console.log()?

Oh, certainly! When you're previewing a survey and trying to figure out variable values, console.log will write out a custom log message to your browser's console. Here's a decent article on accessing your browser's developer tools and thereby accessing the console log. Really, when previewing a survey, it's just right clicking anywhere on the page and selecting "Inspect Element". This will open the dev tools for the browser to the Elements tab. The tab just to the right is called Console and that's the one you're after. The log messages you write into the JavaScript (for all questions on a page) will show up here. There's a lot more to it, but that's the gist. In the JS on the question, you can add messaging in that look like this:
console.log("The code got here");
or logging a variable:
console.log("myArray is : " + myArray);
I add these log messages through my JS after I set a variable to make sure 1) it did indeed pick up a value and 2) it's the value I think it should be.

Let me take a look at your survey and see what I can dig up.

For testing your array, I found the easiest method was simply add some extra embeddedData fields to the top of each question before your img. So the source looks like:
${e://Field/firstImage}

${e://Field/firstImageName}


This gives you a very quick and dirty view (top-left corner, above the img) of what images your array is actually selecting.

I ran through this a few times; one time, I got C1, C3, A2, D4. Are the 2 C's in that scenario okay or are they an unwanted outcome? Another way of saying it would be you only want one photo from A and one number to be available? So if A1 is the first photo, the second photo can not be B1, C1, or D1 (since 1 was "already used")? Sorry if that's confusing, it's a bit tricky to spell out :)

https://community.qualtrics.com/XMcommunity/discussion/comment/39996#Comment_39996The 2 Cs are an unwanted outcome. If A1 is the first photo, the second photo cannot be B1, C1, or D1 OR A2, A3, A4.
Thank you so much for looking into this!

https://community.qualtrics.com/XMcommunity/discussion/comment/39993#Comment_39993I just tried your suggestion and now the first image is loading perfectly. Thank you!

Got it! You're going to want to remove the JavaScript from your 4 random blocks' graphic questions and add the JS to your now-first question of your survey. Reason being, you're setting the survey up by adding values to the embeddedData. You only need to set the data once, so you really don't want the shuffling to happen every question. You need it to fire once, set all the values, and stop. 

Paste this code over your existing JS, underneath the myArray declaration and you should be good!

    // First Image
    shuffle(myArray);
    Qualtrics.SurveyEngine.setEmbeddedData("firstImage",Object.values(myArray[0])[0]);
    Qualtrics.SurveyEngine.setEmbeddedData("firstImageName",Object.keys(myArray[0])[0]);


    var pick = Object.keys(myArray[0])[0].split("");
    myArray = myArray.filter(val => !Object.keys(val)[0].startsWith(pick[0])).filter(val => !Object.keys(val)[0].endsWith(pick[1]));
    
    // Second Image
    shuffle(myArray)
    Qualtrics.SurveyEngine.setEmbeddedData("secondImage",Object.values(myArray[0])[0]);
    Qualtrics.SurveyEngine.setEmbeddedData("secondImageName",Object.keys(myArray[0])[0]);
    
    pick = Object.keys(myArray[0])[0].split("");
    myArray = myArray.filter(val => !Object.keys(val)[0].startsWith(pick[0])).filter(val => !Object.keys(val)[0].endsWith(pick[1]));
    
    // Third Image
    shuffle(myArray)
    Qualtrics.SurveyEngine.setEmbeddedData("thirdImage",Object.values(myArray[0])[0]);
    Qualtrics.SurveyEngine.setEmbeddedData("thirdImageName",Object.keys(myArray[0])[0]);
    
    pick = Object.keys(myArray[0])[0].split("");
    myArray = myArray.filter(val => !Object.keys(val)[0].startsWith(pick[0])).filter(val => !Object.keys(val)[0].endsWith(pick[1]));
    
    // Fourth Image
    shuffle(myArray)
    Qualtrics.SurveyEngine.setEmbeddedData("fourthImage",Object.values(myArray[0])[0]);
    Qualtrics.SurveyEngine.setEmbeddedData("fourthImageName",Object.keys(myArray[0])[0]);
If you're interested in the technical weeds, I 
1) Replaced your splice() with a split()
-and- 
2) Added an extra filter
...for each picture. The split() function, when passed "A2", returns an arrary with "A" and "2". This let me add a filter saying "Give me all myArray items where the items do not start with "A" or end with "2" and rebuild myArray.

Hope this helps! Any questions, shoot me a message ;)