How to Start an MCQ Quiz Website in Blogger?

Creating a quiz website on Blogger is a straightforward process that doesn’t require coding skills. Blogger is a free blogging platform by Google that allows you to create and customize your website.

In this blog post, I’ll guide you through the steps to start an MCQ quiz website on Blogger very easily.

Creating a Website in Blogger is quite easy. All you need is a Google Account and sign up for a New website on the Blogger Platform. If you want to check the complete Setup Process you can follow our Article on How to start a blog on Blogger.

Now you have created a Free Blog on Blogger, you need to Post Quizzes on your website as Blog Posts. You can choose any niche and publish various quizzes in different categories. You can cover the Previous year’s Questions of various Exams, Mock Tests, and Skill tests on the site.

In this way, You can provide value to your readers and once you start receiving a Good amount of traffic on the website you can apply for Google Adsense approval. It will help you monetize your Traffic with sponsored ads.

Now let’s check how you can show MCQ Quizs on your Blogger website.

For this, you need to use the below code on your Blog post “Edit HTML” section. You can use the below code for free.

Note: Any commercial purpose of this code is not allowed. You can’t share the code as your own.

Here is the simple MCQ Quiz Script for the Blogger website.

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

Now you need to assign the right option as an answer by assigning the tag data-correct=”true”.

Make sure to keep all other options as false.

You can watch the video below to learn How to add it to Blogger and customize it further.

If you have any doubts, feel free to ask me in the comment section.

Note: I will release the Advanced version of Quiz Script once the video gets 2k views or 50 Likes. So, don’t forget to watch the video till the end and Like the video.

Here is the download link of the Advanced MCQ Quiz Script for Blogger as promised.

Best practices for creating MCQ quizzes

Creating Multiple Choice Question (MCQ) quizzes can be an effective way to test and reinforce knowledge. To ensure that your MCQ quizzes are engaging and provide a valuable learning experience, consider the following best practices:

• Clear and concise questions
• One correct answer per question
• Well-constructed distractors (incorrect answer choices)
• Randomize answer choices
• Provide detailed Explanations to each MCQ.
• Avoid tricky or misleading questions
• Use a variety of question types
• Include images and multimedia
• Randomize the order of questions
• Define clear learning objectives
• Ensure accessibility for all users
• Create a user-friendly design
• Include feedback surveys
• Be mindful of legal considerations for copyrighted material

Remember, it may take time to build a substantial income from your quiz website. Consistency, quality content, and audience engagement are key factors in your success.

I hope this Article helps you add an MCQ section in Blogger and start your own Quiz website easily. If you want me to cover any more tutorials, feel free to ask in the comment section.