<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Addition MCQs</title>
    <style>
        .question {
            margin-bottom: 20px;
        }
        .answer {
            display: none;
            color: green;
        }
        .show-answer-btn {
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1>Addition MCQs</h1>
    <div id="questions-container">
        <!-- Questions will be inserted here -->
    </div>
    <script>
        function showAnswer(event) {
            const answer = event.target.nextElementSibling;
            answer.style.display = 'block';
        }

        const questions = [];
        for (let i = 1; i <= 100; i++) {
            const a = Math.floor(Math.random() * 100);
            const b = Math.floor(Math.random() * 100);
            const correctAnswer = a + b;
            questions.push(`
                <div class="question">
                    <p>Q${i}. What is ${a} + ${b}?</p>
                    <button class="show-answer-btn" onclick="showAnswer(event)">View Answer</button>
                    <p class="answer">Answer: ${correctAnswer}</p>
                </div>
            `);
        }

        document.getElementById('questions-container').innerHTML = questions.join('');
    </script>
</body>
</html>
