-
Notifications
You must be signed in to change notification settings - Fork 39
/
DISTANCE.HTM
409 lines (409 loc) · 17.9 KB
/
DISTANCE.HTM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<head>
<meta charset="utf-8">
<meta name="Author" content="Dario Alejandro Alpern">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web application which includes two tests about distance between cities. Written by Dario Alpern.">
<meta name="theme-color" content="#db5945">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Distance between cities">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Alpertron">
<meta property="og:url" content="https://www.alpertron.com.ar/DISTANCE.HTM">
<meta property="og:image" content="https://www.alpertron.com.ar/distance.png">
<meta property="og:image:width" content="894">
<meta property="og:image:height" content="469">
<meta property="og:image:alt" content="Screenshot">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="es_ES">
<meta property="og:description" content="Two tests about distance between cities.">
<meta property="article:published_time" content="2024-11-04">
<meta property="fb:app_id" content="1495228927625175">
<link rel="alternate" hreflang="es" href="https://www.alpertron.com.ar/DIST.HTM">
<link rel="alternate" hreflang="en" href="https://www.alpertron.com.ar/DISTANCE.HTM">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://www.alpertron.com.ar/DISTANCE.HTM">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q7PH40GPHC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Q7PH40GPHC');
</script>
<title>Distance between cities</title>
<style>
@media print {nav {display:none;}}
@media screen {
nav {background-color:#000080; width:100%; margin:0px; text-align:center}
nav ul {padding:0; margin:0 auto; list-style:none; display:inline-block}
nav li {float:left; position:relative; display:block; margin-top:0px; margin-bottom:0px; margin-left:5px; margin-right:5px; background-color:#000080; color:#FFFFFF; cursor: pointer; text-align:left}
nav li[aria-expanded="true"] {background-color:#004000; color:#FFFFFF}
nav li ul {display:none; position:absolute}
nav li[aria-expanded="true"] ul.alignleft {display:block; height:auto}
nav li[aria-expanded="true"] ul.alignright {display:block; height:auto; right:0px; background-color:#004000}
nav li ul li {clear:both; white-space: nowrap; border:0px; background-color:#004000; width:100%; padding-top:1em; padding-bottom:0.5em}
nav a:link{color:#FFFFFF; text-decoration:none}
nav a:visited{color:#FFFFFF; text-decoration:none}
nav a:hover{background-color:#004000; color:#FFFFFF; text-decoration:none}
nav a:active{background-color:#004000; color:#FFFFFF; text-decoration:none}
nav li ul li a:link{background-color:#004000; color:#FFFFFF; display:block; width:100%}
nav li ul li a:visited{background-color:#004000;color:#FFFFFF; display:block; width:100%}
nav li ul li a:hover{background-color:#FFFFFF; color:#004000; display:block; width:100%}
nav li ul li a:active{background-color:#FFFFFF; color:#004000; display:block; width:100%}
nav::after {clear:both}
.atright {float:right;}
@media (max-width: 400px) {nav {font-size:0.7em;}}
@media (min-width: 400px) {nav {font-size:1em;}}
@media (min-width: 500px) {#configleft {float:left;} #configright {float:right;}}
}
#skip a {padding:6px; position:absolute; top:-40px; left:0px; color:white; border-right:1px solid white; border-bottom:1px solid white; border-bottom-right-radius:8px; background:#BF1722; transition:top 1s ease-out; z-index:100}
#skip a:focus {position:absolute; left:0px; top:0px; outline-color:transparent; transition: top .1s ease-in}
.bread {padding:0px;list-style:none; display:inline-block;}
.bread li {display:inline}
.bread li+li:before {content:"›"}
body {font-family: Arial, sans-serif; margin: 0; padding: 0; background-color:#FFFFFF; color:#000000}
main {padding:10px;}
h1, h2 {text-align:center;}
.red {color: #B60000; font-weight: bold;}
.inline {display:inline;}
#finalInterp,#strings,.donotshow {display:none;}
#order {width:6em;}
#mainmenu {max-width:1000px;margin-left:auto;margin-right:auto;}
@media screen and (prefers-color-scheme: dark) {
body {color: #ddd; background-color: #121212}
.applet {background-color:#606060; color: #fff;border-radius:10px}
a {color: #a3d4a7}
a:link,a:active {color: #a3d4a7}
a:hover {color: #f5cba7}
a:visited {color: #d7bde2}
input, textarea {color: white; background-color: #3b3b3b}
button:disabled {color: #808080; background-color: #606060}
.red {color:pink}
}
</style>
<noscript>
<style>
#mainmenu {display:none}
</style>
</noscript>
</head>
<body>
<div id="skip"><a href="#main">Skip to main content</a></div>
<nav aria-label="Main navigation">
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0">Electronics
<ul role="menu" class="alignleft popup">
<li role="menuitem"><a href="INTEL.HTM" hreflang="es" title="All Intel microprocessors from the 4004 up to Pentium (Spanish only)">Intel Microprocessors</a></li>
</ul>
</li>
<li role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Mathematics
<ul role="menu" class="alignleft popup">
<li role="menuitem"><a href="CALTORS.HTM" title="Web applications with JavaScript and WebAssembly implementing calculators">Calculators</a></li>
<li role="menuitem"><a href="NUMBERT.HTM" title="Articles and programs about number theory">Number Theory</a></li>
<li role="menuitem"><a href="PROBLEMS.HTM" title="Interesting math problems">Problems</a></li>
</ul>
</li>
<li role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Programs
<ul role="menu" class="alignright popup">
<li role="menuitem"><a href="ASSEM386.HTM" title="Programs written in 80386 Assembler">Assembler 80386</a></li>
<li role="menuitem"><a href="JAVAPROG.HTM" title="Web applications with JavaScript and WebAssembly">Web applications</a></li>
<li role="menuitem"><a href="GAMES.HTM" title="Computer games">Games</a></li>
</ul>
</li>
<li class="alignright" role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Contact
<ul role="menu" class="alignright popup">
<li role="menuitem"><a href="EPERS.HTM" title="Personal information">Personal</a></li>
<li role="menuitem"><a href="FORM.HTM" title="Form to send comments">Comments</a></li>
<li role="menuitem"><a href="EGBOOK.HTM" title="Old and new guestbook">Guestbook</a></li>
<li role="menuitem"><a href="PRIVACY.HTM" title="Privacy Policy">Privacy</a></li>
<li role="menuitem"><a href="DONATION.HTM" title="Donations to the author of this Web site">Donations</a></li>
</ul>
</li>
</ul>
<ul class="atright"><li><a href="DIST.HTM" hreflang="es" title="Esta página Web en español">ESP</a></li></ul>
</nav>
<main id="main">
<article>
<h1>Distance between cities</h1>
<ol class="bread" vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="ENGLISH.HTM"><span property="name">Alpertron</span></a>
<meta property="position" content="1">
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="JAVAPROG.HTM"><span property="name">Web applications</span></a>
<meta property="position" content="2">
</li>
<li property="itemListElement" typeof="ListItem">
<span property="name">Distance between cities</span>
<meta property="position" content="3">
</li>
</ol>
<noscript><p><strong>The game does not work with Javascript disabled. Please check your browser settings.</strong></p></noscript>
<div id="mainmenu">
<div>
<fieldset>
<legend>Main menu</legend>
<div id="configleft">
<p><input type="button" id="1with" value="Start test #1 (with countries)"></p>
<p><input type="button" id="1without" value="Start test #1 (without countries)"></p>
<p><input type="button" id="2with" value="Start test #2 (with countries)"></p>
</div>
<div id="configright">
<p><input type="button" id="2without" value="Start test #2 (without countries)"></p>
<p><input type="button" id="listcity" value="Get list of cities"></p>
<p><input type="button" id="finddist" value="Find distance betweeen cities"></p>
</div>
</fieldset>
</div>
</div>
<div id="help">
<p>This program lets you practice geography by featuring two tests related to distance between cities.</p>
<p>The first test shows 10 questions where you will have to answer the distance between two cities in kilometers. The score for every answer depends on the ratio between the distance you specified and the true one.</p>
<p>In the 10 questions of the second test, the program shows six cities. Starting from the first city you have to arrive to the last one through the other four cities. You will have to reorder these intermediate cities so the total distance is minimized. Then, the program shows all 24 possibilities in which cities can be ordered, ordered according to distance traveled. The score is higher if the specified order is near the top of the table generated by the program.</p>
<p>In both tests there are two levels of difficulty. At the easy level, the program shows the countries that correspond to the cities, while at the difficult level the countries are not shown.</p>
<p>You can download the source of the current program and the old distance between cities applet from <a href="https://github.com/alpertron/calculators">GitHub</a>.</p>
<p>Written by Dario Alpern. Updated on 19 January 2018.</p>
<p>If you find an error or you have any comment, please fill the <a href="FORM.HTM" id="formlink">form</a>.</p>
</div>
<div id="test1" class="donotshow">
<p class="red test1_1 notFindDist">The current score is: <span id="score1"></span></p>
<p class="notFindDist"><span id="ord1"></span> question: What is the distance between the following cities?</p>
<p class="findDist">The selected cities are:</p>
<p><span class="cityctry_from"></span> and <span class="cityctry_to"></span></p>
<div class="test1_1 notFindDist">
<p><label for="dist1">Distance in kilometers:</label> <input type="number" id="dist1"></p>
</div>
<div class="test1_2">
<p class="red notFindDist">You think that the distance is <span id="dist12_1"></span> but the exact value is <span id="dist12_2"></span>.</p>
<p class="findDist">The distance between both places are <span id="dist12_3"></span>.</p>
<p>I can also tell you that:</p>
<ul>
<li>To go from <span class="city_from"></span> to <span class="city_to"></span>: <span id="dirdeg1"></span></li>
<li>To go from <span class="city_to"></span> to <span class="city_from"></span>: <span id="dirdeg2"></span></li>
</ul>
<p>where: 0° = North; 90° = East; 180° = South; 270° = West.</p>
<div id="sunleft">
<p>Sun visible in <span class="cityctry_from"></span>:</p>
<ul>
<li>June 21st: <span id="sun_from_0621"></span></li>
<li>December 21st: <span id="sun_from_1221"></span></li>
</ul>
</div>
<div id="sunright">
<p>Sun visible in <span class="cityctry_to"></span>:</p>
<ul>
<li>June 21st: <span id="sun_to_0621"></span></li>
<li>December 21st: <span id="sun_to_1221"></span></li>
</ul>
<p class="red notFindDist">This time you score <span id="score2"></span> (<span id="parcInter"></span>), so your <span id="scoreType"></span> score is <span id="score3"></span>.</p>
<p class="red" id="finalInter"> </p>
<p class="notFindDist"><input type="button" id="nextq" value="Next question"></p>
</div>
<p><input type="button" id="exitt" value="Main menu"></p>
</div>
</div>
<div id="test2" class="donotshow">
<p class="red test2_1">Your current score is: <span id="score4"></span></p>
<p><span id="ord2"></span> question: How do you travel from <span id="city1"></span> to <span id="city6"></span> if you must pass through the following four cities so the total distance is minimum??</p>
<ol>
<li><span id="city2"></span></li>
<li><span id="city3"></span></li>
<li><span id="city4"></span></li>
<li><span id="city5"></span></li>
</ol>
<div>
<p><label for="order">If you think the order is 1, 2, 3, 4, please type 1234.</label> <input type="text" maxlength="4" id="order"></p>
</div>
</div>
<div id="test2_2" class="donotshow">
<p>You have chosen the option <span id="option"></span> so you deserve <span id="score5"></span></p>
<p>Your current score is: <span id="score6"></span></p>
<p><input type="button" id="nextq2" value="Next question"> <input type="button" id="exitt2" value="Main menu"></p>
<div id="list"></div>
</div>
<div id="listCities" class="donotshow">
<p id="lc">The list of cities in this program is:</p>
<div id="fc">
<p><label for="cityFrom">Number of origin city:</label> <input type="number" id="cityFrom" min="1" max="105"></p>
<p><label for="cityTo">Number of destination city:</label> <input type="number" id="cityTo" min="1" max="105"></p>
<input type="button" id="findDist" value="Find distance">
</div>
<div id="allCities"></div>
<div><input type="button" id="exitt3" value="Back"></div>
</div>
</article>
</main>
<div id="strings">
<div id="cities">Acapulco,Mexico:1652;-9953
Alexandria,Egypt:3112;2957
Amman,Jordan:3157;3557
Amsterdam,Netherlands:5223;454
Anchorage,USA:6113;-14954
Ankara,Turkey:3956;3252
Asuncion,Paraguay:-2518;-5737
Athens,Greece:3759;2344
Auckland,New Zealand:-3652;17444
Baghdad,Iraq:3318;4424
Bangkok,Thailand:1345;10031
Barcelona,Spain:4123;211
Beijing,China:3955;11623
Beirut,Lebanon:3352;3532
Berlin,Germany:5232;1326
Bogota,Colombia:437;-7405
Brasilia,Brazil:-1547;-4754
Brussels,Belgium:5051;421
Bucharest,Romania:4427;2606
Buenos Aires,Argentina:-3437;-5823
Cairo,Egypt:3004;3114
Canberra,Australia:-3519;14904
Cape Town,South Africa:-3354;1825
Caracas,Venezuela:1030;-6654
Chicago,USA:4152;-8737
Copenhaguen,Denmark:5540;1234
Cordoba,Argentina:-3124;-6411
Dakar,Senegal:1442;-1727
Damascus,Syria:3332;3620
Dublin,Ireland:5321;-616
Guadalajara,Mexico:2042;-10319
Guatemala,Guatemala:1437;-9031
Havana,Cuba:2306;-8222
Helsinki,Finland:6010;2456
Hong Kong,China:2216;11412
Honolulu,USA:2119;-15750
Istanbul,Turkey:4100;2858
Jerusalem,Israel:3148;3512
Karachi,Pakistan:2451;6701
Kathmandu,Nepal:2743;8519
Khartoum,Sudan:1538;3232
Kiev,Ukraine:5025;3034
Kolkata,India:2230;8818
La Paz,Bolivia:-1629;-6808
Lagos,Nigeria:627;326
Lima,Peru:-1205;-7703
Lisbon,Portugal:3844;-908
London,United Kingdom:5129;-8
Los Angeles,USA:3403;-11814
Luxembourg,Luxembourg:4937;608
Madrid,Spain:4025;-341
Managua,Nicaragua:1208;-8616
Mar del Plata,Argentina:-3800;-5733
Mecca,Saudi Arabia:2126;3949
Mendoza,Argentina:-3254;-6850
Mexico,Mexico:1922;-9911
Miami,USA:2546;-8012
Milan,Italy:4529;911
Monrovia,Liberia:618;-1047
Monte Carlo,Monaco:4344;726
Montevideo,Uruguay:-3454;-5609
Montreal,Canada:4530;-7336
Moscow,Russia:5545;3738
Mumbai,India:1856;7249
New York,USA:4043;-7401
Nicosia,Cyprus:3510;3322
North Pole,No country:9000;0
Nuuk,Greenland:6411;-5144
Oslo,Norway:5955;1046
Ottawa,Canada:4525;-7543
Panama,Panama:901;-7930
Paris,France:4852;221
Prague,Czech Republic:5005;1425
Puebla,Mexico:1903;-9812
Quito,Ecuador:-13;-7831
Reykjavik,Iceland:6408;-2154
Rio de Janeiro,Brazil:-2253;-4314
Rome,Italy:4154;1230
Rosario,Argentina:-3258;-6039
Saint Petersburg,Russia:5956;3019
Sao Paulo,Brazil:-2331;-4638
San Francisco,USA:3746;-12225
San Jose,Costa Rica:956;-8405
San Salvador,El Salvador:1342;-8912
Santiago,Chile:-3327;-7039
Seoul,South Korea:3732;12659
Shanghai,China:3114;12129
Sofia,Bulgaria:4241;2320
South Pole,No country:-9000;0
Stockholm,Sweden:5919;1804
Sydney,Australia:-3353;15112
Taipei,Taiwan:2503;12131
Tegucigalpa,Honduras:1406;-8712
Tokyo,Japan:3542;13946
Toronto,Canada:4339;-7922
Tripoli,Libya:3253;1317
Ulaanbaatar,Mongolia:4755;10656
Ushuaia,Argentina:-5448;-6818
Vancouver,Canada:4915;-12307
Vienna,Austria:4812;1623
Vladivostok,Russia:4308;13154
Warsaw,Poland:5214;2100
Washington,USA:3854;-7702
Yaoundé,Cameroon:352;1131
Zürich,Switzerland:4723;832"</div>
<div id="parcInterp">unbelievable!
excellent!
very good
OK
not so bad, so-so, bah
hhhmmmm...
poor
Yeeech!!
Argggh!!</div>
<div id="finalInterp">I should tell you something against my principles: Congratulations!
Almost perfect. ALMOST. Next time you will perform worse.
Apparently you know geography (or you are lucky).
Continue playing, this game is for you.
Obviously, you need to practice (several months, ha, ha).
It seems that you hate geography.
You will perform better playing a role player video game.</div>
<div id="direction">NNE,NE,ENE,E,ESE,SE,SSE,S,SSW,SW,WSW,W,WNW,NW,NNW,N</div>
<div id="ordinal">First,Second,Third,Fourth,Fifth,Sixth,Seventh,Eighth,Ninth,Last</div>
<div id="degree">degree</div>
<div id="km">kilometer</div>
<div id="current">current</div>
<div id="final">final</div>
<div id="point">point</div>
<div id="North">N</div>
<div id="South">S</div>
<div id="East">E</div>
<div id="West">W</div>
</div>
<script>
<!--
//-->
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"browserRequirements": "Requires HTML5. Requires Javascript.",
"name": "Distance between cities",
"description": "Web application which includes two tests about distance between cities.",
"image": ["https://www.alpertron.com.ar/distance.png"],
"datePublished": "2024-11-04",
"dateModified": "2024-11-04",
"operatingSystem": "Any",
"applicationCategory": "EducationalApplication",
"author": {
"@type": "Person",
"name": "Dario Alpern"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.9",
"ratingCount": "17"
},
"inLanguage": "en",
"license": "https://www.gnu.org/licenses/gpl-3.0.en.html",
"isAccessibleForFree": true,
"offers": {
"@type": "Offer",
"availability": "https://schema.org/OnlineOnly",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
</body>
</html>