
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Grade 3, Environmental Studies, Provinces of Sri Lanka, 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;
        }
        label {
            font-size: 20px;
        }
        p {
            font-size: 20px;
        }
        .question {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 20px;
        }
        .question label {
            margin-right: 10px;
        }
        .question input[type="radio"] {
            margin-right: 10px;
            font-size: 20px;
        }
        .exercise-instructions {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .result-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;
        }
        .retry-button {
            background-color: #f44336;
        }
        .marks {
            color: blue;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script>
        document.addEventListener('contextmenu', event => event.preventDefault());
        document.addEventListener('keydown', event => {
            if (["F12"].includes(event.key) || 
                (event.ctrlKey && event.shiftKey && ["I", "J", "U"].includes(event.key))) {
                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 imageQuestionSets = [
            {
                image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyt-sCVP-lsseHJf_R7Ka092DKcOciBS-UHgqVsU_Q5A65bk-1kiMkKTPvIkoc3tC_VA9P2UaCU9AaIfl26KowHJSj6qaga-uE4dZNf8yISAXrBS6QqGlj6HZCiG8eTvXn96EQc5euMFV_mzLJ87be7teiOPFI9Ug-N_HyLLmyUZna6y4GVcvY8CVlR4w/s1600/Distric%20&amp;%20Province%20Map%20Of%20Sri%20Lanka.jpg",
                questions: [
  { q: "Which province is marked with the number 1?", options: ["Northern Province", "North Central Province", "Uva Province", "Eastern Province"], a: "Northern Province" },
  { q: "Which province is marked with the number 2?", options: ["North Central Province", "Western Province", "Southern Province", "North Western Province"], a: "North Central Province" },
  { q: "Which province is marked with the number 3?", options: ["North Western Province", "Sabaragamuwa Province", "Eastern Province", "Central Province"], a: "North Western Province" },
  { q: "Which province is marked with the number 4?", options: ["Western Province", "Uva Province", "Southern Province", "Central Province"], a: "Western Province" },
  { q: "Which province is marked with the number 5?", options: ["Sabaragamuwa Province", "North Central Province", "Northern Province", "Uva Province"], a: "Sabaragamuwa Province" },
  { q: "Which province is marked with the number 6?", options: ["Central Province", "Eastern Province", "Southern Province", "Western Province"], a: "Central Province" },
  { q: "Which province is marked with the number 7?", options: ["Eastern Province", "Uva Province", "North Western Province", "Sabaragamuwa Province"], a: "Eastern Province" },
  { q: "Which province is marked with the number 8?", options: ["Uva Province", "Southern Province", "Western Province", "Northern Province"], a: "Uva Province" },
  { q: "Which province is marked with the number 9?", options: ["Southern Province", "Central Province", "Eastern Province", "North Central Province"], a: "Southern Province" }
]
            },
                        {
                image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFcYxqwWk9RSVkKaHexbe2Y0nYnQ2BnGHgocBYyjPQHwK-pQ_RxkEZP7JQephU89DU7pUb1nQNQJOiiD0ITJXA6IHgbMOVjtYzsCEyg5TE2AM2BcVhUtTVY9p1u773OqYyyJs4ZyXESsnqbMWwuHdqFEjLGOAHdoZb4-pXjTfRb_Y-qrKMoxRjnB19mA/s1600/Distric%20&amp;%20Province%20Map%20Of%20Sri%20Lanka%201.jpg",
                questions: [
  { q: "Which province is marked with the number 1?", options: ["North Western Province", "Eastern Province", "Northern Province", "Southern Province"], a: "North Western Province" },
  { q: "Which province is marked with the number 2?", options: ["Northern Province", "Central Province", "Western Province", "Sabaragamuwa Province"], a: "Northern Province" },
  { q: "Which province is marked with the number 3?", options: ["Eastern Province", "Uva Province", "North Central Province", "Southern Province"], a: "Eastern Province" },
  { q: "Which province is marked with the number 4?", options: ["North Central Province", "Central Province", "Western Province", "Uva Province"], a: "North Central Province" },
  { q: "Which province is marked with the number 5?", options: ["Central Province", "North Western Province", "Sabaragamuwa Province", "Southern Province"], a: "Central Province" },
  { q: "Which province is marked with the number 6?", options: ["Southern Province", "Eastern Province", "North Central Province", "Western Province"], a: "Southern Province" },
  { q: "Which province is marked with the number 7?", options: ["Uva Province", "Western Province", "Northern Province", "Eastern Province"], a: "Uva Province" },
  { q: "Which province is marked with the number 8?", options: ["Sabaragamuwa Province", "North Western Province", "Eastern Province", "Northern Province"], a: "Sabaragamuwa Province" },
  { q: "Which province is marked with the number 9?", options: ["Southern Province", "Western Province", "Uva Province", "North Central Province"], a: "Western Province" }
]
            },
            {
                image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdi_ASAEfoM3ZaYJ_WZ1AxnFIQO4lRqpA7ieksZmS1W6dmePBMK2141PF7940lpsqtYNr4WKD2p5BJOLMgL9LCZh5eGru_3D0eK_VxMBydw3xN_VYpI1KBOfpp3XK74qrVN4umHKuKMhKH0as_w1RDtWmIV3CEr756oRi4ptyGDpp_mlaNhE19kd8gfnc/s1600/Distric%20&amp;%20Province%20Map%20Of%20Sri%20Lanka%202.jpg",
                questions: [
  { q: "Which province is marked with the number 1?", options: ["Southern Province", "North Western Province", "Eastern Province", "Northern Province"], a: "Southern Province" },
  { q: "Which province is marked with the number 2?", options: ["Western Province", "North Central Province", "Eastern Province", "Northern Province"], a: "Western Province" },
  { q: "Which province is marked with the number 3?", options: ["Sabaragamuwa Province", "Eastern Province", "Northern Province", "Uva Province"], a: "Sabaragamuwa Province" },
  { q: "Which province is marked with the number 4?", options: ["Central Province", "Eastern Province", "Western Province", "North Central Province"], a: "Central Province" },
  { q: "Which province is marked with the number 5?", options: ["North Western Province", "Sabaragamuwa Province", "Southern Province", "Northern Province"], a: "North Western Province" },
  { q: "Which province is marked with the number 6?", options: ["Eastern Province", "North Central Province", "Western Province", "Southern Province"], a: "North Central Province" },
  { q: "Which province is marked with the number 7?", options: ["Northern Province", "Eastern Province", "Central Province", "Uva Province"], a: "Northern Province" },
  { q: "Which province is marked with the number 8?", options: ["Uva Province", "North Western Province", "Eastern Province", "Sabaragamuwa Province"], a: "Eastern Province" },
  { q: "Which province is marked with the number 9?", options: ["Southern Province", "Eastern Province", "Northern Province", "Sabaragamuwa Province"], a: "Northern Province" }
]
            }
        ];

        let questions = [];

        function displayImageAndQuestions() {
            const randomSet = imageQuestionSets[Math.floor(Math.random() * imageQuestionSets.length)];
            document.getElementById('imageContainer').innerHTML = `<img src="${randomSet.image}" alt="Related Image" style="max-width: 100%; height: auto;">`;
            questions = randomSet.questions;
            displayQuestions();
        }

        function displayQuestions() {
            const questionsContainer = document.getElementById('questionsContainer');
            questionsContainer.innerHTML = '<div class="exercise-instructions">Exercise: Choose the correct answer.</div>';
            shuffle(questions).forEach((question, index) => {
                const optionsHTML = shuffle(question.options).map(option =>
                    `<label>
                        <input type="radio" name="question${index}" value="${option}"> ${option}
                    </label><br>`).join('');
                questionsContainer.innerHTML += 
                    `<div>
                        <p>${index + 1}. ${question.q}</p>
                        ${optionsHTML}
                        <p id="feedback${index}"></p>
                    </div>`;
            });
        }

        function checkAnswers() {
            let score = 0;

            questions.forEach((question, index) => {
                const selectedAnswer = document.querySelector(`input[name="question${index}"]:checked`);
                const feedback = document.getElementById(`feedback${index}`);
                if (selectedAnswer) {
                    if (selectedAnswer.value === question.a) {
                        feedback.innerHTML = '<span class="correct">Correct!</span>';
                        score++;
                    } else {
                        feedback.innerHTML = `<span class="wrong">Wrong! The correct answer is: ${question.a}</span>`;
                    }
                } else {
                    feedback.innerHTML = `<span class="wrong">No answer selected. The correct answer is: ${question.a}</span>`;
                }
            });

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

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

            // Display individual and total results
            const resultText = 
                `<div class="marks">Exercise Score: ${score}/${totalQuestions}</div>
                <div class="marks"><strong>Total Score: ${score}/${totalQuestions} (${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'; // Ensure font size matches questions
            document.getElementById('result').style.fontWeight = 'bold'; // Make the result text bold
            document.querySelectorAll('.marks').forEach(element => {
                element.style.color = 'blue'; // Set color for all marks
            });
        }

        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() {
            displayImageAndQuestions();
            document.getElementById('checkAnswersButton').addEventListener('click', checkAnswers);
            document.getElementById('retryButton').addEventListener('click', () => location.reload());
        };
    </script>
</head>
<body>
    <h1>Grade 3, Environmental Studies, Provinces of Sri Lanka, Worksheet</h1>
    <div id="imageContainer"></div>
    <div id="questionsContainer"></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>
