每个列表中出现一次的每个元素

Question

我正在并排显示 2 张图片。我正在尝试对 2 个列表进行随机排序，当列表中的每个项目都已显示时，它会继续显示第二个列表中的每个项目。两个列表是相同的，我选择了这种方式来确保相同的图像不会并排显示。但是，它不是随机显示 2 张图像两次，而是所有其他图像都显示两次。

想知道这里有什么问题吗？我试图查找所有内容，但在任何地方都找不到帮助

function start2AFC() {
    var answers = {};
    window.sessionStorage.setItem("answers", JSON.stringify(answers))

    var myImages = new Array();
    var testImages = new Array();

    testImages = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg","images/images/practice/practice3.jpg", "images/images/practice/practice4.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);

count = 1;
document.getElementById("counter").innerHTML = "You are on image " + count + " of 45"
random2AFC();



}



// picks random image from array of image files to be displayed
function random2AFC() {
var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages"));
var image = document.getElementById("image");
var images = JSON.parse(window.sessionStorage.getItem("images"));
var images_2 = JSON.parse(window.sessionStorage.getItem("images_2"))


practiceImagesSort = practiceImages.sort(() => Math.random() - 0.5);
document.getElementById("counter").innerHTML = "Trial " + count + " of 45";

imagesSort = images.sort(() => Math.random() - 0.5);
images2Sort = images_2.sort(() => Math.random() - 0.5);

a = 0;
b = 1;
// iterate through practice array 
if (practiceImages.length > 0) {
    image.src = practiceImagesSort[a];
    image2.src = practiceImagesSort[b];
    practiceImagesSort.splice(0, 2);
    count = count + 1;
    window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages));
    
} else {
    // after every 13 images, display break image not including practice
    if (count % 13 == 0) {
        image.src = "images/images/break_2afc.png"
        image2.src = "images/images/break_2afc2.png"
        count = count  + 1
    } else { 
    // once every image has been displayed from both arrays, send to the database
   if (images.length == 0 ) {
       if (images_2.length == 0) { 
            send2AFC();
        } 
        else {
            image.src = images2Sort[a]
            image2.src = images2Sort[b];
            count = count + 1
            images2Sort.splice(0,2)
        } 
    } else { 

        image.src = imagesSort[a]
        image2.src = imagesSort[b]
        imagesSort.splice(0,2)
        count = count + 1;
        }
    }
        window.sessionStorage.setItem("images", JSON.stringify(images))
        window.sessionStorage.setItem("images_2", JSON.stringify(images_2))
    }
}

<!DOCTYPE html>

<html>

<head>
    <title> Alternate Force Choice </title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>


<body class=body onload="start2AFC()">
    <div>
        <div>
            

                <h1> Which app icon is more beautiful?</h1>
                <br>

            <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="00px">
                </div>
            </div>
        </div>

        <hr>
        <br>


            <div class=counter id=counter>
            </div>

        </div> 

        <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Answer 1

因为我无法在这个 sn-p 中完成所有窗口会话的工作，所以我将其修改为以下内容。基本上有主图集和练习集。 从那里开始，它依靠递归来循环遍历所有内容。一旦它通过图像 arr（过滤掉自己），它就会调用一个新的练习图像。然后再次遍历图像等。

const masterImages = ["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"],
    practiceImages =["images/images/practice/practice1.jpg", "images/images/practice/practice2.jpg","images/images/practice/practice3.jpg", "images/images/practice/practice4.jpg"];
let firstImages;

function start2AFC() {
  const counterEl = document.getElementById('counter'),
    firstImageEl = document.getElementById('image'),
    secondImageEl = document.getElementById('image2');
  let counter = 0;
  firstImages = masterImages;
  randomlySelectImageFirst(getRandomIndex(firstImages.length));
  function randomlySelectImageFirst(i) {
      firstImageEl.innerText = firstImages[i];
      firstImages.splice(i, 1);
      if(firstImages.length > 0) {
        randomlySelectImageSecond(masterImages.filter(function(url) { 
          return url != firstImages[i]; 
        }));
        incrementCounter();
      } else {
        console.log('Finished processing');
      }
  }
  function randomlySelectImageSecond(arr, i) {
    secondImageEl.innerText = arr[i];
    arr.splice(i, 1);
    if(arr.length == 0) {
      randomlySelectImageFirst(getRandomIndex(firstImages.length));
    } else {
      setTimeout(function () { randomlySelectImageSecond(arr, getRandomIndex(arr.length)); }, 100)
    }
  }
  function getRandomIndex(len) {
    return Math.floor(Math.random() * len);
  }
  function incrementCounter() {
    counter++;
    counterEl.innerHTML = "Trial " + counter + " of " + masterImages.length;
  }
}

<!DOCTYPE html>

<html>
  <head>
      <title> Alternate Force Choice </title>
      <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
  </head>
  <body class=body onload="start2AFC()">
      <div>
          <div>
            <h1> Which app icon is more beautiful?</h1>
            <br>
            <div class=imageContainer>
              <div class=image>
                  <span id="image">/span>
              </div>
              <div class=image>
                <span id="image2">/span>
              </div>
            </div>
          </div>
            <br>
            <div class=counter id=counter></div>
          </div> 
          <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>