このタイマーは以下のコードを使用して作成しました。ローカルでは動作しますが、フォーラムへの統合に問題があります。どなたか手伝っていただけますか？
<!-- HTML (ヘッダーセクションに追加) -->
<style>
button {
padding: 5px;
margin: 2px;
cursor: pointer;
border: none;
color: white;
width: 100px; /* すべてのボタンの希望の幅を設定 */
border-radius: 5px;
}
#readTaskButton {
background: #008000; /* ダークグリーンで暗い背景での視認性を向上 */
}
#enterRoomButton {
background: #DAA520; /* ダークイエロー */
}
#pauseButton {
background: #A0522D; /* ダークオレンジ */
}
#stopButton {
background: #FF0000; /* ダークレッド */
}
</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)">Read Task</button>
<button id="enterRoomButton" onclick="startTimer(480)">Enter Room</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()">Stop</button>
</div>
</div>
<!-- JavaScript (フッターセクションに追加) -->
<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 ? '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); // 初期タイマーの後に長いタイマーを自動的に開始
} else {
isShortTimer = true;
startTimer(90); // 長いタイマーの後に初期タイマーを自動的に開始
}
}
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>
こんにちは。
動作させるには、JSをHeadに挿入する必要があります。
また、buttonのCSSには注意してください。デフォルトのCSSを上書きしないように、特定のセレクターを作成する必要があります。
理想的には、テーマコンポーネントを作成し、アウトレットを使用してHTML/ロジックを処理します。後でご紹介します！
「いいね！」 2
ご返信ありがとうございます。
それを試しました。新しいテーマコンポーネントを作成し、CSS/HTMLの編集オプションを使用して、それを共通のヘッダーセクションに挿入しました。ウェブサイトでタイマーを確認できますが、問題はタイマーが再生されないことです。再生と停止ボタンがあり、ローカルでは正常に動作しますが、ウェブサイトではタイマーが表示されるだけで機能しません。
コンソールも確認し、検査を使用して、これが表示されるエラーです。
はい、あなたのコードはCSPによってブロックされています。（セキュリティ設定を参照してください）
設定でunsafe-inlineをホワイトリストに追加することもできますが、それは良い考えではないように思えます。
あなたのケースでは、CSPを有効にしたままコードを機能させるために、クリックの処理方法を変更する必要があると思います。
ちなみに、あなたのコードを使用したテーマコンポーネントはこちらです：https://github.com/Arkshine/discourse-timer-component。
自由にフォークして、Discourseにインストールしてください。
うまくいけば、私のコードはひどいものではないでしょうが、このコンテキストでプレーンなJavaScriptを追加するよりも、こちらの方が望ましい方法です。
追加のリアクティビティ、設定、ロケールでも同じように機能するはずです。
圧倒されるかもしれませんが、テーマコンポーネント開発に飛び込む絶好の機会です！何か分からないことがあれば、遠慮なく質問してください。
ローカルで作業したい場合は、Discourse Theme CLIの使用を強くお勧めします。便利ですよ！
「いいね！」 2
本当に感謝してもしきれません。素晴らしいです!!
これを学ぶ意欲を掻き立てられました。
タイマーについていくつか変更と質問があります。お伝えしてもよろしいですか？
コードのすべてを理解できたわけではありません。
タイマーが開始されていないのに、これらのポーズ/停止ボタンをクリックできるのは意味がありません。「一時停止」や「再開」を表示するのも同様で、待機中にアクティブなタイマーがあるようなものです。実際には、ボタンを非表示にするべきだと思います。しかし、デフォルトで「一時停止」というラベルを使用しても問題ないでしょう。
両方を交互に繰り返すのですね。どちらかのタイマーでループすると思っていました。
文脈がよくわかりません。私にはかなり奇妙に見えますが、変更できますよ。
なるほど。
何かをする前に、それを修正させてください。
こんにちは。
このタイマーが実際に動作しているのを見るのは素晴らしいことです。あなたは素晴らしい、そして刺激的な人です。
これは医師が行う試験のためのタイマーです。私も医師であり、他の医師を助けようとしています。
試験は16の部屋で構成されており、それぞれに16人の異なる患者がいます。私たちはそれらを診断し、管理する必要があります。部屋に入る前に、外に1分30秒で読めるタスクがあり、その後部屋に入ります。タスクを実行し、患者を管理するために8分間あり、このサイクルが他の16の部屋でも続きます。合計で3時間かかります。
残念ながら、私はこの試験に不合格になりました。これは、この件に関する誤った情報や誤った指導によるものであり、他の医師を指導するためにこのフォーラムを作成するきっかけとなりました。
これで文脈が伝わったことを願っています。
「いいね！」 1
アップデートをプッシュしました。ショート/ロングタイマーのループ、および任意のタイマーへの切り替えができるはずです。「waiting..」の使用も削除しました。よりうまく機能するか教えてください。
コンテキストを説明していただきありがとうございます。理解しました！
「いいね！」 2
バグを見つけました。タスクを読むボタンをクリックすると、タイマーが1:30分から8:00分になり、その後1:30分でループし続けます。部屋に入るボタンをクリックすると、タイマーが8:00分から1:30分になり、その後8:00分のタイマーでループし続けます。
私のミスです。修正しました。急いでいたため、最初のループしか確認せず、その後にスイッチが切り替わらないことに気づきませんでした。
「いいね！」 2
大丈夫です！\n\n\n以前共有していただいた資料からも学習を開始します。質問があれば、またご連絡します。
現在、「Read Task」ボタンをクリックすると、タイマーは1:30から始まり、8:00でループします。
1:30 > 8:00 > 8:00 > 8:00 ..
「Enter Room」ボタンをクリックすると、タイマーは8:00から始まり、1:30でループします。
8:00 > 1:30 > 1:30 > 1:30 ..
理想的には、最初にクリックしたボタンによって開始点が決まり、1:30と8:00の間で交互にスムーズに連続ループする必要があります。
例えば、「Read Task」ボタンをクリックした場合、タイマーは1:30から始まり、その後8:00と1:30の間で交互にループします。
1:30 > 8:00 > 1:30 > 8:00..
「Enter Room」ボタンをクリックした場合、タイマーは8:00から始まり、1:30と8:00の間で交互にループします。
8:00 > 1:30 > 8:00 > 1:30..
ページを更新してリフレッシュしたか確認しましたか？ バグは修正前のもので、今は再現できません。再度テストしたところ、期待通りにループしました。
「いいね！」 1
これでタイマーの変更方法を自分で学べるようになり、あなたに迷惑をかけずに済みます。
この既存のタイマープロジェクトで、学習に役立つ小さなタスクを自分に与えたいと思います。
タスクは、実際のタイマーのすぐ上に「PLAB 2 Timer」という名前を追加することです。次のようになります。
どこから始めればよいか教えていただけますか？
開発のためにDiscourseをインストールするのが最初のステップです。テストが容易になります。
次に、私のコンポーネントをフォークし、どこかにクローンして、Discourse Theme CLIを使用できます。
\u003ctemplate\u003e... \u003c/template\u003e コードを確認してください。そこにテキストを追加できます。
CSSは common/common.scss ファイルにあります。
locales/en.yml にエントリを追加してテキストをローカライズできます。その後、{{I18n.t(themePrefix("my_translation_key"))}} を使用できます。
「いいね！」 2
