Compare duplicates of images in arrays

问题

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>

回答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.

回答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.

来源：https://stackoverflow.com/questions/65219491/compare-duplicates-of-images-in-arrays