CLASS 7 QUIZ

 Icons of Apps and Programs 1 quiz < General < Computer < Triviaplaza - Play online trivia quizzes and get graded

Mobile App Icon Quiz

es, you can certainly add a feature to collect the student's Name, Class, and Date, and then send those results to your email.

However, there is a technical catch: HTML and JavaScript cannot send emails directly by themselves (for security reasons). To make this work on Blogger, you have two main options:

Option 1: Using "Formspree" (Easiest & Free)

Formspree is a free service that acts as a bridge. You send the data to them, and they email it to you. No backend coding is required.

How to set it up:

1. Go to Formspree.io and create a free account.

2. Create a "New Form" and copy the unique ID/URL they give you.

3. Replace the code in your Blogger post with the version below, pasting your unique URL where indicated.

HTML

<div class="quiz-container">
    <style>
        .quiz-container { font-family: 'Segoe UI', Arial, sans-serif; max-width: 700px; margin: auto; padding: 30px; background-color: #ffffff; border-radius: 12px; border: 1px solid #ddd; color: #333; }
        .student-info { margin-bottom: 25px; padding: 15px; background: #f0f7ff; border-radius: 8px; }
        .student-info input { padding: 8px; margin: 5px; border: 1px solid #ccc; border-radius: 4px; }
        .question { margin-bottom: 20px; padding: 15px; background: #fff; border-bottom: 1px solid #eee; }
        .option { display: block; margin: 10px 0; cursor: pointer; }
        .result-btn { background-color: #28a745; color: white; padding: 12px 30px; border: none; border-radius: 5px; cursor: pointer; font-size: 18px; width: 100%; margin-top: 20px; }
        #score-display { text-align: center; font-size: 22px; font-weight: bold; margin-top: 20px; color: #2c3e50; display: none; }
    </style>

    <h2 style="text-align:center; color: #2196F3;">Class 9 Computer System Quiz</h2>
    
    <div class="student-info">
        <input type="text" id="student_name" placeholder="Full Name" required>
        <input type="text" id="student_class" placeholder="Class/Section" required>
        <input type="date" id="quiz_date" required>
    </div>

    <div id="quiz-form"></div>

    <form id="email-form" action="https://formspree.io/f/YOUR_UNIQUE_ID_HERE" method="POST" style="display:none;">
        <input type="text" name="Student Name" id="form_name">
        <input type="text" name="Class" id="form_class">
        <input type="text" name="Date" id="form_date">
        <input type="text" name="Score" id="form_score">
    </form>

    <button class="result-btn" onclick="submitAndEmail()">Submit Quiz & Send Results</button>
    <div id="score-display"></div>

    <script>
    (function() {
        const quizData = [
            { q: "What is the full form of CPU?", a: "a", options: {a: "Central Processing Unit", b: "Central Programming Unit", c: "Computer Processing Unit", d: "Control Processing Unit"}},
            { q: "Which part of the computer is known as its 'Brain'?", a: "c", options: {a: "Monitor", b: "Keyboard", c: "CPU", d: "Printer"}},
            // ... (You can add all 20 questions here following the same format)
            { q: "Which unit stores data and instructions?", a: "c", options: {a: "Input Unit", b: "Output Unit", c: "Memory Unit", d: "Control Unit"}}
        ];

        const container = document.getElementById('quiz-form');
        quizData.forEach((data, index) => {
            const div = document.createElement('div');
            div.className = 'question';
            div.innerHTML = `<p><strong>${index + 1}. ${data.q}</strong></p>` + 
                Object.entries(data.options).map(([key, val]) => `<label class="option"><input type="radio" name="q${index}" value="${key}"> ${val}</label>`).join('');
            container.appendChild(div);
        });

        window.submitAndEmail = function() {
            const name = document.getElementById('student_name').value;
            const sClass = document.getElementById('student_class').value;
            const date = document.getElementById('quiz_date').value;

            if(!name || !sClass || !date) {
                alert("Please fill in your Name, Class, and Date before submitting.");
                return;
            }

            let score = 0;
            quizData.forEach((data, index) => {
                const sel = document.querySelector(`input[name="q${index}"]:checked`);
                if (sel && sel.value === data.a) score++;
            });

            // Update hidden form
            document.getElementById('form_name').value = name;
            document.getElementById('form_class').value = sClass;
            document.getElementById('form_date').value = date;
            document.getElementById('form_score').value = score + " / " + quizData.length;

            // Show score to student
            const display = document.getElementById('score-display');
            display.style.display = 'block';
            display.innerHTML = "Processing Submission...";

            // Send to Email
            const form = document.getElementById('email-form');
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: { 'Accept': 'application/json' }
            }).then(response => {
                if (response.ok) {
                    display.innerHTML = `Success! ${name}, your score is: ${score}/${quizData.length}. Results sent to teacher.`;
                } else {
                    display.innerHTML = "Submission failed. Please try again.";
                }
            });
        };
    })();
    </script>
</div>

Option 2: Using Google Forms (Most Reliable)

If you want a very stable way to collect results in a spreadsheet and email them:

1. Create a Google Form.

2. Click the "Settings" tab and turn on "Make this a quiz."

3. Use the "Send" button to get the Embed HTML code.

4. Paste that code into your Blogger HTML view.

5. In Google Forms, go to the Responses tab and click the spreadsheet icon. You can also turn on "Get email notifications for new responses."

Which do you prefer? If you want the "professional" look of a custom-coded quiz (Option 1), just make sure to get that Formspree ID!