{"id":9,"date":"2025-08-06T00:36:59","date_gmt":"2025-08-06T00:36:59","guid":{"rendered":"https:\/\/expotil.com\/src\/?p=9"},"modified":"2025-08-06T00:36:59","modified_gmt":"2025-08-06T00:36:59","slug":"worlds-best-schools","status":"publish","type":"post","link":"https:\/\/expotil.com\/src\/index.php\/2025\/08\/06\/worlds-best-schools\/","title":{"rendered":"Worlds Best Schools"},"content":{"rendered":"\n<p><\/p>\n\n\n\n\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Google Fonts - Inter -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n        \/* Ensure the app takes full width within its container *\/\n        #root {\n            width: 100%;\n        }\n    <\/style>\n    <!-- React ve ReactDOM CDN -->\n    <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n    <!-- Babel CDN (JSX'i taray\u0131c\u0131da d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in) - Sadece geli\u015ftirme\/g\u00f6mme ama\u00e7l\u0131 basitle\u015ftirilmi\u015f kullan\u0131m -->\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"root\"><\/div>\n\n    <script type=\"text\/babel\">\n        \/\/ \u00c7eviriler i\u00e7in nesne\n        const i18n = {\n          tr: {\n            appTitle: \"En \u00c7ok Tercih Edilen Okullar \ud83c\udf93\",\n            appSubtitle: \"Gelece\u011finizi \u015fekillendirecek en iyi e\u011fitim kurumlar\u0131n\u0131 ke\u015ffedin.\",\n            backButton: \"Geri D\u00f6n\",\n            location: \"Konum\",\n            preferenceScore: \"Tercih Puan\u0131\",\n            programsOffered: \"Sunulan Programlar:\",\n            score: \"Puan\",\n            viewDetails: \"Detaylar\u0131 G\u00f6r\",\n            noImage: \"Resim Yok\",\n            allRightsReserved: \"T\u00fcm haklar\u0131 sakl\u0131d\u0131r.\",\n            selectLanguage: \"Dil Se\u00e7in:\",\n            turkish: \"T\u00fcrk\u00e7e\",\n            english: \"\u0130ngilizce\",\n            schoolsText: \"Okullar\",\n            searchOnWeb: \"Web'de Ara\"\n          },\n          en: {\n            appTitle: \"Most Preferred Schools \ud83c\udf93\",\n            appSubtitle: \"Discover the best educational institutions that will shape your future.\",\n            backButton: \"Go Back\",\n            location: \"Location\",\n            preferenceScore: \"Preference Score\",\n            programsOffered: \"Programs Offered:\",\n            score: \"Score\",\n            viewDetails: \"View Details\",\n            noImage: \"No Image\",\n            allRightsReserved: \"All rights reserved.\",\n            selectLanguage: \"Select Language:\",\n            turkish: \"Turkish\",\n            english: \"English\",\n            schoolsText: \"Schools\",\n            searchOnWeb: \"Search on Web\"\n          }\n        };\n\n        \/\/ Ana App bile\u015feni\n        function App() {\n          const [schools, setSchools] = React.useState([]);\n          const [selectedSchool, setSelectedSchool] = React.useState(null);\n          const [language, setLanguage] = React.useState(() => {\n            const browserLanguage = navigator.language.split('-')[0];\n            if (browserLanguage === 'tr') {\n              return 'tr';\n            }\n            return 'en';\n          });\n\n          React.useEffect(() => {\n            const mockSchools = [\n              {\n                id: 1,\n                name: \"Bo\u011fazi\u00e7i \u00dcniversitesi\",\n                location_tr: \"\u0130stanbul, T\u00fcrkiye\",\n                location_en: \"Istanbul, Turkey\",\n                country_tr: \"T\u00fcrkiye\",\n                country_en: \"Turkey\",\n                description_tr: \"T\u00fcrkiye'nin \u00f6nde gelen ara\u015ft\u0131rma \u00fcniversitelerinden biridir. Geni\u015f bir akademik yelpazeye sahiptir.\",\n                description_en: \"One of Turkey's leading research universities. It has a wide academic range.\",\n                image: \"https:\/\/placehold.co\/400x200\/4CAF50\/FFFFFF?text=Bo\u011fazi\u00e7i\",\n                preferenceScore: 95,\n                programs_tr: [\"M\u00fchendislik\", \"\u0130ktisadi ve \u0130dari Bilimler\", \"Fen-Edebiyat\"],\n                programs_en: [\"Engineering\", \"Economics and Administrative Sciences\", \"Arts and Sciences\"]\n              },\n              {\n                id: 2,\n                name: \"Orta Do\u011fu Teknik \u00dcniversitesi (ODT\u00dc)\",\n                location_tr: \"Ankara, T\u00fcrkiye\",\n                location_en: \"Ankara, Turkey\",\n                country_tr: \"T\u00fcrkiye\",\n                country_en: \"Turkey\",\n                description_tr: \"\u00d6zellikle m\u00fchendislik ve fen bilimleri alan\u0131nda g\u00fc\u00e7l\u00fcd\u00fcr. Uluslararas\u0131 alanda tan\u0131nan bir \u00fcniversitedir.\",\n                description_en: \"Strong in engineering and natural sciences. An internationally recognized university.\",\n                image: \"https:\/\/placehold.co\/400x200\/2196F3\/FFFFFF?text=ODT\u00dc\",\n                preferenceScore: 92,\n                programs_tr: [\"M\u00fchendislik\", \"Mimarl\u0131k\", \"Fen Bilimleri\"],\n                programs_en: [\"Engineering\", \"Architecture\", \"Natural Sciences\"]\n              },\n              {\n                id: 3,\n                name: \"\u0130stanbul Teknik \u00dcniversitesi (\u0130T\u00dc)\",\n                location_tr: \"\u0130stanbul, T\u00fcrkiye\",\n                location_en: \"Istanbul, Turkey\",\n                country_tr: \"T\u00fcrkiye\",\n                country_en: \"Turkey\",\n                description_tr: \"T\u00fcrkiye'nin en eski ve k\u00f6kl\u00fc teknik \u00fcniversitelerinden biridir. M\u00fchendislik ve mimarl\u0131k alan\u0131nda liderdir.\",\n                description_en: \"One of Turkey's oldest and most established technical universities. A leader in engineering and architecture.\",\n                image: \"https:\/\/placehold.co\/400x200\/FFC107\/000000?text=\u0130T\u00dc\",\n                preferenceScore: 90,\n                programs_tr: [\"M\u00fchendislik\", \"Mimarl\u0131k\", \"Denizcilik\"],\n                programs_en: [\"Engineering\", \"Architecture\", \"Maritime\"]\n              },\n              {\n                id: 7,\n                name: \"Harvard University\",\n                location_tr: \"Cambridge, Massachusetts, ABD\",\n                location_en: \"Cambridge, Massachusetts, USA\",\n                country_tr: \"ABD\",\n                country_en: \"USA\",\n                description_tr: \"D\u00fcnyan\u0131n en prestijli \u00fcniversitelerinden biri olarak kabul edilir. \u00c7ok \u00e7e\u015fitli disiplinlerde m\u00fckemmellik sunar.\",\n                description_en: \"Considered one of the world's most prestigious universities. Offers excellence across a wide range of disciplines.\",\n                image: \"https:\/\/placehold.co\/400x200\/A020F0\/FFFFFF?text=Harvard\",\n                preferenceScore: 98,\n                programs_tr: [\"Hukuk\", \"T\u0131p\", \"\u0130\u015fletme\", \"M\u00fchendislik\"],\n                programs_en: [\"Law\", \"Medicine\", \"Business\", \"Engineering\"]\n              },\n              {\n                id: 8,\n                name: \"University of Oxford\",\n                location_tr: \"Oxford, Birle\u015fik Krall\u0131k\",\n                location_en: \"Oxford, United Kingdom\",\n                country_tr: \"Birle\u015fik Krall\u0131k\",\n                country_en: \"United Kingdom\",\n                description_tr: \"\u0130ngilizce konu\u015fulan d\u00fcnyan\u0131n en eski \u00fcniversitesi. K\u00f6kl\u00fc tarihi ve ara\u015ft\u0131rma gelene\u011fiyle bilinir.\",\n                description_en: \"The oldest university in the English-speaking world. Known for its rich history and research tradition.\",\n                image: \"https:\/\/placehold.co\/400x200\/FF5733\/FFFFFF?text=Oxford\",\n                preferenceScore: 97,\n                programs_tr: [\"Be\u015feri Bilimler\", \"Fen Bilimleri\", \"T\u0131p\", \"Hukuk\"],\n                programs_en: [\"Humanities\", \"Sciences\", \"Medicine\", \"Law\"]\n              },\n              {\n                id: 9,\n                name: \"Stanford University\",\n                location_tr: \"Stanford, Kaliforniya, ABD\",\n                location_en: \"Stanford, California, USA\",\n                country_tr: \"ABD\",\n                country_en: \"USA\",\n                description_tr: \"Silikon Vadisi'nin kalbinde yer alan, inovasyon ve giri\u015fimcilikle \u00f6zde\u015fle\u015fmi\u015f bir ara\u015ft\u0131rma \u00fcniversitesidir.\",\n                description_en: \"A research university located in the heart of Silicon Valley, synonymous with innovation and entrepreneurship.\",\n                image: \"https:\/\/placehold.co\/400x200\/3366FF\/FFFFFF?text=Stanford\",\n                preferenceScore: 96,\n                programs_tr: [\"Bilgisayar Bilimi\", \"M\u00fchendislik\", \"\u0130\u015fletme\", \"Do\u011fa Bilimleri\"],\n                programs_en: [\"Computer Science\", \"Engineering\", \"Business\", \"Natural Sciences\"]\n              },\n              {\n                id: 10,\n                name: \"ETH Z\u00fcrich\",\n                location_tr: \"Z\u00fcrih, \u0130svi\u00e7re\",\n                location_en: \"Zurich, Switzerland\",\n                country_tr: \"\u0130svi\u00e7re\",\n                country_en: \"Switzerland\",\n                description_tr: \"Bilim ve m\u00fchendislik alanlar\u0131nda d\u00fcnya lideri bir \u00fcniversitedir. Albert Einstein da burada e\u011fitim g\u00f6rm\u00fc\u015ft\u00fcr.\",\n                description_en: \"A world-leading university in science and engineering. Albert Einstein also studied here.\",\n                image: \"https:\/\/placehold.co\/400x200\/008080\/FFFFFF?text=ETH+Z\u00fcrich\",\n                preferenceScore: 93,\n                programs_tr: [\"M\u00fchendislik\", \"Do\u011fa Bilimleri\", \"Mimarl\u0131k\", \"Matematik\"],\n                programs_en: [\"Engineering\", \"Natural Sciences\", \"Architecture\", \"Mathematics\"]\n              },\n              {\n                id: 11,\n                name: \"University of Tokyo\",\n                location_tr: \"Tokyo, Japonya\",\n                location_en: \"Tokyo, Japan\",\n                country_tr: \"Japonya\",\n                country_en: \"Japan\",\n                description_tr: \"Japonya'n\u0131n en prestijli \u00fcniversitesi ve Asya'n\u0131n \u00f6nde gelen ara\u015ft\u0131rma kurumlar\u0131ndan biridir.\",\n                description_en: \"Japan's most prestigious university and one of Asia's leading research institutions.\",\n                image: \"https:\/\/placehold.co\/400x200\/800080\/FFFFFF?text=Tokyo+Uni\",\n                preferenceScore: 91,\n                programs_tr: [\"Hukuk\", \"M\u00fchendislik\", \"T\u0131p\", \"Edebiyat\"],\n                programs_en: [\"Law\", \"Engineering\", \"Medicine\", \"Literature\"]\n              }\n            ];\n            setSchools(mockSchools.sort((a, b) => b.preferenceScore - a.preferenceScore));\n          }, []);\n\n          const handleSchoolClick = (school) => {\n            setSelectedSchool(school);\n          };\n\n          const handleCloseDetails = () => {\n            setSelectedSchool(null);\n          };\n\n          const handleLanguageChange = (event) => {\n            setLanguage(event.target.value);\n          };\n\n          const handleSearchOnWeb = () => {\n            if (selectedSchool) {\n              const query = `${selectedSchool.name} ${selectedSchool[`country_${language}`]} ${texts.schoolsText}`;\n              const searchUrl = `https:\/\/www.google.com\/search?q=${encodeURIComponent(query)}`;\n              window.open(searchUrl, '_blank');\n            }\n          };\n\n          const texts = i18n[language];\n\n          return (\n            <div className=\"min-h-screen bg-gradient-to-br from-blue-100 to-purple-100 p-4 sm:p-6 lg:p-8 font-sans\">\n              <div className=\"max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden\">\n                <header className=\"bg-blue-600 text-white p-6 rounded-t-xl text-center relative\">\n                  <h1 className=\"text-3xl sm:text-4xl font-extrabold tracking-tight\">\n                    {texts.appTitle}\n                  <\/h1>\n                  <p className=\"mt-2 text-lg sm:text-xl opacity-90\">\n                    {texts.appSubtitle}\n                  <\/p>\n                  <div className=\"absolute top-4 right-4\">\n                    <label htmlFor=\"language-select\" className=\"sr-only\">{texts.selectLanguage}<\/label>\n                    <select\n                      id=\"language-select\"\n                      value={language}\n                      onChange={handleLanguageChange}\n                      className=\"bg-blue-700 text-white p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300\"\n                    >\n                      <option value=\"tr\">{texts.turkish}<\/option>\n                      <option value=\"en\">{texts.english}<\/option>\n                    <\/select>\n                  <\/div>\n                <\/header>\n\n                <main className=\"p-4 sm:p-6 lg:p-8\">\n                  {selectedSchool ? (\n                    <div className=\"bg-white p-6 rounded-lg shadow-lg border border-gray-200\">\n                      <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4\">\n                        <button\n                          onClick={handleCloseDetails}\n                          className=\"mb-2 sm:mb-0 px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition duration-300 ease-in-out flex items-center\"\n                        >\n                          <svg\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                            className=\"h-5 w-5 mr-2\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                          >\n                            <path\n                              fillRule=\"evenodd\"\n                              d=\"M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H16a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z\"\n                              clipRule=\"evenodd\"\n                            \/>\n                          <\/svg>\n                          {texts.backButton}\n                        <\/button>\n                        <button\n                          onClick={handleSearchOnWeb}\n                          className=\"px-4 py-2 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-600 transition duration-300 ease-in-out flex items-center\"\n                        >\n                          <svg\n                            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                            className=\"h-5 w-5 mr-2\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            strokeWidth={2}\n                          >\n                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n                          <\/svg>\n                          {texts.searchOnWeb}\n                        <\/button>\n                      <\/div>\n                      <h2 className=\"text-3xl font-bold text-gray-800 mb-4\">{selectedSchool.name}<\/h2>\n                      <img\n                        src={selectedSchool.image}\n                        alt={selectedSchool.name}\n                        className=\"w-full h-48 object-cover rounded-lg mb-4 shadow\"\n                        onError={(e) => { e.target.onerror = null; e.target.src = `https:\/\/placehold.co\/400x200\/CCCCCC\/000000?text=${texts.noImage}`; }}\n                      \/>\n                      <p className=\"text-gray-600 mb-2\">\n                        <strong className=\"text-blue-600\">{texts.location}:<\/strong> {selectedSchool[`location_${language}`]}\n                      <\/p>\n                      <p className=\"text-gray-700 mb-4 leading-relaxed\">\n                        {selectedSchool[`description_${language}`]}\n                      <\/p>\n                      <div className=\"flex items-center text-lg text-yellow-500 mb-4\">\n                        <svg\n                          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                          className=\"h-6 w-6 mr-1\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"currentColor\"\n                        >\n                          <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z\" \/>\n                        <\/svg>\n                        <span className=\"font-semibold text-gray-800\">{texts.preferenceScore}: {selectedSchool.preferenceScore}\/100<\/span>\n                      <\/div>\n                      <h3 className=\"text-xl font-semibold text-gray-800 mb-2\">{texts.programsOffered}<\/h3>\n                      <ul className=\"list-disc list-inside text-gray-700\">\n                        {selectedSchool[`programs_${language}`].map((program, index) => (\n                          <li key={index} className=\"mb-1\">{program}<\/li>\n                        ))}\n                      <\/ul>\n                    <\/div>\n                  ) : (\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n                      {schools.map((school) => (\n                        <div\n                          key={school.id}\n                          className=\"group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out cursor-pointer transform hover:-translate-y-1 border border-gray-200 relative overflow-hidden\"\n                          onClick={() => handleSchoolClick(school)}\n                        >\n                          <img\n                            src={school.image}\n                            alt={school.name}\n                            className=\"w-full h-40 object-cover rounded-t-xl transition-transform duration-300 group-hover:scale-105\"\n                            onError={(e) => { e.target.onerror = null; e.target.src = `https:\/\/placehold.co\/400x200\/CCCCCC\/000000?text=${texts.noImage}`; }}\n                          \/>\n                          <div className=\"absolute inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center text-white text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-xl\">\n                            <p className=\"text-2xl\">{school[`country_${language}`]}<\/p>\n                            <p className=\"text-xl\">{texts.schoolsText}<\/p>\n                          <\/div>\n                          <div className=\"p-5\">\n                            <h2 className=\"text-xl font-bold text-gray-800 mb-2 truncate\">\n                              {school.name}\n                            <\/h2>\n                            <p className=\"text-gray-600 text-sm mb-3\">\n                              <svg\n                                xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                                className=\"h-4 w-4 inline-block mr-1 text-blue-500\"\n                                fill=\"none\"\n                                viewBox=\"0 0 24 24\"\n                                stroke=\"currentColor\"\n                              >\n                                <path\n                                  strokeLinecap=\"round\"\n                                  strokeLinejoin=\"round\"\n                                  strokeWidth={2}\n                                  d=\"M17.657 16.727A8 8 0 016.343 5.273L16.727 17.657z\"\n                                \/>\n                                <path\n                                  strokeLinecap=\"round\"\n                                  strokeLinejoin=\"round\"\n                                  strokeWidth={2}\n                                  d=\"M6.343 5.273A8 8 0 0117.657 16.727L5.273 6.343z\"\n                                \/>\n                              <\/svg>\n                              {school[`location_${language}`]}\n                            <\/p>\n                            <p className=\"text-gray-700 text-base mb-4 line-clamp-3\">\n                              {school[`description_${language}`]}\n                            <\/p>\n                            <div className=\"flex items-center justify-between\">\n                              <span className=\"text-lg font-semibold text-blue-600\">\n                                {texts.score}: {school.preferenceScore}\n                              <\/span>\n                              <button className=\"px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition duration-300 ease-in-out\">\n                                {texts.viewDetails}\n                              <\/button>\n                            <\/div>\n                          <\/div>\n                        <\/div>\n                      ))}\n                    <\/div>\n                  )}\n                <\/main>\n\n                <footer className=\"bg-gray-800 text-white p-6 rounded-b-xl text-center text-sm\">\n                  <p>&copy; 2025 {texts.appTitle.replace(' \ud83c\udf93', '')}. {texts.allRightsReserved}<\/p>\n                <\/footer>\n              <\/div>\n            <\/div>\n          );\n        }\n\n        \/\/ React uygulamas\u0131n\u0131 DOM'a render et\n        ReactDOM.createRoot(document.getElementById('root')).render(<App \/>);\n    <\/script>\n\n","protected":false},"excerpt":{"rendered":"","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-9","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}