0

Tenho que desenvolver um quiz com javascript, a primeira parte já desenvolvi que são para pegar a resposta de perguntas com apenas 1 resposta correta, mas não estou conseguindo fazer a segunda parte que são as perguntas com mais de uma resposta correta, pensei em utilizar o checkbox, mas não funcionou,vou colocar o código que fiz para uma resposta correta

<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>");
});
5
  • você quer poder selecionar mais de uma opção? ou apenas permitir que seja escolhido uma das respostas corretas? Commented 28/11/2018 às 11:51
  • Se são mais de uma resposta correta, você deverá utilizar o checkbox. Poderia editar a pergunta e adicionar como fez com esses elementos para entendermos o porquê de não ter funcionado?
    – Woss
    Commented 28/11/2018 às 11:54
  • Poder selecionar mais de uma opção e na hora já aparecer se está certo ou errado a resposta
    – Thi100
    Commented 28/11/2018 às 11:54
  • @Thi100 tente postar mais informações do seu código Commented 28/11/2018 às 11:59
  • @Thi100 Poseti um código utilizando checkbox para resolver o problema Commented 28/11/2018 às 12:24

4 Respostas 4

3

Acho que o mais indicado aí seria utilizar radio e usar um if/else e pegar as duas respostas que forem certas:

$("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

Pode fazer desta forma, que inclusive servirá tanto para radio quanto para checkbox. Só precisa colocar as opções certas em ordem alfabética na variável resposta quando for checkbox com mais de uma opção correta. Por exemplo, se as opções corretas forem A e 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>

Usando radio com o mesmo script acima:

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

Mais uma opção

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>

1

Creio que exista um erro em como você esta utilizando o operador ternário:

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

Tente trocar isso para:

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

Além disso, vocẽ deverá usar <input type='checkbox'> para multipla escolha, e para as respostas certas, voce pode usar um array, seu HTML pode ser assim:

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

Com isso, seu JS pode mudar para:

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

Acima, utilizo uma função de outra pergunta, para remover posição do array pelo valor

Para checkar a resposta voce pode adicioar um <a> ou um submit

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

E, finalmente, criar uma função que checa a resposta:

 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');
    }

}

A função acima, foi retirada dessa pergunta

Testei esse código e acho que é exatamente o que procura, espero ter ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .