比较阵列中图像的重复项

Question

我试着回答前面的问题：比较2图像'；s源代码然而，页面上没有解决方案

我试图从两个阵列中生成随机图像，同一图像无法相互比较。当我从if语句中运行此代码时，重复项会继续出现。然而，如果生成了相同的图像，那么将显示一对新的图像，而不会显示重复的图像，我打算发生什么。

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>

Answer 1

let images1 = ["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"]
let images2 = ["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"]
function randomPair(array1, array2) {
// create an array of all the images, including the duplicates
const allImages = [...array1, ...array2]
let n = allImages.length;
let i, j;
// an empty array for the unique pairs
let uniquePairs = [];
for (i = 0; i < n; i++) {
for (j = i + 1; j < n; j++) {
// don't allow an image pair that contains 2 of the same image
if (allImages[i] !== allImages[j])
uniquePairs.push([allImages[i], allImages[j]])
}
}
// randomly choose a pair from the list of all unique pairs
let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs.length)];
console.log("There are " + uniquePairs.length + " unique combinations between the two arrays")
console.log("The returned unique pair is: " + uniqueItem.join(" + "))
return uniqueItem;
}
randomPair(images1, images2)

我不确定我是否完全理解你想要的结果，但为什么不这样做呢：

我理解这一点，因为你想比较从两个单独的阵列中随机选择的两个图像，这些阵列可能包括相同的图像，同时避免将图像与自身进行比较。

这将组合两个数组，创建所有可能的对，过滤掉任何重复(图像与自身(，并返回一个随机对。

从这里可以显示组合，只需确保显示本身不会重复即可。这不是一个真正的随机选择，但它是从所有可能的随机组合中随机选择的，所以它应该足够了。

Answer 2

我不完全确定你想要或想要的输出，但根据我所得到的，我会这样处理这个问题：

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",
];
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",
];
function getRandomPair() {
let image1 = '';
let image2 = '';
uniquePairOfImage = [];
while(image1 === image2) {
image1 = myImages[Math.floor(Math.random() * myImages.length)];
image2 = secondImages[Math.floor(Math.random() * secondImages.length)];
}

uniquePairOfImage.push(image1);
uniquePairOfImage.push(image2);
return uniquePairOfImage;
}
console.log(getRandomPair());

这将生成一对随机图片。