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>

https://stackoverflow.com/questions/24456891/iframe-in-chrome-error-uncaught-securityerror-failed-to-read-the-sessionstora You can try this solution! I think it's the same as your! — harsh 1868, Jan 12 '21 at 09:29

tstrand66 · Accepted Answer · 2021-01-14T20:50:12.500

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>

this looks great, appreicate your helo! however, the practice images have to be displayed first (as then they will be discarded after) how would i alter this so the practice images are ran then the other 1-40, each displayed twice — user14578710, Jan 14 '21 at 19:14
ok, try this. i have now modified the logic and tried to clarify with naming so that the code is easier to read and tweak. now instead of looking at the practiceImages array the first func randomly selects an image then shows all of the other images except itself. then new image etc through all 45. — tstrand66, Jan 14 '21 at 19:42
amazing thank you! greatly appreciated! do you know why my initial method did not work, just out of curiosity — user14578710, Jan 14 '21 at 19:46
couldnt run it because of the window session calls. but my guess is it has to do with these else statements. in each you set both images.src from the same array instead of their respective arrays. 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] — tstrand66, Jan 14 '21 at 19:48
if that was intentional then i would guess that it has something to do with spliceing 2 out of the array but only incrementing your counter by 1. — tstrand66, Jan 14 '21 at 19:51

each element appearing one time from each list

1 Answers1