Problems validating quiz response with javascript

Question

Problems validating quiz response with javascript

Asked 8 years, 3 months ago

Viewed 946 times

1

I’m trying to create a simple quiz but I don’t have much programming.

The intention is that when the user marks a reply and clicks on the button, a div showing whether it’s right or wrong.

Initially, I did with the one alert in javascript And it had worked, and then I switched it to the Ivs, and it started giving problems. I believe that the reason is because it carries the page, hence it disappears, that’s right? How to solve this problem?

Follows the code:

     function fSubmit() {
       var correctanswer = document.getElementById("oi");
       if (correctanswer.checked == true) {
         document.getElementById("div-certo").style.display = 'block';
       } else {
         document.getElementById("div-errado").style.display = 'block';
       }
     }

    #div-certo {
      display: none;
      width: 300px;
      height: 200px;
      background: green;
    }
    #div-errado {
      display: none;
      width: 300px;
      height: 200px;
      background: yellow;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>

</head>

<body>

  <form>
    lalalalalala
    <input name="radio" type="radio" value="errado1" id="errado1">
    <input name="radio" type="radio" value="errado2" id="errado2">
    <input name="radio" type="radio" value="certo" id="oi">
    <input name="radio" type="radio" value="errado3" id="errado3">
    <input type="submit" id="btnsubmit" onClick="fSubmit()" />
  </form>

  <div id="div-certo">certo</div>

  <div id="div-errado">errado</div>

</body>

</html>

2 answers

Browser other questions tagged javascript div popup

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

by Guilherme Sanches • **394** points · Answer 1 · 2016-03-30T14:34:31+00:00

Hello, Test this code, it did not work before because the form when it was submitted it went back to its beginning, IE, it updated the page, so the solution was to put an Event in the form that does not let it be updated, it inserts the div without updating the entire page

function fSubmit() {

  var correctanswer = document.getElementById("oi");
  var form = document.getElementById('form');

  form.addEventListener('submit', function(event) {
    if (correctanswer.checked) {
      document.getElementById("div-certo").style.display = 'block';
      document.getElementById("div-errado").style.display = 'none';

    } else {
      document.getElementById("div-certo").style.display = 'none';
      document.getElementById("div-errado").style.display = 'block';
    }
    event.preventDefault();
  });

}

    #div-certo {
      display: none;
      width: 300px;
      height: 200px;
      background: green;
    }
    #div-errado {
      display: none;
      width: 300px;
      height: 200px;
      background: yellow;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
</head>

<body>

  <form id="form">
    lalalalalala
    <input name="radio" type="radio" value="errado1" id="errado1">
    <input name="radio" type="radio" value="errado2" id="errado2">
    <input name="radio" type="radio" value="certo" id="oi">
    <input name="radio" type="radio" value="errado3" id="errado3">
    <input type="submit" id="btnsubmit" onClick="fSubmit()" />
  </form>

  <div id="div-certo">certo</div>
  <div id="div-errado">errado</div>

</body>

</html>

I hope I’ve helped!

by Juliana Souza • 11 points · Answer 2 · 2016-04-20T18:13:43+00:00

I’m in other trouble now. I needed four forms and they’re conflicting with other answers. This is the link http://juadri.com.br/cursos/quiz.html

And the code

<!DOCTYPE html>
<html lang="pt-br" id="Pos">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/styleQuiz.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
</head>

<body>

<div id="mainQuiz">
    <div class="contentQuiz">
        <div class="boxQuiz">
            <div class="numQuiz">1</div>
            <div class="boxContentQuiz boxEsq">
            Assinale o que uma criança de 4 anos provavelmente NÃO consegue fazer com autonomia e facilidade, apesar de poder haver raras exceções:
            </div>
            <div class="boxContentQuiz boxDir">
              <form id="form01">
                <label><input name="radio" type="radio" value="resposta01" id="resposta01">Consegue pular com os dois pés e com um pé só</label>
                <label><input name="radio" type="radio" value="resposta02" id="resposta02">Começa a fazer amigos e entender o que é a amizade</label>
                <label><input name="radio" type="radio" value="resposta03" id="resposta03">Imita os adultos a sua volta e até os seus colegas</label>
                <label><input name="radio" type="radio" value="resposta04" id="resposta04">Escreve e lê convencionalmente</label>
                <input type="submit" id="btnsubmit" onClick="fSubmit()" value="" />
              </form>
            </div>
        </div>
    </div>

<div class="contentQuiz">
        <div class="boxQuiz">
            <div class="numQuiz">2</div>
            <div class="boxContentQuiz boxEsq">
            Assinale o que uma criança de 4 anos provavelmente NÃO consegue fazer com autonomia e facilidade, apesar de poder haver raras exceções:
            </div>
            <div class="boxContentQuiz boxDir">
              <form id="form02">
                <label><input name="radio" type="radio" value="resposta05" id="resposta05">Consegue pular com os dois pés e com um pé só</label>
                <label><input name="radio" type="radio" value="resposta06" id="resposta06">Começa a fazer amigos e entender o que é a amizade</label>
                <label><input name="radio" type="radio" value="resposta07" id="resposta07">Imita os adultos a sua volta e até os seus colegas</label>
                <label><input name="radio" type="radio" value="resposta08" id="resposta08">Escreve e lê convencionalmente</label>
                <input type="submit" id="btnsubmit" onClick="fSubmit()" value="" />
              </form>
            </div>
        </div>
    </div>

</div>
  <div id="div-certo">
    <div class="divCertoConteudo animated bounceInUp">
      RESPOSTA CORRETA <br>
      <a href=""><img src="imgs/btProxima.png"></a>
    </div>
  </div>
  <div id="div-errado">
  <div class="divErradoConteudo animated bounceInUp">
  RESPOSTA INCORRETA<br>
      <a href=""><img src="imgs/btProxima.png"></a>
  </div>
  </div>

<script type="text/javascript">
function fSubmit() {


  var form = document.getElementById('form01');
  var correctanswer = document.getElementById("resposta02");

  form.addEventListener('submit', function(event) {
    if (correctanswer.checked) {
      document.getElementById("div-certo").style.display = 'block';
      document.getElementById("div-errado").style.display = 'none';

    } else {
      document.getElementById("div-certo").style.display = 'none';
      document.getElementById("div-errado").style.display = 'block';
    }
    event.preventDefault();
  });


  var form = document.getElementById('form02');
  var correctanswer = document.getElementById("resposta07");

  form.addEventListener('submit', function(event) {
    if (correctanswer.checked) {
      document.getElementById("div-certo").style.display = 'block';
      document.getElementById("div-errado").style.display = 'none';

    } else {
      document.getElementById("div-certo").style.display = 'none';
      document.getElementById("div-errado").style.display = 'block';
    }
    event.preventDefault();
  });

}
</script>



</body>
</html>

Another thing if you can help me, when I click on the div button "Incorrect answer" I would like to hide that div and when I click on the div button "correct answer" the next form appears. I thought about doing it with anchor but I don’t know if I could do better.

Thanks in advance.