<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 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: 'Yesterday, I _______ (visit) my grandmother and _________ (help) her in the garden.', answer: 'visited, helped' },
            { question: 'The children _______ (play) football in the park until it _________ (start) to rain.', answer: 'played, started' },
            { question: 'We _______ (watch) a movie and _________ (eat) popcorn together last night.', answer: 'watched, ate' },
            { question: 'She _______ (write) a letter and _________ (send) it to her best friend.', answer: 'wrote, sent' },
            { question: 'He _______ (climb) the mountain and _________ (enjoy) the beautiful view.', answer: 'climbed, enjoyed' },
            { question: 'My parents _______ (buy) a new car and _________ (drive) it to the countryside.', answer: 'bought, drove' },
            { question: 'The baby _______ (cry) loudly but soon _________ (fall) asleep.', answer: 'cried, fell' },
            { question: 'They _______ (build) a sandcastle and _________ (swim) in the sea.', answer: 'built, swam' },
            { question: 'I _______ (finish) my book and _________ (start) a new one.', answer: 'finished, started' },
            { question: 'The cat _______ (jump) onto the table and _________ (knock) over a glass.', answer: 'jumped, knocked' },
            { question: 'We _______ (explore) the forest and _________ (find) a small stream.', answer: 'explored, found' },
            { question: 'The dog _______ (dig) a hole and _________ (hide) its bone.', answer: 'dug, hid' },
            { question: 'She _______ (decorate) the cake and _________ (light) the candles.', answer: 'decorated, lit' },
            { question: 'The teacher _______ (explain) the lesson and _________ (ask) questions.', answer: 'explained, asked' },
            { question: 'They _______ (travel) to the city and _________ (visit) the museum.', answer: 'traveled, visited' },
            { question: 'He _______ (watch) the movie last night and _________ (enjoy) it.', answer: 'watched, enjoyed' },
            { question: 'I _______ (study) for my test and _________ (get) a good grade.', answer: 'studied, got' },
            { question: 'We _______ (walk) in the park when it _________ (start) to rain.', answer: 'walked, started' },
            { question: 'They _______ (eat) dinner and _________ (go) to bed early.', answer: 'ate, went' },
            { question: 'I _______ (read) a new book and _________ (like) it a lot.', answer: 'read, liked' },
            { question: 'She _______ (sing) a beautiful song and _________ (make) everyone smile.', answer: 'sang, made' },
            { question: 'We _______ (arrive) at the airport and _________ (wait) for our flight.', answer: 'arrived, waited' },
            { question: 'He _______ (run) to the store and _________ (buy) some milk.', answer: 'ran, bought' },
            { question: 'They _______ (clean) the house and _________ (organize) the garden.', answer: 'cleaned, organized' },
            { question: 'She _______ (paint) the wall and _________ (put) up a new picture.', answer: 'painted, put' },
            { question: 'I _______ (meet) my friend at the café and _________ (have) a great conversation.', answer: 'met, had' },
            { question: 'The kids _______ (play) outside and _________ (watch) the birds fly.', answer: 'played, watched' },
            { question: 'We _______ (cook) a special dinner and _________ (invite) our relatives.', answer: 'cooked, invited' },
            { question: 'I _______ (write) a letter to my friend and _________ (post) it.', answer: 'wrote, posted' },
            { question: 'She _______ (study) for the exam and _________ (pass) it.', answer: 'studied, passed' },
            { question: 'They _______ (dance) at the party and _________ (enjoy) the music.', answer: 'danced, enjoyed' },
            { question: 'We _______ (travel) to the mountains and _________ (hike) to the top.', answer: 'traveled, hiked' },
            { question: 'He _______ (pick) some flowers and _________ (give) them to his mother.', answer: 'picked, gave' },
            { question: 'The teacher _______ (teach) a new lesson and _________ (explain) it clearly.', answer: 'taught, explained' },
            { question: 'I _______ (listen) to music while I _________ (study).', answer: 'listened, studied' },
            { question: 'They _______ (visit) the museum and _________ (learn) a lot of new things.', answer: 'visited, learned' },
            { question: 'He _______ (fix) the car and _________ (drive) it to work.', answer: 'fixed, drove' },
            { question: 'We _______ (go) to the beach and _________ (swim) in the ocean.', answer: 'went, swam' },
            { question: 'I _______ (finish) the puzzle and _________ (show) it to my friends.', answer: 'finished, showed' },
            { question: 'She _______ (travel) to Paris and _________ (see) the Eiffel Tower.', answer: 'traveled, saw' },
            { question: 'We _______ (have) lunch at the restaurant and _________ (enjoy) the food.', answer: 'had, enjoyed' },
            { question: 'The children _______ (read) their books and _________ (write) some notes.', answer: 'read, wrote' }
        ];

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

        function loadQuestions() {
            const container = document.getElementById("questionsContainer2");
            questionsContainer2.innerHTML = `
                <div class="exercise-instructions">Exercise: Fill in the blanks with the correct past tense form of the verbs in parentheses.</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().toLowerCase();
                const answerInput2 = document.getElementById(`answer2-${index}`).value.trim().toLowerCase();

                const correctAnswer1 = item.answer1.toLowerCase();
                const correctAnswer2 = item.answer2.toLowerCase();

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

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

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

            // Calculate total score and percentage
            const percentage = (score / questionElements.length) * 100;

            // Display total results
            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 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>
