Hướng dẫn tạo game Trắc nghiệm lịch sử Việt Nam với Gemini AI

3 Đánh giá

Bạn có bao giờ nghĩ rằng việc học lịch sử có thể trở nên thú vị như chơi game chưa? Sẽ không còn cảnh lật mở những trang sách dài hay nhớ những con số khô khan, giờ đây bạn hoàn toàn có thể biến kiến thức lịch sử Việt Nam thành một trò chơi trắc nghiệm sống động, nơi mỗi câu hỏi là một thử thách, mỗi đáp án là kiến thức mới.

Với sự hỗ trợ của công cụ AI mạnh mẽ như Gemini, việc tạo ra một game học tập không còn là điều quá xa vời. Bạn không cần phải là lập trình viên chuyên nghiệp mà chỉ cần một chút tò mò, một chút sáng tạo. Hãy bắt đầu ngay thôi nào.

Cách tạo game Trắc nghiệm lịch sử Việt Nam với Gemini AI

Bước 1: Trước tiên, bạn hãy mở ứng dụng Gemini AI lên nhập prompt sau để nó tạo game trắc nghiệm lịch sử Việt Nam

hãy tạo game trắc nghiệm về lịch sử Việt Nam với 15 câu hỏi, mỗi câu hỏi sẽ có 4 phương án trả lời cho người chơi chọn và chỉ có duy nhất 1 đáp án đúng, các câu hỏi sẽ trải dài từ thời phong kiến cho tới 2 cuộc kháng chiến chống Pháp, chống Mỹ

Bước 2: Sau đó, Gemini AI sẽ phân tích Prompt rồi tạo cho bạn một game trắc nghiệm để bạn chơi thử ở màn hình bên phải

Chơi thử ở màn hình bên phải

Bước 3: Bạn có thể yêu cầu Gemini tiếp tục chỉnh sửa, hoàn thiện tựa game trắc nghiệm này. Ví dụ như

cuối game sẽ có số điểm của người chơi và lời nhận xét dí dỏm dựa trên điểm số đó

màn hình chơi game vẫn còn thanh scroll, tôi muốn khi công bố đáp án kèm theo 1 dòng thông tin cung cấp thêm về đáp án đúng và các đáp án được hiển thị rõ hơn (hiện tại bị làm mờ)

Chỉnh sửa game

Bước 4: Sau khi đã cảm thấy ưng ý với chỉnh sửa của Gemini AI, bạn có thể yêu cầu nó tạo file html để tải về máy với prompt

tạo thành 1 file game html hoàn chỉnh để tôi tải về

Bước 5: Bạn đợi 1 chút để Gemini AI xử lý Prompt rồi sao chép toàn bộ code sau về máy tính và lưu dưới dạng file html

<!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 Lịch sử Việt Nam</title>
    <style>
        /* CSS để ép màn hình vừa vặn, không cuộn */
        body {
            font-family: 'Segoe UI', Tahoma, sans-serif;
            margin: 0;
            padding: 10px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden; 
        }

        #game-container {
            background-color: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            text-align: center;
            box-sizing: border-box;
        }

        h1 { color: #b71c1c; margin: 0 0 15px 0; font-size: 1.5rem; }
        .progress-container { width: 100%; background-color: #e0e0e0; height: 8px; border-radius: 4px; margin-bottom: 15px; }
        .progress-bar { height: 100%; background-color: #ff9800; border-radius: 4px; width: 0%; transition: width 0.3s; }
        
        #question-text { font-size: 1.1rem; margin-bottom: 15px; font-weight: bold; }
        
        .option-btn {
            display: block; width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #ddd;
            border-radius: 8px; cursor: pointer; background: white; font-size: 1rem; color: #000;
        }
        .option-btn:hover { border-color: #ff9800; background-color: #fffaf0; }
        .option-btn.correct { background-color: #d4edda; border-color: #28a745; color: #155724; }
        .option-btn.wrong { background-color: #f8d7da; border-color: #dc3545; color: #721c24; }

        #feedback-box { margin: 15px 0; padding: 10px; border-radius: 8px; display: none; font-size: 0.95rem; border: 1px solid #ccc; }
        #next-btn { display: none; background: #b71c1c; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; }
    </style>
</head>
<body>

<div id="game-container">
    <h1>Trắc nghiệm Lịch sử Việt Nam</h1>
    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
    <p id="counter" style="margin:0 0 10px 0; color:#666;"></p>
    <div id="question-text"></div>
    <div id="options"></div>
    <div id="feedback-box"></div>
    <button id="next-btn" onclick="nextQuestion()">Câu tiếp theo</button>
</div>

<script>
    const questions = [
        { q: "Sự kiện nào đánh dấu sự kết thúc hơn 1000 năm Bắc thuộc?", options: ["Lý Nam Đế lập nước Vạn Xuân", "Khởi nghĩa Hai Bà Trưng", "Ngô Quyền thắng quân Nam Hán", "Khúc Thừa Dụ giành quyền tự chủ"], correct: 2, note: "Chiến thắng Bạch Đằng năm 938 đã chấm dứt ách đô hộ." },
        { q: "Vị vua nào dời đô từ Hoa Lư về Thăng Long năm 1010?", options: ["Đinh Tiên Hoàng", "Lý Thái Tổ", "Lê Đại Hành", "Trần Thái Tông"], correct: 1, note: "Lý Thái Tổ ban Chiếu dời đô chọn Thăng Long." },
        { q: "Ai là tác giả 'Hịch tướng sĩ'?", options: ["Trần Quang Khải", "Trần Nhật Duật", "Trần Hưng Đạo", "Phạm Ngũ Lão"], correct: 2, note: "Trần Hưng Đạo viết để khích lệ tướng sĩ." },
        { q: "Tác phẩm nào là 'Bình Ngô đại cáo'?", options: ["Nguyễn Trãi", "Lê Lợi", "Nguyễn Du", "Trần Hưng Đạo"], correct: 0, note: "Nguyễn Trãi soạn thảo sau khi thắng quân Minh." },
        { q: "Vua nào chỉ huy trận Ngọc Hồi - Đống Đa?", options: ["Gia Long", "Quang Trung", "Lê Hiển Tông", "Minh Mạng"], correct: 1, note: "Quang Trung đại phá quân Thanh năm 1789." },
        { q: "Pháp nổ súng xâm lược Việt Nam lần đầu tại đâu?", options: ["Sài Gòn", "Đà Nẵng", "Hà Nội", "Huế"], correct: 1, note: "Pháp nổ súng tại Đà Nẵng ngày 1/9/1858." },
        { q: "Khởi nghĩa tiêu biểu nhất phong trào Cần vương?", options: ["Bãi Sậy", "Ba Đình", "Hương Khê", "Yên Thế"], correct: 2, note: "Khởi nghĩa Hương Khê là đỉnh cao Cần vương." },
        { q: "Đảng Cộng sản Việt Nam thành lập ngày nào?", options: ["3/2/1930", "19/5/1941", "2/9/1945", "22/12/1944"], correct: 0, note: "Thành lập tại Hương Cảng, 3/2/1930." },
        { q: "Cách mạng tháng Tám lật đổ chế độ nào?", options: ["Phát xít", "Phong kiến - Thực dân", "Cộng hòa", "Nhà Lê"], correct: 1, note: "Cách mạng tháng Tám xóa bỏ phong kiến và thực dân." },
        { q: "Chiến thắng buộc Pháp ký Hiệp định Genève 1954?", options: ["Biên giới", "Điện Biên Phủ", "Việt Bắc", "Hòa Bình"], correct: 1, note: "Chiến thắng Điện Biên Phủ lịch sử." },
        { q: "Theo Hiệp định Genève, vĩ tuyến nào chia cắt hai miền?", options: ["13", "16", "17", "20"], correct: 2, note: "Vĩ tuyến 17 là giới tuyến quân sự tạm thời." },
        { q: "Phong trào 'Đồng khởi' mạnh nhất ở đâu?", options: ["Quảng Trị", "Bến Tre", "Tây Ninh", "Cà Mau"], correct: 1, note: "Đồng khởi nổ ra mạnh nhất tại Bến Tre." },
        { q: "Tổng tiến công Tết Mậu Thân 1968 buộc Mỹ làm gì?", options: ["Giải phóng miền Nam", "Đàm phán Paris", "Rút quân ngay", "Đánh sập Dinh Độc Lập"], correct: 1, note: "Mỹ phải ngồi vào bàn đàm phán tại Paris." },
        { q: "Chiến thắng 'Điện Biên Phủ trên không' đánh bại vũ khí nào?", options: ["B-52", "Tên lửa", "Bom hạt nhân", "Xe tăng"], correct: 0, note: "Đánh bại máy bay chiến lược B-52 của Mỹ." },
        { q: "Ngày 30/4/1975, sự kiện nào kết thúc kháng chiến?", options: ["Ký Hiệp định", "Cờ bay trên Dinh Độc Lập", "Mỹ rút quân", "Giải phóng Huế"], correct: 1, note: "Xe tăng tiến vào Dinh Độc Lập, thống nhất đất nước." }
    ];

    let current = 0, score = 0;

    function load() {
        const data = questions[current];
        document.getElementById('counter').innerText = `Câu ${current + 1}/${questions.length}`;
        document.getElementById('progress-bar').style.width = `${((current) / questions.length) * 100}%`;
        document.getElementById('question-text').innerText = data.q;
        
        const optDiv = document.getElementById('options');
        optDiv.innerHTML = '';
        data.options.forEach((o, i) => {
            const btn = document.createElement('button');
            btn.className = 'option-btn';
            btn.innerText = o;
            btn.onclick = () => check(i);
            optDiv.appendChild(btn);
        });
        
        document.getElementById('feedback-box').style.display = 'none';
        document.getElementById('next-btn').style.display = 'none';
    }

    function check(i) {
        const data = questions[current];
        const btns = document.querySelectorAll('.option-btn');
        btns.forEach(b => b.disabled = true);
        if (i === data.correct) { btns[i].className = 'option-btn correct'; score++; } 
        else { btns[i].className = 'option-btn wrong'; btns[data.correct].className = 'option-btn correct'; }
        
        const fb = document.getElementById('feedback-box');
        fb.style.display = 'block';
        fb.innerHTML = `<strong>${i === data.correct ? "Chính xác!" : "Sai rồi."}</strong><br>${data.note}`;
        
        // Đổi tên nút ở câu cuối cùng
        document.getElementById('next-btn').innerText = (current === questions.length - 1) ? "Xem kết quả" : "Câu tiếp theo";
        document.getElementById('next-btn').style.display = 'inline-block';
    }

    function nextQuestion() {
        current++;
        if (current < questions.length) load();
        else {
            let comment = score <= 5 ? "Cần ôn luyện thêm nhé!" : score <= 10 ? "Kiến thức khá vững!" : "Bạn là chuyên gia lịch sử!";
            document.getElementById('game-container').innerHTML = `<h1>Kết thúc</h1><p>Bạn đạt <strong>${score}/${questions.length}</strong> điểm!</p><p style="font-style:italic">${comment}</p><button onclick="location.reload()" class="option-btn" style="background:#b71c1c; color:white;">Chơi lại</button>`;
        }
    }
    load();
</script>
</body>
</html>

Bước 6: Bạn hãy click chuột phải vào file html vừa lưu ở trên rồi chọn Open With/Google Chrome để chơi trên máy tính.

Mở game trên máy tính