随机提问(JS)

- 可根据提取题库随机提问，问题数量可选。

- 题库具有记忆功能。

- 可更新题库。

- 鼠标悬浮查看提示。

JS

let availableQuestions = []; // 全局变量，用于存储当前可用的题目列表

// 更新按钮文本和状态的函数
function updateButtonStatInit() {
    const generateButton = document.getElementById('generate-questions');
    generateButton.textContent = '开始答题';
}

// 更新按钮文本和状态的函数
function updateButtonStatNext() {
    const generateButton = document.getElementById('generate-questions');
    generateButton.textContent = '下一页';
}

// 更新按钮文本和状态的函数
function updateButtonStatDone() {
    const generateButton = document.getElementById('generate-questions');
    generateButton.textContent = '已完成，点击重新开始';
}


document.getElementById('upload-button').addEventListener('click', function () {
    const fileInput = document.getElementById('file-input');
    const file = fileInput.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const lines = e.target.result.split('\n').filter(line => line.trim());
            const questionsWithAttributes = [];
            let currentTypes = [];
            lines.forEach(line => {
                const trimmedLine = line.trim();
                if (trimmedLine) {
                    if (trimmedLine.startsWith('# ')) {
                        // 一级类型
                        currentTypes = [trimmedLine.substring(2).trim()];
                    } else if (trimmedLine.startsWith('## ')) {
                        // 二级类型
                        if (currentTypes.length > 0) {
                            currentTypes = [currentTypes[0], trimmedLine.substring(3).trim()];
                        } else {
                            // 如果没有一级类型，则将二级类型作为一级类型
                            currentTypes = ['Null', trimmedLine.substring(3).trim()];
                        }
                    } else if (trimmedLine.startsWith('### ')) {
                        // 3级类型
                        if (currentTypes.length > 1) {
                            currentTypes[2] = trimmedLine.substring(4).trim();
                        } else if (currentTypes.length > 0) {
                            currentTypes = [currentTypes[0], 'Null', trimmedLine.substring(4).trim()];
                        }
                        else {
                            currentTypes = ['Null', 'Null', trimmedLine.substring(4).trim()];
                        }
                    } else {
                        // 普通问题
                        questionsWithAttributes.push({
                            question: trimmedLine,
                            types: [...currentTypes] // 复制当前的类型数组
                        });
                    }
                }
            });

            localStorage.setItem('questions', JSON.stringify(questionsWithAttributes));
            availableQuestions = [...questionsWithAttributes]; // 初始化可用题目列表
            console.log("questions: ", availableQuestions);
        };
        reader.readAsText(file);
    }

    updateButtonStatInit();
});


document.getElementById('generate-questions').addEventListener('click', function () {
    const questionCount = parseInt(document.getElementById('question-count').value, 10);
    const questionList = document.getElementById('question-list');
    console.log("START generate questions: ", questionCount, availableQuestions);

    questionList.innerHTML = '';

    if (availableQuestions.length === 0) {
        // 如果题库被耗尽，从localStorage中重新加载题目
        let storedQuestions = JSON.parse(localStorage.getItem('questions')) || [];
        availableQuestions = [...storedQuestions];
    }

    // 生成随机题目列表
    const questionNum = Math.min(questionCount, availableQuestions.length);
    for (let i = 0; i < questionNum; i++) {
        let randomIndex = Math.floor(Math.random() * availableQuestions.length);
        const questionObject = availableQuestions[randomIndex];
        availableQuestions.splice(randomIndex, 1); // 从可用题目列表中移除已选题目

        // 创建列表元素并添加题目文本
        const li = document.createElement('li');
        li.textContent = questionObject.question;
        // 添加悬停显示属性
        li.title = "" + questionObject.types.join(' -- ');
        questionList.appendChild(li);
    }

    if (availableQuestions.length === 0) {
        updateButtonStatDone();
    } else {
        updateButtonStatNext();
    }
});

// 页面加载时从localStorage初始化availableQuestions
document.addEventListener('DOMContentLoaded', function () {
    let storedQuestions = JSON.parse(localStorage.getItem('questions')) || [];
    availableQuestions = [...storedQuestions]; // 复制到可用题目列表
    console.log("init questions: ", availableQuestions);

    updateButtonStatInit();
});

 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机题库出题程序</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        #file-upload-container {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        label {
            font-size: 1rem;
        }

        select {
            font-size: 0.8rem;
            /* 字体大小调小 */
            padding: 5px;
            /* 内边距减小 */
            height: 30px;
            /* 高度调整，可以根据需要调整 */
        }

        input,
        button {
            font-size: 1rem;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            display: inline-block;
        }

        button {
            background-color: #5d647b;
            border: none;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #4e5677;
        }

        #generate-questions-container {
            position: fixed;
            /* 固定位置 */
            left: 0;
            /* 从左侧开始 */
            right: 0;
            /* 从右侧开始 */
            bottom: 0;
            /* 底部对齐 */
            background-color: #fff;
            /* 背景色 */
            padding: 10px 0;
            /* 垂直填充 */
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
            /* 阴影效果 */
            text-align: center;
            /* 居中文本 */
        }

        body {
            padding-bottom: 70px;
            /* 应大于按钮的高度加上其上下的 padding */
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        li:hover {
            background-color: #f0f0f0;
            /* 悬停时的背景颜色，可根据需要调整 */
            cursor: pointer;
            /* 改变鼠标指针的外观 */
        }

        #file-input {
            border: 1px solid #ddd;
        }

        #question-list {
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div id="file-upload-container">
        <input type="file" id="file-input" accept=".txt">
        <button id="upload-button">上传题库</button>
    </div>
    <label for="question-count">选择出题数量:</label>
    <select id="question-count">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5" selected>5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <ol id="question-list"></ol>
    <div id="generate-questions-container">
        <button id="generate-questions">开始答题</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

题库示例

# 第一章：心理学概述
## 第一节：心理学的研究对象和结构
1.	心理学概念
2.	心理过程
3.	个性心理
4.	心理过程和个性心理的关系