Home
Blogger Widgets

Beautiful Quiz of the Day Widget for Blogger Blog

Class with Mason
  1. 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"/>
Step 2: Paste following html code where you want this widget to appear. Of course the content of your selection etc.

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>
Step 3: place below given javascript just below the html code 

</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>

Below is a demo: Please wait for site to load and then quiz will load, click take quiz

Quiz of the Day

Post a Comment