Criei este cronômetro usando o seguinte código, ele está funcionando localmente, mas estou tendo problemas para integrá-lo ao meu fórum. Alguém pode me ajudar?
<!-- HTML (Adicione isso na seção Header) -->
<style>
button {
padding: 5px;
margin: 2px;
cursor: pointer;
border: none;
color: white;
width: 100px; /* Defina a largura desejada para todos os botões */
border-radius: 5px;
}
#readTaskButton {
background: #008000; /* Verde mais escuro para melhor visibilidade em fundo escuro */
}
#enterRoomButton {
background: #DAA520; /* Amarelo mais escuro */
}
#pauseButton {
background: #A0522D; /* Laranja mais escuro */
}
#stopButton {
background: #FF0000; /* Vermelho mais escuro */
}
</style>
<div style="display: flex; align-items: center; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
<button id="readTaskButton" onclick="startTimer(90)">Ler Tarefa</button>
<button id="enterRoomButton" onclick="startTimer(480)">Entrar na Sala</button>
</div>
<div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
<button id="pauseButton" onclick="togglePauseResume()">Pausar</button>
<button id="stopButton" onclick="stopTimer()">Parar</button>
</div>
</div>
<!-- JavaScript (Adicione isso na seção Footer) -->
<script>
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 ? 'Retomar' : 'Pausar';
}
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); // Inicia o cronômetro mais longo automaticamente após o cronômetro inicial
} else {
isShortTimer = true;
startTimer(90); // Inicia o cronômetro inicial automaticamente após o cronômetro mais longo
}
}
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 < 10 ? '0' + time : time;
}
function resetTimer() {
clearInterval(timer);
document.getElementById('timer').innerText = '00:00';
}
</script>
Você vai querer inserir o JS no Head em vez disso para fazê-lo funcionar!
Além disso, tome cuidado com o CSS do button — você deve criar um seletor específico para evitar sobrescrever o CSS padrão.
Idealmente, você vai querer criar um componente de tema e usar um outlet para lidar com HTML/lógica. Posso te mostrar mais tarde!
Eu tentei isso. Criei um novo componente de tema e, em seguida, usando a opção editar CSS/HTML, inseri esse código na seção common > header. Posso ver o cronômetro no site, mas o problema é que o cronômetro não funciona. Ele tem botões de play e stop, localmente funciona bem, mas no site ele só mostra o cronômetro, mas sem funcionalidade.
Sim, seu código está sendo bloqueado pelo CSP. (veja as configurações de segurança)
Você poderia adicionar unsafe-inline às configurações, mas isso não parece uma boa ideia.
No seu caso, para fazer seu código funcionar com o CSP ativado, acredito que você precise lidar com o clique de forma diferente.
A propósito, aqui está um componente de tema usando seu código: https://github.com/Arkshine/discourse-timer-component.
Sinta-se à vontade para fazer um fork e instalar em seu Discourse.
Espero que meu código não seja muito ruim, mas essa seria a maneira preferida em oposição a adicionar JavaScript simples neste contexto.
Deve funcionar da mesma forma com reatividade extra, configurações e localidade.
Pode ser avassalador, mas é uma excelente oportunidade para mergulhar no desenvolvimento de componentes de tema! Não hesite em perguntar se não entender algo.
Eu recomendo fortemente usar o Discourse Theme CLI se você quiser trabalhar com ele localmente. É útil!
É um cronômetro contínuo, primeiro começa com 1:30 seg, depois muda para 8:00 min, depois muda para 1:30 e assim por diante, nunca termina.
Quando o cronômetro está em execução, os usuários precisam ter a capacidade de pular diretamente para 8:00 min clicando no botão “entrar na sala” ou mudar para o cronômetro de 1:30 clicando no cronômetro de leitura da tarefa. Portanto, desabilitar os botões de pausa e parar quando o cronômetro não está em execução faz sentido, mas quando o cronômetro está em execução e desabilitar os botões de leitura da tarefa e entrar na sala impedirá que os usuários pulem o cronômetro.
Mudanças Futuras:
Adicionar uma nota de voz no início do cronômetro de 1:30 seg, no início do cronômetro de 8:00 min, aos 2:00 min restantes do cronômetro de 8:00 min e, finalmente, no final do cronômetro de 8:00 min, que é basicamente o início do cronômetro de 1:30 seg. Então, no total, três notas de voz.
Adicionar um alerta pop-up para cada nota de voz, que aparece e desaparece, não deve ocupar a tela inteira, mas sim a área onde o cronômetro está localizado.
Eu definitivamente não entendi tudo no seu código; parece que
Não faz sentido poder clicar nesses botões de pausar/parar se um cronômetro não começou. O mesmo vale para mostrar “pausar” ou “retomar”, então é como se na espera você tivesse um cronômetro ativo. Na verdade, eu esconderia o botão. Mas acho que tudo bem usar o rótulo “pausar” como padrão.
Ele alterna entre os dois, tudo bem. Pensei que fosse um loop com um desses cronômetros.
Não tenho certeza se entendi o contexto, parece bem estranho para mim, posso mudar.
Entendi.
Vou consertar isso antes de fazer qualquer outra coisa.
Para mim, é incrível ver este cronômetro ganhar vida. Você é incrível e inspirador.
Este é um cronômetro para um exame realizado por médicos, eu também sou médico e estou tentando ajudar outros médicos.
O exame consiste em 16 salas, contendo 16 pacientes diferentes que precisamos diagnosticar e gerenciar. Antes de entrar em qualquer sala, há uma tarefa do lado de fora que você pode ler em 1 minuto e 30 segundos e, em seguida, você entra na sala, tem 8 minutos para realizar a tarefa e gerenciar os pacientes, o ciclo continua por mais 16 salas. Isso leva um total de 3 horas para ser concluído.
Infelizmente, falhei neste exame, devido a desinformação e orientação incorreta relacionadas a isso, o que me inspirou a criar este fórum para ajudar a orientar outros médicos.
Fiz um update. Ele deve repetir o timer curto/longo, e você pode mudar para qualquer timer agora. Também removi o uso de “waiting..”. Me diga se funciona melhor.
Encontrei um bug, se eu clicar no botão “read task” o cronômetro vai de 1:30 min para 8:00 min e depois continua em loop em 1:30 min. Se eu clicar no botão “enter room”, o cronômetro vai de 8:00 para 1:30 e depois continua em loop no cronômetro de 8:00 min.
Agora, o problema é que ao clicar no botão "Read Task", o cronômetro começa em 1:30 e fica em loop em 8:00.
1:30 > 8:00 > 8:00 > 8:00…
Se você clicar no botão "Enter Room", o cronômetro começa em 8:00 e fica em loop em 1:30.
8:00 > 1:30 > 1:30 > 1:30…
Idealmente, deveria haver um loop contínuo e suave, alternando entre 1:30 e 8:00, com o ponto de partida determinado pelo botão que você clica primeiro.
Por exemplo, se você clicar no botão "Read Task", o cronômetro deve começar em 1:30 e, em seguida, prosseguir em um loop alternado entre 8:00 e 1:30:
1:30 > 8:00 > 1:30 > 8:00…
Se você clicar no botão "Enter Room", o cronômetro deve começar em 8:00 e seguir um loop alternado entre 1:30 e 8:00:
Você tem certeza de que atualizou e recarregou a página? Você descreve o bug antes da correção, e eu não consigo reproduzi-lo agora. Testei novamente, e ele funciona em loop como esperado.
