Ich habe diesen Timer mit dem folgenden Code erstellt. Er funktioniert lokal, aber ich habe Probleme bei der Integration in mein Forum. Kann mir bitte jemand helfen?
<!-- HTML (Zum Header-Bereich hinzufügen) -->
<style>
button {
padding: 5px;
margin: 2px;
cursor: pointer;
border: none;
color: white;
width: 100px; /* Gewünschte Breite für alle Buttons festlegen */
border-radius: 5px;
}
#readTaskButton {
background: #008000; /* Dunkleres Grün für bessere Sichtbarkeit auf dunklem Hintergrund */
}
#enterRoomButton {
background: #DAA520; /* Dunkleres Gelb */
}
#pauseButton {
background: #A0522D; /* Dunkleres Orange */
}
#stopButton {
background: #FF0000; /* Dunkleres Rot */
}
</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)">Aufgabe lesen</button>
<button id="enterRoomButton" onclick="startTimer(480)">Raum betreten</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()">Pause</button>
<button id="stopButton" onclick="stopTimer()">Stopp</button>
</div>
</div>
<!-- JavaScript (Zum Footer-Bereich hinzufügen) -->
<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 ? 'Fortsetzen' : '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); // Den längeren Timer nach dem anfänglichen Timer automatisch starten
} else {
isShortTimer = true;
startTimer(90); // Den anfänglichen Timer nach dem längeren Timer automatisch starten
}
}
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>
Sie müssten das JS in den Head-Bereich einfügen, damit es funktioniert!
Seien Sie auch vorsichtig mit dem button-CSS – Sie sollten einen spezifischen Selektor erstellen, um das Überschreiben des Standard-CSS zu vermeiden.
Idealerweise möchten Sie eine Theme-Komponente erstellen und einen Outlet verwenden, um HTML/Logik zu verarbeiten. Ich kann es Ihnen später zeigen!
Ich habe das versucht. Ich habe eine neue Theme-Komponente erstellt und dann über die Option CSS/HTML bearbeiten diesen Code in den Abschnitt common>header eingefügt. Ich kann den Timer auf der Website sehen, aber das Problem ist, dass der Timer nicht abspielt. Er hat eine Play- und Stopp-Taste, lokal funktioniert er einwandfrei, aber auf der Website wird nur der Timer angezeigt, aber er funktioniert nicht.
Ja, Ihr Code wird von CSP blockiert. (siehe Sicherheitseinstellungen)
Sie könnten unsafe-inline in den Einstellungen auf die Whitelist setzen, aber das klingt nicht nach einer guten Idee.
In Ihrem Fall, um Ihren Code mit aktiviertem CSP zum Laufen zu bringen, müssen Sie den Klick meines Erachtens anders behandeln.
Nebenbei bemerkt, hier ist eine Theme-Komponente, die Ihren Code verwendet: https://github.com/Arkshine/discourse-timer-component.
Fühlen Sie sich frei, sie zu forken und auf Ihrem Discourse zu installieren.
Hoffentlich ist mein Code nicht allzu schrecklich, aber dies wäre der bevorzugte Weg, anstatt hier einfachen JavaScript-Code hinzuzufügen.
Er sollte mit zusätzlichen Reaktivitätsfunktionen, Einstellungen und Gebietsschemata genauso funktionieren.
Es mag überwältigend sein, aber es ist eine ausgezeichnete Gelegenheit, sich mit der Entwicklung von Theme-Komponenten zu beschäftigen! Zögern Sie nicht zu fragen, wenn Sie etwas nicht verstehen.
Ich empfehle dringend die Verwendung der Discourse Theme CLI, wenn Sie lokal damit arbeiten möchten. Sie ist sehr nützlich!
Es ist ein fortlaufender Timer, der zuerst mit 1:30 Sek. beginnt, dann zu 8:00 Min. wechselt, dann zu 1:30 und so weiter, niemals endet.
Wenn der Timer läuft, müssen Benutzer die Möglichkeit haben, direkt zu 8:00 Min. zu springen, indem sie auf die Schaltfläche „Raum betreten“ klicken, oder zum 1:30 Timer zu wechseln, indem sie auf den Timer „Aufgabe lesen“ klicken. Daher ist es sinnvoll, die Pausen- und Stopptaste zu deaktivieren, wenn der Timer nicht läuft, aber wenn der Timer läuft und die Schaltflächen „Aufgabe lesen“ und „Raum betreten“ deaktiviert sind, können Benutzer den Timer nicht umgehen.
Zukünftige Änderungen:
Hinzufügen einer Sprachnotiz zu Beginn des 1:30-Sekunden-Timers, zu Beginn des 8:00-Minuten-Timers, in den verbleibenden 2:00 Minuten des 8:00-Minuten-Timers und schließlich am Ende des 8:00-Minuten-Timers, was im Grunde der Beginn der 1:30 Sekunden ist. Also insgesamt drei Sprachnotizen,
Hinzufügen einer Popup-Benachrichtigung für jede Sprachnotiz, die erscheint und verschwindet und nicht den gesamten Bildschirm einnehmen sollte, sondern den Bereich, in dem sich der Timer befindet.
Ich habe definitiv nicht alles in deinem Code verstanden; es scheint so
Es ergibt keinen Sinn, auf diese Pausen-/Stopp-Schaltflächen klicken zu können, wenn kein Timer gestartet wurde. Dasselbe gilt für die Anzeige von „Pause“ oder „Fortsetzen“, sodass es so ist, als ob Sie im Wartezustand einen aktiven Timer hätten. Eigentlich würde ich die Schaltfläche ausblenden. Aber ich schätze, es ist in Ordnung, als Standard die Beschriftung „Pause“ zu verwenden.
Er wechselt zwischen beiden, in Ordnung. Ich dachte, es wäre eine Schleife mit einem dieser Timer.
Ich bin mir nicht sicher, ob ich den Kontext verstehe, er erscheint mir ziemlich seltsam, ich kann ihn ändern.
Ich verstehe.
Ich werde das beheben, bevor ich etwas anderes tue.
Es ist erstaunlich für mich zu sehen, wie dieser Timer zum Leben erwacht. Du bist erstaunlich und inspirierend.
Dies ist ein Timer für eine Prüfung, die von Ärzten abgelegt wird. Ich bin ebenfalls Arzt und versuche, anderen Ärzten zu helfen.
Die Prüfung besteht aus 16 Räumen mit 16 verschiedenen Patienten, die wir diagnostizieren und behandeln müssen. Bevor Sie einen Raum betreten, gibt es eine Aufgabe, die Sie draußen lesen können. Dies dauert 1 Minute und 30 Sekunden, dann betreten Sie den Raum. Sie haben 8 Minuten Zeit, um die Aufgabe zu erledigen und die Patienten zu behandeln. Der Zyklus wird für 16 weitere Räume fortgesetzt. Dies dauert insgesamt 3 Stunden.
Ich bin leider an dieser Prüfung gescheitert, aufgrund von Fehlinformationen und falscher Anleitung. Dies hat mich inspiriert, dieses Forum zu erstellen, um anderen Ärzten zu helfen.
Ich habe ein Update hochgeladen. Es sollte den kurzen/langen Timer durchlaufen, und Sie können jetzt zu jedem Timer wechseln. Ich habe auch die Verwendung von „waiting..“ entfernt. Lassen Sie mich wissen, ob es besser funktioniert.
Danke für die Erklärung des Kontexts, ich verstehe jetzt!
Ich habe einen Fehler gefunden. Wenn ich auf die Schaltfläche „Aufgabe lesen“ klicke, springt der Timer von 1:30 Min. auf 8:00 Min. und läuft dann immer wieder bei 1:30 Min. Wenn ich auf die Schaltfläche „Raum betreten“ klicke, springt der Timer von 8:00 auf 1:30 und läuft dann immer wieder bei 8:00 Min.
Mein Fehler. Es ist behoben. Ich habe nur die erste Schleife überprüft, weil ich es eilig hatte, und ich habe nicht bemerkt, dass der Wechsel danach nicht stattgefunden hat.
Nun ist das Problem, dass beim Klicken auf die Schaltfläche „Aufgabe lesen“ der Timer bei 1:30 beginnt und bei 8:00 schleift.
1:30 > 8:00 > 8:00 > 8:00 ..
Wenn Sie auf die Schaltfläche „Raum betreten“ klicken, beginnt der Timer bei 8:00 und schleift bei 1:30.
8:00 > 1:30 > 1:30 > 1:30 ..
Idealerweise sollte es eine reibungslose, kontinuierliche Schleife geben, die zwischen 1:30 und 8:00 wechselt, wobei der Startpunkt durch die zuerst angeklickte Schaltfläche bestimmt wird.
Wenn Sie beispielsweise auf die Schaltfläche „Aufgabe lesen“ klicken, sollte der Timer bei 1:30 beginnen und dann in einer alternierenden Schleife zwischen 8:00 und 1:30 fortfahren:
1:30 > 8:00 > 1:30 > 8:00..
Wenn Sie auf die Schaltfläche „Raum betreten“ klicken, sollte der Timer bei 8:00 beginnen und einer alternierenden Schleife zwischen 1:30 und 8:00 folgen:
Sind Sie sicher, dass Sie die Seite aktualisiert und neu geladen haben? Sie beschreiben den Fehler vor der Korrektur, und ich kann ihn jetzt nicht reproduzieren. Ich habe es erneut getestet, und es läuft wie erwartet.
Der erste Schritt ist die Installation von Discourse für die Entwicklung. Das erleichtert das Testen.
Dann können Sie meine Komponente forken, sie irgendwo klonen und die Discourse Theme CLI verwenden.
Schauen Sie sich den <template>... </template> Code an. Sie können Ihren Text dort hinzufügen.
Die CSS-Datei befindet sich in der Datei common/common.scss.
Sie können Ihren Text lokalisieren, indem Sie einen Eintrag in locales/en.yml hinzufügen – dann können Sie {{I18n.t(themePrefix("my_translation_key"))}} verwenden.
