Автоматизована система дистанційного тестування

ГУСАК, Богдан
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/9403
Назва:	Автоматизована система дистанційного тестування
Автори:	ГРЕСЬКО, Світлана ГУСАК, Богдан
Ключові слова:	ПРЕДМЕТНА ОБЛАСТЬ;АВТОМАТИЗОВАНА СИСТЕМА;ТЕСТ;ДИСТАНЦІЙНЕ ТЕСТУВАННЯ;БАЗА ДАНИХ;JAVASCRIPT;WEBSTORM;POSTGRESQL
Дата публікації:	2022
Короткий огляд (реферат):	Кваліфікаційна робота бакалавра присвячена розробці автоматизованої системи дистанційного тестування. Пояснювальна записка містить 74 сторінок, 31 рисунки, кількість додатків – 2, використано 17 джерел. Метою роботи є розробка автоматизованої системи дистанційного тестування для впровадження дистанційних технологій та педагогічного експерименту щодо трансформації традиційного навчання у дистанційну форму, відповідно до загальних тенденцій розвитку освіти у країнах світу, нормативних документів у галузі інформатизації та дистанційного навчання в Україні. Результатом роботи є унікальна система, яка є універсальною у використанні для кожної з кафедр університету, та може бути застосована у інших навчальних закладах. Кваліфікаційна робота бакалавра складається з 5 розділів. В першому розділі виконано аналіз предметної області. В другому розділі сформульована постановка завдання для проектування автоматизованої системи дистанційного тестування. У третьому розділі розглянуто питання впровадження інформаційних технологій в навчальний процес та виконано огляд онлайн-сервісів для створення тестових завдань. В четвертому розділі виконано обґрунтування вибору засобів розробки автоматизованої системи дистанційного тестування. В п’ятому розділі спроектовано автоматизовану систему дистанційного тестування.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/9403
Розташовується у зібраннях:	123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)
Файли цього матеріалу:
Файл	Опис	Розмір	Формат
1_ТИТУЛКА_Гусак-merged.pdf Restricted Access		2.18 MB	Adobe PDF	Переглянути/Відкрити Запит копії
Показати повний опис матеріалу Перегляд статистики
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему:«Автоматизована система дистанційного
тестування»
ЧДТУ.222104.001 ПЗ
Виконав: студент 2 курсу, групи КМС-2055
спеціальності 123 – «Комп’ютерна інженерія»
за освітньою програмою – «Комп’ютерні системи та
мережі»
Богдан ГУСАК
Керівник
Світлана ГРЕСЬКО
Рецензент
завідувач кафедри КІ та ФД КНУТД
к.ф.-м.н., доцент, професор університету
Михайло ЯРМОЛЕНКО
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ______ Володимир РУДНИЦЬКИЙ
Черкаси 2022 року
Форма № Н-9.01
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет: інформаційних технологій і систем
Кафедра: інформаційної безпеки та комп’ютерної інженерії
Освітньо-кваліфікаційний рівень: Бакалавр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ________ Володимир РУДНИЦЬКИЙ
«11» лютого 2022 року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Гусаку Богдану Романовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи: Автоматизована система дистанційного тестування
Керівник роботи: старший викладач Гресько Світлана Олексіївна
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «07» лютого 2022 р. № 45/04
2. Строк подання студентом роботи: 07.06.2022 року
3. Вихідні дані до роботи:
1. Статичні дані щодо створення чат-бота в месенджері Telegram
2. Середовище розробки SendPulse
Програмне забезпечення: СУБД - FireBird; середовище розробки - Delphi Embarcadero RAD Studio
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
1. Аналіз предметної області
З2а. гПаолсьтніавніодвокмаозсатвідпарноняTдeлleяgпraрmое-кбтотувиа,нонгяляадвтаноамлаотгіивзтоваанпооїстсиаснтоевмкаиздаивсдтаанннцяійного
Ртоезсртоубвкааннчаят-боту для проведення тестування QA-спеціалістів
3. Впровадження інформаційних технологій в навчальний процес
4. Обґрунтування вибору засобів розробки
5. Розробка автоматизованої системи дистанційного тестування
Висновки
Список використаних джерел. Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
1. Специфікація
2. Інструкція користувача
6. Консультанти розділів роботи:
Розділ Прізвище, ініціали Підпис, дата
консультанта завдання видав завдання прийняв
7. Дата видачі завдання: 10 лютого 2022 року
КАЛЕНДАРНИЙ ПЛАН
Термін
№ з/п Назва етапів роботи виконання Примітка
етапів роботи
1 Отримання завдання 10.02 – 12.02 виконано
2 Збір матеріалу 13.02 – 20.02 виконано
3 Обробка матеріалу 21.02 – 01.03 виконано
4 Розробка функціональної схеми автоматизованої виконано
системи тестування 02.03 – 09.03
5 Розробка інтерфейсу системи тестування 10.03 – 02.04 виконано
6 Створення бази даних системи тестування 03.04 – 27.04 виконано
7 Оформлення пояснювальної записки 28.04 – 16.05 виконано
8 Оформлення графічного матеріалу 17.05 – 22.05 виконано
9 Подання кваліфікаційної роботи на відгук та 23.05 – 31.05 виконано
рецензування
10 Захист кваліфікаційної роботи 14.06.22
Студент ___________________________ Богдан ГУСАК
(підпис)
Керівник роботи ___________________________ Світлана ГРЕСЬКО
(підпис)
АНОТАЦІЯ
Кваліфікаційна робота бакалавра присвячена розробці автоматизованої
системи дистанційного тестування.
Пояснювальна записка містить 74 сторінок, 31 рисунки, кількість
додатків – 2, використано 17 джерел.
Метою роботи є розробка автоматизованої системи дистанційного
тестування для впровадження дистанційних технологій та педагогічного
експерименту щодо трансформації традиційного навчання у дистанційну
форму, відповідно до загальних тенденцій розвитку освіти у країнах світу,
нормативних документів у галузі інформатизації та дистанційного навчання в
Україні.
Результатом роботи є унікальна система, яка є універсальною у
використанні для кожної з кафедр університету, та може бути застосована у
інших навчальних закладах.
Кваліфікаційна робота бакалавра складається з 5 розділів.
В першому розділі виконано аналіз предметної області.
В другому розділі сформульована постановка завдання для
проектування автоматизованої системи дистанційного тестування.
У третьому розділі розглянуто питання впровадження інформаційних
технологій в навчальний процес та виконано огляд онлайн-сервісів для
створення тестових завдань.
В четвертому розділі виконано обґрунтування вибору засобів розробки
автоматизованої системи дистанційного тестування.
В п’ятому розділі спроектовано автоматизовану систему дистанційного
тестування.
Ключові слова: ПРЕДМЕТНА ОБЛАСТЬ, АВТОМАТИЗОВАНА
СИСТЕМА, ТЕСТ, ДИСТАНЦІЙНЕ ТЕСТУВАННЯ, БАЗА ДАНИХ,
JAVASCRIPT, WEBSTORM, POSTGRESQL
ANNOTATION
The bachelor's thesis is devoted to the development of an automated system
of remote testing.
The explanatory note contains 74 pages, 31 figures, 2 appendices, and
17 sources.
The aim of the work is to develop an automated distance testing system for
the introduction of distance technologies and pedagogical experiment on the
transformation of traditional learning into distance learning, in accordance with
general trends in education in the world, regulations in the field of informatization
and distance learning in Ukraine.
The result is a unique system that is universal in use for each of the
departments of the university, and can be applied in other educational institutions.
The bachelor's thesis consists of 5 sections.
In the first section the analysis of the subject area is performed.
In the second section the problem statement for designing the automated
system of remote testing is formulated.
The third section discusses the introduction of information technology in the
educational process and reviews the online services for creating test tasks.
In the fourth section the substantiation of the choice of means of
development of the automated system of remote testing is executed.
The fifth section describes an automated remote testing system.
Keywords: SUBJECT AREA, AUTOMATED SYSTEM, TEST, REMOTE
TESTING, DATABASE, JAVASCRIPT, WEBSTORM, POSTGRESQL
ЗМІСТ
ВСТУП……………………………………………………………………… 4
…. 6
1 АНАЛІЗ ПРЕДМЕТНОЇ
ОБЛАСТІ………………………………………... 7
2 ПОСТАНОВКА ЗАВДАННЯ ДЛЯ ПРОЕКТУВАННЯ 7
АВТОМАТИЗОВАНОЇ СИСТЕМИ ДИСТАНЦІЙНОГО 9
ТЕСТУВАННЯ.. 9
2.1 Завдання для 1
реалізації…………………………………………….. 0
2.2 Вимоги до 1
системи…………………………………………………. 0
2.2.1 Стандартні 1
операції………………………………………... 1
2.2.2 Обробка 1
помилок………………………………………….. 1
2.2.3 Продуктивність
програми………………………………… 1
2.2.4 Архітектура 3
проекту………………………………………. 1
2.2.5 Якість 3
коду…………………………………………………. 1
3 ВПРОВАДЖЕННЯ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ В 6
НАВЧАЛЬНИЙ 1
ПРОЦЕС……………………………………………………. 6
3.1 Тестування знань – інструмент підвищення якості 1
навчання…... ЧДТУ.222104.002 ПЗ 7
Змн. Арк. № д3о.к2ум. ОглПяіддпис Доантлайн-сервісів для створення тестових 1
РозрКобив Гресько С.О. а Автоматизована Літ. Лист Листів
Керівник Гусак Б.Р. система 2 74
Рецеанзент Ярмоленко
Н.Контроль Гресько С.О. дистанційного Кафедра ІБ та КІ
ф М.В.
Затвердив Рудницький В.М. тестування гр. КМС-2055
е Пояснювальна записка
д
р
а
К
К
-
0
6
завдань………… 8
3.2.1 Онлайновий сервіс 2
LearningApps.org…………………….. 0
3.2.2 Універсальний конструктор Оnline Test 2
Pad…………….. 2
3.2.3 Програма тестування 2
MyTest……………………………... 3
3.2.4 Google 2
Форми……………………………………………… 3
4 ОБҐРУНТУВАННЯ ВИБОРУ ЗАСОБІВ 2
РОЗРОБКИ……………………. 4
4.1 Мова JavaScript та слой статичної типізації 2
TypeScript…………. 4
4.1.1 Мова
JavaScript……………………………………………..
4.1.2 Слой статичної типізації
TypeScript………………………
4.1.3 Особливості
TypeScript…………………………………….
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 3
а
4.2 Front-end бібліотека 2
React…………………………………………. 5
4.3 База даних та її система менеджменту 2
PostgreSQL……………… 7
4.4 Node.js 2
середовище………………………………………………… 8
4.5 Express 2
Фреймворк………………………………………………… 9
4.6 WebStorm – інтегроване середовище для 3
розробки……………... 0
5 РОЗРОБКА АВТОМАТИЗОВАНОЇ СИСТЕМИ ДИСТАНЦІЙНОГО
ТЕСТУВАННЯ……………………………………………………………….. 3
. 6
5.1 Проектування 3
системи……………………………………………... 6
5.1.1 Розробка через 3
гіпотези…………………………………… 6
5.2 Ініціалізація 4
проекту……………………………………………….. 0
5.2.1 Ініціалізація проекту за допомогою 4
npm………………… 0
5.2.2 Ініціалізація TypeScript 4
конфігурації…………………….. 0
5.2.3 Використання 4
ESLint……………………………………… 1
5.3 Розробка бази 4
даних……………………………………………….. 2
5.4 Розробка інтерфейсу 4
користувача………………………………… 7
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 4
а
5.5 Розробка серверної частини 5
додатку……………………………... 3
5.6 Робота користувача з 5
програмою…………………………………. 4
ВИСНОВКИ………………………………………………………………… 6
… 2
ДОДАТКИ:
А – 482.ЧДТУ.22104-01 Автоматизована система дистанційного
тестування
СПИСОК ВИКОРИСТАНИХ 7
ДЖЕРЕЛ…………………………………….. 3
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 5
а
ВСТУП
Системи освіти значною мірою еволюціонували із розвитком
інформаційних технологій. Поширення і доступність Інтернет-зв’язку в
результаті для кожного дає можливість вільно обмінюватися знаннями та
досвідом. У зв’язку із поширенням епідемії, набули особливої актуальності
засоби дистанційного навчання.
Саме тому, розробка автоматизованої системи для проведення
тестування знань є актуальною. Цільовою аудиторією є створення такого
програмного продукту, який буде направлений на задоволення потреб
користувачів, своєю простотою в користуванні, доступністю на різних
платформах, та безвідмовною роботою.
Метою роботи є розробка автоматизованої системи дистанційного
тестування для впровадження дистанційних технологій та педагогічного
експерименту щодо трансформації традиційного навчання у дистанційну
форму, відповідно до загальних тенденцій розвитку освіти у країнах світу,
нормативних документів у галузі інформатизації та дистанційного навчання в
Україні.
Оскільки робота є комплексною, її можна розділити на два модулі –
модулі студента, та модуль викладача. Цілком доречне зауваження щодо
відсутності модуля адміністратора, але це рішення було прийнято свідомо,
тому що, по-перше – це спростить нашу систему, а по-друге – викладач сам
буде адмініструвати створені тести, в рамках своїх функціональних
можливостей та власного розсуду.
Головною задачею є створення Web-модуля для користувача.
У відповідності до поставленої мети необхідно виконати наступні
задачі:
 реалізувати архітектуру системи;
 реалізувати базу даних;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 6
а
 реалізувати серверну частину;
 реалізувати користувацький інтерфейс, який буде простим та
приємним в користуванні;
 реалізувати проміжний інтерфейс між клієнтом та сервером;
 провести тестування веб-додатку для перевірки можливих варіантів
користування та виправити виявлені дефекти;
 розробити інструкцію користувача.
Результатом роботи є унікальна система, яка є універсальною у
використанні для кожної з кафедр університету, та може бути застосована у
інших навчальних закладах.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 7
а
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
Контроль знань та рівня якості засвоєння матеріалу студентами є
важливою частиною процесу освіти. Завдяки ньому забезпечується
зворотний зв’язок студента, адже, він дає визначення рівня його знань з
метою організації якісного управління процесами освіти.
Використання інформаційних технологій в освітньому процесі
передбачає його власна концепція розвитку, адже зміст та структура
професійної підготовки студентів без їх використання, в результаті,
призводить до неконкурентоспроможні на ринку праці студента, який не
володіє базовими навичками використання інформаційних систем.
Враховуючи складне становище в соціальній та політичній сфері, а
також, в умовах пандемії та війни, здобувачі вищої освіти, фахівці-практики,
викладачі та всі інші працівники вищих навчальних закладів змушені
пристосовуватись до змін в організації контролю знань та комунікувати за
допомогою технологій відеоконференцій та інтернет-трансляцій, де
проводиться науково-дослідницька робота студентів, дистанційна взаємодія
викладача та студента.
Перевагою автоматизованої системи дистанційного тестування є
підвищення ефективності навчання студентів, надаючи їм більше
можливостей, навіть з використанням пошукових систем. Для надання
правильної відповіді студент вимушений напружувати свій мозок, що вже є
досить корисно, а також проходити автоматизований контроль знань, що
дозволяє викладачу не брати участь в оцінюванні, а також звільняє його від
застарілих стандартів ведення паперового обліку контролю знань студентів.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 8
а
2 ПОСТАНОВКА ЗАВДАННЯ ДЛЯ ПРОЕКТУВАННЯ
АВТОМАТИЗОВАНОЇ СИСТЕМИ ДИСТАНЦІЙНОГО ТЕСТУВАННЯ
Мета роботи – це створення автоматизованої системи для проведення
дистанційного тестування. В результаті збору інформації під час
проходження виробничої практики було проведено збір даних про
організацію процесу розробки, правил для дотримання та консультації при
виборі технологій.
2.1 Завдання для реалізації
На сьогодні, система проведення тестування у вищих навчальних
закладах має ряд протиріч. Адже, в епоху технологічного прогресу ми
зустрічаємось із конфліктом традиційних засобів ведення документообігу у
вищих навчальних закладах проти застосування хмарних сховищ та
дистанційного ведення освітнього процесу. Це звички, які ми отримали у
спадок від радянської системи освіти, адже у багатьох закладах вищої освіти
та документація, яка відображає хід навчального процесу, який є
найважливішим виробничим процесом цієї установи, досі формуються та
зберігаються у вигляді паперових папок з різноманітними звітностями,
відомостями та списками. З одного боку – розвиток технологій спонукає
перейти до використання більш сучасних засобів ведення навчального
процесу та змушує публікувати нові статті, праці та труди переважно у
цифровому форматі, а з другого боку – велика кількість ресурсів, необхідна
для того, щоб перенести всю інформацію з паперових носіїв в
комп'ютеризовані інформаційні системи.
Щоб позбутися цих суперечностей, потрібно відмовитися від старих
кліше та йти в ногу з часом. Дедалі ширшого застосування набувають
комп’ютеризовані інформаційні системи, які впорядковують, допомагають
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 9
а
структурувати та автоматизувати цю сферу діяльності, раціональне
використання інформаційних потоків розвантажує персонал від одноманітної
рутинної роботи, пропонуючи можливість в будь-який час бути в потрібному
місці для викладачів та студентів.
Мета проекту – створити програмний продукт, який забезпечить
викладачам освітніх закладів та їх студентам дистанційно проводити
тестування.
Ця система повинна відрізнятись від чинного процесу проведення
тестування та надавати користувачам можливість дистанційно пройти
тестування знань, використовуючи зручний та простий користувацький
інтерфейс, який ми повинні отримати в результаті проектування.
Не швидко ми підійшли до першого етапу розробки програмного
забезпечення – проектування. Для визначення загальних задач, які повинні
вирішуватися системою було взято до уваги, те що ми маємо дві основні
ролі:
 лектор – той, хто створює та оцінює тест;
 студент – той, хто проходить та очікує свою оцінку.
Лектор повинен мати можливість:
 створити тест та наповнити його питаннями;
 редагувати тести;
 створювати групи;
 додавати в них студентів;
 запрошувати їх для проходження тесту;
 переглядати результати їх проходження студентами.
Студенти повинні мати можливість:
 знайти потрібний тест для його проходження;
 пройти тест;
 переглядати результати пройдених тестів.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 10
а
Основні ролі користувача будуть мати адміністратор та учень.
Відповідно, у них повинен бути присутній наступний функціонал:
 реєстрація та авторизація для користувачів системи;
 надання можливості редагування БД адміністратору;
 відображення вмісту БД учню у вигляді навчального матеріалу;
 надання можливості проходження тестів учню;
 відображення результатів проходження тестів у вигляді оцінок;
 надання можливості пошуку необхідної інформації учню.
2.2 Вимоги до системи
В проектованій системі дистанційного тестування повинні бути
реалізовані стандартні операції. Під стандартними операціями розуміються
такі області професійної діяльності розробника програмного забезпечення,
які повторюються від проекту в проект.
2.2.1 Стандартні операції
Стандартні операції – це область, яка потребує стандартизації для
переведення в зручний для розуміння формат і трансляції знань (патернів)
серед спільноти.
Система повинна реалізовувати такі стандартні операції:
 механізми реєстрації та авторизації;
 форми введення даних;
 таблиці відображення даних із фільтрацією;
 REST API з JWT (JSON Web Token) та валідацією.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 11
а
2.2.2 Обробка помилок
Обробка помилок та виняткових ситуацій – це механізми суттєво
відрізняються у сфері використання. Важливо розрізняти ситуації, у яких
доцільно їх застосовувати [1].
Прикладом може бути функція перевірки даних форми введення (form
validation). Некоректні дані в полі введення призводять до створення
повідомлення про помилку. Тобто перевіряючи дані, ви обробляєте помилку.
Її виникнення заплановане під час проектування функції та є її частиною.
Тепер уявіть, що ви перевіряєте емейл на унікальність і, для цього,
звертаєтесь до бази даних (БД). Припускаючи, що у якийсь момент БД може
перестати відповідати, і ви створите обробник виключення. Основним
маркером виключення є те, що ви можете видалити з коду його обробку та
код продовжує виконувати функцію для якої він розроблявся.
2.2.3 Продуктивність програми
Сучасні користувачі дуже вимогливі до продуктивності програми, а,
якщо висловитися більш точно, то на час очікування дії від системи (що,
зауважте, не одне й теж). Швидкість роботи програми впливає на
відвідуваність сервісів (втрата від 5 до 20% цільових дій користувача),
користувачі відмовляються від використання програмних систем через довге
очікування або віддають перевагу конкуруючим сервісам. Пошукові системи
песимізують сервіси, що довго завантажуються, в результатах пошуку [2].
Отже, потрібно приділити особливу увагу до таких частин програми:
1) Затримка відповіді програми:
 0 - 100 мс: миттєва реакція на дію користувача;
 100 – 300 мс: ледь помітна затримка;
 300 - 1000 мс: відчутні очікування;
 1000+ мс: початок втрати концентрації на завдання.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 12
а
2) Продуктивність інтерфейсу користувача. Для забезпечення швидкої
реакції системи використовують:
 профілювання та оптимізацію продуктивності;
 відображення прогресора (спінера);
 відображення заглушок до завантаження вмісту.
3) Відстеження продуктивності програми.
Існують програмні рішення, які дозволяють моніторити продуктивність
додатків як на фазі розробки так і у фазі промислової експлуатації
(наприклад NewRelic). Вони бувають внутрішні (підключаються до самого
проекту) і зовнішні (що здійснюють моніторинг з боку користувача, що
взаємодіє з системою).
2.2.4 Архітектура проекту
Архітектура проекту – це структура програми чи програмного сервісу,
що включає програмні компоненти, видимі зовні властивості цих
компонентів, і. навіть, відносини з-поміж них.
Патерни побудови програмних систем (best practices або шаблони
проектування) – це узагальнені архітектури (чи частини) на вирішення
певних, часто вузькоспеціалізованих, проблем.
При розробці автоматизованої системи дистанційного тестування ми
реалізуємо клієнт серверну архітектуру, де використовуємо для серверної
частини шаблон проектування розподілених додатків - REST API.
2.2.5 Якість коду
Під якістю коду розуміються його характерні ознаки та властивості.
Вони можуть відрізнятися залежно від конкретних бізнес-завдань організації
та потреб команди. І хоча ми не маємо точного переліку контрольних
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 13
а
показників, проте існує кілька загальних критеріїв, які перелічені нижче, що
відрізняють якісний код від поганого. Саме їх ми будемо дотримуватись.
Ознаки якісного коду:
 Правильність – це відповідність потребам бізнесу, вирішуваній
проблемі. Важливо також розрізняти консистентність, тобто
логічність/правильність коду та зручність використання, які між собою
не пов'язані. Для зручності використання іноді доводиться
структурувати код, інтерфейси і дані не так як правильно, так як з цим
кодом зручніше взаємодіяти (отримувати, обробляти дані).
 Простота коду, у тому числі, написання такого коду, що не містить
явного та прихованого дублювання.
 Зрозумілість – ми пишемо код зрозумілий людині, а не компілятору.
 Тестованість та тестопридатність. Код написаний у вигляді
абстракцій зі зрозумілими інтерфейсами, для внутрішньої логіки легко
написати тест.
 Розширюваність. Архітектура програми зрозуміла і в код просто
додавати нові функції.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 14
а
3 ВПРОВАДЖЕННЯ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ В
НАВЧАЛЬНИЙ ПРОЦЕС
3.1 Тестування знань – інструмент підвищення якості навчання
На даний час в Україні триває процес стрімкого наповнення вищої
освіти новими засобами інформаційних технологій, які призводять до
необхідності якісної оцінки знань, використовуючи всі наявні сучасні методи
навчального процесу. Швидкий розвиток інформаційних технологій,
наповнює суспільство новими можливостями, які набагато полегшують
діяльність людини в усіх сферах життя [3].
Найважливішим компонентом і складовою частиною навчального
процесу є контроль за навчальною діяльністю студентів, призначений для
визначення успішності навчання кожного студента, аналізу отриманих
результатів та корекції подальшого процесу навчання. Інструментом
підвищення якості освіти разом із реформуванням змісту освіти виступає
вдосконалення системи оцінювання, модернізація діагностики навчання.
Традиційні системи контролю знань сформувалися історично разом з
іншими елементами системи освіти і на сьогодні мають дуже серйозні
недоліки: неможливість автоматичної обробки результатів тестування,
велика кількість рутинної роботи, що полягає на викладача під час
організації тестування, дуже мала швидкість обробки результатів, а головне –
необ’єктивність оцінок тестування, їх умовно-наближений характер. В
умовах стрімкого зростання інформаційних технологій неавтоматизовані
системи тестування знань виглядають архаїчно. Тому дуже актуальним
завданням є автоматизація процесу контролю знань, розробка комп’ютерних
систем тестування.
У системі вищої освіти все більш важливою стає інформатизація та
комп’ютеризація. Сьогодні немислимо уявити життя без нових
інформаційних технологій, які допомагають якісніше передавати, засвоювати
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 15
а
й перевіряти матеріал, тому питання розробки і впровадження електронної
форми підсумкового та тестового контролю є актуальним при підвищенні
ефективності та якості навчання.
Важливу роль під час організації навчального процесу на основі будь-
якої освітньої технології відіграє контроль отриманого рівня знань.
Процедура контролю в процесі навчання виконує функцію констатації факту
з метою отримання якісного рівня готовності студента [4].
Однією з інноваційних форм інформатизованої системи освіти є
тестування. Ця форма, надзвичайно популярна за рубежем, в останні
десятиліття активно впроваджується і в Україні. Цю систему було визначено
однією з кращих в Європі. Дану практику дедалі частіше впроваджують інші
вищі навчальні заклади. Тому в підготовці молодшого спеціаліста
використання тестування як методу контролю та оцінки знань є актуальним.
Тест як система завдань специфічної форми і відповідного змісту є
науково обґрунтованим інструментом оцінювання знань, умінь і навичок
студентів, допомагає здійснювати індивідуальний контроль результатів
навчання кожного з них, мобільно керувати навчально-виховним процесом.
Порівняно з традиційними формами контролю знань (контрольна робота,
іспит, залік, диференційованих залік.) тестування нерідко виявляється більш
ефективно. Адже недостатньо оцінити рівень знань, треба спрогнозувати, як
студент зможе ці знання використати. Тобто, зростає роль психологічного
тестування.
Проведення on-line електронного контролю знань є основою отримання
об'єктивної незалежної оцінки рівня навчальних досягнень здобувачів (знань,
інтелектуальних умінь і практичних навичок).
Під on-line електронним контролем розуміють процедуру, що дозволяє
оцінити рівень засвоєння і розуміння досліджуваного матеріалу з метою
управління поточним навчальним процесом і забезпечення індивідуалізації
навчання в електронному середовищі. У сучасній теорії та практиці
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 16
а
тестового контролю нараховується понад 20 різновидів тестів: залежно від
мети, характеру та функцій контролю, характеру, форми відповіді.
Тестові завдання можна розділити на дві групи:
 тестові завдання закритого типу (кожне питання супроводжується
готовими варіантами відповідей, з яких необхідно вибрати один або
кілька правильних);
 тестові завдання відкритого типу (на кожне питання випробовуваний
повинен запропонувати свою відповідь: дописати слово,
словосполучення, пропозиція, знак, формулу і т.д.).
Рисунок 3.1 – Класифікація тестових завдань
Інформація в питанні тесту може подаватись у будь-якій формі –
тексту, графічного зображення, звукового повідомлення, відео сюжету,
формули тощо. Дуже важливим при проведені тестового контролю є
дотримання організаційного моменту (пояснення мети, порядку виконання та
оформлення тесту, визначення часу та його виконання, забезпечення кожного
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 17
а
студента бланком відповідей стандартного зразка, що великою мірою
заощаджує час і студента, і викладача).
Тестові завдання значно скорочують час очікування студентами оцінки,
що є суттєвим фактором – к психологічним, так і виховним.
У сучасному інформаційному суспільстві можна зустріти різні тестові
оболонки, онлайн-сервіси для створення інтерактивних вправ та тестових
завдань.
3.2 Огляд онлайн-сервісів для створення тестових завдань
3.2.1 Онлайновий сервіс LearningApps.org
LearningApps.org – онлайновий сервіс, який дозволяє створювати
інтерактивні вправи. Він є конструктором для розробки різноманітних
завдань з різних предметних галузей для використанням і на заняттях і в
позаурочний час.
Рисунок 3.2 – Онлайновий сервіс LearningApps.org
Сервіс Learningapps є додатком для підтримки освітніх процесів у
навчальних закладах різних типів. Конструктор Learningapps призначений
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 18
а
для розробки, зберігання інтерактивних завдань з різних предметних
дисциплін, за допомогою яких студенти можуть перевірити і закріпити свої
знання в ігровій формі, що сприяє формуванню їх пізнавального інтересу.
Основна ідея інтерактивних завдань полягає в тому, що здобувачі
освіти можуть перевірити і закріпити свої знання в ігровій формі, що сприяє
формуванню пізнавального інтересу [5].
Треба всього лиш уважно заповнити всі поля реєстраційної форми і
потім зайти під своїм створеним акаунтом. Бажано вказувати свої дійсні дані
аби потім вашим студентам і колегам було зрозуміло, що це ваша авторська
робота (автори робіт відображаються на посиланні на вправу).
Перш ніж розпочати створення власних інтерактивних завдань з
колекції шаблонів, пропонованих сайтом, слід познайомитися з галереєю
сервісу. Для цього натисніть «Перегляд вправ», виберіть навчальний предмет
і ознайомтеся з роботами колег: обираємо в полі "Категорія" необхідну
предметну галузь (ці галузі вказують автори при створенні вправи).
Кількість онлайн–ресурсів зростає з космічною швидкістю. Безумовно,
користувач вагається, що йому вибрати.
Конструктори тестів займають особливе місце. Вони значно
допомагають викладачу в організації оперативного контролю знань.
Насамперед, вчителю необхідно визначити для себе пріоритети: які тести
йому потрібні і в якому форматі.
Зрозуміло, складаючи тест, викладач повинен чітко орієнтуватися або
на дистанційне навчання, або на роботу в комп’ютерному класі, або на
групові та фронтальні форми роботи в аудиторії з інтерактивною дошкою,
мобільними пристроями.
3.2.2 Універсальний конструктор Оnline Test Pad
Серед лінійки онлайн–конструкторів тестів особливе місце посідає
Оnline Test Pad – безкоштовний універсальний конструктор, за допомогою
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 19
а
якого можна створити цілу палітру цифрових навчальних завдань: тестів,
кросвордів, сканвордів, опитувань, логічних ігор, діалогів тощо.
Рисунок 3.3 – Універсальний конструктор Оnline Test Pad
Важлива перевага конструктора: він доступний не тільки англійською,
а й українською та іншими мовами. Платформа пропонує складання тестів:
альтернативних, з вибором кількох правильних відповідей, цифрового
диктанту, на відповідність, на відновлення послідовності [6].
З огляду на вікові особливості студентів, викладач може скористатися
також конструктором кросвордів. Можна скласти класичний кросворд,
сканворд (скандинавський кросворд), японський кросворд, угорський
кросворд (філворд).
Отже, це гарний набір інструментів для дистанційного навчання.
Конструктор тестів онлайн орієнтований на викладачів шкіл,
профтехучилищ, коледжів, інститутів. Він невибагливий та простий у роботі.
Основні можливості платформи:
 зручне складання й редагування питань і відповідей завдань, в режимі
онлайн;
 складання списків учнів, розподіл їх за навчальними групами;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 20
а
 гнучке налаштування завдань дозволяє вказувати кількість питань,
організовувати фільтрацію питань, об’єднувати питання з різних тестів
(дисциплін) в одному завданні;
 ввімкнення таймера – тестування онлайн закінчується після закінчення
зазначеного часу;
 налаштування інтерфейсу тестових завдань – дозволяє налаштовувати
зміст виведення на екран, таких як номери питань, результатів
відповідей, відповідь одним кліком або кнопкою;
 перегляд результатів іспиту містить: прізвище учня, кількість
допущених помилок з їх деталізацією, час початку іспиту, час
закінчення. Результати іспиту зберігаються в системі 30 днів після їх
здачі;
 тренажер надає також студентам можливість провести тренування
перед іспитом, відповідаючи на всі питання, які можуть увійти в іспит,
з підказками.
3.2.3 Програма тестування MyTest
MyTest – це система програм – програма тестування учнів, редактор
тестів і журнал результатів – для створення і проведення комп'ютерного
тестування, збору та аналізу результатів, виставлення оцінки за вказаною в
тесті шкалою. Програма легка і зручна у використанні.
Рисунок 3.4 – Програма тестування MyTest
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 21
а
Для створення тестів є дуже зручний редактор тестів з дружнім
інтерфейсом.
Програма MyTest працює з такими типами завдань: одиночний вибір,
множинний вибір, встановлення порядку проходження, встановлення
відповідності, ручне введення числа, ручне введення тексту, вибір місця на
зображенні.
Кожен тест має оптимальний час тестування, зменшення або
перевищення якого знижує якісні показники тесту. Тому, в настройках тесту,
передбачено обмеження часу виконання як всього тесту, так і будь-якої
відповіді на завдання (для різних завдань можна виставити різний час).
Параметри тестування, завдання, зображення до завдань – все
зберігається в одному файлі тесту. Ніяких баз даних, ніяких зайвих файлів -
один тест - один файл. Файл з тестом зашифрований і стиснутий [7].
І, нарешті, при правильному відборі контрольного матеріалу зміст
тесту може бути використано не тільки для контролю, але і для навчання.
Використання тестових завдань в автоматизованих контрольно-навчальних
програмах дозволяє студенту самостійно виявляти прогалини в структурі
своїх знань і вживати заходів для їх ліквідації. У таких випадках можна
говорити про значний навчальний потенціал тестових завдань, використання
якого стане одним з ефективних напрямків практичної реалізації принципу
єдності і взаємозв'язку навчання і контролю.
3.2.4 Google Форми
Google Форми – це частина офісного інструментарію Google Drive.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 22
а
Рисунок 3.5 – Google Форми
Мабуть, це один з найшвидших і простих способів створити своє
опитування або тест: пишемо завдання, вибираємо тип відповіді (вибір з
кількох варіантів, написання власного) – готово. Одержаний тест можна
відправити студентам електронною поштою або вбудувати на свій сайт за
допомогою спеціального коду. Для прискорення роботи можна додати плагін
Flubaroo – він автоматично перевіряє відповіді учнів і ставить оцінки
відповідно до заданих критеріїв. Форми абсолютно безкоштовні – для
використання ресурсу потрібно лише мати акаунт Google [8].
Таким чином, можна сказати, що тестування це хороший інструмент
викладача, головне грамотно його використовувати.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 23
а
4 ОБҐРУНТУВАННЯ ВИБОРУ ЗАСОБІВ РОЗРОБКИ
Сценарій в кіно – це документ, де детально описана кожна сцена і
діалоги персонажів. На веб-сторінці сценарій працює схожим чином, він
описує те, як її елементи будуть реагувати на взаємодію з ними.
В інтернеті кожен сайт побудований за допомогою трьох основних
технологій:
 HTML (HyperText Markup Language);
 CSS (Cascade Style Sheets);
 JS (JavaScript).
HTML та CSS – це база для будь-якого проекту, веб чи мобільного
додатку. Саме розуміння та коректне використання можливостей HTML/CSS
створюють зовнішній вигляд та сформує перше враження користувача [9].
JavaScript – це лише інструмент маніпуляції HTML. Знаючи лише JS
ви можете описувати сценарії, створювати функціональні додатки. Але без
CSS вони не будуть привабливими та зручними [10].
Процес програмування потребує дотримання правил написання коду. З
розвитком проекту, збільшується кількість коду, і, внаслідок, пропорційно
росте його складність, тривалість часу, який потрібен для того, щоб
розібратися, як саме працює той чи інший компонент. Часто в проектах з
відкритим кодом можна легко знайти помилкові рішення на етапі
проектування структури та написання коду. Найчастіше зустрічаються
«неявні» залежності, коли якась змінна використовується в функції, а сама
вона визначена в окремому файлі, наприклад файл «config.json». Такі
залежності ускладнюють налагодження програми та змушують
використовувати налагоджувач (debugger), який вбудований в нашу середу
розробки програмного забезпечення – Jetbrains WebStorm.
Налагоджувач є однією з найважливіших функцій WebStorm. За
допомогою WebStorm ви можете налагоджувати всі види програм, написаних
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 24
а
на JavaScript, TypeScript або Dart: Node.js, програми React Native і Electron і,
звичайно, клієнтські програми, які написані за допомогою різних
фреймворків. Крім того, ви також можете налагоджувати модульні тести та
створювати сценарії. Однією з головних переваг використання
налагоджувача всередині IDE є те, що ви встановлюєте точки зупинки та
можете перебирати свій фактичний вихідний код. Якщо ви хочете
відредагувати код або швидко перейти до використання чи визначення
методів під час налагодження, вам не потрібно повертатися до редактора.
4.1 Мова JavaScript та слой статичної типізації TypeScript
Коли JavaScript був розроблений, команда розробників JavaScript
представила JavaScript як мову програмування на стороні клієнта. Але,
оскільки люди використовували JavaScript, розробники також зрозуміли, що
JavaScript можна використовувати як мову програмування на стороні
сервера. Однак, у міру зростання JavaScript код JavaScript став складним і
важким. Через це JavaScript навіть не міг задовольнити вимоги об’єктно-
орієнтованої мови програмування. Це не дозволило JavaScript досягти успіху
на рівні підприємства як серверна технологія. Таким чином, TypeScript був
створений командою розробників, щоб подолати цю прогалину [11-13].
4.1.1 Мова JavaScript
JavaScript (JS) – динамічна, об’єктно орієнтована мова програмування.
Реалізується стандартом ECMAScript.
JavaScript є найпопулярнішою у світі легкою, інтерпретованою
компільованою мовою програмування. Вона також відома як мова сценаріїв
для веб-сторінок. Вона добре відома розробкою веб-сторінок, її також
використовують багато небраузерних середовищ. JavaScript можна
використовувати для розробок на стороні клієнта, а також для розробок на
стороні сервера.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 25
а
JavaScript можна додати до вашого HTML-файлу двома способами:
 Внутрішній JS: ми можемо додати JavaScript безпосередньо до нашого
HTML-файлу, написавши код всередині тегу.
 Зовнішній JS: ми можемо записати код JavaScript в інший файл із
розширенням .js, а потім зв’язати цей файл із тегом HTML-файлу, до
якого ми хочемо додати цей код.
4.1.2 Слой статичної типізації TypeScript
TypeScript — це об'єктно-орієнтована мова програмування з відкритим
вихідним кодом, розроблена та підтримується корпорацією Microsoft.
TypeScript – це сильно типізована мова, її перша версія була представлена в
2012 році. Це строгий супернабір JavaScript, що означає, що все, що
реалізовано в JavaScript, можна реалізувати за допомогою TypeScript разом із
вибором додавання розширених функцій (кожен існуючий код JavaScript є
дійсним кодом TypeScript). Оскільки код TypeScript перетворюється на код
JavaScript, його легше інтегрувати в проекти JavaScript. Ця мова розроблена в
основному для масштабних проектів [14-15].
4.1.3 Особливості TypeScript
Особливостами TypeScript є:
 Код TypeScript перетворюється на звичайний код JavaScript: код
TypeScript не може бути інтерпретований браузерами. Отже, якщо код
був написаний на TypeScript, він компілюється і перетворюється на
JavaScript. Цей процес відомий як Trans-piled. За допомогою коду
JavaScript браузери можуть читати код і відображати його.
 JavaScript є TypeScript: будь-який код, написаний на JavaScript, можна
перетворити на TypeScript, змінивши розширення .js на .ts.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 26
а
 Використовуйте TypeScript будь-де: TypeScript можна зібрати для
роботи в будь-якому браузері, пристрої чи операційній системі.
TypeScript не є специфічним для жодного окремого середовища.
 TypeScript підтримує бібліотеки JS: за допомогою TypeScript
розробники можуть використовувати вже існуючий код JavaScript,
включати популярні бібліотеки JavaScript або викликати код TS з
рідного коду JavaScript.
4.2 Front-end бібліотека React
React, він же ReactJS або React.js, є популярною бібліотекою JavaScript.
Розроблений Facebook, він широко використовується у розробці інтерфейсу
для створення привабливих, інтерактивних та привабливих інтерфейсів
користувача. React був створений Джорданом Волке з Facebook і відкритий у
травні 2013 року. Він широко використовується на веб-сайтах і особливо в
односторінкових сторінок – landing page, для створення високо
інтерактивних інтерфейсів.
Переваги React:
 використання JSX — синтаксису XML для відтворення
компонентів;
 віртуальний DOM — лише оновлення та візуалізація змінених;
 декларативні компоненти з визначенням стану для швидшого
створення інтерфейсу користувача без зусиль.
З запуском у 2013 році бібліотека React JS JavaScript почала
отримувати масове визнання по всьому світу. Розробникам необхідно
використовувати React JS для всіх видів додатків. Однією з ключових і
вагомих причин зростання React JS є масив бібліотек компонентів React.
Розробники розробили чудові користувацькі інтерфейси для веб-, настільних
і гібридних програм, використовуючи ці прості у використанні бібліотеки.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 27
а
Більшість часто використовуваних фреймворків показують, що 49 відсотків
професіоналів використовують React, за ним йдуть Vue на 43 відсотки, 24
відсоток Express і 18 відсотків Angular.
Рисунок 4.1 – Графік популярності JavaScript від JetBrains 2021 рік
React користується такою популярністю через:
 простоту у використанні та навчанні,
 одностороннє прив’язування даних,
 високу продуктивність,
 прості, безпечні, та привабливі інтерфейси користувацького інтерфейсу
потребують мало часу для реалізації.
Вимоги до React розробників зростають, у зв’язку з його популярністю
щодо легкого та швидкого створення інтерфейсів.
Навички реагування стали важливими для розробників, таких як
HTML, CSS і JavaScript. Це одна з найпотужніших бібліотек інтерфейсу
користувача, яка підтримується сильною спільнотою.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 28
а
React використовується Facebook, Uber, Netflix, Twitter, Udemy, Paypal,
Reddit, Tumblr, Walmart та багатьма іншими. React часто порівнюють з
Angular і Vue.js.
Добре структурований життєвий цикл, використання DOM та підхід на
основі компонентів роблять його однією з найбільш обговорюваних бібліотек
JavaScript сучасного віку [16-17].
Згідно з офіційною документацією: "React is a JavaScript library for
building user interfaces", за допомогою бібліотеки можна самостійно (aka
руками) маніпулювати елементами сторінки, використовуючи JavaScript та
DOM API, але React пропонує вже готовий консистентний підхід. З початку
нам пропонується компонентна модель розробки, тобто. нас вже продумана
структура компонентів, їх взаємозв'язку, стан тощо.
Вже пропонується data binding з ефективним рендерингом DOM'а. Data
binding – це, наприклад, коли розробник змінює поле в JavaScript об'єкті, а
React за нього малює зміну на сторінці. Тобто, нам менше треба думати про
те, як найкраще працювати з DOM, ми більше концентрується на самій
business logic. Вважається, що React пропонує один із найшвидших
рендеринг DOM, використовуючи різні оптимізації та підходи, такі як Virtual
DOM.
Додаючи інші бібліотеки екосистеми React ми можемо розширювати
можливості нашої програми, не змінюючи фундамент. Це може виступати як
мінус, коли в інших фреймворків багато фіч вже вбудовано спочатку. Але це
може стати величезним плюсом, наприклад, якщо треба поступово
впроваджувати React у існуючу програму.
4.3 База даних та її система менеджменту PostgreSQL
Системи реляційних баз даних лежать в основі більшості керованих
сховищ даних у комп’ютерних системах. Postgres – в 2020, 2017 та 2019
роках ставала кращою СРБД року.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 29
а
PostgreSQL – це не просто реляційна база даних. PostgreSQL винайшов
багато постреляційних концепцій, таких як функції в базі даних і визначені
користувачем типи даних. PostgreSQL використовує ці функції для надання
широкого масиву (списку) додаткових типів даних: JSON, XML, масиви,
типи рядків, повний текст, часові ряди, рекурсивні запити на графіки та типи
даних ГІС. Так, реляційні системи не є єдиним типом даних у сучасному
світі, але PostgreSQL обслуговує як старі, так і нові. Важливо те, що він
одночасно підтримує різні типи даних в одних і тих же таблицях даних. Ви
також можете писати запити, які посилаються на всі різні типи даних
одночасно! Повністю інтегроване зберігання та доступ до даних — справді
багатомодельна база даних.
Швидкість, безпека та надійність PostgreSQL роблять його придатним
для 99% додатків, тому це чудова стартова точка для будь-якого додатку.
Можливо, в інших системах є ще якась магія, яка вам потрібна. Але, майже
напевно, PostgreSQL, «найдосконаліша база даних з відкритим вихідним
кодом», уже має все, що вам потрібно.
PostgreSQL використовує стандартний SQL. Тож ви можете швидко
почати використовувати його, якщо маєте навички роботи з іншими базами
даних. Потужність SQL спрощує розробку програмного забезпечення як для
операційних систем, так і для аналітики. Вам не потрібно використовувати
одну мову для однієї бази даних і іншу мову для наступної системи.
4.4 Node.js середовище
Node JS – це кроссплатформена середа виконання JavaScript з
відкритим вихідним кодом, яка працює на двигуні V8 від Google та
призначена для створення масштабованих мережевих додатків.
Node.js використовує подійно-орієнтовану модель і неблокуючу
введення/виведення архітектуру, так званий – Event Loop, що робить його
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 30
а
легковажним та ефективним. Це не фреймворк і бібліотека, це середовище
виконання JavaScript.
4.5 Express Фреймворк
Express – це мінімалістичний та гнучкий веб-фреймворк для програм
Node.js, що надає широкий набір функцій для мобільних та веб-додатків.
Маючи у своєму розпорядженні безліч службових методів HTTP та
проміжних обробників, створити надійний API можна швидко та легко [18].
REST – архітектурний патерн (не фреймворк). Угода про структуру
запитів та URL (ідентифікаторів ресурсів), що використовують стандартні
HTTP методи передачі даних (наприклад, GET для отримання даних, POST
для зміни) [19].
Цей фреймворк допоможе побудувати маршрутизацію для системи.
Маршрутизація визначає, як програма відповідає на клієнтський запит до
конкретної адреси (URL).
Маршрутизація визначає, як програма відповідає на клієнтський запит
до конкретної адреси (кінцевої точки), якою є URI (або шлях), та певного
методу запиту HTTP (GET, POST тощо).
Кожен маршрут може мати одну або кілька функцій обробки, що
виконуються при зіставленні маршруту.
Визначення маршруту має таку структуру:
app.METHOD(PATH, HANDLER) – де app – це екземпляр express.
METHOD – метод запиту.
HTTP. PATH – шлях на сервері.
HANDLER – функція, виконувана зі зіставлення маршруту.
Нижче наведені елементарні приклади ілюструють спосіб визначення
простих маршрутів.
Відповідь Hello World! на домашній сторінці:
app.get('/', function (req, res) {
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 31
а
res.send('Hello World!');
});
Відповідь на запит POST у кореневому маршруті (/), на домашній
сторінці програми:
app.post('/', function (req, res) {
res.send('Got a POST request');
});
Відповідь на запит PUT, адресований маршруту /user:
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
});
Відповідь на запит DELETE, адресований маршруту /user:
app.delete('/user', function (req, res) {
res.send('Got a DELETE request at /user');
});
4.6 WebStorm - інтегроване середовище для розробки
WebStorm – це інтегроване середовище для розробки на JavaScript та
пов'язаних з ним технологіях. Як і інші, IDE JetBrains, WebStorm дозволяє
автоматизувати рутинну роботу та легко справлятися зі складними
завданнями, роблячи розробку більш цікавою.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 32
а
Основні можливості
Рисунок 4.2 – Спеціалізоване середовище для JavaScript
Якщо ви фронтенд-розробник або фулстек-розробник, що час від часу
працює над інтерфейсами, WebStorm допоможе вам зосередитися на тому
стеку технологій, який потрібен вам зараз. У вас будуть всі необхідні
інструменти для розробки висококласних програм на JavaScript.
Рисунок 4.3 – Автодоповнення коду
Пишіть код швидше, використовуючи пропоновані IDE на ходу
ключові слова та символи. Усі підказки формуються з урахуванням
контексту та типів, а також працюють для різних мов. Наприклад, ви
побачите підказки для імен класів із CSS під час роботи з .js файлами.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 33
а
Підказки щодо JavaScript та TypeScript сортуються за допомогою алгоритмів
машинного навчання.
Рисунок 4.4 – Аналіз якості коду
WebStorm дозволяє з легкістю виявляти помилки та помилки в коді.
IDE включає сотні інспекцій для всіх мов, що підтримуються, а також
перевірку правопису. Також вона інтегрується зі Stylelint, ESLint та іншими
лінтерами – WebStorm запускає їх, поки ви пишете код, і підсвічує помилки
прямо в редакторі. Всі помилки та попередження відображаються у редакторі
в процесі написання коду. IDE пропонує багато варіантів швидкого
виправлення.
Рисунок 4.5 – Безпечні рефакторинги
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 34
а
WebStorm включає потужні інструменти для рефакторинг коду по всій
кодовій базі. Ви можете перейменовувати файли, папки та символи, виймати
компоненти, методи та змінні та не боятися, що ваші дії призведуть до
помилок. WebStorm повідомить вас про будь-які потенційні проблеми.
Рисунок 4.6 – Вбудовані інструменти для розробників
Один з головних плюсів IDE у тому, що вони поєднують усі необхідні
вам інструменти. Використовуйте WebStorm для налагодження та тестування
клієнтського коду та програм на Node.js, а також для роботи з системою
контролю версій. Використовуйте інтегровані лінтери, інструменти збирання,
термінал і HTTP-клієнт.
Рисунок 4.7 – Швидка навігація та пошук
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 35
а
Швидко рухайтеся за кодом незалежно від розмірів проекту. Шукайте
файли, класи або символи, переглядаючи всі результати в одному місці.
Перейдіть до визначення функцій, методів, змінних, компонентів або класів,
знаходьте їх використання буквально в пару кліків.
Рисунок 4.8 – Ефективна командна робота
Спростіть онбординг нових співробітників – вся функціональність
доступна із коробки. Програмуйте разом із командою в реальному часі та
спілкуйтеся з колегами прямо з IDE. Діліться конфігурацією проекту, у тому
числі параметрами стилю коду. Вийміть максимум користі з інтеграції з Git
та GitHub.
Рисунок 4.9 – Кастомізація
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 36
а
Бажаєте розширити вбудовану функціональність? Налаштуйте
інтерфейс WebStorm так, як вам подобається, за допомогою різних тем і
плагінів. Ви можете зберегти налаштування та використовувати їх в інших
інсталяціях WebStorm.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 37
а
5 РОЗРОБКА АВТОМАТИЗОВАНОЇ СИСТЕМИ ДИСТАНЦІЙНОГО
ТЕСТУВАННЯ
Процес розробки був побудований за методологією Scrum. Кожен
робочий день розпочинався з Daily Meetings – при роботі в команді, це
зустріч яка триває зазвичай близько 15-ти хвилин, де учасники
синхронізуються між собою, кожен з них повинен відповісти на три прості
питання: Що я вчора зробив? Що я буду робити сьогодні? Які проблеми
стоять в мене на шляху? Відповіді на ці питання допомагають зрозуміти де
ти знаходишся, та направити свої зусилля в правильне русло, для досягнення
поставленої мети. Кожного понеділка проводилися Planning Session –
створення функціональних вимог, та виставлення їм пріорітетів.
5.1 Проектування системи
На початку проектування системи було реалізовано MVP (Minimal
Viable Product). Мінімально життєздатний продукт – набір функцій системи
без якої він не може існувати і який продемонструє його потенціал (інвестору
чи потенційним користувачам). З зворотного зв'язку зібраної після запуску
MVP визначається доцільність у продовженні його розробки. MVP містить не
тільки основний сценарій продукту, але й цікаві смаколики. На відміну від
проекту, розробка продукту не містить вимог (вимога – це запит замовника
при найманій розробці). Розробка товару відбувається через потреби
(проблеми користувача). Часто явна потреба виявляється помилковою.
5.1.1 Розробка через гіпотези
Перевірка гіпотез – метод покращення досвіду користувача який
базується на перевірках припущень того, що заважає користувачем у
задоволенні своєї потреби. Заздалегідь визначаємо, що є успіхом при
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 38
а
перевірці гіпотез. Приміряємо гіпотези, що спрацювали, і відмовляється від
непрацюючих.
Тож, враховуючи вище сказане, визначимо фокус групу, та проблему
яку ми хочемо вирішити. Для першої неділі ми сфокусувалися на основній
ролі в нашій системі – лектора.
Наша перша гіпотеза – «Як Лектор я можу створити тест». Досить
чітко поставлена ціль, ми відразу бачимо без чого це стає неможливим. А
саме, без форми вводу та сторінки відображення всіх тестів.
#1 - Як ЛЕКТОР я можу створити тест і додавати запитання до тесту;
#2 - Як ЛЕКТОР я можу створювати відкриті запитання для оцінки
рівня засвоєння понять;
#3 - Як ЛЕКТОР я можу створювати запитання з кількома варіантами
правильних відповідей;
#4 - Я як ЛЕКТОР можу вказати відповідь на відповідь;
#5 - Як ЛЕКТОР можу дати характеристику питання;
#6 - Як ЛЕКТОР можу опублікувати результати тесту;
#7 - Як ЛЕКТОР можу позначити створені тестові групи;
#8 - Як ЛЕКТОР можу поставити бали на запитання;
#9 - Як ЛЕКТОР я бачу автоматично оцінюванні відповіді на
запитання з кількома варіантами;
#10 - Як ЛЕКТОР я бачу кількість питань у тесті, щоб ви могли
оцінити розмір іспиту;
#11 - Як ЛЕКТОР я бачу хід тесту студентами;
#12 - Як ЛЕКТОР я можу архівувати тест;
#13 - Як ЛЕКТОР я можу архівувати тест;
#14 - Як ЛЕКТОР я можу бачити, які питання я оцінював сам, а які
оцінював автоматично;
#15 - Як лектор я можу вибрати групу для перегляду статистики;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 39
а
#16 - як ЛЕКТОР я можу видалити групу;
#17 - Як ЛЕКТОР я можу вирішити проблему;
#18 - Як ЛЕКТОР я можу включити студента з групи;
#19 - Як ЛЕКТОР я можу додати студента до групи;
#20 - Як ЛЕКТОР я можу змінити порядок запитань;
#21 - Як ЛЕКТОР я можу надіслати посилання, щоб студент
приєднався до групи;
#22 - Як ЛЕКТОР я можу отримати посилання на поточну версію
тесту;
#23 - Як ЛЕКТОР я можу переглядати підсумкову статистику
результатів усіх членів групи;
#24 - Як ЛЕКТОР я можу переглядати список питань та редагувати;
#25 - Як ЛЕКТОР я можу переглядати список студентів у групі на свій
вибір;
#26 - Як ЛЕКТОР я можу переглянути детальну інформацію про тест;
#27 - Як ЛЕКТОР я можу переглянути список усіх груп;
#28 - Як ЛЕКТОР я можу переглянути список усіх складених тестів;
#29 - Як ЛЕКТОР я можу переглянути список усіх створених тестів;
#30 - Як лектор я можу редагувати групу;
#31 - Як ЛЕКТОР я можу редагувати запитання з кількома варіантами;
#32 - Як ЛЕКТОР я можу редагувати тест;
#33 - Як ЛЕКТОР я можу розібрати тип запитання в деталях тесту;
#34 - Як ЛЕКТОР я можу розпакувати тести;
#35 - Як ЛЕКТОР я можу створити групу;
#36 - Як ЛЕКТОР під час оцінювання, я хочу побачити відповідь на
запитання, щоб порівняти її з відповіддю студента;
#37 - Як ЛЕКТОР я бачу відсоток правильних відповідей на всі
запитання, щоб визначити проблемні питання;
#38 - Як ЛЕКТОР я можу переглянути результати тесту студента;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 40
а
#39 - щоб проаналізувати результат;
#40 - Як СТУДЕНТ бачу значення питання в балах;
#41 - Як СТУДЕНТ бачу правильну відповідь на запитання з
прапорцями;
#42 - Як СТУДЕНТ я бачу в профілі список усіх складених тестів з
отриманими балами;
#43 - Як СТУДЕНТ я можу вибрати кілька відповідей до тесту з
кількома варіантами правильних відповідей;
#44 - Як СТУДЕНТ я можу очікувати результатів оцінювання тесту на
сторінці;
#45 - Як СТУДЕНТ, я бачу відповідь з правильною відповіддю на
запитання;
#46 - Як СТУДЕНТ я бачу деталі тесту;
#47 - Як СТУДЕНТ я можу бачити в профілі свої персональні дані та
список усіх складених тестів з отриманими балами;
#48 - Як СТУДЕНТ я можу виконати тест;
#49 - Як СТУДЕНТ я можу переглядати статистику тесту;
#50 - Як СТУДЕНТ я можу переглянути результати тесту, щоб
проаналізувати результат;
#51 - Як СТУДЕНТ я можу перейти на сторінку, яка проходить
тестування;
#52 - Як СТУДЕНТ я можу приєднатися до групи;
#53 - Як СТУДЕНТ я можу пройти тест, щоб оцінити свій рівень знань;
#54 - Як СТУДЕНТ я можу форматувати текст у відповідь на відкрите
запитання, щоб дати більш читабельну та структуровану відповідь;
#55 - Як СТУДЕНТ, я бачу відформатований опис питання;
#56 - Як СТУДЕНТ, я бачу всі тестові запитання;
#57 - Як КОРИСТУВАЧ я бачу повідомлення у разі використання
наявного логіна під час реєстрації;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 41
а
#58 - Як КОРИСТУВАЧ я можу зареєструватися в системі;
#59 - Як КОРИСТУВАЧ я можу увійти;
#60 - Як КОРИСТУВАЧ, я бачу повідомлення про помилку у разі
неправильних даних аутентифікації;
#61 - Як КОРИСТУВАЧ, я хочу перевірити орфографію в полях
введення MarkDown;
#62 - Як КОРИСТУВАЧ, який увійшов у систему, я отримав доступ до
своїх даних.
5.2 Ініціалізація проекту
5.2.1 Ініціалізація проекту за допомогою npm
Розробка проекту ділиться на декілька етапів.
Підготовчий етап. Для того щоб користуватися сторонніми
бібліотеками необхідно глобально встановити Node.js в який вбудований
npm.
Npm – це менеджер пакетів. Він використовується для встановлення
різних пакетів з хмарного сервера. Після того як встановлений node.js,
розпочинається розгортання проекту.
Створено розділ “rest-api”, та викликано ініціалізацію npm в терміналі
командою npm init. В результаті було створено:
1. Папка node_modules – місце збереження встановлених пакетів.
2. Файл package.json – файл маніфесту, міститиме всі метадані проекту, як
залежності модулів, конфігурацію та сценарії.
5.2.2 Ініціалізація TypeScript конфігурації
Цей файл потрібно створити в корені проекту TypeScript. Під час
розробки TypeScript надає нам зручність запуску коду безпосередньо з
файлів розширення .ts. Але під час виробництва, оскільки Node.js розуміє
лише JS, усі файли TS потрібно транспілювати в JS. Деякі з опцій: включати
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 42
а
– визначає файли, які потрібно включити, exclude – файли, які потрібно
виключити, і параметри компілятора: outFIle і moduleResolution.
По-перше, нам потрібно встановити деякі специфічні для TypeScript
модулі:
 npm;
 typescript ts-node tsconfig-paths.
В результаті створено файло tsconfig.json з деякими конфігураціями за
замовчуванням – сюди відноситься створення скелету та підвантаження
потрібних бібліотек.
5.2.3 Використання ESLint
Використання лінтера JavaScript не є обов’язковим, але настійно
рекомендується для забезпечення стандартів коду та підтримки чистоти коду.
Проекти TypeScript колись використовували TSLint, але він був застарілий на
користь ESLint.
Виконаємо наступну команду:
npm install --save-dev eslint @typescript-eslint/parser@typescript-
eslint/eslint-plugin
Створюємо файл .eslintrc у корені проекту та використовуємо таку
початкову конфігурацію:
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint: рекомендовано",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 43
а
]
}
Далі, додаємо скрипт lint до package.json:
{
"name": "my-typescript-express-server",
"version": "0.0.0",
"scripts": {
"start": "node ./dist/index.js --env=production",
"start:dev": "ts-node -r tsconfig-paths/register ./src",
"lint": "eslint . --ext .ts",
},
Тепер запусткаємо наведену нижче команду, щоб лінтувати свою
кодову базу на помилки lint:
npm start lint
ESLint має багато правил для забезпечення виконання стандартів у
вашому коді. Їх можна переглянути у Eslint за допомогою TypeScript.
5.3 Розробка бази даних
База даних це одна із головних частин додатку, адже вона дозволяє
зберігати та обробляти інформацію в структурованому виді. Потребується
підходити до її проектування з неабиякою серйозністю та ретельно
прибирати імена таблиць та продумувати їх взаємозвʼязки.
Для додатку була спроектована база даних (рисунок 5.1). Структура
бази даних обумовлена даними, які будуть зберігатися в ній.
Нижче наведено стислий опис таблиць:
− user – таблиця для зберігання даних про зареєстрованих
користувачів, має зв’язок один-до-багатьох для полей «test» та
«groups»;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 44
а
− test – таблиця для зберігання даних про створені тести, має зв’язок
один-до-одного для поля «owner» та один-до-багатьох для полей
«questions» та «assesment_attempt»;
− group – для створених груп, має зв’язок багато-до-багатьох для
поля «students»;
− question – для питань до тесту, має зв’язок один-до-багатьох для
полей «question_results» та «tests»;
− question_options – для варіантів множинного вибору, має зв’язок
багато-до-одного для поля «question»;
− assessment_attempt – для спроби оцінювання, має зв’язок багато-
до-одного для поля «student»;
− question_results – для відповідей на питання, має зв’язок багато-до-
одного для полей «question», «assessment_attempt» та «student».
Також було створено додаткові таблиці для реалізації відношень
багато-до-багатьох:
− group_students_user – відношення студентів та їхніх груп;
− test_questions_question – відношення питань та тестів.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 45
а
Рисунок 5.1 – ER-діаграма таблиць із зв’язками
Таблиця 5.1 – Структура таблиці «test»
Номер
атрибуту Назва атрибуту Тип даних Призначення
атрибуту
1 id number Первинний ключ
2 title string Заголовок
3 description string Деталі
4 owner User.id Власник
5 access_code string Код доступу
6 archive boolean Статус архівації
7 questions []Question Питання
8 assessment_attempts []AssessmentAttempt Історія тестів
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 46
а
Таблиця 5.2 – Структура таблиці «user»
Номер Назва атрибуту Тип даних Призначення
атрибуту атрибуту
1 id number Первинний ключ
2 email string Емейл
3 password_hash string Пароль
4 tests Test[] Тести
5 groups Group[] Групи
Таблиця 5.3 – Структура таблиці «question»
Номер Призначення
атрибуту Назва атрибуту Тип даних атрибуту
1 id number Первинний ключ
2 question string Питання
3 type string Тип питання
4 options QuestionOprions[] Для множинного
вибору
5 max_score number Максимальна
кількість балів
6 description string Опис
7 question_results QuestionResults[] Відповіді
8 tests Test[] Наявність в
тестах
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 47
а
Таблиця 5.4 – Структура таблиці «group»
Номер Призначення
атрибуту Назва атрибуту Тип даних атрибуту
1 id number Первинний ключ
2 name string Назва
3 accessCode string Код доступу
4 students User[] Студенти
5 owner User Власник
Таблиця 5.5 – Структура таблиці «assessment_attempt»
Номер
атрибуту Назва атрибуту Тип даних Призначення
атрибуту
1 id number Первинний ключ
2 started_at date Час початку
3 student number Ідентифікатор
студента
4 recorded_at date Час завершення
5 score number Загальна кількість
набраних балів
6 max_score number Максимальні
кількість балів
7 percentage number Процентне
відношення
правильних
відповідей
8 status string Статус оцінення
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 48
а
Таблиця 5.6 – Структура таблиці «question_options»
Номер
атрибуту Назва атрибуту Тип даних Призначення
атрибуту
1 id number Первинний ключ
2 option string Опція
3 right boolean Вірність
4 question string Питання
Таблиця 5.7 – Структура таблиці «question_results»
Номер
атрибуту Назва атрибуту Тип даних Призначення
атрибуту
1 id number Первинний ключ
2 question string Питання
3 student number Ідентифікатор
студента
4 answer string Відповідь
5 points number Загальна кількість
набраних балів
6 max_points number Максимальні
кількість балів
7 graded string Статус оцінення
5.4 Розробка інтерфейсу користувача
Після складання технічного завдання робота передається дизайнеру,
який за технічним завданням малює програму використовуючи різні
програми. Одна з найбільш затребуваним на даний час є Figma.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 49
а
Figma – це хмарний інструмент проектування, схожий на Sketch за
функціональними можливостями, але з великими відмінностями, які роблять
Figma кращим для спільної роботи в команді.
Рисунок 5.2 – Розробка дизайну у програмі Figma
Figma працює на будь-якій операційній системі, в якій можна
запустити веб-браузер. Це єдиний інструмент дизайну такого типу, що
дозволяє ділитися, відкривати та редагувати файли Figma через браузер. У
багатьох компаніях дизайнери використовують МасOS, а розробники
використовують ПК з Windows або Linux. Figma допомагає об'єднати ці
групи та прискорити роботу з розробки ресурсів. Усе змінені або створені
елементи стають доступними відразу всім, хто має доступ до цього
документа.
При розробці дизайну інформаційного порталу було використано
сучасні засади розробки UX/UI-дизайну – використані такі принципи UX:
1. Принцип KISS (Keep it short and simple) – що означає простоту та
зрозумілість інтерфейсу, коли завдання користувача вирішуються
максимально швидко та очевидно. З таким принципом ми виключаємо
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 50
а
складність дій, які змушують користувача довго думати при досягненні
поставленого завдання.
2. Відсутність очевидного що допомагає користувачеві зосередитись
лише на необхідних речах.
3. Перевірені методики. Цей принцип полягає в тому, що дизайнер
використовував лише перевірені елементи інтерфейсу.
4. Інтуїтивність та звичність. Користувачеві набагато простіше
використовувати той інтерфейс, в якому присутні звичні та інтуїтивні
зрозумілі елементи, які дозволяють швидко та легко знайти потрібну
інформацію.
5. Мінімалізм інформації. Цей принцип спрямований на скорочення
інформаційних блоків, тому що користувачі не люблять багато читати.
Необхідно відображати інформацію максимально коротко та зрозуміло.
6. Угруповання. Цей принцип дозволяє логічно згрупувати блоки так, що
користувач може легко орієнтуватися при виконанні поставленої цілі.
7. Все корисне на увазі. В інтерфейсі елементи відображаються таким
чином, що користувач може легко знайти необхідну функцію швидко і
легко.
Бренд – це повторно використовуване (повторюване) і щось пізнаване.
(Нестандартні елементи бренду: завжди у червоній шапці, завжди справа
пташка, завжди на позитиві). Бренд – це обмін емоції на транзакцію
(цінність). В нашому проекті, основним брендом являється його назва –
«Quiz», а для зорового сприйняття було обрано відтінок синього кольору що
має назву – «Indigo» (рисунок 5.3).
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 51
а
Рисунок 5.3 – Бренд проекту
Колір – це сильна сила в руках дизайнера. Він притягує погляд,
народжує емоції та передає сенс. Дослідження під назвою Вплив кольору на
маркетинг вказує, що для деяких продуктів 90% поспішних рішень з купівлі
тих чи інших товарів люди роблять, ґрунтуючись лише на кольорах.
Відступи – це простір навколо елементів дизайну, керуючи яким можна
надавати елементам не заздалегідь визначені властивості. А саме:
 групувати (хто зі мною);
 вирівнювати;
 створювати ієрархію (хто тут головний);
 створювати композицію.
Вільне місце – (порожня) відстань між елементами. Такий самий
важливий елемент дизайну та інструмент дизайнера, як і зафарбовані пікселі.
Часто дизайнери не можуть зрозуміти чому їхня адаптація чужої
роботи виглядає гірше ніж оригінал. Зазвичай це пов'язано з тим, що вони
копіюють елементи на сторінках, але забувають про відступи (простір який
поділяє ці елементи) і про композицію (взаємне розташування) елементів.
Під час розробки стилів користувацького інтерфейсу було створено
чекліст правил, за допомогою якого можна було перевірити усі елементи на
їх відповідність цим потребам:
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 52
а
1. Перевірити симетричність відступів по краях. Горизонтальні відступи
мають бути симетричні, Вертикальний верхній відступ може бути
більшим за нижній.
2. Перевірка величини відступів у середині однотипних елементів
дизайну.
3. Перевірка принципів близькості для пов'язаних елементів
4. Перевірка точок уваги. Чи правильно розставлені кольорові та
шрифтові (розмір шрифту) акценти на сторінці.
5. Чи пов'язано дизайн спілкується з користувачем (від великого до
дрібного)
6. Чи дотримана послідовність, за якою користувач знайомиться з
дизайном.
7. Інформаційна ієрархія. Спочатку головне, потім другорядне. Принцип
новин: спочатку заголовок/введення, потім деталі
8. Перевірка приймальності. Чи погоджується дизайн із подібними
дизайнами з цієї ж серії (якщо вони були).
Створено основний розділ – «web-app», який містить в собі клієнтський
код. Для початку треба проініціалізувати React-додаток. Для цього необхідно
відкрити термінал і ввести команду для установки create-react-app <назва
проекту>, після завершення установки будуть скачані основні файли і папки.
При розробці використовують різні програми, у даному випадку WebStorm.
Наступний крок – це запуск додатків на локальному хості за замовчуванням
localhost::3000, для запуску використовується команда npm start. Після цього
додаток відкривається в браузері зі стандартною розміткою від реакції.
Основні файли та папки додатків React:
 node_modules – директорія з залежностями. Ви швидше всього ніколи
не будете в ній нічого робити вручну, це все працює за допомогою
npm;
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 53
а
 public – каталог, що містить «публічні файли», такі як зображення,
аудіо/відео файли, іконки та т.п., це є файли, які повинні віддаватися
сервером як є;
 favicon.ico – іконка сайту, яка відображається в заголовку браузера;
 index.html – «точка входу» в додатку – файл, який буде
завантажуватися головними і підключати увесь JS до себе. Ви можете
редагувати його, щоб змінювати <title>, додавати щось;
 manifest.json – файл-маніфест, що містить інформацію для зображення,
якщо додати сайт у закладки (на різних пристроях по-різному);
 src – каталог з кодом вашого додатку. Ви будете вносити зміни в
основному всередині цієї директорії;
 .gitignore – відразу містить деякі наперед визначені файли для
ігнорування, які не підлягають версійному контролю;
 package.json – файл, що містить список залежностей, а також деякі
інші, наприклад, список скриптів для запуску (npm start в їхньому
числі);
 package-lock.json – файл, який фіксує список залежностей. Підлягає
версійному контролю, містить список абсолютних версій залежностей,
які були встановлені вами в момент npm install. Якщо файл існував на
момент запуску установки залежностей, будуть встановлені точні
версії, вказані в цьому файлі;
 README.md – файл-README. Можна змінювати, щоб описувати
особливості проекту. Якщо ви помістите проект на GitHub або
BitBucket, даний файл буде відображатися на головній сторінці
проекту.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 54
а
5.5 Розробка серверної частини додатку
Express App
Нарешті, нам потрібно встановити Express, що так само просто, як
запустити цю команду:
npm install --save express @types/express
Нам потрібен файл сервера (src/Server.ts), який можна створити таким
чином:
import cookieParser from 'cookie-parser';
import express from 'express';
import { BAD_REQUEST } from 'http-status-codes';
import BaseRouter from './routes';
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cookieParser());
// Add APIs
app.use('/api', BaseRouter);
// Export express instance
export default app;
Нам також знадобиться src/index.ts, який буде точкою входу для вашої
програми:
import app from './Server';
// Запуск сервера
const порт = Номер(process.env.PORT || 3000);
app.listen(port, () => {
logger.info('Експрес-сервер запущено на порту: ' + порт);
});
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 55
а
5.6 Робота користувача з програмою
В цьому підрозділі освітлено навчальній процес тестування між двома
діючими особами:
 Л – лектор (викладач);
 С – студент (учень).
Для початку роботи з системою відкрити будь-який браузер та перейти
за посиланням. Перед екраном з'явиться форма входу, якщо користувач
вперше заходить на сайт, йому потрібно перейти на сторінку реєстрації, де
потрібно ввести логін та пароль. Після чого потрібно натиснути кнопку
Sign In.
Рисунок 5.4 – Форма входу
Якщо пароль введено правильно, ми переходимо до іншого вікна
програми. При натисненні кнопки «Sign Up» ми перейдемо на сторінку
реєстрації. Передбачається для користувачів, які вперше в системі. Після
вдалої авторизації потрапляємо на сторінку тестів, де відображається список
всіх створених тестів. Далі події будуть відбуватися так, нібито користувачі
вперше користуються системою.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 56
а
Перший етап тестування – підготовчий. Діючій особі «Л» потрібно
створити тест та наповнити його питаннями та відповідними балами за їх
відповіді. Якщо створених тестів немає, то список буде пустим. Внизу
завжди знаходиться форма створення тесту з двома полями «Назва» та
«Опис». Для створення тесту необхідно заповнити обов'язкове поле «Назва»
та натиснути кнопку «Create Test». Після чого створений тест з'явиться в
списку над формою.
Рисунок 5.5 – Форма створення тесту
Рисунок 5.6 – Відображення створеного в списку усіх тестів на сторінці
тестів
Щоб наповнити тест питаннями, необхідно клацнути лівою кнопкою
миші на картку тесту, тим самим перейти на сторінку «Деталі тесту».
Сторінка «Details» призначена для наповнення тесту питаннями та
редагування назви. Щоб змінити назву тесту натисніть на кнопку
редагування «Edit» на картці тесту, та введіть нову назву.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 57
а
Рисунок 5.7 – Заголовок сторінки «Деталі тесту»
Для додавання нових питань в тест перейдіть на сторінку «Деталі
тесту», потім в формі створення запитань введіть саме питання, виставте
максимальний бал, оберіть його тип та за необхідністю додайте його опис.
Щоб додати питання в тест натисніть клавішу «Enter» або натисніть
клавішею миші на кнопку «ADD QUESTION» під формою створення питань.
Рисунок 5.8 – Форма «Деталі тесту»
Для створення групи перейдіть на сторінку «Групи». Перейшовши на
цю сторінку, ми побачимо таблицю, де відображаються всі створені групи з
колонками «Назва групи», «Кількість студентів». В останньому стовпчику
праворуч відображені кнопки для дій над конкретною групою у виді іконок –
перша для копіювання посилання на запрошення до групи, а друга – для її
видалення.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 58
а
Рисунок 5.9 – Список створених груп на сторінці «Групи»
Для створення групи потрібно заповнити обов’язкове поле «Назва
групи» та натиснути кнопку «Create Group»
Щоб розпочати тестування потрібно розіслати посилання группі. Його
можна скопіювати натиснувши на іконку «Copy link», яка знаходиться на
картці кожного тесту на сторінці відображення створених тестів клієнта.
Рисунок 5.10 – Сторінка відображення створених тестів
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 59
а
Студент, перейшовши за посиланням потрапить на сторінку тесту,
натиснувши на кнопку «START» – розпочинається відлік часу, який він має
для того щоб дати відповіді.
Рисунок 5.11 – Початок проходження тестування
Щоб завершити тест, потрібно натиснути кнопку «Send answers»,
відображається внизу зліва, після цього результати будуть доступні лектору
для перевірки.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 60
а
Рисунок 5.12 – Завершення проходження тестування
Текст, який відображається після здачі тесту для перевірки
представлений на рисунку 5.13.
Рисунок 5.13 – Текст, який відображається після здачі тесту для перевірки
У лектора вже з’явилась робота для перевірки, це можна побачити на
сторінці тестування.
Рисунок 5.14 – Інформація про пройдений тест
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 61
а
Пройдений тест студентом зі статусом «grading» – означає, що його
треба перевірити. При перевірці результатів, лектор оцінює групу, а не
кожного студента окремо, а по черзі для кожного питання. Відповіді
студентів будуть відображатися списком, для того, щоб, не втрачаючи
контекст, перевірити відповіді по одному питанню всіх студентів.
Рисунок 5.15 – Перевірка результатів тестування по окремим питанням
Оцінювання відповіді студента за одне питання виглядає наступним
чином (рисунок 5.16).
Рисунок 5.16 – Оцінювання відповіді студента за одне питання
Коли лектор завершить оцінювання, студент перейшовши на те ж саме
посилання на тест, побачить виставлені бали (рисунок 5.17).
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 62
а
Рисунок 5.17 – Результати пройденого тесту
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 63
а
ВИСНОВКИ
Контроль у навчальному процесі є необхідним елементом, який має
багато способів оцінювання одним з яких є дистанційне тестування. На
теперішній час тестовий контроль як засіб оптимізації навчального процесу
одержав в навчальних закладах широке розповсюдження.
В роботі представлена розроблена автоматизована система
дистанційного тестування. Дана система призначена для забезпечення
автоматизації процесу формування тестів та всього процесу контролю знань
у дистанційній навчальній системі. Вона передбачає автоматизацію процесу
створення бази знань і автоматизацію генерації тестів.
Система реалізована в середовищі Visual Studio Code. База даних
представлена у форматі Postgre SQL. Організація структури коду та взаємодії
компонентів системи реалізована за шаблоном «Клієнт-серверна
архітектура». В розробленій системі дистанційного тестування передбачено
механізм реєстрації та авторизації, тестові форми для введення даних,
таблиці відображення даних з можливістю сортування. Конструктор для
створення тестів досить зручний у користуванні і не потребує значних
додаткових знань з ІТ-технологій.
Ефективність дистанційного тестування полягає в наступному:
студента, який пройшов тестування, можна оцінити, отримавши час
виконання і кількість вірно виконаних завдань, Результати подаються у
вигляді рейтингової сітки. Розроблена система забезпечує ефективну
перевірку та моніторинг навчальної діяльності як окремого студента, так і
цілої групи.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 64
а
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Володимир РУДНИЦЬКИЙ
__________________
«___» ____________ 2022 року
Автоматизована система дистанційного тестування
Специфікація
482.ЧДТУ.22104-01
Листів 2
Розробник _______________ Богдан ГУСАК
Керівник _______________ Світлана ГРЕСЬКО
Черкаси 2022
2
482.ЧДТУ.22104-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.22104-01 12 01 Текст програми
ДОДАТОК Б
Автоматизована система дистанційного тестування
Текст програми
482.ЧДТУ.22104-01 12 01
Листів 8
Розробник: Богдан ГУСАК
Черкаси 2022
2
482.ЧДТУ.22104-01 12 01
ВИХІДНИЙ ФАЙЛ ГОЛОВНОГО ФАЙЛУ КЛІЄНТСЬКОЇ ЧАСТИНИ
import { Route, Redirect, Switch } from 'react-router-dom';
import './App.css';
import { LayoutComponent } from './features/layout/layout';
import DisplayTests from './features/lector/tests/TestsPage/TestsPage';
import TestQuestionsPage from './features/lector/tests/TestQuestionsPage/TestQuestionPage';
import TestPage from './features/student/TestPage/TestPage';
import { ErrorPage } from './features/errorpage/error';
import { AssessmentPage } from './features/lector/assessment/assessment';
import StudentTestResult from
'./features/lector/assessment/StudentTestResult/StudentTestResult';
import GroupsListPage from './features/lector/groups/GroupsListPage';
import { ArchiveTest } from './features/lector/tests/archivedTest/ArchivedTests';
import Profile from './features/student/profile/profilePage';
import GroupsPage from './features/student/groups/GroupsPage';
import { GroupPage } from './features/lector/groups/GroupPage/GroupPage';
import AnswerCheckingPage from
'./features/lector/answersChecking/AnswersCheckingPage/AnswersCheckingPage';
function App() {
return (
<>
<LayoutComponent>
<div className="App">
<Switch>
<Route path="/" exact>
<Redirect to="/l/tests" />
</Route>
<Route path="/l/tests" exact>
<DisplayTests />
</Route>
<Route path="/l/tests/:testId/editing" exact>
<TestQuestionsPage />
</Route>
<Route path="/s/tests/:accessCode" exact>
<TestPage />
</Route>
<Route path="/l/test/:code/checking/:groupId" exact>
<AssessmentPage />
</Route>
<Route path="/l/test/:code/checking-page/:groupId" exact>
<AnswerCheckingPage />
</Route>
3
482.ЧДТУ.22104-01 12 01
<Route path="/l/tests/:code/attempt/students" exact>
<AssessmentPage />
</Route>
<Route path="/l/tests/:code/attempt/questions" exact>
<AssessmentPage />
</Route>
<Route path="/l/tests/:code/attempt/:studentId/:assId" exact>
<StudentTestResult />
</Route>
<Route path="/l/groups" exact>
<GroupsListPage />
</Route>
<Route path="/l/archive" exact>
<ArchiveTest />
</Route>
<Route path="/login" exact>
<Redirect to="/l/tests" />
</Route>
<Route path="/signup" exact>
<Redirect to="/l/tests" />
</Route>
<Route path="/s/profile" exact>
<Profile />
</Route>
<Route path="/l/group/:accessCode/statistics" exact>
<GroupPage />
</Route>
<Route path="/l/group/:accessCode/students">
<GroupPage />
</Route>
<Route path="/s/groups/:accessCode" exact>
<GroupsPage />
</Route>
<Route path="/login" exact>
<Redirect to="/l/tests" />
</Route>
<Route path="/signup" exact>
4
482.ЧДТУ.22104-01 12 01
<Redirect to="/l/tests" />
</Route>
<Route exact>
<ErrorPage response="This Page not Found" status={404} />
</Route>
</Switch>
</div>
</LayoutComponent>
</>
);
}
export default App;
ВИХІДНИЙ ФАЙЛ КОМПОНЕНТА ВІДОБРАЖЕННЯ СПИСКУ
СТВОРЕНИХ ТЕСТІВ КЛІЄНТА
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import {
Divider,
Grid,
makeStyles,
Typography,
Button,
} from '@material-ui/core';
import CssBaseline from '@material-ui/core/CssBaseline';
import { useAppDispatch, useAppSelector } from '../../../../app/hooks';
import CreateTest from '../createTest/createTest';
import { getAllTests } from '../testsSlice';
import TestModel from '../test.model';
import TestCard from '../TestCard/TestCard';
const useStyles = makeStyles(() => ({
root: {
margin: 0,
},
header: {
textAlign: 'left',
marginBottom: 32,
},
form: {
padding: 0,
},
tests: {
margin: 0,
marginBottom: 20,
5
482.ЧДТУ.22104-01 12 01
},
}));
const DisplayTests = () => {
const history = useHistory();
const dispatch = useAppDispatch();
const classes = useStyles();
const user = useAppSelector((state: any) => state.user);
const testsList: any = useAppSelector((state) => state.lector.tests);
const goToTestDetails = (item: TestModel) => {
history.push(`/l/tests/${item.id}/editing`);
};
const goToArchivedTest = () => {
history.push('/l/archive');
};
const goToAssessmentDetails = (e: any, item: TestModel) => {
e.stopPropagation();
history.push(`/l/tests/${item.access_code}/attempt/students`);
};
useEffect(() => {
if (user.id !== null) dispatch(getAllTests());
}, [dispatch, history, user.id]);
return (
<>
<div className={classes.root}>
<CssBaseline />
<div className={classes.header}>
<Typography style={{ color: '495464' }} variant="h3">
Tests
<Button
onClick={goToArchivedTest}
style={{ float: 'right', marginTop: 15, fontSize: 16 }}
color="primary"
>
Show Archived Tests
</Button>
</Typography>
<Divider />
</div>
<Grid container xs={12} spacing={3} className={classes.tests}>
{testsList
.filter((item: TestModel) => !item.archive)
.map((item: TestModel) => (
<TestCard
item={item}
6
482.ЧДТУ.22104-01 12 01
onTestDetails={goToTestDetails}
onAssessmentDetails={goToAssessmentDetails}
key={item.id}
/>
))}
</Grid>
<div className={classes.form}>
<CreateTest />
</div>
</div>
</>
);
};
export default DisplayTests;
ВИХІДНИЙ ФАЙЛ РЕАЛІЗАЦІЇ УПРАВЛІННЯ СТАНОМ
КОМПОНЕНТА «DISPLAY TEST». СТАНДАРТНІ ОПЕРАЦІЇ
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// eslint-disable-next-line import/no-cycle
import { RootState } from '../../../app/store';
import Test from './test.model';
import {
postTest,
getTests,
updateTestById as archiveTestById,
} from './testsAPI';
const initialState: Test[] = [];
export const addTest = createAsyncThunk(
'test/create',
async (body: any, thunkAPI) => {
try {
const response = await postTest(body);
return response;
} catch (error) {
return thunkAPI.rejectWithValue({ error });
}
}
);
export const getAllTests = createAsyncThunk(
'test/fetch',
async (_, thunkAPI) => {
try {
const response = await getTests();
7
482.ЧДТУ.22104-01 12 01
return response;
} catch (error) {
return thunkAPI.rejectWithValue({ error });
}
}
);
export const archiveTest = createAsyncThunk(
'test/update',
async (body: any, thunkAPI) => {
try {
const result = await archiveTestById(body);
return result;
} catch (error) {
return thunkAPI.rejectWithValue({ error });
}
}
);
export const testsSlice = createSlice({
name: 'create-test',
initialState,
reducers: {},
extraReducers: {
[addTest.rejected.type]: (_, { payload }) => {
// eslint-disable-next-line no-console
console.error(`Rejected with Error: ${payload.error}`);
},
[addTest.fulfilled.type]: (state, { payload }) => {
state.push(payload);
},
[getAllTests.rejected.type]: (_, { payload }) => {
// eslint-disable-next-line no-console
console.error(`Rejected with Error: ${payload.error}`);
},
[getAllTests.fulfilled.type]: (_, { payload }) => payload,
[archiveTest.fulfilled.type]: (state, { payload }) => {
const test = state.find((t) => t.id === payload.id);
if (test) {
test.archive = payload.archive;
}
},
[archiveTest.rejected.type]: (_, { payload }) => {
// eslint-disable-next-line no-console
console.error(`Rejected with Error: ${payload.error}`);
},
},
8
482.ЧДТУ.22104-01 12 01
});
export const selectTest = (state: RootState) => state;
export default testsSlice.reducer;
ВИХІДНИЙ ФАЙЛ ПРОМІЖНОГО ІНТЕРФЕЙСУМІЖ
КЛІЄНТСЬКОЮ ТА СЕРВЕРНОЮ ЧАСТИНОЮ СИСТЕМИ ДЛЯ
ВИКОНАННЯ HTTP-ЗАПИТІВ ВИКОНАННЯ CRUD ОПЕРАЦІЙ НАД
ТЕСТАМИ
// eslint-disable-next-line import/no-cycle
import axios from 'axios';
export const postTest = (test: any) =>
axios.post('/tests', JSON.stringify(test)).then((response) => response.data);
export const getTests = () =>
axios.get('/tests').then((response) => response.data);
export const getTestsByIdApi = (id: number) =>
axios.get(`/tests/${id}`).then((response) => response.data);
export const getTestsByCodeId = (body: any) =>
axios
.get(`/tests/access/${body.code}/group/${body.id}`)
.then((response) => response.data);
export const updateTestById = (body: any) =>
axios
.put(`/tests/${body.id}`, { archive: body.archive })
.then((response) => response.data);
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Сидорчук Л. А. Впровадження інформаційних технологій в навчальний
процес вищих шкіл / Л.А. Сидорчук // Проблеми педагогічних
технологій : збірник наукових праць. – Луцьк : ЛІРоЛ, 2010. – Вип. 1. – С.
280-286.
2. Концепція розвитку дистанційної освіти в Україні (затверджено
Постановою МОН України 20 грудня 2000 р.) [Електронний ресурс].
Режим доступу: http:// zakon.rada.gov.ua
3. Про Державну національну програму «Освіта. Україна ХХІ століття»
(затверджено Постановою від 3 листопада 1993 р.№ 896) [Електронний
ресурс]. Режим доступу: http:// zakon4.rada.gov.ua/laws/show/896-
93- %D0 %BF
4. Закон України «Про національну програму інформатизації» (дата набуття
чинності 12 березня 1998 р.) [Електронний ресурс]. Режим доступу: http://
zakon4.rada.gov.ua/laws/anot/74/98- %D0 %B2 %D1 %80
5. Лукіна Т. Педагогічна діагностика: завдання,методи, інструменти.
Модуль 10. Навчально-методичні матеріали [текст] / Т. Лукіна. – Київ :
Проект «Рівний доступ до якісної освіти», 2007. – 60 с.
6. Онопченко Г. В. Інтернет-тестування в інформаційному соціальному
середовищі як інструмент розвитку суб’єктів освітнього процесу [текст] /
Г. В. Онопченко, Т. А. Юрченко. – Київ : Інститут обдарованої дитини
НАПН України, 2013.
7. Конструювання тестів. Курс лекцій: навч. посіб. /Л.О. Кухар, В.П.
Сергієнко. – Луцьк, 2010. – 182 с.
8. PostgreSQL – Найкраща СУБД 2017,2018 та 2020 року [Електронний
ресурс]. Режим доступу: https://db-engines.com/en/blog_post/85
9. WebStorm – [Електронний ресурс]. Режим доступу:
https://www.jetbrains.com/webstorm/features/
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 73
а
10.Express Framework Documentation – [Електронний ресурс]. Режим
доступу: https://expressjs.com/
11.Положення про дистанційне навчання (Затверджено Наказом
Міністерства освіти і науки України від 25.04.2013 № 466).
12.С.О. Сисоєва, К.П. Осадча. Системи дистанційного навчання:
порівняльний аналіз навчальних можливостнй. - [Електронний ресурс]. –
2011. – Режим доступу: http://www.academia.edu/931578.
13.Биков В.Ю, Кухаренко В.М. Дистанційний навчальний процес:
Навчальний посібник / За ред. - К.: Міленіум, 2005.
14.Сучасні комп’ютерно-орієнтовані технології освітніх вимірювань: аналіз,
порівняння та вибір [Електронний ресурс]. – Режим доступу : https://www.
http://www.stattionline.org.ua/pedagog. – Назва з екрану
15.Сидорчук Л.А. Впровадження інформаційних технологій в навчальний
процес вищих шкіл / Л.А. Сидорчук // Проблеми педагогічних технологій:
Збірник наукових праць – Луцьк : ЛІРоЛ, 2010. – Вип. 1. - С. 280-286
16.Барабанова Н. Методика створення тестів знань студентів з дисциплін
комунікативно-інформаційного циклу / Барабанова Н., Аверіна С.
[Електронний ресурс]. – Режим доступа:
http://archive.nbuv.gov.ua/portal/Soc_Gum%20/ vkp/2010_8/st_9_10.pdf
17.Милютіна І. М. Тестування як ефективний метод перевірки професійної
компетентності студентів / Милютіна І. М. [Електронний ресурс] //
Форум педагогічних ідей «УРОК». – Режим доступу:
http://osvita.ua/school/lessons_ summary/edu_technology/15024/
18.Конструктор тестів easyQuizzy [Електронний ресурс] // Офіційний сайт
Easyquizzy – Режим доступу: http://easyquizzy.com (дата звернення
18.05.2021р.). – Назва з екрану
19.Niemeyer P. Learning Java / P. Niemeyer, D. Leuck. – 5th ed. – Sebastopol :
O’Reilly Media, 2013. – 1014 p.
Лист
ЧДТУ.222104.002 ПЗ т
Зм. Лист № докум. Підпис Дат 74
а
Репозиторій ЧДТУ
