Javascript 如何以多选格式进行所需的无线电输入

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

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

HTML:

Fortnite:Battle Royale问答应用程序
Fortnite:Battle Royale测验
你是否有足够的知识通过这次测验并获得胜利？
开始

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();

“严格使用”；
常量问题池=[
{
数目:1,，
问题：`什么类型的车辆将玩家运送到战场？`，
答：`飞机'，
回答二：“火车”，
回答三：“公共汽车”，
回答四：“船`
},
{
数字：2，
问题：`这种罕见的皮涅塔包装的形状是什么动物？`，
回答一：“长颈鹿”，
回答二：美洲驼，
回答三：“熊”，
回答四：袋鼠`
},
{
数字：3，
问题：`有多少种不同的材料类型？`，
答案一：“3”，
回答二：`5`，
回答三：`6`，
回答四：9`
},
{
数字：4，
问题：`物品的最高稀有价值是什么？`，
答案一：'非常罕见'，
回答二：`传奇'，
回答三：“异国情调”，
回答四：史诗`
},
{
总数：5，
问题：`一种小盾药剂能给玩家多少盾？`，
答案一：“10”，
回答二：`15`，
回答三：`25`，
回答四：五十`
},
{
数字：6，
问题：`比赛开始时，地图上允许的最大球员人数是多少？`，
回答：50分，
回答二：`100`，
回答三：`150`，
回答四：200`
},
{
总数：7，
问：`有多少种不同的标准游戏模式？`，
答案一：“2”，
回答二：`3`，
回答三：`4`，
回答四：五`
},
{
数字：8，
问：`地图上目前有多少个指定地点？`，
答案一：“16”，
回答二：`17`，
回答三：`18`，
回答四：19`
},
{
数字：9，
问：`每一个新的风暴圈都随机产生两个什么物体？`，
答：`弹药箱'，
回答二：`供应下降'，
回答三：`护理包'，
回答四：迷你堡垒`
},
{
数字：10，
问题：`一个舒适的篝火能为玩家提供多少生命？`，
回答：25分，
回答二：`50`，
回答三：`75`，
回答四：一百`
}
];
常数应答键=[
`巴士`，
`美洲驼`，
`3`,
`传奇`，
`25`,
`100`,
`3`,
`19`,
`供应下降`，
`50`
];
设问题数=1；
分数=0；
//此函数用于生成用于测验每个问题的模板
函数问题生成器（分数、多回卷、完整问题）{
返回`
${multipleChoiceQues.question}
${multipleChoiceQues.answerOne}


${multipleChoiceQues.answerTwo}


${multipleChoiceQues.answerThree}


${multipleChoiceQues.answerFour}


提交
问题${multipleChoiceQues.num}/10
分数：${Score}/${completedQuestions}
`;
}
函数submitButton（）{
$（“.container”）。在（“单击”，“回答提交”，函数（事件）{
event.preventDefault（）；
const answer=$（“输入：已选中”）。同级（“跨度”）；
const correctUserInput=应答检查（应答）；
if（correctUserInput）{
userAnswerCorrect（）；
}
否则{
用户应答错误（）；
}
});
}
函数nextQuestion（）{
const multipleChoiceQues=questionPool[questionNumber-1]；
const completedQuestions=问题编号-1；
$（“.container”）.html（问题生成器（分数、多回卷、完成的问题））；
}
功能应答检查（应答）{
if（answer.text（）==answerKey[questionNumber-1]）{
返回true；
}
否则{
返回false；
}
}
函数iterateCorrectAnswers（）{
分数++；
}
函数迭代等式（）{
问题编号++；
}
函数userAnswerCorrect（）{
常数校正反馈=
`
正确

下一个问题
`;
$（“.container”）.html（正确反馈）；
迭代更正回答（）；
}
功能不正确反馈（问题编号）{
返回`
抱歉，正确答案是${answerKey[questionNumber-1]}

下一个问题
`;
}
函数useranswer不正确（）{
$（“.container”）.html（不正确的反馈（问题编号））；
}
函数开始按钮（）{
$（“.initialize quick”）。单击（函数（事件）{
nextQuestion（）；
});
}
函数nextQuestionButton（）{
$（“.container”）。在（'click'，“.next question”按钮上，函数（事件）{
如果（问题编号===10）{
最终结果（分数）；
}
否则{
迭代等式（）；
nextQuestion（）；
}
});
}
函数最终结果（正确答案）{
$（“.container”）.html(
`
恭喜！你完成了测验。你的最终分数是10分中的${score}

重试
`
);
}
函数重新启动按钮（）{
$（“.container”）。在（'click'，.reinitialize quick'，函数（事件）{
问题编号=1；
得分=0；
nextQuestion（）；
});
}
功能按钮句柄（）{
开始按钮（）；
submitButton（）；
nextQuestionButton（）；
重启按钮（）；
}
按钮手柄（）；

为无线电组的至少一个输入设置所需属性

所有设备都需要设置

"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();

<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>