▍程式碼
<div id="sidebar-wrap">
<div id="timer-display" class="shadow">⏱ 100:00</div>
<div id="question-navigator-wrap" class="card shadow-sm p-3">
<h5 class="card-title text-center mb-3">題目概覽</h5>
<div id="question-navigator" class="text-center">
</div>
</div>
</div>
let timerInterval = null;
const TOTAL_TIME_MINUTES = 100;
const TOTAL_TIME_SECONDS = TOTAL_TIME_MINUTES * 60; // 100 分鐘
let timeRemaining = TOTAL_TIME_SECONDS; // 初始化剩餘時間
// 計時器
function formatTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
// 超時強制提交
function forceSubmit() {
clearInterval(timerInterval); // 停止計時
showAlert('時間到!測驗已強制交卷。');
const submitButton = form.querySelector('button[type="submit"]');
if (submitButton && !submitButton.disabled) {
submitButton.click();
}
}
// 開始計時
function startTimer() {
const timerDisplay = document.getElementById('timer-display');
if (timerInterval) {
clearInterval(timerInterval);
}
timerDisplay.textContent = `⏱ ${formatTime(timeRemaining)}`;
timerDisplay.classList.remove('alert-time');
timerInterval = setInterval(() => {
if (timeRemaining <= 0) {
forceSubmit();
} else {
timeRemaining--;
timerDisplay.textContent = `⏱ ${formatTime(timeRemaining)}`;
// 最後10分鐘變為紅底
if (timeRemaining <= 10 * 60) {
timerDisplay.classList.add('alert-time');
}
}
}, 1000);
}
// 測驗提交停止計時
form.addEventListener('submit', async function(e) {
...
if (timerInterval) {
clearInterval(timerInterval);
}
...
});
// 頁面載入啟動計時器開始計時
document.addEventListener('DOMContentLoaded', () => {
if (totalQuestions > 0) {
startTimer();
}
});
