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

Asked

Viewed 83 times

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>
    <span class="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 at each error it decreases using the above code!

javascript progress-bar
  • 2

    What progress bar?

  • 1

    But this code is completely different from the one in question. Please do the [tour] and read the [Ask] guide. Also read about making a [mcve].

  • This progress bar https://codepen.io/anon/pen/KvdgYo I want its interaction according to accuracy and response error if you view the code above and run you will visualize a question system if you hit appears a hit message so it happens when you miss.

1 answer

0

Your question was confused. You should have slashed 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();

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

    //calcula o tamanho atual da barra em inteiro 
    var width = 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>

Browser other questions tagged javascript progress-bar

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