HTML validating with javascript

Question

Hello I have a college job in which I have to validate some fields in javascript, but I am not able to do, the validation has to say how many of the total questions when you press the button, follow the excerpt of the code in html:

function validarRespostas(){

var total=0;

    if (document.querySelector('input[name = questao1]:checked')){
    if (document.querySelector('input[name = questao1]:checked').value=="a"){
    total =total+1;
    }
    }    
    
    if (document.querySelector('input[name = questao2]:checked')){
    if (document.querySelector('input[name = questao2]:checked').value=="c"){
    total =total+1;
    }
    }
    
    if (document.querySelector('input[name = questao3]:checked')){
    if (document.querySelector('input[name = questao3]:checked').value=="d"){
    total =total+1;
    }
    }

  <h4>Questionário</h4>
              <p> 1) Qual a definição de Programação Orientada a Objetos?</p>
    <label>
    <input type="radio" name="questao1" value="a" /> A) É um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.</label>
    <br />
    <label>
    <input type="radio" name="questao1" value="b" /> B) É um paradigma de programação que usa abstração para criar modelos baseados no mundo real.

    </label>
    <br />
    <label>
    <input type="radio" name="questao1" value="c" /> C) É um paradigma de programação que faz uso da lógica matemática.</label>
    <br />
    <label>
    <input type="radio" name="questao1" value="d" /> D) É um paradigma de programação que descreve a computação como ações, enunciados ou comandos que mudam o estado (variáveis) de um programa.</label>
    <br />
    <p> 2) Quais linguagens abaixo usam a POO?</p>
    <label>
    <input type="radio" name="questao2" value="a" /> A) Java, C# e Haskell.</label>
    <br />
    <label>
    <input type="radio" name="questao2" value="b" /> B) C++, Java e Prolog.

    </label>
    <br />
    <label>
    <input type="radio" name="questao2" value="c" /> C) C++, PHP e Java.</label>
    <br />
    <label>
    <input type="radio" name="questao2" value="d" /> D) Java, C++ e Lisp.</label>
    <br />

    <p> 3) Qual linguagem abaixo não é nativa:</p>
    <label>
    <input type="radio" name="questao3" value="a" /> A) Java.</label>
    <br />
    <label>
    <input type="radio" name="questao3" value="b" /> B) C#.

    </label>
    <br />
    <label>
    <input type="radio" name="questao3" value="c" /> C) PHP.</label>
    <br />
    <label>
    <input type="radio" name="questao3" value="d" /> D) C++.</label>
    <br />
    <button onclick="validarRespostas()">Verificar Respostas</button>

Answer 1

A more simplified way is by using .querySelectorAll(), picking only the radios checked from each group, and then comparing with an array with the answers:

var gabarito = ["a", "c", "d"];

function validarRespostas(){

   var total=0;
   // seleciona apenas os radios checados que tem "name" começando com a palavra "questao"
   var respostas = document.querySelectorAll("input[type='radio'][name^='questao']:checked");

   if(respostas.length < gabarito.length){
      alert("Responda a todas as questões!");
      return;
   }else{
   
      for(var x=0; x < respostas.length; x++){
         if(respostas[x].value == gabarito[x]) total++;
      }
      
      console.log("Acertos: ", total);
   }

}

<h4>Questionário</h4>
           <p> 1) Qual a definição de Programação Orientada a Objetos?</p>
 <label>
 <input type="radio" name="questao1" value="a" /> A) É um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.</label>
 <br />
 <label>
 <input type="radio" name="questao1" value="b" /> B) É um paradigma de programação que usa abstração para criar modelos baseados no mundo real.

 </label>
 <br />
 <label>
 <input type="radio" name="questao1" value="c" /> C) É um paradigma de programação que faz uso da lógica matemática.</label>
 <br />
 <label>
 <input type="radio" name="questao1" value="d" /> D) É um paradigma de programação que descreve a computação como ações, enunciados ou comandos que mudam o estado (variáveis) de um programa.</label>
 <br />
 <p> 2) Quais linguagens abaixo usam a POO?</p>
 <label>
 <input type="radio" name="questao2" value="a" /> A) Java, C# e Haskell.</label>
 <br />
 <label>
 <input type="radio" name="questao2" value="b" /> B) C++, Java e Prolog.

 </label>
 <br />
 <label>
 <input type="radio" name="questao2" value="c" /> C) C++, PHP e Java.</label>
 <br />
 <label>
 <input type="radio" name="questao2" value="d" /> D) Java, C++ e Lisp.</label>
 <br />

 <p> 3) Qual linguagem abaixo não é nativa:</p>
 <label>
 <input type="radio" name="questao3" value="a" /> A) Java.</label>
 <br />
 <label>
 <input type="radio" name="questao3" value="b" /> B) C#.

 </label>
 <br />
 <label>
 <input type="radio" name="questao3" value="c" /> C) PHP.</label>
 <br />
 <label>
 <input type="radio" name="questao3" value="d" /> D) C++.</label>
 <br />
 <button onclick="validarRespostas()">Verificar Respostas</button>

Answer 2

Follow code using Jquery

$(function(){
            
            $("#checkresposta").on('click', function(){
                var total = 0;
                
                if ( $("[name='questao1']:checked").val() == 'a' )
                    total += 1;
                if ( $("[name='questao2']:checked").val() == 'c' )
                    total += 1;
                if ( $("[name='questao3']:checked").val() == 'd' )
                    total += 1;              

                $("#respostas").html("<h3 class='text-success'>Você acertou "+total+ " questões!</h3>")
            })
        })

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h4>Questionário</h4>
    <p> 1) Qual a definição de Programação Orientada a Objetos?</p>
    <label>
    <input type="radio" name="questao1" value="a" /> A) É um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.</label>
    <br />
    <label>
    <input type="radio" name="questao1" value="b" /> B) É um paradigma de programação que usa abstração para criar modelos baseados no mundo real.

    </label>
    <br />
    <label>
    <input type="radio" name="questao1" value="c" /> C) É um paradigma de programação que faz uso da lógica matemática.</label>
    <br />
    <label>
    <input type="radio" name="questao1" value="d" /> D) É um paradigma de programação que descreve a computação como ações, enunciados ou comandos que mudam o estado (variáveis) de um programa.</label>
    <br />
    <p> 2) Quais linguagens abaixo usam a POO?</p>
    <label>
    <input type="radio" name="questao2" value="a" /> A) Java, C# e Haskell.</label>
    <br />
    <label>
    <input type="radio" name="questao2" value="b" /> B) C++, Java e Prolog.

    </label>
    <br />
    <label>
    <input type="radio" name="questao2" value="c" /> C) C++, PHP e Java.</label>
    <br />
    <label>
    <input type="radio" name="questao2" value="d" /> D) Java, C++ e Lisp.</label>
    <br />

    <p> 3) Qual linguagem abaixo não é nativa:</p>
    <label>
    <input type="radio" name="questao3" value="a" /> A) Java.</label>
    <br />
    <label>
    <input type="radio" name="questao3" value="b" /> B) C#.

    </label>
    <br />
    <label>
    <input type="radio" name="questao3" value="c" /> C) PHP.</label>
    <br />
    <label>
    <input type="radio" name="questao3" value="d" /> D) C++.</label>
    <br />
    <button id="checkresposta">Verificar Respostas</button>
    <div id="respostas"></div>

Answer 3

Follow the result in pure Javascript:

it is possible to make another for for the questions, by concatenating the counter (e.g., "question" + i + 1), but so it is more didactic.

function validarRespostas() {
  var gabarito = ['a', 'c', 'd'];
var pontuacao = 0;

  for(i=0;i<4;i++){
    if (document.getElementsByName("questao1")[i].checked){
        if(document.getElementsByName("questao1")[i].value == gabarito[0]){
           pontuacao++;
         }
     }
     if (document.getElementsByName("questao2")[i].checked){
       if(document.getElementsByName("questao2")[i].value == gabarito[1]){
           pontuacao++;
         }
     } 
     if (document.getElementsByName("questao3")[i].checked){
       if(document.getElementsByName("questao3")[i].value == gabarito[2]){
           pontuacao++;
         }
     }
   }
  document.getElementById('pontos').innerHTML = "Resultado:" + pontuacao;
}

<h4>Questionário</h4>
<p> 1) Qual a definição de Programação Orientada a Objetos?</p>
<label>
 
  <span class="validation-msg"></span>
<input type="radio" name="questao1" value="a" /> A) É um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.</label>
<br />
<label>
<input type="radio" name="questao1" value="b" /> B) É um paradigma de programação que usa abstração para criar modelos baseados no mundo real.

</label>
<br />
<label>
<input type="radio" name="questao1" value="c" /> C) É um paradigma de programação que faz uso da lógica matemática.</label>
<br />
<label>
<input type="radio" name="questao1" value="d" /> D) É um paradigma de programação que descreve a computação como ações, enunciados ou comandos que mudam o estado (variáveis) de um programa.</label>
<br />
<p> 2) Quais linguagens abaixo usam a POO?</p>
<label>
<input type="radio" name="questao2" value="a" /> A) Java, C# e Haskell.</label>
<br />
<label>
<input type="radio" name="questao2" value="b" /> B) C++, Java e Prolog.

</label>
<br />
<label>
<input type="radio" name="questao2" value="c" /> C) C++, PHP e Java.</label>
<br />
<label>
<input type="radio" name="questao2" value="d" /> D) Java, C++ e Lisp.</label>
<br />

<p> 3) Qual linguagem abaixo não é nativa:</p>
<label>
<input type="radio" name="questao3" value="a" /> A) Java.</label>
<br />
<label>
<input type="radio" name="questao3" value="b" /> B) C#.

</label>
<br />
<label>
<input type="radio" name="questao3" value="c" /> C) PHP.</label>
<br />
<label>
<input type="radio" name="questao3" value="d" /> D) C++.</label>
<br />
<button onclick="validarRespostas()">Verificar Respostas</button> 
<p id='pontos'>Resultado: </p>