<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Grade 3, Mathematics, Addition Worksheet</title>
    <style>
    
            h1 {
            font-size: 24px; /* Adjust this value as needed */
            color: green;
        }
        .correct {
            color: green;
        }
        .wrong {
            color: red;
        }
        body, html {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
        }
        label {
            font-size: 20px;
        }
        p {
            font-size: 20px;
        }
        .question1 pre {
            margin: 0; /* Remove extra spacing */
            font-size: 20px; /* Match font size with the other elements */
        }
        .question {
            display: flex;
            align-items: left;
            margin-bottom: 15px;
            font-size: 20px; /* Ensure font size consistency */
        }
        .question1 label {
            margin-right: 10px;
        }
        .question1 input[type="text"] {
            width: 50px;
            text-align: center;
            margin-right: 10px;
            font-size: 20px; /* Match font size with the label */
        }
        .question1 .answer-display {
            font-size: 20px;
            margin-left: 10px;
        }
        .exercise1-instructions {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: bold; /* Make the instructions bold */
        }
        .resul1t-images img {
            width: 50px;
            height: 50px;
        }
        .buttons {
            margin-top: 20px;
        }
        .buttons button {
            font-size: 18px;
            padding: 10px 20px;
            margin: 5px;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .check-button {
            background-color: #4CAF50; /* Green */
        }
        .retry-button {
            background-color: #f44336; /* Red */
        }
        .marks {
            color: blue;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script>
        document.addEventListener('contextmenu', event => event.preventDefault());

        document.addEventListener('keydown', event => {
            if (event.key === "F12" || (event.ctrlKey && event.shiftKey && event.key === 'I') || (event.ctrlKey && event.shiftKey && event.key === 'J') || (event.ctrlKey && event.key === 'U')) {
                event.preventDefault();
            }
        });

        document.addEventListener('copy', event => {
            event.preventDefault();
        });

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

const questions1 = [
  { q: ' 12\n+13\n____\n    \n____', a: '25', options: ['25', '23', '27'] },
  { q: ' 21\n+14\n____\n    \n____', a: '35', options: ['35', '33', '37'] },
  { q: ' 11\n+12\n____\n    \n____', a: '23', options: ['23', '21', '25'] },
  { q: ' 22\n+13\n____\n    \n____', a: '35', options: ['35', '33', '37'] },
  { q: ' 10\n+14\n____\n    \n____', a: '24', options: ['24', '22', '26'] },
  { q: ' 20\n+13\n____\n    \n____', a: '33', options: ['33', '31', '35'] },
  { q: ' 15\n+12\n____\n    \n____', a: '27', options: ['27', '25', '29'] },
  { q: ' 14\n+11\n____\n    \n____', a: '25', options: ['25', '23', '27'] },
  { q: ' 16\n+12\n____\n    \n____', a: '28', options: ['28', '26', '30'] },
  { q: ' 13\n+13\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 10\n+15\n____\n    \n____', a: '25', options: ['25', '23', '27'] },
  { q: ' 12\n+16\n____\n    \n____', a: '28', options: ['28', '26', '30'] },
  { q: ' 11\n+15\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 14\n+12\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 13\n+14\n____\n    \n____', a: '27', options: ['27', '25', '29'] },
  { q: ' 15\n+11\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 12\n+14\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 10\n+16\n____\n    \n____', a: '26', options: ['26', '24', '28'] },
  { q: ' 11\n+13\n____\n    \n____', a: '24', options: ['24', '22', '26'] },
  { q: ' 12\n+15\n____\n    \n____', a: '27', options: ['27', '25', '29'] }
];

function displayQuestions() {
    shuffle(questions1); // Shuffle the questions array

    const questionsContainer1 = document.getElementById('questionsContainer1');
    questionsContainer1.innerHTML = ''; // Clear any previous content

    // Add instructions only once
    const instructionsDiv = document.createElement('div');
    instructionsDiv.className = 'exercise1-instructions';
    instructionsDiv.textContent = 'Exercise 1: Choose the correct answer.';
    questionsContainer1.appendChild(instructionsDiv);

    // Loop through the questions and display them
    questions1.slice(0, 50).forEach((question1, index) => {
        const options = shuffle([...new Set(question1.options.concat(question1.a))]); // Avoid duplicate choices

        const questionDiv = document.createElement('div');
        questionDiv.className = 'question1';
        questionDiv.innerHTML = `
            <p>${index + 1}.<pre>${question1.q}</pre></p>
            ${options
                .map(option => `<label><input type="radio" name="q${index}" value="${option}">${option}</label>`)
                .join(' ')}
            <input type="hidden" name="a${index}" value="${question1.a}">
            <div id="feedback1${index}"></div>
        `;
        questionsContainer1.appendChild(questionDiv); // Append each question to the container
    });
}






function checkAnswers() {
    let score = 0;

    // Clear previous feedback
    const scoreContainer = document.getElementById('score');
    if (scoreContainer) {
        scoreContainer.innerHTML = '';
    }

    // Iterate through each question
    questions1.forEach((q, index) => {
        const selectedOption = document.querySelector(`input[name="q${index}"]:checked`); // Correct name attribute
        const feedbackDiv = document.getElementById(`feedback1${index}`);

        if (feedbackDiv) {
            feedbackDiv.innerHTML = ''; // Clear previous feedback
        }

        if (selectedOption) {
            const answer = selectedOption.value;
            if (answer === q.a) {
                if (feedbackDiv) feedbackDiv.innerHTML = `<span class="correct">Correct!</span>`;
                score++;
            } else {
                if (feedbackDiv) feedbackDiv.innerHTML = `<span class="wrong">Wrong! The correct answer is: ${q.a}</span>`;
            }
        } else {
            if (feedbackDiv) feedbackDiv.innerHTML = `<span class="wrong">No answer selected</span>`;
        }
    });

    // Calculate percentage
    const totalQuestions = questions1.length;
    const percentage = (score / totalQuestions) * 100;

    // Display results
    const resultText = `
        <div class="marks">Score: ${score}/${totalQuestions}</div>
        <div class="marks"><strong>Percentage: ${percentage.toFixed(2)}%</strong></div>
        <div>${getGradeFeedback(percentage)}</div>
        ${percentage === 100 ? '<div class="result-images"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-ubMp9uAa6YdIe_kBJ5KHLm9lvzYdypfXpvij7BtmhFONiFt9j3D7r1V_M4wPnIkIsocug7NzEHIYr35z4J8KqsKIXqw2YCpi_HY6C3OiGkC9ADz9Ee2ne-gO0VgladOU5r5FbSk2jrIy8rdgM0G895UGG_ayI0Bkeh1CU5ZswyoeWQyHsaICeB6Z7k/s1600/star.jpg" alt="Star"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ6tyya1xafjBJ3poGtUE9T5Tj-YAnRsc1SnByb_1pebaR-LBVZYtBJyZ2y_0BMix1y5byTXw2FDWyRzK7_6gAq3duQofJEibkjoQYhCQ-qGcisr9uR6jJ2IN0P510osrhyphenhyphencjOEYoC9uuYnnnL6L61GTgAoWhtcUHu2sXs5RTwaLZAsIwGlePDW-ZXBb8/s1600/happy%20face.jpg" alt="Happy Face"></div>' : ''}
    `;
    document.getElementById('result').innerHTML = resultText;

    // Hide the "Check Answers" button after checking
    document.getElementById('checkAnswersButton').style.display = 'none';
}


        function getGradeFeedback(percentage) {
            if (percentage <= 25) {
                return 'Keep trying, you are improving! Keep up the effort!';
            } else if (percentage <= 50) {
                return 'Good job! You are doing well, keep practicing!';
            } else if (percentage <= 75) {
                return 'Great work! You are almost there, keep it up!';
            } else if (percentage <= 85) {
                return 'Excellent! You are doing fantastic!';
            } else if (percentage <= 99) {
                return 'Almost perfect! Keep up the great work!';
            } else {
                return 'Perfect score! You did an amazing job!';
            }
        }

        window.onload = function() {
            displayQuestions();

            document.getElementById('checkAnswersButton').addEventListener('click', checkAnswers);
document.getElementById('retryButton').addEventListener('click', () => {
    location.reload(); // This will refresh the page
       document.getElementById('result').innerHTML = '';
                displayQuestions();
            });
        }
    </script>
</head>
<body>
  
   <h1>Grade 3, Mathematics, Addition Worksheet</h1> <!-- Add a title heading here -->
  
  
    <div id="questionsContainer1"></div>

    <div id="result"></div>
    <div class="buttons">
        <button class="check-button" id="checkAnswersButton">Check Answers</button>
        <button class="retry-button" id="retryButton">Retry</button>
    </div>
</body>
</html>
