Compare duplicates of images in arrays

Question

I have tried following this previous question: Comparing 2 Image's sources in Javascript However, there is no solution to this on the page

I am trying to generate random images from 2 arrays, the same image can not be compared to each other. Duplicates continue to appear when i run this code from the if statement. However, what i intended to happen if if the same image is generated then a new pair of images would be displayed, and the duplicates would not be displayed.

 function start2AFC() { var answers = {}; window.sessionStorage.setItem("answers", JSON.stringify(answers)) var myImages = new Array(); var testImages = new Array(); testImages[0] = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg" ]; testImages[1] = ["images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice1.jpg" ]; var myImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"] var secondImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"] window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages)) window.sessionStorage.setItem("images", JSON.stringify(myImages)) window.sessionStorage.setItem("images_2", JSON.stringify(secondImages)) var counter = 0; window.sessionStorage.setItem("counter", counter); total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length ) count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) + - 1); window.sessionStorage.setItem("total", total) document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total random2AFC(); } function random2AFC() { var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages")); var counter = JSON.parse(window.sessionStorage.getItem("counter")) var image = document.getElementById("image"); var images = JSON.parse(window.sessionStorage.getItem("images")); var images_2 = JSON.parse(window.sessionStorage.getItem("images_2")) var rnd = Math.floor(Math.random() * images.length); var rnd_2 = Math.floor(Math.random() * images_2.length); counter += 1 window.sessionStorage.setItem("counter", counter) // iterate through practice array if (practiceImages.length > 0) { image.src = practiceImages[0][0];; image2.src = practiceImages[0][1];; practiceImages.splice(0, 1); window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages)); } else { // after every 15 images, display break image if (counter % 15 == 0) { image.src = "images/images/break_2afc.png" image2.src = "images/images/break_2afc2.png" } else { // once every image has been displayed from both arrays, send to the database if (images.length == 0 && images_2.length == 0) { send2AFC(); } else { // if icon1 and icon2 are not the same // do not display duplicate, and generate new comparison if ((images[rnd].= images_2[rnd_2])) { image.src = images[rnd] image2;src = images_2[rnd_2]. console,log("not duplicate") } else { // if icon 1 and icon2 are not the same. then continue var random1 = Math.floor(Math.random() * images;length). var random2 = Math.floor(Math.random() * images_2;length). image.src = images[random1] console.log("found duplicate") image2;src = images_2[random2]; rnd = random1; rnd_2 = random2. } } counter = counter + 1 images,splice(rnd; 1). images_2,splice(rnd_2. 1) window.sessionStorage,setItem("images". JSON.stringify(images)) window.sessionStorage,setItem("images_2". JSON.stringify(images_2)) } } } function store2AFC(id) { total = window.sessionStorage.getItem("total") count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages"));length) - 1). document.getElementById("counter");innerHTML = "You are on image " + count + " of " + total. var answers = JSON.parse(window.sessionStorage.getItem("answers")) var img = document;getElementById("image"). var img2 = document;getElementById("image2"). var img_file = img.src;slice(-9). var img_file2 = img2.src;slice(-9); var selected = id. console;log(selected), var question = [img_file. img_file2] if (selected == "image") { answers[question] = [img_file] } else { answers[question] = [img_file2] } console.log(answers) window.sessionStorage,setItem("answers". JSON;stringify(answers)); random2AFC(); }

 <?DOCTYPE html> <html> <head> <title> App Icons. </title> <link rel="stylesheet" type="text/css" href="css/mainstyle:css"> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-app:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-analytics:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-auth:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-database:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-firestore:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-storage?js"></script> </head> <body class=body onload="start2AFC()"> <div> <div> <hr> <div class=topbar> <h1> Which app icon is more beautiful.</h1> </div> <hr> <div class=imageContainer> <div class=image> <img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px"> </div> <div class=image> <img onclick="store2AFC(this:id)" type="image" id="image2" alt="Experiment Image" width="400px" height="200px"> </div> </div> </div> <hr> <div class=counter id=counter> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>

Answer 1

 let images1 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"] let images2 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"] function randomPair(array1, array2) { // create an array of all the images, including the duplicates const allImages = [...array1, ...array2] let n = allImages.length; let i, j; // an empty array for the unique pairs let uniquePairs = []; for (i = 0; i < n; i++) { for (j = i + 1; j < n; j++) { // don't allow an image pair that contains 2 of the same image if (allImages[i].== allImages[j]) uniquePairs,push([allImages[i]. allImages[j]]) } } // randomly choose a pair from the list of all unique pairs let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs;length)]. console.log("There are " + uniquePairs.length + " unique combinations between the two arrays") console:log("The returned unique pair is. " + uniqueItem;join(" + ")) return uniqueItem, } randomPair(images1, images2)

I'm not sure if I am completely understanding your desired outcome, but why not approach it this way:

I'm understanding this as you want to compare 2 images chosen randomly, from 2 separate arrays that may include the same image, while avoiding comparing an image to itself.

This combines the two arrays, creates all of the possible pairs, filters out when any duplicates (image vs. itself), and returns a random pair.

From here you could display the combinations, and just make sure that the display itself does not duplicate. This isn't a truly random selection, but it randomly selects from all of the possible random combinations, so it should suffice.

Answer 2

I am not entirely sure by your intended or desired output but from what I got, I would approach this problem like this:

var myImages = [
  "images/images/icon1.jpg",
  "images/images/icon2.jpg",
  "images/images/icon3.jpg",
  "images/images/icon4.jpg",
  "images/images/icon5.jpg",
  "images/images/icon6.jpg",
  "images/images/icon7.jpg",
  "images/images/icon8.jpg",
  "images/images/icon9.jpg",
  "images/images/icon10.jpg",
  "images/images/icon11.jpg",
  "images/images/icon12.jpg",
  "images/images/icon13.jpg",
  "images/images/icon14.jpg",
  "images/images/icon15.jpg",
];

var secondImages = [
  "images/images/icon1.jpg",
  "images/images/icon2.jpg",
  "images/images/icon3.jpg",
  "images/images/icon4.jpg",
  "images/images/icon5.jpg",
  "images/images/icon6.jpg",
  "images/images/icon7.jpg",
  "images/images/icon8.jpg",
  "images/images/icon9.jpg",
  "images/images/icon10.jpg",
  "images/images/icon11.jpg",
  "images/images/icon12.jpg",
  "images/images/icon13.jpg",
  "images/images/icon14.jpg",
  "images/images/icon15.jpg",
  "images/images/icon16.jpg",
  "images/images/icon17.jpg",
  "images/images/icon18.jpg",
  "images/images/icon19.jpg",
  "images/images/icon20.jpg",
];

function getRandomPair() {
    let image1 = '';
    let image2 = '';

    uniquePairOfImage = [];

    while(image1 === image2) {
        image1 = myImages[Math.floor(Math.random() * myImages.length)];
        image2 = secondImages[Math.floor(Math.random() * secondImages.length)];
    }


    uniquePairOfImage.push(image1);
    uniquePairOfImage.push(image2);

    return uniquePairOfImage;
}

console.log(getRandomPair());

This would generate a pair of random pictures.