タイマー機能

Javascript

<script>
document.addEventListener('DOMContentLoaded', function(){
    const timerElement = document.getElementById('timer');
    const timeLimit = <?php echo $time_limit ?>;
    const elapsedTime = <?php echo $elapsed_time ?>
    let remainingTime = timeLimit - elapsedTime;

    const updateTimer = () => {
        if (remainingTime <= 0) {
            timerElement.textContent = '時間切れです';
            setTimeout(() => { window.location.reload(); }, 1000);
            return;
        }
        const minutes = Math.floor(remainingTime / 60);
        const seconds = remainingTime % 60;
        timerElement.textContent  `残り時間:${minutes}分${seconds}秒`;
        remainingTime--;
        setTimeout(updateTimer, 1000);
    }

    updateTimer();
});
</script>

<div id='timer'></div>

※sessionでタイマー機能をつけた場合、ページを更新しない限りタイマーが更新されません。

PHP

<?php

// セッションの開始
if (!session_id()) {
    session_start();
}

// セッション変数の設定
if (!isset($_SESSION['random_questions'])) {
    $_SESSION['start_time'] = time();
}
 

// 制限時間と消費時間
$time_limit = 300;
$elapsed_time = time() - $_SESSION['start_time'];

// タイムアウトした場合(セッションの削除)
if ($elapsed_time > $time_limit) {
    echo '制限時間(5分)を超過しました';
    display_test_result();
    unset($_SESSION['start_time']);
    return;
}

?>