Check if a radius has been checked

0

I'm doing a quiz and would like a code that checks if the radio was selected, if it was not selected give a "select at least one answer" message

    <body>
        <h1 id="titulo">Quizz Game Of Thrones</h1>
        <hr>
        <div id = "container" name ="div1">
            <section id = "perguntas">
                <h2>Pergunta 1 de 10</h2>
                <h2 id="nr_pergunta">Qual o nome dos três dragões de Daenerys Targaryen?</h2>
                <ul>
                    <li>
                        <input name="alternativa" id="resp1" class="alt_certa" type="radio">
                        <label for="resp1">Drogon, Viserion e Rhaegal</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp2" type="radio">
                        <label for="resp2">Rhaego, Viserys e Drogo.</label>



                    </li>
                    <li>
                        <input name="alternativa" id="resp3" type="radio">
                        <label for="resp3">Drogon, Viserys e Aegon.</label>



                    </li>
                </ul>
            <button id="avanca">Avançar</button>

            </section>
        </div>


    </body>

    var perguntas_vet = [    
    {id_perg: 1, pergunta: 'Qual o nome dos três dragões de Daenerys Targaryen? ', alt1: 'Drogon, Viserion e Rhaegal', alt2:'Drogon, Viserys e Aegon.', alt3:'Rhaego, Viserys e Drogo.'}, 

    {id_perg: 2, pergunta: 'Qual o nome da espada dada a Jon Snow, pelo comandante da patrulha da noite?', alt1:'Garralonga', alt2:'Luminífera', alt3: 'Fantasma'}, 

    {id_perg: 3, pergunta: 'Qual o lema, em inglês, da casa Arryn?', alt1:'Family, Duty, Honor', alt2:'As High As Honor', alt3:'Our Blades are Sharp'}, 

    {id_perg: 4, pergunta: 'Quem foi o primeiro a se sentar no trono após a morte do Rei Louco?', alt1: 'Jaime Lannister', alt2:'Robert Baratheon', alt3: 'Ned Stark'},

    {id_perg: 5, pergunta: 'Qual o nome da espada de Arya, recebida por Jon Snow?', alt1:'Nymeria', alt2:'Agulha', alt3: 'Lady'}, 

    {id_perg:6, pergunta:'Quem foi que matou Jon Arryn?', alt1:'Lysa Arryn', alt2:'Joffrey Baratheon', alt3: 'Cersei Lannister'},

    {id_perg: 7, pergunta: 'Qual foi o adjetivo dado ao primeiro Targaryen a se tornar rei de Westeros?', alt1: 'Aegon, o Libertador', alt2: 'Aegon, o Dragão', alt3: 'Aegon, o Conquistador'},

    {id_perg: 8, pergunta: 'Por que Robert se tornou rei após a morte do Rei louco?', alt1:'Por ser ele quem matou o Príncipe Rhaegar, que era reconhecido como um dos maiores cavaleiros do reino.', alt2: 'Devido a ter uma ligação sanguínea com os Targaryen, a sua reivindicação ao trono era maior do que os outros participantes da rebelião.', alt3: 'Por seus grandes feitos em batalha, que o fez cativar diversas pessoas, e até mesmo a transformar antigos inimigos em aliados.'}, 

    {id_perg: 9, pergunta: 'Quais são os poderes de Bran Stark?', alt1: 'Vidente verde', alt2: 'Warg', alt3: 'Warg e Vidente verde'},

    {id_perg: 10, pergunta: 'Qual a música tocada no Casamento Vermelho, que alertou a todos a iniciar o massacre?', alt1: 'Winter has come', alt2: 'The Rains of Castamere', alt3: 'The North Remembers'}];

var resposta_usuario = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
var resposta_gabarito = ["resp1", "resp1", "resp2", "resp1", "resp2", "resp1", "resp3", "resp2", "resp3", "resp2"];
var pontuacao = 0, fim, resp1, resp2, resp3, avanca, pergutnas, nr_pergunta, cont = 0, finaliza;
window.onload = padrao;
function padrao (){

    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;

}

function selecionaResp(){
    resposta_usuario[cont] = event.target.id;
}

function corrigeResp(){
        if (confirm("Tem certeza que deseja finalizar a tentativa?") == true){
            perguntas.innerHTML = ""
            for (var i =0; i<resposta_usuario.length;i++){
                if(resposta_gabarito[i]==resposta_usuario[i]){
                    pontuacao +=1;
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Correta!</p>");
                }

                else if (resposta_gabarito[i]!=resposta_usuario[i]){
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Incorreta!</p>");
                }
            }

        perguntas.insertAdjacentHTML('afterbegin', "<h3>Pontuação: "+pontuacao+" de 10</h3>");
        }

}






function mostraPerguntas(){
    if(event.target.id=="avanca") cont++;
    else cont--;
    if(cont == perguntas_vet.length) cont = 0;
    if(cont < 0)cont = perguntas_vet.length -1;

    perguntas.innerHTML = '<h2 id="nr_pergunta">Perunta: '+(cont+1)+ ' de 10</h2>' +
                          '<h2 id="ti_pergunta">'+(perguntas_vet[cont].pergunta)+ '</h2>' +
                          '<ul>'+
                          '<li><input name="alternativa" id="resp1" type="radio"><label for="resp1">'+ (perguntas_vet[cont].alt1)+'</label></li>'+
                          '<li><input name="alternativa" id="resp2" type="radio"><label for="resp2">'+ (perguntas_vet[cont].alt2)+'</label></li>'+ 
                          '<li><input name="alternativa" id="resp3" type="radio"><label for="resp3">'+ (perguntas_vet[cont].alt3)+'</label></li>'+
                          '</ul>'+
                          '<button id="avanca">Avancar</button>';
    if (cont==9){
        perguntas.insertAdjacentHTML('beforeend', '<button id="finaliza">Finalizar tentativa</button>')
        finaliza = document.getElementById("finaliza");
        finaliza.onclick = corrigeResp;

    }


    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    finaliza = document.getElementById("finaliza");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;


}
    
asked by anonymous 23.09.2018 / 22:55

2 answers

0

Clicking "Next" is called the mostraPerguntas() function. Then put the code below at the beginning of this function:

// verifica radios
var pergs = document.getElementById("perguntas");
var resp = pergs.querySelector("[type=radio]:checked");
if(!resp){
   alert("selecione ao menos uma resposta");
   return;
}

The variable resp will try to select some dialed radiobutton. If there is none, it returns false and displays the alert as well as exiting the function with return .

See:

var perguntas_vet = [    
    {id_perg: 1, pergunta: 'Qual o nome dos três dragões de Daenerys Targaryen? ', alt1: 'Drogon, Viserion e Rhaegal', alt2:'Drogon, Viserys e Aegon.', alt3:'Rhaego, Viserys e Drogo.'}, 

    {id_perg: 2, pergunta: 'Qual o nome da espada dada a Jon Snow, pelo comandante da patrulha da noite?', alt1:'Garralonga', alt2:'Luminífera', alt3: 'Fantasma'}, 

    {id_perg: 3, pergunta: 'Qual o lema, em inglês, da casa Arryn?', alt1:'Family, Duty, Honor', alt2:'As High As Honor', alt3:'Our Blades are Sharp'}, 

    {id_perg: 4, pergunta: 'Quem foi o primeiro a se sentar no trono após a morte do Rei Louco?', alt1: 'Jaime Lannister', alt2:'Robert Baratheon', alt3: 'Ned Stark'},

    {id_perg: 5, pergunta: 'Qual o nome da espada de Arya, recebida por Jon Snow?', alt1:'Nymeria', alt2:'Agulha', alt3: 'Lady'}, 

    {id_perg:6, pergunta:'Quem foi que matou Jon Arryn?', alt1:'Lysa Arryn', alt2:'Joffrey Baratheon', alt3: 'Cersei Lannister'},

    {id_perg: 7, pergunta: 'Qual foi o adjetivo dado ao primeiro Targaryen a se tornar rei de Westeros?', alt1: 'Aegon, o Libertador', alt2: 'Aegon, o Dragão', alt3: 'Aegon, o Conquistador'},

    {id_perg: 8, pergunta: 'Por que Robert se tornou rei após a morte do Rei louco?', alt1:'Por ser ele quem matou o Príncipe Rhaegar, que era reconhecido como um dos maiores cavaleiros do reino.', alt2: 'Devido a ter uma ligação sanguínea com os Targaryen, a sua reivindicação ao trono era maior do que os outros participantes da rebelião.', alt3: 'Por seus grandes feitos em batalha, que o fez cativar diversas pessoas, e até mesmo a transformar antigos inimigos em aliados.'}, 

    {id_perg: 9, pergunta: 'Quais são os poderes de Bran Stark?', alt1: 'Vidente verde', alt2: 'Warg', alt3: 'Warg e Vidente verde'},

    {id_perg: 10, pergunta: 'Qual a música tocada no Casamento Vermelho, que alertou a todos a iniciar o massacre?', alt1: 'Winter has come', alt2: 'The Rains of Castamere', alt3: 'The North Remembers'}];

var resposta_usuario = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
var resposta_gabarito = ["resp1", "resp1", "resp2", "resp1", "resp2", "resp1", "resp3", "resp2", "resp3", "resp2"];
var pontuacao = 0, fim, resp1, resp2, resp3, avanca, pergutnas, nr_pergunta, cont = 0, finaliza;
window.onload = padrao;
function padrao (){

    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;

}

function selecionaResp(){
    resposta_usuario[cont] = event.target.id;
}

function corrigeResp(){
        if (confirm("Tem certeza que deseja finalizar a tentativa?") == true){
            perguntas.innerHTML = ""
            for (var i =0; i<resposta_usuario.length;i++){
                if(resposta_gabarito[i]==resposta_usuario[i]){
                    pontuacao +=1;
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Correta!</p>");
                }

                else if (resposta_gabarito[i]!=resposta_usuario[i]){
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Incorreta!</p>");
                }
            }

        perguntas.insertAdjacentHTML('afterbegin', "<h3>Pontuação: "+pontuacao+" de 10</h3>");
        }

}






function mostraPerguntas(){

// verifica radios
var pergs = document.getElementById("perguntas");
var resp = pergs.querySelector("[type=radio]:checked");
if(!resp){
   alert("selecione ao menos uma resposta");
   return;
}

    if(event.target.id=="avanca") cont++;
    else cont--;
    if(cont == perguntas_vet.length) cont = 0;
    if(cont < 0)cont = perguntas_vet.length -1;

    perguntas.innerHTML = '<h2 id="nr_pergunta">Perunta: '+(cont+1)+ ' de 10</h2>' +
                          '<h2 id="ti_pergunta">'+(perguntas_vet[cont].pergunta)+ '</h2>' +
                          '<ul>'+
                          '<li><input name="alternativa" id="resp1" type="radio"><label for="resp1">'+ (perguntas_vet[cont].alt1)+'</label></li>'+
                          '<li><input name="alternativa" id="resp2" type="radio"><label for="resp2">'+ (perguntas_vet[cont].alt2)+'</label></li>'+ 
                          '<li><input name="alternativa" id="resp3" type="radio"><label for="resp3">'+ (perguntas_vet[cont].alt3)+'</label></li>'+
                          '</ul>'+
                          '<button id="avanca">Avancar</button>';
    if (cont==9){
        perguntas.insertAdjacentHTML('beforeend', '<button id="finaliza">Finalizar tentativa</button>')
        finaliza = document.getElementById("finaliza");
        finaliza.onclick = corrigeResp;

    }


    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    finaliza = document.getElementById("finaliza");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;


}
<h1 id="titulo">Quizz Game Of Thrones</h1>
        <hr>
        <div id = "container" name ="div1">
            <section id = "perguntas">
                <h2>Pergunta 1 de 10</h2>
                <h2 id="nr_pergunta">Qual o nome dos três dragões de Daenerys Targaryen?</h2>
                <ul>
                    <li>
                        <input name="alternativa" id="resp1" class="alt_certa" type="radio">
                        <label for="resp1">Drogon, Viserion e Rhaegal</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp2" type="radio">
                        <label for="resp2">Rhaego, Viserys e Drogo.</label>



                    </li>
                    <li>
                        <input name="alternativa" id="resp3" type="radio">
                        <label for="resp3">Drogon, Viserys e Aegon.</label>



                    </li>
                </ul>
            <button id="avanca">Avançar</button>

            </section>
        </div>
    
24.09.2018 / 01:57
0

You can do this with a simple check in JS . If all checked is false , it displays the alert message and does not let the form complete the submission. If one of the radios is selected, it does not enter if and completes sending the form:

function testar(){
  alt1 = document.getElementById("alt1");
  alt2 = document.getElementById("alt2");
  alt3 = document.getElementById("alt3");

  if(alt1.checked == false && alt2.checked == false && alt3.checked == false) {
    alert("Selecione ao menos uma resposta");
    return false;
  }
  else{
    form.submit();
  }
}
<form id="form" onsubmit="testar(this); return false;">
  <input type="radio" name="alter" id="alt1"> Alternativa 1
  <input type="radio" name="alter" id="alt2"> Alternativa 2
  <input type="radio" name="alter" id="alt3"> Alternativa 3
  <button>Enviar</button>
</form>
    
24.09.2018 / 01:43