1

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>
4
  • 1
    FYI you can insert a code snippet to give us a working example of what you have so far. You should edit your question to include that, it will really help people help you!
    – Marie
    Apr 23, 2019 at 19:35
  • ^^ i did add a code snippet Apr 23, 2019 at 19:38
  • Sorry, to clarify, there is actually a feature called "Snippet" that you can insert that gives you a little runnable iframe with a "Run" button to demo your code. It shows up as "Insert Snippet" in the editor window
    – Marie
    Apr 23, 2019 at 19:39
  • You'll need to add the relevant HTML and CSS as well. Apr 23, 2019 at 19:41

3 Answers 3

1

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>

1

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>

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.