Генерировать новое случайное изображение после обнаружения повторяющегося изображения

Я пытаюсь создать викторину, в которой люди ранжируют 4 случайных изображения, используя перетаскивание, чтобы отсортировать изображения по своему усмотрению. Каждое изображение должно появиться дважды.

Одно и то же изображение не может появляться дважды в одном и том же сравнении (т. е. icon1, icon1, icon3, icon7). Если генерируется повторяющееся случайное изображение, следует выбрать новое изображение. Повторяющееся изображение не должно появляться в сравнении.

Код, который у меня есть, распознает появление дубликатов, однако дубликаты все еще видны в 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.info("duplicate")
                    
                } else {
                image1.src = images[random1]
                image2.src = images[random2]
                image3.src = images[random3]
                image4.src = images[random4]
                console.info("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.info(serialize()) 
    },
    
    store: {
      // We keep the order of the list
      set: (sorted) => {
      var order = sorted.toArray ()
     // console.info(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>

javascript html random duplicates

15.12.2020 10:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

145

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Замените блок if на цикл while

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.info("duplicate")     
} 

image1.src = images[random1]
image2.src = images[random2]
image3.src = images[random3]
image4.src = images[random4]
console.info("no duplicate")

Спасибо!! когда я использую цикл while, он гарантирует, что в одном сравнении не отображаются два повторяющихся изображения. Однако каждое изображение появляется более двух раз (т. е. соединение работает так, как задумано). Знаете ли вы, почему это происходит?

— 15.12.2020 10:18

вы хотите использовать срез, а не сращивание - The splice() method changes the original array, поэтому после того, как вы запустите его один раз, все индексы будут изменены.

— 15.12.2020 23:11

не нужно ли использовать метод сращивания? поскольку изображение должно быть удалено из массива, чтобы оно больше не появлялось, то, как только в массиве не останется изображений, ранжирование изображений остановится?

— 16.12.2020 08:58

Я попытался сделать это одновременно, чтобы файл index. порядок не изменится, images.splice(random1, 1, random2, 1, random3, 1, random4, 1) Однако это тоже не сработало

— 16.12.2020 09:04

вы можете использовать сращивание, но вам нужно убедиться, что вы делаете это, чтобы индексы для более поздних не менялись, т.е. самый большой. на данный момент я думаю, что будет лучше пересмотреть логику выбора рандомизации - сделать это один за другим 4 раза (вместо того, чтобы делать все 4 параллельно), затем, когда вы выполняете соединение, вы делаете только одно соединение, а следующее случайное ( на меньшем массиве) гарантирует отсутствие дубликатов

— 16.12.2020 22:02

15.12.2020 10:12

Я думаю, у вас много дубликатов кода. Но ниже я покажу один из способов рандомизировать что-либо

const someArray = ['a', 'b','с', 'd', 'e', 'f'];

const randomize  = () => {
    const temp = [... someArray]; // create copy
    someArray.sort(() => Math.random() - 0.5); // shuffle
    console.info(someArray.slice(0, 4)) // get first 4 elements
}

randomize();
randomize();
randomize();
randomize();

15.12.2020 10:41

Другие вопросы по теме

Изменить источник изображения

Как перезагрузить веб-страницу с помощью кнопки в JavaScript

CSS прокручиваемый div внутри flexbox выходит за пределы родительского div

Попытка сжать изображение с помощью Canvas, но JPG или PNG возвращает черное изображение или прозрачное/пустое изображение

Как остановить htmlPurifier от автоматического декодирования html-объектов?

Копировать значения, если флажок установлен

Сводка с flexbox и псевдоэлементом не отображается в Safari

Как я могу добавить кнопки «Далее» и «Назад» для этого ползунка вместо data-link = «n» (удалить нумерацию страниц и добавить только кнопки «Далее» и «Назад»)

Загрузка файла в Angular дает ошибку при отправке запроса POST

Добавление div после всех конкретных дочерних классов div с помощью jquery

Генерировать новое случайное изображение после обнаружения повторяющегося изображения

Ответы 2

Другие вопросы по теме

Похожие вопросы