Problems while validating quiz response with javascript

Question

Problems while validating quiz response with javascript

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm trying to create a simple quiz but I do not have much programming skills.

The intention is that when the user dials a response and clicks the button, a div appears showing whether it is right or wrong.

Initially, I did with a alert in javascript and it worked, then changed to appear the divs, started to give problem. I think the reason is because it loads the page, so it disappears, is that right? How do I solve this problem?

Follow 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>

javascript div popup

asked by anonymous 30.03.2016 / 16:21

2 answers

What would be equivalent to these two properties of persistence.xml in hibernate? How to Redeem External Data JSON

score 2 · Answer 1

Hello, this code was not working because the form when it was submitted returned it to its beginning, that is, 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 whole 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 have helped!

score 0 · Answer 2

I have other problems now. I needed 4 forms and they are conflicting with other answers. This is the link link

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 "Incorrect response" div button I would like to hide that div and when I click on the "correct answer" div button the following form appears. I thought about doing this with anchor but I do not know if it would have anything better.

Thank you in advance.