Question

我尝试在所有四个输入上使用必需属性，但没有任何效果。表单位于JavaScript文件中，所以我想知道它是否与它有关，因为它是动态的。这是HTML文件和JavaScript文件的代码。

这是指向整个repl.it的链接：

https://Fortnite-Battle-Royale-Quiz-App--joshing_you.repl.co

HTML：

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>Fortnite: Battle Royale Quiz App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="A quiz app built to test the user's knowledge of the popular video game Fortnite">
    <link href="index.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
  </head>
  <body role="main">
    <div class="container">
      <section class="start-quiz">
        <h1>Fortnite: Battle Royale Quiz</h1>
        <h2>Do you have the knowledge to pass this quiz and earn a victory royale?</h2>
        <button type="button" class="initialize-quiz">START</button>
      </section>
    </div>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

JavaScript的：

"use strict";

const questionPool = [
  {
    num: 1,
    question: `What type of vehicle carries players to the battlefield?`,
    answerOne: `Plane`,
    answerTwo: `Train`,
    answerThree: `Bus`,
    answerFour: `Boat`
  },

  {
    num: 2,
    question: `What animal is the rare piñata package shaped like?`,
    answerOne: `Giraffe`,
    answerTwo: `Llama`,
    answerThree: `Bear`,
    answerFour: `Kangaroo`
  },

  {
    num: 3,
    question: `How many different material types are there?`,
    answerOne: `3`,
    answerTwo: `5`,
    answerThree: `6`,
    answerFour: `9`
  },

  {
    num: 4,
    question: `What is the highest rarity value for items?`,
    answerOne: `Ultra Rare`,
    answerTwo: `Legendary`,
    answerThree: `Exotic`,
    answerFour: `Epic`
  },

  {
    num: 5,
    question: `How much shield does a small shield potion grant to a player?`,
    answerOne: `10`,
    answerTwo: `15`,
    answerThree: `25`,
    answerFour: `50`
  },

  {
    num: 6,
    question: `At the beginning of a match, what is the maximum number of players allowed on the map?`,
    answerOne: `50`,
    answerTwo: `100`,
    answerThree: `150`,
    answerFour: `200`
  },

  {
    num: 7,
    question: `How many different standard game modes are there?`,
    answerOne: `2`,
    answerTwo: `3`,
    answerThree: `4`,
    answerFour: `5`
  },

  {
    num: 8,
    question: `How many named locations are there currently on the map?`,
    answerOne: `16`,
    answerTwo: `17`,
    answerThree: `18`,
    answerFour: `19`
  },

  {
    num: 9,
    question: `What two objects spawns at a random time every at every new storm circle?`,
    answerOne: `Munitions Crates`,
    answerTwo: `Supply Drops`,
    answerThree: `Care Packages`,
    answerFour: `Mini-forts`
  },

  {
    num: 10,
    question: `How much HP can a Cozy Campfire heal a player for?`,
    answerOne: `25`,
    answerTwo: `50`,
    answerThree: `75`,
    answerFour: `100`
  }

  ];

  const answerKey = [
    `Bus`,
    `Llama`,
    `3`,
    `Legendary`,
    `25`,
    `100`,
    `3`,
    `19`,
    `Supply Drops`,
    `50`
  ];

  let questionNumber = 1;
  let score = 0;

  //This function generates the template used for each question of the quiz

  function questionGenerator (score, multipleChoiceQues, completedQuestions) {

      return `
      <section class="question-section">
        <h3>${multipleChoiceQues.question}</h3>

        <form class="question-form">
          <fieldset>
            <label for="ans" class="choice">
              <input type="radio" name="option" required="required">
              <span>${multipleChoiceQues.answerOne}</span>
            </label>
            <br>
            <label for="ans" class="choice">
              <input type="radio" name="option" required="required">
              <span>${multipleChoiceQues.answerTwo}</span>
            </label>
            <br>
            <label for="ans" class="choice">
              <input type="radio" name="option" required="required">
              <span>${multipleChoiceQues.answerThree}</span>
            </label>
            <br>
            <label for="ans" class="choice" required="required">
              <input type="radio" name="option">
              <span>${multipleChoiceQues.answerFour}</span>
            </label>
            <br>
          </fieldset>
          <button class="answer-submit">SUBMIT</button>
        </form>
      </section>

      <section class="question-and-score">
        <span class="currentQuestion">Question: ${multipleChoiceQues.num}/10</span>
        <span class="currentScore">Score: ${score}/${completedQuestions}</span>
      </section>`;
  }

  function submitButton () {
    $(".container").on("click", ".answer-submit", function(event) {
      event.preventDefault();

      const answer = $("input:checked").siblings("span");

      const correctUserInput = answerCheck(answer);

      if(correctUserInput) {
        userAnswerCorrect();
      }

      else {
        userAnswerIncorrect();
      }
    });
  }

  function nextQuestion () {
    const multipleChoiceQues = questionPool[questionNumber - 1];

    const completedQuestions = questionNumber - 1;

    $(".container").html(questionGenerator(score, multipleChoiceQues, completedQuestions));
  }

  function answerCheck(answer) {
    if(answer.text() === answerKey[questionNumber - 1]) {
      return true;
    }
    else {
      return false;
    }
  }

  function iterateCorrectAnswers () {
    score++;
  }

  function iterateQuestion () {
    questionNumber++;
  }

  function userAnswerCorrect () {
    const correctFeedback =
      `<section class="feedback">
        <p>Correct!!</p>
        <button class="next-question-button">Next Question</button>
       </section>`;
    $(".container").html(correctFeedback);
    iterateCorrectAnswers();
  }

  function incorrectFeedback(questionNumber) {
    return `<section class="feedback">
              <p>Sorry, the correct answer was ${answerKey[questionNumber - 1]}.</p>
              <button class="next-question-button">Next Question</button>
            </section>`;
  }

  function userAnswerIncorrect () {
    $(".container").html(incorrectFeedback(questionNumber));
  }

  function startButton () {
    $(".initialize-quiz").click(function(event) {
      nextQuestion();
    });
  }

  function nextQuestionButton () {
    $(".container").on('click', ".next-question-button", function(event) {
      if(questionNumber === 10) {
        finalResults(score);
      }
      else {
        iterateQuestion();
        nextQuestion();
      }
    });
  }

  function finalResults (correctAnswers) {
    $(".container").html(
      `<section class="restart-page">
        <p>Congratulations! You completed the quiz. Your final score was ${score} out of 10</p>
        <button class="reinitialize-quiz">Retry</button>
      </section>`
    );
  }

  function restartButton () {
    $(".container").on('click', ".reinitialize-quiz", function(event) {

      questionNumber = 1;

      score = 0;

      nextQuestion();
    });
  }

  function buttonHandler () {
    startButton();
    submitButton();
    nextQuestionButton();
    restartButton();
  }

buttonHandler();

Answer 1

为广播组的至少一个输入设置必需属性。

所有输入所需的设置更清晰，但不是必需的（除非动态生成单选按钮）。

要对单选按钮进行分组，它们必须具有相同的名称值。这允许一次只选择一个并且适用于整个组。这是一个例子：

<form>
  Select Gender:

  <label><input type="radio" name="submit" value="right" required>Right</label>

  <label><input type="radio" name="submit" value="left">Left</label>

  <input type="submit">
</form>

Answer 2

我之前遇到过类似的问题，并设法通过将第一个单选按钮设置为“必需”来解决它。由于它们都具有相同的名称，因此适用于所有这些名称。

如何以多种选择格式制作无线电输入

2 个答案: