Interrating between a correct and incorrect question with a progress bar?

Question

Interrating between a correct and incorrect question with a progress bar?

Navigation

#1 by (0 votes)

0

$(document).ready(function() {
  $('form').submit(function(e) {
    e.preventDefault();

    var answerValue = $('#answer').val();
    answerValue = answerValue.toLowerCase();

    if (answerValue == 'rafael') {
      $('body').append('<span class="notice">Acertou!</span>');
    } else {
      $('body').append('<span class="notice">Tente novamente!</span>');
    }
  });
});

.notice {
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  background:#fafafa;
  font-size:1.4em;
  text-align:center;
  padding:.5em;
  color:#328580;
  font-weight:700;
}
body {
  background:#335778;
}
* { box-sizing:border-box }
.answer {
  padding-left:2em;
  text-align:center;
  display:block;
  margin-bottom:.5em;
  font-size:2em;
  letter-spacing:8px;
  &::first-letter {
    position:relative;
    margin-right:-3.6em;
    
  }
}
form {
  width:320px;
  border:1px solid #fafafa;
  margin:5em auto 0;
  padding:2em;
  background:#fafafa;
  color:#444;
  border-radius:3px;
}

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><form><spanclass="answer">
      Quem sou eu?
     </span>
    <input id="answer" type="text" placeholder="Enter Above Word">
    <input type="submit" value="submit">
  </form>
</body>

</html>

I wanted the progress bar to interact through a hit or error corresponding to a question at each hit a percentage of the bar increases and every error it decreases using the above code!

javascript progress-bar

asked by anonymous 28.07.2017 / 00:23

1 answer

Import txt to postgresql Problems with displaying cookies

score 0 · Answer 1

Your question was confused. You should have put the bar your HTML code.

Follow the commented code.

<!DOCTYPE html>
<html>
<head>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){$('form').submit(function(e){e.preventDefault();varanswerValue=$('#answer').val();answerValue=answerValue.toLowerCase();//calculaotamanhoatualdabarraeminteirovarwidth=parseInt($("#myBar").width());

    //Esvazia sua tag span para não repetir a resposta
    $('.notice').empty();

    if (answerValue == 'rafael') {
      $('body').append('<span class="notice">Acertou!</span>');

      //aumenta o tamanho da barra
      $("#myBar").width(width + 10);
    } else {
      $('body').append('<span class="notice">Tente novamente!</span>');

      //diminui o tamanho da barra
       $("#myBar").width(width - 10);
    }
  });
});

</script>
</head>
<body>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>

<body>
  <form>
    <span class="answer">
      Quem sou eu?
     </span>
    <input id="answer" type="text" placeholder="Enter Above Word">
    <input type="submit" value="submit">
  </form>
</body>

</body>
</html>