Можливості використання JavaScript для розвитку індустрії сучасних засобів навчання

Candidate of Pedagogical Sciences, Associate Professor, Associate Professor at the Department of Mathematical Analysis and Informatics, Poltava National Pedagogical University named after V. G. Korolenko,

Oleksandr MAMON

The article is devoted to the description of the results of the work of the project group, whose main task was the development of a web application that will help children with special needs learn English. JavaScript was chosen as the programming language.

As a result of this work, a project has been developed and is being piloted to bring about positive changes in the education of children with special needs.The introduction of information and communication technologies into the educational process opens up new opportunities, improves the quality of education and makes it more accessible, as well as expands the teacher's capabilities when working with children. The use of information and communication technologies makes it possible for students with special needs to participate fully in the educational process and to receive a quality education.

Key words: inclusive education, web application, information and communication technologies, education of children with special needs.

Постановка проблеми. Останнім часом зростає актуальність розробки та впровадження інформаційно-комунікаційних технології для навчання дітей з особливими освітніми потребами. На становлення та трансформацію сучасної освіти впливає необхідність розвитку інклюзивного навчання. Сучасна стратегія розвитку освіти в усьому світі неможлива без підвищення уваги до інклюзивної освіти.

У Національній стратегії розвитку освіти в Україні передбачається інформатизація освіти, вдосконалення бібліотечного та інформаційно-ресурсного забезпечення освіти і науки; забезпечення створення умов для розвитку індустрії сучасних засобів навчання (навчально-методичних, електронних, технічних, інформаційно-комунікаційних тощо) [8].

Аналіз досліджень та постановка задачі. Розробленню питань впровадження інформаційно-комунікаційних технологій у навчальний процес дітей з особливими освітніми потребами присвячено чимало досліджень. Шляхи і можливості застосування інформаційно-комунікаційних технологій в інклюзивному процесі виокремлено у роботах О. Будник, О. Кондур, І. Дяків [1; 2]. Потенціал інформаційних технологій в інклюзивній освіті розкрито у роботі Г. Діди [3]. Колектив авторів В. Засенко, А. Колупаєва, Б. Мороз, В. Овсяник досліджували функціональні можливості програмних комплексів для інклюзивного навчання дітей зі слухомовленнєвими порушеннями [4; 5]. Вищезазначені питання, розглядались і у роботах закордонних науковців: B. Abery, D. J. Chambers, L. Kincadec, S. Main, P. Sarah, R. Ticha [10; 12].

Попри здобутки науковців, проблема використання інформаційно-комунікаційних технологій у навчальному процесі дітей з особливими освітніми потребами потребує подальшого вивчення. Особливої уваги потрібно приділити розробці відповідного програмного і методичного забезпечення для організації інклюзивної освіти.

Одним із шляхів вирішення даної проблеми є участь науковців у міжнародних проєктах відповідного спрямування. Викладачі кафедри математичного аналізу та інформатики Полтавського національного педагогічного університету імені В.Г. Короленка приймають активну участь у таких міжнародних проєктах. Починаючи з 2020 року викладачі кафедри є учасниками проєкту "WIN: writing for inclusion / письмо в інклюзивній освіті" програми Європейського Союзу Еразмус+ за напрямом КА 201 Стратегічні партнерства в сфері шкільної освіти (2020-1-ES01-KA201-081827). Аплікантом проєкту виступає Фундація Університету Бальмес, Іспанія (Fundacio Universitaria Balmes). До консорціуму входять загальноосвітні та вищі навчальні заклади: Фундація Університету Бальмес (Fundacio Universitaria Balmes) та Школа "Лес Пінедікес" (Escola Les Pinediques) - Іспанія; Полтавський національний педагогічний університет імені В.Г. Короленка та Полтавська загальноосвітня школа І-ІІІ ступенів № 18 - Україна; Університет Флоренції (Universita degli Studi di Firenze) та Освітній заклад "Ле Кюре" (Istituto Comprensivo "Le Cure") - Італія; Будапештський університет імені Лоранда Етвеша (Eotvos Lorand Tudomanyegyetem University) та Білінгвальна школа професійно-технічного спрямування м. Будапешт (Erzsebetvarosi Ket Tani'tasi Nyelvu Altalanos Iskola es Szakgimnazium) - Угорщина.

Основним завданням проєктної групи стала розробка вебдодатку, який допоможе дітям з особливими потребами вивчати англійську мову. На основі порівняльного аналізу мов програмування, а також цілого ряду навчально-методичних джерел, для розв'язання, поставленого, завдання, у якості мови програмування було обрано JavaScript [6; 7; 9]. Розроблений вебдодаток було розміщено на сторінці Фундації Університету Бальмес (Fundacio Universitaria Balmes). Додаток супроводжується відеоін- струкцією по створенню анімаційного продукту, запису відео та звукового супроводу, а також описано можливості додавання субтитрів. Дана розробка спрямовано на реалізацію рівного права на освіту будь-якої особи та впровадження інноваційних, інтерактивних технологій з урахуванням світових тенденцій підвищення якості освіти, демократизації та гуманізації.

Виклад основного матеріалу. Представлений вебдодаток побудовано за принципом конструктора для створення анімаційного продукту, де користувач за власними уподобаннями обирає сцену, героїв і допоміжні об'єкти та створює і озвучує власну історію.

На стартовій сторінці додатку користувачі мають змогу ознайомитися із усіма зображеннями, які можуть бути використані для створення анімації. Зображення розподілені за трьома категоріями:

- герої (люди різного віку, статі, віросповідання, національності тощо);

- фони сцен (локацій), у яких може відбуватися історія;

- об'єкти (живі та неживі), які можуть доповнювати сцени.

Усі зображення зберігаються у відповідній папці, усі зображення однієї категорії мають спільну частину імені (наприклад, для об'єктів - 'obj', після якої іде номер зображення в групі). Зазначимо, що для кожного фону каталог містить два зображення: оскільки фони сцен мають досить великий обсяг, при попередньому їх перегляді використовуються зменшені їх варіанти. Зображення на сторінці розміщуються у таблиці з невидимими межами, наповнення сторінки здійснюється за допомогою Java-скрипта.

Основна сторінка для створення анімацій, розділена на три області: найбільша область призначена для відображення та руху героїв, об'єктів та сцен історії, дві інші області допомагають здійснити вибір зображень, що використовуватимуть в історії (рис. 1).

Рис. 1. Основна сторінка вебдодатку

Макетування сторінки здійснюється за допомогою трьох блокових елементів <div>, для яких визначені такі параметри ширини та висоти:

- область анімації: висота 81 %, ширина 70 %;

- область попереднього перегляду зображень групи (розташована нижче області анімації): висота 15 %, ширина 70 %;

- область вибору зображень (права частина вікна): висота 100 %, ширина 30 %).

Зображення в області попереднього перегляду розташовані в таблиці. При клацанні на деякому елементі таблиці відповідне зображення відображатиметься у правій частині вікна з більшими, ніж в області попереднього перегляду розмірами.

Розглянемо детальніше структуру області вибору об'єктів. У верхній частині розташована таблиця, що складається з 7 рядків і 6 стовпців. Стовпці таблиці відповідають сценам історії. Для кожної сцени можна обрати до 7 зображень: фон, не більше трьох героїв (перші два з них будуть активними, третій - пасивним; особливості поведінки героїв різних типів будуть розглянуті нижче) та не більше трьох об'єктів. Комірка таблиці, відповідна об'єкту, що вибирається, виділяється кольором. Заповнення комірок таблиці для нової історії відбувається послідовно: спочатку зображення першої сцени (фон - герої - об'єкти), потім зображення другої сцени і т. д. За потреби сформований набір зображень згодом може бути відредагований.

Нижче таблиці розташовано область перегляду поточного зображення та елементи керування, перелік яких залежить від етапу роботи над анімацією. У нижній частині області вибору об'єктів розташована підказка, щодо номера сцени та типу об'єкта, які в даний момент обираються, та посилання на стартову сторінку з переліком усіх об'єктів.

Робота над створенням анімації складається з таких етапів:

- вибір зображень;

- редагування вибраних зображень (за потреби);

- анімування історії: переміщення героїв та об'єктів в області анімації.

На етапі вибору об'єктів відбувається заповнення таблиці вибору. Як уже зазначалося, поточна комірка таблиці маркується кольором. Для розташування зображення в цій комірці необхідно здійснити такі дії:

- клацнути по зображенню в області попереднього перегляду (при цьому зображення відобразиться в області перегляду поточного зображення);

- якщо зображення не задовольняє, можна в області попереднього перегляду обрати інше зображення;

- якщо обране зображення задовольняє, слід клацнути по зображенню стрілки вгору , яке розташоване зліва від області перегляду поточного зображення; при цьому:

• поточне зображення відображається в поточній комірці таблиці;

• область перегляду поточного зображення очищується;

• якщо поточною була перша, четверта або остання комірка стовпця, то змінюється вміст області попереднього перегляду, куди завантажуються зображення відповідної категорії: наприклад, якщо заповнювалася четверта комірка (вона відповідає третьому герою сцени), то в області попереднього перегляду перелік героїв замінюється переліком об'єктів);

• якщо поточною була четверта комірка, то справа від області перегляду поточного зображення з'являється елемент, клацання на якому дозволяє пропустити заповнення всіх наступних комірок поточного стовпця і перейти до вибору зображень наступної сцени;

• маркер поточної комірки перемішується на наступну позицію (до наступної клітинки поточного стовпця, а якщо заповнювалася остання комірка стовпця - до першої комірки наступного стовпця).

У випадку, коли вибір усіх об'єктів завершено (поточною була остання комірка таблиці), нижче таблиці з'являються написи "Start" та "Edit objects". Клацання по цих написах дозволяє перейти відповідно до третього (власне створення анімації) або другого (редагування вибору) етапу створення анімації.

Зазначимо, що користувач не зобов'язаний обирати всі сім зображень для кожної зі сцен. Можна клацнути по елементу управління і здійснити перехід до наступного кроку створення анімації.

Розглянемо особливості роботи в режимі редагування вибраних зображень анімації, де є можливим замінити будь-яке зображення таблиці іншим зображенням відповідної групи. У цьому режимі замість напису "Start" знову з'являється область перегляду поточного зображення, а напис "Edit objects" замінюється на "Finish editing". Для заміни зображення в таблиці слід клацнути по ньому лівою клавішею миші. При цьому відбуваються такі дії:

- зображення в таблиці зникає і відображається в області перегляду поточного зображення;

- комірка, у якій розміщувалося зображення, маркується кольором;

- в область попереднього перегляду завантажуються зображення відповідної категорії.

Для розташування нового зображення в таблиці слід виконати такі самі дії, як і при заповненні таблиці вибору. Відмінністю є лише відсутність позначки поточної комірки після перенесення зображення в таблицю. Після того, як завершено редагування, слід клацнути по напису "Finish editing", після чого це напис зникає, а на місці області перегляду поточного зображення з'являється напис "Start".

Клацання по напису "Start" забезпечує перехід до наступного етапу - анімування історії (рис. 2). При цьому напис "Start" замінюється на "next", нижче області анімації з'являється підказка щодо основних принципів керування об'єктами. В області анімації відображається фон, герої та об'єкти першої сцени (зображення першого стовпця таблиці вибору). У лівому нижньому куті області анімації відображається номер поточної сцени.

Рис. 2. Візуалізація історії

На початку першої сцени об'єкти розташовуються у лівій частині області анімації і можуть бути перетягнуті мишею у потрібне місце області. Перетягування реалізується за допомогою реєстрації обробників подій початку і кінця перетягування об'єкта.

Під час перетягування користувач має можливість "приєднати" об'єкти до героя, внаслідок чого "приєднаний" об'єкт рухатиметься разом із героєм. Для "приєднання" необхідно натиснути клавішу Ctrl і потім перемістити об'єкт до героя. Якщо при відпусканні миші зображення об'єкта і героя перетинаються, то об'єкт "приєднується" до героя. Для "від'єднання" об'єкта достатньо просто перетягти об'єкт в інше місце.

За замовчуванням розміри всіх об'єктів в області анімації однакові: ширина і висота зображень дорівнюють 100 пікселям. Разом з тим за своїм змістом об'єкти потребують різних розмірів: приміром, диван має бути більшим за героя, а ліхтарик - помітно менше. Крім того, логіка історії може передбачати зміну розміру об'єкта. Для можливості зміни розмірів об'єктів реєструються події клацання правою клавішею миші та подвійного клацання лівою клавішею миші. У першому випадку (при клацанні на об'єкті правою клавішею миші) розміри об'єкта зменшуються вдвічі (але не менше 25 х 25 пікселів), при подвійному клацанні - збільшуються вдвічі (але не більше 400 х 400 пікселів).

Розглянемо нарешті особливості керування героями. Як уже зазначалося, на сцені можуть бути одночасно присутні три герої: два активні та один пасивний. Пасивний герой за своєю поведінкою подібний об'єкту, тобто реагує на події перетягування мишею. Проте на відміну від об'єктів, герой не "приєднується" до інших героїв і не змінює розміри у результаті клацання миші.

Активні герої можуть плавно переміщуватися в області анімації від своєї поточної позиції до позиції, вказаної клацанням миші. Для цього відслідковується клацання мишею в області анімації. Після клацання змінюється позиція одного з героїв (говоритимемо, що цей герой "знаходиться у фокусі"). Для зміни стану фокусу героя необхідно клацнути по герою. Плавність переміщення героїв забезпечується заданням властивості transition: all 1s.

Після того, як усі дії першої сцени реалізовано, слід клацнути по напису "next" для переходу до наступної сцени. При цьому в області анімації з'являються зображення із другого стовпця таблиці вибору, розташування героїв та об'єктів, розміри об'єктів зберігаються. На останній (шостій) сцені напис "next" зникає для попередження випадкових хибних дій.

Оскільки розробка анімації може передбачати вибір чималої кількості об'єктів і вимагати досить значного (особливо з точки зору молодшого школяра) часу, доцільним є збереження обраної учнями сукупності об'єктів. Використання попередньо створеного набору об'єктів дозволяє сконцентрувати увагу учнів власне на створенні та анімуванні розповіді, порівнювати різні історії з однаковими героями.

Для збереження відомостей про обрані для анімації зображення (тобто зображення, розміщені у таблиці вибору) використовується об'єкт вебсховища LocalStorage. Такий підхід дозволяє зберігати дані між сесіями браузера. Збереження вибору здійснюється при натисненні на зображенні дискети яке знаходиться справа від області перегляду поточного зображення. При цьому у LocalStorage заносяться імена файлів зображень, що відповідають коміркам таблиці. Для завантаження в таблицю вибору зображень із збереженого набору слід оновити сторінку в браузері. За потреби зображення в таблиці можна змінити, перейшовши в режим редагування.

Зазначимо, що при запуску додатку в таблицю вибору також завантажують зображення, які були збережені під час попередньої сесії. Для того, щоб скинути вибір зображень і очистити таблицю вибору, слід клацнути по зображенню кошика що знаходиться нижче кнопки збереження. Після цього всі зображення з таблиці видаляються і здійснюється перехід до першого етапу - вибору зображень.

Оновлення таблиці вибору з LocalStorage може також бути корисним, якщо в процесі анімування історії виникли ускладнення, неточності тощо. Оновивши в такому випадку сторінку, можна повернутися до початку третього етапу і створити розповідь заново.