Конструктор тестов в html

Обновлено: 27.03.2024

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

Madtest Learningapps Survio Quzizz Quizlet Online Test Pad Kahoot Мастер-Тест Let's test Конструктор тестов Simpoll Anketolog Examinare
Стоимость Бесплатно, тарифы от 990 руб в месяц Бесплатно от 16,58 до 66,58 долларов Бесплатно бесплатно 7 дней, далее 3 3550 руб за год Бесплатно Бесплатно 7 дней, далее 2390 руб за год Бесплатно от 2500 до 8000 руб в месяц Бесплатно от 390 до 1490 руб в месяц от 1090 до 48800 руб в месяц от 1245 до 4999 руб в месяц
Язык Русский Русский Русский Английский Русский Русский Английский Русский Русский Русский Русский Русский Русский
Оценивание учащихся Нет Нет Да Да Да Нет Да Да Да Да Да Да Да
Загрузка файлов Да Да Да Да Да Да Нет Нет Да Да Да Да Да
Комментирование Да Да Нет Да Нет Да Да Да Да Нет Нет Нет Да
Брендирование Да Нет Да Нет Нет Нет Нет Нет Нет Нет Да Да Нет
Добавление на сайт Да Нет Нет Нет Нет Да Нет Да Да Да Да Да Да
Готовые шаблоны опросов Да Да Да Да Да Да Да Да Да Да Да Да Да
Анализ и статистика Да Нет Да Нет Да Да Да Нет Да Нет Да Да Да

Madtest

Madtest

Learningapps

  • Этот сервис позволяет 18 разных заданий, среди которых есть и оригинальные варианты, например, кроссворды, пазлы, определение хронологии, а также возможность добавлять аудио и видео;
  • В настройках каждого типа заданий, вы можете выбрать контент (звук, видео, изображение, текст), а также комбинировать его;
  • Сервис имеет большой выбор готовых тестов, которые разбиты по категориям;
  • Доступна функция выбора уровня сложности заданий, от дошкольного, до уровня высшего образования;
  • Тот, кто проверяет результаты тестов или опросов, может комментировать ответы, исправлять их, а также для каждого отдельного пользователя регулировать доступ;
  • Каждому задания система присваивает уникальный QR-код, который можно отправлять вместо ссылки;
  • Система имеет 23 языка, а сам сервис является бесплатным.

Survio

Quzizz

Quizlet

Online Test Pad

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

Kahoot

Мастер-Тест

Let's test

Конструктор тестов

Simpoll

Anketolog

  • Предоставляется удобный конструктор тестов и опросов с разнообразными шаблонами;
  • К опросам можно прикреплять разные типы файлов – видео, аудио, картинки, и др;
  • Доступна настройка цветов для разных элементов;
  • Есть функция настройки CSS-кода анкеты;
  • Результаты тестов и опросов можно просматривать в виде подробной статистики;
  • Можно установить сроки прохождения опроса, а также период его доступности на сайте;
  • На основании полученной информации вычисляется индекс лояльности клиентов, что будет полезным в маркетинговых целях;
  • Сервис на русском языке. Стоимость услуг от 1 090 до 48 800 рублей в месяц, в зависимости от тарифа.

Examinare

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

Пример создания теста

создание теста в сервисе Online Test Pad

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

раздел тесты в Online Test Pad

Далее выберите название теста и его тип. Есть три типа тестов – психологический, личностный, и образовательный.

Добавление нового теста в Online Test Pad

Первым делом создайте виджет теста. Для этого выберите раздел «Дашборд» в левой части меню, и нажмите «Создать виджет».

виджет теста в Online Test Pad

Далее вы получаете код, который можно скопировать в буфер обмена и вставить в HTML.

Виджет теста в Online Test Pad

Также в разделе «Дашборд» необходимо заполнить карточку теста. В «Типе теста» указывается категория задания, а в «Тегах» необходимо написать 2 – 3 ключевых слова, которые относятся к данному тесту.

Карточка теста в Online Test Pad

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

настройка теста в Online Test Pad

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

Создание начальной страницы теста в Online Test Pad

В разделе «Вопросы» можно добавить новые задания. Для примера рассмотрим ввод числа. Чтобы добавить задание, выберите его в правой части интерфейса, и нажмите на вкладку в виде «+» расположенную возле него.

выбор вопроса для теста в Online Test Pad

Выбрав тип задания введите задачу в окне «Текст вопроса», а ниже укажите правильный ответ. Кроме того, вы можете установить оценку в виде балла за каждый правильный ответ. Если необходимо можно загрузить изображение.

ввод данных вопроса и ответа в тесте Online Test Pad

По такому же принципу создаются и остальные вопросы теста. Если навести курсор мыши на вопрос, то в правом верхнем углу вопроса появятся функции «копировать», «редактировать» и «удалить».

оценивание вопросов теста в Online Test Pad

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

Добавление сертификата к тесту в Online Test Pad

После того как вы создадите тест и установите все настройки, перейдите снова в раздел «Дашборд», чтобы получить ссылку данного теста или воспользоваться функцией «Опубликовать в общий доступ на сайте».

Ссылка теста в Online Test Pad

По такому же принципу создаются тесты и опросы и в других сервисах.

Если хотите получить перспективную профессию или освоить новый навык (будь то SEO, HTML, веб-программирование или даже мобильная разработка), то посмотрите ТОП-3 лучших онлайн школ:

    — одна из старейших школ интернет-профессий. Основные направления — маркетинг, управление, дизайн и программирование; — специализируется, в первую очередь, на обучении программистов. После интеграции в Mail Group появились и другие профессии; — наиболее молодая из 3-х перечисленных школ, но обладает наибольшим ассортиментом специальностей. Если услышали о какой-либо экзотической профессии, то наверняка этому уже обучают в Skillbox.

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

Простой и удобный сервис для создания тестов и проведения тестирования.


Гибкая настройка теста параметрами

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


17 типов вопросов

Одиночный выбор (+ шкала) , множественный выбор (+ шкала) , ввод числа , ввод текста , ответ в свободной форме , установление последовательности , установление соответствий , заполнение пропусков - (числа, текст, список) , интерактивный диктант , последовательное исключение , слайдер (ползунок) , загрузка файла , служебный текст .


4 типа результата

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


Удобный инструмент статистики


Стилизация и брэндирование

Широкие возможности для управления внешним видом теста (цвет, шрифт, размер, отступы, рамки и многое другое) с возможностью добавить собственный логотип бренда.


Удобно на всех девайсах

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

Основная ссылка

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

Виджет для сайта

Специальный html-код, который позволит вам встроить тест на ваш собственный сайт, блог, форум.

Публикация в общий доступ

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

Приглашения

С помощью приглашений вы можете сформировать группы ваших пользователей и разослать им приглашение по email с персонализированной ссылкой на прохождение теста.

Простой и удобный сервис для создания тестов и проведения тестирования.


Гибкая настройка теста параметрами

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


17 типов вопросов

Одиночный выбор (+ шкала) , множественный выбор (+ шкала) , ввод числа , ввод текста , ответ в свободной форме , установление последовательности , установление соответствий , заполнение пропусков - (числа, текст, список) , интерактивный диктант , последовательное исключение , слайдер (ползунок) , загрузка файла , служебный текст .


4 типа результата

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


Удобный инструмент статистики


Стилизация и брэндирование

Широкие возможности для управления внешним видом теста (цвет, шрифт, размер, отступы, рамки и многое другое) с возможностью добавить собственный логотип бренда.


Удобно на всех девайсах

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

Основная ссылка

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

Виджет для сайта

Специальный html-код, который позволит вам встроить тест на ваш собственный сайт, блог, форум.

Публикация в общий доступ

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

Приглашения

С помощью приглашений вы можете сформировать группы ваших пользователей и разослать им приглашение по email с персонализированной ссылкой на прохождение теста.

Простой и удобный сервис для создания тестов и проведения тестирования.


Гибкая настройка теста параметрами

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


17 типов вопросов

Одиночный выбор (+ шкала) , множественный выбор (+ шкала) , ввод числа , ввод текста , ответ в свободной форме , установление последовательности , установление соответствий , заполнение пропусков - (числа, текст, список) , интерактивный диктант , последовательное исключение , слайдер (ползунок) , загрузка файла , служебный текст .


4 типа результата

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


Удобный инструмент статистики


Стилизация и брэндирование

Широкие возможности для управления внешним видом теста (цвет, шрифт, размер, отступы, рамки и многое другое) с возможностью добавить собственный логотип бренда.


Удобно на всех девайсах

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

Основная ссылка

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

Виджет для сайта

Специальный html-код, который позволит вам встроить тест на ваш собственный сайт, блог, форум.

Публикация в общий доступ

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

Приглашения

С помощью приглашений вы можете сформировать группы ваших пользователей и разослать им приглашение по email с персонализированной ссылкой на прохождение теста.

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

Содержание статьи.

Создание простого теста

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.

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

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

Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:

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

Сначала создадим HTML код задач:

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

Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.

В последней строке мы покажем результат выполнения заданий после проверки.

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

pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

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

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

otv_uch_1 = document.getElementById(‘z_1’).value;
otv_uch_2 = document.getElementById(‘z_2’).value;
otv_uch_3 = document.getElementById(‘z_3’).value;

Четвертая задача будет означать новую строку с заменой цифр 3 на 4.

Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 1 балл.

ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1) ball +=1;
>
if(otv_uch_2 == pr_otv_zadachi_2) ball +=1;
>
if(otv_uch_3 == pr_otv_zadachi_3) ball +=1;
>

Для добавления задачи 4 вам потребуется скопировать последние три строки и заменить цифры в них на 4.

procent_vip = ball/vsego_zadach * 100;

Затем нужно вывести ответ на экран.

document.getElementById(‘rezultat’).innerHTML = “Задания выполнены верно на ”+procent_vip+”%.”;

Вот и все. Теперь объединим весь код в одну HTML страницу.

Я добавил фоновый цвет на всю страницу, а также увеличил шрифт текста.

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

Ниже вы можете скачать расширенную версию теста.

Разделение вопросов теста. Добавление кнопки "Следующий вопрос"

Нам нужно сделать так, чтобы единовременно отображался только один вопрос. А для переключения к следующему вопросу нужно было нажать кнопку "Следующий вопрос".

Для этого добавим каждый вопрос и поле для ответа в отдельные блоки div. Причем для второго и третьего вопросов добавим параметр "display:none" для того, чтобы их скрыть. Для первого указываем параметр "display:block". И для каждого блока подпишем номера вопросов.

Также добавим код кнопки "Следующий вопрос".

Далее на нужно добавить функцию перемещения между вопросами теста.

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

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






Но в этом варианте добавить новые вопросы в тест будет уже сложнее.

Для того, чтобы заменить вопросы было проще нужно перенести их и ответы в отдельный файл. Тогда не придется искать эти данные в основном файле. Если вы не программист, то такой поиск будет непростым. Итак мы создаем новый файл data.js и подключаем его к основному html файлу нашего теста. Далее добавляем в него несколько переменных с вопросами и несколько с ответами (с ответами мы переносим из основного файла).

Дальше вместо текста вопросов создаем блоки span.

И прописываем jаvascript код постановки текста вопросов из переменных после загрузки страницы.

Вот и все. Теперь, для того, чтобы заменить текст вопросов теста и ответы к нему вам потребуется лишь отредактировать файл data.js. Аналогично добавим название теста:

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

Для этого используем функцию kodirov. Она выглядит следующим образом:

Аналогично шифруем второй и третий вопросы. После шифрования содержимое файла data.js выглядит следующим образом:

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

Вывод результата ответа на каждый вопрос

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

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

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

После последних модификаций, увеличения шрифтов, добавления цвета к ответам получаем следующий полный исходный код html файла:

Результат выполнения теста с ошибкой в третьей задаче показан на рисунке ниже. Также я добавил функцию округления процента выполнения задач "toFixed()".


Ниже вы можете скачать данную программу.

Добавление изображений к вопросам теста

Естественно, что кл многим вопросам при создании теста необходимо добавление изображений. Часто нужно добавить изображение вместо текста вопроса. Реализуем данную возможность также через файл data.js. Я буду редактировать самый большой тест из 15 вопросов. Итак, я для каждого вопроса добавлю отдельную переменную и указываю в ней: если изображение есть, то - "да", иначе - "нет".

Обращаю ваше внимание на то, что текст вопроса в случае наличия изображения, я полностью убрал.

Но вы также можете добавить и изображение и текст вопроса.

В данном случае я указал, что в вопросах под номерами 1,4,7 и 15 будут изображения. Поэтому я должен добавить в папку "data" эти изображение. Их названия должны соответствовать (в т.ч. и содержательно) номерам вопросов: "01.jpg", "04.jpg", "07.jpg" и "15.jpg".

Перемешиваем вопросы теста в случайном порядке

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

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

При этом файл "data.js" я не редактировал.
Так выглядит переменная,в которую помещен массив:

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

В файл data.js я добавляю новую переменную, в которой можно указать - перемешивать вопросы или нет ("да" или "нет").

Пример вывода вопроса в файле html:

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

Визуальное оформление программы тестирования

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

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


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

Итак, последнюю версию (на данный момент) уже визуально оформленного теста вы можете скачать по ссылке ниже.

Группа ВКонтакте - Инновационные образовательные проекты

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

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

Читайте также: