Как сделать тест в html с вариантами ответов и оценкой

Обновлено: 02.07.2024

Если ты зовешь пользователей на свой сайт, то должен ему предложить что-то крутое. Текст может быть 1000 раз качественным, но какая разница, если ЦА ушла в пятничный рейв. Спасти ситуацию может геймификация. Наш первый тест Подходите ли вы на должность интернет-маркетолога в GUSAROV? был пробным и создавался на очень простом конструкторе, однако его сразу же прошло более 600 человек.

Для создания второго теста Что вы знаете о новинках SEO и интернет-маркетинга был выбран Playbuzz. Это платформа для создания опросов, викторин, тестов и иного вирусного контента. Сайт на английском языке, но пользоваться им достаточно легко.

Внимание! Самый подробный и понятный туториал, как сделать тест на Playbuzz за несколько шагов.

Шаг 1 – написать текст на тест, вопросы и ответы

Определитесь с темой теста, напишите вопросы и ответы. Обратите внимание:

Главная цель использования такой геймификации – побудить пользователя пройти тест и поделиться результатом – распространить информацию о себе. Каждый так или иначе становится АВТОРОМ.

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

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

Итак, как сделать тест на сайт на примере Что вы знаете о новинках SEO и интернет-маркетинга в 2017?

Добавляем название теста и описание. Используйте простые и понятные предложения – обращения к пользователям в интернете в развлекательном контенте не должны напоминать школьный экзамен. Загрузите главную фотографию теста.

Добавьте фото, которое будет отображаться в социальной сети.

Установите теги. Их можно выбрать из списка или вписать самостоятельно.

Учитывайте рекомендации по размеру и качеству фотографий.

Посмотрите дополнительные настройки для теста.

Язык – язык, на котором был написан тест. В нашем случае – русский.

Создаем первый вопрос. Для всех последующих алгоритм сохраняется.

Впишите в поле вопрос
Добавьте необходимое количество вариантов ответа
Отметьте галочкой правильный ответ
Выберите фотографию

Внимание! Следите за тем, чтобы качество фото было достаточно хорошим. А содержание – так или иначе поддерживало идею теста и вписывалось в общий стиль. GUSAROV – еноты. Классика. Работаем дальше.

По этому принципу добавляем остальные вопросы — Add question.

Пропишите результаты. Для этого нужно снова добавить фото и текст. На прощание можете оставить какой-нибудь комментарий – ожидания пользователя должны быть оправданы!

Получившийся тест можно:

Посмотреть – Preview
Сохранить изменения (черновик) – Save draft
Опубликовать – Publish

Шаг 3 – добавить код теста на сайт

После сохранения теста, можно добавить его код на сайт.

Готово. Вы – великолепны!

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

let questions = [
text: 'Сокращенное название таблицы стилей?', // вопрос
right: 'CSS', // правильный ответ
>,
text: 'Кто верстает сайты?',
right: 'верстальщик',
>,
text: 'Самый популярный CSS-фреймворк?',
right: 'Bootstrap',
>,
];

JavaScript на основе массива questions налету создаст структуру HTML разметки. Для каждого объекта массива создается тег div, внутри которого будет параграф p, поле для ввода (input) и дата-атрибут с правильным ответом. То есть этих тегов не будет в HTML разметке, каждый раз они будут сгенерированы скриптом. У такого подхода есть преимущество - лучшая читаемость кода. Ведь вопросов может быть много, что размножит разметку.

Сокращенное название таблицы стилей?

Кто верстает сайты?

Самый популярный CSS-фреймворк?

Структура разметки будет создаваться в цикле for. of. Укажем какие элементы мы хотим создать: div, p, input. Через метод appendChild() добавим в test блок div. Затем в блок div добавим теги p и input. Правильный ответ будет хранится в дата-атрибуте инпута.

for (let question of questions) let div = document.createElement('div');
test.appendChild(div);

let p = document.createElement('p');
p.innerHTML = question.text;
div.appendChild(p);

let input = document.createElement('input');
input.dataset.right = question.right;
div.appendChild(input);
>

Получим блок с тестом по его идентификатору.

Границы полей с правильными ответами покрасим в зеленый цвет, а с неправильными ответами, в красный.

// CSS
.correct border: 2px solid green;
>
.incorrect border: 2px solid red;
>

Запускаем цикл for. of для перебора инпутов. У каждого инпута считываем значение, которое ввел пользователь. В условии if-else сверяем ответ пользователя с правильным ответом, обратившись через объект dataset. Если ответ правильный, то к инпуту добавится класс correct с зеленой рамкой. Если ответ неправильный, то добавится класс incorrect и покрасит границы инпута в красный цвет. Добавляем классы через объект classList и метод add. Перед каждым новым проходом цикла, все добавленные классы нужно удалять. Иначе на элементе будут висеть два класса одновременно, что недопустимо.

for (let input of inputs) input.classList.remove('correct'); // удаление класса
input.classList.remove('incorrect'); // удаление класса

if (input.value == input.dataset.right) input.classList.add('correct');
> else input.classList.add('incorrect');
>
>
>);

Тесты на JavaScript не защищены от недобросовестного пользователя, который легко может подсмотреть ответы в коде. Поэтому тесты на JavaScript больше носят развлекательный характер. Реальные тесты, проверяющие знания например у школьников, следует делать на другом языке программирования или хранить ответы в базе данных и вытаскивать их AJAX-ом.

TestEdu - генератор html тестов

Особенности программы TestEdu:

Защита от плагиата вашего теста, так как в программу вы можете записать ФИО, которое невозможно изменить ни через правку кода, ни через редактирования теста в самой программе.
Каждому заданию можно присвоить собственное количество баллов – от 1 до 7.
Можно прописывать несколько правильных вариантов ответа или разрешить давать свободный ответ.
Созданные в программе тесты одинаково хорошо отображаются и работают, как на экране монитора, так и на планшете и мобильном телефоне.
Можно активировать функцию перемешивания вопросов.
После составления теста, его можно распечатать,
В этот тест можно вставлять картинки и фото. Это функция особенно полезна для проверки знаний дошкольников и младших школьников.

Как составить тесты в программе

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

Все уроки курса:

Комментарии (20)

Здравствуйте. Прошу вас. Умоляю. Отправьте мне админ панель с регистрацией и возможностью комментировать тесты

Здравствуйте, Андрей. Уроков по созданию админки нет, соответственно, нет и самой админки, поэтому отправлять просто нечего.

Доброго дня!
Вопрос по уроку при выводе массива (20 мин.)
Ругается на 17 строку кода
«Warning: mysqli_query() expects parameter 1 to be mysqli, resource given in J:\home\localhost\www\testing\functions.php on line 17″
сама строка в коде прописана вот так: $res = mysqli_query($db, $query);
где ошибка не могу понять.
Подскажите пожалуйста.

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

В этом случае каждый следующий вопрос должен выбираться отдельно из БД, в зависимости от ответа на предыдущий. В БД, соответственно, должна быть предусмотрена связь таких вопросов. Что-то вроде поля related_answer, значение которого будет ссылаться на ID предыдущего вопрос. Например, если пользователь выбрал ответ с ID 2, тогда выбираем вопрос с ID 2. Примерно так мне видится решение в теории.

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

Буду знать. Спасибо!

Скажите а как сделать что бы он сохранял данные пользователя с общим счетом?

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

Андрей, добрый день! Не нашел обсуждения этой темы на форуме, поэтому пишу здесь. Не могли бы Вы подробно объяснить (лучше в личной переписке) работу строки Войдите, чтобы ответить

Здравствуйте, Андрей. Если темы на форуме нет, тогда Вы можете создать ее сами и задать вопрос, логично? По Вашему вопросу здесь. Через вопросительный знак на сервер можно передать GET параметры. В данном случае передается параметр test и на сервере он будет доступен в массиве $_GET['test']. Как-то так. Если интересует какой-то другой аспект, тогда на форуме задайте вопрос как можно конкретнее, и я постараюсь ответить.

Записываются данные в БД с помощью запроса INSERT, как Вы и делаете. Если данные не сохраняются, значит есть проблема с логикой или в запросе. Здесь поможет только отладка кода. Начните с проверки, попадаете ли Вы в условие и доходит ли дело до запроса. Для этого достаточно распечатать запрос на экран. Если Вы увидите распечатку запроса, значит с логикой кода все в порядке, в этом случае проверьте корректность запроса — в нем должны быть верно перечислены поля и должны быть все соответствующие значения. Сам распечатанный запрос можно даже скопировать и выполнить в phpMyAdmin, чтобы убедиться в том, что он (не)работает. Как-то так.

В общем проблема как я понял была в запросе, я немного исправил его и добавил or die(mysqli_error($db)), теперь выводит
INSERT INTO testing.result (result_id, parent_user, parent_test, mark) VALUES (NULL, ‘Ivanov Ivan Ivanovich’, ’1′, ’66.67′)
Cannot add or update a child row: a foreign key constraint fails ( testing . result , CONSTRAINT result_ibfk_2 FOREIGN KEY ( parent_test ) REFERENCES test ( test_name ))
Простите что здесь спрашиваю

У Вас используется внешний ключ для связи таблиц, который накладывает какие-то ограничения. Либо уберите внешний ключ, либо согласуйте данные, чтобы они соответствовали имеющимся ограничениям. Это все, что могу пока подсказать. Судя по всему, проблема с полем parent_test, в которое Вы пытаетесь записать цифру 1, но которое ссылается на поле test.test_name, где, очевидно, но ID теста, а его номер. Хотя могу и ошибаться.

Андрей, помогите. Не работает html код, php выполняется, а html нет, если меняю название файла на index.html, то html работает, а php нет. В чем причина, помогите

Для того, чтобы исполнялся код PHP — расширение файла должно быть .php, не .html. Ну и, конечно же, на сервере должен быть установлен интерпретатор PHP. Если эти условия выполняются, тогда код PHP должен исполняться. Поэтому проверяйте эти моменты.

Количество уроков: 12

Продолжительность курса: 06:54:25

Автор: Андрей Кудлай

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

1 ответ 1

Все равно не получается или может не так что-то делаю? Тоесть добавить надо это: sum = sum == 2 ? 1 : 0;

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