-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrigging.html
More file actions
422 lines (422 loc) · 29.5 KB
/
Copy pathrigging.html
File metadata and controls
422 lines (422 loc) · 29.5 KB
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
410
411
412
413
414
415
416
417
418
419
420
421
422
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Бегучий такелаж фрегата «Штандарт»</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Vasily Zakharov (vmzakhar@gmail.com)">
<meta name="keywords" content="tall ship shtandart rigging sail trainer">
<meta name="description" content="Trainer software for frigate Shtandart rigging elements location">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-title" content="Shtandart Rigging">
<meta name="application-name" content="Shtandart Rigging">
<meta name="theme-color" content="#ffeca4">
<link rel="apple-touch-icon" sizes="180x180" type="image/png" href="images/apple-touch-icon.png?v=3">
<link rel="icon" sizes="32x32" type="image/png" href="images/favicon-32x32.png?v=3">
<link rel="icon" sizes="16x16" type="image/png" href="images/favicon-16x16.png?v=3">
<link rel="mask-icon" type="image/svg+xml" href="images/safari-pinned-tab.svg?v=3" color="#4e1d00">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffeca4">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23680830-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-23680830-3');
</script>
<script>
/* jshint strict: global */
/* globals window */
"use strict";
window.onerror = function (message, url, lineNo, columnNo, errorObject) {
var prefix = 'Ошибка!\n\nПожалуйста, ';
var suggestion = 'сделайте скриншот и отправьте картинку разработчику на почту vmzakhar@gmail.com с темой "Такелаж «Штандарта»".\n\nСпасибо!\n';
if (message.toLowerCase().indexOf('script error') >= 0) {
message = prefix + 'откройте консоль браузера (нажмите F12, выберите "Консоль"), после чего ' + suggestion;
} else if (errorObject && errorObject.stack) {
message = prefix + suggestion + '\n' + errorObject.stack + '\n';
} else {
message = prefix + suggestion + '\n' + message + '\n@ ' + url + ':' + lineNo + ':' + columnNo + '\n';
}
alert(message); // jshint ignore:line
};
</script>
<link rel="stylesheet" href="rigging.css">
</head>
<body>
<div id="filters">
<object type="image/svg+xml" data="images/filters.svg"></object>
</div>
<table id="mainTable">
<tr id="mainRow"><td id="mainCell" class="loading"><table>
<tr><td>
<h1>Бегучий такелаж фрегата «Штандарт»</h1>
</td></tr>
<tr class="loading"><td><form><table id="controls"><tr>
<td id="selectModes">
<span class="selector"><input name="mode" type="radio" class= "info">Описание</span>
<span class="selector"><input name="mode" type="radio" class= "demo">Просмотр</span>
<span class="selector"><input name="mode" type="radio" class="where">Где снасть?</span>
<span class="selector"><input name="mode" type="radio" class="which">Какая снасть?</span>
</td>
<td id="selectFill" class="modeDependent info demo">
</td>
<td id="selectMasts" class="modeDependent where">Мачты
<span class="selector"><input name="mast" type="checkbox" class= "all">Все</span>
<span class="selector"><input name="mast" type="checkbox" class="mizzen">Бизань</span>
<span class="selector"><input name="mast" type="checkbox" class= "main">Грот</span>
<span class="selector"><input name="mast" type="checkbox" class= "fore">Фок</span>
</td>
<td id="selectDecks" class="modeDependent which">Палубы
<span class="selector"><input name="deck" type="checkbox" class= "all">Все</span>
<span class="selector"><input name="deck" type="checkbox" class= "stern">ПолуЮт</span>
<span class="selector"><input name="deck" type="checkbox" class= "main">Главная</span>
<span class="selector"><input name="deck" type="checkbox" class= "fore">Бак</span>
</td>
<td id="options" class="modeDependent demo where which">
<span class="selector modeDependent where which"><input id="schemeCheckbox" type="checkbox">Схема</span>
<span class="selector modeDependent demo where which"><input id="marksCheckbox" type="checkbox">Марки</span>
</td>
</tr></table></form></td></tr>
<tr id="schemeBlock" class="loading"><td>
<object type="image/svg+xml" data="images/shtandart.svg"></object>
</td></tr>
<tr class="questionBlock modeDependent where which loading"><td>
<div class="modeDependent where"><p>
Укажите на схеме сверху или в списке ниже точку крепления этой снасти:
</p></div>
<div class="modeDependent which"><p>
Укажите тип снасти (и парус, если это снасть определённого паруса), которая крепится в этой точке:
</p></div>
<h2><span id="question"></span>?</h2>
<h3>
<span id="rightAnswer">Правильно!</span>
<span id="wrongAnswer"><span>Неправильно!</span> Это – <span id="rightAnswerText"></span>.</span>
</h3>
<p>
<span id="tooltipNote">Ответьте на вопрос (можно неправильно), чтобы включились подсказки при наведении мыши.</span>
<span id="nextQuestionNote">Кликните в произвольное место, чтобы перейти к следующему вопросу.</span>
</p>
<p>
<span id="statistics">
<button id="resetButton">Обнулить статистику</button>
Правильных ответов <span id="statCorrect"></span> из <span id="statAll"></span>,
то есть <span id="statPercent"></span>%
</span>
<button id="nextQuestionButton">Следующий вопрос</button>
</p>
</td></tr>
<tr class="choiceBlock modeDependent where loading"><td>
<table><tr id="pointNumbers">
</tr></table>
</td></tr>
<tr class="choiceBlock modeDependent demo which loading"><td>
<table><tr id="sublines">
<td class="deck sailLines"><div>
<h2 class="category sailLine">Снасти</h2>
<ul>
<li class="subline sailLine">Брас</li>
<li class="subline sailLine">Бухта браса</li>
<li class="subline sailLine">Топенант</li>
</ul>
<ul>
<li class="subline sailLine">Дирик-фал</li>
<li class="subline sailLine">Галс-таль</li>
<li class="subline sailLine">Эренс-бакштаг</li>
</ul>
</div></td>
<td class="deck sailLines"><div>
<ul>
<li class="subline sailLine">Шкот</li>
<li class="subline sailLine">Бухта шкота</li>
<li class="subline sailLine">Галс</li>
<li class="subline sailLine">Булинь</li>
<li class="subline sailLine">Нирал</li>
<li class="subline sailLine">Фал</li>
</ul>
<ul>
<li class="subline sailLine">Гитов</li>
<li class="subline sailLine">Нок-гордень</li>
<li class="subline sailLine">Бык-гордень</li>
</ul>
</div></td>
<td class="deck sails"><div>
<h2 class="category sail">Парусов</h2>
<ul>
<li class="subline sail">Блинд</li>
</ul>
<ul>
<li class="subline sail">Фок</li>
<li class="subline sail">Фор-марсель</li>
<li class="subline sail">Фор-брамсель</li>
</ul>
</div></td>
<td class="deck sails"><div>
<ul>
<li class="subline sail">Грот</li>
<li class="subline sail">Грот-марсель</li>
<li class="subline sail">Грот-брамсель</li>
<li class="subline sail">Стаксель</li>
</ul>
<ul>
<li class="subline sail">Бизань</li>
<li class="subline sail">Крюйс-марсель</li>
<li class="subline sail">Бегин-рей</li>
<li class="subline sail">Апсель</li>
</ul>
</div></td>
<td class="deck nonSailLines"><div>
<h2 class="category otherLine tackle mooring flagHalyard">Прочие снасти</h2>
<ul>
<li class="subline otherLine">Носовой шлюпки</li>
<li class="subline otherLine">Пушпорт / Кранец</li>
</ul>
<h3 class="category tackle">Талёвы</h3>
<ul>
<li class="subline tackle">Гротовая</li>
<li class="subline tackle">Оттяжка гротовой</li>
<li class="subline tackle">Штаговая</li>
<li class="subline tackle">Нагель для работы</li>
<li class="subline tackle">Якорная</li>
</ul>
</div></td>
<td class="deck nonSailLines"><div>
<h3 class="category mooring">Швартовы</h3>
<ul>
<li class="subline mooring">Носовой</li>
<li class="subline mooring">Кормовой</li>
<li class="subline mooring">Гакабортный</li>
</ul>
<h3 class="category flagHalyard">Флаг-фалы</h3>
<ul>
<li class="subline flagHalyard">Фока</li>
<li class="subline flagHalyard">Грота</li>
<li class="subline flagHalyard">Бизани</li>
<li class="subline flagHalyard">Рю</li>
<li class="subline flagHalyard">Бегин-рея</li>
<li class="subline flagHalyard">Флагштока</li>
</ul>
</div></td>
</tr></table>
</td></tr>
<tr class="modeDependent info">
<td id="infoBlock">
<section id="infoIntro">
<h2 class="loading">Описание</h2>
<p>
[<a href="https://jolaf.github.io/rigging/shtandart.html">Актуальная версия</a>]
[<a href="https://jolaf.github.io/rigging/shtandart.zip">Скачать</a>]
[<a href="https://github.com/jolaf/rigging">Разработка программы</a>]
[<a href="https://www.shtandart.ru/frigate/"><img class="icon" alt="" src="images/shtandart.ico?v=3">Фрегат «Штандарт»</a>]
[<a href="https://www.shtandart.ru/upload/iblock/7bd/7bd297ce94c589d5947e0289c2a7e0ec.pdf">Паруса.pdf</a>]
[<a href="https://www.shtandart.ru/upload/iblock/d7f/d7f3a665f4c9e3846b7dd48cf34af754.pdf">Такелаж.pdf</a>]
[<a href="mailto:vmzakhar@gmail.com?Subject=Такелаж%20«Штандарта»">E-mail разработчика</a>]
</p>
<p>
<a href="https://www.shtandart.ru/frigate/"><img id="logo" alt="" src="images/logo.png?v=3"></a>
</p>
<p>
Эта программа создана для облегчения изучения и выучивания мест расположения рабочих концов бегучего такелажа
<a href="https://www.shtandart.ru/frigate/">фрегата «Штандарт»</a> на палубе.<br>
Разводка такелажа приведена по состоянию на осень 2019 года.
</p>
<p>
Программа оптимизирована под работу в свежих версиях браузера
<a href="https://mozilla.org/ru/firefox/desktop/">Mozilla Firefox</a>
на «больших» компьютерах с мышью.<br>
В других браузерах и на устройствах с тачскрином программа может работать криво или не работать вовсе.
</p>
<div id="infoLoading" class="loading">
<noscript>
<p>Для функционирования этой страницы требуется поддержка <a href="https://ru.wikipedia.org/wiki/JavaScript">JavaScript</a> в браузере.</p>
<p>Пожалуйста, включите поддержку JavaScript и перезагрузите страницу.</p>
</noscript>
<script>
document.write('<p>Идёт загрузка страницы, подождите...</p>\n<p>Если ожидание затягивается, попробуйте перезагрузить страницу.</p>\n<p>Если это не помогает, обратитесь к <a href="mailto:vmzakhar@gmail.com?Subject=Такелаж%20«Штандарта»">разработчику</a>.</p>'); // jshint ignore:line
</script>
</div>
<div class="loading">
<p>
Программа поддерживает четыре основных режима работы, которые можно переключать в верхнем левом углу окна.
</p>
<p>
В режиме <strong>Описание</strong> отображается описание программы, которое вы сейчас читаете.
</p>
<p><strong>
В случае возникновения проблем сразу же делайте скриншот (кнопка PrintScreen на клавиатуре), и присылайте его на <a href="mailto:vmzakhar@gmail.com?Subject=Такелаж%20«Штандарта»">почту</a>!
</strong></p>
</div>
</section>
<section id="infoDemo" class="loading">
<h2>Просмотр</h2>
<p>
В этом режиме программа не задаёт никаких задачек.
Можно просто изучать расположение снастей на палубе с помощью мыши.
В верхней части окна во всю ширину отображается схема палубы фрегата
с обозначенным расположением кофель-нагельных планок и других точек крепления снастей.
Ниже схемы перечислены слева – снасти, относящиеся к парусам
(по группам – снасти управления рангоутом, снасти управления парусами и снасти для уборки парусов),
в центре перечислены паруса фрегата, сгруппированные по мачтам,
справа – прочие снасти, не имеющие отношения к парусам.
</p>
<p>
<strong>Наведение мыши</strong> на название снасти <span class="on">подсвечивает</span> все паруса, снаряжённые такой снастью,
а также все точки крепления снастей этого типа на палубе.
Наведение мыши на название паруса аналогично <span class="on">подсвечивает</span> все снасти, которыми снаряжён данный парус.
Наведение на точку крепления снастей на схеме <span class="on">подсвечивает</span> тип снасти и название паруса для снастей, крепящихся в этой точке,
а также другие точки, где может крепиться эта или аналогичная снасть.
</p>
<p>
<strong>По клику</strong> в любое место <span class="on">подсвеченные</span> снасти фиксируются, и далее,
наводя мышь на точки крепления снастей на схеме,
можно увидеть всплывающие подсказки с подписями.
Ещё один клик мышью вернёт вас в интерактивный режим.
</p>
</section>
<section id="infoMarks" class="loading">
<h2>Марки</h2>
<p>
Точки крепления снастей, которые имеют на концах цветные марки, обозначены на схеме соответствующими цветами:
<span class="clewline">гитовы</span>, <span class="leechline">нок-горденя</span>, <span class="buntline">бык-горденя</span>, <span class="bowline">булиня</span>.
Кислотным жёлто-зелёным цветом обозначены точки крепления, куда одновременно приходят снасти
с жёлтой и зелёной марками – то есть, <span class="clewline buntline">гитовы и бык-горденя</span> малых парусов.
</p>
<p>
При желании цветовое обозначение можно отключить, сняв галочку <strong>Марки</strong> в правом верхнем углу окна.
Умение находить нужную снасть без ориентации на цветовые маркеры может пригодиться ночью.
</p>
</section>
<section id="infoWhere" class="loading">
<h2>Где снасть?</h2>
<p>
В этом режиме программа называет снасть и предлагает вспомнить, в какую точку на палубе эта снасть приходит.
Ответить можно кликом в соответствующую точку схемы.
Правильный ответ (и другие возможные правильные ответы) <span class="rightAnswer">подсвечивается</span> зелёным цветом.
Если дан неправильный ответ, он также <span class="wrongAnswer">подсвечивается</span> красным цветом.
Если точек крепления для указанной снасти на палубе несколько, правильным ответом будет сочтено указание любой из них.
</p>
<p>
<strong>После того, как ответ дан</strong>, включается интерактивный режим с <span class="on">подсветкой</span> и вспывающими подсказками, аналогичный режиму Просмотра.
Для перехода к следующему вопросу можно нажать кнопку
<button>Следующий вопрос</button>
или просто кликнуть в любое место схемы или списка.
Эту же кнопку можно использовать, если вы не знаете правильного ответа на вопрос и не хотите гадать.
</p>
<p>
<strong>Ниже схемы</strong> все точки крепления перечислены списком, в них тоже можно кликать для ответа на вопрос.
Нагели на планках и другие точки крепления нумеруются на планках, идущих вдоль борта, с кормы,
а на планках, идущих перпендикулярно борту, от центра.
В каждом списке слева перечисляются точки крепления левого борта, а справа – правого борта.
Номера точек крепления в списках <span class="on">подсвечиваются</span> синхронно с точками на схеме,
цветовая маркировка также синхронизирована.
</p>
<p>
<strong>Галочки с названиями мачт</strong> в средней части верхнего меню позволяют
ограничить задаваемые вопросы только снастями парусов соответствующих мачт.
Если хотя бы одна галочка мачты не стоит, вопросы по снастям, не привязанным к мачтам и парусам, не задаются.
Это позволяет учить не все 80 снастей разом, а группами –
сначала паруса одной мачты, потом другой, потом третьей, а потом уже всё вместе.
</p>
<p>
<strong>Галочки в правом верхнем углу</strong> позволяют отключить цветовую маркировку, а также схему.
Умение объяснить, где находится нужная снасть, не имея перед глазами схемы,
пригодится, если нет возможности выполнить какую-то операцию с этой снастью самому,
а нужно оперативно дать инструкции кому-то другому.
</p>
<p>
В некотором смысле, здесь имеется <strong>четыре уровня сложности</strong>: «со схемой и цветовой маркировкой»,
«со схемой, но без цветовой маркировки», «без схемы, но с цветовой маркировкой»
и, самый сложный, «без схемы и цветовой маркировки».
Соответственно, рекомендуется начинать с самого простого, и далее увеличивать сложность по мере усвоения материала.
</p>
</section>
<section id="infoStatistics" class="loading">
<h2>Статистика</h2>
<p>
После ответа на первый вопрос программа отображает статистику правильных ответов.
Статистика нигде не сохраняется, и нужна только для объективной оценки собственных текущих знаний и отслеживания прогресса в обучении.
</p>
<p>
<strong>Статистику можно сбросить</strong> в любой момент, нажав на кнопку
<button>Обнулить статистику</button>.
Также статистика сбрасывается автоматически при переключении режима работы программы,
при <strong>включении</strong> отображения схемы или цветовых марок,
а также при установке любой из галочек мачт или палуб –
таким образом, отображающаяся статистика всегда отражает результат тренировки
в выбранном на данный момент или более сложном режиме.
</p>
</section>
<section id="infoWhich" class="loading">
<h2>Какая снасть?</h2>
<p>
Этот режим аналогичен режиму <strong>Где снасть?</strong>, но задаёт вопросы «наоборот».
Программа называет расположение точки крепления снасти (и <span class="on">подсвечивает</span> её на схеме)
и предлагает вспомнить, какие снасти крепятся в этой точке.
Список снастей внизу аналогичен списку в режиме <strong>Просмотр</strong>.
</p>
<p>
Для снастей, не связанных с парусами, или связанных только с одним парусом,
для ответа достаточно кликнуть в название снасти в списке внизу.
</p>
<p>
Для снастей, которыми снаряжены несколько парусов,
нужно последовательно, в любом порядке, кликнуть в название снасти и название паруса.
Пока выполнен только один из двух кликов, ответ считается неполным и может быть изменён.
</p>
<p>
Если в данной точке крепятся или могут крепиться различные снасти,
указание любой из них будет сочтено правильным ответом.
</p>
<p>
<strong>Галочки с названиями палуб</strong> в средней части верхнего меню позволяют
ограничить задаваемые вопросы только снастями, которые крепятся на соответствующих палубах.
Это позволяет учить не все 80 снастей разом, а группами –
сначала, например, те, что приходят на бак, потом те, что на главную палубу, и в конце те, что на корме.
Полуют и ют здесь рассматриваются как одна палуба и включаются/выключаются одной галочкой.
</p>
</section>
<section id="infoQuestions" class="loading">
<h2>Вопросы? Замечания? Предложения?</h2>
<p>
По любым вопросам – пишите на <a href="mailto:vmzakhar@gmail.com?Subject=Такелаж%20«Штандарта»">почту</a>.
</p>
<p>
Программа новая, в ней, конечно же, есть недоделки и хватает шероховатостей.
Ваши сообщения позволят быстрее с ними расправиться.
</p>
<p>
Если есть идеи, как сделать программу лучше – тоже не стесняйтесь высказаться.
</p>
<p><strong>
Спасибо! Успешного вам учебного процесса и семь футов под килем!
</strong></p>
<p>
Большое спасибо за идеи, помощь и поддержку в разработке программы<br>
<a href="https://vk.com/alek_i_amasa">Александре Григорьевой</a>
и <a href="https://vk.com/id4538067">Татьяне Ефремовой</a>.
</p>
</section>
</td>
</tr>
</table></td></tr>
<tr id="footer"><td><table><tr>
<td><p>
© <a href="https://vk.com/jolaf">Василий Захаров</a>, <a href="https://vk.com/linaire">Роксана Колосова</a>
для <a href="https://www.shtandart.ru/frigate/"><img class="icon" alt="" src="images/shtandart.ico?v=3">Проекта «Штандарт»</a> 2016–2020
</p></td>
<td>
<p id="build">dev</p>
</td>
</tr></table></td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="jquery.tipsy.js"></script>
<script src="shtandart.js"></script>
<script src="rigging.js"></script>
</body>
</html>