如何使特定按鈕出現在四個位置之一？-有解無憂

我想為測驗撰寫一個腳本，其中有 4 個答案，其中只有一個是正確的。我想讓正確答案出現在 4 個按鈕之一的隨機位置，而其余的將是錯誤答案。這是我所擁有的：

const questions = [
  {name: "question1"}, 
  {name: "question2"}, 
  {name: "question3"}
];

function shuffle(questions) {
  let currentIndex = questions.length,
    randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [questions[currentIndex], questions[randomIndex]] = [
      questions[randomIndex], questions[currentIndex]
    ];
  }
  return questions;
}

function start() {
  document.getElementById("start").style.display = "none";
  shuffle(questions);
  document.getElementById("question").innerHTML = questions[0].name;
  document.getElementById("correctanswer").style.display = "block";
  document.getElementById("wronganswer1").style.display = "block";
  document.getElementById("wronganswer2").style.display = "block";
  document.getElementById("wronganswer3").style.display = "block";
}

function shownextquestion() {
  shuffle(questions);
  document.getElementById("question").innerHTML = questions[0].name;
}

function correct() {
  document.getElementById("answerstatus") = "Correct Answer!";
}

function incorrect() {
  document.getElementById("answerstatus") = "Wrong Answer";
}

<button id="start" onclick="start()">start test</button>
<div id="question"></div>
</br>
<button style="display:none;" id="correctanswer" onclick="shownextquestion();correct()">Correct Answer</button>
</br>
<button style="display:none;" id="wronganswer1" onclick="shownextquestion();incorrect()">Wrong Answer</button>
</br>
<button style="display:none;" id="wronganswer2" onclick="shownextquestion();incorrect()">Wrong Answer</button>
</br>
<button style="display:none;" id="wronganswer3" onclick="shownextquestion();incorrect()">Wrong Answer</button>

</br>
<div id="answerstatus"></div>

基本上，我希望“正確答案”按鈕隨機出現在四個空格之一中，而其他三個是“錯誤答案”1,2 和 3。

uj5u.com熱心網友回復：

我不確定我是否正確解決了問題。你說你想打亂答案，但在你的代碼中你試圖打亂問題。

假設您真的想改組問題的答案，我建議您選擇不同的方法：

定義一個Question物件陣列，answers為問題提供一個可能的陣列
撰寫一個動態創建答案按鈕的函式
使用隨機播放功能在渲染前隨機播放答案

/** All questions with possible answers. */
const questions = [
  {
    name: 'question1',
    text: 'Question 1?',
    answers: [
      { text: 'Some wrong answer', correct: false },
      { text: 'Another wrong answer', correct: false },
      { text: 'One more wrong answer', correct: false },
      { text: 'The correct answer', correct: true }
    ]
  },
  {
    name: 'question2',
    text: 'Question 2?',
    answers: [
      { text: 'Some wrong answer', correct: false },
      { text: 'Another wrong answer', correct: false },
      { text: 'One more wrong answer', correct: false },
      { text: 'The correct answer', correct: true }
    ]
  }, 
  {
    name: 'question3',
    text: 'Question 3?',
    answers: [
      { text: 'Some wrong answer', correct: false },
      { text: 'Another wrong answer', correct: false },
      { text: 'One more wrong answer', correct: false },
      { text: 'The correct answer', correct: true }
    ]
  }
];

/** The index of the question currently being displayed */
let questionIndex = 0;

/** Fisher-Yates shuffle function for shuffling arbitrary arrays */
function shuffle(array) {
  const result = [...array];
  for (let i = result.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i   1));
    let temp = result[i];
    result[i] = result[j];
    result[j] = temp;
  }
  return result;
}

/**
 * Checks for a given question whether the given answer is correct,
 * displays an appropriate message, and shows the button for jumping
 * to the next question.
 */
function checkAnswer(question, answer) {
  document.getElementById('answerstatus').style.display = "block";
  
  const elAnswerStatusText = document.getElementById('answerstatus-text');
  if (answer.correct) {
    elAnswerStatusText.innerHTML = 'Correct answer!';
  }
  else {
    elAnswerStatusText.innerHTML = 'Wrong answer!';
  }
}

/**
 * Creates a DOM representation for a question and its answers.
 * This function first shuffles the possible answers and creates
 * a button element for each, adding an event handler that calls
 * function `checkAnswer()`.
 */
function createQuestion(question) {
  const elQuestion = document.getElementById("question");
  elQuestion.innerHTML = "";
  
  const elQuestionText = elQuestion.appendChild(document.createElement("div"));
  elQuestionText.innerHTML = question.text;
  
  
  for (const answer of shuffle(question.answers)) {
    const elButton = elQuestion.appendChild(document.createElement("button"));
    elButton.innerHTML = answer.text;
    
    elButton.addEventListener('click', () => checkAnswer(question, answer));
  }
}

function showNextQuestion() {
  questionIndex = (questionIndex   1) % questions.length;
  document.getElementById('answerstatus').style.display = 'none';
  createQuestion(questions[questionIndex]);
}

function start() {
  document.getElementById("start").style.display = 'none';
  document.getElementById("question").style.display = 'block';
  
  createQuestion(questions[0]);
}

button {
  display: block;
  width: 200px;
  margin-top: 10px;
}

<html>
<head>
</head>

<body>
  <button id="start" onclick="start()">start test</button>
  <div id="question" style="display: none">
    <div id="question-text">
    </div>
    
  </div>
  <br>
  <div id="answerstatus" style="display: none">
    <div id="answerstatus-text">
    </div>
    <br>
    <button onclick="showNextQuestion()">Next Question</button>
  </div>
</body>
</html>

uj5u.com熱心網友回復：

要隨機播放按鈕，您可以使用您的shuffle()功能。為此，您需要將按鈕推送到陣列：

const buttons = document.querySelectorAll('button.answer');
let button_array = [];

for (let i = 0; i < buttons.length; i  ) {
  button_array[i] = buttons[i];
}

洗牌后，您洗掉按鈕并按新順序附加它們。要完成此操作，您可以將答案按鈕包裝在容器中：

<div id="answers">
  <button class="answer" id="correctanswer" onclick="shownextquestion();correct()">Correct Answer</button>
  ...
</div>

該容器可以簡單地清空，innerHTML = ''您可以輕松地將新的有序按鈕附加到它：

shuffle(button_array);
document.getElementById("answers").innerHTML = '';
for (let i = 0; i < button_array.length; i  ) {
  document.getElementById("answers").append(button_array[i]);
}

該容器還有一個優點，您可以一次隱藏和顯示所有答案按鈕，而不是為每個答案按鈕都這樣做：

function start() {
  document.getElementById("start").style.display = "none";
  document.getElementById("answers").style.display = "block";
  ...

此外，你在做同樣的事情start()，并shownextquestion()兩次，對于洗牌和插入的問題。因此，最好將該代碼放入shownextquestion()并呼叫該函式start()。特別是因為當您為按鈕添加改組和插入時，代碼會變得更大。

作業例如：（我交換直列風格和BR標簽與CSS的樣式，并在JavaScript切換一類，而不是操縱的風格屬性）

const questions = [
  {name: "question1"}, 
  {name: "question2"}, 
  {name: "question3"}
];
const buttons = document.querySelectorAll('button.answer');
let button_array = [];

for (let i = 0; i < buttons.length; i  ) {
  button_array[i] = buttons[i];
}

function shuffle(elements) {
  let currentIndex = elements.length,
    randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [elements[currentIndex], elements[randomIndex]] = [
      elements[randomIndex], elements[currentIndex]
    ];
  }
  return elements;
}

function start() {
  document.getElementById("start").classList.add("hide");
  document.getElementById("answers").classList.remove("hide");

  shownextquestion();
}

function shownextquestion() {
  shuffle(questions);
  document.getElementById("question").innerHTML = questions[0].name;
  
  shuffle(button_array);
  document.getElementById("answers").innerHTML = '';
  for (let i = 0; i < button_array.length; i  ) {
    document.getElementById("answers").append(button_array[i]);
  }
}

function correct() {
  document.getElementById("answerstatus").innerHTML = "Correct Answer!";
}

function incorrect() {
  document.getElementById("answerstatus").innerHTML = "Wrong Answer";
}

* {
  margin-bottom: 1rem;
}

button {
  display: block;
}

.hide {
  display: none;
}

<button id="start" onclick="start()">start test</button>
<div id="question"></div>

<div id="answers" class="hide">
  <button class="answer" id="correctanswer" onclick="shownextquestion(); correct()">Correct Answer</button>
  <button class="answer" id="wronganswer1" onclick="shownextquestion(); incorrect()">Wrong Answer</button>
  <button class="answer" id="wronganswer2" onclick="shownextquestion(); incorrect()">Wrong Answer</button>
  <button class="answer" id="wronganswer3" onclick="shownextquestion(); incorrect()">Wrong Answer</button>
</div>

<div id="answerstatus"></div>

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

標籤：javascript html

上一篇：如何將影像以圓圈為中心？

下一篇：我怎樣才能在Windows10上使用真正的iPhoneiOS設備測驗我在Xamarin.Forms上編碼的ios應用程式？