thu

Thứ sáu - 03/04/2026 19:14

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trắc nghiệm Hình học không gian</title>
    <style>
        :root { --primary: #2563eb; --bg: #f8fafc; --card: #ffffff; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); display: flex; justify-content: center; padding: 20px; }
        #quiz-container { background: var(--card); width: 100%; max-width: 700px; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .hidden { display: none; }
        input[type="text"] { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
        button { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; width: 100%; font-size: 16px; transition: opacity 0.2s; }
        button:hover { opacity: 0.9; }
        .question { font-weight: bold; font-size: 1.1rem; margin-bottom: 20px; color: #1e293b; }
        .options { display: grid; gap: 10px; }
        .option-btn { background: #f1f5f9; border: 2px solid #e2e8f0; text-align: left; transition: all 0.2s; color: #334155; }
        .option-btn:hover { background: #e2e8f0; border-color: #cbd5e1; }
        .progress { margin-bottom: 20px; font-size: 0.9rem; color: #64748b; }
        #result-area { text-align: center; }
    </style>
</head>
<body>

<div id="quiz-container">
    <div id="auth-screen">
        <h2>Bài tập Hình học không gian [cite: 2]</h2>
        <p>Vui lòng nhập thông tin để bắt đầu thi (Thời gian: 13 phút) [cite: 1]</p>
        <input type="text" id="student-name" placeholder="Họ và tên..." required>
        <input type="text" id="student-class" placeholder="Lớp..." required>
        <button onclick="startQuiz()">Bắt đầu làm bài</button>
    </div>

    <div id="quiz-screen" class="hidden">
        <div class="progress" id="progress">Câu hỏi 1/25</div>
        <div id="question-text" class="question"></div>
        <div id="options-container" class="options"></div>
    </div>

    <div id="result-screen" class="hidden">
        <h2>Kết quả bài thi</h2>
        <p id="summary"></p>
        <button onclick="location.reload()">Làm lại</button>
    </div>
</div>

<script>
    const quizData = [
        { q: "Khi quay hình chữ nhật ABCD một vòng quanh cạnh AB cố định, ta thu được hình gì?", a: ["Hình nón", "Hình trụ", "Hình cầu", "Hình lăng trụ đứng"], c: 1 }, [cite: 3]
        { q: "Công thức tính diện tích xung quanh $S_{xq}$ của hình trụ là:", a: ["$S_{xq}=\\pi Rh$", "$S_{xq}=2\\pi Rh$", "$S_{xq}=\\pi R^{2}h$", "$S_{xq}=2\\pi R^{2}$"], c: 1 }, [cite: 4]
        { q: "Công thức tính thể tích V của hình trụ là:", a: ["$V=\\frac{1}{3}\\pi R^{2}h$", "$V=2\\pi Rh$", "$V=\\pi R^{2}h$", "$V=4\\pi R^{2}$"], c: 2 }, [cite: 4]
        { q: "Khi quay một tam giác vuông SOA quanh cạnh góc vuông SO cố định, ta thu được:", a: ["Hình cầu", "Hình trụ", "Hình nón", "Hình chóp"], c: 2 }, [cite: 7]
        { q: "Trong hình nón, đoạn thẳng nối từ đỉnh đến một điểm trên đường tròn đáy gọi là:", a: ["Chiều cao", "Đường sinh", "Bán kính đáy", "Đường kính"], c: 1 }, [cite: 9]
        { q: "Một mặt cầu có bán kính R=5 cm. Đường kính của mặt cầu đó là:", a: ["5 cm", "10 cm", "25 cm", "57 cm"], c: 1 }, [cite: 21]
        { q: "Diện tích của một mặt cầu có bán kính bằng 10 cm là:", a: ["100π cm²", "200π cm²", "400π cm²", "4000π/3 cm²"], c: 2 } [cite: 24]
        // Bạn có thể thêm đầy đủ 25 câu hỏi vào đây dựa trên danh sách câu hỏi đã giải [cite: 1]
    ];

    let currentIdx = 0;
    let score = 0;
    let userInfo = {};

    function startQuiz() {
        const name = document.getElementById('student-name').value;
        const cls = document.getElementById('student-class').value;
        if(!name || !cls) return alert("Vui lòng nhập đầy đủ thông tin!");
        userInfo = { name, cls };
        document.getElementById('auth-screen').classList.add('hidden');
        document.getElementById('quiz-screen').classList.remove('hidden');
        showQuestion();
    }

    function showQuestion() {
        const q = quizData[currentIdx];
        document.getElementById('progress').innerText = `Câu hỏi ${currentIdx + 1}/${quizData.length}`;
        document.getElementById('question-text').innerText = q.q;
        const container = document.getElementById('options-container');
        container.innerHTML = '';
        q.a.forEach((opt, i) => {
            const btn = document.createElement('button');
            btn.className = 'option-btn';
            btn.innerText = opt;
            btn.onclick = () => handleAnswer(i);
            container.appendChild(btn);
        });
    }

    function handleAnswer(selected) {
        if(selected === quizData[currentIdx].c) score++;
        currentIdx++;
        if(currentIdx < quizData.length) {
            showQuestion();
        } else {
            showResult();
        }
    }

    function showResult() {
        document.getElementById('quiz-screen').classList.add('hidden');
        document.getElementById('result-screen').classList.remove('hidden');
        document.getElementById('summary').innerHTML = `
            Học sinh: <strong>${userInfo.name}</strong> - Lớp: <strong>${userInfo.cls}</strong><br><br>
            Số câu đúng: ${score}/${quizData.length}<br>
            Điểm số: ${(score/quizData.length * 10).toFixed(2)}
        `;
    }
</script>

</body>
</html>

Tác giả: letrinh