Multiple choice question

Asked

Viewed 1,217 times

0

I have to develop a quiz with javascript, the first part already developed that are to get the answer of questions with only 1 correct answer, but I’m not able to do the second part that are the questions with more than one correct answer, I thought to use the checkbox, but it didn’t work,

<p><input type="radio" name="questao" value="A">resposta 1</p>
<p><input type="radio" name="questao" value="B">resposta 2</p>
<p><input type="radio" name="questao" value="C">resposta 3</p>
<p><input type="radio" name="questao" value="D">resposta 4</p>
<p id="mensagem"></p>

var resposta = "D"; // Resposta correta
$("input[name=questao]").on("click", function() {
    var value = $(this).val();
    var mensagem = "";
    resposta == value ? mensagem = "Parabéns, Acertou!" : mensagem = "Resposta errada, tente novamente";
    $("#mensagem").html("<strong>" + mensagem + "</strong>");
});
  • do you want to be able to select more than one option? or just allow one of the correct answers to be chosen?

  • If they are more of a correct answer, you should use the checkbox. You could [Dit] the question and add how you did with these elements to understand why it didn’t work?

  • Be able to select more than one option and at the time already appear whether the answer is right or wrong

  • @Thi100 try to post more information from your code

  • @Thi100 Poseti a code using checkbox to solve the problem

4 answers

3

I think the best thing would be to use radio and use a if/else and take the two answers that are right:

$("input[name=questao]").on("click", function() {
  var value = $(this).val();
  
  if(value == 'A' || value == 'D') {
    $("#mensagem").text("Parabéns, Acertou!");
  }
  else {
    $("#mensagem").text("Resposta errada, tente novamente");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><input type="radio" name="questao" value="A">resposta 1</p>
<p><input type="radio" name="questao" value="B">resposta 2</p>
<p><input type="radio" name="questao" value="C">resposta 3</p>
<p><input type="radio" name="questao" value="D">resposta 4</p>
<p id="mensagem"></p>

2

You can do it this way, which will even serve both radio and checkbox. Just put the right options alphabetically in the variable resposta when it is checkbox with more than one correct option. For example, if the correct options are A and D: var resposta = "AD";

var resposta = "AD"; // Respostas corretas
$("input[name=questao]").on("click", function() {
    var value = "";
    // seleciona apenas o que foi checado
    var resps = $("input[name=questao]:checked");
    if(resps.length){
       
       resps.each(function(){
          // concatena os values
          value += $(this).val();
       });
       
       var mensagem = "";
       resposta == value ? mensagem = "Parabéns, Acertou!" : mensagem = "Resposta errada, tente novamente";
       $("#mensagem").html("<strong>" + mensagem + "</strong>");
    }else{
       // esvazia a div de mensagem
       $("#mensagem").empty();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Opções corretas: A e D
<p>A) <input type="checkbox" name="questao" value="A">resposta 1</p>
<p>B) <input type="checkbox" name="questao" value="B">resposta 2</p>
<p>C) <input type="checkbox" name="questao" value="C">resposta 3</p>
<p>D) <input type="checkbox" name="questao" value="D">resposta 4</p>
<p id="mensagem"></p>

Using radio with the same script above:

var resposta = "D"; // Respostas corretas
$("input[name=questao]").on("click", function() {
    var value = "";
    // seleciona apenas o que foi checado
    var resps = $("input[name=questao]:checked");
    if(resps.length){
       
       resps.each(function(){
          // concatena os values
          value += $(this).val();
       });
       
       var mensagem = "";
       resposta == value ? mensagem = "Parabéns, Acertou!" : mensagem = "Resposta errada, tente novamente";
       $("#mensagem").html("<strong>" + mensagem + "</strong>");
    }else{
       // esvazia a div de mensagem
       $("#mensagem").empty();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Resposta correta: D
<p>A) <input type="radio" name="questao" value="A">resposta 1</p>
<p>B) <input type="radio" name="questao" value="B">resposta 2</p>
<p>C) <input type="radio" name="questao" value="C">resposta 3</p>
<p>D) <input type="radio" name="questao" value="D">resposta 4</p>
<p id="mensagem"></p>

1

I think there’s a mistake in how you’re using the ternary operator:

  resposta == value ? mensagem = "Parabéns, Acertou!" : mensagem = "Resposta errada, tente novamente";

Try changing this to:

  mesagem = resposta == value ? 'Parabéns, Acertou!' : 'Resposta errada, tente novamente';

Also, you should use <input type='checkbox'> for multiple choice, and for the right answers, Voce can use an array, its HTML can be like this:

<p><input type="checkbox" name="questao" value="A">resposta 1</p>
<p><input type="checkbox" name="questao" value="B">resposta 2</p>
<p><input type="checkbox" name="questao" value="C">resposta 3</p>
<p><input type="checkbox" name="questao" value="D">resposta 4</p>

<p id="mensagem"></p>

With this, your JS can change to:

var respostasCertas = ['A', 'D'];
var respostasEscolhidas = [];
$('input[name="questao"]').on('change', function() {
    if(this.checked) {
        respostasEscolhidas.push($(this).val());
    } else {
        removeA(respostasEscolhidas, $(this).val());
    }
});

function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
} 

Above, I use a function from another question, to remove array position by value

To check the answer Voce can add one <a> or a submit

<a onclick="checkResponse()">Checar resposta</a>

And finally create a function that checks the answer:

 function checkResponse() {
    if (respostasCertas.length === respostasEscolhidas.length && respostasCertas.sort().every(function(value, index) { return value === respostasEscolhidas.sort()[index]})) {
        $('#mensagem').text('VOCE ACERTOU');
    } else {
        $('#mensagem').text('TENTE NOVAMENTE');
    }

}

The above function has been removed of that question

I tested this code and I think it’s exactly what you’re looking for, I hope I’ve helped!

1


One more option

let respostasCorretas = ["D", "A"];

$("#btnConfirmar").on("click", function() {

  let selecionadas = $("input[name='questao']:checked");
  let corretas = 0

  $("input[name='questao']").attr('disabled', 'disabled')

  $.each(selecionadas, function() {
    let resposta = $(this);

    if (respostasCorretas.includes(resposta.val())) {
      resposta.closest('p').addClass('correta');
      corretas++;
    } else {
      resposta.closest('p').addClass('errada');
    }

  });
  let mensagem = "";

  if (corretas == 0)
    mensagem = "Você errou todas as alternativas"
  else if (corretas > 0)
    mensagem = "Você acertou epenas " + corretas + " das alternativas.";

  if (corretas == respostasCorretas.length)
    mensagem = "Parabéns, você acertou todas as alternativas";

  $("#mensagem").html(mensagem);
  $(this).addClass('escondido');
  $("#btnReset").removeClass('escondido');
  $("#mensagem").removeClass('escondido');
});

$("#btnReset").on('click', function() {
  $(this).addClass('escondido');
  $('p').removeClass('correta');
  $('p').removeClass('errada');
  $("input[name='questao']").removeAttr('disabled');
  $("input[name='questao']").prop('checked', false);
  $("#btnConfirmar").removeClass('escondido');
  $("#mensagem").toggleClass('escondido');
  

});
.correta {
  color: green;
  font-weight: bold;
}

.errada {
  color: red;
  text-decoration: line-through;
}

#mensagem {
  font-weight: bold;
}

.escondido {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4> Selecione as duas alternativas corretas:</h4>
<p><input type="checkbox" name="questao" value="A"> resposta 1</p>
<p><input type="checkbox" name="questao" value="B"> resposta 2</p>
<p><input type="checkbox" name="questao" value="C"> resposta 3</p>
<p><input type="checkbox" name="questao" value="D"> resposta 4</p>
<p>
  <input type="button" id="btnConfirmar" value="Confirmar Resposta" />
  <input type="button" id="btnReset" class="escondido" value="Tentar Novamente" />
</p>
<p id="mensagem"></p>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.