0

Boa tarde, Estou fazendo um form de perguntas e respostas simples. Gostaria de saber como faço para caso a resposta seja a errada, mostre a alternativa correta no alert.

$(document).ready(function() {


  $("input[type='radio']").click(function() {
    var marcado = this.value;

    if (marcado == "S") {
      alert("Correto");
    } else {
      alert("Errado");
    }
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>
  <p>Primeira pergunta de teste:</p>
</h3>

<input name="r" type="radio" class="ace" value="N"> Resposta errada 1
<br>
<input name="r" type="radio" class="ace" value="S"> Resposta certa
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 2
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 3

4 Respostas 4

5

Os textos, que são as respostas, vem a seguir do elemento, então em DOM você pode usar o nextSibling (em jQuery na API tem o .next(), mas não é a mesma coisa), então ficaria algo como:

 $('[name="r"][value="S"]').get(0).nextSibling.textContent;

Desta forma você irá pegar o texto a seguir do elemento desejado (no caso o elemento com a resposta correta), exemplo:

$(document).ready(function() {


  $("input[type='radio']").click(function() {
    var marcado = this.value;

    if (marcado == "S") {
      alert("Correto");
    } else {
      var resposta = $('[name="r"][value="S"]').get(0).nextSibling.textContent;
      alert("Errado, a resposta correta seria: " + resposta);
    }
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>
  <p>Primeira pergunta de teste:</p>
</h3>

<input name="r" type="radio" class="ace" value="N"> Resposta errada 1
<br>
<input name="r" type="radio" class="ace" value="S"> Resposta certa
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 2
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 3

No entanto você pode simplificar e até evitar acidentes criando elementos para separar as respostas ao invés de usar <br>, desta forma você poderá ter várias perguntas na mesma página, exemplo:

$(document).ready(function() {


  $(".resposta input[type='radio']").click(function() {
    var marcado = this.value;

    if (marcado == "S") {
      alert("Correto");
    } else {
      console.log($(this).parents('.pergunta').find('[name="r"][value="S"]').parent().get(0))
      var resposta = $(this).parents('.pergunta').find('[name="r"][value="S"]').parent().text().trim();
      alert("Errado, a resposta correta seria: " + resposta);
    }
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pergunta">
    <h3>
      <p>Primeira pergunta de teste:</p>
    </h3>

    <div class="resposta">
         <input name="r" type="radio" class="ace" value="N"> Resposta errada 1
    </div>
    <div class="resposta">
         <input name="r" type="radio" class="ace" value="S"> Resposta certa
    </div>
    <div class="resposta">
        <input name="r" type="radio" class="ace" value="N"> Resposta errada 2
    </div>
    <div class="resposta">
        <input name="r" type="radio" class="ace" value="N"> Resposta errada 3
    </div>
</div>

<div class="pergunta">
    <h3>
      <p>Segunda pergunta de teste:</p>
    </h3>

    <div class="resposta">
         <input name="r" type="radio" class="ace" value="N"> Pedro Álvares Cabral
    </div>
    <div class="resposta">
         <input name="r" type="radio" class="ace" value="S"> Graham Bell
    </div>
    <div class="resposta">
        <input name="r" type="radio" class="ace" value="N"> George Washington
    </div>
    <div class="resposta">
        <input name="r" type="radio" class="ace" value="N"> Thomas Edison
    </div>
</div>

2
  • Porque esta aparecendo esses caracteres? prnt.sc/p8c8mn
    – Tiago
    19/09/2019 às 17:05
  • @Tiago aqui não apareceu nenhum caractere assim, teste no botão EXECUTAR acima, os dois exemplos (o segundo é melhor) ... esses caracteres parece um outro problema fora deste script, se você tiver como colocar online para eu testar ou enviar o arquivo facilitaria para identificar, mas repito, o problema não é no script da resposta, é em outro lugar.
    – Syzoth
    19/09/2019 às 17:07
2

Cara é só colocar dentro da condição para mesmo clicando no errado ele marcar o certo. Então se marcar a errada ele da o alerte e faz um :checked no input com name="r" value="S" tipo assim $('[name="r"][value="S"]').prop("checked", true);. Dessa forma vc assegura que apenas o input com value="S" pertencente ao radio-group de name="r" vai ser marcado (Obrigado @AndersonCarlosWoss pela observação)

inserir a descrição da imagem aqui

$(document).ready(function() {

    $("input[type='radio']").click(function() {
        var marcado = this.value;

        if (marcado == "S") {
            alert("Correto");
        } else {
            alert("Errado");
            $('[name="r"][value="S"]').prop("checked", true);
        }
    });

});
[value="S"]:checked {
    transform:scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>
    <p>Primeira pergunta de teste:</p>
</h3>

<input name="r" type="radio" class="ace" value="N"> Resposta errada 1
<br>
<input name="r" type="radio" class="ace" value="S"> Resposta certa
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 2
<br>
<input name="r" type="radio" class="ace" value="N"> Resposta errada 3

6
  • Ao invés de $('[value="S"]') é melhor fazer $('[name="r"][value="S"]') para garantir que pegará a opção correta da mesma pergunta (alterando r dinamicamente conforme a pergunta), isso considerando que poderão existir múltiplas perguntas na página. E tenho dizer que é esquisito ter 4 radios com o mesmo value :x
    – Woss
    19/09/2019 às 16:50
  • @AndersonCarlosWoss muito bem observado, até fiz um edit na resposta ;)
    – hugocsl
    19/09/2019 às 16:55
  • 1
    Mas não é marcar a resposta correta se ele marcar a errada. Somente aparecer no alert o texto correspondente a resposta correta.
    – Tiago
    19/09/2019 às 16:58
  • @Tiago nesse caso eu só saberi te responder se o texto seguido do Radio estivesse dentro de uma tag, tipo se estivesse assim: <input name="r" type="radio" class="ace" value="S"> <span>Resposta certa</span> <br> eu conseguira pegar. No entento, parece que a resposta do Guilherme vai te atender nesse ponto.
    – hugocsl
    19/09/2019 às 17:07
  • 1
    @GuilhermeNascimento eu está lendo ela agora mesmo rss, realmente a forma como vc estruturou o HTML ajuda muito a controlar as coisas. Isso deve acontecer bastante quando "designer" faz o HTML, e depois passa para o Dev. fazer o código haha
    – hugocsl
    19/09/2019 às 17:13
2

Primeiro, preciso dizer que o seu HTML não fez muito sentido e parece ser mal planejado. Você tem uma lista que não está como lista; você possui 5 opções de resposta para cada pergunta, mas na verdade tem apenas 2, pois o que é considerado será o value do elemento input[type=radio]. Isto é, o texto "associado" ao input não fará diferença para a semântica. Quando você quer associar um texto ao campo, deverá utilizar o label.

Deveria ser algo assim:

<div id="pergunta-1">
  <h1>Enunciado da pergunta</h1>
  <ul>
    <li>
      <input id="opcao-1" type="radio" name="respostas-1" value="1" data-correta="N">
      <label for="opcao-1">Opção 1 errada</label>
    </li>
    <li>
      <input id="opcao-2" type="radio" name="respostas-1" value="2" data-correta="N">
      <label for="opcao-2">Opção 2 errada</label>
    </li>
    <li>
      <input id="opcao-3" type="radio" name="respostas-1" value="3" data-correta="S">
      <label for="opcao-3">Opção 3 errada</label>
    </li>
    <li>
      <input id="opcao-4" type="radio" name="respostas-1" value="4" data-correta="N">
      <label for="opcao-4">Opção 4 errada</label>
    </li>
    <li>
      <input id="opcao-5" type="radio" name="respostas-1" value="5" data-correta="N">
      <label for="opcao-5">Opção 5 errada</label>
    </li>
  </ul>
</div>

Veja que o value das opções é um valor que identifica aquela opção. Neste exemplo eu utilizei os valores de 1 a 5 representando os ids das opções, mas poderia ser qualquer valor que identifique aquela opção naquela pergunta. O controle de qual opção é a correta foi passada para o atributo data-correta.

Assim, com o JavaScript, ficaria:

$("input[type=radio]").on("change", function() {
  if (this.dataset.correta === 'N') {
    // Exibe a resposta correta:
    alert($(`input[name="${this.name}"][data-correta="S"] + label`).text());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<fieldset id="pergunta-1">
  <h1>Enunciado da pergunta</h1>
  <ul>
    <li>
      <input id="opcao-1" type="radio" name="respostas-1" value="1" data-correta="N">
      <label for="opcao-1">Opção 1 errada</label>
    </li>
    <li>
      <input id="opcao-2" type="radio" name="respostas-1" value="2" data-correta="N">
      <label for="opcao-2">Opção 2 errada</label>
    </li>
    <li>
      <input id="opcao-3" type="radio" name="respostas-1" value="3" data-correta="S">
      <label for="opcao-3">Opção 3 correta</label>
    </li>
    <li>
      <input id="opcao-4" type="radio" name="respostas-1" value="4" data-correta="N">
      <label for="opcao-4">Opção 4 errada</label>
    </li>
    <li>
      <input id="opcao-5" type="radio" name="respostas-1" value="5" data-correta="N">
      <label for="opcao-5">Opção 5 errada</label>
    </li>
  </ul>
</fieldset>

Onde input[name="${this.name}"][data-correta="S"] buscará a resposta correta para aquela pergunta e o + label seleciona o label associado ao input, exibindo o seu texto. Outra opção seria selecionar o label a partir do valor do for através do id da opção correta.

Como as perguntas possuirão um grupo de respostas que serão independentes das opções das outras perguntas, é conveniente utilizar o <fieldset> para agrupar os elementos semanticamente relacionados dentro do formulário.

2
  • Dataset + label .... muito elegante! Só faltou colocar dentro de um fieldset haha. E olha isso que massa, das antigas.... developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/radiogroup
    – hugocsl
    19/09/2019 às 17:20
  • 1
    @hugocsl e inclusive seria interessante colocar cada pergunta dentro de um fieldset para definir a independência entre elas, mesmo pertencendo ao mesmo form.
    – Woss
    19/09/2019 às 17:28
0

Fiz um modelo em JavaScript Puro, sei que não pediu :) Tem outros jeitos de fazer mais este também é bem prático e bem simples.

    var ace = window.document.getElementsByName('r');

    ace[0].addEventListener('click', function (){
        if(ace != 'S'){alert('Resposta Errada')}
        return ace[1].checked = true;
    })
    ace[1],
    ace[2].addEventListener('click', function (){
        if(ace != 'S'){alert('Resposta Errada')}
        return ace[1].checked = true;
    })
    ace[3].addEventListener('click', function (){
        if(ace != 'S'){alert('Resposta Errada')}
        return ace[1].checked = true;
    })

e se você não quiser que marque o botão correto é só apagar os return ace[1].checked = true; e caso queria dar um alert('Resposta correta') é só por assim :

ace[1].addEventListener('click', function (){
        if(ace != 'N'){alert('Resposta Correta')}

    })

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 .