- Navigate to the Theme section in your Blogger dashboard, click on "Customize," then select "Edit HTML." Paste the following code just after the <head> tag and save the template. If you have already done this step for any of other widget on your site then skip it. You only need to do this once for all widgets.
<link href="https://cdn.jsdelivr.net/gh/Mushahid7734/ClasswithMason.com/classwithmason1.1.min.css" rel="stylesheet" crossorigin="anonymous"/>
You can change quiz subjects by drawing different apis from https://opentdb.com
<div class="quiz-containerx">
<h1>Quiz of the Day</h1><br>
<button id="start-quiz">Take a Quiz</button>
<div id="quiz" style="display: none;"></div>
<button id="submit" style="display: none;">Submit</button>
<div id="results"></div>
</div>
</style><script> document.addEventListener('DOMContentLoaded', function() {
const startQuizButton = document.getElementById('start-quiz');
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
startQuizButton.addEventListener('click', function() {
// Hide the start quiz button and show the quiz container and submit button
startQuizButton.style.display = 'none';
quizContainer.style.display = 'block';
submitButton.style.display = 'block';
// Fetch questions
fetch('https://opentdb.com/api.php?amount=20&category=10&difficulty=medium&type=multiple')
.then(response => response.json())
.then(data => {
const questions = data.results;
displayQuiz(questions);
});
});
function displayQuiz(questions) {
const output = [];
questions.forEach((currentQuestion, questionNumber) => {
const answers = [...currentQuestion.incorrect_answers];
answers.push(currentQuestion.correct_answer);
answers.sort(() => Math.random() - 0.5);
const answersHtml = answers.map(answer => `
<li>
<label>
<input type="radio" name="question${questionNumber}" value="${answer}">
${answer}
</label>
</li>
`).join('');
output.push(`
<div class="question">${currentQuestion.question}</div>
<ul class="options">${answersHtml}</ul>
`);
});
quizContainer.innerHTML = output.join('');
submitButton.addEventListener('click', () => showResults(questions));
}
function showResults(questions) {
const answerContainers = quizContainer.querySelectorAll('.options');
let numCorrect = 0;
questions.forEach((currentQuestion, questionNumber) => {
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if (userAnswer === currentQuestion.correct_answer) {
numCorrect++;
answerContainers[questionNumber].style.color = 'green';
} else {
answerContainers[questionNumber].style.color = 'red';
}
// Show the correct answer
answerContainers[questionNumber].querySelectorAll('li').forEach(li => {
if (li.querySelector('input').value === currentQuestion.correct_answer) {
li.style.color = 'blue';
}
});
});
resultsContainer.innerHTML = `${numCorrect} out of ${questions.length}`;
}
});
</script>