javascript - each element appearing one time from each list

Question

I am displaying 2 images side by side. I am trying to randomly sort 2 lists, when each item in the list one has been displayed it moves on to display each item in the second list. Both lists are identical, and I have chosen this way to ensure the same image is not displayed side by side. However, it is randomly not displaying 2 images twice, but all others are displayed twice.

Wondering what is the issue here? I have tried to look everything up but cannot find help anywhere

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

Because i couldn't do all of the window session stuff within this snippet i have modified it to the following. Basically there is the master set of images and practice set. From there it relies on recursion to loop through everything. Once it gets through the images arr (filtering itself out) it calls back for a new practice image. then again goes through images etc.

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>