ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6919| Title: | Web-орієнтована інформаційна система самоперевірки здобувачів вищої освіти |
| Authors: | Тарасенко , Ярослав Володимирович Шалівський, Максим Олегович |
| Keywords: | web-орієнтована система;інформаційна система;JavaScript;сайт;CMS |
| Issue Date: | 14-Jun-2022 |
| Abstract: | Нині існує велика кількість веб-орієнтованих інформаційних систем для самоперевірки здобувачів вищої освіти, які мають свої переваги та недоліки. Кожна з них може похвалитися різноманіттям функцій та зручністю користування. Також кожна з них має не дуже інтуїтивний інтерфейс або взагалі складний доступ до тестувань. Таким чином можна зрозуміти, що система яка буде створена повинна враховувати і частково чи повністю вирішувати недоліки та врахувати переваги існуючих веб-орієнтованих інформаційних систем. Актуальним в даний час є створення веб-орієнтованої інформаційної системи для самоперевірки здобувачів вищої освіти та просто системи тестування, яка була б найзручнішою для студента, легкою у використанні та обслуговуванні, мала переваги над конкурентами та враховувала недоліки конкурентів. Метою кваліфікаційної роботи являється створення веб-орієнтованої інформаційної системи для самоперевірки здобувачів вищої освіти на основі розмітки Html, таблиці стилів CSS та сценаріїв JavaScript. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6919 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Шалівський_WEBС-2011.pdf Restricted Access | 1.31 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА
на тему: «Web-орієнтована інформаційна система самоперевірки
здобувачів вищої освіти»
за спеціальністю 126 «Інформаційні системи та технології»
Виконавець роботи: студент групи WEBС-2011+ск Шалівський Максим Олегович
Кваліфікаційну роботу
захищено на засіданні ЕК
з оцінкою ___________ «___» червень 2022 р.
Науковий керівник ___________ к.т.н. Тарасенко Я.В.
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)
Голова комісії ___________ ____________________________
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)
Засвідчую, що у цій дипломній роботі немає
запозичень з праць інших авторів
без відповідних посилань
Студент _____________
(підпис)
Черкаси – 2022 року
ЗМІСТ
Список скорочень та умовних позначень ............................................................ 3
ВСТУП ......................................................................................................................... 4
1 Постановка задачі. Огляд існуючих рішень, аналогів. .................................. 5
1.1 Аналіз особливостей веб-орієнтованих інформаційних систем ....... 5
1.2 Огляд існуючих рішень, аналогів ........................................................ 16
2 Обгрунтування вимог технічного завдання ................................................... 20
3 Розробка веб-орієнтованої інформаційної системи ....................................... 22
3.1 Створення сайту ...................................................................................... 22
3.2 Створення Головної сторінки .............................................................. 23
3.3 Створення сторінки з тестом ................................................................ 24
3.4 Створення JavaScript сценарію ........................................................... 25
3.5 Аналіз функціонування ......................................................................... 27
3.6 Порівняння з аналогами на основі результатів розробки .............. 29
ВИСНОВКИ ............................................................................................................. 32
ДОДАТКИ ................................................................................................................. 33
Список використаної літератури ......................................................................... 55
[Введіть текст тут]
Список скорочень та умовних позначень
API - Application programming interface, набір визначень підпрограм, протоколів
взаємодії та засобів для створення програмного забезпечення.
JS - JavaScript динамічна, об’єктно-орієнтована прототипна мова програмування.
Реалізація стандарту ECMAscript.
CMS - Content management system, система управління контентом - інформаційна
система або комп’ютерна програма, що використовується для забезпечення та
організації спільного процесу створення, редагування та управління контентом.
LMS - Learning management system, система управління навчальною діяльністю, яка
використовується для розробки, управління та поширення навчальних онлайн-
матеріалів із забезпеченням спільного доступу.
VLE - Virtual learning environment, програмна система, створена для підтримки
процесу дистанційного навчання з наголосом саме на навчання, на відміну від
керованого навчального середовища, для якого властивий акцент на управлінні
процесом навчання.
Id - (ідентифікатор) унікальна ознака об’єкта, що дозволяє відрізняти його від
інших об’єктів, тобто ідентифікувати.
СЕД - (система електронного документообігу) - програмне забезпечення з
можливістю створювати документи, поширювати та контролювати ланцюжок їх
передачі всередині мережі.
ПК – персональний комп’ютер.
[Введіть текст тут]
ВСТУП
Нині існує велика кількість веб-орієнтованих інформаційних систем для
самоперевірки здобувачів вищої освіти, які мають свої переваги та недоліки. Кожна
з них може похвалитися різноманіттям функцій та зручністю користування. Також
кожна з них має не дуже інтуїтивний інтерфейс або взагалі складний доступ до
тестувань. Таким чином можна зрозуміти, що система яка буде створена повинна
враховувати і частково чи повністю вирішувати недоліки та врахувати переваги
існуючих веб-орієнтованих інформаційних систем.
Актуальним в даний час є створення веб-орієнтованої інформаційної
системи для самоперевірки здобувачів вищої освіти та просто системи тестування,
яка була б найзручнішою для студента, легкою у використанні та обслуговуванні,
мала переваги над конкурентами та враховувала недоліки конкурентів.
Метою кваліфікаційної роботи являється створення веб-орієнтованої
інформаційної системи для самоперевірки здобувачів вищої освіти на основі
розмітки Html, таблиці стилів CSS та сценаріїв JavaScript.
Для реалізації поставленої мети слід вирішити наступні завдання:
- Проаналізувати особливості роботи веб-орієнтованих інформаційних систем;
- Провести аналіз та огляд існуючих веб-орієнтованих інформаційних систем;
- Використовуючи результати аналізу, обрати найбільш зручний варіант
створення веб-орієнтованих інформаційних систем;
- Реалізувати процес створення веб-орієнтованої інформаційної системи
самоперевірки здобувачів вищої освіти.
Дану веб-орієнтовану інформаційну систему можна застосувати на практиці
наприклад в модульному об'єктно-орієнтованому динамічному навчальному
середовищі для самоперевірки студентів під час підготовки до екзаменів чи будь-
яких інших тестових завдань. Також як своєрідний посібник для підготовки до
тестувань так як кожна наступна спроба проходження тесту являє собою вивчення
інформації або навіть просте запам’ятовування питання і приблизної відповіді.
Таким чином система має спростити студентові підготовку до тесту наприклад
[Введіть текст тут]
коли у нього є мало часу для підготовки або коли інформація в тесті є складною
для запам’ятовування.
Предметом дослідження є реалізація процесу створення веб-орієнтованої
інформаційної системи для самоперевірки здобувачів вищої освіти.
Процес створення веб-орієнтованої інформаційної системи самоперевірки
здобувачів вищої освіти можна охарактеризувати такими етапами:
- Встановлення на ПК апаратного та програмного забезпечення;
- Налаштування програмного та апаратного забезпечення;
- Створення дизайну та функціоналу головної сторінки;
- Створення дизайну сторінок з тестами;
- Створення JavaScript сценарію для кожного з тестів.
Для вирішення завдань і розробки буде використано Nicepage та сценарії
JavaScript. Nicepage є найбільш простим та зручним для розробки дизайну та
структури сайту. В свою чергу JavaScript є найбільш зручним та популярним для
створення сценаріїв вебсторінок.
У даному проекті буде реалізована веб-орієнтована інформаційна система
тобто сайт з тестами для підготовки до офіційних тестувань, який буде порівняний
з декількома аналогами, протестований на функціональність, протестований
навантажувальним тестуванням, результати розробки будуть порівняні з
аналогами. Аналіз аналогів та процес розробки будуть розписані та
проілюстровані. Публікація сайту буде відбуватись на безкоштовний хост з
безкоштовним доменом, тобто після закінчення безкоштовного періоду доступу до
сайту через мережу Інтернет не буде.
1 Постановка задачі. Огляд існуючих рішень, аналогів.
1.1 Аналіз особливостей веб-орієнтованих інформаційних систем
Інформаційна система[2] – сукупність організаційних і технічних засобів
для збереження та обробки інформації з метою забезпечення інформаційних потреб
користувачів.
[Введіть текст тут]
Різноманітність задач, що вирішуються за допомогою інформаційних систем,
привело до появи безлічі різнотипних систем, що відрізняються принципами
побудови і закладеними в них правилами обробки інформації. Інформаційні
системи можна класифікувати по цілому ряду різних ознак. В основу даної
класифікації покладено найбільш істотні ознаки, що визначають функціональні
можливості і особливості побудови сучасних систем. Залежно від обсягу
вирішуваних задач, використання технічних засобів, організації функціонування,
інформаційні системи діляться на ряд груп (класів).
Рисунок 1.1 -Класифікація інформаційних систем
Класифікація за типом даних, що зберігаються[2]
За типом даних, що зберігаються інформаційні системи діляться на групи:
- фактографічні;
- документальні.
[Введіть текст тут]
Фактографічні системи призначені для зберігання і обробки структурованих
даних у вигляді чисел і текстів. Над такими даними можна виконувати різні
операції.
У документальних системах інформація представлена у вигляді документів,
що складаються з найменувань, описів, рефератів і текстів. Пошук по
неструктурованим даним здійснюється з використанням семантичних ознак.
Відібрані документи надаються користувачеві, а обробка даних в таких системах
практично не проводиться.
Класифікація за ступенем автоматизації інформаційних процесів[2]
За ступенем автоматизації інформаційних процесів в системі управління
інформаційні системи діляться на групи:
- ручні;
- автоматичні;
- автоматизовані.
Ручні інформаційні системи характеризуються відсутністю сучасних
технічних засобів переробки інформації та виконанням всіх операцій людиною.
В автоматичних інформаційних системах всі операції з переробки інформації
виконуються без участі людини.
Автоматизовані інформаційні системи передбачають участь в процесі
обробки інформації і людини, і технічних засобів, причому головна роль у
виконанні рутинних операцій обробки даних відводиться комп'ютера. Саме цей
клас систем відповідає сучасному уявленню інформаційної системи.
Класифікація по сфері застосування[2]
За сферою застосування інформаційні системи діляться на:
- системи організаційного управління;
- системи управління технологічними процесами;
- системи автоматизованого проектування;
- інтегровані (корпоративні) інформаційні системи.
[Введіть текст тут]
Інформаційні системи організаційного управління призначені для
автоматизації функцій управлінського персоналу як промислових підприємств, так
і непромислових об'єктів (готелів, банків, магазинів та ін.).
Основними функціями подібних систем є: оперативний контроль і
регулювання, оперативний облік і аналіз, перспективне і оперативне планування,
бухгалтерський облік, управління збутом, постачанням і інші економічні і
організаційні завдання.
Інформаційні системи управління технологічними процесами служать для
автоматизації функцій виробничого персоналу з контролю та управління
виробничими операціями. У таких системах зазвичай передбачається наявність
розвинених засобів вимірювання параметрів технологічних процесів (температури,
тиску, хімічного складу і т.д.), процедур контролю допустимості значень
параметрів і регулювання технологічних процесів.
Інформаційні системи автоматизованого проектування призначені для
автоматизації функцій інженерів-проектувальників, конструкторів, архітекторів,
дизайнерів при створенні нової техніки або технології. Основними функціями
подібних систем є: інженерні розрахунки, створення графічної документації,
створення проектної документації, моделювання проектованих об'єктів.
Інтегровані (корпоративні) інформаційні системи використовуються для
автоматизації всіх функцій фірми і охоплюють весь цикл робіт від планування
діяльності до збуту продукції. Вони включають в себе ряд модулів (підсистем), що
працюють в єдиному інформаційному просторі і виконують функції підтримки
відповідних напрямів діяльності.
Класифікація за характером обробки даних[2]
За характером обробки даних інформаційні системи діляться на групи:
- інформаційно-пошукові;
- інформаційно-вирішальні.
Інформаційно-пошукові системи роблять введення, систематизацію,
зберігання, видачу інформації за запитом користувача без складних перетворень
[Введіть текст тут]
даних (інформаційна система бібліотечного обслуговування, резервування і
продажу квитків на транспорті, бронювання місць в готелях).
Інформаційно-вирішальні системи здійснюють, крім того, операції
переробки інформації за певним алгоритмом.
За характером використання вихідної інформації[2] такі системи прийнято
ділити на:
- керуючі;
- що радять.
Результуюча інформація керуючих інформаційних систем безпосередньо
трансформується в прийняті людиною рішення. Для цих систем характерні задачі
розрахункового характеру і обробка великих обсягів даних (інформаційна система
планування виробництва і замовлень, бухгалтерського обліку).
Інформаційні системи яка радить виробляє інформацію, яка приймається
людиною до відома і враховується при формуванні управлінських рішень, а не
ініціює конкретні дії. Ці системи імітують інтелектуальні процеси обробки знань,
а не даних (експертні системи).
Класифікація за рівнем управління[2]
Залежно від рівня управління бувають:
- системи оперативного рівня;
- функціональні системи;
- стратегічні системи.
Інформаційна система оперативного рівня підтримує виконавців,
обробляючи дані про угоди і події (рахунки, накладні, зарплата, кредити, потік
сировини і матеріалів). Інформаційна система оперативного рівня є сполучною
ланкою між фірмою і зовнішнім середовищем. Задачі, цілі, джерела інформації та
алгоритми обробки на оперативному рівні заздалегідь визначені і у високому
ступені структуровані.
Інформаційні системи фахівців підтримують роботу з даними і знаннями,
підвищують продуктивність і продуктивність роботи інженерів і проектувальників.
[Введіть текст тут]
Задачі подібних інформаційних систем - інтеграція нових відомостей в організацію
і допомогу в обробці паперових документів.
Інформаційні системи рівня менеджменту - використовуються працівниками
середньої управлінської ланки для моніторингу, контролю, прийняття рішень і
адміністрування.
Стратегічна інформаційна система - це комп'ютерна інформаційна система,
що забезпечує підтримку прийняття рішень по реалізації перспективних
стратегічних планів розвитку організації.
Інформаційні системи стратегічного рівня допомагають вищій ланці
управлінців вирішувати неструктуровані задачі, здійснювати довгострокове
планування. Основна задача - порівняння змін, які відбуваються в зовнішньому
оточенні до існуючого потенціалом фірми. Вони покликані створити загальне
середовище комп'ютерної телекомунікаційної підтримки рішень в несподівано
виникаючих ситуаціях. Використовуючи найдосконаліші програми, ці системи
здатні у будь-який момент надати інформацію з багатьох джерел. Деякі стратегічні
системи мають обмежені аналітичними можливостями.
Класифікація за способом організації[2]
За способом організації інформаційні системи діляться на:
- системи на основі архітектури файл-сервер;
- системи на основі архітектури клієнт-сервер;
- системи на основі багаторівневої архітектури;
- системи на основі Інтернет-технологій.
Архітектура файл-сервер не має мережевого поділу компонентів діалогу і
використовує комп'ютер для функцій відображення, що полегшує побудову
графічного інтерфейсу. Файл-сервер тільки отримує дані з файлів, так що додаткові
користувачі і додатки додають лише незначну навантаження на центральний
процесор. Кожен новий клієнт додає обчислювальну потужність до мережі.
Архітектура клієнт-сервер призначена для поділу компонентів програми та
розміщення їх там, де вони будуть функціонувати найбільш ефективно.
Особливістю архітектури клієнт-сервер є використання виділених серверів баз
[Введіть текст тут]
даних. Архітектура клієнт-сервер є дворівневою: додаток працює у клієнта, СУБД
- на сервері.
Багаторівнева архітектура складається з трьох рівнів:
- нижній рівень являє собою додатки клієнтів, що мають програмний
інтерфейс для виклику програми на середньому рівні;
- середній рівень - сервер додатків, на якому виконується прикладна логіка і з
якого логіка обробки даних викликає операції з базою даних;
- верхній рівень являє собою віддалений спеціалізований сервер бази даних,
виділений для послуг обробки даних і файлових операцій. Інтернет-
технології об'єднуються з багаторівневою архітектурою. При цьому
структура інформаційного додатку набуває вигляду: браузер-сервер додатків
- сервер баз даних - сервер динамічних сторінок - web-сервер.
Життєвий цикл ІС[2]
Кожна система має свій життєвий цикл.
Життєві цикли розрізняються за властивостями, цілям, використання
системи, а також по переважаючих умов. Проте, не дивлячись на очевидне безліч
відмінностей в життєвих циклах систем, існує базовий набір стадій життєвого
циклу, що становлять повний життєвий цикл будь-якої системи. Кожна стадія має
певну мету і внесок в повний життєвий цикл і розглядається при плануванні і
виконанні життєвого циклу системи.
Життєвий цикл інформаційної системи характеризується періодом часу від
ідеї створення інформаційної системи і закінчуючи моментом виведення її з
експлуатації та включає в себе наступні стадії:
1. Передпроектне обстеження.
2. Проектування.
3. Створення інформаційної системи.
4. Введення в експлуатацію.
5. Експлуатація інформаційної системи.
6. Виведення з експлуатації
[Введіть текст тут]
Під стадією розуміється певний етап процесу розробки інформаційної
системи.
Стадії являють собою основні періоди життєвого циклу, пов'язані з системою
і пов'язані з станом опису системи або безпосередньо до системи. Стадії
відображають значний прогрес і досягнення запланованих етапів розвитку системи
протягом усього життєвого циклу і дають початок найважливіших рішень щодо
своїх входів і виходів. Ці рішення використовуються організаціями для обліку
невизначеностей і ризиків, безпосередньо пов'язаних з витратами, термінами і
функціональністю при створенні або застосуванні системи.
Таким чином, стадії забезпечують організації структурою робіт, в рамках
яких управління підприємством володіє високою здатністю для огляду і контролю
проекту і технічних процесів.
Інформаційна система повинна відповідати вимогам гнучкості, надійності,
ефективності і безпеки.
Гнучкість
Гнучкість, це можливість пристосування інформаційної системи до нових
умов, нових потреб підприємства. Виконання цих умов можливе, якщо на етапі
розробки інформаційної системи використовувалися загальноприйняті засоби і
методи документування так, що після певного часу збережеться можливість
розібратися в структурі системи і внести до неї відповідні зміни, навіть якщо всі
розробники або їх частина по яких-небудь причинах не зможуть продовжити
роботу.
Будь-яка інформаційна система застаріє, і стане питання про її модернізацію
або повну заміну. Розробники інформаційних систем, як правило, не є фахівцями в
прикладній області, для якої розробляється система. Участь в модернізації
або створенні нової системи тієї ж групи проектувальників істотно скоротить
терміни модернізації. Є ризик застосування застарілих рішень при модернізації
системи.
Надійність
Надійність інформаційної системи має на увазі її функціонування без
спотворення інформації, втрати даних по «технічних причинах». Вимога
[Введіть текст тут]
надійності забезпечується створенням резервних копій інформації, що зберігається,
виконання операцій протоколювання, підтримкою якості каналів зв'язку і фізичних
носіїв інформації, використанням сучасних програмних і апаратних засобів.
Сюди відносять захист від випадкових втрат інформації через недостатню
кваліфікацію персоналу.
Ефективність
Система є ефективною, якщо з урахуванням виділених нею ресурсів вона
дозволяє вирішувати покладені на неї завдання в мінімальні терміни.
У будь-якому випадку оцінка ефективності проводитиметься замовником,
виходячи з вкладених в розробку засобів і відповідності представленої
інформаційної системи його очікуванням.
Негативної оцінки ефективності інформаційної системи з боку замовника
можна уникнути, якщо представники замовника притягуватимуться до
проектування системи на всіх його стадіях. Активна співпраця із замовником з
ранніх етапів проектування дозволяє уточнити потреби замовника. Чим раніше
будуть враховані доповнення замовника, тим з меншими витратами і в коротші
терміни система буде створена.
Ефективність системи забезпечується оптимізацією даних і методів їх
обробки, застосуванням оригінальних розробок, ідей, методів проектування.
Безпека
Безпека, захист інформації від стороннього доступу забезпечується
управлінням доступом до ресурсів системи, використанням сучасних програмних
засобів захисту інформації. У крупних організаціях створюються підрозділи,
основним напрямом діяльності яких є забезпечення інформаційної безпеки, в
менш крупних організаціях призначають співробітника, відповідального за дану
ділянку роботи.
Вимога безпеки забезпечується сучасними засобами розробки
інформаційних систем, сучасною апаратурою, методами захисту інформації,
застосуванням паролів і протоколюванням, постійним моніторингом стану безпеки
операційних систем і засобів їх захисту.
[Введіть текст тут]
Створення[3] web-орієнтованої інформаційної системи здійснюється із
застосуванням різних методів та методик, застосовуються різні підходи.
Наприклад, класичним випадком є каскадний підхід до розробки програмного
забезпечення. Він включає збирання інформації, формування вимог, аналіз вимог,
складання та затвердження технічного завдання, проектування, розробки та здачі в
експлуатацію інформаційної системи, а також її підтримку та супровід до повного
виведення продукту з експлуатації. Кожен етап цього підходу може здійснюватись
за допомогою різних методів. Наприклад, збір інформації може здійснюватися
такими методами, як спостереження, інтерв’ю або особистої участі. Проте, частка
творчого процесу, який залежить від того, наскільки добре розуміють один одного
замовник, аналітик, дизайнер, проектувальник і програмісти, тут досить велика.
Веб-орієнтована інформаційна система працює через Інтернет[2]. Як правило
включає в себе декілька веб-додатків. Великі системи можуть поєднувати веб-сайт,
набір сервісів та веб-додатки, а також використовувати зовнішні API.
Форми організації Веб-орієнтованих інформаційних систем:
- Веб-сайти[9] - сукупність веб-сторінок, доступних у мережі Інтернет, які
об'єднані як за змістом, так і за навігацією під єдиним доменним ім’ям. Веб-
сайти можуть бути статичними та динамічними.
- Веб-сервіси – програмні засоби, що забезпечують обмін інформацією між
сайтами, додатками та базами даних та її обробку.
- Прикладні веб-додатки – програми, інструменти, доступні в Веб, орієнтовані
безпосередньо на взаємодію з користувачем для виконання певних завдань.
Статичні сайти[10] - це набір HTML-файлів, які розміщені на веб-сервері.
Динамічні сайти - сайти, сторінки яких формуються по запиту користувача.
[Введіть текст тут]
Рисунок 1.2 Схема роботи сервера із статичним веб-сайтом
Рисунок 1.3 Схема роботи сервера із динамічним веб-сайтом
Веб-орієнтована система є клієнт-серверною програмою[4], в якій клієнтську
частину реалізує браузер, що здійснює діалог з користувачем та відображення
інформації, а серверну частину – веб-сервер та сервер додатків, які реалізують
основну логіку системи. Через обмежену функціональність клієнта, подібну
реалізацію системи часто ще називають тонким клієнтом.
Безперечними перевагами веб-орієнтованої системи є такі факти:
- Багатоплатформність. В якості клієнта, як було зазначено вище, виступає
веб-браузер, а це означає, що для роботи з системою необхідний тільки
інтернет-браузер, що входить до складу будь-якої операційної системи.
Оновлення та супровід браузера лежить на його розробнику.
Враховуючи, що в даний час браузери не залежать від конкретної операційної
системи користувача, веб-орієнтовані системи можна сміливо назвати
багатоплатформними.
[Введіть текст тут]
- Мобільність. Працювати з системою ви можете, будь-де, де є Інтернет і з
будь-якого пристрою, в якому є інтернет-браузер. Таким чином, користувач
не обмежений вимогами до апаратної частини.
Можна працювати і в офісі, і вдома, і у відрядженні як зі стаціонарного ПК, так і з
ноутбука або планшета.
- Низька сукупна вартість володіння. Вартість володіння веб-орієнтованою
системою фактично полягає у розробці, підтримці та розвитку серверної
частини (веб-сервера та сервера додатків) та володінні сервером бази даних
системи.
Вартість системи управління базами даних залежить від вибору технології
розробки веб-додатка: використання відкритої повністю багатоплатформні або
конкретної платформи для створення веб-додатків, наприклад Microsoft ASP.NET,
що в свою чергу може накласти вимоги до СУБД, але, в той же час, має і низку
своїх переваг.
Як і будь-які інші, веб-орієнтовані системи також мають свої недоліки:
- Для роботи з системою необхідне підключення до мережі Інтернет.
- Не всі СЕД можуть бути замінені на веб-орієнтовані через обмеженість
функціональних можливостей інтернет-браузерів.
- Вся інформація, включаючи особисту інформацію користувача, зберігається
на сервері.
1.2 Огляд існуючих рішень, аналогів
Moodle (модульне об'єктно-орієнтоване динамічне навчальне середовище) -
навчальна платформа, призначена для об'єднання викладачів, адміністраторів і
студентів в одну надійну, безпечну та інтегровану систему для створення
персоналізованого навчального середовища.
Moodle має широкий набір функціональності, притаманний платформам
електронних систем навчання, системам управління курсами (CMS), системам
управління навчанням (LMS) або віртуальним навчальним середовищам (VLE).
Moodle надає можливість викладачам створювати ефективні сайти для онлайн-
[Введіть текст тут]
навчання. Moodle можна використовувати як в навчанні школярів, студентів, так і
при підвищенні кваліфікації, бізнес-навчанні. Типова функціональність Moodle
включає в себе: здачу завдань, дискусійні форуми, завантаження файлів,
оцінювання, обмін повідомленнями, календар подій, новини та анонси подій,
онлайн тестування, вікі.
Онлайн тестування в системі Moodle являє собою скрипт тобто сценарій, при
якому система формує бланк завдань та відповідей. Система виводить по п’ять
завдань на сторінку. Студенту потрібно обрати одну або декілька відповідей на
завдання та перейти до наступної сторінки. Після проходження останнього
завдання студент має здати роботу. Після проходження тесту та його здачі, система
формує бланк з відповідями студента який він може переглянути, щоб дізнатись
свою оцінку та правильність відповідей.
При цьому можливе встановлення таймера для обмеження в часі доступу до
тесту. Тобто викладач може задати конкретний час для іспиту, та час після якого
проходження тесту буде неможливим.
Рисунок 2.1 Графічний вигляд результату тестування в Moodle.
На рисунку 2.1 зображений варіант виводу відповідей для перевірки
користувачем, типові елементи якого можна використати в дипломній роботі,
[Введіть текст тут]
удосконаливши відповіді для врахування ергономіки і специфіки тестової системи
самоперевірки здобувачів вищої освіти.
Також при тестуванні в Moodle викладачі використовують Google Форми.
Google Форми - програмне забезпечення для адміністрування опитування. Додаток
дозволяє користувачеві створювати та редагувати опитування в інтернеті,
співпрацюючи з іншими користувачами в режимі реального часу. Зібрану
інформацію можна автоматично вносити в електронну таблицю.
itProger школа програмування для початківців розробила навчальні
програми так, щоб зробити навчання максимально простим. У них дотримано
балансу між теорією та практикою, є тести для перевірки набутих навичок та
відеоуроки.
Тести на сайті itProger дуже різноманітні та являють собою графічно оформлений
скрипт. Тобто сценарій, коли при натисканні на кнопку початку тесту на екран
виводиться бланк з питаннями та відповідями. В цьому тесті виводяться одразу усі
запитання на сторінку. Коли тест є завершеним система виводить відповіді на
екран. Студент може звірившись з відповідями пройти тест знову, або обрати більш
складний рівень тесту для проходження.
Рисунок 2.2 Графічний вигляд результату тестування в itProger
На рисунку 2.2 зображений варіант виводу результату тестування на
сторінку, елементи якого можна використати в дипломній роботі. Цей варіант на
мою думку є більш зручним та лаконічним для перегляду студентом.
[Введіть текст тут]
[Введіть текст тут]
2 Обгрунтування вимог технічного завдання
Умова задачі
Реалізувати процес створення веб-орієнтованої інформаційної системи
самоперевірки здобувачів вищої освіти.
Процес створення веб-орієнтованої інформаційної системи самоперевірки
здобувачів вищої освіти можна охарактеризувати такими етапами:
- Встановлення на ПК апаратного та програмного забезпечення;
- Налаштування програмного та апаратного забезпечення;
- Створення дизайну та функціоналу головної сторінки;
- Створення дизайну сторінок з тестами;
- Створення JavaScript сценарію для кожного з тестів;
- Публікація сайту в мережі Інтернет;
- Аналіз функціонування;
- Навантажувальне тестування;
- Порівняння з аналогами на основі результатів розробки.
Потрібно дотриматися усіх вимог до створення даної інформаційної системи
вказаних нижче.
Інформаційна система повинна:
- Виводити на головній сторінці панель з усіма тестами;
- Надавати доступ до тестів також і через окреме спливаюче меню;
- Надавати доступ до тестів за допомогою натискання конкретної кнопки з
назвою тесту;
- Окремо виводити кнопку яка відправляє на головну сторінку;
- Створювати на екрані користувача тест;
- Тест має складатися із одного питання і декількох відповідей, лише одна з
яких має бути правильною, індикатора з номером запитання, кнопки «далі»
на сторінку;
[Введіть текст тут]
- Тести мають бути заповнені питаннями з предметів: Інтелектуальний аналіз
даних, Управління ІТ проектами, Технології та системи прийняття рішень,
Прикладні інтелектуальні системи обробки даних;
- Після проходження тесту повинен бути виведений бланк з відповідями які
зробив користувач;
- Правильні і неправильні відповіді повинні відмічатися на екрані, правильні –
зеленим, неправильні - червоним;
- Після перевірки користувач повинен мати змогу повернутися на головну
сторінку або повторити проходження тесту за натисканням кнопки «З
початку».
Сайт повинен бути перевірений на функціональність та за допомогою
навантажувального тестування. Результати повинні бути порівняні з результатами
тестування конкурентів.
Після розробки повинен бути оформлений звіт(пояснювальна записка) з
виконання кваліфікаційної роботи. Звіт повинен бути оформлений за Методичними
рекомендаціями до виконання кваліфікаційної роботи[1].
[Введіть текст тут]
3 Розробка веб-орієнтованої інформаційної системи
3.1 Створення сайту
Для виконання проекту була використана Nicepage. Це кросплатформовий
візуальний редактор сайтів для Joomla і WordPress.
Після встановлення програма має приблизно такий вигляд:
Рисунок 3.1 Вікно Nicepage після запуску
Для створення сайту потрібно натиснути кнопку +Новий сайт. У результаті
чого створиться вікно з першою «пустою» сторінкою (Рис3.2). При цьому додаток
не потрібно зберігати, програма сама зберігає його після кожної вашої дії. Навіть
після виходу додаток лишиться у тому стані у якому ви його залишили.
Рисунок 3.2 Основна форма додатку
[Введіть текст тут]
3.2 Створення Головної сторінки
Для створення головної сторінки були використані такі блоки[8] сайтів як:
Заголовки, Меню, Кнопки.
По перше, було відведено місце під шапку сайту, на якому був доданий
логотип і меню з розділами.
По друге, було змінено фон сайту, я обрав градієнт від весняно зеленого до
сріблястого кольору.
По третє, Додав заголовки та кнопки як контент. Після чого змінив дизайн та
підписав кнопки відповідно до тестів.
Останнім етапом створення головної сторінки було створення підвалу сайту.
Для цього я взяв стандартний вигляд підвалу та заповнив його контентом.
Результатом[7] є Головна сторінка яка вміщує в собі: Логотип сайту, Зручне
меню зі спливаючим меню «Наші тести» та на головній сторінці є легкий доступ до
тестів, щоб користувач без усяких зайвих маніпуляцій мав доступ до усіх
тестів(Рис3.3).
Програма вивела такі Html та CSS коди (Додаток А: Html код Головної сторінки,
CSS код Головної сторінки).
Після усіх маніпуляцій сайт набув такого вигляду:
Рисунок 3.3 Вигляд головної сторінки сайту
[Введіть текст тут]
3.3 Створення сторінки з тестом
Наступним етапом розробки було створення сторінки на яку був доданий
Html і CSS[12] коди які вже й створювали тест та його оформлення і посилалися на
код JS (Додаток А: Html код який посилається на JS сценарій).
Рисунок 3.4 Вигляд сторінки тесту після переходу з головної
На даному рисунку зображений тест під час його проходження.
Користувачеві потрібно обрати варіант відповіді, який на його думку є правильним,
та натиснути кнопку «Далі». Після чого на екран буде виведено наступне питання
з бази запитань(Рис3.5).
Рисунок 3.5 Приклад бази запитань з коду[21]
[Введіть текст тут]
3.4 Створення JavaScript сценарію
Для початку перед створенням JS[11] коду був написаний Html код який
посилається на JS сценарій та виводить на екран: питання, індикатори, результати
та кнопки «Далі» і «З початку» (Додаток А: Html код який посилається на JS
сценарій).
Після чого переходимо до JS сценарію.
Для початку були винесені та прописані константи[13] з Html коду.
const quiz = document.getElementById('quiz');
const questions = document.getElementById('questions');
const indicator = document.getElementById('indicator');
const results = document.getElementById('results');
const buttonNext = document.getElementById('button-next');
const buttonRestart = document.getElementById('button-restart');
Наступним кроком було створення масиву з об’єктами тобто питаннями та
відповідями. Питання виражалися у вигляді рядків. Відповіді виражалися у вигляді
масивів. Кожна відповідь у масиві має своє id, значення та ключ. Ключ у даному
випадку являє собою булевий[Помилка! Джерело посилання не знайдено.] тип даних True або
False(Так або Ні).
const DATA = [
{question: '1. В технології ІАД що виконується раніше?',
answers: [
{id: '1',
value: 'Визначити часові межі, коли мала місце проблема.',
correct: false,},
{id: '2',
value: 'Визначення місця, де отримати актуальні та перевірені дані.',
correct: true,},
{id: '3',
value: 'Сформувати перелік усіх можливих точок зору на проблему. ',
correct: false,
},] }, ];
Далі були написані функції рендеру[14] запитань та відповідей які вказані
нижче. В даній функції в обгортку запитань буде вставлена розмітка тобто
запитання. Вся суть даної функції полягає у тому, що буде рендеритись лише одне
питання. Тобто буде братись конкретне питання із даних і ці дані будуть виведені
в верстку.
const renderQuestions = (index) => {
renderIndicator(index + 1);
questions.dataset.currentStep = index;
const renderAnswers = () => DATA[index].answers
.map((answer) => `
[Введіть текст тут]
<li><label>
<input class="answer-input" type="radio" name=${index} value=${answer.id}>
${answer.value}</label></li>`)
.join('');
questions.innerHTML = `
<div class="quiz-questions-item">
<div class="quiz-questions-item__question">${DATA[index].question}</div>
<ul class="quiz-questions-item__answers">${renderAnswers()}</ul></div>`;};
Потім були створені слухачі «listener».
У даний listener[16], який вказаний нижче, закладена логіка відповіді. Слухач бере
індекс та значення питання яке вибрав користувач та поміщає його локальну змінну
(localResults). Та після обирання відповіді активується кнопка «Далі».
quiz.addEventListener('change', (event) => {
if (event.target.classList.contains('answer-input')) {
localResults[event.target.name] = event.target.value;
buttonNext.disabled = false;}
});
У даний listener, який указаний нижче, закладена логіка кнопок «Далі» «З
початку». Тут я прикріпив listener не на конкретну кнопку, а на обгортку[19]. Це
пов’язано з тим, що тут буде використано делегування. Тобто коли клік
відбувається на кнопку або ж на зміну інпута, ця подія буде підійматися уверх до
обгортки. І от на рівні обгортки буде з’ясовуватись які зміни відбулись і в
залежності від цього будуть прийнять якісь рішення. Також була прописана логіна
кнопки[17] «Далі»(Додаток А: Приклад JS коду сторінки з тестом).
Була створена функція рендеру індикатора, яка вказана нижче. Вона вказує
на питання на якому знаходиться користувач та на кількість запитань у тесті.
const renderIndicator = (currentStep) => {
indicator.innerHTML = `${currentStep}/${DATA.length}`;
};
Далі була написана функція рендеру результатів[18], яка вказана нижче. Дана
функція збирає усі дані в одну змінну та виводить її на екран. Відмічає правильні
та неправильні відповіді також надає доступ до кнопки «З початку» для повторного
проходження тесту (Додаток А Приклад JS коду сторінки з тестом).
Перелік програм використаних для виконання кваліфікаційної роботи та
реалізації поставлених задач: Microsoft Word 2016, NotePad++, Nicepage. Для
публікації системи в мережі Інтернет було використано сайт HostPro з його
Wordpress Старт Trial.
[Введіть текст тут]
3.5 Аналіз функціонування
Для перевірки функціональності сайту було проведене Ad-hock тестування,
тобто тестування без підготовки. Дозволяє визначити: чи зрозуміле призначення
форм, чи всі обов'язкові поля зазначені, чи є перевірка правильності введення
контактних даних. Переваги такого тесту: економія часу, найважливіші проблеми
виявляються на початкових етапах.
Перевірка розпочинається з відкриття головної сторінки. На головній
сторінці помилок немає, усі кнопки та посилання працюють правильно. Присутні
однакові посилання, тобто і великі кнопки з тестами, і кнопки в спливаючому меню
ведуть до відповідних тестів.
1. Під час переходу на сторінку тесту за натисканням кнопки із спливаючого меню
«ІАД» чи кнопки «ІНТЕЛЕКТУАЛЬНИЙ АЛНАЛІЗ ДАНИХ» відкривається
сторінка з тестом по даному предмету.
2. Під час переходу на сторінку тесту за натисканням кнопки із спливаючого меню
«ПІСОД» чи кнопки «ПРИКЛАДНІ ІНТЕЛЕКТУАЛЬНІ СИСТЕМИ ОБРОБКИ
ДАНИХ» відкривається сторінка з тестом по даному предмету.
3. Під час переходу на сторінку тесту за натисканням кнопки із спливаючого меню
«ТСППР» чи кнопки «ТЕХНОЛОГІЇ ТА СИСТЕМИ ПІДТРИМКИ ПРИЙНЯТТЯ
РІШЕНЬ» відкривається сторінка з тестом по даному предмету.
4. Під час переходу на сторінку тесту за натисканням кнопки із спливаючого меню
«Упр ІТ про» чи кнопки «УПРАВЛІННЯ ІТ ПРОЕКТАМИ» відкривається сторінка
з тестом по даному предмету.
Наступним кроком є перевірка сторінок з тестами. Для прикладу використана
сторінка з тестом «ІАД». Під час відкриття сторінки на екрані з’являється одне
тестове задання. Усі кнопки з відповідями працюють. Кнопка далі загорається лише
після вибору свого варіанту відповіді. Індикатор запитань працює правильно. Після
відповіді на останнє питання на екран виводиться бланк з відповідями користувача.
Усі правильні відповіді відмічаються «зеленим» кольором а помилки «червоним».
У кінці бланку знаходиться кнопка з початку яка відправляє користувача на
початок тесту для повторного проходження. Помилок та багів у роботі тесту не
знайдено.
[Введіть текст тут]
Таким чином сайт відповідає умовам задачі:
- Виводить на головній сторінці панель з усіма тестами;
- Надає доступ до тестів за допомогою натискання кнопки;
- Створює на екрані користувача тест;
- Тест складається із питання і 2-6 відповідей, лише одна з яких є правильною;
- Після проходження тесту виводить бланк з відповідями які зробив
користувач;
- Правильні і неправильні відповіді відмічаються на екрані;
- Після перевірки користувач має змогу повернутися на головну сторінку або
розпочати тест знову.
Було проведено тестування GTMetrix яке дало даний результат(Рис 4.1).
Рисунок 4.1 Результат GTMetrix тестування сайту
Наступним етапом було навантажувальне тестування сайту за допомогою
Apache Jmeter. Для тестування був завантажений додаток Apache Jmeter. Після
відкриття програми були вписані дані для тестування тобто: кількість відвідувачів
(100), час тестування (60с) та кількість запитів (20). По завершенню тестування я
отримав такі результати (Рис 4.1.1, Рис 4.1.2). По результатах видно що сайт доволі
добре справляється з навантаженнями і результати тестування є задовільними.
[Введіть текст тут]
Рисунок 4.1.1 Результати навантажувального тестування
Рисунок 4.1.2 Результати на навантажувального тестування
3.6 Порівняння з аналогами на основі результатів розробки
Після розробки та тестування сайту можна сказати, що сайт MSTEST є
набагато зручнішим у використанні, так як є дуже простим у порівнянні з
аналогами. Тобто користувачеві для проходження тесту потрібно лише обрати його
та натиснути кнопку. Також для сайту itProger було проведено GTMetrix
тестування (Рис 4.2) результати якого є гіршими ніж у сайту MSTEST. Проведене
навантажувальне тестування яке дало такі результати (Рис 4.2.1, Рис 4.2.2) і за
порівняння результатів видно переваги сайту MSTEST.
[Введіть текст тут]
Рисунок 4.2 Результати GTMetrix тестування
Рисунок 4.2.1 Результати навантажувального тестування
Рисунок 4.2.2 Результати навантажувального тестування
Для Moodle було проведено GTMetrix тестування яке дало такі результати
Рис(4.3), які є гіршими ніж у сайту MSTEST. Проведене навантажувальне
тестування яке дало такі результати (Рис 4.3.1, Рис 4.3.2) і за порівняння результатів
видно переваги сайту MSTEST.
[Введіть текст тут]
Рисунок 4.3 Результати GTMetrix тестування
Рисунок 4.3.1 Результати навантажувального тестування
Рисунок 4.3.2 Результати навантажувального тестування
[Введіть текст тут]
ВИСНОВКИ
В результаті виконання дипломного проекту було створено веб-орієнтовану
інформаційну систему самоперевірки здобувачів вищої освіти.
Під час виконання дипломного проекту було проведено аналіз особливостей веб
орієнтованих інформаційних систем, був проведений огляд існуючих рішень та
аналогів, було обгрунтовано вимоги технічного завдання.
У підсумку роботи було створено веб-орієнтовану інформаційну систему
самоперевірки здобувачів вищої освіти. Реалізована Головна сторінка з
дотриманням усіх вимог технічного завдання. Реалізовані сторінки з тестами на
кожній з яких реалізований JavaScript сценарій з дотриманням усіх вимог
технічного завдання. Була реалізована публікація сайту в мережу Інтернет.
Проведений аналіз функціонування веб-орієнтованої інформаційної системи
самоперевірки здобувачів вищої освіти та порівняння її з аналогами на основі
результатів розробки. Проведене навантажувальне тестування.
Веб-орієнтована інформаційна система самоперевірки здобувачів вищої
освіти відповідає усім вимогам, пред’явленим в технічному завданні до
кваліфікаційної роботи.
[Введіть текст тут]
ДОДАТКИ
Додаток А
Html код Головної сторінки:
<!DOCTYPE html>
<html style="font-size: 16px;" lang="uk-UA">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Tests for Students, Тести для самоконтролю">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>Головна</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="Головна.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<meta name="generator" content="Nicepage 4.10.5, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,
900,900i|Open+Sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Site1"
}</script>
<meta name="theme-color" content="#478ac9">
<meta property="og:title" content="Головна">
<meta property="og:description" content="">
<meta property="og:type" content="website">
</head>
<body class="u-body u-xl-mode"><header class="u-clearfix u-header u-header" id="sec-bfea"><div
class="u-align-left u-clearfix u-sheet u-sheet-1">
<h1 class="u-text u-text-grey-75 u-text-1">MSTEST</h1>
<nav class="u-dropdown-icon u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1rem; letter-spacing: 0px; font-weight: 700;">
<a class="u-button-style u-custom-border u-custom-border-color u-custom-borders u-custom-left-
right-menu-spacing u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-
custom-top-bottom-menu-spacing u-nav-link" href="#">
<svg class="u-svg-link" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#svg-4d55"></use></svg>
<svg class="u-svg-content" version="1.1" id="svg-4d55" viewBox="0 0 16 16" x="0px" y="0px"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><rect y="1"
width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16"
height="2"></rect>
</g></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-nav u-spacing-20 u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-button-style
u-nav-link u-text-active-palette-1-base u-text-grey-90 u-text-hover-palette-2-base" style="padding:
[Введіть текст тут]
10px 26px;">Наші тести</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled
u-v-spacing-10"><li class="u-nav-item"><a class="u-button-style u-nav-link u-white"
href="ТСППР.html">ТСППР</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white" href="Упр-ІТ-
про.html">Упр ІТ про</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white" href="ІАД.html">ІАД</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white"
href="ПІСОД.html">ПІСОД</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-
grey-90 u-text-hover-palette-2-base" href="Головна.html" style="padding: 10px 26px;">Головна</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-
grey-90 u-text-hover-palette-2-base" style="padding: 10px 26px;">Про тест</a>
</li></ul>
</div>
<div class="u-custom-menu u-nav-container-collapse">
<div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
<div class="u-inner-container-layout u-sidenav-overflow">
<div class="u-menu-close"></div>
<ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-3"><li class="u-nav-item"><a
class="u-button-style u-nav-link">Наші тести</a><div class="u-nav-popup"><ul class="u-h-spacing-
20 u-nav u-unstyled u-v-spacing-10"><li class="u-nav-item"><a class="u-button-style u-nav-link"
href="ТСППР.html">ТСППР</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Упр-ІТ-про.html">Упр ІТ
про</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="ІАД.html">ІАД</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="ПІСОД.html">ПІСОД</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Головна.html">Головна</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">Про тест</a>
</li></ul>
</div>
</div>
<div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
</div>
</nav>
</div></header>
<section class="u-align-center u-clearfix u-gradient u-section-1" src="" id="sec-e954">
<div class="u-clearfix u-sheet u-sheet-1">
<h1 class="u-align-center u-custom-font u-font-ubuntu u-text u-text-white u-text-1">Підготуйся до
екзамену на нашому сайті</h1>
<a href="https://nicepage.com/k/radio-website-templates" class="u-align-center u-border-2 u-border-
white u-btn u-btn-round u-button-style u-custom-color-1 u-radius-50 u-text-white u-btn-1">
Технології та системи підтримки прийняття рішень</a>
<a href="https://nicepage.com/k/radio-website-templates" class="u-align-center u-border-2 u-border-
white u-btn u-btn-round u-button-style u-custom-color-1 u-radius-50 u-text-white u-btn-2">
Прикладні інтелектуальні системи обробки даних</a>
<a href="https://nicepage.com/k/radio-website-templates" class="u-align-center u-border-2 u-border-
white u-btn u-btn-round u-button-style u-custom-color-1 u-radius-50 u-text-white u-btn-3">
Управління ІТ-проектами</a>
[Введіть текст тут]
<a href="https://nicepage.com/k/radio-website-templates" class="u-align-center u-border-2 u-border-
white u-btn u-btn-round u-button-style u-custom-color-1 u-radius-50 u-text-white u-btn-4">
Інтелектуальний аналіз даних</a>
</div>
</section>
<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-2bf0"><div class="u-
align-left u-clearfix u-sheet u-sheet-1">
<p class="u-text u-text-default u-text-1">Контакти</p>
<p class="u-text u-text-default u-text-2"> [email protected]</p>
<a href="https://www.instagram.com/maxym_shalivsky/" class="u-active-none u-border-2 u-border-
palette-1-base u-bottom-left-radius-0 u-bottom-right-radius-0 u-btn u-btn-rectangle u-button-style u-
hover-none u-none u-radius-0 u-top-left-radius-0 u-top-right-radius-0 u-btn-1">Instagram</a>
<a href="https://www.facebook.com/maxym.shalivskiy" class="u-active-none u-border-2 u-border-
palette-1-base u-bottom-left-radius-0 u-bottom-right-radius-0 u-btn u-btn-rectangle u-button-style u-
hover-none u-none u-radius-0 u-top-left-radius-0 u-top-right-radius-0 u-btn-2">Facebook</a>
</div></footer>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/css-templates" target="_blank">
<span>CSS Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="https://nicepage.com/html-website-builder" target="_blank">
<span>HTML Designer</span>
</a>.
</section>
</body>
</html>
CSS код Головної сторінки:
.u-section-1 {
background-image: linear-gradient(#10e892, #f2f2f2);
}
.u-section-1 .u-sheet-1 {
min-height: 818px;
}
.u-section-1 .u-text-1 {
font-weight: 700;
width: 860px;
margin: 102px auto 0;
}
.u-section-1 .u-btn-1 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 1px;
background-image: none;
margin: 52px auto 0;
padding: 17px 33px 17px 32px;
}
[Введіть текст тут]
.u-section-1 .u-btn-2 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 1px;
background-image: none;
margin: 48px auto 0;
padding: 16px 44px 18px 42px;
}
.u-section-1 .u-btn-3 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 1px;
background-image: none;
margin: 50px auto 0;
padding: 16px 234px 18px;
}
.u-section-1 .u-btn-4 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 1px;
background-image: none;
margin: 50px auto 60px;
padding: 17px 191px 17px 189px;
}
@media (max-width: 991px) {
.u-section-1 .u-text-1 {
width: 720px;
}
}
@media (max-width: 767px) {
.u-section-1 .u-text-1 {
width: 540px;
}
}
@media (max-width: 575px) {
.u-section-1 .u-text-1 {
width: 340px;
}
}
Приклад Html+CSS коду сторінки з тестом:
<!DOCTYPE html>
<html style="font-size: 16px;" lang="uk-UA">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
[Введіть текст тут]
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>ТСППР</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="ТСППР.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<meta name="generator" content="Nicepage 4.10.5, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,
900,900i|Open+Sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Site1"
}</script>
<meta name="theme-color" content="#478ac9">
<meta property="og:title" content="ТСППР">
<meta property="og:description" content="">
<meta property="og:type" content="website">
</head>
<body class="u-body u-xl-mode"><header class="u-clearfix u-header u-header" id="sec-bfea"><div
class="u-align-left u-clearfix u-sheet u-sheet-1">
<h1 class="u-text u-text-grey-75 u-text-1">MSTEST</h1>
<nav class="u-dropdown-icon u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1rem; letter-spacing: 0px; font-weight: 700;">
<a class="u-button-style u-custom-border u-custom-border-color u-custom-borders u-custom-left-
right-menu-spacing u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-
custom-top-bottom-menu-spacing u-nav-link" href="#">
<svg class="u-svg-link" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#svg-4d55"></use></svg>
<svg class="u-svg-content" version="1.1" id="svg-4d55" viewBox="0 0 16 16" x="0px" y="0px"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><rect y="1"
width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16"
height="2"></rect>
</g></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-nav u-spacing-20 u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-button-style
u-nav-link u-text-active-palette-1-base u-text-grey-90 u-text-hover-palette-2-base" style="padding:
10px 26px;">Наші тести</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled
u-v-spacing-10"><li class="u-nav-item"><a class="u-button-style u-nav-link u-white"
href="ТСППР.html">ТСППР</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white" href="Упр-ІТ-
про.html">Упр ІТ про</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white" href="ІАД.html">ІАД</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white"
href="ПІСОД.html">ПІСОД</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-
grey-90 u-text-hover-palette-2-base" href="Головна.html" style="padding: 10px 26px;">Головна</a>
[Введіть текст тут]
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-
grey-90 u-text-hover-palette-2-base" style="padding: 10px 26px;">Про тест</a>
</li></ul>
</div>
<div class="u-custom-menu u-nav-container-collapse">
<div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
<div class="u-inner-container-layout u-sidenav-overflow">
<div class="u-menu-close"></div>
<ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-3"><li class="u-nav-item"><a
class="u-button-style u-nav-link">Наші тести</a><div class="u-nav-popup"><ul class="u-h-spacing-
20 u-nav u-unstyled u-v-spacing-10"><li class="u-nav-item"><a class="u-button-style u-nav-link"
href="ТСППР.html">ТСППР</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Упр-ІТ-про.html">Упр ІТ
про</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="ІАД.html">ІАД</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="ПІСОД.html">ПІСОД</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Головна.html">Головна</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">Про тест</a>
</li></ul>
</div>
</div>
<div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
</div>
</nav>
</div></header>
<section class="u-align-center u-clearfix u-gradient u-section-1" src="" id="sec-a812">
<div class="u-align-left u-clearfix u-sheet u-sheet-1">
<p class="u-text u-text-default u-text-1"> Технології та системи підтримки прийняття рішень</p>
<div class="u-clearfix u-custom-html u-expanded-width u-custom-html-1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style> body {
margin: 0;
font-family: 'Open Sans', sans serif;
}
ul { list-style: none; }
.quiz {
margin: 0 auto;
width: 600px;
}
.quiz-questions,
.quiz-indicator,
.quiz-results {
margin-bottom: 20px;
}
.quiz-questions-item,
.quiz-results-item {
margin-bottom: 20px;
&__question {
[Введіть текст тут]
font-size: 20px;
margin-bottom: 20px;
}
&__answers {
margin: 0;
padding: 0;
list-style: none;
}
}
.quiz-results {
display: none;
}
.button-next {
color: Black;
}
.button-restart {
color: Black;
display: none;
}
.questions--hidden,
.indicator--hidden,
.button-next--hidden {
display: none;
}
.indicator--visible,
.button-restart--visible {
display: block;
}
.answer--invalid {
color: red;
}
.answer--valid {
color: green;
} </style>
<div class="quiz" id="quiz">
<div class="quiz-questions" id="questions"></div>
<div class="quiz-indicator" id="indicator">1/20</div>
<div class="quiz-results" id="results">
<div class="quiz-results-item">
<div class="quiz-results-item__question">Питання 1</div>
<ul class="quiz-results-item__answers">
<li>Відповідь 1</li>
<li>Відповідь 2</li>
<li>Відповідь 3</li>
<li>Відповідь 4</li>
</ul>
</div>
</div>
<div class="quiz-controls">
<button class="button-next" id="button-next" disabled="">Далі</button>
<button class="button-restart" id="button-restart">З початку</button>
</div>
</div>
[Введіть текст тут]
<script src="file:///C:/Users/HOME/Desktop/scripts1.js"></script>
</div>
</div>
</section>
<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-2bf0"><div class="u-
align-left u-clearfix u-sheet u-sheet-1">
<p class="u-text u-text-default u-text-1">Контакти</p>
<p class="u-text u-text-default u-text-2"> [email protected]</p>
<a href="https://www.instagram.com/maxym_shalivsky/" class="u-active-none u-border-2 u-border-
palette-1-base u-bottom-left-radius-0 u-bottom-right-radius-0 u-btn u-btn-rectangle u-button-style u-
hover-none u-none u-radius-0 u-top-left-radius-0 u-top-right-radius-0 u-btn-1">Instagram</a>
<a href="https://www.facebook.com/maxym.shalivskiy" class="u-active-none u-border-2 u-border-
palette-1-base u-bottom-left-radius-0 u-bottom-right-radius-0 u-btn u-btn-rectangle u-button-style u-
hover-none u-none u-radius-0 u-top-left-radius-0 u-top-right-radius-0 u-btn-2">Facebook</a>
</div></footer>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/website-templates" target="_blank">
<span>Website Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="" target="_blank">
<span>Website Builder Software</span>
</a>.
</section>
</body>
</html>
Html код який посилається на JS сценарій:
<body>
<div class="quiz" id="quiz">
<div class="quiz-questions" id="questions"></div>
<div class="quiz-indicator" id="indicator">1/20</div>
<div class="quiz-results" id="results">
<div class="quiz-results-item">
<div class="quiz-results-item__question">Питання 1</div>
<ul class="quiz-results-item__answers">
<li>Відповідь 1</li>
<li>Відповідь 2</li>
<li>Відповідь 3</li>
<li>Відповідь 4</li>
</ul>
</div>
</div>
<div class="quiz-controls">
<button class="button-next" id="button-next" disabled>Далі</button>
<button class="button-restart" id="button-restart">З початку</button>
</div>
</div>
<script src="file:///C:/Users/HOME/Desktop/scripts.js"></script>
</body>
Приклад JS коду сторінки з тестом:
const DATA = [
[Введіть текст тут]
{
question: '1. Яке рішення найнадійніше?',
answers: [
{
id: '1',
value: 'Те, яке пов`язане з найменшими витратами.',
correct: false,
},
{
id: '2',
value: 'Те, яке з найвищою ймовірністю дає потрібний результат.',
correct: false,
},
{
id: '3',
value: 'Те, яке дає найвищий прибуток.',
correct: false,
},
{
id: '4',
value: 'Те, яке з найменшою ймовірністю дає небажаний результат.',
correct: true,
},
]
},
{
question: '2. В процесній моделі управління прийняття рішення виконується в розрізі функцій',
answers: [
{
id: '5',
value: 'Підготовки, забезпечення, виробництва.',
correct: false,
},
{
id: '6',
value: 'Управління підприємством, управління проектами.',
correct: false,
},
{
id: '7',
value: 'Організації, планування, контроль.',
correct: true,
},
]
},
{
question: '3. Одна з архітектур СППР?',
answers: [
{
id: '8',
value: 'Предметно-орієнтована',
correct: false,
},
[Введіть текст тут]
{
id: '9',
value: 'Проблемно-орієнтована',
correct: false,
},
{
id: '10',
value: 'Текстово-орієнтована',
correct: true,
},
]
},
{
question: '4. По продуктам діяльності яка буває СППР?',
answers: [
{
id: '11',
value: 'Активна',
correct: false,
},
{
id: '12',
value: 'Документальна',
correct: true,
},
{
id: '13',
value: 'Комбінована',
correct: false,
},
{
id: '14',
value: 'Пасивна',
correct: false,
},
]
},
{
question: '5. Який етап розробки СППР виконується раніше?',
answers: [
{
id: '15',
value: 'створення проекту СППР',
correct: true,
},
{
id: '16',
value: 'опис програмного забезпечення СППР',
correct: false,
},
{
id: '17',
value: 'програмування модулів СППР',
[Введіть текст тут]
correct: false
},
]
},
{
question: '6. Один з підходів до проєктування СППР.',
answers: [
{
id: '18',
value: 'Мозаїчний',
correct: false,
},
{
id: '19',
value: 'Інструментальний',
correct: true,
},
{
id: '20',
value: 'Спіральний',
correct: false,
},
]
},
{
question: '7. Який етап розробки СППР виконується раніше?',
answers: [
{
id: '21',
value: 'формулювання постановки задачі',
correct: true,
},
{
id: '22',
value: 'формулювання вимог до СППР',
correct: false,
},
{
id: '23',
value: 'аналіз можливості реалізації СППР',
correct: false,
},
]
},
{
question: '8. Для оцінки міри задоволення (цінності) від рішення що використовується?',
answers: [
{
id: '24',
value: 'Показники',
correct: false,
},
{
[Введіть текст тут]
id: '25',
value: 'Оцінки',
correct: false,
},
{
id: '26',
value: 'Критерії',
correct: true,
},
]
},
{
question: '9. В процесної моделі управління що входить в блок (процес) знизу.',
answers: [
{
id: '27',
value: 'управління',
correct: false,
},
{
id: '28',
value: 'вхід',
correct: false,
},
{
id: '29',
value: 'нічого',
correct: false,
},
{
id: '30',
value: 'ресурси',
correct: true,
},
{
id: '31',
value: 'вихід',
correct: false,
},
]
},
{
question: '10. Рекомендоване обмеження по кількості функціональних блоків в бізнес-моделі?',
answers: [
{
id: '32',
value: '10-20',
correct: false,
},
{
id: '33',
value: '1-3',
correct: false,
[Введіть текст тут]
},
{
id: '34',
value: '3-6',
correct: true,
},
]
},
{
question: '11. Прийняття рішення, це...',
answers: [
{
id: '35',
value: 'вміння зробити оптимальний вибір.',
correct: false,
},
{
id: '36',
value: 'здатність розробити методику управління і по ній підібрати оптимальну альтернативу.',
correct: false,
},
{
id: '37',
value: 'здатність оптимізувати процеси.',
correct: false,
},
{
id: '38',
value: 'здатність здійснити аналіз найважливішої інформації і зробити оптимальний вибір.',
correct: true,
},
]
},
{
question: '12. Один з типів невизначеностей при прийнятті рішення?',
answers: [
{
id: '39',
value: 'невизначеність процесів',
correct: false,
},
{
id: '40',
value: 'невизначеність задач',
correct: false,
},
{
id: '41',
value: 'невизначеність цілей',
correct: true,
},
]
},
[Введіть текст тут]
{
question: '13. Які СППР використовують факти і правила?',
answers: [
{
id: '42',
value: 'орієнтовані на моделі',
correct: false,
},
{
id: '43',
value: 'орієнтовані на знання',
correct: true,
},
{
id: '44',
value: 'орієнтовані на дані',
correct: false,
},
{
id: '45',
value: 'орієнтовані на документи',
correct: false,
},
]
},
{
question: '14. СППР, це?',
answers: [
{
id: '46',
value: 'людино-машинна система',
correct: true,
},
{
id: '47',
value: 'комп`ютерна система',
correct: false,
},
{
id: '48',
value: 'програма',
correct: false,
},
]
},
{
question: '15. Що означає "рішення приймається в умовах ризику"?',
answers: [
{
id: '49',
value: 'коли неможливо оцінити імовірність потенційних результатів',
correct: false,
},
[Введіть текст тут]
{
id: '50',
value: 'коли точно відомий результат кожного з альтернативних варіантів вибору',
correct: false,
},
{
id: '51',
value: 'коли результати альтернативних варіантів не є визначеними, але відомі їх імовірності',
correct: true,
},
]
},
{
question: '16. Один з компонентів СППР?',
answers: [
{
id: '52',
value: 'вирішувач',
correct: false,
},
{
id: '53',
value: 'інтерфейс',
correct: true,
},
{
id: '54',
value: 'аналізу даних',
correct: false,
},
]
},
{
question: '17. Чим характеризуються сучасні СППР?',
answers: [
{
id: '55',
value: 'дружнім інтерфейсом',
correct: true,
},
{
id: '56',
value: 'використанням банків даних',
correct: false,
},
{
id: '57',
value: 'використанням баз моделей',
correct: false,
},
]
},
{
[Введіть текст тут]
question: '18. Групи вимог до СППР?',
answers: [
{
id: '58',
value: 'ОПР, керівників підприємства, споживачів',
correct: false,
},
{
id: '59',
value: 'системні, замовника',
correct: false,
},
{
id: '60',
value: 'користувача, функціональні',
correct: true,
},
]
},
{
question: '19. Більш ранній етап процесу підготовки управлінського рішення.',
answers: [
{
id: '61',
value: 'Оцінка ефективності варіантів рішення',
correct: false,
},
{
id: '62',
value: 'Підготовка варіантів рішення',
correct: false,
},
{
id: '63',
value: 'Розпізнавання ситуації',
correct: true,
},
]
},
{
question: '20. Один з видів бізнес-процесу?',
answers: [
{
id: '64',
value: 'Описовий',
correct: false,
},
{
id: '65',
value: 'Забезпечувальний',
correct: true,
},
{
[Введіть текст тут]
id: '66',
value: 'Продуктовий',
correct: false,
},
]
},
{
question: '21. По способу впливу на процес прийняття рішення яка буває СППР?',
answers: [
{
id: '67',
value: 'Активна',
correct: true,
},
{
id: '68',
value: 'Мобільна',
correct: false,
},
{
id: '69',
value: 'Глобальна',
correct: false,
},
]
},
{
question: '22. Яка сукупність робіт є кінцевою в бізнес-процесі?',
answers: [
{
id: '70',
value: 'виконання',
correct: false,
},
{
id: '71',
value: 'відображення інформації про виконання',
correct: false,
},
{
id: '72',
value: 'контроль',
correct: true,
},
{
id: '73',
value: 'планування',
correct: false,
},
]
},
{
question: '23. Більш рання стадія прийняття рішень.',
[Введіть текст тут]
answers: [
{
id: '74',
value: 'Визначення ризиків',
correct: false,
},
{
id: '75',
value: 'Оцінка ризиків',
correct: false,
},
{
id: '76',
value: 'Розробка альтернативних варіантів рішень',
correct: true,
},
]
},
{
question: '24. СППР?',
answers: [
{
id: '77',
value: 'приймає рішення',
correct: false,
},
{
id: '78',
value: 'допомагає приймати рішення',
correct: true,
},
{
id: '79',
value: 'управляє прийняттям рішення',
correct: false,
},
]
},
{
question: '25. Які СППР орієнтуються на аналіз інформації?',
answers: [
{
id: '80',
value: 'орієнтовані на документи',
correct: false,
},
{
id: '81',
value: 'орієнтовані на дані',
correct: true,
},
{
id: '82',
[Введіть текст тут]
value: 'орієнтовані на знання',
correct: false,
},
{
id: '83',
value: 'орієнтовані на моделі',
correct: false,
},
]
},
{
question: '26. Група процесів при проектуванні СППР?',
answers: [
{
id: '84',
value: 'Виробничі процеси',
correct: false,
},
{
id: '85',
value: 'Стохастичні процеси',
correct: true,
},
{
id: '86',
value: 'Управлінські процеси',
correct: false,
},
]
},
{
question: '27. Один з підходів до проєктування СППР.',
answers: [
{
id: '87',
value: 'Системний',
correct: false,
},
{
id: '88',
value: 'Процесний',
correct: false,
},
{
id: '89',
value: 'Інформаційний',
correct: true,
},
]
},
{
question: '28. Який етап розробки СППР виконується найпізніше?',
answers: [
[Введіть текст тут]
{
id: '90',
value: 'формулювання вимог до СППР',
correct: true,
},
{
id: '91',
value: 'аналіз можливості реалізації СППР',
correct: false,
},
{
id: '92',
value: 'формулювання постановки задачі',
correct: false,
},
]
},
{
question: '29. Який зв`язок між СППР-інструментарієм і генераторами СППР?',
answers: [
{
id: '93',
value: 'Генератори використовується для створення СППР-інструментарію.',
correct: false,
},
{
id: '94',
value: 'СППР-інструментарій і генератори використовуються для створення спеціалізованих
СППР.',
correct: false,
},
{
id: '95',
value: 'СППР-інструментарій використовується для створення генераторів.',
correct: true,
},
]
},
{
question: '30. Більш пізня стадія прийняття рішень.',
answers: [
{
id: '96',
value: 'Визначення ризиків',
correct: false,
},
{
id: '97',
value: 'Оцінка ризиків',
correct: true,
},
{
id: '98',
[Введіть текст тут]
value: 'Розробка альтернативних варіантів рішень',
correct: false,
},
]
},
];
let localResults = {};
const quiz = document.getElementById('quiz');
const questions = document.getElementById('questions');
const indicator = document.getElementById('indicator');
const results = document.getElementById('results');
const buttonNext = document.getElementById('button-next');
const buttonRestart = document.getElementById('button-restart');
const renderQuestions = (index) => {
renderIndicator(index + 1);
questions.dataset.currentStep = index;
const renderAnswers = () => DATA[index].answers
.map((answer) => `
<li>
<label>
<input class="answer-input" type="radio" name=${index} value=${answer.id}>
${answer.value}
</label>
</li>
`)
.join('');
questions.innerHTML = `
<div class="quiz-questions-item">
<div class="quiz-questions-item__question">${DATA[index].question}</div>
<ul class="quiz-questions-item__answers">${renderAnswers()}</ul>
</div>
`;
};
const renderResults = () => {
let content = '';
const getClassname = (answer, questionIndex) => {
let classname= '';
if (!answer.correct && answer.id === localResults[questionIndex]) {
classname= 'answer--invalid';
} else if (answer.correct) {
classname= 'answer--valid';
}
return classname;
};
const getAnswers = (questionIndex) => DATA[questionIndex].answers
.map((answer) => `<li class=${getClassname(answer, questionIndex)}>${answer.value}</li>`)
.join('');
DATA.forEach((question, index) => {
content += `
<div class="quiz-results-item">
<div class="quiz-results-item__question">${question.question}</div>
<ul class="quiz-results-item__answers">${getAnswers(index)}</ul>
</div>
[Введіть текст тут]
`;
});
results.innerHTML = content;
};
const renderIndicator = (currentStep) => {
indicator.innerHTML = `${currentStep}/${DATA.length}`;
};
quiz.addEventListener('change', (event) => {
if (event.target.classList.contains('answer-input')) {
localResults[event.target.name] = event.target.value;
buttonNext.disabled = false;
}
});
quiz.addEventListener('click', (event) => {
if (event.target.classList.contains('button-next')) {
const nextQuestionIndex = Number(questions.dataset.currentStep) + 1;
if (DATA.length === nextQuestionIndex) {
questions.classList.add('questions--hidden');
indicator.classList.add('indicator--hidden');
results.classList.add('indicator--visible');
buttonNext.classList.add('button-next--hidden');
buttonRestart.classList.add('button-restart--visible');
renderResults();
} else {
renderQuestions(nextQuestionIndex);
}
buttonNext.disabled = true;
}
if (event.target.classList.contains('button-restart')) {
localResults = {};
results.innerHTML = '';
questions.classList.remove('questions--hidden');
indicator.classList.remove('indicator--hidden');
results.classList.remove('indicator--visible');
buttonNext.classList.remove('button-next--hidden');
buttonRestart.classList.remove('button-restart--visible');
renderQuestions(0);
}
});
renderQuestions(0);
[Введіть текст тут]
Список використаної літератури
1. Методичні рекомендації до виконання кваліфікаційної роботи для здобувачів
освітнього ступеня бакалавра зі спеціальності 126 інформаційні системи та
технології. Черкаси : ЧДТУ, 2019. 31с.
2. Ременяк Л.В. Проектування інформаційних систем : конспект лекцій. Одеса :
Одеський державний екологічний університет, 2016. 152с.
3. Коваленко О. C., Добровська Л. М. Проектування інформаційних систем:
Загальні питання теоріїпроектування ІС : конспект лекцій. Київ : КПІ ім. Ігоря
Сікорського, 2020. 192с.
4. Жалдак М. І., Франчук В. М. Інформаційні технології і засоби навчання : Том
76 : 2020. 16с.
5. Трофименко О. Г., Козін О. Б., Задерейко О. В., Плачінда О. Є. Веб-технології
та веб-дизайн : навч. посіб. Одеса : Фенікс, 2019. 18с.
6. Хайрова Н. Ф., Петрасова С. В. Сучасні технології Web-програмування : навч.
посіб. Харків : ФОП Панов А.М., 2020. 112с.
7. Мельник Р.А. Програмування веб-застосувань (фронт-енд та бек-енд) : навч.
посіб. : Львівська політехніка, 2018. 248с.
8. Бородкіна І.Л., Бородкін Г.О. WEB-технології та WEB-дизайн: застосування
мови HTML для створення електронних ресурсів : навч. посіб. : Ліра-КРік,
2020. 212с.
9. Пасічник О. Г., Пасічник О. В., Стеценко І. В. Основи веб-дизайну : навч.
посіб. Київ : BHV, 2009. 337с.
10. Речич Н.В. Інформатика: вебтехнології : вибірк. мод. для 10–11 кл. : РАНОК,
2020. 160с.
11. Пасічник В.В., Пасічник О.В., Угрин Д.І. Веб-технології : підручник Львів :
Магнолія 2006, 2018. 336с.
12. Девід Фленаган JavaScript: Детальне керівництво видавництво : посіб. :
Діалектика-Вільямс, 2021. 720с.
13. Спірінцев В.В., Гнатушенко В.В., Волковський О.С. WEB-ТЕХНОЛОГІЇ ТА
WEB-ДИЗАЙН: HTML, CSS : навч. посіб. Дніпро : Ліра, 2017. 163с.
14. Ілля Кантор Підручник з сучасного JavaScript : підпучник : 2007. 1518с.
[Введіть текст тут]
15. Дакетт Джон Javascript і jQuery. Інтерактивна веб-розробка : підручник :
Ексмо, 2018. 640с.
16. Васильєв А.Н. JavaScript в прикладах і задачах : підручник : 2017. 721с.
17. Стоян Стефанов JavaScript: Шаблони : підручник : Символ, 2018. 272с.
18. Марейн Хавербеке Виразний JavaScript. Сучасне веб-програмування :
підручник : Пітер, 2019. 480с.
19. Мартін Фаулер Рефакторинг коду на JavaScript: поліпшення проєкту
існуючого коду : підручник : Діалектика, 2016. 464с.
20. Дуглас Крокфорд Як влаштований JavaScript : підручник : Пітер, 2019. 304с.
21. Кайл Сімпсон {Ви не знаєте JS} Замикання і об'єкти : підручник : Пітер, 2019.
336с.
22. Володимир Дронов JavaScript. Народні поради : підручник : БХВ-Петербург,
2012. 464с.
23. Кіт Вуд Розширення бібліотеки jQuery : підручник : ДМК Пресс, 2014. 400с.
24. Бер Бібо Ієгуда Кац jQuery. Докладне керівництво по просунутому JavaScript
: підручник : Символ-Плюс, 2009. 384с.
25. Danny Goodman Біблія користувача JavaScript : підручник : 2006. 1184с.
[Введіть текст тут]