Особливості створення елементів інфографіки, використовуючи HTML та JavaScript у Moodle

Размещено на http://www.allbest.ru/

Особливості створення елементів інфографіки, використовуючи html та javascript у Moodle

О.Г Хамула, С.П. Васюта, А.Д. Конюхов Українська академія друкарства

Анотація

Наведено результати дослідження особливостей використання інформаційних технологій та комп'ютерної техніки у дистанційному навчанні. Здійснено теоретичне визначення особливостей ведення дистанційного навчання та інформаційних технологій, що використовуються за таких умов. Обґрунтовано необхідність та актуальність дистанційного навчання особливо під час карантину. Роз'яснено основні переваги ведення дистанційного навчання. Зазначено, що в Україні найбільшої популярності набула система дистанційного навчання Moodle, яка може містити не лише текстову інформацію, а й будь-яку інформацію та може бути представлена у вигляді електронного документа (наприклад, презентації, аудіо-, відеоінформація, тестові завдання, довідники тощо). Сформовано підґрунтя використання інфографіки в поданні начального матеріалу та вказано на її актуальність. Описано механізми створення тестів з елементами інфографіки для системи Moodle з використанням мов програмування HTML та JavaScript. Подання інформації у вигляді інфографіки полегшує процес пізнання матеріалу, роблячи сприйняття більш «об'ємним» і всебічним, а навчання -- цікавим і результативним. Візуалізація поданого навчального матеріалу здатна поширювати знання ефективніше від будь-якого іншого засобу комунікації.

Ключові слова: дистанційна освіта, система MOODLE, мова програмування, HTML, JavaScript, інфографіка.

Abstract

The article presents the results of a study of the features of the use of information technology and computer technology in distance learning. The theoretical definition of the peculiarities of distance learning and information technologies used in this case is carried out. The necessity and urgency of distance learning especially in the conditions of quarantine are substantiated. The advantages of distance learning and their main advantages over the traditional form of learning are explained. It is noted that in the vast majority in Ukraine, the most popular distance learning system is Moodle, compared to other systems, which can contain not only textual information but also any information and can be presented in the form of an electronic document (presentations, audio, video information, test tasks, reference books, etc.).

This system is free, and the program interface is Ukrainianized. The basis for the use of infographics in the presentation of the initial material is formed and its relevance and positive impact on the perception of the submitted material is indicated. Based on the described and known from the literature test “Zharikova” -- determining the level of the manager, it describes the mechanisms for creating tests with infographic elements for the Moodle system using HTML and JavaScript programming languages, as one of the options and listing the program. With this combination, it became possible to visualize the test result. Passing this test is used as a practical task in the study of the discipline “Management of Publishing and Information”. Presenting information in the form of infographics facilitates the process of learning the material, making it more “voluminous” and comprehensive, and learning becomes interesting and effective. The visualization of the presented educational material is able to disseminate knowledge more effectively than any other means of communication.

Keywords: distance learning, platforms, distance education, MOODLE, programming language, HTML, JavaScript, infographics.

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

Аналіз останніх досліджень та публікацій. Нові інформаційні технології, насамперед Інтернет та мультимедійні технології, суттєво впливають на психологічні та світоглядні якості людини. Вони приваблюють своєю інтерактивністю, майже необмеженими можливостями, порівняно з реальним життям, вимагають швидкої реакції, спритності, кмітливості, специфічних навичок. Абітурієнти, які мають навички пошукової діяльності, самостійної роботи, критичного мислення (формуванню яких сприяє дистанційне навчання), є краще підготовленими до зовнішнього незалежного оцінювання, творчої продуктивної діяльності, до самоосвіти і навчання упродовж всього життя [1].

Як показує аналіз літературних джерел, дистанційному навчанню присвячено багато праць вітчизняних і зарубіжних учених, у яких висвітлюються різні аспекти зазначеної форми щодо вищої школи. Дистанційну форму навчання досліджували О.О. Андреєв, В.Ю. Биков, А.М. Гуржій, О.М. Довгялло, М.І. Жалдак, С.М. Косенок, В.М. Кухаренко, В.В. Олійник, Є.М. Смирнова-Трибульська, Б.І. Шуневич та ін. У наведених працях науковці значною мірою розкрили дидактичні можливості дистанційного навчання. А в таких працях як, О.М. Джеджула, М.І. Лазарев, Ю.Г. Лобода, Л.З. Тархан, В.Л. Усков, Т.В. Чемоданова та ін. не було розглянуто шляхів поєднання специфіки формування професійної грамотності й технологій дистанційного навчання.

Що стосується досліджень, присвячених використанню засобів комп'ютерної техніки та технологій в освітньому процесі, які провели такі науковці, як О.І. Артюхіна, І.М. Богданова, І.В. Гавриш, В.Є. Жужжалов, Ш.М. Каланова, Т.І. Коваль, С.М. Конюшенко, В.П. Лінькова, Г.О. Михалін, Н.В. Морзе, З.С. Сейдаметова, С.О. Семеріков, В.О. Трайнев, Ю.В. Триус, О.Я. Фрідланд, О.І. Шапран, Л.А. Шкутіна, В.Ф. Шолохович та ін., було отримано важливі методики підготовки та перепідготовки фахівців різного спрямування в умовах комп'ютеризації освіти [2].

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

Мета статті -- дослідити та оцінити особливості створення інфографіки у системі дистанційного навчання Moodle, використовуючи мови програмування HTML та JavaScript.

Виклад основного матеріалу дослідження. З проведеного аналізу літератури та як показує практика, дистанційна освіта є гнучкою системою отримання знань та вмінь, доступна для всіх учасників освітнього процесу без урахувань періодичності та часових рамок вивчення запропонованого викладачем матеріалу. Для забезпечення такого процесу, створення, передачі та збереження освітнього матеріалу і призначені інформаційні технології. Такі технології отримали назву «системи управління навчанням» (англ. LMS -- Learning Management System) і головне їх призначення -- розробка, управління та розповсюдження начальних матеріалів через Інтернет.

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

Серед сучасних LMS-платформ, які найпопулярніші та дають змогу здійснювати дистанційне навчання, потрібно виокремити Moodle, Sakai, Edx, Coursesites, ATutor, NEO, Edmodo.

З огляду на певні умови найбільшої популярності в Україні набула безкоштовна система Moodle (Modular Object-Oriented Dynamic Learning Environment -- модульне об'єктно-орієнтоване середовище дистанційного навчання). Вона реалізує філософію «педагогіки соціального конструкціонізму», тобто створення та наповнення інформацією власного «культурного мікросвіту», і може застосовуватись як для організації дистанційних курсів, так і для підтримки очного навчання. Навчальні курси, створені в системі Moodle, можуть містити не лише текстову інформацію, а й будь-яку інформацію, яка може бути подана у вигляді електронного документа (презентації, аудіо-, відеоінформація, тестові завдання, довідники тощо).

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

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

Візуальна комунікація є одним з найцікавіших, потенційно корисних і потужних засобів навчання: будь-яке зображення саме собою містить певний сенс, у ньому закладена історія, яку розповісти словами значно складніше й довше, оскільки ця форма комунікації частково або повністю спирається саме на зорове сприйняття [3]. Візуальна мова здатна поширювати знання ефективніше від будь-якого іншого засобу комунікації [4].

Ефективним засобом формування цієї здатності є інфографіка, яка за допомогою знакових засобів візуалізації: графіків, ілюстрацій, дизайну, анімації, карт-схем, електронних ресурсів, відеосюжетів та інших елементів інтерактивності дає змогу творчо сприймати закладені в них великі обсяги інформації [5].

Згідно з дослідженнями, проведеними в Гарварді, від 30 до 40 % осіб найкраще сприймають і запам'ятовують саме візуальні дані [6]. Вирішенню зазначеної проблеми сприяє використання інфографіки. Інфографіка -- один із видів візуальної комунікації, що активно здобуває популярність і вважається ефективною формою передачі контенту [7].

У статті проаналізовано один із можливих варіантів використання елементів інфографіки в навчальному матеріалі, побудованому в системі Moodle, а саме під час проходження тесту «Жарікова» [8]. Система управління навчанням Moodle має багато функцій, що полегшують процес оцінювання знань студентів. Контроль знань здійснюється в системі за допомогою окремого модуля, який пропонує багато видів тестів, надає можливість перетестування з дозволу викладача, можливість захисту від списування шляхом рандомізації питань в тестових завданнях, організації бази даних питань для використання їх у тестах. Система має механізми зберігання поточних оцінок кожного студента за всіма дистанційними курсами, встановлення шкали оцінок, напівавтоматичного перерахунку результатів тестування тощо.

Для побудови тесту «Жарікова» та отримання результату проходження у вигляді такого елемента інфографіки, як графік результату «успішності» нам потрібно здійснити певні кроки.

Крок 1. Створюємо порожній курс в Moodle.

Не можна просто відкрити Moodle і зібрати тест. Спершу доведеться створити курс, вписати назву і тільки потім сюди можна додати контрольні завдання (рис. 1). Така у Moodle логіка. Сам курс буде складатися з 10 тестів ( а, б, в, г, д, е, ж, з, і, к) та форми для введення результатів. На підставі результатів буде виводитись графік. Сторінка з графіком буде написана за допомогою мови програмування JavaScript.

Рис. 1. Створення нового курсу

Крок 2. Додаємо і налаштовуємо тест «Визначення рівня керівника на основі тесту “Жарікова”».

Тепер в курс можна додати тест.

Для цього натисніть Перейти до курсу ^ Додати елементи або ресурс. На екрані з'явиться меню інструментів Moodle. У розділі Елементи обміну виберіть тест (рис. 2).

Спершу вказуємо назву тесту і заповнюємо опис (рис. 3). Важливо також правильно виставити ряд налаштувань.

Інше залишимо за замовчуванням. Натискаємо Зберегти і показати. Система перенаправить нас на нову сторінку (рис. 4).

Рис. 2. Додавання нового ресурсу

Рис. 3. Задавання основних параметрів нового тесту

Рис. 4. Діалогове вікно налаштування тесту

Обираємо Редагувати тест. Наступний етап -- додати завдання.

Крок 3. Збираємо завдання для тесту і заповнюємо тестовий блок.

У хмарної версії Moodle 15 типів питань для точної перевірки знань (рис. 5).

Рис. 5. Вибір типу запитання

Тип питання «Множинний вибір».

Щоб додати завдання на множинний вибір, натисніть Додати ^ Нове запитання ^ Множинний вибір ^ Додати.

Впишіть назву, текст питання і варіанти відповідей з шаблону.

У завданні на множинний вибір може бути один або кілька правильних варіантів відповіді. У нашому прикладі тільки кілька правильних варіантів відповіді. Так і вкажемо в налаштуваннях.

Вказуємо назву питання та вводимо текст питання. Тепер виберемо варіанти відповідей і виставимо для них відповідні оцінки у відсотках (рис. 6).

Відповідно:

1) завжди -- 100 %;

2) часто -- 80 %;

3) інколи -- 60 %;

4) рідко -- 40 %;

5) ніколи --20 %.

Рис. 6. Варіанти відповідей

Інші налаштування залишимо за замовчуванням, натисніть Зберегти. Готове завдання виглядає так (рис. 7).

Рис. 7. Приклад готового завдання

За таким прикладом створюємо 10 тестових блоків ( а, б, в, г, д, е, ж, з, і, к) по 5 питань.

Крок 4. Створення форми для введення даних з тестових блоків.

Тепер нам потрібно створити завдання з формою для введення даних результатів студента. Для цього натисніть Перейти до курсу ^ Додати елементи або ресурс ^ Завдання.

Вказуємо назву та текст завдання. У колонці «Основний зміст» вибираємо «</>» (вставити код), вставляємо наш написаний код HTML із вставкою JavaScript (рис. 8):

Рис. 8 Налаштування параметрів завдання

<!doctype html>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251»> <title>Заголовок</title>

</head>

<body>

<div class=»zzz»>

<div dass=»input»>

<table border=»0»>

<tbody>

<tr>

<td>A <input size=»1%» type=»text» id=»text1»></td>

<td>Б <input size=»1%» type=»text» id=»text2»></td>

<td>В <input size=»1%» type=»text» id=»text3»></td> <td>r <input size=»1%» type=»text» id=»text4»></td>

<td>Д <input size=»1%» type=»text» id=»text5»></td>

<td>E <input size=»1%» type=»text» id=»text6»></td>

<td>Ж <input size=»1%» type=»text» id=»text7»></td>

<td>3 <input size=»1%» type=»text» id=»text8»></td>

<td>I <input size=»1%» type=»text» id=»text9»></td>

<td>K <input size=»1%» type=»text» id=»text10»></td>

</tr>

</tbody>

</table>

<p align=»center»>

<button onclick=»myFunction()»>BdnpaBHm</button>

<input class=»obn» type=»button» onclick=»window.location.reload()» value=»04KTrnrc»>

</p>

</div>

<div class=»canvas»>

<canvas id=»myCan» width=»700» height=»380» style=»border: 0px solid #000000»></canvas> </div>

</div>

<script>

let x = 35; let y = 345;

function myFunction() {

let x1 = +documentgetElementById(«text1»).value; let x2 = +document.getElementById(«text2»).value; let x3 = +document.getElementById(«text3»).value; let x4 = +document.getElementById(«text4»).value; let x5 = +document.getElementById(«text5»).value; let x6 = +document.getElementById(«text6»).value; let x7 = +document.getElementById(«text7»).value; let x8 = +document.getElementById(«text8»).value; let x9 = +document.getElementById(«text9»).value; let x10 = +documentgetElementById(«text10»).value; let arr = [x1, x2, x3, x4, x5, x6, x7, x8, x9, x10];

var k = myCan.getContext(`2d');

k.beginPath();

k.setLineDash([]);

k.lineWidth = 2;

k.strokeStyle = `blue';

k.moveTo(95, -arr[0] * 5 + 345); x = 95;

for (let i = 1; i <= arr.length - 1; i++) { x = x + 60;

k.lineTo(x, -arr[i] * 5 + 345);

}

k.stroke();

x = 35;

let averae = (x1 + x2 + x3 + x4 + x5 + x6 + x7 + x8 + x9 + x10) / arr.length; myFunction3(averae);

}

function myFunction2() { var g = myCan.getContext(`2d'); g.beginPath(); g.setLineDash([]); g.lineWidth = 2; g.strokeStyle = `black';

//Ось Y

g.moveTo(35, 355); g.lineTo(35, 15); g.lineTo(31, 30); g.moveTo(35, 15); g.lineTo(39, 30);

//Ось X

g.moveTo(25, 345); g.lineTo(670, 345); g.lineTo(658, 340); g.moveTo(670, 345); g.lineTo(658, 350); g.stroke();

var l = myCan.getContext(`2d');

beginPath();

lineWidth = 0.7;

strokeStyle = `black'; for (let i = 0; i <= 10; i++) {

moveTo(x, 353);

lineTo(x, 337); x = x + 60;

};

for (let i = 0; i <= 20; i++) {

moveTo(27, y);

lineTo(43, y); y = y - 15;

}

stroke();

}

function myFunction3(averae) { let s = 0;

if (averae < 15) { s = 11.5;

} else if ((averae >= 15) && (averae < 16)) { s = 12.5;

} else if ((averae >= 16) && (averae < 17)) { s = 13.5;

} else { s = 14.5;

}

var m = myCan.getContext(`2d');

m. beginPath();

m.setLineDash([10, 20]);

m.lineWidth = 2;

m.strokeStyle = `red';

m.moveTo(35, -s * 5 + 345);

m.lineTo(670, -s * 5 + 345);

m.stroke();

}

myFunction2();

</script>

</body>

</html>

Зберігаємо наше завдання. Отже, наше завдання складається з 10 форм для введення результатів, відповідно до блоків наших тестів, кнопки «Відправити» та «Очистити» і системи координат. Загальний вигляд нашого завдання можна побачити на рис. 9.

Після введення балів за тести ми побачимо графік «успішності» студента на системі координат (рис. 10).

Рис. 9. Форма внесення даних

Рис. 10. Графік «успішності» відносно введених даних

Навчальні матеріали із залученням сучасних освітніх технологій покликані сприяти активізації всіх видів сприйняття (зокрема й зорового) інформації користувачем у навчальному процесі.

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

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

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

дистанційний навчання інфографіка moodle

Список використаних джерел

1. Хара О.М. Дистанційне навчання математики абітурієнтів у системі довузівської підготовки: автореф. дис. ... канд. пед. наук: 13.00.02. Київ, 2010. 20 с.

2. Алєксєєв О.М. Теоретичні і методичні основи застосування технологій дистанційного навчання дисциплін професійної і практичної підготовки студентів машинобудівних спеціальностей: автореф. дис. на здобуття наукового ступеня д-ра пед. наук. Київ. 2012. 40 с.

3. Sless D. Learning and Visual Communication. New York-Toronto: Croom Helm London John Wiley & Sons, 1981. 208 p.

4. Kepes G. Language of Vision. Chicago: Paul Theobald, 1951. 102 p.

5. Вовк О.В., Черемський Р.А. Інфографіка як ефективний засіб навчання. Системи обробки інформації. 2017. № 4 (150). C. 199-205.

6. Harvard business essentials: business communication. Boston: Harvard Business School Press, 2003. 155 p.

7. Смикиклас М. Инфографика. Коммуникация и влияние при помощи зображений. Санк-Петербург: Питер, 2014. 152 с.

8. Гірняк О.М., Лазановський П.П. Основи менеджменту. Практикум для студентів Української академії друкарства. Львів: Українська академія друкарства, 1996. 72 с.

Размещено на Allbest.ru