CODEWITHSUNDEEP
javascriptjqueryhtmlcssalgorithm
Aimee Casden
Aimee Casden

Reputation: 21

Trying to increment progress bar by percentage

I am making a trivia game similar to what jackbox.tv does and I am trying to figure out the logic I need in order to increment the progress bar by percentage when a player answers the question correctly (I wanna say like +10% for each correctly answered question). I posted some example logic but I don't think it's functional nor the best way to write it.

<script>
  $(document).ready(function () {
    users= [{}];

    // This is the example logic for the animation:

    for(let i = 0; i < users.length; i++) {
      let wid = (users[i].score)*1%
      $('.player1').animate({ width: wid }, 2000)
    }

    $('.player1').animate({ width: '90%' }, 2000);
    $('.player2').animate({ width: '75%' }, 2000);
    $('.player3').animate({ width: '50%' }, 2000);
    $('.player4').animate({ width: '70%' }, 2000);
    $('.player5').animate({ width: '45%' }, 2000);
  });
</script>

Upvotes: 1

Views: 710

Answers (3)

nvioli
nvioli

Reputation: 4219

I think this is what you're trying to do. The main problem is that *1% is meaningless. The percent sign is the modulo / remainder operator, so the interpreter will look for another integer after the % which you don't provide. This is simply broken code.

Instead, you can just do + '%'. Adding a number (the score variable) and a string produces a string like "40%" in the case of player 2. CSS properties can be assigned using strings.

var users = [
  {score: 10},
  {score: 25},
  {score: 40},
  {score: 65},
  {score: 80}
];

$(document).ready(function () {

  for(let i = 0; i < 5; i++) {
    let wid = (users[i].score) + '%';
    $('.player' + (i + 1)).animate({ width: wid }, 2000)
  }

});
.parent {
  width:200px;
}
.player {
  background:red;
  margin-bottom:10px;
  height:20px;
  width:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="parent">
  <div class="player player1"></div>
  <div class="player player2"></div>
  <div class="player player3"></div>
  <div class="player player4"></div>
  <div class="player player5"></div>
</div>

Upvotes: 1

acarlstein
acarlstein

Reputation: 1838

Are you searching for something like this?

enter image description here

$(document).ready(function () {
  
  var players = [
    {
      "id": 1,
      "score": 0.2
    },
    {
      "id": 2,
      "score": 0.5
    }
  ];
  
  for(var index in players){
    var id = players[index].id;
    var score = players[index].score;
    
    console.log(id);
    var selector = ".bar.player" + id;
    var bar = $(selector);
    bar.css("width", 100 * score + "px");
    
  }
}); 
.container {
  display: block;
  margin-top: 40px;
  clear: both;
  
  height: 20px;
  width: 100px;
  background-color: white;
  border: 1px black solid;
}

.bar {
  height: 18px;
  width: 10px;
  background-color: green;
  margin-top: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="bar player1">&nbsp;<div>
<div>

<div class="container">
  <div class="bar player2">&nbsp;<div>
<div>

Upvotes: 1

ray
ray

Reputation: 171

If you haven't yet got a solution, it could help you. https://kimmobrunfeldt.github.io/progressbar.js/ is a library that works very well for me.

enter image description here

Upvotes: 0

Related Questions