如何在沒有兩個選擇相同的情況下為用戶生成四個選擇？-有解無憂

我正在使用 API 來創建動漫測驗。我還使用 Math.random() 創建四個選項供用戶單擊。但我面臨兩個問題。首先，當用戶看到第一組 4 個選項時，有可能兩個選項是相同的。我希望所有四個選擇都彼此不同。其次，無論用戶是否獲得正確答案，我都希望生成另一組四個不同的問題。我試圖想出一些東西，但它很快變成了意大利面條代碼。

const animeApi = "https://anime-facts-rest-api.herokuapp.com/api/v1";
const intro = document.querySelector(".intro");
const anime_picture = document.querySelector(".anime_picture img");
const anime = document.querySelector(".anime");
const questions = Array.from(document.querySelector(".question").children)
const question1 = document.querySelector(".question1");
const question2 = document.querySelector(".question2");
const question3 = document.querySelector(".question3");
const question4 = document.querySelector(".question4");
const question5 = document.querySelector(".question5");
const randomNum1 = Math.floor((Math.random()* 13));
const randomNum2 = Math.floor((Math.random()* 13));
const randomNum3 = Math.floor((Math.random()* 13));
const randomNum4 = Math.floor((Math.random()* 13));
let [counter, score] = [0,0]
let data;

fetch(animeApi)
.then(res => res.json())
.then(response => {
  // response is an object but we need the array in property data
  console.log(response)
  data = response.data;
  console.log(data.length)
  for (let {anime_img} of data) {
    console.log(anime_img)
  }
  // alternative
  //data.forEach(item => console.log(item));
});

intro.addEventListener("click", () => {
  intro.classList.add("hide");
  anime.classList.remove("hide");
  anime.classList.add("show")
  quiz()
});

function quiz() {
  anime_picture.src = data[counter].anime_img;

  question1.innerHTML = data[randomNum1].anime_name;
  question2.innerHTML = data[randomNum2].anime_name;
  question3.innerHTML = data[randomNum3].anime_name;
  question4.innerHTML = data[randomNum4].anime_name;
}


for(var i = 0; i < questions.length; i  ) {
  questions[i].addEventListener("click", userAnswer)
}

function userAnswer(e) {
  let target = e.target.innerHTML
  if(target === data[counter].anime_name) {
    console.log("correct");
    score  
  } else {
    console.log("incorrect");
  }
  update();
}

function update () {
  if(counter < data.length) {
    counter  ;
    quiz();
  }
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
}

.intro {
  height: 300px;
  width: 300px;
  border: 1px blue solid;
  position: absolute;
  left: 25%;
  text-align: center;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.anime {
  height: 800px;
  width: 800px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.question {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.question > div {
  height: 80px;
  width: auto;
  border: 1px black solid;
  background-color: #ddd;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>anime page</title>

  </head>
  <body>
    <div class="intro">
      welcome to the anime website
    </div>
    <div class="anime hide">
      <div class="anime_picture">
        <img src="" alt="">

      </div>
      <div class="question">
        <div class="question1"></div>
        <div class="question2"></div>
        <div class="question3"></div>
        <div class="question4"></div>
      </div>
      <header>anime Quiz</header>

    </div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

uj5u.com熱心網友回復：

我幾乎沒有重構您的代碼并修復了錯誤。現在您可以獲得 4 個隨機答案，但保證有正確答案。現在答案的數量也取決于divwith class的數量answer：

const animeApi = 'https://anime-facts-rest-api.herokuapp.com/api/v1';
const intro = document.querySelector('.intro');
const anime_picture = document.querySelector('.anime_picture img');
const anime = document.querySelector('.anime');
const answers = [...document.querySelectorAll('.answer')];
let data = [];
let [counter, score] = [0, 0];

fetch(animeApi)
.then(res => res.json())
.then(response => data = response.data);

const getRandomNumber = () => Math.floor(Math.random() * data.length);

intro.addEventListener('click', () => {
  intro.classList.add('hide');
  anime.classList.remove('hide');
  anime.classList.add('show');
  quiz();
});

const getUniqueAnswersNumbers = (count) => {
  const answersNumbers = new Set();
  
  while(!answersNumbers.has(counter)) {
    answersNumbers.clear();
    while (answersNumbers.size < count) answersNumbers.add(getRandomNumber());
  }
  
  return [...answersNumbers];
}

function quiz() {
  anime_picture.src = data[counter].anime_img;
  
  const answersNumbers = getUniqueAnswersNumbers(answers.length);
  
  answers.forEach((answer, i) => answer.innerHTML = data[answersNumbers[i]].anime_name);
}

answers.forEach(answer => answer.addEventListener('click', userAnswer));

function userAnswer(e) {
  const target = e.target.innerHTML;
  
  if(target === data[counter].anime_name) {
    console.log('correct');
      score;
  } else {
    console.log('incorrect');
  }
  
  update();
}

function update () {
  if((counter   1) === data.length) return;
  
    counter;
  quiz();
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
}

.intro {
  height: 300px;
  width: 300px;
  border: 1px blue solid;
  position: absolute;
  left: 25%;
  text-align: center;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.anime {
  height: 800px;
  width: 800px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.answers {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.answers > div {
  height: 80px;
  width: auto;
  border: 1px black solid;
  background-color: #ddd;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>anime page</title>

  </head>
  <body>
    <div class="intro">
      welcome to the anime website
    </div>
    <div class="anime hide">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="answers">
        <div class="answer answer1"></div>
        <div class="answer answer2"></div>
        <div class="answer answer3"></div>
        <div class="answer answer4"></div>
      </div>
      <header>anime Quiz</header>

    </div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

uj5u.com熱心網友回復：

splice組裝隨機選擇的問題的函式還可以使用陣列方法從其陣列中洗掉該問題（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice）

可以將洗掉的元素添加到新陣列中以跟蹤使用過的問題。

這涉及防止一組四個和隨后的四個組中的重復。

在片段中，我使用了一組數字來代替問題，但邏輯是相同的。

請注意，控制臺會在每次添加后記錄問題陣列，顯示使用的元素已被洗掉。

const questions = [1,2,3,4,5,6,7,8,9,10,11,12];
const usedQuestions = [];
const outputField = document.getElementById("output");


function next4() {

  let qPanel = document.createElement('p');
  
  for(let i=0; i<4; i  ) {
         if (questions.length > 0) {
    let index = Math.floor(Math.random()*questions.length);
    qPanel.innerHTML = qPanel.innerHTML   `question ${questions[index]}, `;
    usedQuestions.push(questions[index]);
    questions.splice(index,1);
     } // end if array has length;  
  } // next i question;
outputField.appendChild(qPanel)
console.log(questions)

} // end function next4;

<button onclick="next4()">next set</button>

<div id="output"></output>

可能需要“整頁”鏈接才能查看頁面和控制臺。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/462557.html

標籤：javascript html api 随机的

上一篇：“應解碼Dictionary<String,Any>但找到了一個陣列。”，underlyingError:nil;GitHub存盤庫顯示應用程式；SwiftUI

下一篇：如何從嵌套的json回傳物件