Sure. The complete implementation would depend on your note template, as well as on what you want the timer to look like and what exactly you want it to do. I can provide the assistance with that as well, but here is the base code:
Styling (timer intervals are set up here, at the top):
:root {
--time-easy: 1s;
--time-norm: 10s;
--timer-width: .5rem;
--col-timer-easy: lightgreen;
--col-timer-norm: green;
--col-timer-bg: white;
}
timer {
margin: .5rem;
height: var(--timer-width);
border-radius: var(--timer-width);
overflow: hidden;
background: var(--col-timer-easy);
background-image: linear-gradient(to right, transparent 50%, var(--col-timer-bg) 50%);
background-size: 200% 100%;
animation: norm-end var(--time-norm) linear forwards,
easy-end .2s linear forwards var(--time-easy);
}
@keyframes norm-end {
100% {background-position: 100%;}
}
@keyframes easy-end {
100% {background-color: var(--col-timer-norm);}
}
JS for the front side:
timer = document.querySelector('timer:not(.off)');
sessionStorage.setItem('ease', 3); // norm
if (timer) {
sessionStorage.setItem('ease', 4); // easy
timer.addEventListener('animationend', (event) => {
sessionStorage.setItem('ease', sessionStorage.getItem('ease') - 1); // -> norm -> hard
});
}
and the HTML for the element itself is simply
<timer></timer>
Then, on the back side of the card, you can retrieve the ‘ease’ with JS like this:
ease = sessionStorage.getItem('ease');
and use its value to make any necessary adjustments, such as adding a class to some element to make a visual indication of how long it took to answer the card or automatically pressing any of the answer buttons (ease will be equal to 4 for easy answers, 3 for normal, and 2 for hard).
Also, if you are using {{FrontSide}} on the back of your card, additional adjustments will have to be made to prevent the timer to appear on the back side and resetting the ease variable.