Forum Discussion

MikeLasky's avatar
MikeLasky
Community Member
2 years ago

CountUp with a start, end and duration

Hi All!!!

I wanted a counter to count up to a specific number and stop. Kind of like you see on websites where the number of visitors or certificates earned.

Nothing fancy with regards to the number, no easing or flips

I set up a number variable called "countUp" and set the default to 0. Though it can be anything.

Next, I set up a text variable called "countUpDisplay" and set the default text to countUp.

I added a textbox to the slide.

On the main menu, I went to Insert>Reference and added the countUpDisplay variable to thetextbox. 

FInally I added a trigger to execute javascript and used this code: 

//countUp defining start and end numbers along with increment delay.
var player = GetPlayer();

function countUpTo(start, end, delay) {
var countingDiv = player.GetVar("countUp");
var count = start;

function updateCount() {
countingDiv = count;
count++;

if (count <= end) {
setTimeout(updateCount, delay);
}

//adding the count - 1 as the interval is counted at a fraction above . This will round down to the actual number.
player.SetVar("countUpDisplay", count -1);
}

updateCount();
console.log("Start: " + start);
console.log("End: " + end);
console.log("Delay: " + delay);
}

// (Start the count, end the count, delay in ms). For example, 1-20 with a delay with a delay of 1 second between each count would look like this: countUpTo(1, 20, 1000)
countUpTo(1, 200, 10)

 

I hope this helps anyone who's looking for a count-up!

Mike

General E-Learning
  • SarahHodge's avatar
    SarahHodge
    Former Staff
    2 years ago

    Hi Mike! 👋 Welcome to E-Learning Heroes! Thanks for sharing this countup solution with the community. And you made the instructions so easy to follow. Nice!

    • MikeLasky's avatar
      MikeLasky
      Community Member
      2 years ago

      Always happy to share fun toys!!!!

       

      Here's the code for a countdown from a number to a number. Not a clock countdown.

       

      //countDown defining start and end numbers along with increment delay.
      var player = GetPlayer();
       
      function startCount(start, end, delay) {
      var countingDiv = player.GetVar("countUp");
      var count = start;
       
      function updateCount() {
      countingDiv = count;
      count--;
       
      if (count >= end) {
      setTimeout(updateCount, delay);
      }
       
      //adding the count - 1 as the interval is counted at a fraction above. This will round up to the actual number.
      player.SetVar("countUpDisplay", count + 1);
      }
       
      updateCount();
      console.log("Start at " + start);
      console.log("End at   " + end);
      console.log("Delay in ms:  " + delay + " milliseconds between each number");
      console.log("Delay in sec: " + delay / 1000 + " seconds between each number");
      }
       
      // (Start the count, end the count, delay in ms). For example, 1-20 with a delay with a delay of 1 second between each count would look like this: startCount(1, 20, 1000)
      startCount(300, 0, 20);

       

Related Content