How to create MCQ in blogger, blogger HTML code for multiple choice questions

how to create MCQ in blogger:-

Copy this html, script and CSS code, create a new blog post and paste all this code given below then follow some steps:-

1. for adding more questions copy and paste whole "quiz-container" class then change number of id="question1" and data-question="question1".

2. for right answer change data-correct="true" for wrong answer data-correct="false"

note:- if you will use this code in multiple post then also you can add CSS code in blogger theme-HTML Edit, section above "]]></b:skin>" and remove<style></style> tag, and Script code is above </body> tag, hence you can easily access this code just using through only HTML code in blogger post.

HTML Code

 
            <!-----MCQ Html Code------>

<div class="quiz-container">

<div class="question" id="question1">Question 1: What is 2 + 2?</div>
 
<div class="option" data-correct="true" data-question="question1">A) 4</div>

<div class="option" data-correct="false" data-question="question1">B) 5</div>
        
<div class="option" data-correct="false" data-question="question1">C) 6</div>
        
<div class="option" data-correct="false" data-question="question1">D) 7</div>
        
<div class="explanation" data-question="question1">Explanation: 2 + 2 equals 4.</div></div>

<div class="quiz-container">
       
<div class="question" id="question2">Question 2: What is the capital of France?</div>
        
<div class="option" data-correct="false" data-question="question2">A) London</div>
        
<div class="option" data-correct="false" data-question="question2">B) Paris</div>
        
<div class="option" data-correct="true" data-question="question2">C) Berlin</div>
        
<div class="option" data-correct="false" data-question="question2">D) Madrid</div>
        
<div class="explanation" data-question="question2">Explanation: The capital of France is Paris.</div></div>

<div class="quiz-container">  

<div class="question" id="question3">Question 3: What is the largest mammal in the world?</div>

 <div class="option" data-correct="false" data-question="question3">A) Lion</div>

 <div class="option" data-correct="false" data-question="question3">B) African elephant</div>

<div class="option" data-correct="false" data-question="question3">C) Giraffe</div>

<div class="option" data-correct="true" data-question="question3">D) Blue whale</div>
        
<div class="explanation" data-question="question3">Explanation: The blue whale is the largest mammal in the world.</div></div>

<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>Percentage: <span id="percentage">0%</span></p>

</div>

script Code

<!------JavaScript------->

<script>

const options = document.querySelectorAll('.option');
const attemptedCount = document.getElementById('attemptedCount');
const correctCount = document.getElementById('correctCount');
const wrongCount = document.getElementById('wrongCount');
const percentage = document.getElementById('percentage');
let totalQuestions = 0;
let correctAnswers = 0;
const attemptedQuestions = new Set();

options.forEach(option => {
option.addEventListener('click', () => {
const questionId = option.getAttribute('data-question');
const isCorrect = option.getAttribute('data-correct') === 'true';    
if (!attemptedQuestions.has(questionId)) {
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');
correctAnswers++;
} else {
o.classList.add('wrong');
                            options.forEach(correctOption => {
if (correctOption.getAttribute('data-question') === questionId && correctOption.getAttribute('data-correct') === 'true') {                                    
correctOption.classList.add('correct');
}});
}

totalQuestions++;
attemptedQuestions.add(questionId); 
}}});
}

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

attemptedCount.textContent = totalQuestions;
correctCount.textContent = correctAnswers;
wrongCount.textContent = totalQuestions - correctAnswers;
percentage.textContent = ((correctAnswers / totalQuestions) * 100).toFixed(2) + '%';
});
});

    </script>

CSS Code

 
<!-----Multiple Page CSS Code------>

<style>

.quiz-container {
 max-width: 800px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 15px;
 margin: 1rem 0;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.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;
}

.report-card {
 margin-top: 20px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 background-color: #f0f0f0;
}
      
.report-card h2{
 margin: 0px!important;
}

.report-card p{
 margin:  0.5em 0!important;
}
     
</style>