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>from Compare duplicates of images in arrays
No comments:
Post a Comment