How do I combine a checkbox with a switch?

Asked

Viewed 100 times

1

I’m trying to validate the answer marked on a form. The intention is to create a multiple choice question where if the marked item is correct it presents a response, if not, that presents another message. The right answer comes to me, but the wrong one doesn’t. What could be wrong? Thank you!


Javascript

resp_a = document.getElementById("01_a").checked = false;
resp_b = document.getElementById("01_b").checked = false;
resp_c = document.getElementById("01_c").checked = true;
resp_d = document.getElementById("01_d").checked = false;
resp_e = document.getElementById("01_e").checked = false;   

switch(){
    case resp_a:
        document.getElementById("resp_01").innerHTML = "Você errou, tente novamente!";
        break;

    case resp_b:
        document.getElementById("resp_01").innerHTML = "Você errou, tente novamente!";
        break;

    case resp_c:
        document.getElementById("resp_01").innerHTML = "Você acertou!";
        break;

    case resp_d:
        document.getElementById("resp_01").innerHTML = "Você errou, tente novamente!";
        break;

    case resp_e:
        document.getElementById("resp_01").innerHTML = "Você errou, tente novamente!";
        break;
}
  • Switch will not do because you have to check all the answers, when finding the first correct answer the switch will be finished.

2 answers

1

This code you posted is half empty, lack to know the correct options.

But you can do this to validate the checkbox marked and validate according to the correct answer.

function verificaRespostas () {
            event.preventDefault()
            var myForm = document.querySelector('[data-js=myForm]');
            var resposta ='';
            for(var i=0;i <= myForm.children.length; i++){
                if(myForm.children[i].type =='checkbox'){
                    if(myForm.children[i].checked){
                        resposta += myForm.children[i].value +' está correta <br />'
                    }else{
                        resposta += myForm.children[i].value +' está errada <br />'
                    }                    
                }
                document.getElementById('respostas').innerHTML = resposta;                
            }
        }
.form {
        width: 500;
        padding: 10px;
        border: solid 1px #EEE;
    }
    .btn{
        background-color: #FFF;
        padding: 20px;
        border: solid 1px #EEE;
        font-weight: bold;      
    }
    .btn:hover{
        background-color: #DDD;
    }
<div id="respostas" class="resposta">
<form class="form" data-js="myForm" name="myForm">
        Resposta A
        <input id="resp_a" name="resp_a" type="checkbox" value="Resposta A">      
        
        Resposta B
        <input id="resp_b" name="resp_b" type="checkbox" value="Resposta B">        
        
        Resposta C
        <input id="resp_c" name="resp_c" type="checkbox" value="Resposta C">        
        
        Resposta D
        <input id="resp_d" name="resp_d" type="checkbox" value="Resposta D">        
        
        Resposta E
        <input id="resp_e" name="resp_e" type="checkbox" value="Resposta E">        
        
        <input type="submit" class="btn" onclick="verificaRespostas()" value="Verificar respostas" />
    </form>
    

0

You have to put an argument on switch It can’t just be empty. You have to have switch (uma_variável){ and then if it is x do something, if y do something, etc...

That said I think the switch is not the best thing here. You could do it like this:

function analizarPergunta(nome, respostaCerta) {
    var escolhida = document.querySelector('[name="' + nome + '"]:checked');
    return respostaCerta === escolhida.value;
}

document.querySelector('button').addEventListener('click', function() {
    var acertou = analizarPergunta('pergunta_01', '01_c')
    alert(acertou ? 'Correto!' : 'Errado!');
});
A: <input type="radio" name="pergunta_01" value="01_a"> 
B: <input type="radio" name="pergunta_01" value="01_b">
C: <input type="radio" name="pergunta_01" value="01_c">
D: <input type="radio" name="pergunta_01" value="01_d">
E: <input type="radio" name="pergunta_01" value="01_e">

<p><button>Verificar</button></p>
<p id="resp_01"></p>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.