<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Grade 7, English, Past Tense Negative Grammar Worksheet</title>
    <style>
        h1 {
            font-size: 24px;
            color: green;
        }
        .correct {
            color: green;
        }
        .wrong {
            color: red;
        }
        body, html {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: left;
            font-size: 24px;
            margin-top: 20px;
        }
        label {
            font-size: 20px;
        }
        p {
            font-size: 20px;
        }
        .question {
            margin-bottom: 15px;
            font-size: 20px;
        }
        .question label {
            display: block;
            margin-bottom: 5px;
        }
        .question input[type="text"] {
            width: 35%;
            max-width: 150px;
            text-align: left;
            margin-bottom: 10px;
            font-size: 20px;
            margin-right: 5px;
        }
        .question .answer-display {
            font-size: 20px;
            margin-top: 5px;
        }
        .exercise-instructions {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .buttons {
            margin-top: 20px;
            text-align: center;
        }
        .buttons button {
            font-size: 18px;
            padding: 10px 20px;
            margin: 5px;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .check-button {
            background-color: #4CAF50;
        }
        .retry-button {
            background-color: #f44336;
        }
        .marks {
            color: blue;
            font-size: 20px;
            font-weight: bold;
        }
        /* Custom colors */
        .blue-box {
            border: 2px solid blue;
        }
        .purple-box {
            border: 2px solid purple;
        }
        .blue-blank {
            color: blue;
            font-weight: bold;
        }
        .purple-blank {
            color: purple;
            font-weight: bold;
        }
        @media (max-width: 300px) {
            .question input[type="text"] {
                max-width: 70%;
            }
        }
    </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 questions2 = [
    { question: 'I finished my homework early. → I _______ _________ my homework early.', answer: 'did not, finish' },
    { question: 'He cleaned his room yesterday. → He _______ _________ his room yesterday.', answer: 'did not, clean' },
    { question: 'We watched the movie last night. → We _______ _________ the movie last night.', answer: 'did not, watch' },
    { question: 'She visited her grandmother last weekend. → She _______ _________ her grandmother last weekend.', answer: 'did not, visit' },
    { question: 'They played football in the park. → They _______ _________ football in the park.', answer: 'did not, play' },
    { question: 'The cat jumped onto the table. → The cat _______ _________ onto the table.', answer: 'did not, jump' },
    { question: 'We traveled to the mountains last summer. → We _______ _________ to the mountains last summer.', answer: 'did not, travel' },
    { question: 'He ate breakfast this morning. → He _______ _________ breakfast this morning.', answer: 'did not, eat' },
    { question: 'She wrote a letter to her friend. → She _______ _________ a letter to her friend.', answer: 'did not, write' },
    { question: 'They went to the park yesterday. → They _______ _________ to the park yesterday.', answer: 'did not, go' },
    { question: 'I listened to music while studying. → I _______ _________ to music while studying.', answer: 'did not, listen' },
    { question: 'The teacher explained the lesson well. → The teacher _______ _________ the lesson well.', answer: 'did not, explain' },
    { question: 'He read the book last night. → He _______ _________ the book last night.', answer: 'did not, read' },
    { question: 'She painted the wall beautifully. → She _______ _________ the wall beautifully.', answer: 'did not, paint' },
    { question: 'We cleaned the house thoroughly. → We _______ _________ the house thoroughly.', answer: 'did not, clean' },
    { question: 'They built a sandcastle on the beach. → They _______ _________ a sandcastle on the beach.', answer: 'did not, build' },
    { question: 'He helped his brother with homework. → He _______ _________ his brother with homework.', answer: 'did not, help' },
    { question: 'I bought a gift for my friend. → I _______ _________ a gift for my friend.', answer: 'did not, buy' },
    { question: 'She cooked dinner last night. → She _______ _________ dinner last night.', answer: 'did not, cook' },
    { question: 'They danced at the party. → They _______ _________ at the party.', answer: 'did not, dance' },
    { question: 'We explored the forest yesterday. → We _______ _________ the forest yesterday.', answer: 'did not, explore' },
    { question: 'The dog dug a hole in the garden. → The dog _______ _________ a hole in the garden.', answer: 'did not, dig' },
    { question: 'He solved the math problem quickly. → He _______ _________ the math problem quickly.', answer: 'did not, solve' },
    { question: 'I found my keys on the table. → I _______ _________ my keys on the table.', answer: 'did not, find' },
    { question: 'She took a picture of the sunset. → She _______ _________ a picture of the sunset.', answer: 'did not, take' }
];

        const questionElements = shuffle(questions2);
        let score = 0;

        function normalizeText(text) {
            // Normalize the text: trim, lowercase, replace multiple spaces with a single space, and remove unwanted punctuation
            return text.trim()
                       .toLowerCase()                   // Convert all characters to lowercase
                       .replace(/[^\w\s]/g, '')          // Remove unwanted punctuation except letters, numbers, and spaces
                       .replace(/\s+/g, ' ');            // Replace multiple spaces with a single space
        }

        function loadQuestions() {
            const container = document.getElementById("questionsContainer2");
            questionsContainer2.innerHTML = `
                <div class="exercise-instructions">Exercise: Complete the sentences in the worksheet by filling in the correct negative past tense forms of the verbs.</div>
            `;
            questionElements.forEach((item, index) => {
                const questionDiv = document.createElement("div");
                questionDiv.classList.add("question");

                const questionLabel = document.createElement("label");
                questionLabel.innerHTML = ` ${index + 1}) ${item.question.replace("_______", "<span class='blue-blank'>_______</span>").replace("_________", "<span class='purple-blank'>_________</span>")}`;

                const answerInput1 = document.createElement("input");
                answerInput1.type = "text";
                answerInput1.id = `answer1-${index}`;
                answerInput1.classList.add("blue-box");

                const answerInput2 = document.createElement("input");
                answerInput2.type = "text";
                answerInput2.id = `answer2-${index}`;
                answerInput2.classList.add("purple-box");

                questionDiv.appendChild(questionLabel);
                questionDiv.appendChild(answerInput1);
                questionDiv.appendChild(answerInput2);
                container.appendChild(questionDiv);
            });
        }

        function checkAnswers() {
            score = 0;
            questionElements.forEach((item, index) => {
                const answerInput1 = document.getElementById(`answer1-${index}`).value.trim();
                const answerInput2 = document.getElementById(`answer2-${index}`).value.trim();

                // Normalize answers
                const normalizedInput1 = normalizeText(answerInput1);
                const normalizedInput2 = normalizeText(answerInput2);

                // Split the correct answer into two parts
                const [correctAnswer1, correctAnswer2] = item.answer.toLowerCase().split(', ');

                const answerDisplay = document.createElement("div");
                answerDisplay.classList.add("answer-display");
                if (normalizedInput1 === correctAnswer1 && normalizedInput2 === correctAnswer2) {
                    score++;
                    answerDisplay.classList.add("correct");
                    answerDisplay.textContent = `Correct! The answers are: ${correctAnswer1}, ${correctAnswer2}`;
                } else {
                    answerDisplay.classList.add("wrong");
                    answerDisplay.textContent = `Wrong! The correct answers are: ${correctAnswer1}, ${correctAnswer2}`;
                }

                const questionDiv = document.getElementById(`answer1-${index}`).parentElement;
                questionDiv.appendChild(answerDisplay);
            });

            document.getElementById('checkAnswersButton').style.display = 'none';

            const percentage = (score / questionElements.length) * 100;
            const resultText = `
                <div class="marks">Exercise Score: ${score}/${questionElements.length}</div>
                <div class="marks"><strong>Total Score: ${score}/${questionElements.length} (${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;
            document.getElementById('result').style.fontSize = '20px';
            document.getElementById('result').style.fontWeight = 'bold';
            document.querySelectorAll('.marks').forEach(element => {
                element.style.color = 'blue';
            });
        }

        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() {
            loadQuestions();

            document.getElementById('checkAnswersButton').addEventListener('click', checkAnswers);
            document.getElementById('retryButton').addEventListener('click', () => {
                location.reload(); // This will refresh the page
            });
        };
    </script>
</head>
<body>
    <h1>Grade 7, English, Past Tense Negative Grammar Worksheet</h1>
    <div id="questionsContainer2"></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>
