WordPress自定义测验插件考试模式下禁止页面刷新方案问询

方案一：前端拦截刷新并提示（快速临时方案） #

在主题的functions.php中添加以下代码，仅针对测验页面生效：

add_action('wp_footer', 'disable_quiz_page_refresh');
function disable_quiz_page_refresh() {
    // 识别测验页面URL
    if (strpos($_SERVER['REQUEST_URI'], '/practice-exam/') !== false) {
        ?>
        <script>
        // 拦截浏览器默认刷新提示
        window.addEventListener('beforeunload', function(e) {
            const message = "Opps you can't refresh the page";
            e.returnValue = message;
            return message;
        });

        // 拦截F5、Ctrl+R、Cmd+R等刷新快捷键
        document.addEventListener('keydown', function(e) {
            const isRefreshKey = e.key === 'F5' 
                || (e.ctrlKey && e.key === 'r') 
                || (e.metaKey && e.key === 'r');
            
            if (isRefreshKey) {
                e.preventDefault();
                alert("Opps you can't refresh the page");
            }
        });
        </script>
        <?php
    }
}

注意：这个方案只能拦截常规刷新操作，用户仍可通过强制关闭页面再打开绕过，仅作为辅助限制手段。

方案二：保存测验进度（根本解决办法） #

刷新后回到起始页的核心原因是进度未持久化，通过保存用户当前答题进度，刷新后自动恢复即可解决问题：

步骤1：初始化Session并添加进度保存接口 #

在functions.php中添加：

// 初始化Session用于存储临时进度
add_action('init', 'quiz_session_init');
function quiz_session_init() {
    if (!session_id()) {
        session_start();
    }
}

// AJAX接口：保存当前答题进度
add_action('wp_ajax_save_quiz_progress', 'save_quiz_progress');
add_action('wp_ajax_nopriv_save_quiz_progress', 'save_quiz_progress');
function save_quiz_progress() {
    if (isset($_POST['current_question'])) {
        $_SESSION['quiz_current_question'] = intval($_POST['current_question']);
        wp_send_json_success('进度已保存');
    }
    wp_send_json_error('参数错误');
}

步骤2：页面加载时恢复进度 #

继续在functions.php中添加：

add_action('wp_footer', 'restore_quiz_progress');
function restore_quiz_progress() {
    if (strpos($_SERVER['REQUEST_URI'], '/practice-exam/') !== false && isset($_SESSION['quiz_current_question'])) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const currentQuestion = <?php echo $_SESSION['quiz_current_question']; ?>;
            // 替换为你的测验插件对应的跳转方法
            // 示例：如果插件有内置的跳题方法，调用它
            // quizInstance.goToQuestion(currentQuestion);
            
            // 如果插件无现成方法，可根据实际DOM结构调整，比如触发对应题目按钮的点击事件
            // document.querySelector(`.question-item[data-index="${currentQuestion}"]`).click();
        });
        </script>
        <?php
    }
}

步骤3：配合插件答题逻辑触发保存 #

在用户完成一题切换到下一题时，通过JS调用AJAX保存进度：

// 假设插件的下一题点击事件是这个，根据实际情况修改
document.querySelector('.next-question-btn').addEventListener('click', function() {
    const currentQuestion = 2; // 替换为获取当前题目的逻辑
    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=save_quiz_progress&current_question=' + currentQuestion
    });
});

如果是登录用户，可将Session替换为用户元数据（update_user_meta/get_user_meta），实现跨设备进度同步。

内容的提问来源于stack exchange，提问作者Samuel Owen