Мое первое приложение: викторина о характере "Звездных войн"
Я никогда раньше не делал веб-приложений, поэтому их создание было для меня совершенно новым опытом. Мне потребовалось некоторое время, чтобы придумать хороший проект для моего учебного лагеря, над которым я мог бы работать, который был бы веселым и познавательным. Однако, немного подумав (и посоветовавшись с несколькими друзьями, которые много лет занимаются программированием), я решил сделать приложение-викторину. Я чувствовал, что это будет хороший проект, чтобы проверить мое понимание JavaScript, HTML и CSS, а также дать мне представление о том, на что похоже проектирование и проектирование функций, используемых во внешних приложениях.
Мой проект также требовал использования внешнего API, который должен предоставить возможность реализовать итерацию массива. Сначала я начал с поиска хорошо организованного API, который мог бы подойти для моего проекта, чтобы мне было легко его использовать. Затем я узнал о Star Wars API (или SWAPI), и это натолкнуло меня на мысль сделать личностный тест на основе «Звездных войн». Тест личности должен определить, находится ли пользователь на светлой стороне, на темной стороне или где-то посередине (нейтрально). После определения этого код будет извлекать информацию о символе в SWAPI и отображать ее на веб-странице.
Прежде всего, я начал работать над файлом HTML, чтобы сформировать скелет страницы. Я хотел использовать изображение логотипа «Звездных войн», чтобы оно выглядело аутентично. Следующее, что я хотел сделать, это добавить несколько персонажей из «Звездных войн», чтобы приветствовать пользователя во время прохождения теста. Сначала я думал об использовании Дарта Вейдера или Люка Скайуокера, поскольку они являются самыми известными и знаковыми персонажами во вселенной «Звездных войн». В конечном итоге я решил использовать R2D2 и C3PO, так как они выглядели бы более уместно (не думаю, что кто-то мог бы подумать, что Дарт Вейдер будет давать личностный тест). Итак, я нашел несколько изображений R2D2 и C3PO, которые, как мне показалось, будут очень привлекательными, а также логотип «Звездных войн» и добавил их в HTML-файл, как показано ниже.
HTML-файл со ссылкой на изображение для логотипа и талисманов
Я добавил их в заголовок HTML-файла, создав элемент изображения для обоих изображений. Затем я присвоил логотипу и талисманам классы «логотип сайта» и «талисманы» соответственно. Веб-сайт будет показывать изображения на основе ссылки, установленной в элементе.
Следующим шагом является поиск способа отображения кнопок вопросов и ответов. Я сделал это, создав контейнер, в котором будут храниться вопросы, кнопки запуска и ответы для кнопок викторины. Я сделал контейнер вопросов с классом «скрыть», чтобы он скрывался после начала теста (подробнее об этом позже), и я создал отдельные кнопки, которые будут отображаться с задаваемыми вопросами. Ниже приведен фрагмент HTML-кода для этого раздела.
HTML-код для вопросов и ответов для викторины
Раздел JavaScript был самым трудоемким в приложении, и на его написание и отладку ушло больше всего времени. Моя идея состояла в том, чтобы сделать веб-приложение, которое будет отображать вопрос, а затем четыре возможных ответа. Ответы на вопросы не будут ни правильными, ни неправильными, но каждый из них будет иметь определенное значение. Когда пользователь выбирает ответ, значение этого ответа будет добавлено к переменной под названием «totalScore». После прохождения всех 16 вопросов будет использоваться totalScore, чтобы определить, находится ли пользователь на светлой стороне силы (самый низкий балл), на нейтральной стороне силы (средний балл) или на темной стороне силы (самый высокий балл). счет). Счет будет использоваться для получения API для этого конкретного персонажа, который соответствует счету для этого персонажа. Затем он отобразит информацию об этом персонаже в DOM и сообщит пользователю, на какой персонаж он больше всего похож, основываясь на его ответах.
Я искал в Интернете и смотрел несколько видеороликов на YouTube о том, как сделать приложение-викторину. Я нашел видеоролики, в которых показано, как создать структуру данных для вопросов и ответов, а также показано, как структурировать файл JavaScript для теста. Я сделал каждый вопрос и ответы как объект, а затем поместил их в массив. Таким образом, программа будет перебирать массив объектов, получать вопрос и возможные ответы на этот вопрос и отображать их в DOM для выбора пользователями. Ответы на заданный вопрос также будут представлены в виде ключей, содержащих значения для ответа. Ниже приведен образец структуры данных для вопросов и ответов для теста.
Образец структуры данных для вопросов для приложения Quiz
После создания вопросов я создал различные переменные, представляющие различные элементы, которые будут использоваться в файле Javascript, как показано ниже.
Переменные, которые использовались в файле JS
Самой проблемной частью этого проекта для меня было создание кнопок для ответов, добавление текста для каждой кнопки и добавление прослушивателей событий, которые будут принимать значение ответа, выбранного пользователем. Сначала я думал, что это будет достаточно просто, и я мог бы просто использовать цикл FOR для добавления прослушивателей событий и меток. Однако я понял, что значение общего балла не складывается правильно, и балл будет больше, чем предполагалось. Проведя некоторое исследование, я обнаружил, что прослушиватели событий могут складываться, а прослушиватель событий, который ранее был добавлен к кнопке ответа, все еще был там и срабатывал при нажатии кнопки. Всякий раз, когда я нажимаю кнопку, она по существу добавляет не только значение текущего ответа, но также добавляет значение предыдущего ответа, который занял место текущего ответа. На рисунке ниже показан пример того, что происходило каждый раз, когда я перебирал вопросы и несколько прослушивателей событий, которые добавлялись к одной кнопке.
Как должен работать прослушиватель событий
Что случилось
Это имело смысл в значениях, которые я получал, поскольку это была сумма значений предыдущего ответа, который раньше был связан с выбранной мной кнопкой.
После некоторых проб и ошибок я смог решить проблему, создав один цикл для добавления прослушивателя событий каждый раз, когда загружался новый вопрос, и еще один для добавления текста к каждой кнопке, как показано ниже. Когда я выбираю кнопку, прослушиватель событий вызывает функцию «buttonClick», которая определяет, какая кнопка была нажата, в зависимости от класса этой кнопки.
Функция для установки кнопок ответа с прослушивателями событий и метками
Класс этой кнопки будет сравниваться с элементами массива «buttonValues», которые затем будут сравниваться с индексом этой кнопки и получать значение этой кнопки. Это значение будет добавлено к общему баллу и увеличит текущий индекс вопроса. Это будет продолжаться до тех пор, пока в массиве вопросов не останется вопросов.
Фрагмент кода функции buttonClicked
Общий балл будет отправлен в функцию «characterSelect», которая определит, к какому персонажу относится пользователь, на основе его балла. Это делается с помощью оператора IF, который имеет три разных уровня; светлая сторона, нейтральная сторона и темная сторона. Для каждого уровня, кроме первого уровня для светлых персонажей, он будет вычитать значение из счета, которое является точкой отсечки, чтобы индекс не превышал индекс массива символов. Затем значение округляется до наименьшего числа, которое будет индексом выбранного символа, как показано ниже со следующим кодом.
Фрагмент кода функции characterSelect
Символ, выбранный из массива, будет значением, используемым для элемента поиска для функции выборки, которая получит данные для выбранного символа из SWAPI. Затем функция отобразит эту информацию в DOM, чтобы пользователь мог увидеть, на какого персонажа его личность больше всего похожа.
Фрагмент кода для функции characterFetch
Я решил упростить задачу и получить код, который просто отображает имя персонажа в DOM. Я проверил это, и результаты показаны ниже
Результаты моего теста
В дальнейшем планирую поработать над кодом и добавить в тест другие фичи. Я думаю, было бы неплохо добавить изображение персонажа, которое было выбрано для тех, кто не знаком с лором «Звездных войн». В целом, я был очень доволен результатами, и я чувствовал, что многому научился на этом опыте.
Ресурсы
WebDevSimplified, Кайл. WebDevSimplified/Javascript-Quiz-App. GitHub, https://github.com/WebDevSimplified/JavaScript-Quiz-App.
https://attacomsian.com/blog/javascript-iterate-objects
https://www.youtube.com/watch?v=SHIMUoAJHYU
https://jiewonchang1.gitbooks.io/udacity-summary/content/4.html
