Countdown-Timer for revealjs

[produnis]

Description

Hi there, I created a countdown-timer for quarto and revealjs. I use these in my slides, e.g., if the audience should think about an specific topic for 5 minutes or so...

Update: I tried to make an extension, see https://github.com/produnis/quarto-timer

So, I created a javascript file timer.js with the following content:

// inspired by Mateusz Rybczonec

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

// Funktion zur Initialisierung des Timers in einem Container
function initializeTimer(containerId, timeLimit) {
  let timePassed = 0;
  let timeLeft = timeLimit;
  let timerInterval = null;
  let remainingPathColor = COLOR_CODES.info.color;

  // Dynamisches Erstellen des Timer-HTML-Inhalts für jeden Container
  document.getElementById(containerId).innerHTML = `
    <div class="base-timer">
      <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g class="base-timer__circle">
          <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
          <path
            id="${containerId}-path-remaining"
            stroke-dasharray="283"
            class="base-timer__path-remaining ${remainingPathColor}"
            d="
              M 50, 50
              m -45, 0
              a 45,45 0 1,0 90,0
              a 45,45 0 1,0 -90,0
            "
          ></path>
        </g>
      </svg>
      <span id="${containerId}-label" class="base-timer__label">${formatTime(
        timeLeft
      )}</span>
    </div>
  `;

  startTimer();

  // Startet den Timer für einen bestimmten Container
  function startTimer() {
    timerInterval = setInterval(() => {
      timePassed = timePassed += 1;
      timeLeft = timeLimit - timePassed;
      document.getElementById(`${containerId}-label`).innerHTML = formatTime(
        timeLeft
      );
      setCircleDasharray();
      setRemainingPathColor(timeLeft);

      if (timeLeft === 0) {
        onTimesUp();
      }
    }, 1000);
  }

  // Funktion, die aufgerufen wird, wenn der Timer abgelaufen ist
  function onTimesUp() {
    clearInterval(timerInterval);
  }

  // Funktion zur Formatierung der verbleibenden Zeit
  function formatTime(time) {
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;

    if (seconds < 10) {
      seconds = `0${seconds}`;
    }

    return `${minutes}:${seconds}`;
  }

  // Funktion zur Festlegung der Farbe des verbleibenden Pfades basierend auf der verbleibenden Zeit
  function setRemainingPathColor(timeLeft) {
    const { alert, warning, info } = COLOR_CODES;
    const pathId = `${containerId}-path-remaining`;

    if (timeLeft <= alert.threshold) {
      document.getElementById(pathId).classList.remove(warning.color);
      document.getElementById(pathId).classList.add(alert.color);
    } else if (timeLeft <= warning.threshold) {
      document.getElementById(pathId).classList.remove(info.color);
      document.getElementById(pathId).classList.add(warning.color);
    }
  }

  // Funktion zur Berechnung des Anteils der verstrichenen Zeit
  function calculateTimeFraction() {
    const rawTimeFraction = timeLeft / timeLimit;
    return rawTimeFraction - (1 / timeLimit) * (1 - rawTimeFraction);
  }

  // Funktion zur Festlegung der Strichlänge des verbleibenden Pfades basierend auf dem Anteil der verstrichenen Zeit
  function setCircleDasharray() {
    const circleDasharray = `${(
      calculateTimeFraction() * FULL_DASH_ARRAY
    ).toFixed(0)} 283`;
    document
      .getElementById(`${containerId}-path-remaining`)
      .setAttribute("stroke-dasharray", circleDasharray);
  }
}

If I want a timer on a specific slide, I add the following code directly into the qmd-File:

<div id="UNIQUE-ID"></div>
<script src="timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("UNIQUE-ID", SECONDS); 
    });
</script>

...where I have to replace UNIQUE-ID with a (tadaaa) unique ID and SECONDS with the seconds to count down.

Here is an example of 4 minutes of waiting:

Please think about this for 4 minutes.
<div id="4minWaiting"></div>
<script src="timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("4minWaiting", 240); 
    });
</script>

So, I thought somebody could find this usefull...

have fun!!

[cderv]

Thanks for sharing ! This would make a great Extensions : https://quarto.org/docs/extensions/

[produnis]

thx for your answers and hints.
I managed to change from codeblock to div-container, und I managed to activate the plugin. The timer work 50% now, meaning that the Numbers are shown and counting down (hooorayyyy and thx for that)....

... but the nice circle, that turns from green into red is now a complete black circle... :/

[produnis]

I dont understand this...

If I add the extension to some of my existing slide-projcets with
quarto add produnis/quarto-timer
then I am able to use the timers with

---
(...)
filters: 
  - timer
(...)
---

:::{.timer #Testtimer seconds=100}
:::

This works fine.

But if I change back to my "extension"-project and try to render my example.qmd, then it does not work and just shows a full black filled circle...

This happens for both

<div id="UNIQUE-ID"></div>
<script src="_extensions/timer/timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("UNIQUE-ID", 40); 
    });
</script>

as well as

:::{.timer #Testtimer seconds=100}
:::

I dont understand what the problem could be....

Edit: I moved the problem discussion to here: produnis/quarto-timer#1

[cderv]

FWIW I can't use the timer even if I do quarto add produnis/quarto-timer in an existing project. I get the full black filled circled in that case

[produnis]

lol, i forgot to export the corresponding .css-file. Pushed a fix, now it works!

[cderv]

Cool !