How can I prevent users from selecting multiple answers in my quiz?

canvas multiple answers partial credit
canvas quiz question types
how to cheat on moodle quizzes
canvas quizzes
canvas quiz answers hack
canvas let students see their quiz responses
canvas new quizzes
surveymonkey multiple answers to one question

The issue that I am having is that once a user selects an answer and then clicks 'Submit Answer' and receives their feedback they are able to continue to click around and select other answers before progressing onto the next question. How can I prevent a user from being able to do that once they submit one answer?

let score = 0;
let currentQuestion = 0;
let questions = [{
    title: "At what age was Harry Potter when he received his Hogwarts letter?",
    answers: ['7', '10', '11', '13'],
    correct: 1
  },
  {
    title: "Which is not a Hogwarts house?",
    answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'],
    correct: 0
  },
  {
    title: "Who teaches Transfiguration at Hogwarts?",
    answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'],
    correct: 3
  },
  {
    title: "Where is Hogwarts School for Witchcraft and Wizardry located?",
    answers: ['France', 'USA', 'UK', 'New Zealand'],
    correct: 2
  },
  {
    title: "What form does Harry Potter's patronus charm take?",
    answers: ['Stag', 'Eagle', 'Bear', 'Dragon'],
    correct: 0
  },
  {
    title: "What type of animal is Harry's pet?",
    answers: ['Dog', 'Owl', 'Cat', 'Snake'],
    correct: 1
  },
  {
    title: "Who is not a member of the Order of the Phoenix?",
    answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'],
    correct: 2
  },
  {
    title: "What is not a piece of the Deathly Hallows?",
    answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'],
    correct: 3
  },
  {
    title: "In which house is Harry sorted into after arriving at Hogwarts?",
    answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'],
    correct: 2
  },
  {
    title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?",
    answers: ['Love', 'Anger', 'Friendship', 'Joy'],
    correct: 0
  },
];



$(document).ready(function() {

  $('.start a').click(function(e) {
    e.preventDefault();
    $('.start').hide();
    $('.quiz').show();
    showQuestion();
  });

  $('.quiz').on('click', 'button', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
  });

  $('.quiz a.submit').click(function(e) {
    e.preventDefault();
    if ($('button.selected').length) {
      let guess = parseInt($('button.selected').attr('id'));
      checkAnswer(guess);
    } else {
      alert('Please select an answer');
    }
  });

  $('.summary a').click(function(e) {
    e.preventDefault();
    restartQuiz();
  });

});

function showQuestion() {
  let question = questions[currentQuestion];
  $('.quiz h2').text(question.title);
  $('.quiz div:nth-child(2)').html('');
  for (var i = 0; i < question.answers.length; i++) {
    $('.quiz div:nth-child(2)').append(`<button id="${i}">${question.answers[i]}</button>`);
  }
  showProgress();
}

function showIncorrectQuestion(guess) {
  let question = questions[currentQuestion];
  $('.quiz h2').text(question.title);
  $('.quiz div:nth-child(2)').html('');
  for (var i = 0; i < question.answers.length; i++) {
    let cls = i === question.correct ? "selected" : guess === i ? "wrong" : ""
    $('.quiz div:nth-child(2)').append(`<button id="${i}" class="${cls}">${question.answers[i]}</button>`);
  }
  showProgress();
}

function checkAnswer(guess) {
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    if (!question.alreadyAnswered) {
      score++;
    }
    showIsCorrect(true);

  } else {
    showIsCorrect(false);
    showIncorrectQuestion(guess);
  }
  question.alreadyAnswered = true;
}

function showSummary() {
  $('.quiz').hide();
  $('.summary').show();
  $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?")
}

function restartQuiz() {
  questions.forEach(q => q.alreadyAnswered = false);

  $('.summary').hide();
  $('.quiz').show();
  score = 0;
  currentQuestion = 0;
  showQuestion();
}

function showProgress() {
  $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
}

function showIsCorrect(isCorrect) {
  var result = "Wrong";
  if (isCorrect) {
    result = "Correct";
  }
  $('#isCorrect').html(result);
  $('.navigate').show();
  $('.submit').hide();
}
$('.navigate').click(function() {
  currentQuestion++;
  if (currentQuestion >= questions.length) {
    showSummary();
  } else {
    showQuestion();
  }

  $('.navigate').hide();
  $('.submit').show();
  $('#isCorrect').html('');
})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  background-color: #837F73;
}

h1 {
  font-family: 'Poor Story', cursive;
  background-color: #950002;
  padding: 60px;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h2 {
  font-family: 'Poor Story', cursive;
  font-size: 30px;
  padding: 60px;
  background-color: #950002;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

p {
  font-family: 'Poor Story', cursive;
  background-color: #FFAB0D;
  font-size: 20px;
  font-weight: bold;
}

a {
  border: 1px solid #222F5B;
  padding: 10px;
  background-color: #222F5B;
  color: silver;
  border-radius: 5px;
  margin-top: 50px;
  display: inline-block;
}

a:hover {
  border: 1px solid #000000;
  background-color: #000000;
  color: #FCBF2B;
}

.quiz button {
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  width: 200px;
  margin: 10px;
  font-family: 'Poor Story', cursive;
  font-size: 26px;
}

#currentQuestion {
  color: #000000;
  font-size: 18px;
  font-family: 'Poor Story', cursive;
  margin-top: 10px;
}

#isCorrect {
  color: white;
  font-family: 'Poor Story', cursive;
  font-weight: bold;
  font-size: 18px;
}

.quiz,
.summary {
  display: none;
}

.quiz ul {
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.selected {
  background-color: #398C3F;
}

.wrong {
  background-color: red;
}
<html lang="en">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Harry Potter Quiz</title>
  </head>

  <body>

  <header role="banner">
    <div class="start">
  <h1>How Well Do You Know Harry Potter?</h1>
  <a href="#">Start Quiz</a>
</div>
  </header>


<main role="main">
<div class="quiz">
  <h2>Question Title</h2>
  <div>
    <button>Choice</button>
    <button>Choice</button>
    <button>Choice</button>
    <button>Choice</button>
  </div>
  <a class="submit" href="#">Submit Answer</a>
  <a class="navigate" style="display:none;" href="#">Next Question</a>
  <div id="currentQuestion"></div>
  <footer role="contentinfo">
  <div id="isCorrect"></div>
  </footer>
</div>
</main>


<div class="summary">
  <h2>Results</h2>
  <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p>
  <a href="#">Retake Quiz</a>
</div>

    <script src="index.js"></script>

    <!--jQuery script when using JSBin-->
    <!--<script src="https://code.jquery.com/jquery-3.1.0.js"></script>-->

  </body>

</html>

I have declared a variable called buttonClickable and used it as a flag on every button click. when the user submits the answer, buttonclickable turns false and when ever you are rendering a new question buttonclickable turns true.

let score = 0;
let currentQuestion = 0;

let buttonClickable = true;

let questions = [{
    title: "At what age was Harry Potter when he received his Hogwarts letter?",
    answers: ['7', '10', '11', '13'],
    correct: 1
  },
  {
    title: "Which is not a Hogwarts house?",
    answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'],
    correct: 0
  },
  {
    title: "Who teaches Transfiguration at Hogwarts?",
    answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'],
    correct: 3
  },
  {
    title: "Where is Hogwarts School for Witchcraft and Wizardry located?",
    answers: ['France', 'USA', 'UK', 'New Zealand'],
    correct: 2
  },
  {
    title: "What form does Harry Potter's patronus charm take?",
    answers: ['Stag', 'Eagle', 'Bear', 'Dragon'],
    correct: 0
  },
  {
    title: "What type of animal is Harry's pet?",
    answers: ['Dog', 'Owl', 'Cat', 'Snake'],
    correct: 1
  },
  {
    title: "Who is not a member of the Order of the Phoenix?",
    answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'],
    correct: 2
  },
  {
    title: "What is not a piece of the Deathly Hallows?",
    answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'],
    correct: 3
  },
  {
    title: "In which house is Harry sorted into after arriving at Hogwarts?",
    answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'],
    correct: 2
  },
  {
    title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?",
    answers: ['Love', 'Anger', 'Friendship', 'Joy'],
    correct: 0
  },
];



$(document).ready(function() {

  $('.start a').click(function(e) {
    e.preventDefault();
    $('.start').hide();
    $('.quiz').show();
    showQuestion();
  });

  $('.quiz').on('click', 'button', function() {
    if(!buttonClickable) return;
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
  });

  $('.quiz a.submit').click(function(e) {
    e.preventDefault();
    if ($('button.selected').length) {
      let guess = parseInt($('button.selected').attr('id'));
      checkAnswer(guess);
    } else {
      alert('Please select an answer');
    }
  });

  $('.summary a').click(function(e) {
    e.preventDefault();
    restartQuiz();
  });

});

function showQuestion() {
  buttonClickable = true;
  let question = questions[currentQuestion];
  $('.quiz h2').text(question.title);
  $('.quiz div:nth-child(2)').html('');
  for (var i = 0; i < question.answers.length; i++) {
    $('.quiz div:nth-child(2)').append(`<button id="${i}">${question.answers[i]}</button>`);
  }
  showProgress();
}

function showIncorrectQuestion(guess) {
  let question = questions[currentQuestion];
  $('.quiz h2').text(question.title);
  $('.quiz div:nth-child(2)').html('');
  for (var i = 0; i < question.answers.length; i++) {
    let cls = i === question.correct ? "selected" : guess === i ? "wrong" : ""
    $('.quiz div:nth-child(2)').append(`<button id="${i}" class="${cls}">${question.answers[i]}</button>`);
  }
  showProgress();
}

function checkAnswer(guess) {
  buttonClickable = false;
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    if (!question.alreadyAnswered) {
      score++;
    }
    showIsCorrect(true);

  } else {
    showIsCorrect(false);
    showIncorrectQuestion(guess);
  }
  question.alreadyAnswered = true;
}

function showSummary() {
  $('.quiz').hide();
  $('.summary').show();
  $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?")
}

function restartQuiz() {
  questions.forEach(q => q.alreadyAnswered = false);

  $('.summary').hide();
  $('.quiz').show();
  score = 0;
  currentQuestion = 0;
  showQuestion();
}

function showProgress() {
  $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
}

function showIsCorrect(isCorrect) {
  var result = "Wrong";
  if (isCorrect) {
    result = "Correct";
  }
  $('#isCorrect').html(result);
  $('.navigate').show();
  $('.submit').hide();
}
$('.navigate').click(function() {
  currentQuestion++;
  if (currentQuestion >= questions.length) {
    showSummary();
  } else {
    showQuestion();
  }

  $('.navigate').hide();
  $('.submit').show();
  $('#isCorrect').html('');
})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  background-color: #837F73;
}

h1 {
  font-family: 'Poor Story', cursive;
  background-color: #950002;
  padding: 60px;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h2 {
  font-family: 'Poor Story', cursive;
  font-size: 30px;
  padding: 60px;
  background-color: #950002;
  color: #FFAB0D;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

p {
  font-family: 'Poor Story', cursive;
  background-color: #FFAB0D;
  font-size: 20px;
  font-weight: bold;
}

a {
  border: 1px solid #222F5B;
  padding: 10px;
  background-color: #222F5B;
  color: silver;
  border-radius: 5px;
  margin-top: 50px;
  display: inline-block;
}

a:hover {
  border: 1px solid #000000;
  background-color: #000000;
  color: #FCBF2B;
}

.quiz button {
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  width: 200px;
  margin: 10px;
  font-family: 'Poor Story', cursive;
  font-size: 26px;
}

#currentQuestion {
  color: #000000;
  font-size: 18px;
  font-family: 'Poor Story', cursive;
  margin-top: 10px;
}

#isCorrect {
  color: white;
  font-family: 'Poor Story', cursive;
  font-weight: bold;
  font-size: 18px;
}

.quiz,
.summary {
  display: none;
}

.quiz ul {
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.selected {
  background-color: #398C3F;
}

.wrong {
  background-color: red;
}
<html lang="en">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Harry Potter Quiz</title>
  </head>

  <body>

  <header role="banner">
    <div class="start">
  <h1>How Well Do You Know Harry Potter?</h1>
  <a href="#">Start Quiz</a>
</div>
  </header>


<main role="main">
<div class="quiz">
  <h2>Question Title</h2>
  <div>
    <button>Choice</button>
    <button>Choice</button>
    <button>Choice</button>
    <button>Choice</button>
  </div>
  <a class="submit" href="#">Submit Answer</a>
  <a class="navigate" style="display:none;" href="#">Next Question</a>
  <div id="currentQuestion"></div>
  <footer role="contentinfo">
  <div id="isCorrect"></div>
  </footer>
</div>
</main>


<div class="summary">
  <h2>Results</h2>
  <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p>
  <a href="#">Retake Quiz</a>
</div>

    <script src="index.js"></script>

    <!--jQuery script when using JSBin-->
    <!--<script src="https://code.jquery.com/jquery-3.1.0.js"></script>-->

  </body>

</html>

What options can I set in a quiz?, Multiple Attempts [3]: You can allow multiple attempts. As part of this option, you can restrict students view of the quiz results to Only Once After Each Attempt [​5] This setting enables a green Correct tab on every correct answer for the entire quiz Note: If the Only Once After Each Attempt option is selected, it will override  We've been able to have users work through the quiz questions for multiple choice only by using the keyboard to make the selections. Use the Tab key to move from one field to the next. You'll see a box highlight different fields in the course (not just the answers) so you may need to tab a handful of times to get to the answer choice.

Having skimmed through your JS, I'm assuming that the feedback shows on the same page as the question, rather than a new page resulting from submitting it to a server.

When you display the feedback, add a disabled="disabled" property to the item in question, so that your user can't change it. Alternately, hide the selection and display an <output> element: <output>Your Answer: USA<br />Correct Answer: UK</output>

Quiz settings, Answers that the student submits after the quiz closing date will be saved but Attempts allowed: Students may be allowed to have multiple attempts at a quiz. Group or User override sections of the Quiz Administration settings block. If you want to replicate a traditional exam, select 'Deferred feedback'. Drag and drop Multiple Choice into your survey from the BUILDER section. Enter question text. In the Answers fields, enter each answer choice. Configure any additional options. Click Save. Options & Settings. Under the Edit, Options, and Logic tabs, you can further customize the question in the following ways: Score the Question (Enable Quiz Mode)

disable All button after checking answers.

$('button').prop('disabled', true);

Prevent Cheating in Online Exams, Prevent Cheating in Online Exams. free quiz maker to create online exams. answers ordering; Randomly selected questions; Disable printing options; Place a timer on your test; Prevent users from going back to previous questions to change answers Randomize Multiple Choice Answer Ordering Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! But avoid … Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great

Flipped Learning: Gateway to Student Engagement, I have found that an online quiz is the best way to measure students' and web links to questions, and your questions can be multiple choice, multiple select, the tool you use lets you randomize the questions and answers, to prevent The only negatives to this type of program are that they are often for single users only. To show answers immediately after quiz is submitted, leave the Show and Hide fields blank. To create a date range to display the answers, set a start date in the Show field and an ending date in the Hide field. To always show answers after a specific date, set a date in the Show field.

Can I limit the number of answer choices a respondent can select?, On question types that allow multiple answer choices, rows, or textboxes, you can set a range or a limit on how many the respondent must answer. To do this  Select: Edit > Preferences (Windows) Adobe Captivate > Preferences (Mac OS) In the Preferences dialog box, select Settings from the Quiz menu. Settings options in Quiz preferences. Enter the information in the following fields: Name. Enter a name for your quiz. In a project with more than one quiz, naming helps identify a quiz easily.

When taking quizzes in locked mode, can students still submit , If a post provides an answer to your question please mark it as an answer. It may assist a future users with the same question to finding the  Multiple-choice and check-box questions that are not part of the quiz (e.g. selecting class or teacher) Quiz. A multiple-choice (one answer) or check-box (multiple answers) question with a correct answer (s)Tip: Toggle on the Multiple answers option to make this a check-box style question. Yes.

Comments
  • Use radio elements instead of <button>
  • Adding disabled prop after submit and removing on next question click
  • <input type="radio" name= "choice" value="someValue1"> <input type="radio" name= "choice" value="someValue2"> something like this.
  • document.getElementsByTagName("button").disabled = true; will disable the buttons. By the way, I had all the answers right. What do I win?
  • Thank you so much, I really appreciate your help!