Hướng dẫn tạo câu hỏi trắc nghiệm online đơn giản 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">Question 1: What is 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) 5</div>
    <div class="option" data-question="question1" data-correct="false">C) 6</div>
    <div class="option" data-question="question1" data-correct="false">D) 7</div>
    <div class="explanation" data-question="question1">Explanation: 2 + 2 equals 4.</div>

    <div class="question" id="question2">Question 2: What is the capital of France?</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">Explanation: The capital of France is Paris.</div>

    <div class="question" id="question3">Question 3: What is the largest planet in our solar system?</div>
    <div class="option" data-question="question3" data-correct="true">A) Jupiter</div>
    <div class="option" data-question="question3" data-correct="false">B) Earth</div>
    <div class="option" data-question="question3" data-correct="false">C) Mars</div>
    <div class="option" data-question="question3" data-correct="false">D) Venus</div>
    <div class="explanation" data-question="question3">Explanation: Jupiter is the largest planet in our solar system.</div>

    <div class="question" id="question4">Question 4: Which gas do plants absorb from the atmosphere?</div>
    <div class="option" data-question="question4" data-correct="true">A) Carbon dioxide</div>
    <div class="option" data-question="question4" data-correct="false">B) Oxygen</div>
    <div class="option" data-question="question4" data-correct="false">C) Nitrogen</div>
    <div class="option" data-question="question4" data-correct="false">D) Hydrogen</div>
    <div class="explanation" data-question="question4">Explanation: Plants absorb carbon dioxide from the atmosphere.</div>

    <div class="question" id="question5">Question 5: What is the largest mammal in the world?</div>
    <div class="option" data-question="question5" data-correct="true">A) Blue whale</div>
    <div class="option" data-question="question5" data-correct="false">B) African elephant</div>
    <div class="option" data-question="question5" data-correct="false">C) Giraffe</div>
    <div class="option" data-question="question5" data-correct="false">D) Lion</div>
    <div class="explanation" data-question="question5">Explanation: The blue whale is the largest mammal in the world.</div>
     
     <div class="question" id="question6">Question 6: What is the largest mammal in the world?</div>
    <div class="option" data-question="question6" data-correct="false">A) Blue whale</div>
    <div class="option" data-question="question6" data-correct="true">B) African elephant</div>
    <div class="option" data-question="question6" data-correct="false">C) Giraffe</div>
    <div class="option" data-question="question6" data-correct="false">D) Lion</div>
    <div class="explanation" data-question="question6">Explanation: The blue whale is the largest mammal in the world.</div>

   
    <!-- Additional questions and options go here -->
     
      <!-- Reset Button -->
    <button id="resetButton">Reset</button>


    <div class="report-card">
        <h2>Report Card</h2>
        <p>Total Questions Attempted: <span id="attemptedCount">0</span></p>
        <p>Correct Answers: <span id="correctCount">0</span></p>
        <p>Wrong Answers: <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'); // Add this line to select the reset button

    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) {
                // Only update counts if the same question hasn't been attempted before
                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');
                                }
                            });
                        }
                    }
                }
            });

            // Show explanation
            const explanation = document.querySelector(`.explanation[data-question="${questionId}"]`);
            if (explanation) {
                explanation.style.display = 'block';
            }

            // Update report card
            attemptedCount.textContent = totalQuestions;
            correctCount.textContent = correctAnswers;
            wrongCount.textContent = totalQuestions - correctAnswers;

            // Update progress bar and percentage
            const progress = (totalQuestions / 6) * 100; // Assuming there are 5 questions
            progressBar.style.width = progress + '%';
            percentage.textContent = progress.toFixed(2) + '%';

            // Update the message
            if (totalQuestions === 6) {
                if (correctAnswers === 6) {
                    message.textContent = "Congratulations! You got all the answers correct!";
                } else if (correctAnswers >= 3) {
                    message.textContent = "Great job! You're doing well!";
                } else {
                    message.textContent = "Keep practicing. You can improve!";
                }
            }
        });
    });

    // Reset button functionality
    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>