JavaScript

Front-end
#1

Me ajudem fiz o html porem o javascript ainda tenho muita dificuldade

Quando for clicado no botão “Calcular” a página deve mostrar a nota do
usuário, se a nota for maior ou igual a 6 a nota deve ser mostrada na cor
azul, caso contrario a nota deverá ser mostrada na cor vermelha. Cada
questão deve valer 2 pontos. Na questão 4 cada alternativa correta deve
valer 0,4 pontos.

Agenda com JavaScript

Prova de Conhecimentos Gerais

01) Qual é o maior planeta do Sistema Solar?

Terra Marte Vênus Mercúrio Júpiter Saturno Urano Netuno 
    </select>
<div id ="maça">
        <p>02) Carlos tem 8 maças, comeu 2, quantas sobraram?</p>
           
             <input type="radio" name=ram>3 <br>
           
             <input type="radio" name=ram>4 <br>
           
            <input type="radio" name=ram>5<br>
           
            <input id="certo" type="radio" name=ram>6 <br>
            
            <input type="radio" name=ram>7<br>
</div>
<div id ="capital">
        <h3>03)Qual é a capital do Tocantins?</h3>
        <input type="text">
    </div>

    <div id ="elemento">
            <p>04)Quais dos seguintes elementos quimicos são metais?</p>
          
            <input type="checkbox" name=ram> Ouro<br>
           
            <input type="checkbox" name=ram> Carbono<br>
          
            <input type="checkbox" name=ram>  Oxigênio<br>
          
            <input type="checkbox" name=ram>Ferro<br>
            
            <input type="checkbox" name=ram>Mercúrio<br> 
            
        </div>

    <div id ="abolicao">
        <p>05)Informe qual foi a data da abolição da escravatura:<input type="date" name=data></p>
        
       </div> 

       <input type="submit" value="Calcular"><br>
       Notal Final:
    <script src="java.js"></script>
    </body>
</html>
#2

Achei o problema interessante. Não sei se vc já viu os varios frameworks JavaScript que tem por aí, mas todos eles fariam essa sua tarefa de forma bem simples, contudo, eu quis ver como eu faria só com JS puro.

Eis a minha solução:

See the Pen A Simple Quiz by Wellington Domiciano (@wldomiciano) on CodePen.

E eis uma breve explicação:

Primeiro eu estabeleci que a estrutura das questões seria assim:

<div id="question1" class="question" data-answer="4" data-value="2">
  <p>Pergunta?</p>
  <label><input type="radio" name="question1" value="0"> Alternativa 1</label>
  <label><input type="radio" name="question1" value="2"> Alternativa 2</label>
  <label><input type="radio" name="question1" value="4"> Alternativa 3</label>
</div>

Perceba que o id usado na <div> é o mesmo usado nos names dos <input>.

Repare também nos atributos começando com data-, é neles que eu armazeno informações importantes.

Em data-answer fica a resposta, ou respostas (separadas por virgula) no caso de ser multipla escolha, e em data-value eu coloco o valor daquela questão.

Na parte do JS a mágica toda acontece na função checkQuestion. Esta função recebe o id da questão a ser checada e retorna 0 caso a resposta seja incorreta, ou retorna a pontuação feita em caso de acerto. Essa função utiliza os atributos data- para pegar informações como repostas corretas e valor da questão.

Eu comentei o código lá no codepen pra facilitar.

1 curtida
#3

valeu mestre ! muito bom!