I created this timer using the following code, it’s working locally but I having trouble integrating it on my forum. Can someone please help? button { padding: 5px; margin: 2px; cursor: pointer; border: none; color: white; width: 100px; /* Set the desired width for all buttons */ border-radius: 5px; } #readTaskButton { background: #008000; /* Darker green for better visibility on dark background */ } #enterRoomButton { background: #DAA520; /* Darker yellow */ } #pauseButton { background: #A0522D; /* Darker orange */ } #stopButton { background: #FF0000; /* Darker red */ } Read Task Enter Room 00:00 Pause Stop let timer; let totalSeconds; let isShortTimer = true; let isPaused = false; function startTimer(duration) { resetTimer(); totalSeconds = duration; timer = setInterval(updateTimer, 1000); } function togglePauseResume() { if (isPaused) { resumeTimer(); } else { pauseTimer(); } updateButtonLabel(); } function updateButtonLabel() { const button = document.getElementById('pauseButton'); button.innerText = isPaused ? 'Resume' : 'Pause'; } function pauseTimer() { clearInterval(timer); isPaused = true; } function resumeTimer() { isPaused = false; timer = setInterval(updateTimer, 1000); } function stopTimer() { resetTimer(); updateButtonLabel(); } function updateTimer() { if (totalSeconds <= 0) { if (isShortTimer) { isShortTimer = false; startTimer(480); // Start the longer timer automatically after the initial timer } else { isShortTimer = true; startTimer(90); // Start the initial timer automatically after the longer timer } } const minutes = Math.floor(totalSeconds / 60); const seconds = totalSeconds % 60; const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`; document.getElementById('timer').innerText = formattedTime; totalSeconds--; } function formatTime(time) { return time

Hi, You would want to insert the JS in Head instead to make it work! Also, be careful with the button CSS – you should make a specific selector to avoid overwriting the default CSS. Ideally, you want to create a theme component, and use an outlet to handle HTML/logic. I can show you later!

Thank you so much for responding. I tried that. I created a new theme component and then by using edit CSS/HTML option, I inserted that code in common>header section. I can see the timer on the website but the problem is that the timer doesn’t play. It has play and stop button, locally it works fine but on the website it only shows the timer but no functioning. [Screenshot 2023-11-12 at 9.08.51 AM] [Screenshot 2023-11-12 at 9.09.24 AM] I also checked console, using inspect and this is the error that it shows. [Screenshot 2023-11-12 at 9.10.39 AM]

Yes, your code is being blocked by CSP. (see security settings) You could whitelist unsafe-inline in the settings, but that doesn’t sound like a good idea. In your case, to make your code work with CSP enabled, i believe you need to handle the click differently. On a side note, here is a theme component using your code: https://github.com/Arkshine/discourse-timer-component. Feel free to fork it and install it on your Discourse. Hopefully, my code is not too horrible, but this would be the preferred way as opposition adding plain JavaScript in this context. It should work the same with extra reactivity stuff, settings, and locale. It may be overwhelming, but it is an excellent opportunity to dig into theme component development! Do not hesitate to ask if you don’t understand something. :slight_smile: I highly recommend using the Discourse Theme CLI if you want to work with it locally. It’s handy!

I can’t thank you enough for helping me with this. This is amazing!! You have inspired me to learn this. :heart: There are few changes and queries I have regarding the timer. Can I share with you?

Queries: What’s the purpose of waiting button? Critical Immediate Changes: It’s a continuous timer, first starts with 1:30 sec then shift to 8:00 min then shift to 1:30 and so on, never ends. When the timer is playing, users need to have the ability to bypass directly to 8:00 min by clicking on enter room button or shift to 1:30 timer by clicking on the read task timer. therefore disabling the pause and stop button when the timer is not playing makes sense but when the timer is playing and disabling the read task and enter room button will unable users to bypass the timer. Future Changes: Adding a voice note at start 1:30 sec timer, start of 8:00 min timer, at remaining 2:00 min of 8:00 min timer and finally end of 8:00 min timer, which is basically the start of 1:30 sec. So in total three voice notes, Adding a pop up alert for at each voice note, which appears and disappears, shouldn’t occupy the full screen, instead the area where timer is located.

I definitively did not understand everything in your code; it would seem :smile: [תמונה] evens_tailors.0d: What’s the purpose of waiting button? It doesn’t make sense to be able to click on those pause/stop buttons if a timer has not started. Same as showing “pause” or “resume”, so it’s like in the waiting you have an active timer. Actually, I would hide the button instead. But I guess it’s fine to use “pause” label as default. [תמונה] evens_tailors.0d: It’s a continuous timer, first starts with 1:30 sec then shift to 8:00 min then shift to 1:30 and so on, never ends. It alternates between both, alright. I thought it was a loop with one of those timers. I’m not sure to understand the context, it looks pretty weird to me, I can change it. :smile: [תמונה] evens_tailors.0d: When the timer is playing.. I see. Let me fix that before doing anything else. :slight_smile:

Hey, For me it’s amazing seeing this timer come to life. You’re amazing and inspiring. This is a timer for a exam given by doctors, I am a doctor as well trying to help other doctors. The exam consists of 16 rooms, containing 16 different patients that we need to diagnose and manage. Before entering any room a task is kept outside that you can read in 1 min 30 sec and then you enter the room, you have 8 minutes to perform the task and manage the patients, the cycle continues for 16 other rooms. that takes in total 3 hours to complete. I unfortunately failed this exam, because of misinformation and misguidance related to this, which has inspired me to create this forum to help guide other doctors. Hope this gives the context. :innocent:

I’ve pushed an update. It should loop short/long timer, and you can switch to any timer now. I’ve also removed the “waiting..” usage. Let me know if it works better. Thanks for explaining the context, I understand now! :+1:

I found a bug, if I click on the read task button the timer goes from 1:30 min to 8:00 min and then keeps looping on 1:30 min. If I click on enter room button, the timer goes from 8:00 to 1:30 and then keeps looping on the 8:00 min timer.

My bad. It’s fixed. I checked only the first loop because I was in a hurry, and I did not notice the switch did not happen after. :smile:

צריך עזרה בשילוב קוד שנכתב ב-Edittext ל-Discourse

מפתח

Plabforum 13 בנובמבר,‏ 2023,‏ 2:22pm 15

I just checked, it’s working as expected.

נושא		תגובות	צפיות
Topic Stopwatch Theme component	32	6692	5 ביוני,‏ 2019
Live Topic Timer Theme component topic-timers	16	3951	29 במרץ,‏ 2021
Turned my Discourse into a successful ecommerce platform! Praise	15	7554	17 בפברואר,‏ 2025
Set Topic Timer not working in Discourse v3.1.5 Development topic-timers	1	120	6 באוגוסט,‏ 2024
Using a theme component instead of an iframe to create a topic timer Development topic-timers	7	894	27 במרץ,‏ 2018

צריך עזרה בשילוב קוד שנכתב ב-Edittext ל-Discourse

נושאים קשורים