| Головна » Файли » Інтерактивні ігри, квести » Історія України |
ппп
| 18.08.2025, 16:29 | |
| <div style="max-width: 850px; margin: 0 auto; font-family: 'Segoe UI', Arial, sans-serif; background: #f8f3ee; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.1); overflow: hidden;"> <!-- Заголовок --> <h2 style="background: #8b6e54; color: #fff; text-align: center; padding: 18px; margin: 0; font-size: 1.5em; letter-spacing: 0.5px;"> Флеш-картки: Культура України (XVI–XVII ст.) </h2> <!-- Лічильник --> <div style="padding: 14px; background: #e9e1d4; border-bottom: 1px solid #d4c8b7; text-align: center; color: #7a5c42; font-weight: 600;"> <span id="flashcard_counter_ua">Картка 1 з 10</span> </div> <!-- Флеш-карта --> <div id="flashcard_main_ua" style="height: 310px; perspective: 1000px; margin: 20px; background: #f0e8dc; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.06);"> <div id="flashcard_inner_ua" style="position: relative; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s ease;"> <!-- Лицьовий бік --> <div id="flashcard_front_ua" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; padding: 22px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(135deg, #8b6e54, #a89278); color: #fff;"> <h3 style="margin: 0 0 10px 0; font-size: 1.2em; font-weight: 600;">Питання</h3> <p id="flashcard_question_ua" style="font-size: 1.15em; line-height: 1.6; flex-grow: 1;"></p> <small style="margin-top: 15px; opacity: 0.9; font-size: 0.9em;">натисніть, щоб перевернути</small> </div> <!-- Зворотній бік --> <div id="flashcard_back_ua" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: 22px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(135deg, #5c756c, #7a9586); color: white;"> <h3 style="margin: 0 0 10px 0; font-size: 1.2em; font-weight: 600;">Відповідь</h3> <p id="flashcard_answer_ua" style="font-size: 1.15em; line-height: 1.6; flex-grow: 1;"></p> <small style="margin-top: 15px; opacity: 0.9; font-size: 0.9em;">натисніть, щоб повернути</small> </div> </div> </div> <!-- Навігація --> <div style="padding: 16px; display: flex; justify-content: space-between; background: #f8f3ee;"> <button id="btn_prev_ua" onclick="goPrevCard()" style="padding: 9px 18px; background: #8b6e54; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95em;" disabled>← Попередня</button> <button id="btn_next_ua" onclick="goNextCard()" style="padding: 9px 18px; background: #8b6e54; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95em;">Наступна →</button> </div> </div> <script> // Унікальне ім'я для даних var flashcardDataUa = [ { q: "Що таке Пересопницьке Євангеліє?", a: "Рукописне Євангеліє, створене в 1556–1561 рр. у монастирі біля села Пересопниця. Вважається шедевром української книжкової мініатюри. На ньому складають присягу президенти України." }, { q: "Яке значення мала Острозька академія?", a: "Заснована князем В.К. Острозьким у 1576 р. у м. Острог. Це був перший вищий навчальний заклад на українських землях за європейським зразком. Вивчали грецьку, латинь, церковнослов’янську, філософію, риторику, астрономію." }, { q: "Що таке Львівська братська школа?", a: "Одна з найвідоміших шкіл доби, заснована в 1586 р. Навчання було організоване за європейським зразком, за принципом «семи вільних мистецтв». Готувала освічених діячів для захисту православ’я та української культури." }, { q: "Хто такі спудеї?", a: "Учні братських шкіл і колегіумів. Термін походить від латинського слова 'studeo' — вчуся. Найбідніші жили у бурсі — гуртожитку при школі, утримуваному братством." }, { q: "Як виникла Києво-Могилянська академія?", a: "У 1632 р. архімандрит П. Могила об’єднав Київську братську школу та Лаврську школу. Так було створено Києво-Могилянський колегіум — перший у Східній Європі класичний університет." }, { q: "Що таке вертеп?", a: "Аматорський ляльковий театр, організований учнями братських шкіл. Двоповерховий: згори — релігійні сцени (наприклад, Різдво), знизу — комедії з життя простолюду." }, { q: "Які особливості ренесансу в українській архітектурі?", a: "Ренесанс (XVI ст.) — симетрія, геометричність, античні форми. Приклади: Кругла вежа в Острозі, Львівська ратуша, будинок Корнякта." }, { q: "Що таке українське бароко?", a: "Особливий стиль у мистецтві та архітектурі, що поєднує західноєвропейське бароко з традиціями православного храмового будівництва та народним мистецтвом. Яскраві кольори, пишність, асиметрія." }, { q: "Хто такий Іван Федорович?", a: "Перший український друкар. У 1574 р. у Львові видрукував «Апостол» і «Буквар» для братських шкіл. Це були перші друковані книги на українських землях релігійно-освітнього змісту." }, { q: "Яке значення мали друкарні в розвитку культури?", a: "Друкарні (наприклад, у Львові, Острозі, Києві) сприяли поширенню знань, захисту православ’я, розвитку української мови. Книги стали доступнішими, що підвищило рівень освіти." } ]; var currentIndexUa = 0; // Показати картку function showFlashcardUa(index) { var qEl = document.getElementById("flashcard_question_ua"); var aEl = document.getElementById("flashcard_answer_ua"); var counter = document.getElementById("flashcard_counter_ua"); var inner = document.getElementById("flashcard_inner_ua"); if (qEl && aEl && counter) { qEl.textContent = flashcardDataUa[index].q; aEl.textContent = flashcardDataUa[index].a; counter.textContent = "Картка " + (index + 1) + " з " + flashcardDataUa.length; if (inner) inner.style.transform = "rotateY(0deg)"; } // Кнопки document.getElementById("btn_prev_ua").disabled = (index === 0); document.getElementById("btn_next_ua").disabled = (index === flashcardDataUa.length - 1); } // Перевернути картку function toggleFlipUa() { var inner = document.getElementById("flashcard_inner_ua"); if (inner) { var current = inner.style.transform; inner.style.transform = current === "rotateY(180deg)" ? "rotateY(0deg)" : "rotateY(180deg)"; } } // Наступна картка function goNextCard() { if (currentIndexUa < flashcardDataUa.length - 1) { currentIndexUa++; showFlashcardUa(currentIndexUa); } } // Попередня картка function goPrevCard() { if (currentIndexUa > 0) { currentIndexUa--; showFlashcardUa(currentIndexUa); } } // Чекаємо, коли сторінка повністю завантажиться window.addEventListener ? window.addEventListener("load", initFlashcardsUa) : window.onload = initFlashcardsUa; function initFlashcardsUa() { // Показуємо першу картку showFlashcardUa(0); // Додаємо обробник кліку на картку var card = document.getElementById("flashcard_main_ua"); if (card) { card.onclick = toggleFlipUa; // Для додаткової надійності — додаємо onclick і в HTML, але тут підтверджуємо } else { console.warn("Картка не знайдена — перевірте ID."); } } </script> | |
| Переглядів: 10 | Завантажень: 0 | | |
| Всього коментарів: 0 | |
