0%
//CODE// ----(Note: the sound might not work on mobile browser due to security restrictions)
use a hidden/collapsed audio player element
let counter = -1;
let timer;
let durationInSeconds = 60;
let isSoundOn = true;
$w.onReady(function () {
countdown();
$w("#button1").onClick((event) => {
let status = $w("#button1").label;
if (status === "Start" || status === "Resume") {
timer = setInterval(countdown, 100);
$w("#button1").label = "Pause";
$w("#button2").expand();
} else if (status === "Pause") {
clearInterval(timer);
$w("#button1").label = "Resume";
}
})
$w("#button2").onClick((event) => {
counter = durationInSeconds * 10 + 10;
countdown();
});
})
function countdown() {
let circleValue = (628 * counter / (durationInSeconds * 10)).toString();
if (counter === -1) { circleValue = "0"; }
$w("#vectorImage1").src = `<svg width="226px" height="226px" viewBox="0 0 226 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>timer</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPad" transform="translate(-236.000000, -213.000000)" stroke-width="25">
<g id="donut-chart" transform="translate(249.000000, 226.000000)">
<circle id="base" stroke="#8a2be2" cx="100" cy="100" r="100"></circle>
<circle id="segment1" stroke="#D8D8D8" stroke-dasharray="${circleValue},628" cx="100" cy="100" r="100" transform="translate(100, 100) rotate(-90) translate(-100, -100) "></circle>
</g>
</g>
</g>
</svg>`;
if (Number.isInteger(counter / (durationInSeconds * 0.1)) && counter > 0) { $w("#text43").text = `${counter/(durationInSeconds * 0.1)}%`; }
counter++;
if (counter > durationInSeconds * 10) {
clearInterval(timer);
if (counter < durationInSeconds * 10 + 10 && isSoundOn) { $w("#audioPlayer1").play(); }
counter = -1;
$w("#button1").label = "Start";
$w("#button2").collapse();
setTimeout(() => {
$w("#text43").text = "0%";
countdown();
}, 200)
}
}
export function switch1_change(event) {
if($w("#switch1").checked){
$w("#soundDisabled").collapse();
isSoundOn = true;
} else {
$w("#soundDisabled").expand();
isSoundOn = false;
}
}