在检测到重复图像之后生成新的随机图像

Question

我正在尝试创建一个测试，在这个测试中，人们对4张随机图像进行排名，使用拖放将图像按自己的偏好排序。每个图像必须出现两次。

同一图像不能在同一比较中出现两次(即图标1、图标1、图像3、图像7(如果生成了重复的随机图像，则应选择新图像。重复的图像不应出现在比较中。

当重复出现时，我识别出的代码，但是，在html中仍然可以看到重复。

是随机图像函数造成了问题。我急需帮助。

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>             

Answer 1

用while循环替换if块

while ((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
console.log("duplicate")     
} 
image1.src = images[random1]
image2.src = images[random2]
image3.src = images[random3]
image4.src = images[random4]
console.log("no duplicate")

Answer 2

我认为您有许多代码重复。但下面我展示了一种随机化的方法

const someArray = ['a', 'b','с', 'd', 'e', 'f'];
const randomize  = () => {
const temp = [... someArray]; // create copy
someArray.sort(() => Math.random() - 0.5); // shuffle
console.log(someArray.slice(0, 4)) // get first 4 elements
}
randomize();
randomize();
randomize();
randomize();