{"id":271,"date":"2025-07-09T02:29:08","date_gmt":"2025-07-09T02:29:08","guid":{"rendered":"https:\/\/insaatsirketleri.com.tr\/en\/?p=271"},"modified":"2025-07-09T02:32:47","modified_gmt":"2025-07-09T02:32:47","slug":"cities-which","status":"publish","type":"post","link":"https:\/\/insaatsirketleri.com.tr\/en\/cities-which\/","title":{"rendered":"Cities Which"},"content":{"rendered":"\n<p><\/p>\n\n\n\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Google Fonts: Inter for a clean look -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700;800&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        \/* Custom styles to apply the Inter font *\/\n        body {\n            font-family: 'Inter', sans-serif;\n        }\n        \/* Style for the correct answer button *\/\n        .correct {\n            background-color: #22c55e !important; \/* green-500 *\/\n            border-color: #16a34a !important; \/* green-600 *\/\n        }\n        \/* Style for the incorrect answer button *\/\n        .incorrect {\n            background-color: #ef4444 !important; \/* red-500 *\/\n            border-color: #dc2626 !important; \/* red-600 *\/\n        }\n        \/* Simple transition for smooth appearance *\/\n        .fade-in {\n            animation: fadeIn 0.5s ease-in-out;\n        }\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 flex items-center justify-center min-h-screen p-4\">\n\n    <div id=\"game-container\" class=\"w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 md:p-8 text-center transition-all duration-500\">\n        \n        <!-- Game Header -->\n        <div id=\"header-section\">\n            <h1 class=\"text-3xl font-bold text-blue-600 dark:text-blue-400\">Guess the City!<\/h1>\n            <div class=\"flex justify-between items-center mt-4 text-lg\">\n                <p>Score: <span id=\"score\" class=\"font-bold text-green-500\">0<\/span><\/p>\n                <p>Question: <span id=\"question-counter\" class=\"font-bold\">1<\/span> \/ <span id=\"total-questions\"><\/span><\/p>\n            <\/div>\n            <hr class=\"my-4 border-gray-200 dark:border-gray-600\">\n        <\/div>\n\n        <!-- Main Game Content -->\n        <div id=\"game-content\" class=\"fade-in\">\n            <p class=\"text-xl mb-4\">Which city is shown in the picture below?<\/p>\n            \n            <!-- City Image -->\n            <img decoding=\"async\" id=\"city-image\" src=\"\" alt=\"A picture of a city\" class=\"w-full h-64 object-cover rounded-xl mb-6 shadow-lg border-4 border-gray-200 dark:border-gray-700\">\n            \n            <!-- Options Container -->\n            <div id=\"options-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                <!-- Option buttons will be inserted here by JavaScript -->\n            <\/div>\n            \n            <!-- Feedback Message -->\n            <div id=\"feedback\" class=\"mt-4 text-xl font-bold h-8\"><\/div>\n        <\/div>\n\n        <!-- Next Button -->\n        <button id=\"next-button\" class=\"hidden mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-transform transform hover:scale-105 shadow-lg\">\n            Next Question\n        <\/button>\n\n        <!-- Final Score Screen -->\n        <div id=\"end-screen\" class=\"hidden text-center\">\n            <h2 class=\"text-4xl font-extrabold mb-4\">Game Over!<\/h2>\n            <p class=\"text-2xl mb-2\">Your Final Score:<\/p>\n            <p id=\"final-score\" class=\"text-6xl font-bold text-green-500 mb-8\"><\/p>\n            <button id=\"restart-button\" class=\"w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-lg transition-transform transform hover:scale-105 shadow-lg\">\n                Play Again\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ --- DATA ---\n        \/\/ List of cities with their names and actual, recognizable image URLs.\n        const cities = [\n            { name: \"Paris\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/85\/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg\/800px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg\" },\n            { name: \"Tokyo\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c5\/Shibuya_Crossing_2023.jpg\/1280px-Shibuya_Crossing_2023.jpg\" },\n            { name: \"New York\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/d\/d3\/Statue_of_Liberty%2C_NY.jpg\/800px-Statue_of_Liberty%2C_NY.jpg\" },\n            { name: \"London\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/63\/Tower_Bridge_from_Shad_Thames.jpg\/1280px-Tower_Bridge_from_Shad_Thames.jpg\" },\n            { name: \"Dubai\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/93\/Burj_Khalifa.jpg\/800px-Burj_Khalifa.jpg\" },\n            { name: \"Sydney\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/4\/40\/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg\/1280px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg\" },\n            { name: \"Rome\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/d\/de\/Colosseo_2020.jpg\/1280px-Colosseo_2020.jpg\" },\n            { name: \"Rio de Janeiro\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/4\/4f\/Christ_the_Redeemer_-_The_New_7_Wonders_of_the_World.jpg\/800px-Christ_the_Redeemer_-_The_New_7_Wonders_of_the_World.jpg\" },\n            { name: \"Cairo\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/af\/All_Gizah_Pyramids.jpg\/1280px-All_Gizah_Pyramids.jpg\" },\n            { name: \"Moscow\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/6c\/Saint_Basil%27s_Cathedral_and_the_Red_Square.jpg\/1024px-Saint_Basil%27s_Cathedral_and_the_Red_Square.jpg\" },\n            { name: \"Cape Town\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/2\/22\/Table_Mountain_and_Signal_Hill_from_Bloubergstrand.jpg\/1280px-Table_Mountain_and_Signal_Hill_from_Bloubergstrand.jpg\" },\n            { name: \"Singapore\", imageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/e\/e0\/Singapore_-_Marina_Bay_Sands_-_2012.jpg\/1280px-Singapore_-_Marina_Bay_Sands_-_2012.jpg\" }\n        ];\n\n        \/\/ --- STATE VARIABLES ---\n        let currentQuestionIndex = 0;\n        let score = 0;\n        let shuffledCities = [];\n\n        \/\/ --- DOM ELEMENTS ---\n        const gameContainer = document.getElementById('game-container');\n        const gameContent = document.getElementById('game-content');\n        const headerSection = document.getElementById('header-section');\n        const cityImage = document.getElementById('city-image');\n        const optionsContainer = document.getElementById('options-container');\n        const feedback = document.getElementById('feedback');\n        const scoreDisplay = document.getElementById('score');\n        const questionCounter = document.getElementById('question-counter');\n        const totalQuestionsDisplay = document.getElementById('total-questions');\n        const nextButton = document.getElementById('next-button');\n        const endScreen = document.getElementById('end-screen');\n        const finalScoreDisplay = document.getElementById('final-score');\n        const restartButton = document.getElementById('restart-button');\n\n        \/\/ --- HELPER FUNCTIONS ---\n        \/**\n         * Shuffles an array in place using the Fisher-Yates algorithm.\n         * @param {Array} array The array to shuffle.\n         *\/\n        function shuffleArray(array) {\n            for (let i = array.length - 1; i > 0; i--) {\n                const j = Math.floor(Math.random() * (i + 1));\n                [array[i], array[j]] = [array[j], array[i]];\n            }\n        }\n\n        \/\/ --- GAME LOGIC ---\n        \/**\n         * Starts or restarts the game.\n         *\/\n        function startGame() {\n            \/\/ Reset state\n            currentQuestionIndex = 0;\n            score = 0;\n            shuffledCities = [...cities];\n            shuffleArray(shuffledCities);\n            \n            \/\/ Reset UI\n            scoreDisplay.textContent = score;\n            totalQuestionsDisplay.textContent = shuffledCities.length;\n            endScreen.classList.add('hidden');\n            headerSection.classList.remove('hidden');\n            gameContent.classList.remove('hidden');\n            nextButton.classList.add('hidden');\n            feedback.textContent = '';\n            \n            displayQuestion();\n        }\n\n        \/**\n         * Displays the current question and options.\n         *\/\n        function displayQuestion() {\n            \/\/ Clear previous feedback and options\n            feedback.textContent = '';\n            optionsContainer.innerHTML = '';\n            optionsContainer.parentElement.classList.remove('fade-in');\n            void optionsContainer.offsetWidth; \/\/ Trigger reflow to restart animation\n            optionsContainer.parentElement.classList.add('fade-in');\n\n\n            \/\/ Get the current question\n            const currentCity = shuffledCities[currentQuestionIndex];\n            \n            \/\/ Update UI elements\n            cityImage.src = currentCity.imageUrl;\n            cityImage.onerror = () => { cityImage.src = 'https:\/\/placehold.co\/800x600\/cccccc\/ffffff?text=Image+Not+Found'; };\n            questionCounter.textContent = currentQuestionIndex + 1;\n\n            \/\/ Generate options\n            const options = generateOptions(currentCity.name);\n            \n            \/\/ Create and append option buttons\n            options.forEach(option => {\n                const button = document.createElement('button');\n                button.textContent = option;\n                button.className = 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 font-semibold py-3 px-4 rounded-lg transition-colors duration-300';\n                button.addEventListener('click', () => checkAnswer(option, currentCity.name, button));\n                optionsContainer.appendChild(button);\n            });\n        }\n        \n        \/**\n         * Generates 3 incorrect options plus the correct one.\n         * @param {string} correctAnswer The correct city name.\n         * @returns {Array<string>} An array of 4 shuffled options.\n         *\/\n        function generateOptions(correctAnswer) {\n            const options = [correctAnswer];\n            const incorrectAnswers = cities\n                .map(city => city.name)\n                .filter(name => name !== correctAnswer);\n            \n            shuffleArray(incorrectAnswers);\n            \n            for (let i = 0; i < 3; i++) {\n                options.push(incorrectAnswers[i]);\n            }\n            \n            shuffleArray(options);\n            return options;\n        }\n\n        \/**\n         * Checks the user's answer, updates score and provides feedback.\n         * @param {string} selectedOption The option the user clicked.\n         * @param {string} correctAnswer The correct answer for the question.\n         * @param {HTMLElement} clickedButton The button element that was clicked.\n         *\/\n        function checkAnswer(selectedOption, correctAnswer, clickedButton) {\n            \/\/ Disable all buttons to prevent multiple answers\n            const buttons = optionsContainer.querySelectorAll('button');\n            buttons.forEach(button => {\n                button.disabled = true;\n                \/\/ Highlight the correct answer\n                if (button.textContent === correctAnswer) {\n                    button.classList.add('correct');\n                }\n            });\n\n            \/\/ Check if the answer is correct\n            if (selectedOption === correctAnswer) {\n                score++;\n                scoreDisplay.textContent = score;\n                feedback.textContent = 'Correct!';\n                feedback.className = 'mt-4 text-xl font-bold h-8 text-green-500';\n                clickedButton.classList.add('correct');\n            } else {\n                feedback.textContent = `Wrong! The answer was ${correctAnswer}.`;\n                feedback.className = 'mt-4 text-xl font-bold h-8 text-red-500';\n                clickedButton.classList.add('incorrect');\n            }\n            \n            \/\/ Show the next button\n            nextButton.classList.remove('hidden');\n        }\n\n        \/**\n         * Moves to the next question or ends the game.\n         *\/\n        function handleNextQuestion() {\n            currentQuestionIndex++;\n            if (currentQuestionIndex < shuffledCities.length) {\n                displayQuestion();\n                nextButton.classList.add('hidden');\n            } else {\n                showEndScreen();\n            }\n        }\n        \n        \/**\n         * Displays the final score screen.\n         *\/\n        function showEndScreen() {\n            gameContent.classList.add('hidden');\n            headerSection.classList.add('hidden');\n            nextButton.classList.add('hidden');\n            endScreen.classList.remove('hidden');\n            endScreen.classList.add('fade-in');\n            finalScoreDisplay.textContent = `${score} \/ ${shuffledCities.length}`;\n        }\n\n        \/\/ --- EVENT LISTENERS ---\n        nextButton.addEventListener('click', handleNextQuestion);\n        restartButton.addEventListener('click', startGame);\n        \n        \/\/ --- INITIALIZATION ---\n        \/\/ Start the game when the page loads\n        document.addEventListener('DOMContentLoaded', startGame);\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Guess the City! Score: 0 Question: 1 \/ Which city is shown in the picture below? Next Question Game Over! Your Final Score: Play Again<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-271","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":2,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/271\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}