Муниципальное бюджетное общеобразовательное учреждение

Сергиево – Посадская гимназия им. И.Б. Ольбинского

XXVII Конкурс
самостоятельных творческих работ
им. П.А.Флоренского

Савинов Артём
учащийся 10 «А» класса

Использование инструментов веб разработки для создания

интеллектуальной игры
проект

Руководитель:
Горбунова Марина Леонидовна
учитель и информатики

Сергиев Посад
2023
 Оглавление

Введение...................................................................................................................3
Основная часть........................................................................................................4
Верстка HTML......................................................................................................4
Верстка CSS..........................................................................................................8
Реализация сервера............................................................................................10
Хостинг проекта....................................................................................................12
Литературные источники......................................................................................13

2
 Введение
Цель: создать веб-приложение, оценивающее пользователя в знании
цитат, которые являются своеобразными «визитными карточками» для
знаменитых людей, оставивших свой след в истории.
Задачи:
1. Изучить технологии для создания веб-приложений (HTML, CSS,
Java Script, Node.js)
2. Выбрать список цитат знаменитых деятелей истории
3. Сделать вёрстку приложения с помощью HTML
4. Стилизовать приложение, добавить анимации с помощью CSS
5. Описать логику работы приложения с помощью Java Script и
Node.js
6. Выложить приложение в открытый доступ
Актуальность:
1. В современном мире мы постепенно начинаем забывать о тех
людях, которые внесли свой вклад в развитие истории, что
способствует непониманию молодежи основных концепций истории.
Мой проект позволит приобщить людей к изучению истории и
позволит по цитатам узнать больше о исторических деятелях прошлого
2. Также это проект позволит отточить навыки разработки
приложений и поможет с выбором будущей профессии

3
 Основная часть
Верстка HTML

В начале файла index.html – главного файла приложения, укажем

информацию, которую будет считывать браузер. А именно: кодировка (UTF-
8), стандартный масштаб отображения страницы, подключим фавинконку,
файл с CSS кодом, который будет отвечать за стилизацию блоков на странице
и за анимацию, также подключим фреймворк «BOOTSTRAP» для упрощения
вёрстки и Java Script код.

Далее опишем страницу, которую в браузере будет видеть

пользователь. Создадим контейнер, в котором будут располагаться блок с
цитатой, список с радио-кнопками для выбора ответа (такой тип кнопок
заранее подразумевает то, что пользователь может выбрать только один
вариант из предложенных), и кнопка «далее», которая выводит пользователю
следующую цитату. Вне этого контейнера создадим список с пустыми
элементами, который послужит заготовкой для будущей анимации.

4
5
 Также нужно сверстать страницу, на которой пользователь будет
видеть результат прохождения теста. Создадим новый файл check.html.
Информация, считываемая браузером, будет та же самая, что и в файле
6
index.html. Создадим контейнер, в который будем позже выводить количество
баллов, набранные пользователем и блок с двумя кнопками «Начать новый
тест» и «Начать заново», нажав на который пользователю будут предложены
другие цитаты, выбранные случайным образом или те же самые
соответственно.

7
 Верстка CSS

В файле index.css зададим цвет для текста, расположение по центру,

размер шрифта, и его тип, внешние отступы равные по 10% от родительского
блока для того, чтобы длинные цитаты не были расположены во всю длину
экрана, а имели перенос строки.

Также создадим анимацию кнопок при наведении на них курсором и

нажатии.

Так как веб-приложение может быть открыто не только с компьютера

нужно прописать адаптивность – изменение параметров страницы, зависящее
от ширины экрана устройства.

Для создания анимации нужно заполнить список с индексной

страницы квадратами разных размеров, задать им скорость вращения и
скорость подъёма. Также в зависимости от того, на сколько поднялся вверх

8
квадрат, радиус скругления на нем будет увеличиваться, что сделает
анимацию более живой.

9
 Реализация сервера

Создаем файл index.js. Подключаем библиотеку «express», которая

создает сервер.

Все цитаты хранятся в массиве с объектами, то есть по ключевому

слову мы имеем доступ к цитате и ее автору.

Далее опишем роуты – пути, по которым будет переходить

пользователь в процессе использования приложения. Всего их 4. С самого
начала для пользователя случайным образом генерируется массив с цитатами,
также происходит проверка на то, что каждый элемент массива уникален, то
есть цитаты не повторяются. В языке программирования Java Script нет
встроенной функции, генерирующей случайное целое число. Опишем
функцию самостоятельно.

После генерации цитат, они сервером отправляются на страницу

index.html вместе с их авторами и на странице уже считываются при помощи
шаблонизатора Handlebars. Также чтобы авторы цитат не шли в том же
порядке, что и цитаты в тесте, нужно их «перемешать». Для этого опишем
функцию, которая меняет местоположение авторов в их массиве.

10
 После ответа пользователем, на сервер отсылается параметр, в
котором содержится имя автора на данную цитату. Происходит проверка.
Если ответ пользователя соответствует автору цитаты, то увеличивается
счетчик правильных ответов. Когда по очереди пользователь ответит на все
цитаты, то сервером на страницу check.html будет отправлен объект, в
котором хранится количество правильных ответов. Далее если пользователь
нажимает «начать новый тест», то ему снова случайно генерируется массив с
цитатами, а счетчик правильных ответов обнуляется. Если пользователь
нажимает «Начать заново», то счетчик правильных ответов обнуляется, а
массив цитат остается прежним.

11
 Хостинг проекта
Для того, чтобы выложить проект в открытый доступ, мной была
выбрана платформа REPLIT1, так как: поддерживает проекты написанные на
Node.js, не требуется никаких дополнительных настроек, нужно просто
загрузить файл с проектом, и он окажется в открытом доступе.

1
https://replit.com/
12
 Литературные источники
1. Учебник по HTML: [электронный ресурс]- доступ свободный- URL:
http://htmlbook.ru/
2. Учебник по Java Script: [электронный ресурс]- доступ свободный- URL:
https://learn.javascript.ru/
3. Дополнительная информация о создании веб-приложений:
[электронный ресурс]- доступ свободный- URL:
https://developer.mozilla.org/ru/
4. Источник цитат: [электронный ресурс] – доступ по регистрации на
платформе – URL: https://vk.com/historianquote
5. Сервис хостинга [электронный ресурс] – доступ по регистрации на
платформе – URL: https://replit.com/

13