Multiple Choice Question

Navigation
0

I have to develop a quiz with javascript, the first part I have already developed that are to pick up the answer of questions with only 1 correct answer, but I am not able to do the second part which are the questions with more than one correct answer, I thought in using the checkbox, but it did not work, I'll put the code I made for a correct answer 

<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>");
});
    
asked by anonymous 28.11.2018 / 12:48

4 answers

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>Selecioneasduasalternativascorretas:</h4><p><inputtype="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>
    
28.11.2018 / 15:26
3

I think the most appropriate one would be to use radio and use a if/else and get 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><inputtype="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>
    
28.11.2018 / 13:19
2

You can do this, which will even work for both radio and checkbox. You just need to put the right options alphabetically in the resposta variable when you 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çõescorretas:AeD<p>A)<inputtype="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>Respostacorreta:D<p>A)<inputtype="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>
    
28.11.2018 / 13:12
1

I think there is an error in how you are 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';

In addition, you should use <input type='checkbox'> for multiple choice, and for the right answers, you can use an array, your HTML may look 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 switch 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, for remove position from array by value

To check the answer you can add a <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 from this question

I tested this code and I think it is exactly what you are looking for, I hope I have helped!

    
28.11.2018 / 13:03
Calculate a sequence of triangular numbers less than 1000 What is the difference of $ ('.boot'). on ('click') for $ (document) .on ('click', '.botao')? [duplicate]