-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
730 lines (680 loc) · 63.7 KB
/
main.html
File metadata and controls
730 lines (680 loc) · 63.7 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
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Електричні Білети з Фізики</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f0f2f5; /* Світло-сірий фон */
scroll-behavior: smooth; /* Плавне прокручування */
overflow-x: hidden; /* Запобігаємо горизонтальній прокрутці всього тіла */
padding: 0; /* Прибираємо стандартний відступ, щоб контролювати його самостійно */
}
/* Стилі для прихованих відповідей та пояснень LLM */
.answer-content, .llm-explanation-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; /* Додаємо перехід для padding */
padding-top: 0; /* Приховуємо padding, коли неактивні */
padding-bottom: 0; /* Приховуємо padding, коли неактивні */
}
.answer-content.active {
max-height: 1000px; /* Достатньо велике значення для відображення вмісту */
padding-top: 1rem; /* Відновлюємо padding, коли активні */
padding-bottom: 1rem;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.llm-explanation-content.active {
max-height: 1000px; /* Достатньо велике значення для відображення вмісту */
padding-top: 1rem; /* Відновлюємо padding, коли активні */
padding-bottom: 1rem;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
/* Стилі для іконки розгортання/згортання */
.toggle-icon {
transition: transform 0.3s ease;
}
.toggle-icon.rotated {
transform: rotate(180deg);
}
/* Стилі для контейнера формул, щоб MathJax працював коректно */
.math-formula {
display: block;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* Стилі для кнопки "Нагору" */
#scrollToTopBtn {
display: none; /* Приховано за замовчуванням */
position: fixed; /* Фіксоване положення */
bottom: 20px; /* Відступ від низу */
right: 20px; /* Відступ від правого краю */
z-index: 99; /* Поверх всіх елементів */
background-color: #3b82f6; /* Синій колір */
color: white; /* Білий текст */
border: none; /* Без рамки */
border-radius: 9999px; /* Кругла форма */
padding: 1rem 1.25rem; /* Відступи */
font-size: 1.5rem; /* Розмір шрифту */
cursor: pointer; /* Курсор-вказівник */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тінь */
transition: background-color 0.3s ease, transform 0.2s ease;
}
#scrollToTopBtn:hover {
background-color: #2563eb; /* Темніший синій при наведенні */
transform: translateY(-2px); /* Невеликий підйом */
}
/* Стилі для горизонтального прокручування білетів */
#tickets-wrapper {
width: 100%; /* Займаємо всю доступну ширину */
overflow-x: auto; /* Дозволяє горизонтальне прокручування */
-webkit-overflow-scrolling: touch; /* Плавне прокручування на iOS */
padding-bottom: 1rem; /* Додаємо відступ для скролбару */
/* max-width та mx-auto для центрування на великих екранах */
max-width: 1024px; /* max-w-4xl */
margin-left: auto;
margin-right: auto;
border-radius: 0.75rem; /* rounded-lg */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
background-color: #ffffff; /* bg-white */
padding-top: 1.5rem; /* p-6 */
padding-bottom: 1.5rem; /* p-6 */
}
#tickets-container {
display: flex;
gap: 1.5rem; /* Відстань між картками */
padding-left: 1.5rem; /* Відступ зліва для першої картки */
padding-right: 1.5rem; /* Відступ справа для останньої картки */
scroll-snap-type: x mandatory; /* Прив'язка до білетів при прокручуванні */
}
.ticket-card {
flex: 0 0 auto; /* Запобігає стисканню карток */
width: calc(100vw - 3rem); /* 100vw - (2 * 1.5rem padding) */
max-width: 600px; /* Максимальна ширина картки на великих екранах */
scroll-snap-align: start; /* Прив'язка до початку картки */
background-color: #f8f8f8; /* Світліший фон для самої картки білета */
border-radius: 0.75rem; /* Закруглені кути */
overflow: hidden; /* Щоб вміст не виходив за межі закруглень */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Легка тінь для картки */
}
@media (min-width: 768px) { /* Для планшетів та десктопів */
.ticket-card {
width: 600px; /* Фіксована ширина на десктопі */
}
#tickets-container {
/* Щоб центр першої картки був по центру екрану на десктопі */
padding-left: calc(50vw - 300px - 0.75rem); /* (50% viewport - half card width - half gap) */
padding-right: calc(50vw - 300px - 0.75rem);
}
}
/* Покращені стилі для питання/відповіді */
.question-item {
background-color: #ffffff; /* Білий фон для кожного питання */
border-radius: 0.75rem; /* Закруглені кути */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Легка тінь */
margin-bottom: 1rem; /* Відступ між питаннями */
overflow: hidden; /* Щоб закруглення працювало коректно */
}
.question-header {
background-color: #f8f8f8; /* Світло-сірий фон для заголовка питання */
padding: 1rem 1.25rem; /* Збільшені відступи */
border-bottom: 1px solid #e0e0e0; /* Розділювач */
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.question-header:hover {
background-color: #f0f0f0; /* Темніший фон при наведенні */
transform: translateY(-1px); /* Невеликий підйом */
}
.answer-content {
background-color: #ffffff; /* Білий фон */
border-top: none; /* Прибрати верхню межу */
}
.llm-explanation-content {
background-color: #fffbeb; /* Дуже світло-жовтий фон для пояснень LLM */
border-left: 4px solid #fcd34d; /* М'яка жовта лінія зліва */
margin-top: 0.5rem; /* Відступ зверху */
border-radius: 0 0 0.75rem 0.75rem; /* Закруглені кути знизу */
}
.llm-explain-btn {
font-size: 0.875rem; /* Збільшимо розмір шрифту кнопки */
padding: 0.5rem 0.75rem; /* Збільшимо відступи */
border-radius: 0.5rem; /* Більш закруглені кути */
white-space: nowrap; /* Запобігаємо розриву тексту кнопки */
}
.loading-spinner {
border: 3px solid rgba(0, 0, 0, 0.1);
border-left-color: #a78bfa; /* Пурпуровий колір */
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="p-4">
<nav class="sticky top-0 z-50 bg-white shadow-md py-3 mb-8 rounded-lg">
<div class="max-w-4xl mx-auto flex flex-wrap justify-center gap-2 px-4">
<span class="font-bold text-gray-700 mr-2 hidden md:inline">Перейти до білета:</span>
<div id="ticket-navigation" class="flex flex-wrap justify-center gap-2"></div>
</div>
</nav>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-xl p-6 md:p-8 mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">Електричні Білети з Фізики</h1>
</div>
<div id="tickets-wrapper">
<div id="tickets-container">
</div>
</div>
<button id="scrollToTopBtn" title="Нагору">↑</button>
<script>
// Дані для білетів
const ticketsData = [
{
number: 1,
questions: [
{
question: "Що називають електричним зарядом?",
answer: "Властивість тіл або частинок взаємодіяти через електричне поле. Це фундаментальна властивість матерії, що визначає її здатність до електромагнітної взаємодії.",
},
{
question: "Назвіть одиницю електричного заряду.",
answer: "Кулон (Кл). Ця одиниця названа на честь французького фізика Шарля Огюстена де Кулона.",
},
{
question: "Які існують роди електричних зарядів? Як вони взаємодіють між собою?",
answer: "Позитивні та негативні; однойменні — відштовхуються, різнойменні — притягуються. Це є основою всіх електромагнітних явищ.",
},
{
question: "Що називають потенціалом електростатичного поля?",
answer: "Енергія, яку має одиничний позитивний заряд у певній точці поля. Потенціал є скалярною величиною, що характеризує енергетичний стан поля.",
},
{
question: "Формула потенціалу точкового заряду:",
answer: "$$\\phi = k\\cdot\\frac{q}{r}$$ де $\\phi$ — потенціал, $k$ — електрична стала, $q$ — величина точкового заряду, $r$ — відстань від заряду до точки. Ця формула показує, як потенціал зменшується зі збільшенням відстані від заряду.",
},
],
},
{
number: 2,
questions: [
{
question: "Що називають електричним полем?",
answer: "Вид матерії, що передає електричну взаємодію між зарядами. Воно оточує кожен електричний заряд і проявляється через силу, що діє на інші заряди.",
},
{
question: "Основні властивості електричного поля:",
answer: "Має напрям, діє на заряд, характеризується напруженістю. Електричне поле є силовим полем, що діє на електричні заряди.",
},
{
question: "Як зображують електричне поле?",
answer: "Силовими (лініями напруженості). Ці лінії допомагають візуалізувати напрямок та інтенсивність поля.",
},
{
question: "Що таке лінії напруженості?",
answer: "Уявні лінії, дотичні до яких показують напрям дії поля. Вони завжди починаються на позитивних зарядах і закінчуються на негативних (або йдуть у нескінченність).",
},
{
question: "Що таке різниця потенціалів (напруга)?",
answer: "Різниця електричних потенціалів між двома точками поля. Це енергія, необхідна для переміщення одиничного заряду між цими точками.",
},
{
question: "Одиниці вимірювання напруги:",
answer: "Вольт (В). Вольт є одиницею вимірювання електричного потенціалу та різниці потенціалів.",
},
],
},
{
number: 3,
questions: [
{
question: "Дайте визначення напруженості електричного поля. Яка це фізична величина (скалярна чи векторна)? В яких одиницях вона вимірюється?",
answer: "Сила, з якою поле діє на одиничний позитивний заряд. Це векторна величина, що має напрямок. Одиниці вимірювання: Н/Кл або В/м. Напруженість є ключовою характеристикою електричного поля.",
},
{
question: "Що таке електростатична індукція? Поясніть це явище.",
answer: "Перерозподіл зарядів у провіднику під дією зовнішнього поля. Це відбувається без безпосереднього контакту із зарядженим тілом.",
},
],
},
{
number: 4,
questions: [
{
question: "Що таке принцип суперпозиції електричних полів? Сформулюйте його.",
answer: "Напруженість поля у точці дорівнює векторній сумі полів від усіх зарядів. Цей принцип дозволяє розраховувати поле, створене складною системою зарядів.",
},
{
question: "Що таке діелектрики в електричному полі? Які види діелектриків ви знаєте?",
answer: "Речовини, що не мають вільних зарядів, але поляризуються в полі. Вони здатні зберігати електричну енергію. Види: Полярні, неполярні, тверді, рідкі, газоподібні.",
},
],
},
{
number: 5,
questions: [
{
question: "Що таке потенціал електричного поля? Яка це фізична величина (скалярна чи векторна)? В яких одиницях вона вимірюється?",
answer: "Енергія одиничного позитивного заряду в полі. Це скалярна величина, що вимірюється у Вольтах (В). Потенціал показує, скільки потенційної енергії має заряд у даній точці.",
},
{
question: "Сформулюйте закон Кулона, запишіть математичний вираз закону та поясніть значення кожної величини.",
answer: "Сила взаємодії між двома точковими зарядами прямо пропорційна добутку модулів цих зарядів і обернено пропорційна квадрату відстані між ними. $$F = k\\cdot\\frac{|q_1\\cdotq_2|}{r^2}$$ де $F$ — сила взаємодії, $k$ — коефіцієнт пропорційності (електрична стала), $q_1$ і $q_2$ — величини зарядів, $r$ — відстань між ними. Цей закон є основним для електростатики.",
},
],
},
{
number: 6,
questions: [
{
question: "Який зв'язок існує між напруженістю електричного поля та потенціалом? Запишіть відповідну формулу для однорідного електричного поля.",
answer: "У однорідному електричному полі напруженість дорівнює відношенню різниці потенціалів до відстані: $$E = \\frac{U}{d}$$ де $E$ — напруженість, $U$ — різниця потенціалів (напруга), $d$ — відстань. Ця формула показує, як поле змінюється залежно від потенціалу.",
},
{
question: "Що таке провідники в електричному полі? Як розподіляються заряди на поверхні провідника в електростатичному полі?",
answer: "Речовини з вільними зарядами, які легко переміщуються. Заряди розподіляються на його поверхні, причому на виступах поверхнева густина заряду більша. Це явище використовується, наприклад, у громовідводах.",
},
],
},
{
number: 7,
questions: [
{
question: "Що таке діелектрична проникність середовища? Який її фізичний зміст?",
answer: "Діелектрична проникність ($\\varepsilon$) — це величина, що характеризує здатність середовища послаблювати електричне поле. Фізичний зміст: чим більша проникність, тим слабше поле в діелектрику, оскільки діелектрик поляризується і створює власне поле, спрямоване протилежно зовнішньому.",
},
{
question: "Що таке різниця потенціалів (напруга)? В яких одиницях вона вимірюється?",
answer: "Різниця потенціалів (напруга) — це робота електричного поля з переміщення одиничного позитивного заряду між двома точками поля. Вона вимірюється у Вольтах (В). Напруга є основною характеристикою електричного кола.",
},
],
},
{
number: 8,
questions: [
{
question: "Що таке діелектрики в електричному полі? Які види діелектриків ви знаєте?",
answer: "Діелектрики — це речовини, які поляризуються під дією електричного поля, але практично не проводять електричний струм. Вони використовуються як ізолятори. Види: тверді (скло, кераміка), рідкі (трансформаторне масло), газоподібні (повітря).",
},
{
question: "Що таке конденсатор? З яких основних елементів він складається?",
answer: "Конденсатор — це пристрій для накопичення електричного заряду та енергії електричного поля. Він складається з двох провідних обкладок (пластин), розділених діелектриком. Діелектрик запобігає прямому протіканню струму між обкладками.",
},
],
},
{
number: 9,
questions: [
{
question: "Як змінюється сила Кулона при зануренні заряджених тіл у діелектричне середовище? Запишіть формулу для її визначення.",
answer: "При зануренні заряджених тіл у діелектричне середовище сила Кулона зменшується в $\\varepsilon$ разів, де $\\varepsilon$ — діелектрична проникність середовища. $$F = k\\cdot\\frac{|q_1\\cdotq_2|}{\\varepsilon\\cdotr^2}$$ Це відбувається тому, що діелектрик послаблює взаємодію між зарядами.",
},
{
question: "Що таке електроємність конденсатора? В яких одиницях вона вимірюється?",
answer: "Електроємність конденсатора ($C$) — це величина, що характеризує його здатність накопичувати електричний заряд. Вона визначається як відношення заряду на обкладках до різниці потенціалів між ними: $$C = \\frac{q}{U}$$ Одиниця електроємності — Фарада (Ф). Фарада є дуже великою одиницею, тому на практиці часто використовують мікрофаради ($\\mu$Ф) або пікофаради (пФ).",
},
],
},
{
number: 10,
questions: [
{
question: "Яке призначення конденсаторів в електричних колах?",
answer: "Конденсатори використовуються для накопичення енергії, фільтрації електричних сигналів, розділення постійного та змінного струму, а також для запуску електродвигунів. Вони є невід'ємною частиною більшості електронних схем.",
},
{
question: "Як визначається напруженість електричного поля точкового заряду? Запишіть відповідну формулу.",
answer: "Напруженість електричного поля точкового заряду ($E$) визначається як сила, що діє на одиничний позитивний заряд, поміщений у дану точку поля. $$E = k\\cdot\\frac{|q|}{r^2}$$ де $k$ — електрична стала, $q$ — величина точкового заряду, $r$ — відстань від заряду до точки. Напруженість зменшується обернено пропорційно квадрату відстані.",
},
],
},
{
number: 11,
questions: [
{
question: "Від чого залежить електроємність плоского конденсатора? Запишіть відповідну формулу.",
answer: "Електроємність плоского конденсатора залежить від площі обкладок ($S$), відстані між ними ($d$) та діелектричної проникності середовища ($\\varepsilon$) між обкладками. $$C = \\varepsilon_0\\cdot\\varepsilon\\cdot\\frac{S}{d}$$ де $\\varepsilon_0$ — електрична стала. Збільшення площі обкладок або діелектричної проникності, а також зменшення відстані між обкладками, призводить до збільшення ємності.",
},
{
question: "Як впливає діелектрик на електричне поле, поміщене між зарядженими тілами?",
answer: "Діелектрик, поміщений між зарядженими тілами, зменшує напруженість електричного поля та збільшує електроємність системи. Це відбувається завдяки поляризації діелектрика, що створює внутрішнє поле, спрямоване протилежно зовнішньому.",
},
],
},
{
number: 12,
questions: [
{
question: "Послідовне з'єднання конденсаторів? Якою є загальна ємність послідовно з'єднаних n конденсаторів?",
answer: "При послідовному з'єднанні конденсаторів заряд на всіх конденсаторах однаковий, а загальна напруга дорівнює сумі напруг на кожному конденсаторі. Загальна ємність розраховується за формулою: $$\\frac{1}{C} = \\frac{1}{C_1} + \\frac{1}{C_2} + ... + \\frac{1}{C_n}$$ При цьому загальна ємність завжди менша за ємність найменшого конденсатора.",
},
{
question: "Чому дорівнює потенціальна енергія взаємодії двох точкових зарядів?",
answer: "Потенціальна енергія взаємодії двох точкових зарядів ($W$) дорівнює роботі, яку необхідно виконати, щоб перемістити один заряд з нескінченності в дану точку поля, створеного іншим зарядом. $$W = k\\cdot\\frac{q_1\\cdotq_2}{r}$$ де $k$ — електрична стала, $q_1$ і $q_2$ — величини зарядів, $r$ — відстань між ними. Знак енергії вказує на характер взаємодії: позитивна для відштовхування, негативна для притягання.",
},
],
},
{
number: 13,
questions: [
{
question: "Яка енергія накопичується в зарядженому конденсаторі? Запишіть формули для визначення цієї енергії.",
answer: "У зарядженому конденсаторі накопичується енергія електричного поля, яка може бути визначена за кількома еквівалентними формулами: $$W = \\frac{q^2}{2C} = \\frac{C\\cdotU^2}{2} = \\frac{qU}{2}$$ де $W$ — енергія, $q$ — заряд, $C$ — ємність, $U$ — напруга. Ця енергія може бути використана для виконання роботи в електричному колі.",
},
{
question: "Як визначають роботу однорідного електричного поля з переміщення заряду в цьому полі? Чи залежить вона від форми траєкторії руху заряду?",
answer: "Робота однорідного електричного поля з переміщення заряду ($A$) визначається як добуток заряду, напруженості поля та відстані, пройденої зарядом у напрямку поля: $$A = q\\cdotE\\cdotd$$ Важливо, що робота електричного поля не залежить від форми траєкторії руху заряду, а лише від початкового та кінцевого положення заряду. Це свідчить про потенціальний характер електростатичного поля.",
},
],
},
{
number: 14,
questions: [
{
question: "Як з'єднуються конденсатори паралельно? Якою є загальна електроємність паралельно з'єднаних конденсаторів?",
answer: "При паралельному з'єднанні конденсаторів напруга на всіх конденсаторах однакова, а загальний заряд дорівнює сумі зарядів на кожному конденсаторі. Загальна електроємність паралельно з'єднаних конденсаторів дорівнює сумі ємностей кожного конденсатора: $$C = C_1 + C_2 + ... + C_n$$ Це дозволяє отримати велику сумарну ємність, використовуючи конденсатори меншої ємності.",
},
{
question: "Що таке провідники в електричному полі? Як розподіляються заряди на поверхні провідника в електростатичному полі?",
answer: "Провідники — це речовини, що містять велику кількість вільних електричних зарядів (наприклад, електрони), які можуть вільно переміщуватися під дією електричного поля. В електростатичному полі заряди в провіднику розподіляються таким чином, що внутрішнє електричне поле дорівнює нулю, а всі надлишкові заряди розташовуються на його поверхні.",
},
],
},
{
number: 15,
questions: [
{
question: "Де застосовуються конденсатори в сучасній техніці? Наведіть приклади.",
answer: "Конденсатори широко застосовуються в сучасній техніці: у телевізорах, комп’ютерах, радіоприймачах, електродвигунах, джерелах живлення, фотоспалахах та багатьох інших електронних пристроях. Вони є незамінними елементами для зберігання енергії, фільтрації сигналів та стабілізації напруги.",
},
{
question: "Що таке електростатична індукція? Поясніть це явище.",
answer: "Електростатична індукція — це явище перерозподілу електричних зарядів у провіднику під дією зовнішнього електричного поля. При цьому провідник залишається електрично нейтральним в цілому, але на його протилежних сторонах з'являються заряди протилежного знаку.",
},
],
},
{
number: 16,
questions: [
{
question: "Що таке робота електричного струму? За якими формулами її можна визначити?",
answer: "Робота електричного струму ($A$) — це енергія, яка перетворюється з електричної в інші види енергії (наприклад, теплову, механічну) при протіканні струму через ділянку кола. Її можна визначити за формулами: $$A = U\\cdotI\\cdott = I^2\\cdotR\\cdott = \\frac{U^2\\cdott}{R}$$ де $U$ — напруга, $I$ — сила струму, $t$ — час, $R$ — опір. Ця робота є мірою енергії, що споживається електричним пристроєм.",
},
{
question: "Як знайти напруженість електричного поля системи точкових зарядів?",
answer: "Напруженість електричного поля системи точкових зарядів ($E$) у будь-якій точці простору дорівнює векторній сумі напруженостей полів, створених кожним зарядом окремо: $$E = E_1 + E_2 + ... + E_n$$ Цей принцип суперпозиції дозволяє аналізувати складні конфігурації зарядів.",
},
],
},
{
number: 17,
questions: [
{
question: "Яка частинка має найменший негативний заряд? Найменший позитивний заряд? Як Ви розумієте твердження, що електричний заряд є дискретним?",
answer: "Найменший негативний заряд має електрон (–e), а найменший позитивний заряд — протон (+e). Твердження, що електричний заряд є дискретним, означає, що заряд будь-якого тіла завжди є цілим кратним елементарному заряду $e$ (заряду електрона або протона), тобто не може існувати заряд, менший за $e$.",
},
{
question: "Що називають потенціалом електростатичного поля? Запишіть формулу для визначення потенціалу точкового заряду.",
answer: "Потенціал електростатичного поля ($\\phi$) — це скалярна фізична величина, що характеризує енергетичні властивості поля і дорівнює потенціальній енергії, яку має одиничний позитивний заряд у певній точці поля. Для точкового заряду потенціал визначається як: $$\\phi = k\\cdot\\frac{q}{r}$$ де $k$ — електрична стала, $q$ — величина точкового заряду, $r$ — відстань від заряду до точки. Потенціал є важливою характеристикою для розрахунку роботи поля.",
},
],
},
{
number: 18,
questions: [
{
question: "Які поверхні називають еквіпотенціальними? Як розташовані лінії напруженості електричного поля відносно еквіпотенціальних поверхонь?",
answer: "Еквіпотенціальними поверхнями називають поверхні, у всіх точках яких потенціал електричного поля однаковий. Лінії напруженості електричного поля завжди розташовані перпендикулярно до еквіпотенціальних поверхонь, вказуючи напрямок найбільшого зменшення потенціалу.",
},
{
question: "Що таке конденсатор? Для чого він призначений?",
answer: "Конденсатор — це двополюсник, призначений для накопичення електричного заряду та енергії електричного поля. Він широко використовується в електроніці для фільтрації, згладжування пульсацій, зберігання енергії та багатьох інших функцій.",
},
],
},
{
number: 19,
questions: [
{
question: "Що називають лінією напруженості електричного поля? Чи можуть лінії напруженості електричного поля перетинатися? Бути паралельними?",
answer: "Лінією напруженості електричного поля називають уявну лінію, дотична до якої в кожній точці збігається з напрямком вектора напруженості поля. Лінії напруженості не можуть перетинатися, оскільки в кожній точці поля вектор напруженості має лише один напрямок; вони можуть бути паралельними лише в однорідному електричному полі.",
},
{
question: "За допомогою яких формул розраховують енергію зарядженого конденсатора?",
answer: "Енергія зарядженого конденсатора може бути розрахована за допомогою наступних формул: $$W = \\frac{q^2}{2C} = \\frac{C\\cdotU^2}{2} = \\frac{qU}{2}$$ де $W$ — енергія, $q$ — заряд на обкладках, $C$ — електроємність, $U$ — напруга між обкладками. Ці формули є взаємозамінними і дозволяють обчислити енергію залежно від відомих параметрів.",
},
],
},
{
number: 20,
questions: [
{
question: "Назвіть основні електростатичні властивості провідників.",
answer: "Основні електростатичні властивості провідників: внутрішнє електричне поле в провіднику в стані рівноваги дорівнює нулю; всі надлишкові заряди розташовуються на поверхні провідника; потенціал всередині провідника і на його поверхні однаковий; лінії напруженості поля перпендикулярні до поверхні провідника. Ці властивості є ключовими для розуміння поведінки провідників у електричному полі.",
},
{
question: "Сформулюйте закон Кулона.",
answer: "Закон Кулона стверджує, що сила взаємодії між двома точковими нерухомими електричними зарядами прямо пропорційна добутку модулів цих зарядів і обернено пропорційна квадрату відстані між ними. $$F = k\\cdot\\frac{|q_1\\cdotq_2|}{r^2}$$ Цей закон є фундаментальним у електростатиці і описує взаємодію зарядів.",
},
],
},
{
number: 21,
questions: [
{
question: "Чому при електризації тертям електризуються обидва тіла? Наведіть приклади.",
answer: "При електризації тертям електризуються обидва тіла, оскільки відбувається перерозподіл електронів: електрони переходять з одного тіла на інше. Наприклад, при терті ебонітової палички об вовну, ебоніт набуває негативного заряду (приймає електрони), а вовна — позитивного (віддає електрони).",
},
{
question: "Що називають електроємністю відокремленого провідника? Якою є її одиниця?",
answer: "Електроємність відокремленого провідника ($C$) — це скалярна фізична величина, що характеризує його здатність накопичувати електричний заряд при зміні його потенціалу. Вона визначається як відношення заряду провідника до його потенціалу: $$C = \\frac{q}{\\phi}$$ Одиниця вимірювання електроємності — Фарада (Ф). Чим більша ємність, тим більше заряду може накопичити провідник при заданому потенціалі.",
},
],
},
{
number: 22,
questions: [
{
question: "Що є основною характеристикою електричного поля? За якою формулою її розраховують?",
answer: "Основною силовою характеристикою електричного поля є напруженість ($E$). Вона визначається як відношення сили ($F$), з якою поле діє на точковий заряд, до величини цього заряду ($q$): $$E = \\frac{F}{q}$$ Напруженість є векторною величиною, що вказує на напрямок і величину дії поля.",
},
{
question: "Як захищають обладнання та прилади від впливу електричного поля?",
answer: "Обладнання та прилади захищають від впливу електричного поля за допомогою електростатичного екранування, яке полягає в оточенні об'єкта провідною оболонкою (металевим заземленим покриттям). Завдяки властивостям провідників, електричне поле всередині такої оболонки дорівнює нулю, що ефективно захищає чутливі елементи.",
},
],
},
{
number: 23,
questions: [
{
question: "Які типи конденсаторів Вам відомі?",
answer: "Існує багато типів конденсаторів, які розрізняються за матеріалом діелектрика, конструкцією та призначенням. До поширених типів належать: паперові, керамічні, електролітичні, плівкові, змінні конденсатори та суперконденсатори. Кожен тип має свої особливості та області застосування.",
},
{
question: "Сформулюйте і запишіть закон збереження електричного заряду.",
answer: "Закон збереження електричного заряду стверджує, що в електрично ізольованій системі алгебраїчна сума електричних зарядів залишається сталою. Це означає, що заряди не можуть зникати або з'являтися з нічого, вони лише перерозподіляються або компенсуються. $$q_1 + q_2 + ... + q_n = \\text{const}$$ Цей закон є одним з фундаментальних законів природи.",
},
],
},
{
number: 24,
questions: [
{
question: "Що таке напруженість електричного поля? Як визначити напруженість поля, створеного точковим зарядом Q?",
answer: "Напруженість електричного поля — це векторна фізична величина, що характеризує силове поле, створене електричними зарядами. Для поля, створеного точковим зарядом $Q$, напруженість визначається за формулою: $$E = k\\cdot\\frac{|Q|}{r^2}$$ де $k$ — електрична стала, $r$ — відстань від заряду до точки. Напрямок вектора напруженості збігається з напрямком сили, що діє на позитивний пробний заряд.",
},
{
question: "Які речовини називають провідниками? Наведіть приклади.",
answer: "Провідниками називають речовини, які добре проводять електричний струм завдяки наявності вільних носіїв заряду (електронів або іонів). До провідників належать метали (мідь, алюміній, срібло, золото), розчини солей, кислот та лугів (електроліти), а також плазма. Вільні заряди в провідниках можуть вільно переміщуватися під дією навіть незначного електричного поля.",
},
],
},
];
// Функція для рендерингу білетів
function renderTickets() {
const ticketsWrapper = document.getElementById('tickets-wrapper');
const ticketsContainer = document.getElementById('tickets-container');
const navContainer = document.getElementById('ticket-navigation');
ticketsContainer.innerHTML = ''; // Очистити контейнер перед додаванням
navContainer.innerHTML = ''; // Очистити навігацію
ticketsData.forEach(ticket => {
// Створення кнопки навігації
const navButton = document.createElement('button');
navButton.className = 'px-3 py-1 bg-blue-500 text-white text-sm rounded-full hover:bg-blue-700 transition duration-200 ease-in-out shadow-sm';
navButton.textContent = ticket.number;
navButton.onclick = () => {
// Прокрутка до відповідного білета в горизонтальному контейнері
const targetTicket = document.getElementById(`ticket-${ticket.number}`);
if (targetTicket) {
targetTicket.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); // Snap to start
}
};
navContainer.appendChild(navButton);
// Створення картки білета
const ticketDiv = document.createElement('div');
ticketDiv.id = `ticket-${ticket.number}`; // Додаємо ID для прокручування
ticketDiv.className = 'ticket-card'; // Застосовуємо новий клас
const ticketHeader = document.createElement('div');
ticketHeader.className = 'bg-blue-600 text-white p-4 font-bold text-xl rounded-t-lg flex justify-between items-center';
ticketHeader.textContent = `Білет № ${ticket.number}`;
ticketDiv.appendChild(ticketHeader);
const questionsList = document.createElement('div');
questionsList.className = 'p-4 md:p-6'; // Зберігаємо відступи всередині картки
ticket.questions.forEach((q, index) => {
const questionItem = document.createElement('div');
questionItem.className = 'question-item'; // Застосовуємо новий клас
const questionHeader = document.createElement('div');
questionHeader.className = 'question-header flex justify-between items-center cursor-pointer';
const questionTextSpan = document.createElement('span');
questionTextSpan.className = 'font-semibold text-gray-800 text-base md:text-lg';
questionTextSpan.textContent = `${index + 1}. ${q.question}`;
questionHeader.appendChild(questionTextSpan);
const headerControls = document.createElement('div');
headerControls.className = 'flex items-center space-x-2';
// Кнопка для пояснення від LLM
const llmExplainBtn = document.createElement('button');
llmExplainBtn.className = 'llm-explain-btn bg-purple-500 text-white shadow-sm flex items-center justify-center';
llmExplainBtn.innerHTML = '✨ Пояснити';
headerControls.appendChild(llmExplainBtn);
const toggleIconSpan = document.createElement('span');
toggleIconSpan.className = 'toggle-icon text-gray-600 text-xl';
toggleIconSpan.textContent = '▼';
headerControls.appendChild(toggleIconSpan);
questionHeader.appendChild(headerControls);
questionItem.appendChild(questionHeader);
const answerContent = document.createElement('div');
answerContent.className = 'answer-content text-gray-700 text-sm md:text-base';
answerContent.innerHTML = q.answer; // MathJax обробить це пізніше
questionItem.appendChild(answerContent);
// Контейнер для пояснення від LLM
const llmExplanationContainer = document.createElement('div');
llmExplanationContainer.className = 'llm-explanation-container';
const llmExplanationContent = document.createElement('div');
llmExplanationContent.className = 'llm-explanation-content text-gray-800 text-sm md:text-base';
llmExplanationContainer.appendChild(llmExplanationContent);
questionItem.appendChild(llmExplanationContainer);
// Обробник подій для розгортання/згортання відповіді
questionHeader.addEventListener('click', (event) => {
// Перевіряємо, чи клік був не на кнопці LLM
if (!event.target.closest('.llm-explain-btn')) {
answerContent.classList.toggle('active');
toggleIconSpan.classList.toggle('rotated');
// Викликаємо MathJax для рендерингу після того, як елемент стане видимим
if (answerContent.classList.contains('active') && typeof MathJax !== 'undefined') {
MathJax.typesetPromise([answerContent]);
}
}
});
// Обробник подій для кнопки пояснення LLM
llmExplainBtn.addEventListener('click', async (event) => {
event.stopPropagation(); // Запобігти спрацьовуванню обробника заголовка питання
const questionText = q.question;
const isContentLoaded = llmExplanationContent.dataset.loaded === 'true';
// Переключити видимість пояснення LLM
llmExplanationContent.classList.toggle('active');
if (llmExplanationContent.classList.contains('active') && !isContentLoaded) {
llmExplainBtn.disabled = true; // Вимкнути кнопку під час завантаження
llmExplainBtn.innerHTML = '<span class="loading-spinner"></span> Завантаження...'; // Показати спінер
llmExplanationContent.innerHTML = '<p class="text-center text-gray-500 py-4">Завантаження пояснення...</p>'; // Початковий текст завантаження
try {
let chatHistory = [];
chatHistory.push({ role: "user", parts: [{ text: `Поясни простими словами українською мовою: "${questionText}"` }] });
const payload = { contents: chatHistory };
const apiKey = ""; // Canvas надасть цей ключ
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.candidates && result.candidates.length > 0 &&
result.candidates[0].content && result.candidates[0].content.parts &&
result.candidates[0].content.parts.length > 0) {
const text = result.candidates[0].content.parts[0].text;
llmExplanationContent.innerHTML = `<p class="font-semibold text-purple-800 mb-2">Пояснення від Gemini:</p>${text}`;
llmExplanationContent.dataset.loaded = 'true'; // Позначити як завантажене
// Викликаємо MathJax для рендерингу після того, як елемент стане видимим
if (typeof MathJax !== 'undefined') {
MathJax.typesetPromise([llmExplanationContent]);
}
} else {
llmExplanationContent.innerHTML = '<p class="text-red-500 py-4">Не вдалося отримати пояснення. Спробуйте ще раз.</p>';
}
} catch (error) {
console.error('Error fetching LLM explanation:', error);
llmExplanationContent.innerHTML = '<p class="text-red-500 py-4">Помилка при завантаженні пояснення. Перевірте підключення до мережі.</p>';
} finally {
llmExplainBtn.disabled = false; // Увімкнути кнопку
llmExplainBtn.innerHTML = '✨ Пояснити'; // Повернути початковий текст
}
}
});
questionsList.appendChild(questionItem);
});
ticketDiv.appendChild(questionsList);
ticketsContainer.appendChild(ticketDiv);
});
// Викликати MathJax для рендерингу всіх формул після завантаження вмісту
// Це потрібно для початкового рендерингу, якщо відповіді не приховані за замовчуванням
if (typeof MathJax !== 'undefined') {
MathJax.typesetPromise();
}
}
// Функція для прокручування догори
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Показати/приховати кнопку "Нагору"
window.onscroll = function() {
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
};
// Додати обробник подій для кнопки "Нагору"
document.getElementById("scrollToTopBtn").addEventListener("click", scrollToTop);
// Запустити рендеринг білетів, коли DOM завантажений
document.addEventListener('DOMContentLoaded', renderTickets);
</script>
</body>
</html>