I am trying to create a quiz in which people rank 4 random images, using drag and drop to sort the images into their preference. Each image has to appear twice.
The same image can not appear twice in the same comparison (ie icon1, icon1, icon3, icon7) If the a duplicate random image is generated, a new image should be chosen. The duplicate image should not appear in the comparison.
The code I have recognises when duplicates appear, however, duplicates are still visible in the html.
It is the random image function that is causing the problem. I am in desperate need for help.
function randomImageRank(){
var images = JSON.parse(window.sessionStorage.getItem("images"));
var practice = JSON.parse(window.sessionStorage.getItem("practice"));
total = window.sessionStorage.getItem("total")
count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length) - 1);
document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;
counter += 1
random1 = Math.floor(Math.random() * images.length);
random2 = Math.floor(Math.random() * images.length);
random3 = Math.floor(Math.random() * images.length);
random4 = Math.floor(Math.random() * images.length);
var image1 = document.getElementById("drag1")
var image2 = document.getElementById("drag2")
var image3 = document.getElementById("drag3")
var image4 = document.getElementById("drag4")
if (practice.length > 0 ){
image1.src = practice[0][0]
image2.src = practice[0][1]
image3.src = practice[0][2]
image4.src = practice[0][3]
practice.splice(0, 1)
window.sessionStorage.setItem("practice", JSON.stringify(practice))
} else {
if (counter % 15 == 0 ) {
image1.src = ("images/images/break_rank1.png")
image2.src = ("images/images/break_rank2.png")
image3.src = ("images/images/break_rank3.png")
image4.src = ("images/images/break_rank4.png")
} else {
if (images.length == 0) {
sendRank();
} else {
if ((images[random1] == images[random2] || images[random1] == images[random3] || images[random1] == images[random4]
|| images[random2] == images[random4] || images[random3] == images[random2] ||images[random3] == images[random4])) {
rnd1 = Math.floor(Math.random() * images.length);
rnd2 = Math.floor(Math.random() * images.length);
rnd3 = Math.floor(Math.random() * images.length);
rnd4 = Math.floor(Math.random() * images.length);
random1 = rnd1
random2 = rnd2
random3 = rnd3
random4 = rnd4
image1.src = images[random1]
image2.src = images[random2]
image3.src = images[random3]
image4.src = images[random4]
console.log("duplicate")
} else {
image1.src = images[random1]
image2.src = images[random2]
image3.src = images[random3]
image4.src = images[random4]
console.log("no duplicate")
}
}
counter = counter + 1
images.splice(random1, 1);
images.splice(random2, 1);
images.splice(random3, 1);
images.splice(random4, 1);
window.sessionStorage.setItem("images", JSON.stringify(images))
}
}
}
// Rank Website
function startRank(){
var practiceArray = new Array();
practiceArray[0] = ["images/images/practice/practice1.jpg", "images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice7.jpg"]
var imageArray = new Array();
var imageArray = ["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","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 ranked = {}
window.sessionStorage.setItem("ranked", JSON.stringify(ranked));
window.sessionStorage.setItem("images", JSON.stringify(imageArray));
window.sessionStorage.setItem("practice", JSON.stringify(practiceArray));
counter = 0;
window.sessionStorage.setItem("counter", counter);
total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length)
count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length) - 1);
window.sessionStorage.setItem("total", total)
document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;
}
// this returns the name of the picture eg image1
function serialize () {
var serialized = []
var img = document.querySelectorAll('[data-id]')
img.forEach(image => {
serialized.push(image.src.split('/').pop())
})
return serialized
}
// this allows you to sort the images using drag and drop
var sorted = document.getElementById("rankedPicture")
Sortable.create(sorted, {
group: "rankedImages",
onEnd: function(e) {
console.log(serialize())
},
store: {
// We keep the order of the list
set: (sorted) => {
var order = sorted.toArray ()
// console.log(order)
localStorage.setItem (sorted.options.group.name, order.join ('|'))
},
// We get the order of the list
get: (sorted) => {
var order = localStorage.getItem (sorted.options.group.name)
return order? order.split ('|'): []
}
}
})
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>
<h1> Rank the Icons from Most to Least Beautiful</h1>
<h3> Drag and Drop the icons into position </h4>
<hr>
<body class="body" onload="startRank()">
<div id="rankedPicture" class="imagesRank" style="width: 100%;">
<img src="images/images/start_rank.png" data-id="1" id = "drag1" width="200px" height="100px">
<img src="images/images/start_rank.png" data-id="2" id = "drag2" width="200px" height="100px">
<img src="images/images/start_rank.png" data-id="3" id = "drag3" width="200px" height="100px">
<img src="images/images/start_rank.png" data-id="4" id = "drag4" width="200px" height="100px">
</div>
<br>
<br>
<hr>
<div class="buttonRank">
<button type="button" onclick="storeRank()" style="height:50px;width:100px;font-size:medium;"> Submit</button>
</div>
<br>
<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>
Aucun commentaire:
Enregistrer un commentaire