Создайте Spiffy Quiz Engine

Первая официальная викторина Nettuts + имела огромный успех, внушительное количество разработчиков приняло участие и оценило их знания. Было нетривиальное количество комментариев, спрашивающих, как был построен механизм мини-викторины. И о чудо! Вот чему мы научимся сегодня.

---

Слово от автора

Тесты — отличный способ привлечь сообщество — просто взгляните на наш недавний тест. Проблема в том, что в наше время люди ожидают, что тесты будут довольно интерактивными, и мое Google-фу сильно провалилось при поиске системы, которая облегчает процесс. Именно тогда я решил создать себя, и Nettuts, супер простой тестовый движок, который я игриво называю kroggy.

Я верю, что демонстрация стоит тысячи слов. Попробуйте демо и попробуйте сами.

Сегодня мы рассмотрим, как это реализовать, как вы уже догадались, с нашей любимой библиотекой JavaScript, jQuery. Заинтересованы? Давайте начнем прямо сейчас!

---

Цели дизайна

Цель дизайна для этой версии невероятно проста. Я провожу вас через те моменты, которые я имел в виду.

• Мы получим что-то, что выглядит гладко и элегантно — то, что предлагает пользователю пройти тест.
• Это не место для длинного списка вопросов с переключателями и ярлыками. Нам нужно будет внедрить простой слайдер для просмотра каждого вопроса в отдельности.
• Вопросы будут оцениваться в конце викторины, а не сразу. Таким образом, читатель может сосредоточиться на процессе принятия теста вместо того, чтобы каждый раз останавливаться, чтобы оценить результат.
• Простой индикатор в нижней части, чтобы отобразить прогресс пользователя.
• Правильные ответы могут жить либо в JavaScript, либо в HTML. Это не SAT — нет необходимости вносить больше сложности в нашу начинающую кодовую базу.

Некоторые заметные особенности, из которых я отказываюсь:

• Нет пост викторины отзывы. Это привело бы к тому, что мы очистили бы наш собственный HTML-код для данных, а затем повторно обработали его. Не смешно! И определенно не в рамках сегодняшнего урока.
• Мы не собираемся превращать это в плагин. Нам лучше сосредоточиться на фактической части разработки функциональности. Существует множество материалов о том, как преобразовать код в плагин jQuery.
• Как расширение вышеупомянутого пункта, это также означает, что HTML для тестов будет предварительно написан нами — он не будет генерироваться и вставляться динамически.

Вот и все, наверное. Давайте перейдем к тому, как мы собираемся сделать это.

---

План действий

Теперь нам нужно наметить, что нужно сделать в определенном порядке.

• Шаг 1. Создайте HTML-разметку для базового движка викторины и соответствующим образом стилизуйте
• Шаг 2: Когда пользователь выбрал опцию и нажал следующую кнопку, просто молча перейдите к следующему вопросу. Если опция не выбрана, выведите ошибку.
• Шаг 3: Когда пользователь находится на последнем вопросе и нажимает на следующую кнопку, поднимите ад и оцените результаты следующим образом.
• Шаг 4: Узнайте, какой вариант выбрал пользователь, и сопоставьте его со списком предварительно определенных ответов. Верните простой массив, чтобы мы могли оценить результаты позже и представить некоторые данные на последнем экране.

Хорошо, это звучит довольно просто. Это основные шаги в создании этой функциональности. Конечно, есть несколько других мелких вещей, но я объясню их по ходу дела.

Теперь давайте углубимся в некоторый код и запачкаем руки. Во-первых, HTML.

---

Основная разметка

Разметка является одним из столпов, поддерживающих этот движок, поэтому мы рассмотрим каждую часть отдельно, а весь код будет показан в конце, чтобы показать общую картину.

Элемент div с идентификатором main-quiz-holder будет основным контейнером, внутри которого мы собираемся поместить весь наш HTML-код — весь приведенный ниже код находится внутри этого элемента div.

Далее, давайте создадим образец слайда теста. Помните, что мы собираемся создать супер простой слайдер для хранения наших индивидуальных вопросов. Каждый слайд будет содержать элемент div с классом questionContainer .

Прежде чем перейти к разметке слайда викторины, давайте разберемся с некоторыми формальностями.

Приведенный выше код предназначен для начального контейнера, который отображается с просьбой пройти тест. Мы просто добавляем в него идентификатор intro-container чтобы позже мы могли лучше его оформить.

Внутри div у нас есть только одно изображение-заставка, обернутое элементом привязки.

И результаты скользят. Здесь нет ничего особенного: мы присваиваем специальный идентификатор и помещаем в него пустой div для хранения наших результатов. Мы заполним этот элемент в будущем, когда будем оценивать результаты.

Если вы заметили класс questionContainer для этого и слайда выше, золотая звезда для вас! Мы добавляем этот класс, так как оба этих контейнера являются частью слайдера.

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

На этом наша разметка скелета закончилась.

---

Разметка для каждого вопроса

Ааа, мясистая часть разметки на нас. Эти разделы могут показаться сложными, но, как всегда, я разбью их на более мелкие куски и проведу вас по коду.

Как упоминалось ранее, мы будем заключать каждый слайд нашего теста в элемент div с классом questionContainer . Внутри у нас есть элемент div с классом question который содержит каждый из наших вопросов.

Далее мы приводим неупорядоченный список, содержащий возможные ответы на вопрос, и div, выполняющий роль контейнера для элементов навигации [предыдущий / следующий]. Запишите имя класса каждого из этих разделов.

Расширяясь в нашем неупорядоченном списке, каждый элемент li имеет элемент label, содержащий одну радиокнопку. Заметьте, что мы назначаем каждому радио атрибут data-key ? Мы посмотрим на это чуть позже.

И, наконец, навигационный контейнер. Ничего особенного здесь. У нас есть основной div с классом btnContainer который действует как контейнер. Внутри у нас есть якорь, обернутый элементом div. DIV просто для стилизации, так что не стесняйтесь отказаться от этого в вашей реализации.

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

Вместо следующей кнопки последний слайд должен иметь следующее:

И это завершает HTML-часть наших слайдов викторины. Вы заметите, что мы не взялись за HTML для результатов теста. Мы займемся этим на этапе JavaScript. А пока давайте перейдем к презентации.

---

Конечный HTML

В конце этого этапа наша страница выглядит так:

---

Основной CSS

Давайте начнем делать нашу викторину выглядеть гладкой и привлекательной. Во-первых, основной контейнер.

По сути, мы центрируем его, давая ему фон и границу, чтобы выделить его. Свойства CSS3 могут показаться немного запутанными, но это в основном из-за специфических свойств браузера. Здесь мы просто определяем тень блока для контейнера — ничего сложного, когда вы изучите синтаксис.

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

Давайте стилизовать наши заголовки и вопросы сейчас. Поскольку мы хотим, чтобы они выделялись среди других элементов, мы увеличиваем размеры шрифта и даем им значительные поля с обеих сторон. Помните, куча пустого пространства помогает лучше структурировать содержимое.

Теперь к контейнеру индикатора выполнения. Первое, что вам нужно отметить, это position: absolute объявление. Мы добавляем это, так как нам нужно, чтобы этот элемент оставался фиксированным в родительском контейнере

Свойства bottom and left указывают, что он должен быть зафиксирован в нижней части контейнера. Остальная часть CSS предназначена только для стилизации.

А теперь актуальный индикатор выполнения. Мы хотим, чтобы оно было заниженным и в то же время достаточно заметным, поэтому я использую небольшой серый градиент. Как упоминалось ранее, это может показаться сложным, но это из-за относительно сложного синтаксиса свойства градиента CSS3.

notice является элемент div, который содержит уведомление об ошибке, когда пользователь испортит, скажем, когда он не выбрал опцию. Чтобы упростить ситуацию, я решил расположить ее абсолютно над индикатором выполнения.

---

Вопрос слайд CSS

На контейнере слайдов сначала укажите QuestionContainer. Мы определяем фиксированную ширину, чтобы правильно ее центрировать. Мы также определяем минимальную ширину, чтобы она не нарушалась при меньшем количестве вариантов. Наконец, мы добавляем немного отступов для улучшения представления и добавляем объявление overflow: auto для работы с плавающими дочерними элементами.

Давайте разберемся со списком ответов дальше. Мы просто удаляем стилизацию для списка, применяя list-style: none и немного отступов и пробелов для лучшей презентации.

Выше приведен стиль для отдельных элементов списка. CSS можно разбить на 3 раздела.

• Первые несколько строк очень простые — мы добавляем немного поля и отступов, указываем цвет для текста внутри и добавляем немного радиуса рамки.
• Далее мы используем свойство тени блока CSS3, чтобы оно выглядело лучше. Обратите внимание на разные префиксы для разных браузеров.
• Наконец, мы обрабатываем фон элемента. Мы указываем градиент серого, который будет отображаться.

На стили для элемента li, когда он был выбран пользователем. Нам нужно, чтобы он действительно выделялся, чтобы помочь пользователю. Имея это в виду, я выбираю яркий синий фон для применения.

---

CSS для элементов навигации

Давайте продолжим и стилизуем элементы div, содержащие элементы навигации. Большая часть кода выше должна быть достаточно объяснительной. Мы определяем некоторые отступы для лучшего обрамления текста внутри, назначая ему цвет, немного увеличивая размер шрифта и добавляя несколько углов округления. И, наконец, мы добавили несколько теней CSS3-блоков, чтобы они выглядели элегантно.

Так как мы хотим, чтобы следующая кнопка выглядела иначе, мы переопределяем некоторые из стилей сверху. Здесь я перемещаю основной оттенок с синего на зеленый.

Это позаботится о положении каждой из кнопок. Мы хотим, чтобы предыдущая кнопка была смещена влево, а следующая и последняя кнопки должны быть смещены вправо. Это именно то, что делает приведенный выше код.

На этапе HTML вы должны были заметить, что у самих кнопок есть родительский элемент div с дочерним элементом link. Мы стилизовали родительские элементы в предыдущем блоке кода. Выше обрабатывает дочерние ссылки.

По сути, приведенный выше код вставляет маленький графический элемент в кнопки. Мы добавляем небольшой отступ, чтобы текст был хорошо смещен. Обратите внимание, как мы изменяем между padding-left and padding-right чтобы точно стилизовать каждый элемент.

Сам btnContainer получает небольшое поле и отступы, чтобы расположить его там, где мы хотим.

---

Стилизация результатов

Уф! Большая часть работы CSS теперь позади. Давайте рассмотрим последний фрагмент CSS — последний слайд, который отображает результаты. Поскольку вы еще не видели HTML, это может немного сбивать с толку, но CSS-представление будет довольно общим и легко анализируемым.

Давайте начнем с малого. Мы собираемся присвоить каждой «ячейке» результатов класс resultRow . Поскольку мы хотим, чтобы он был представлен аккуратно, мы собираемся переместить все влево, чтобы он сформировал аккуратный стек из трех столбцов результатов. Этот раздел должен выглядеть так после того, как мы закончили:

Давайте определим базу этих блоков. Как всегда, я использую немного CSS3, чтобы выделить разделы. Кроме того, CSS довольно прост — немного отступов, закругленных углов и тому подобное.

Нам нужно, чтобы правильные и неправильные ответы выделялись визуально. Используя CSS3, мы применяем зеленый градиент с оттенком ко всем правильным ответам, в то время как неправильные — не получают красную обработку. Ничего особенного здесь не происходит. Освойте синтаксис, и у вас все будет готово.

Давайте добавим немного изображений, чтобы все это выглядело более сплоченным. Мы добавляем несколько простых иконок внутри кнопок, как показано выше.

И, наконец, давайте стилизовать контейнер ключа ответа. Немного набивки и поля помогают нам сделать его лучше. Мы также следим за тем, чтобы он был отцентрирован, и устанавливаем размер шрифта на соответствующее значение.

---

Финальный CSS

Я пропустил несколько общих частей CSS по пути, поэтому вот полный CSS:

Со всем, кроме JavaScript, наш движок должен выглядеть так, как показано ниже:

---

Взаимодействие JavaScript

JavaScript, хотя и короче, чем вы ожидаете, является сердцем и душой мини-движка. Как я уже упоминал ранее, это довольно красивый альфа-код, поэтому перед развертыванием обязательно очистите его.

Как всегда, давайте рассмотрим код по одному разделу за раз.

---

Во-первых, основы

Сначала мы разберемся с некоторыми шаблонными элементами.

Давайте поместим весь наш код в блок выше — самозапускающуюся анонимную функцию. Таким образом, наши переменные будут хорошо распределены по именам, что позволит избежать конфликтов имен в будущем.

И это переменные, которые мы будем использовать сегодня. Имена должны сделать их цель совершенно очевидной. Мы также кешируем несколько важных элементов для последующего использования. Важно отметить, как мы присваиваем answers значение kroggy.answers . Я объясню это прямо ниже.

Если вы посмотрели демо, вы заметите небольшой тег сценария, содержащий приведенный выше код. Здесь мы создаем объект с именем kroggy и kroggy ключ ответа в нашу викторину в массиве с именем answers . Это значение, которое мы присвоили переменной, answers ранее.

---

Создание вспомогательных функций

Прежде чем приступить к созданию реального кода, давайте сначала разберемся с несколькими небольшими вспомогательными методами. В порядке возрастания важности.

Я не смог найти достаточно приличный метод округления, предопределенный в JavaScript, поэтому я решил кое-что собрать.

Вам нужно будет отправить значение и количество значащих цифр, чтобы округлить, и функция сделает все остальное. Поскольку логика невероятно проста, я позволю вам разобрать все остальное.

Комментарии на экране результатов принесли много веселых комментариев и забав среди участников викторины, и именно здесь происходит волшебство.

Опять же, довольно простое программирование, которое здесь происходит. Функция принимает оценку в качестве параметра и возвращает комментарий.

Здесь условия произвольны, но я думаю, что они неплохо справляются. Не стесняйтесь поиграть с условиями в вашем проекте.

Это основная функция, которая оценивает процесс проверки. По сути, мы сравниваем массив с другим массивом и помещаем логический результат в другой массив. Просто как тот.

В приведенном выше коде answers и userAnswers являются глобальными переменными, которые мы объявили ранее. В то время как первый инициализируется и ему присваивается значение на раннем этапе, последний не будет изменяться до последней минуты, т.е. когда на последний вопрос викторины будет дан ответ.

Мы просто перебираем массив и для каждого элемента проверяем ожидаемый ответ по отношению к ответу пользователя. Если все получилось, поместите значение true в наш массив результатов. Остальное, нажми false .

Когда оценка завершена, мы возвращаем массив результатов, чтобы его можно было проанализировать позже.

---

Подключение обработчиков событий

Сначала давайте сделаем начальный вводный слайд. Помните, что все, что мы делаем, это отображаем изображение, обернутое якорем? Это якорь, к которому мы подключаем вышеуказанное событие.

По сути, мы скрываем родителя элемента ссылки, по которому щелкнули, а затем исчезаем в ближайшем родственнике родителя.

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

Приведенный выше код обрабатывает предыдущую кнопку. Функциональность слайдера очень похожа. Скройте родительский контейнер и добавьте next элемент в дерево. В основном тот же код, что и в предыдущем разделе, но с обратным направлением.

После этого мы решаем индикатор выполнения дальше. Здесь мы просто анимируем ширину индикатора выполнения. Здесь нет большого расчета — разделите ширину индикатора выполнения на число вопросов.

Так как это предыдущая кнопка, нам нужно вычесть дробь из общей текущей ширины бара, что мы и делаем. Может выглядеть немного сложно, но поверьте мне, это довольно просто.

У нас здесь происходит еще несколько вещей, так что обратите внимание.

Сначала мы создаем быструю переменную и присваиваем ей массив всех переключателей, которые были проверены. Селектор input[type=radio]:checked помогает нам сделать это с минимальными усилиями.

Теперь мы можем проверить длину этого массива. Если он равен нулю, это означает, что пользователь не выбрал опцию, и поэтому мы можем показать уведомление об ошибке, упрекающее пользователя за это. Что и происходит внутри оператора if. Мы немедленно выходим из функции, используя return false .

Если мы прошли предыдущий шаг, пришло время продолжить. Теперь мы можем скрыть уведомление, если оно было отображено ранее.

Логика ползунка снова вступает в игру — скрыть текущий контейнер и исчезнуть в следующем контейнере. Мы видели это уже несколько раз, и я не думаю, что мне нужно перефразировать это.

Наконец, мы работаем с индикатором выполнения. Как и в последнем блоке, мы рассчитываем дополнительную ширину, а затем добавляем ее к текущей ширине индикатора выполнения. Имейте в виду, что в предыдущем блоке мы вычитали его из текущей ширины. В этот блок мы добавляем его, потому что мы переходим к следующему вопросу, и поэтому индикатор выполнения продвигается вперед.

---

Сбор ответов пользователя

Ааа, блудный обработчик событий, который лежит в основе всего. Мы разделим процесс на две части:

• Сбор данных
• Оценка и отображение результатов

Мы собираемся заняться первым в этом разделе. Имейте в виду, что весь JavaScript ниже идет в обработчике выше.

Первые несколько строк должны выглядеть очень похожими. Это потому, что эти строки заимствованы непосредственно из обработчика следующей кнопки. Мы проверяем, была ли выбрана опция, и если нет, отображаем сообщение об ошибке.

После того, как мы проверили бизнес на обезьян, мы в основном создали массив всех отмеченных флажков. Затем мы перебираем массив и собираем атрибут data-key каждого элемента. Помните это? Мы добавили их к переключателям во время фазы HTML и указали на положение флажка с алфавитной точки зрения. То есть первый вариант — это a, второй — это b и так далее.

Здесь мы просто собираем выбранные ответы. Познакомиться с выбранным флажком, используя метод index , проще, ретроспективно, но именно так я и использовал в исходной кодовой базе, и это то, что я придерживаюсь сегодня.

Мы userAnswers эти значения в глобальную переменную userAnswers [в пределах нашей области видимости], чтобы оценить ее позже.

---

Оценка результатов

Теперь, когда мы собрали наши данные, мы можем быстро проанализировать и отобразить результаты. Давайте разберемся с этим небольшими кусками.

Так как мы находимся в конце бизнеса, мы скрываем индикатор выполнения. Не нужно сейчас.

Мы также создаем кучу переменных, чтобы помочь нам отслеживать вещи внутри. Переменная results содержит массив результатов, который возвращает checkAnswers . Мы будем использовать его для отображения финального экрана. Цель остальных из них скоро станет очевидной.

Теперь, когда у нас есть данные, давайте сделаем с ними несколько полезных вещей. Сначала мы перебираем результаты, чтобы узнать количество вопросов, которые пользователь получил правильно. Мы будем использовать это число для подсчета очков позже.

Далее, мы возьмем на себя ответственность за получение элегантных результатов. Поскольку мы уже в цикле, мы будем использовать его для рендеринга всего остального. Мы показываем номер вопроса и, в зависимости от того, правильно ли пользователь понял этот конкретный вопрос, помещаем в него другой HTML. Помните, CSS для correct and wrongклассов? Они используются здесь.

Поскольку нам нужно отобразить ключ ответа, мы используем тот же цикл, чтобы пройти по answersмассиву и отобразить правильный ответ.

И, наконец, мы получаем округленный результат с помощью roundReloadedфункции, которую мы создали ранее, и сохраняем значение в scoreпеременной.

---

Отображение результатов

Мясо нашей работы сделано. Нам просто нужно обернуть несколько вещей и отобразить результаты.

Здесь происходят очень простые вещи. Во-первых, мы answerKeyзаключаем значение в div с идентификатором, answer-keyчтобы лучше его стилизовать.

Далее мы создаем заголовок экрана результатов. Мы используем judgeSkillsметод, чтобы создать соответствующие комментарии, а затем несколько шаблонов, чтобы упомянуть счет. Мы добавляем эти значения resultSetк конечной строке и добавляемanswerKey

На этом мы завершаем окончательный HTML-код, который необходимо поместить на экран результатов. Мы просто заменяем HTML, используя наш предварительно сгенерированный HTML. Теперь, когда все готово, мы исчезаем с предпоследнего слайда и исчезаем на экране результатов.

---

Финальные биты домашнего хозяйства

У нас есть несколько простых дел по ведению домашнего хозяйства, которые нам нужно обернуть.

Во время инициализации на заставке нам не нужны индикатор выполнения или сообщение об ошибке. Давайте пойдем дальше и спрятать это изначально. Кроме того, Firefox, по какой-то причине, имеет тенденцию «запоминать» ответы, поэтому давайте стереть их полностью — каждый флажок не будет выбран при обновлении страницы.

Вот кое-что, чтобы осветить выбранный вариант. Обратите немного внимания, потому что здесь все немного рискованно.

Когда флажок установлен, мы переходим к родительскому элементу списка и удаляем selectedкласс из всех его дочерних элементов li. После этого мы даем родителю флажка, на который нажали флажок, selectedкласс, чтобы он светился ярко-синим цветом.

И, наконец, чтобы завершить работу слайдера, вам нужно скрыть все, кроме первого слайда. Вы можете использовать JavaScript, чтобы сделать это, или более простой способ CSS — добавить display:noneобъявление для всех, кроме первого слайда. Это именно то, что hideкласс делает в демоверсии.

---

Что мы построили

---

Завершение и дружественный штекер

Уф!Это было довольно долго, не так ли? Я вижу там подлую шутку, но я воздержусь!

Если вам понравился тестовый движок, который мы создали сегодня, я создал еще более продвинутую версию. Один с отзывами об ответах на странице результатов, социальным обменом, счетчиками вопросов и многим другим. Это так хорошо, что даже сайты Tuts + будут использовать его!

Взгляните на jQuizzy , мой новый движок для викторин. Тебе это понравится, обещаю!

Во всяком случае, мы закончили здесь. Мы рассмотрели создание механизма тестирования с нуля, охватывающего все аспекты от HTML до CSS и JavaScript. Мы рассмотрели изящные методы для стилизации элементов и программирования взаимодействия через JavaScript. Надеюсь, вы нашли это интересным и полезным.

Если у вас возникнут какие-либо проблемы, оставьте мне комментарий. Большое спасибо за чтение!