I am trying to display random images from 2 arrays. If the images are the same, i want the randomisation to pick two more images. However, the code below does not seem to be working as duplicates of the same image are showing. When all images are compared, the results will then be sent to a database. I am not a confident javacript coder.
<!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>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();
}
// picks random image from array of image files to be displayed
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)
// checks if practice images are still to be completed and if not moves on to experimental images
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 {
if (counter % 12 == 0) {
image.src = "images/images/break_2afc.png"
image2.src = "images/images/break_2afc.png"
} else {
if (images.length == 0 && images_2.length == 0) {
send2AFC();
counter += 1
image.src = images[rnd];
console.log(image.src)
image2.src = images_2[rnd_2];
console.log(image2.src)
}
else (image.src == image2.src ){
image.src = images[rnd];
console.log(image.src)
image2.src = images_2[rnd_2];
console.log(image2.src)
}
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))
}
}
}
// stores answer selected from radio buttons
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);
if (img_file[0] == "/") {
img_file.slice(1);
}
var img_file2 = img2.src.slice(-9);
if (img_file2[0] == "/") {
img_file.slice(1);
}
var selected = id;
console.log(selected);
var question = [img_file, img_file2]
if (img.src.search("-p") == -1) {
if (selected == "image") {
answers[question] = [img_file]
} else {
answers[question] = [img_file2]
}
console.log(answers)
window.sessionStorage.setItem("answers", JSON.stringify(answers));
}
console.log(answers)
random2AFC();
}
Aucun commentaire:
Enregistrer un commentaire