Cách tạo câu hỏi trắc nghiệm cho blogspot

Ngày nay, đa số tất cả các bạn học sinh, sinh viên đều tiếp xúc với dạng câu hỏi trắc nghiệm. Cũng chính vì thế có rất nhiều trang web tạo câu hỏi trắc nghiệm online để cho các bạn ôn tập, xem trước bài. Tuy nhiên, đối với một số nền tảng hỗ trợ thì rất dễ dàng. Còn đối với người dùng Blogger thì đôi khi tạo form câu hỏi trắc nghiệm thì lại khó khăn. Tuy nhiên, bạn không cần phải lo vì điều đó, bởi bạn đã có TDA OFFICIAL. Hôm nay, mình sẽ hướng dẫn các bạn tạo câu hỏi trắc nghiệm online dễ dàng với nền tảng Blogger. Bạn có thể áp dụng cho những câu hỏi đố vui, bài tập online,...

Demo:

Để mình Test IQ của bạn, không được tra Google nhé!

Cách tạo câu hỏi trắc nghiệm cho blogspot:

<style>
        body {
            font-family: Inter, sans-serif;
        }
        .quiz-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .question {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .option {
            margin: 5px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
        .option:not(.selected):hover {
            background-color: #f0f0f0;
        }
        .selected {
            background-color: #007acc;
            color: white;
        }
        .correct {
            background-color: green;
            color: white;
        }
        .wrong {
            background-color: red;
            color: white;
        }
        .explanation {
            margin-top: 10px;
            display: none;
        }
        .progress-container {
            margin-top: 10px;
            width: 100%;
            height: 20px;
            background-color: #ccc;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }
        .progress-bar {
            width: 0;
            height: 100%;
            background-color: green;
            transition: width 0.3s ease-in-out;
        }
        .percentage {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 5px;
            background-color: #007acc;
            color: white;
            font-size: 12px;
            line-height: 20px;
        }      
      .report-card {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f0f0f0;
        text-align: center;
    }   
      .report-card h2 {
    font-size: 24px;
    margin: 0px!important;
    margin-bottom: 10px!important;
    color: #ffffff;
    background: #4d90fe;
    padding: 5px;
}    
      .report-card p {
    background: antiquewhite;
    padding: 5px;
    margin: 0px!important;
    margin-bottom: 8px!important;
}
    .message {
        font-size: 18px;
        font-weight: bold;
        color: #007acc;
        margin-top: 10px;
    }     
      #resetButton {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}
#resetButton:hover {
    background-color: #d32f2f;
}
</style>
<div class="quiz-container">
<div class="progress-container">
<div class="percentage">0%</div>
<div class="progress-bar" id="progressBar"></div></div>
    <div class="question" id="question1">Câu 1: 2+2=?</div>
    <div class="option" data-question="question1" data-correct="true">A) 4</div>
    <div class="option" data-question="question1" data-correct="false">B) 22</div>
    <div class="option" data-question="question1" data-correct="false">C) 6</div>
    <div class="option" data-question="question1" data-correct="false">D) 8</div>
    <div class="explanation" data-question="question1">Kết quả: 2+2=4</div>
    <div class="question" id="question2">Câu 2: Thủ đô của nước Pháp là gì?</div>
    <div class="option" data-question="question2" data-correct="true">A) Paris</div>
    <div class="option" data-question="question2" data-correct="false">B) London</div>
    <div class="option" data-question="question2" data-correct="false">C) Berlin</div>
    <div class="option" data-question="question2" data-correct="false">D) Madrid</div>
    <div class="explanation" data-question="question2">Kết quả: Thủ đô của Pháp là Paris</div>
    <div class="question" id="question3">Câu 3: Hành tinh lớn nhất trong hệ mặt trời của chúng ta là gì?</div>
    <div class="option" data-question="question3" data-correct="true">A) Sao Mộc</div>
    <div class="option" data-question="question3" data-correct="false">B) Trái Đất</div>
    <div class="option" data-question="question3" data-correct="false">C) Sao Hoả</div>
    <div class="option" data-question="question3" data-correct="false">D) Sao Kim</div>
    <div class="explanation" data-question="question3">Kết quả: Sao Mộc là hành tinh lớn nhất trong hệ mặt trời của chúng ta</div>
    <div class="question" id="question4">Câu 4: Cây hấp thụ khí nào từ khí quyển?</div>
    <div class="option" data-question="question4" data-correct="true">A) Khí cacbonic</div>
    <div class="option" data-question="question4" data-correct="false">B) Ôxy</div>
    <div class="option" data-question="question4" data-correct="false">C) Nitơ</div>
    <div class="option" data-question="question4" data-correct="false">D) Hydro</div>
    <div class="explanation" data-question="question4">Kết quả: Thực vật hấp thụ khí cacbonic từ khí quyển.</div>
    <div class="question" id="question5">Câu 5: Động vật có vú lớn nhất thế giới là gì?</div>
    <div class="option" data-question="question5" data-correct="true">A) Cá voi xanh</div>
    <div class="option" data-question="question5" data-correct="false">B) Voi châu Phi</div>
    <div class="option" data-question="question5" data-correct="false">C) Hươu cao cổ</div>
    <div class="option" data-question="question5" data-correct="false">D) Sư tử</div>
    <div class="explanation" data-question="question5">Kết quả: Cá voi xanh là loài động vật có vú lớn nhất thế giới</div>     
     <div class="question" id="question6">Câu 6: Nước nào đông dân nhất thế giới?</div>
    <div class="option" data-question="question6" data-correct="false">A) Indonesia</div>
    <div class="option" data-question="question6" data-correct="false">B) Trung Quốc</div>
    <div class="option" data-question="question6" data-correct="false">C) Hoa Kỳ</div>
    <div class="option" data-question="question6" data-correct="true">D) Ấn Độ</div>
    <div class="explanation" data-question="question6">Kết quả: Ấn Độ là nước đông dân nhất thế giới với 1,4 tỷ dân</div>
    <button id="resetButton">Làm lại</button>
    <div class="report-card">
        <h2>Bảng tính kết quả</h2>
        <p>Câu hỏi đã trả lời: <span id="attemptedCount">0</span></p>
        <p>Câu trả lời đúng: <span id="correctCount">0</span></p>
        <p>Câu trả lời sai: <span id="wrongCount">0</span></p>
        <p id="message">--</p>
    </div>
</div>
 <script>
    const options = document.querySelectorAll('.option');
    const progressBar = document.getElementById('progressBar');
    const percentage = document.querySelector('.percentage');
    const attemptedCount = document.getElementById('attemptedCount');
    const correctCount = document.getElementById('correctCount');
    const wrongCount = document.getElementById('wrongCount');
    const message = document.getElementById('message');
    const resetButton = document.getElementById('resetButton');
    let totalQuestions = 0;
    let correctAnswers = 0;
    options.forEach(option => {
        option.addEventListener('click', () => {
            const questionId = option.getAttribute('data-question');
            const isCorrect = option.getAttribute('data-correct') === 'true';
            const previouslySelected = document.querySelector(`.option.selected[data-question="${questionId}"]`);
            if (!previouslySelected) {
                totalQuestions++;
                if (isCorrect) {
                    correctAnswers++;
                }
            }
            options.forEach(o => {
                if (o.getAttribute('data-question') === questionId) {
                    o.classList.remove('selected', 'correct', 'wrong');
                    if (o === option) {
                        o.classList.add('selected');
                        if (isCorrect) {
                            o.classList.add('correct');
                        } else {
                            o.classList.add('wrong');
                            // Highlight the correct answer
                            options.forEach(correctOption => {
                                if (
                                    correctOption.getAttribute('data-question') === questionId &&
                                    correctOption.getAttribute('data-correct') === 'true'
                                ) {
                                    correctOption.classList.add('correct');
                                }
                            });
                        }
                    }
                }
            });
            const explanation = document.querySelector(`.explanation[data-question="${questionId}"]`);
            if (explanation) {
                explanation.style.display = 'block';
            }
            attemptedCount.textContent = totalQuestions;
            correctCount.textContent = correctAnswers;
            wrongCount.textContent = totalQuestions - correctAnswers;
            const progress = (totalQuestions / 6) * 100;
            progressBar.style.width = progress + '%';
            percentage.textContent = progress.toFixed(2) + '%';
            if (totalQuestions === 6) {
                if (correctAnswers === 6) {
                    message.textContent = "Chúc mừng! Bạn đã trả lời đúng tất cả!";
                } else if (correctAnswers >= 3) {
                    message.textContent = "Bạn đã làm rất tốt! Bạn đang làm tốt!";
                } else {
                    message.textContent = "Tiếp tục tập luyện. Bạn có thể cải thiện!";
                }
            }
        });
    });
    resetButton.addEventListener('click', () => {
        options.forEach(option => {
            option.classList.remove('selected', 'correct', 'wrong');
        });
        const explanations = document.querySelectorAll('.explanation');
        explanations.forEach(explanation => {
            explanation.style.display = 'none';
        });
        totalQuestions = 0;
        correctAnswers = 0;
        attemptedCount.textContent = 0;
        correctCount.textContent = 0;
        wrongCount.textContent = 0;
        progressBar.style.width = '0%';
        percentage.textContent = '0%';
        message.textContent = '--';
    });
</script>

Chú ý:
true là câu hỏi đúng
false là câu hỏi sai

Lưu lại và xem kết quả thôi !!

Lời kết:

Với cách hướng dẫn trên, bạn có thể sử dụng để tạo các câu hỏi trắc nghiệm đơn giản, dễ hiểu. Điều này giúp cho mọi người dễ dàng trả lời câu hỏi và tăng tính tương tác của bài viết. Tuy nói rằng bài viết đơn giản và dễ hiểu nhưng có thể cũng có gặp khó khăn trong vấn đề thực hiện. Chính vì thế bạn hãy để lại bình luận bên dưới để mình hỗ trợ bạn!