How to make radio inputs required in a multiple choice format

Question

I tried to use the required attribute on all four inputs, but nothing worked. The form is in a JavaScript file so I'm wondering if that has something to do with it, due to it being dynamic. Here's the code for both the HTML file and the JavaScript file.

This is a link to the entire 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();

Please narrow this all down to just the specific problem area as per [mcve]. No reason that `required` shouldn't work on a radio — charlietfl, Apr 29 '18 at 13:14
Sorry, I just wanted to give the best information possible. I won't do it again. Thank you for replying. — JoshingYou, Apr 29 '18 at 13:27
Right but consider for example that long arrays are not relevant to the issue at hand. Removing all irrelevant code helps people help you faster and creates less confusion. Also narrowing down to only a specific problem often helps you resolve that problem yourself — charlietfl, Apr 29 '18 at 13:30
Possible duplicate of [How to make radio inputs required?](https://stackoverflow.com/questions/29705601/how-to-make-radio-inputs-required) — Daniel Beck, Apr 29 '18 at 13:43

Sth · Answer 1 · 2018-04-29T14:01:43.780

Set the required attribute for at least one input of the radio group.

Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).

To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group. Here's an example:

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

score 0 · Answer 2 · answered Apr 29 '18 at 13:17

0

I have had a similar problem before on this, and managed to solve it by only setting the first radio button to 'required'. As they all have the same name it will apply to all of them.

answered Apr 29 '18 at 13:17

HG123

23
5

Ok, let me give that a try. Thank you for your response. – JoshingYou Apr 29 '18 at 13:27

How to make radio inputs required in a multiple choice format

2 Answers2