1<!DOCTYPE html> 2<html lang="fr" style="width:100%;height:100%;"> 3 4 5<head> 6<title id="title">Home</title> 7 <meta name="description" content="guides pays pour geoguessr"> 8 <meta name="keywords" content="Geoguessr, guide, quiz, astuces, aide, trucs, compétition, ligue intercommu"> 9 <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 10 <meta content="utf-8" http-equiv="encoding"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <!-- Bootstrap CSS, navbar styles and general styles --> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 14 <link rel="stylesheet" href="/navbar.css"> 15 <link rel="stylesheet" href="/style.css"> 16 17 18 <!------------------------------------------MAP---------------------------------------------------------> 19 <link rel="stylesheet" href="/leaflet/leaflet.css"/> 20
20<script src="/leaflet/leaflet-src.js"></script>
20 21 <!--
21<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
21 --> 22
22<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
22 23 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' /> 24 25 <!--------------------------------resizer-------------------------------------------------------------------> 26
26<script src='./resize.js'></script>
26 27 28 <!-----------------------------------------CONNECT SUPER DUPER---------------------------------------------------------------> 29
29<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js"></script>
29 30
30<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js"></script>
30 31
31<script src="./connect.js"></script>
31 32 33 <!----------------------------------TABULATOR+LUXON--------------------------------<link href="/css/tabulator/5.6/tabulator_site.css" rel="stylesheet">--------------------------> 34 <link href="https://unpkg.com/[email protected]/dist/css/tabulator_site.css" rel="stylesheet"> 35
35<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
35 36
36<script src="/luxon/luxon.js"></script>
36 37 38 <!------------------------------------INFO STYLE-----------------------------------------------------------> 39 <link rel="stylesheet" href="./quiz2024.css" /> 40 <style> 41 @font-face { 42 font-family: barlow; 43 src: url(/img/font/barlow_regular.ttf); 44 } 45 46 .leaflet-tooltip-left.noArrow::before {border-left-color: transparent;} 47 .leaflet-tooltip-right.noArrow::before {border-right-color: transparent;} 48 49 .mapmenu_info { 50 font-family : barlow; 51 border: 2px solid black; 52 background-color:rgba(255, 255, 255, 0.7); 53 } 54 55 .countryname { 56 font-family : barlow; 57 background-color:rgba(0, 0, 0, 1); 58 color : white; 59 overflow: hidden; 60 text-overflow: clip; 61 white-space: nowrap; 62 } 63 64 65 66 67 .mapmenu_flag { 68 border : 2px black solid; 69 } 70 71 .separate { 72 display: block; 73 content: ""; 74 } 75 76 .tabcont { 77 /*background-color : #B7B7B7 !important;*/ 78 /*background: linear-gradient(to bottom, #1742CF 0%, #110ACF 75%);*/ 79 background: black; 80 color : white; 81 82 border-top : delete !important; 83 overflow-y: scroll; 84 scrollbar-color : #383838 #606060; 85 } 86 87 88 .tabcont a:link {color: white; } 89 a:visited {color: lightgrey;} 90 a:hover {font-weight: bold; text-decoration: underline;} 91 92 .mapmenu_table { 93 table-layout: fixed ; 94 width: 100% ; 95 } 96 .mapmenu_table td { 97 width:50%; 98 max-width: 0; 99 overflow: hidden; 100 text-overflow: clip; 101 white-space: nowrap; 102 } 103 104 .tab { 105 border: 1px solid black !important; 106 /*background-color : #4970DD;*/ 107 background-color : #383838; 108 } 109 110 .tab button {color : white !important;} 111 112 .active { 113 /*background-color : #1742CF !important;*/ 114 background-color : black !important; 115 color : white; 116 } 117 118 .doc_top { 119 align-self : flex-end; 120 font-family : barlow; 121 font-size : 14px; 122 /*background-color : #C1FFFF;*/ 123 color : blue !important; 124 padding-left : 10px; 125 padding-right : 10px; 126 } 127 128 @media ( width <= 500px) { 129 .maintitle {height:0px; visibility : hidden; padding-top:0px; padding-bottom:0px;} 130 .mapmenu_info { 131 width : 100%; 132 height : 230px; 133 font-size : 12px; 134 padding-top : 10px; 135 padding-bottom : 10px; 136 padding-left : 10px; 137 padding-right: 10px;} 138 .separate {margin-top: 5px;} 139 140 .mapmenu_flag { height : 40px;} 141 .countryname {font-size : 20px;} 142 .tab button { 143 padding: 4px 6px !important; 144 font-size: 14px !important;} 145 .tabcont { height:115px; padding-left : 5px;} 146 147 } 148
149 @media ( 500px < width <= 900px) { 150 .maintitle {height:0px; visibility : hidden; padding-top:0px; padding-bottom:0px;} 151 .mapmenu_info { 152 width : 400px; 153 height : 230px; 154 font-size : 14px; 155 padding-top : 10px; 156 padding-bottom : 10px; 157 padding-left : 10px; 158 padding-right: 10px;} 159 .separate {margin-top: 5px;} 160 161 .mapmenu_flag { height : 50px;} 162 .countryname {font-size : 24px;} 163 .tab button { 164 padding: 6px 8px !important; 165 font-size: 16px !important;} 166 .tabcont { height:115px; padding-left : 5px;} 167 168 } 169 170 @media ( 900px < width <= 1250px) { 171 .maintitle {height:50px;} 172 .mapmenu_info { 173 width : 400px; 174 height : 280px; 175 font-size : 16px; 176 padding-top : 10px; 177 padding-bottom : 10px; 178 padding-left : 10px; 179 padding-right: 10px;} 180 .separate {margin-top: 5px;} 181 .mapmenu_flag { height : 60px;} 182 .countryname {font-size : 28px;} 183 .tab button { 184 padding: 8px 12px !important; 185 font-size: 18px !important;} 186 .tabcont { height:140px; padding-left : 12px;} 187 188 } 189 190 @media ( 1250px < width <= 1600px) { 191 .maintitle {height:50px;} 192 .mapmenu_info { 193 width : 500px; 194 height : 280px; 195 font-size : 16px; 196 padding-top : 10px; 197 padding-bottom : 10px; 198 padding-left : 10px; 199 padding-right: 10px;} 200 .separate {margin-top: 5px;} 201 .mapmenu_flag { height : 60px;} 202 .countryname {font-size : 28px;} 203 .tab button { 204 padding: 8px 12px !important; 205 font-size: 18px !important;} 206 .tabcont { height:140px; padding-left : 12px;} 207 208 } 209 210 @media ( 1600px < width) { 211 .maintitle {height:50px;} 212 .mapmenu_info { 213 width : 600px; 214 height : 320px; 215 font-size : 18px; 216 padding-top : 10px; 217 padding-bottom : 10px; 218 padding-left : 10px; 219 padding-right: 10px;} 220 .separate {margin-top: 5px;} 221 .mapmenu_flag { height : 70px;} 222 .countryname {font-size : 32px;} 223 .tab button { 224 padding: 10px 14px !important; 225 font-size: 20px !important;} 226 .tabcont { height:170px; padding-left : 15px;} 227 228 } 229 230 231 232 </style> 233</head> 234 235 236 237<body style="width:100%;height:100%;display:flex;"> 238 239<div id="main" style="width:100%;height:100%;display:flex; flex-direction:row;"> 240 241 <div class="left"> 242 <div id="treeview" class="treeview"> 243 <img src='/img/flags/world.png' alt='flag' class='flagImg'/> 244 <div class="sideMenu" style="margin-top:25px;width:80%;max-width:5000px !important;align-self:center;"> 245 <div class="sideMenu-heading" id="quickstart0">Quickstart information</div> 246 <span id="quickstart01" style="margin-bottom:5px;">Select a country on the map to display the available quiz.</span> 247 <span style="margin-bottom:5px;"><img class="smallimg" src="/img/quiz2024/menu_login.png" /> <span id="quickstart02">Create an account to access advanced functionnalities.</span></span> 248 <span style="margin-bottom:5px;"><img class="smallimg" src="/img/quiz2024/menu_help.png" /><span id="quickstart03"> Use the help button for more information.</span></span> 249 </div> 250 251 <br><br> 252 <ul class='treeclass'> 253 <li><details open><summary class='countryName' >World</summary> 254 <ul> 255 <li><span class='highlight' onClick='playSpecial("21");'>Distance</span></li> 256 <li><span class='highlight' onClick='playSpecial("22");'>Triangulate</span></li> 257 </ul></details></li> 258 </ul> 259 260 </div> 261 <div style="margin-top:auto;padding-top:7px;border-top : 2px solid;"> 262 <div id="menuLine1" class="menuLine"> 263 <img class="imgMenu" src="/img/quiz2024/mainmap_h.png" id="buttonMainMap" alt="home" onClick="showMainMap();"/> 264 <img class="imgMenu" src="/img/quiz2024/menu_login.png" id="buttonLogin" alt="login" onCLick="showLogin();"/> 265 <img class="imgMenu" src="/img/quiz2024/menu_search.png" id="buttonSearch" alt="search" onClick="showSearch();"/> 266 <img class="imgMenu" src="/img/quiz2024/menu_options.png" id="buttonOptions" alt="options" onClick="showOptions();"/> 267 268 </div> 269 <div id="menuLine2" class="menuLine"> 270 <img class="imgMenu" src="/img/quiz2024/menu_home.png" id="buttonHome" alt="home" onmouseover="hoverHome(this);" onmouseout="unhoverHome(this);" onClick ="window.location.href ='https://super-duper.fr';"/> 271 <img class="imgMenu" src="/img/quiz2024/menu_edit.png" id="buttonEditorOptions" alt="edit" onmouseover="hoverEdit(this);" onmouseout="unhoverEdit(this);" onClick ="showEditorOptions();"/> 272 <img class="imgMenu" src="/img/quiz2024/menu_help.png" id="buttonHelp" alt="options" onClick="showHelp();"/> 273 </div> 274 275 </div> 276 </div> 277 278 <!-- The resizer --> 279 <div class="resizer" id="dragMe"></div> 280 281 282 <!-- Tab content --> 283 <div id="mapCities" style="flex:1; height:100%;"></div> 284 285 286 <div class="sideMenuContainer" id="divLoginConnected"> 287 <div class="sideMenu"> 288 <div class="sideMenu-heading" id="divLoginInformation">Information</div> 289 <label><span id="divLoginUser">User</span><span id="divLoginConnectedUserName"></span></label> 290 <button id="buttonDisconnect" class="button" style="margin-top:20px;" onClick="tryDisconnect();">DISCONNECT</button> 291 </div> 292 </div> 293 294 <div class="sideMenuContainer" id="divLoginNotConnected"> 295 <div class="sideMenu"> 296 <div class="sideMenu-heading" id="divLoginConnect">Connect</div> 297 <label><span id="divLoginUser2">User</span><input id="inputUser" type="text" class="input-field" value="" /></label> 298 <label><span id="divLoginPassword">Password</span><input id="inputPassword" type="password" class="input-field" value="" /></label> 299 300 <button id="buttonConnect" class="button" style="margin-top:20px;" onClick="tryConnect();">CONNECT</button> 301 <label><span id="errorConnect" style="color:red;display:none;">Connection error.</span></label> 302 303 <div class="sideMenu-heading" id="divLoginNewAccount">Create new account</div> 304 <label><span id="divLoginNewUser">User</span><input id="inputNewUser" type="text" class="input-field" value="" onkeydown="return /^\w+$/i.test(event.key)"/></label> 305 <label><span id="divLoginPassword1">Password</span><input id="inputPassword1" type="password" class="input-field" value="" /></label> 306 <label><span id="divLoginPassword2">Password repeat</span><input id="inputPassword2" type="password" class="input-field" value="" /></label> 307 308 <button id="buttonCreateAccount" class="button" style="margin-top:20px;" onClick="tryCreateAccount();">CREATE ACCOUNT</button> 309 <label><span id="errorCreateAccountUsr" style="color:red;display:none;">Error creating account.</span></label> 310 <label><span id="errorCreateAccountUsrLength" style="color:red;display:none;">Error creating account : minimum user name length is 4.</span></label> 311 <label><span id="errorCreateAccountPassLength" style="color:red;display:none;">Error creating account : password minimum length is 4.</span></label> 312 <label><span id="errorCreateAccountPass" style="color:red;display:none;">Error creating account : passwords are not identical.</span></label> 313 314 </div> 315 </div> 316 317 <div class="sideMenuContainer" id="divSearchConnected"> 318 <div class="sideMenu" style="max-width:5000px !important;width:90% !important;"> 319 <div id="topSearch" class="topSearch"> 320 <input type="text" id="searchInput" class="searchInput"></input> 321 <img src="/img/quiz2024/menu_search.png" id="searchButton" class="searchButton" onClick="doSearch();"/> 322 <button onclick="showOwnQuiz();" class="bluebutton" style="margin-left:30px;" id="buttonShowOwn">list your own quiz</button> 323 </div> 324 <div id="divMainSearch"> 325 <div id="tableSearch"></div> 326 </div> 327 </div> 328 </div> 329 330 <div class="sideMenuContainer" id="divOptionsConnected"> 331 <div class="sideMenu"> 332 <div class="sideMenu-heading" id="divGeneral">General</div> 333 <label><span id="language">Language</span><select class="select-field menuSelect" id="ddLanguage"> 334 <option id="optionEnglish" value="en">English</option> 335 <option id="optionFrench" value="fr">Français</option> 336 <option id="optionSpanish" value="es">Español</option> 337 <option id="optionPortuguese" value="es">Português</option> 338 </select></label> 339 <div class="sideMenu-heading" id="divOptionsQuiz">Quiz</div> 340 <label><span id="tiles">Tiles</span><select class="select-field menuSelect" id="ddTiles"> 341 <option value="osm">OpenStreeMap</option> 342 <option value="esri">ESRI</option> 343 <option value="cartodb">CartoDB</option> 344 <option value="esrivide" id="emptyESRI">ESRI vide</option> 345 <option value="cartodbvide" id="emptyCartodb">CartoDB vide</option> 346 <option value="gmaps">Google maps</option> 347 </select></label> 348 <label><span id="gMapLng">Google Map Language</span><select class="select-field menuSelect" id="ddMapLng"> 349 <option value="af">Afrikaans</option> 350 <option value="sq">Albanian</option> 351 <option value="am">Amharic</option> 352 <option value="ar">Arabic</option> 353 <option value="hy">Armenian</option> 354 <option value="az">Azerbaijani</option> 355 <option value="eu">Basque</option> 356 <option value="be">Belarusian</option> 357 <option value="bn">Bengali</option> 358 <option value="bs">Bosnian</option> 359 <option value="bg">Bulgarian</option> 360 <option value="my">Burmese</option> 361 <option value="ca">Catalan</option> 362 <option value="zh">Chinese</option> 363 <option value="zh-CN">Chinese (Simplified)</option> 364 <option value="zh-HK">Chinese (Hong Kong)</option> 365 <option value="zh-TW">Chinese (Traditional)</option> 366 <option value="hr">Croatian</option> 367 <option value="cs">Czech</option> 368 <option value="da">Danish</option> 369 <option value="nl">Dutch</option> 370 <option value="en">English</option> 371 <option value="en-AU">English (Australian)</option> 372 <option value="en-GB">English (Great Britain)</option> 373 <option value="et">Estonian</option> 374 <option value="fa">Farsi</option> 375 <option value="fi">Finnish</option> 376 <option value="fil">Filipino</option> 377 <option value="fr">French</option> 378 <option value="fr-CA">
378French (Canada)</option> 379 <option value="gl">Galician</option> 380 <option value="ka">Georgian</option> 381 <option value="de">German</option> 382 <option value="el">Greek</option> 383 <option value="gu">Gujarati</option> 384 <option value="iw">Hebrew</option> 385 <option value="hi">Hindi</option> 386 <option value="hu">Hungarian</option> 387 <option value="is">Icelandic</option> 388 <option value="id">Indonesian</option> 389 <option value="it">Italian</option> 390 <option value="ja">Japanese</option> 391 <option value="kn">Kannada</option> 392 <option value="kk">Kazakh</option> 393 <option value="km">Khmer</option> 394 <option value="ko">Korean</option> 395 <option value="ky">Kyrgyz</option> 396 <option value="lo">Lao</option> 397 <option value="lv">Latvian</option> 398 <option value="lt">Lithuanian</option> 399 <option value="mk">Macedonian</option> 400 <option value="ms">Malay</option> 401 <option value="ml">Malayalam</option> 402 <option value="mr">Marathi</option> 403 <option value="mn">Mongolian</option> 404 <option value="ne">Nepali</option> 405 <option value="no">Norwegian</option> 406 <option value="pl">Polish</option> 407 <option value="pt">Portuguese</option> 408 <option value="pt-BR">Portuguese (Brazil)</option> 409 <option value="pt-PT">Portuguese (Portugal)</option> 410 <option value="pa">Punjabi</option> 411 <option value="ro">Romanian</option> 412 <option value="ru">Russian</option> 413 <option value="sr">Serbian</option> 414 <option value="si">Sinhalese</option> 415 <option value="sk">Slovak</option> 416 <option value="sl">Slovenian</option> 417 <option value="es">Spanish</option> 418 <option value="es-419">Spanish (Latin America)</option> 419 <option value="sw">
419Swahili</option> 420 <option value="sv">Swedish</option> 421 <option value="ta">Tamil</option> 422 <option value="te">Telugu</option> 423 <option value="th">Thai</option> 424 <option value="tr">Turkish</option> 425 <option value="uk">Ukrainian</option> 426 <option value="ur">Urdu</option> 427 <option value="uz">Uzbek</option> 428 <option value="vi">Vietnamese</option> 429 <option value="zu">Zulu</option> 430 </select></label> 431 432 <table> 433 <tr><td><input type="checkbox" id="chkHard"></input></td><td><span id="optionHardDifficulty">Hard difficulty</span></td></tr> 434 <tr><td><input type="checkbox" id="chkTimer"></input></td><td><span id="optionTimer">Timer</span></td></tr> 435 </table> 436 437 <button id="saveOptions" class="button" style="margin-top:20px;" onClick="trySaveOptions();">SAVE OPTIONS</button> 438 <label><span id="errorSaveOptions" style="color:red;display:none;">Error saving options, check if you're connected.</span></label> 439 </div> 440 </div> 441 442 <div class="sideMenuContainer" id="divOptionsNotConnected"> 443 <div class="sideMenu"> 444 <div class="sideMenu-heading" id="divOptions2">Options</div> 445 <label><span id="language2">Language</span><select class="select-field menuSelect" id="ddLanguage2"> 446 <option id="optionEnglish2" value="en">English</option> 447 <option id="optionFrench2" value="fr">Français</option> 448 <option id="optionSpanish2" value="es">Español</option> 449 <option id="optionPortuguese2" value="es">Português</option> 450 </select></label> 451 <button id="saveOptionsNotConnected" class="button" style="margin-top:20px;" onClick="doTranslate();">SAVE OPTIONS</button> 452 </div> 453 </div> 454 455 <div class="sideMenuContainer" id="divEditorConnected"> 456 <div class="sideMenu"> 457 <button class='redbutton' onClick='window.open("/quiz2024/editor/edit_cities.html?v=1","_blank")' style='margin:5px;' id="cityQuizEditor">City quiz editor</button> 458 <button class='redbutton' onClick='window.open("/quiz2024/editor/select_regions.html","_blank")' style='margin:5px;' id="regionQuizSelector">Region custom selection (not available yet)</button> 459 <button class='redbutton' onClick='window.open("/quiz2024/editor/edit_usa_areacodes.html","_blank")' style='margin:5px;' id="usaAreacodeEditor">USA area codes memorisation</button> 460 </div> 461 </div> 462 463 <div class="sideMenuContainer" id="divHelp"> 464 <div class="sideMenu" style="margin-top:25px; margin-bottom:30px; width:80%;max-width:5000px !important;align-self:center; height:100%; border-style:none;"> 465 <div class="sideMenu-heading" style="margin-top:0.5em;"><span id="help0">The main menu</span> <img src='/img/quiz2024/mainmap.png' class="smallimg"/></div> 466 <span id="help01">The main menu shows the map.</span> 467 <span id="help02">Clicking a country on the map will display the list of standard quiz for this country.</span> 468 <span id="help03">If you have an account and are connected, it will also display your favorite quiz.</span> 469 <span ><img src='/img/quiz2024/view.png' class="smallimg"/> <span id="help04">If you have an account and are connected, you can use the eye button next to the flag to see additional options.
469</span></span> 470 471 <div class="sideMenu-heading" id="help1" style="margin-top:2em;">The available quiz</div> 472 <span id="help10">All countries have region and city quiz.</span> 473 <span id="help11">Some countries such as japan or thailand have the option to have the region quiz in non latin alphabet.</span> 474 <span id="help12">Some countries have telephone or post code quiz.</span> 475 <span id="help13">There are a few very specific quiz such as highway shields for us highways, road names for spain, electric pole geolocation for taiwan...</span> 476 477 <div class="sideMenu-heading" style="margin-top:2em;"><span id="help2">The login menu </span><img src='/img/quiz2024/menu_login.png' class="smallimg"/></div> 478 <span id="help21">Enables you to create a new account or connect to an existing account.</span> 479 <span id="help22">Accounts give you access to advanced functionnalities : options, favorites and quiz editor.</span> 480 <span id="help23">Accounts are free and do not require an email address.It also means there is no password reset/recovery.</span> 481 482 <div class="sideMenu-heading" id="help3" style="margin-top:2em;">Favorites</div> 483 <span><img src='/img/quiz2024/view.png' class="smallimg"/><span id="help31">Can be added/removed from the main menu by using the eye button, or from the search menu.</span></span> 484 <span><img src='/img/quiz2024/view.png' class="smallimg"/><span id="help32">Can be renamed from the main menu by using the eye button, the new name will only apply to your favorite, it does not change the quiz name for anyone else.</span></span> 485 <span id="help33">Country favorites appear in the menu when the corresponding country is selected. World favorites appear on the main menu when no country is selected.</span> 486 487 488 <div class="sideMenu-heading" style="margin-top:2em;"><span id="help4">The search menu </span><img src='/img/quiz2024/menu_search.png' class="smallimg"/></div> 489 <span id="help41">Enables you to search for custom quiz created by yourself or other users.</span> 490 <span id="help42">Custom quiz can be played, added to your favorites, and city quiz can be copied in the editor.</span> 491 <span id="help43">All user created quiz are public and accessible via the search button.</span> 492 493 <div class="sideMenu-heading" style="margin-top:2em;"><span id="help5">The option menu </span><img src='/img/quiz2024/menu_options.png' class="smallimg"/></div> 494 <span id="help51">Language applies to all pages of the quiz section.</span> 495 <span id="help52">Quiz options will apply every time you start a quiz.</span> 496 <span id="help53">Hard difficulty applies to region quiz and hides the previous answers.</span> 497 <span id="help54">I recommend combining "borders = none" with hard difficulty and google map style to train for geoguessr.</span> 498 499 <div class="sideMenu-heading" style="margin-top:2em;"><span id="help6">The city quiz editor </span><img src='/img/quiz2024/menu_edit.png' class="smallimg"/></div> 500 <span id="help61">Editing a quiz created by yourself will update it. Save button will be named "update quiz".</span> 501 <span id="help62">Editing a standard quiz or a quiz created by someone else will create a copy. Save button will be named "create new quiz".</span> 502 <span id="help63">The table on the left and the map on the right are connected, changes can be made in either, they will be applied in both.</span> 503 <span id="help64">All markers on the map can be selected to see the corresponding line, and dragged to change their position.</span> 504 <span id="help65">For storage capacity reasons, user created quiz are limited to 100 items.</span> 505 <span id="help66">The rank column is optional, it decides the order in which the cities are stored in database.</span>
506 <span id="help67">Copy/pasting large data from excel or google sheet kinda works depending on your browser, if you have at least 3 valid columns in your copied data.</span> 507 <span id="help68">You should be able to use non latin alphabets in the names.</span> 508 509 </div> 510 </div> 511 512 513 514 515 516 </div> 517 518 519 <!---------------------------------------------------------image menu----------------------------------------------------------------------------------> 520
520<script> 521 /* 522 function hoverLogin(element) { element.setAttribute('src', '/img/quiz2024/menu_login_h.png'); } 523 function unhoverLogin(element) { element.setAttribute('src', '/img/quiz2024/menu_login.png'); } 524 function hoverSearch(element) { element.setAttribute('src', '/img/quiz2024/menu_search_h.png'); } 525 function unhoverSearch(element) { element.setAttribute('src', '/img/quiz2024/menu_search.png'); } 526 function hoverOptions(element) { element.setAttribute('src', '/img/quiz2024/menu_options_h.png'); } 527 function unhoverOptions(element) { element.setAttribute('src', '/img/quiz2024/menu_options.png'); }*/ 528 529 function hoverHome(element) { element.setAttribute('src', '/img/quiz2024/menu_home_h.png'); } 530 function unhoverHome(element) { element.setAttribute('src', '/img/quiz2024/menu_home.png'); } 531 function hoverEdit(element) { element.setAttribute('src', '/img/quiz2024/menu_edit_h.png'); } 532 function unhoverEdit(element) { element.setAttribute('src', '/img/quiz2024/menu_edit.png'); } 533 </script>
533 534 535 <!--------------------------------------------------------------MAP LOGIC------------------------------------------------------------------------> 536
536<script> 537 function drawmapCities() { 538 539 //map 540 mapCities = L.map("mapCities", {minZoom: 2, maxZoom : 15, zoomControl: false}).setView([0,0], 4); 541 542 //tiles 543 var newAttribution = 'Tiles © Esri'; 544 newTilesURL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}'; 545 newTiles = L.tileLayer(newTilesURL, { newAttribution }); 546 newTiles.addTo(mapCities); 547 548 //zoom 549 mapCities.options.maxZoom = 8; 550 mapCities.setZoom(2); 551 mapCities.setMaxBounds([[-85, -300.0],[85, 360.0]]); 552 553 //controls and json 554 //addFullscreenButton(); 555 mapCities.doubleClickZoom.disable(); 556 loadJSON(); 557 } 558 559 560 async function loadJSON() { 561 562 //variables 563 layerList = {}; 564 565 566 const response = await fetch("/geojson/world.geojson"); 567 const json = await response.json(); 568 if (geoLayer != undefined) { geoLayer.remove(mapCities);} 569 570 geoLayer = L.geoJSON(json, 571 {onEachFeature: function (feature, layer) { 572 layerList[feature.properties.ISO_A3] = layer; 573 layer.on({click : function (e) {onClickWorld(e);}}); 574 layer.setStyle({ fillColor: 'white', weight: 1, opacity: 1,color: 'black',fillOpacity: 0.1}); 575 layer.bindTooltip(feature.properties.NAME_EN, {closeButton: false, sticky: true, offset: L.point(0, -20),className: 'noArrow'}); 576 }}); 577 geoLayer.addTo(mapCities);
578 mapCities.setView([10, 0], 3); 579 } 580 581 function onClickWorld(e) { 582 var iso3 = e.target.feature.properties.ISO_A3; 583 584 if (iso3 == globalSelectedCountry) { 585 soundClick.play(); 586 highlight("world"); 587 loadCountry("world"); 588 globalSelectedCountry = "world"; 589 } 590 591 else { 592 if (iso3 != undefined) { 593 soundClick.play(); 594 highlight(iso3); 595 loadCountry(iso3); 596 globalSelectedCountry = iso3; 597 } 598 } 599 } 600 601 function highlight(iso3_code) { 602 for(var propertyName in layerList) { 603 layerList[propertyName].setStyle({ fillColor: 'white', weight: 1, opacity: 1,color: 'black',fillOpacity: 0.1}); 604 } 605 606 if (iso3_code != "world") { layerList[iso3_code].setStyle({ fillColor: 'green', weight: 2, opacity: 1,color: 'black',fillOpacity: 0.7}); } 607 608 609 } 610 611 function loadCountry(iso) { 612 currentIso = iso; 613 var onClickStr = ""; 614 615 //favorite list 616 var favCountryList = []; 617 var favCountryListStandard = []; 618 var strFav = ""; 619 620 //translations 621 let playTranslate = translation("button_play"); 622 let editTranslate = translation("button_edit"); 623 let favCTranslate = translation("button_add_country_fav"); 624 let favWTranslate = translation("button_add_world_fav"); 625 let renameTranslate = translation("button_rename"); 626 let removeTranslate = translation("button_remove"); 627 628 for (let i=0;i<favListCustom.length;i++) { 629 if (favListCustom[i].iso3 == iso) { favCountryList.push(favListCustom[i]);} 630 } 631 632 for (let i=0;i<favListStandard.length;i++) { 633 if (favListStandard[i].iso3 == iso) { favCountryListStandard.push(favListStandard[i]);} 634 } 635 636 if (favCountryList.length > 0 || favCountryListStandard.length > 0) { 637 strFav = "<ul class='treeclass'>"; 638 strFav += "<li><details open><summary class='countryName'>Favorites</summary>" 639 strFav += "<ul>" 640 for (let i=0;i<favCountryList.length;i++) { 641 strFav += "<li><span class='highlight' onClick='playCustom("+favCountryList[i].quizId+")'>"+ favCountryList[i].title +"</span>"; 642 strFav += "<button class='greenbutton treebutton hidden' onClick='editFav("+favCountryList[i].quizId+");'>"+editTranslate+"</button>"; 643 strFav += "<button class='bluebutton treebutton hidden' onClick='showRenameFav(this,"+favCountryList[i].id+");'>"+renameTranslate+"</button>"; 644 strFav += "<button class='redbutton treebutton hidden' onClick='removeCustomFav("+favCountryList[i].id+");'>"+removeTranslate+"</button></li>"; 645 } 646 for (let i=0;i<favCountryListStandard.length;i++) { 647 if (favCountryListStandard[i].type == 'city') { 648 if (favCountryListStandard[i].admlevel == 0) {onClickStr = "playCity(\""+favCountryListStandard[i].gid+"\",0,undefined,undefined);"} 649 if (favCountryListStandard[i].admlevel == 1) {onClickStr = "playCity(\""+favCountryListStandard[i].gid.substring(0,3)+"\",1,\""+favCountryListStandard[i].gid+"\",undefined);"} 650 strFav += "<li><span class='highlight' onClick="+onClickStr+">"+ favCountryListStandard[i].title +"</span>"; 651 strFav += "<button class='greenbutton treebutton hidden' onClick='editStandard(\"city\",\""+favCountryListStandard[i].gid.substring(0,3)+"\","+favCountryListStandard[i].admlevel+",\""+favCountryListStandard[i].gid+"\",\""+favCountryListStandard[i].gid+"\" );'>"+editTranslate+"</button>"; //function editStandard(type,iso,admlevel,gid1,gid2) 652 strFav += "<button class='bluebutton treebutton hidden' onClick='showRenameStandardFav(this,"+favCountryListStandard[i].id+");'>"+renameTranslate+"</button>"; 653 strFav += "<button class='redbutton treebutton hidden' onClick='removeStandardFav("+favCountryListStandard[i].id+");'>"+removeTranslate+"</button></li>"; 654 } 655 656 if (favCountryListStandard[i].type == 'region') { 657 if (favCountryListStandard[i].admlevel == 0) {onClickStr = "playRegion(\""+favCountryListStandard[i].gid+"\",0,undefined,undefined,1);"} //function playRegion(iso,admlevel,id1,id2,latinAlphabet) 658 if (favCountryListStandard[i].admlevel == 1) {onClickStr = "playRegion(\""+favCountryListStandard[i].gid.substring(0,3)+"\",1,\""+favCountryListStandard[i].gid+"\",undefined,1);"} 659 strFav += "<li><span class='highlight' onClick="+onClickStr+">"+ favCountryListStandard[i].title +"</span>"; 660 strFav += "<button class='bluebutton treebutton hidden' onClick='showRenameStandardFav(this,"+favCountryListStandard[i].id+");'>"+renameTranslate+"</button>"; 661 strFav += "<button class='redbutton treebutton hidden' onClick='removeStandardFav("+favCountryListStandard[i].id+");'>"+removeTranslate+"</button></li>"; 662 } 663 664 } 665 strFav+="</ul></details></li>" 666 strFav += "</ul>"; 667 668 } 669 670 //official list 671 let str = "<div class='topleft'><img src='/img/flags/"+iso.toLowerCase()+".png' alt='flag' class='flagImg'/><img src='/img/quiz2024/view.png' alt='view' class='viewbutton' id='buttonView' title='"+translation("buttonView_tooltip")+"' onClick='toggleView();'></div>"; 672 str += strFav; 673 674 if ( iso == "world") { 675 676 str+= "<ul class='treeclass'>"; 677 str += "<li>
677<details open><summary class='countryName' >World</summary>"; 678 str += "<ul>" 679 680 for (let i=0;i<special.length;i++) { 681 if (special[i].iso3 == iso) { 682 onClickStr = "playSpecial(\""+special[i].id+"\");" 683 let strName = special[i][lng]; 684 685 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 686 } 687 } 688 689 str+="</ul></details></li>"; 690 str += "</ul>"; 691 } 692 693 694 if (iso != "world") { 695 696 let cTree = tree[iso]; 697 str+= "<ul class='treeclass'>"; 698 str += "<li><details open><summary class='countryName' >"+ cTree[lng]+"</summary>" 699 str += "<ul>" 700 for (let i=0;i<cTree.quizList.length;i++) { 701 702 if (cTree.quizList[i].type == "cityStandard") { 703 onClickStr="playCity(\""+iso+"\",0,undefined,undefined);"; //function playCity(iso,admlevel,id1,id2) 704 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("city") +"</span>"; 705 str += "<button class='greenbutton treebutton hidden' onClick='editStandard(\"city\",\""+iso+"\",0,undefined,undefined);'>"+editTranslate+"</button>"; 706 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"city\",\""+iso+"\",\""+iso+"\",0,undefined,undefined,0);'>"+favCTranslate+"</button>"; 707 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"city\",\""+iso+"\",\"world\",0,undefined,undefined,0);'>"+favWTranslate+"</button></li>"; 708 } 709 if (cTree.quizList[i].type == "regionStandard") { 710 if (cTree.quizList[i].hasOwnProperty("nonLatin")) { 711 onClickStr="playRegion(\""+iso+"\",0,undefined,undefined,0);"; //function playRegion(iso,admlevel,id1,id2,latinAlphabet) 712 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("region") +translation(cTree.alphabet_name) +"</span>"; 713 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\""+iso+"\",0,undefined,undefined,1);'>"+favCTranslate+"</button>"; 714 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\"world\",0,undefined,undefined,1);'>"+favWTranslate+"</button></li>"; 715 716 } 717 else { 718 onClickStr="playRegion(\""+iso+"\",0,undefined,undefined,1);"; //function playRegion(iso,admlevel,id1,id2,latinAlphabet) 719 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("region") +"</span>"; 720 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\""+iso+"\",0,undefined,undefined,0);'>"+favCTranslate+"</button>"; 721 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\"world\",0,undefined,undefined,0);'>"+favWTranslate+"</button></li>"; 722 }} 723 724 } 725 for (let i=0;i<phone.length;i++) { 726 if (phone[i].iso3 == iso) { 727 onClickStr = "playAreacode(\""+phone[i].iso2+"\");" 728 let strName = translation("phone"); 729 if (phone[i].hasOwnProperty("num")) {strName += " "+phone[i].num} 730 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 731 } 732 } 733 for (let i=0;i<post.length;i++) { 734 if (post[i].iso3 == iso) { 735 onClickStr = "playAreacode(\""+post[i].iso2+"\");" 736 let strName = translation("postcode"); 737 if (post[i].hasOwnProperty("num")) {strName += " "+post[i].num} 738 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 739 } 740 } 741 742 for (let i=0;i<road.length;i++) { 743 if (road[i].iso3 == iso) { 744 onClickStr = "playRoad(\""+road[i].iso2+"\");" 745 let strName = "Roads"; //translation("road"); 746 if (road[i].hasOwnProperty("num")) {strName += " "+road[i].num} 747 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 748 } 749 } 750 751 for (let i=0;
751i<toponomy.length;i++) { 752 if (toponomy[i].iso3 == iso) { 753 onClickStr = "playToponomy(\""+toponomy[i].iso2+"\");" 754 let strName = "suffix"; 755 if (toponomy[i].hasOwnProperty("string")) {strName += " "+toponomy[i].string} 756 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 757 } 758 } 759 760 for (let i=0;i<car.length;i++) { 761 if (car[i].iso3 == iso) { 762 onClickStr = "playCar(\""+toponomy[i].iso2+"\");" 763 let strName = "car meta"; 764 if (car[i].hasOwnProperty("string")) {strName += " "+car[i].string} 765 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 766 } 767 } 768 769 for (let i=0;i<special.length;i++) { 770 if (special[i].iso3 == iso) { 771 onClickStr = "playSpecial(\""+special[i].id+"\");" 772 let strName = special[i][lng]; 773 774 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ strName +"</span></li>" 775 } 776 } 777 778 if (isObjectEmpty(cTree.divisionList) == false) { 779 let isFirstRegion = true; 780 for (region in cTree.divisionList) { 781 if (isFirstRegion) { str+="<li style='margin-top:5px; margin-left:8px;margin-bottom:5px;'><details><summary>"+ cTree.divisionList[region].name + "</summary><ul>"; isFirstRegion = false;} 782 else { str+="<li style='margin-left:8px; margin-bottom:5px;'><details><summary>"+ cTree.divisionList[region].name + "</summary><ul>"; } 783 784 785 for (let i=0;i<cTree.divisionList[region].quizList.length;i++) { 786 //cities 787 if (cTree.divisionList[region].quizList[i].type == "cityStandard") { 788 onClickStr="playCity(\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined);" //function playCity(iso,admlevel,id1,id2) 789 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("city") +"</span>"; 790 str += "<button class='greenbutton treebutton hidden' onClick='editStandard(\"city\",\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined);'>"+editTranslate+"</button>"; 791 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"city\",\""+iso+"\",\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,0);'>"+favCTranslate+"</button>"; 792 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"city\",\""+iso+"\",\"world\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,0);'>"+favWTranslate+"</button></li>"; 793 } 794 //regions 795 if (cTree.divisionList[region].quizList[i].type == "regionStandard") { 796 if (cTree.quizList[i].hasOwnProperty("nonLatin")) { 797 onClickStr="playRegion(\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,0);" // function playRegion(iso,admlevel,id1,id2,latinAlphabet) 798 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("region") +translation(cTree.alphabet_name) +"</span>"; 799 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,1);'>"+favCTranslate+"</button>"; 800 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\"world\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,1);'>"+favWTranslate+"</button></li>"; 801 802 } 803 else { 804 onClickStr="playRegion(\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,1);" // function playRegion(iso,admlevel,id1,id2,latinAlphabet) 805 str += "<li><span class='highlight' onClick='"+onClickStr+"'>"+ translation("region") +"</span>"; 806 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\""+iso+"\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,0);'>"+favCTranslate+"</button>"; 807 str += "<button class='bluebutton treebutton hidden' onClick='addStandardFav(\"region\",\""+iso+"\",\"world\",1,\""+cTree.divisionList[region].GID_1+"\",undefined,0);'>"+favWTranslate+"</button></li>"; 808 } 809 } 810 } 811 str+="</ul></details></li>" 812 } 813 814 } 815 816 str+="</ul></details></li>" 817 str += "</ul>"; 818 } 819 820 //console.log(str); 821 822 document.getElementById("treeview").innerHTML = str; 823 isViewActive = false; 824 825 826 827 } 828 829function isObjectEmpty(obj) { 830 831 for (const prop in obj) { 832 if (Object.hasOwn(obj, prop)) { 833 return false; 834 } 835 } 836 return true; 837} 838 839 async function loadDataJson() { 840 841 var mainTreeFile = "./tree.json?v="+Date.now(); 842 var response = await fetch(mainTreeFile, {cache: "reload"}); 843 tree = await response.json(); 844 845 var phoneFile = "./phoneList.json?v="+Date.now(); 846 response = await fetch(phoneFile, {cache: "reload"}); 847 phone = await response.json(); 848 849 var postFile = "./postList.json?v="+Date.now(); 850 response = await fetch(postFile, {cache: "reload"}); 851 post = await response.json(); 852 853 var roadFile = "./roadList.json?v="+Date.now(); 854 response = await fetch(roadFile, {cache: "reload"}); 855 road = await response.json(); 856 857 var toponomyFile = "./toponomyList.json?v="+Date.now(); 858 response = await fetch(toponomyFile, {cache: "reload"}); 859 toponomy = await response.json(); 860 861 var carFile = "./carList.json?v="+Date.now(); 862 response = await fetch(carFile, {cache: "reload"}); 863 car = await response.json(); 864 865 var specialFile = "./specialList.json?v="+Date.now(); 866 response = await fetch(specialFile, {cache: "reload"}); 867 special = await response.json(); 868 869 response = await fetch("./index_translate.json?v="+Date.now(), {cache: "reload"}); 870 trans = await response.json(); 871 872 } 873</script>
873 874<!-------------------------------------------------------TREE BUTTONS---------------------------------------------------------------------------->
875<script> 876function playRegion(iso,admlevel,id1,id2,latinAlphabet) { 877 let filter = "GID_0"; 878 let regionList = iso; 879 if (id1!=undefined) { filter="GID_1";regionList=id1;} 880 if (id2!=undefined) { filter="GID_2";regionList=id2;} 881 window.open("/quiz2024/adm.php?geojson=%2Fgeojson%2Fprov%2Fgadm41_"+iso+"_"+(admlevel+1)+".json&filter="+filter+"&levelquiz="+(admlevel+1)+"®ionlist="+regionList+"&latinalphabet="+latinAlphabet+"&language="+lng+"&tile="+defaultTiles+"&border="+defaultBorder+"&difficulty="+defaultDifficulty+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 882 // https://super-duper.fr/quiz/adm.php?geojson=%2Fgeojson%2Fprov%2Fgadm41_AFG_1.json&filter=GID_0&levelquiz=1®ionlist=AFG&latinalphabet=1&tile=osm 883 // https://super-duper.fr/quiz/adm.php?geojson=%2Fgeojson%2Fprov%2Fgadm41_AFG_2.json&filter=GID_1&levelquiz=2®ionlist=AFG.7_1%7CAFG.11_1%7CAFG.12_1%7CAFG.15_1%7CAFG.23_1&latinalphabet=1&tile=osm 884}// https://super-duper.fr/quiz2024/adm.php?geojson=%2Fgeojson%2Fprov%2Fgadm41_CAN_1.json&filter=GID_0&levelquiz=1®ionlist=undefined&latinalphabet=1&language=fr&tile=gmaps&border=thin&difficulty=false&timer=false 885 886function playCity(iso,admlevel,id1,id2) { 887 window.open("/quiz2024/cities.php?type=standard&iso3="+iso+"&admlevel="+admlevel+"&id1="+id1+"&id2="+id2+"&language="+lng+"&tiles="+defaultTiles+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 888 889} 890 891function playAreacode(iso2) { 892 window.open("/quiz2024/areacodes.php?country="+iso2+"&language="+lng+"&tile="+defaultTiles+"&border="+defaultBorder+"&difficulty="+defaultDifficulty+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 893 894} 895 896function playRoad(iso2) { 897 window.open("/quiz2024/roads.php?country="+iso2+"&language="+lng+"&tile="+defaultTiles+"&border="+defaultBorder+"&difficulty="+defaultDifficulty+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 898} 899 900function playToponomy(iso2) { 901 window.open("/quiz2024/suffix.php?iso2="+iso2+"&language="+lng+"&tiles="+defaultTiles+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 902//iso2=HUN&language=en&tiles=gmaps&timer=false&gmaplng=en 903} 904 905function playSpecial(id) { 906 let lnk = special[id].link; 907 let specialOptions = ""; 908 if (special[id].hasOwnProperty("options")) { 909 for (let i=0;i<special[id].options.length;i++) 910 { 911 specialOptions+= "&"+special[id].options[i].name+"="+special[id].options[i].value; 912 } 913 914 } 915 window.open(lnk+"?id="+id+"&language="+lng+"&tile="+defaultTiles+"&border="+defaultBorder+"&difficulty="+defaultDifficulty+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng+specialOptions, "_blank"); 916} 917 918async function playCustom(qid) { 919 let res = await fetch("/quiz2024/sqldatabaseQ2024.php?query=getquiztype&quizid="+encodeURIComponent(qid)); 920 var type = await res.text(); 921 let typeOk = type.trim(); 922 //let type = res[0]; 923 if (typeOk == "city") { 924 window.open("/quiz2024/cities.php?type=custom&quizid="+qid+"&language="+lng+"&tiles="+defaultTiles+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 925 } 926 927 if (typeOk == "area") { 928 window.open("/quiz2024/adm.php?type=custom&quizid="+qid+"&language="+lng+"&tile="+defaultTiles+"&timer="+defaultTimer+"&gmaplng="+defaultgMapLng, "_blank"); 929 } 930 931 932} 933 934 935function editFav(id) { 936 window.open("/quiz2024/editor/edit_cities.html?type=custom&quizid="+id, "_blank"); 937} 938 939async function deleteQuiz(quizId,rowId) { 940 let connection = await checkConnect(); 941 if (connection.isConnected) { 942 await deleteQuizDB(connection.userName,connection.session,quizId); 943 } 944 tableSearch.deleteRow(rowId); 945} 946 947async function removeCustomFav(id) { 948 let connection = await checkConnect(); 949 if (connection.isConnected) { 950 await removeCustomFavorite(connection.userName,connection.session,id); 951 favListCustom = await getCustomFavorites(connection.userName,connection.session); 952 loadCountry(currentIso); 953 toggleView(); 954 } 955} 956 957async function removeStandardFav(id) {
958 let connection = await checkConnect(); 959 if (connection.isConnected) { 960 await removeStandardFavorite(connection.userName,connection.session,id); 961 favListStandard = await getStandardFavorites(connection.userName,connection.session); 962 loadCountry(currentIso); 963 toggleView(); 964 } 965} 966 967 968 969async function addStandardFav(type,iso3Quiz,iso3Fav,admlevel,gid1,gid2,nl_alphabet) { //('city',\""+iso+"\",0,undefined,undefined) 970 971 //gid 972 let gid; 973 if(admlevel == 0) {gid=iso3Quiz;} 974 if(admlevel == 1) {gid=gid1;} 975 //if(admlevel == 2) {gid=gid2;} 976 977 //title 978 let title; 979 if(type =="city") { 980 if (admlevel == 0) { title="cities "+tree[iso3Quiz].name;} 981 if (admlevel == 1) { title="cities "+tree[iso3Quiz].divisionList[gid1].name;} 982 } 983 if(type =="region") { 984 if (admlevel == 0) { title="regions "+tree[iso3Quiz].name;} 985 if (admlevel == 1) { title="regions "+tree[iso3Quiz].divisionList[gid1].name;} 986 } 987 988 let connection = await checkConnect(); 989 if (connection.isConnected) { 990 await saveStandardFavorite(connection.userName,connection.session,type,iso3Fav,admlevel,gid,title,nl_alphabet); 991 favListCustom = await getCustomFavorites(connection.userName,connection.session); 992 favListStandard = await getStandardFavorites(connection.userName,connection.session); 993 loadCountry(currentIso); 994 toggleView(); 995 } 996 997} 998 999function editStandard(type,iso,admlevel,gid1,gid2) { 1000 1001 //gid 1002 let gid; 1003 if(admlevel == 0) {gid=iso;} 1004 if(admlevel == 1) {gid=gid1;} 1005 1006 window.open("/quiz2024/editor/edit_cities.html?type=standard&iso3="+iso+"&admlevel="+admlevel+"&gid="+gid, "_blank"); 1007} 1008 1009async function removeCustomFav(id) { 1010 let connection = await checkConnect(); 1011 if (connection.isConnected) { 1012 await removeCustomFavorite(connection.userName,connection.session,id); 1013 favListCustom = await getCustomFavorites(connection.userName,connection.session); 1014 loadCountry(currentIso); 1015 toggleView(); 1016 } 1017} 1018 1019 1020function showRenameFav(refNode,id) { 1021 1022 let fChild = refNode.parentNode.firstChild; 1023 1024 let newInput= document.createElement("input"); 1025 newInput.type = "text"; 1026 newInput.value = fChild.innerHTML; 1027 1028 newInput.setAttribute('onkeydown', "renameCustomFav(this,"+id+");"); //newInput.setAttribute('onfocusout', "renameCustomFav(this,"+id+");"); 1029 1030 refNode.parentNode.removeChild(fChild); 1031 refNode.parentNode.insertBefore(newInput, refNode.parentNode.firstChild); 1032 newInput.focus(); 1033} 1034 1035function showRenameStandardFav(refNode,id) { 1036 1037 let fChild = refNode.parentNode.firstChild; 1038 1039 let newInput= document.createElement("input"); 1040 newInput.type = "text"; 1041 newInput.value = fChild.innerHTML; 1042 newInput.setAttribute('onkeydown', "renameStandardFav(this,"+id+");"); //newInput.setAttribute('onfocusout', "renameCustomFav(this,"+id+");"); 1043 1044 //remove title 1045 refNode.parentNode.removeChild(fChild); 1046 refNode.parentNode.insertBefore(newInput, refNode.parentNode.firstChild); 1047 newInput.focus(); 1048} 1049 1050 1051async function renameCustomFav(input,id) { 1052 if(event.key === 'Enter') { 1053 let connection = await checkConnect(); 1054 if (connection.isConnected) { 1055 await renameCustomFavorite(connection.userName,connection.session,input.value,id); 1056 input.remove(); 1057 favListCustom = await getCustomFavorites(connection.userName,connection.session); 1058 loadCountry(currentIso); 1059 toggleView(); 1060 } 1061 } 1062} 1063 1064async function renameStandardFav(input,id) { 1065 if(event.key === 'Enter') { 1066 let connection = await checkConnect(); 1067 if (connection.isConnected) { 1068 await renameStandardFavorite(connection.userName,connection.session,input.value,id); 1069 input.remove(); 1070 favListStandard = await getStandardFavorites(connection.userName,connection.session); 1071 loadCountry(currentIso); 1072 toggleView(); 1073 } 1074 } 1075} 1076 1077function loadDefaultParameters() { 1078 1079 lng="en"; 1080 defaultTiles="gmaps"; 1081 defaultBorder="thin"; 1082 defaultDifficulty=false; 1083 defaultTimer=false; 1084 defaultgMapLng = "en"; 1085 1086} 1087 1088 </script>
1088 1089 1090<!-----------------------------------------------------DISPLAY------------------------------------------------------------------------------>
1091<script> 1092function initDisplay() { 1093 document.getElementById('divLoginConnected').style.display = "none"; 1094 document.getElementById('divLoginNotConnected').style.display = "none"; 1095} 1096 1097</script>
1097 1098 1099 1100<!----------------------------------------------------LOGIN----------------------------------------------------------------------------------->
1101<script> 1102async function showLogin() { 1103 1104 1105 1106 //hide all divs 1107 document.getElementById("mapCities").style.display = "none"; 1108 document.getElementById("divLoginConnected").style.display = "none"; 1109 document.getElementById("divLoginNotConnected").style.display = "none"; 1110 document.getElementById("divSearchConnected").style.display = "none"; 1111 document.getElementById("divOptionsConnected").style.display = "none"; 1112 document.getElementById("divOptionsNotConnected").style.display = "none"; 1113 document.getElementById("divEditorConnected").style.display = "none"; 1114 document.getElementById("divHelp").style.display = "none"; 1115 1116 1117 var connection = await checkConnect(); 1118 if (connection.isConnected) { 1119 document.getElementById("divLoginConnected").style.display = "flex"; 1120 document.getElementById("divLoginConnectedUserName").innerHTML = connection.userName; 1121 } 1122 else { 1123 document.getElementById("divLoginNotConnected").style.display = "flex"; 1124 } 1125 1126 //buttons highlight 1127 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap.png'); 1128 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login_h.png'); 1129 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search.png'); 1130 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options.png'); 1131 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1132 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help.png'); 1133 1134} 1135 1136async function tryConnect() { 1137 let usr = document.getElementById('inputUser').value; 1138 let pass = document.getElementById('inputPassword').value; 1139 let err = document.getElementById('errorConnect'); 1140 let res = await connect(usr,pass); 1141 if (res == true) { 1142 var connection = await checkConnect(); 1143 if (connection.isConnected) { 1144 await loadOptions(connection.userName,connection.session); 1145 favListCustom = await getCustomFavorites(connection.userName,connection.session); 1146 favListStandard = await getStandardFavorites(connection.userName,connection.session); 1147 loadCountry("world"); 1148 showLogin(); 1149 } 1150 } 1151 else { 1152 err.style.display = "flex"; 1153 setTimeout(() => { err.style.display = "none";}, 5000); 1154 } 1155} 1156 1157async function tryCreateAccount() { 1158 1159 let usr = document.getElementById('inputNewUser').value.trim(); 1160 let pass1 = document.getElementById('inputPassword1').value; 1161 let pass2 = document.getElementById('inputPassword2').value; 1162 1163 let doTry = true; 1164 1165 if (usr.length < 4) { 1166 let err = document.getElementById('errorCreateAccountUsrLength'); 1167 err.style.display = "flex"; 1168 setTimeout(() => { err.style.display = "none";}, 5000); 1169 doTry = false; 1170 } 1171 1172 if (pass1.length < 4) { 1173 let err = document.getElementById('errorCreateAccountPassLength'); 1174 err.style.display = "flex"; 1175 setTimeout(() => { err.style.display = "none";}, 5000); 1176 doTry = false; 1177 } 1178 if (pass1 != pass2) { 1179 let err = document.getElementById('errorCreateAccountPass'); 1180 err.style.display = "flex"; 1181 setTimeout(() => { err.style.display = "none";}, 5000); 1182 doTry = false; 1183 } 1184 1185 if (doTry) { 1186 var res = await createAccount(usr,pass1); 1187 if(res == true) { 1188 await connect(usr,pass1); 1189 showLogin(); 1190 } 1191 else { 1192 let err = document.getElementById('errorCreateAccountUsr'); 1193 err.style.display = "flex"; 1194 setTimeout(() => { err.style.display = "none";}, 5000); 1195 1196 } 1197 } 1198} 1199 1200function tryDisconnect() { 1201 disconnect(); 1202 showLogin(); 1203} 1204</script>
1204 1205 1206 1207<!-----------------------------------------------------show map--------------------------------------------------------------------------------->
1208<script> 1209function showMainMap() { 1210 1211 //hide all divs 1212 document.getElementById("mapCities").style.display = "none"; 1213 document.getElementById("divLoginConnected").style.display = "none"; 1214 document.getElementById("divLoginNotConnected").style.display = "none"; 1215 document.getElementById("divSearchConnected").style.display = "none"; 1216 document.getElementById("divOptionsConnected").style.display = "none"; 1217 document.getElementById("divOptionsNotConnected").style.display = "none"; 1218 document.getElementById("divEditorConnected").style.display = "none"; 1219 document.getElementById("divHelp").style.display = "none"; 1220 1221 document.getElementById("mapCities").style.display = "block"; 1222 mapCities.invalidateSize(); 1223 1224 //buttons highlight 1225 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap_h.png'); 1226 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login.png'); 1227 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search.png'); 1228 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options.png'); 1229 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1230 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help.png'); 1231 1232} 1233</script>
1233 1234 1235<!----------------------------------------------search------------------------------------------------------------------------------------------>
1236<script> 1237 1238async function showSearch() { 1239 1240 //hide all divs 1241 document.getElementById("mapCities").style.display = "none"; 1242 document.getElementById("divLoginConnected").style.display = "none"; 1243 document.getElementById("divLoginNotConnected").style.display = "none"; 1244 document.getElementById("divSearchConnected").style.display = "flex"; 1245 document.getElementById("divOptionsConnected").style.display = "none"; 1246 document.getElementById("divOptionsNotConnected").style.display = "none"; 1247 document.getElementById("divEditorConnected").style.display = "none"; 1248 document.getElementById("divHelp").style.display = "none"; 1249 1250 var connection = await checkConnect(); 1251 if (connection.isConnected) { 1252 1253 } 1254 else { 1255 1256 } 1257 1258 //buttons highlight 1259 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap.png'); 1260 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login.png'); 1261 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search_h.png'); 1262 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options.png'); 1263 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1264 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help.png'); 1265 1266} 1267 1268function initTableSearch() { 1269 1270 let tableTitle = translation("table_title"); 1271 let tableCountry = translation("table_country"); 1272 let tableAuthor = translation("table_author"); 1273 let tableDate = translation("table_date"); 1274 1275 1276 1277 tableSearch = new Tabulator("#tableSearch", { 1278 height : "75vh", 1279 layout:"fitDataFill", 1280 columns:[ 1281 {title:"id", field:"id", visible : false}, 1282 {title:"quizId", field:"quizId", visible : false}, 1283 {title: tableTitle, field:"title", sorter:"string", resizable : true, width:220}, 1284 {title: tableCountry, field:"country", sorter:"string", resizable : true, width:110}, 1285 {title: tableAuthor, field:"author", sorter:"string", resizable : true, width:110}, 1286 {title:tableDate, field:"date", sorter:"date", resizable : true, hozAlign:"center", width:75, 1287 formatter:"datetime", formatterParams:{ inputFormat:"yyyy-MM-dd HH:mm:ss", outputFormat:"dd/MM/yy"}}, 1288 {title:"", field:"play", resizable : true, hozAlign:"center", formatter:"html", width:75}, 1289 {title:"", field:"edit", resizable : true, hozAlign:"center", formatter:"html", width:75}, 1290 {title:"", field:"addCountryFav", resizable : true, hozAlign:"center", formatter:"html", width:150}, 1291 {title:"", field:"addWorldFav", resizable : true, hozAlign:"center", formatter:"html", width:150}, 1292 {title:"", field:"delete", resizable : true, hozAlign:"center", formatter:"html", width:100} 1293 ], 1294}); 1295} 1296 1297async function doSearch() { 1298 var editStr; 1299 strSearch = document.getElementById('searchInput').value; 1300 sList = await getSearch(strSearch); 1301 1302 let favWorld = []; 1303 let favCountry = []; 1304 let connection = await checkConnect(); 1305 if (connection.isConnected) { 1306 let favorites = await getCustomFavorites(connection.userName,connection.session); 1307 for (let i=0;i<favorites.length;i++) { 1308 if (favorites[i].iso3 == "world") { favWorld.push(favorites[i].quizId)} 1309 else { favCountry.push(favorites[i].quizId)} 1310 } 1311 1312 } 1313 console.log("dosearch"); 1314 console.log(sList); 1315 console.log(favWorld); 1316 console.log(favCountry); 1317 1318 //add the lines 1319 addLines(sList,favWorld,favCountry,connection.isConnected,connection.userName); 1320 1321 1322} 1323 1324async function showOwnQuiz() { 1325 1326 let connection = await checkConnect(); 1327 1328 if (connection.isConnected) { 1329 1330 let favWorld = []; 1331 let favCountry = []; 1332 1333 sList = await getOwnQuiz(connection.userName,connection.session); 1334 let favorites = await getCustomFavorites(connection.userName,connection.session); 1335 for (let i=0;i<favorites.length;i++) { 1336 if (favorites[i].iso3 == "world") { favWorld.push(favorites[i].quizId)} 1337 else { favCountry.push(favorites[i].quizId)} 1338 } 1339 console.log("showown"); 1340 console.log(sList); 1341 addLines(sList,favWorld,favCountry,connection.isConnected,connection.userName); 1342 1343 } 1344 1345} 1346 1347function addLines(sList,favW,favC,isConnect,usr) { 1348 //clear data 1349 tableSearch.setData([]); 1350 1351 //show new data 1352 for (let i=0;i<sList.length;i++) { 1353 1354 let editStr = ""; 1355 let deleteStr = ""; 1356 let addCFavStr = ""; 1357 let addWFavStr = ""; 1358 1359 let playTranslate = translation("button_play"); 1360 let editTranslate = translation("button_edit"); 1361 let deleteTranslate = translation("button_delete"); 1362 let favCTranslate = translation("button_add_country_fav"); 1363 let favWTranslate = translation("button_add_world_fav"); 1364 1365 //city or area 1366 if (sList[i].type == "city" && isConnect == true) {editStr = '<button class="greenbutton" onClick="editFav('+sList[i].id+');">'+editTranslate+'</button>' ;} 1367 else {editStr = "";} 1368 1369 //already favorite or not 1370 if ( (!favC.includes(sList[i].id)) && isConnect == true) { 1371 addCFavStr = "<button class='bluebutton' onClick='addCustomFavorite("+sList[i].id+",\""+sList[i].country+"\",\""+sList[i].title+"\")'>"+favCTranslate+"</button>"; 1372 } 1373 1374 if ( (!favW.includes(sList[i].id)) && isConnect == true) { 1375 addWFavStr = "<button class='bluebutton' onClick='addCustomFavorite("+sList[i].id+",\"world\",\""+sList[i].title+"\")'>"+favWTranslate+"</button>"; 1376 } 1377 1378 //delete button 1379 if (usr == sList[i].author) {deleteStr = '<button class="redbutton" onClick="deleteQuiz('+sList[i].id+','+i+');">'+deleteTranslate+'</button>';} 1380 1381 tableSearch.addData([{ 1382 id:i, 1383 quizId: sList[i].id, 1384 title: sList[i].title, 1385 country: sList[i].country, 1386 author:sList[i].author, 1387 date: sList[i].ts, 1388 play:"<button class='greenbutton' onClick='playCustom("+sList[i].id+")'>"+playTranslate+"</button>", 1389 edit: editStr, 1390 delete:deleteStr, 1391 addCountryFav : addCFavStr, 1392 addWorldFav : addWFavStr 1393 }]); 1394 1395 } 1396 1397} 1398 1399async function addCustomFavorite(qid,iso3,title) {
1400 let connection = await checkConnect(); 1401 if (connection.isConnected) { 1402 await saveCustomFavorite(connection.userName,connection.session,qid,iso3,title); 1403 } 1404} 1405</script>
1405 1406<!----------------------------------------------options------------------------------------------------------------------------------------------>
1407<script> 1408 1409async function showOptions() { 1410 1411 //hide all divs 1412 document.getElementById("mapCities").style.display = "none"; 1413 document.getElementById("divLoginConnected").style.display = "none"; 1414 document.getElementById("divLoginNotConnected").style.display = "none"; 1415 document.getElementById("divSearchConnected").style.display = "none"; 1416 document.getElementById("divOptionsConnected").style.display = "none"; 1417 document.getElementById("divOptionsNotConnected").style.display = "none"; 1418 document.getElementById("divEditorConnected").style.display = "none"; 1419 document.getElementById("divHelp").style.display = "none"; 1420 1421 var connection = await checkConnect(); 1422 if (connection.isConnected) { 1423 document.getElementById("divOptionsConnected").style.display = "flex"; 1424 } 1425 else { 1426 document.getElementById("divOptionsNotConnected").style.display = "flex"; 1427 } 1428 1429 //buttons highlight 1430 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap.png'); 1431 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login.png'); 1432 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search.png'); 1433 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options_h.png'); 1434 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1435 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help.png'); 1436} 1437 1438async function loadOptions(usr,session) { 1439 1440 let res = await fetch("/quiz2024/sqldatabaseQ2024.php?query=loadoptions&user="+encodeURIComponent(usr)+"&session="+encodeURIComponent(session)); 1441 let optList = await res.json(); 1442 let opt = optList[0]; 1443 1444 1445 //checkboxes 1446 let chkTimer = document.getElementById("chkTimer"); 1447 let chkHard = document.getElementById("chkHard"); 1448 1449 if(opt.hasTimer == 1) { chkTimer.checked = true; defaultTimer=true;} 1450 else {chkTimer.checked = false; defaultTimer=false;} 1451 1452 if(opt.isHard == 1) { chkHard.checked = true; defaultDifficulty=true;} 1453 else {chkHard.checked = false; defaultDifficulty=false;} 1454 1455 //dropdownlists 1456 let ddTiles = document.getElementById("ddTiles"); 1457 let ddLanguage = document.getElementById("ddLanguage"); 1458 let ddMapLng = document.getElementById("ddMapLng"); 1459 1460 ddTiles.value = opt.tiles; 1461 defaultTiles= opt.tiles; 1462 ddLanguage.value = opt.language; 1463 lng = opt.language; 1464 ddMapLng.value = opt.gMapLng; 1465 defaultgMapLng = opt.gMapLng; 1466 1467 //TODO missing option 1468 defaultBorder="thin"; 1469 1470 //translate 1471 translate(ddLanguage.value); 1472 1473} 1474 1475async function saveOptions(usr,session) { 1476 1477 let language = document.getElementById("ddLanguage").value; 1478 let tiles = document.getElementById("ddTiles").value; 1479 let gMapLanguage = document.getElementById("ddMapLng").value; 1480 let timer; 1481 let hard; 1482 1483 let chkTimer = document.getElementById("chkTimer"); 1484 let chkHard = document.getElementById("chkHard"); 1485 if(chkTimer.checked) {timer = 1;} else {timer=0;} 1486 if(chkHard.checked) {hard = 1;} else {hard=0;} 1487 1488 let res = await fetch("/quiz2024/sqldatabaseQ2024.php?query=saveoptions&user="+encodeURIComponent(usr)+"&session="+encodeURIComponent(session)+"&language="+encodeURIComponent(language)+"&tiles="+encodeURIComponent(tiles)+"&hastimer"+encodeURIComponent(timer)+"&ishard="+encodeURIComponent(hard)+"&gmaplng="+encodeURIComponent(gMapLanguage)); 1489 let opt = await res.json(); 1490 1491 1492 1493} 1494 1495async function trySaveOptions() { 1496 let connection = await checkConnect(); 1497 if (connection.isConnected) { 1498 await saveOptions(connection.userName,connection.session); 1499 lng = document.getElementById('ddLanguage').value; 1500 showMainMap(); 1501 highlight(globalSelectedCountry); 1502 loadCountry(globalSelectedCountry); 1503 } 1504 else { 1505 let err = document.getElementById('errorSaveOptions'); 1506 err.style.display = "flex"; 1507 setTimeout(() => { err.style.display = "none";}, 5000); 1508 } 1509} 1510 1511</script>
1511 1512 1513<!-----------------------------------------------------------EDITOR--------------------------------------------------------------------->
1514<script> 1515 1516async function showEditorOptions() { 1517 1518 1519 1520 //hide all divs 1521 document.getElementById("mapCities").style.display = "none"; 1522 document.getElementById("divLoginConnected").style.display = "none"; 1523 document.getElementById("divLoginNotConnected").style.display = "none"; 1524 document.getElementById("divSearchConnected").style.display = "none"; 1525 document.getElementById("divOptionsConnected").style.display = "none"; 1526 document.getElementById("divOptionsNotConnected").style.display = "none"; 1527 document.getElementById("divEditorConnected").style.display = "none"; 1528 document.getElementById("divHelp").style.display = "none"; 1529 1530 //buttons highlight 1531 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap.png'); 1532 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login.png'); 1533 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search.png'); 1534 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options.png'); 1535 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1536 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help.png'); 1537 1538 var connection = await checkConnect(); 1539 if (connection.isConnected) { 1540 document.getElementById("divEditorConnected").style.display = "flex"; 1541 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit_h.png'); 1542 } 1543 else { 1544 document.getElementById("divLoginNotConnected").style.display = "flex"; 1545 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login_h.png'); 1546 } 1547 1548 1549} 1550</script>
1550 1551<!--------------------------------------------------------VIEW--------------------------------------------------------------------------------------->
1552<script> 1553 1554 function toggleView() { 1555 elementList = document.getElementsByClassName("hidden"); 1556 if(isViewActive == true) { 1557 document.getElementById('buttonView').setAttribute('src', '/img/quiz2024/view.png'); 1558 isViewActive = false; 1559 } 1560 else { 1561 1562 document.getElementById('buttonView').setAttribute('src', '/img/quiz2024/view_h.png'); 1563 isViewActive = true; 1564 } 1565 1566 for (let i =0;i<elementList.length;i++) { 1567 if (isViewActive) {elementList[i].style.display="flex";} 1568 else {elementList[i].style.display="none"; } 1569 1570 } 1571 } 1572 1573 1574</script>
1574 1575 1576<!---------------------------------------------------HELP--------------------------------------------------------------------->
1577<script> 1578 1579function showHelp() { 1580 1581 //hide all divs 1582 document.getElementById("mapCities").style.display = "none"; 1583 document.getElementById("divLoginConnected").style.display = "none"; 1584 document.getElementById("divLoginNotConnected").style.display = "none"; 1585 document.getElementById("divSearchConnected").style.display = "none"; 1586 document.getElementById("divOptionsConnected").style.display = "none"; 1587 document.getElementById("divOptionsNotConnected").style.display = "none"; 1588 document.getElementById("divEditorConnected").style.display = "none"; 1589 document.getElementById("divHelp").style.display = "flex"; 1590 1591 //buttons highlight 1592 document.getElementById('buttonMainMap').setAttribute('src', '/img/quiz2024/mainmap.png'); 1593 document.getElementById('buttonLogin').setAttribute('src', '/img/quiz2024/menu_login.png'); 1594 document.getElementById('buttonSearch').setAttribute('src', '/img/quiz2024/menu_search.png'); 1595 document.getElementById('buttonOptions').setAttribute('src', '/img/quiz2024/menu_options.png'); 1596 document.getElementById('buttonEditorOptions').setAttribute('src', '/img/quiz2024/menu_edit.png'); 1597 document.getElementById('buttonHelp').setAttribute('src', '/img/quiz2024/menu_help_h.png'); 1598 1599 1600 1601} 1602 1603</script>
1603 1604 1605<!---------------------------------------------------TRANSLATE--------------------------------------------------------------------->
1606<script> 1607 1608 1609 async function translate(lang) { 1610 1611 const response = await fetch("./index_translate.json?v="+Date.now(), {cache: "reload"}); 1612 trans = await response.json(); 1613 1614 document.getElementById("title").innerHTML = trans.title[lang]; 1615 try { 1616 document.getElementById("quickstart0").innerHTML = trans.quickstart0[lang]; 1617 document.getElementById("quickstart01").innerHTML = trans.quickstart01[lang]; 1618 document.getElementById("quickstart02").innerHTML = trans.quickstart02[lang]; 1619 document.getElementById("quickstart03").innerHTML = trans.quickstart03[lang];} 1620 catch{} 1621 document.getElementById("divLoginInformation").innerHTML = trans.divLoginInformation[lang]; 1622 document.getElementById("divLoginUser").innerHTML = trans.divLoginUser[lang]; 1623 document.getElementById("buttonDisconnect").innerHTML = trans.buttonDisconnect[lang]; 1624 document.getElementById("divLoginConnect").innerHTML = trans.divLoginConnect[lang]; 1625 document.getElementById("divLoginUser2").innerHTML = trans.divLoginUser2[lang]; 1626 document.getElementById("divLoginPassword").innerHTML = trans.divLoginPassword[lang]; 1627 document.getElementById("buttonConnect").innerHTML = trans.buttonConnect[lang]; 1628 document.getElementById("errorConnect").innerHTML = trans.errorConnect[lang]; 1629 document.getElementById("divLoginNewAccount").innerHTML = trans.divLoginNewAccount[lang]; 1630 1631 document.getElementById("divLoginNewUser").innerHTML = trans.divLoginNewUser[lang]; 1632 document.getElementById("divLoginPassword1").innerHTML = trans.divLoginPassword1[lang]; 1633 document.getElementById("divLoginPassword2").innerHTML = trans.divLoginPassword2[lang]; 1634 document.getElementById("buttonCreateAccount").innerHTML = trans.buttonCreateAccount[lang]; 1635 document.getElementById("errorCreateAccountUsr").innerHTML = trans.errorCreateAccountUsr[lang]; 1636 document.getElementById("errorCreateAccountUsrLength").innerHTML = trans.errorCreateAccountUsrLength[lang]; 1637 document.getElementById("errorCreateAccountPassLength").innerHTML = trans.errorCreateAccountPassLength[lang]; 1638 document.getElementById("errorCreateAccountPass").innerHTML = trans.errorCreateAccountPass[lang]; 1639 document.getElementById("buttonShowOwn").innerHTML = trans.buttonShowOwn[lang]; 1640 document.getElementById("divGeneral").innerHTML = trans.divGeneral[lang]; 1641 document.getElementById("language").innerHTML = trans.language[lang]; 1642 document.getElementById("divOptionsQuiz").innerHTML = trans.divOptionsQuiz[lang]; 1643 document.getElementById("tiles").innerHTML = trans.tiles[lang]; 1644 document.getElementById("emptyESRI").innerHTML = trans.emptyESRI[lang]; 1645 1646 document.getElementById("emptyCartodb").innerHTML = trans.emptyCartodb[lang]; 1647 document.getElementById("optionHardDifficulty").innerHTML = trans.optionHardDifficulty[lang]; 1648 document.getElementById("optionTimer").innerHTML = trans.optionTimer[lang]; 1649 document.getElementById("saveOptions").innerHTML = trans.saveOptions[lang]; 1650 document.getElementById("saveOptionsNotConnected").innerHTML = trans.saveOptions[lang]; 1651 document.getElementById("divOptions2").innerHTML = trans.divOptions2[lang]; 1652 document.getElementById("language2").innerHTML = trans.language2[lang]; 1653 document.getElementById("gMapLng").innerHTML = trans.google_maps_language[lang]; 1654 1655 document.getElementById("cityQuizEditor").innerHTML = trans.cityQuizEditor[lang]; 1656 document.getElementById("regionQuizSelector").innerHTML = trans.regionQuizSelector[lang]; 1657 document.getElementById("usaAreacodeEditor").innerHTML = trans.usaAreacodeEditor[lang]; 1658 1659 1660 document.getElementById("help0").innerHTML = trans.help0[lang]; 1661 document.getElementById("help01").innerHTML = trans.help01[lang]; 1662 document.getElementById("help02").innerHTML = trans.help02[lang]; 1663 document.getElementById("help03").innerHTML = trans.help03[lang]; 1664 document.getElementById("help04").innerHTML = trans.help04[lang]; 1665 1666 document.getElementById("help1").innerHTML = trans.help1[lang]; 1667 document.getElementById("help10").innerHTML = trans.help10[lang]; 1668 document.getElementById("help11").innerHTML = trans.help11[lang]; 1669 document.getElementById("help12").innerHTML = trans.help12[lang]; 1670 document.getElementById("help13").innerHTML = trans.help13[lang]; 1671 1672 document.getElementById("help2").innerHTML = trans.help2[lang]; 1673 document.getElementById("help21").innerHTML = trans.help21[lang]; 1674 document.getElementById("help22").innerHTML = trans.help22[lang]; 1675 document.getElementById("help23").innerHTML = trans.help23[lang]; 1676 1677 document.getElementById("help3").innerHTML = trans.help3[lang]; 1678 document.getElementById("help31").innerHTML = trans.help31[lang]; 1679 document.getElementById("help32").innerHTML = trans.help32[lang]; 1680 document.getElementById("help33").innerHTML = trans.help33[lang]; 1681 document.getElementById("help03").innerHTML = trans.help03[lang]; 1682 1683 document.getElementById("help4").innerHTML = trans.help4[lang]; 1684 document.getElementById("help41").innerHTML = trans.help41[lang]; 1685 document.getElementById("help42").innerHTML = trans.help42[lang]; 1686 document.getElementById("help43").innerHTML = trans.help43[lang]; 1687 1688 document.getElementById("help5").innerHTML = trans.help5[lang]; 1689 document.getElementById("help51").innerHTML = trans.help51[lang]; 1690 document.getElementById("help52").innerHTML = trans.help52[lang]; 1691 document.getElementById("help53").innerHTML = trans.help53[lang]; 1692 document.getElementById("help54").innerHTML = trans.help54[lang]; 1693 1694 document.getElementById("help6").innerHTML = trans.help6[lang]; 1695 document.getElementById("help61").innerHTML = trans.help61[lang]; 1696 document.getElementById("help62").innerHTML = trans.help62[lang]; 1697 document.getElementById("help63").innerHTML = trans.help63[lang]; 1698 document.getElementById("help64").innerHTML = trans.help64[lang]; 1699 document.getElementById("help65").innerHTML = trans.help65[lang]; 1700 document.getElementById("help66").innerHTML = trans.help66[lang]; 1701 document.getElementById("help67").innerHTML = trans.help67[lang]; 1702 document.getElementById("help68").innerHTML = trans.help68[lang]; 1703 1704 document.getElementById("buttonMainMap").title = trans.buttonMainMap_tooltip[lang]; 1705 document.getElementById("buttonLogin").title = trans.buttonLogin_tooltip[lang]; 1706 document.getElementById("buttonSearch").title = trans.buttonSearch_tooltip[lang]; 1707 document.getElementById("buttonOptions").title = trans.buttonOptions_tooltip[lang]; 1708 document.getElementById("buttonHome").title = trans.buttonHome_tooltip[lang]; 1709 document.getElementById("buttonEditorOptions").title = trans.buttonEditorOptions_tooltip[lang]; 1710 document.getElementById("buttonHelp").title = trans.buttonHelp_tooltip[lang]; 1711 } 1712 1713 function doTranslate() { 1714 lng = document.getElementById('ddLanguage2').value; 1715 translate(document.getElementById('ddLanguage2').value); 1716 1717 showMainMap(); 1718 highlight(globalSelectedCountry); 1719 loadCountry(globalSelectedCountry); 1720 1721 } 1722 1723 function translation(str) { 1724 try { return trans[str][lng]; } 1725 catch { return "";} 1726 1727 } 1728 </script>
1728 1729 1730<!---------------------------------------------MAIN---------------------------------------------------------------------------------------> 1731
1731<script> 1732 async function main() { 1733 1734 await loadDataJson(); 1735 initDisplay(); 1736 1737 1738 let connection = await checkConnect(); 1739 if (connection.isConnected) { 1740 await loadOptions(connection.userName,connection.session); 1741 favListCustom = await getCustomFavorites(connection.userName,connection.session); 1742 favListStandard = await getStandardFavorites(connection.userName,connection.session); 1743 loadCountry("world"); 1744 } 1745 else { 1746 loadDefaultParameters(); 1747 1748 var queryString = window.location.search; 1749 var urlParams = new URLSearchParams(queryString); 1750 var hasLngParam = urlContains(queryString,"language"); 1751 if (hasLngParam) { 1752 ddLanguage2.value = urlParams.get('language'); 1753 lng = urlParams.get('language'); 1754 } 1755 else {lng ="en"} 1756 await translate(lng); 1757 1758 favListCustom = []; 1759 } 1760 1761 initTableSearch(); 1762 drawmapCities(); 1763 1764 document.getElementById("searchInput").addEventListener('keyup', 1765 function (event) { 1766 if (event.key === 'Enter' || event.keyCode === 13) { 1767 doSearch(); 1768 } 1769 }); 1770 1771 1772 } 1773 1774 1775 function urlContains(url,txt) { 1776 if (url.includes("?"+txt+"=")) {return true;} 1777 else { if (url.includes("&"+txt+"=")) {return true} else {return false;}} 1778 } 1779 1780 </script>
1780 1781 1782 1783 <!-------------------------------------------------------------MAIN-------------------------------------------------------------------------------> 1784
1784<script> 1785 var soundClick=new Audio("/sound/click.wav"); 1786 soundClick.volume = 0.2; 1787 var infoCountry; 1788 var geoLayer; 1789 var layerList; 1790 var Status = new Object(); 1791 var htmlDoc; 1792 var tree = {}; 1793 var phone = []; 1794 var post = []; 1795 var road = []; 1796 var toponomy = []; 1797 var car = []; 1798 var special = []; 1799 1800 //parameters 1801 var lng; 1802 var defaultTiles; 1803 var defaultBorder; 1804 var defaultDifficulty; 1805 var defaultTimer; 1806 var defaultgMapLng; 1807 1808 //favorites 1809 var favListCustom=[]; 1810 var favListStandard=[]; 1811 1812 //view 1813 var isViewActive; 1814 var currentIso = "world"; 1815 1816 //translation 1817 var trans; 1818 1819 //search 1820 var sList= []; 1821 1822 //seelcted country 1823 var globalSelectedCountry = "world"; 1824 1825 main(); 1826 1827 </script>
1827 1828 1829 <!------------------------------------------------------------------------------------------------navbar-------------------------------------------> 1830 <!-- Optional JavaScript --> 1831 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 1832
1832<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
1832 1833
1833<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
1833 1834
1834<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
1834 1835 1836 1837</body> 1838 1839</html> 1840 1841
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.