http://gs-permakultura-v-ukran.mozello.com/blog-gra/ Пермакультура - Блог гра http://gs-permakultura-v-ukran.mozello.com/blog-gra/params/post/4961982/persha-novina Fri, 02 May 2025 18:48:00 +0000 <p> <b></b></p><h2 data-start="139" data-end="191" style="font-weight: bold; font-style: normal;" class="moze-center"><b>Навчаємося читати через гру — легко, весело й ефективно!</b></h2><p></p><hr class="moze-more-divider"><p></p><p><br></p><p><br></p> <meta charset="UTF-8"> <title>Склади слово — інтерактивна гра</title> <style> body { font-family: "Arial", sans-serif; margin: 0; padding: 2rem; background-color: #f8f8ff; text-align: center; } h1 { font-size: 2rem; margin-bottom: 1.5rem; } .syllable-bank { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } .syllable { padding: 1rem; background-color: #ffec99; border: 2px solid #d1a100; border-radius: 10px; font-size: 1.5rem; cursor: grab; } .drop-zone { min-height: 100px; border: 2px dashed #4caf50; border-radius: 12px; padding: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; background-color: #eaffea; margin-bottom: 1rem; } .dropped { background-color: #cce5ff; border: 2px solid #339af0; border-radius: 10px; padding: 0.5rem 1rem; font-size: 1.3rem; } button { padding: 0.5rem 1rem; background-color: #4caf50; border: none; color: white; border-radius: 6px; font-size: 1rem; cursor: pointer; } button:hover { background-color: #43a047; } </style> <h1>Склади слово</h1> <div class="syllable-bank" id="syllableBank"> <!-- Склади створюються динамічно --> </div> <h2>Перетягни склади сюди:</h2> <div class="drop-zone" id="dropZone"></div> <button onclick="resetWord()" fdprocessedid="822dmm">Очистити</button> <script> const syllables = [ { id: 1, text: "МА", type: "голосний" }, { id: 2, text: "па", type: "губний" }, { id: 3, text: "БА", type: "дзвінкий" }, { id: 4, text: "ша", type: "шиплячий" }, { id: 5, text: "ЛЯ", type: "м'який" }, { id: 6, text: "ТА", type: "дзвінкий" }, { id: 7, text: "ТО", type: "дзвінкий" }, ]; const syllableBank = document.getElementById("syllableBank"); const dropZone = document.getElementById("dropZone"); syllables.forEach(s => { const el = document.createElement("div"); el.className = "syllable"; el.draggable = true; el.textContent = s.text; el.dataset.id = s.id; el.addEventListener("dragstart", (e) => { e.dataTransfer.setData("text/plain", s.id); }); syllableBank.appendChild(el); }); dropZone.addEventListener("dragover", (e) => { e.preventDefault(); }); dropZone.addEventListener("drop", (e) => { const id = parseInt(e.dataTransfer.getData("text/plain")); const syllable = syllables.find(s => s.id === id); if (syllable) { const dropEl = document.createElement("div"); dropEl.className = "dropped"; dropEl.textContent = syllable.text; dropZone.appendChild(dropEl); } }); function resetWord() { dropZone.innerHTML = ""; } </script><br> <h2 data-start="139" data-end="191">🎮 Інтерактивна гра «Склади слово» для дітей 3+</h2> <h3 data-start="192" data-end="252">Навчаємося читати через гру — легко, весело й ефективно!</h3> <hr data-start="254" data-end="257"> <h3 data-start="259" data-end="280">🧠 Про що ця гра?</h3> <p data-start="282" data-end="539">Це проста, але захоплива онлайн-гра, яка допомагає дітям віком від 3 років вчитися <b data-start="365" data-end="394">читати, розрізняти склади</b> та <b data-start="398" data-end="416">будувати слова</b>. Гра розроблена за принципом <b data-start="446" data-end="494">візуального, слухового й моторного залучення</b>, що є ключовим у ранньому розвитку мовлення.</p> <hr data-start="541" data-end="544"> <h3 data-start="546" data-end="572">✨ Що потрібно зробити?</h3> <ol data-start="574" data-end="777"> <li data-start="574" data-end="620"> <p data-start="577" data-end="620"><b data-start="577" data-end="620">Дитина бачить набір кольорових складів.</b></p> </li> <li data-start="621" data-end="675"> <p data-start="624" data-end="675">Вона <b data-start="629" data-end="642">перетягує</b> обрані склади у спеціальне поле.</p> </li> <li data-start="676" data-end="717"> <p data-start="679" data-end="717">З них поступово <b data-start="695" data-end="716">складається слово</b>.</p> </li> <li data-start="718" data-end="777"> <p data-start="721" data-end="777">Натисканням на кнопку <b data-start="743" data-end="757">"Очистити"</b> можна почати знову.</p> </li> </ol> <hr data-start="779" data-end="782"> <h3 data-start="784" data-end="807">🧩 Особливості гри:</h3> <ul data-start="809" data-end="1034"> <li data-start="809" data-end="894"> <p data-start="811" data-end="894"><b data-start="811" data-end="830">Кольори складів</b> можуть вказувати на тип звуків: голосні, дзвінкі, шиплячі тощо.</p> </li> <li data-start="895" data-end="958"> <p data-start="897" data-end="958">Гра легко адаптується під будь-який набір літер або тематику.</p> </li> <li data-start="959" data-end="1034"> <p data-start="961" data-end="1034">Не потребує встановлення — достатньо просто відкрити сторінку в браузері.</p> </li> </ul> <hr data-start="1036" data-end="1039"> <h3 data-start="1041" data-end="1063">💡 Як використати?</h3> <ul data-start="1065" data-end="1282"> <li data-start="1065" data-end="1124"> <p data-start="1067" data-end="1124">🏠 <b data-start="1070" data-end="1079">Вдома</b> — як додатковий матеріал для вивчення літер.</p> </li> <li data-start="1125" data-end="1207"> <p data-start="1127" data-end="1207">🎓 <b data-start="1130" data-end="1160">У дитячому садку або школі</b> — для фронтального чи індивідуального заняття.</p> </li> <li data-start="1208" data-end="1282"> <p data-start="1210" data-end="1282">📱 <b data-start="1213" data-end="1242">На планшеті або смартфоні</b> — гра адаптована для сенсорного екрана.</p> </li> </ul> <br>