gh
download
<style>
body {
font-family: Arial, 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;
}
.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>
<div class="quiz-container">
<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="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>
</div>
<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>You can use this code with other CMS platforms like Wix, WordPress, etc.
Now to add more MCQ Quiz on this, you need to copy this section and replace the ID highlighted below.
<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>
Comments
Post a Comment