Как сделать тест в браузере

Создание учебного теста с ответами при помощи HTML и JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 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 страницу.

Тест из нескольких задач по математике

Источник

Масштаб, шрифт и кодировка

Масштаб

Чтобы задать общий для всех страниц масштаб:

Чтобы изменить масштаб страницы:

В открывшемся меню нажмите кнопку:

— развернуть окно во весь экран.

Чтобы удалить настройки масштаба для отдельных страниц:

Нажмите Ctrl и прокрутите колесо мыши вперед.

Нажмите Ctrl и прокрутите колесо мыши назад.

Нажмите Ctrl и прокрутите колесо мыши вперед.

Нажмите Ctrl и прокрутите колесо мыши назад.

Нажмите Ctrl и прокрутите колесо мыши вперед.

Нажмите Ctrl и прокрутите колесо мыши назад.

Нажмите Ctrl и прокрутите колесо мыши вперед.

Нажмите Ctrl и прокрутите колесо мыши назад.

Шрифт

Чтобы задать общий для всех страниц шрифт:

Нечеткий, бледный или ломаный шрифт

Отключите сглаживание шрифтов ClearType в настройках Windows.

Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.

Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:

Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.

В браузерах на движке Chromium шрифты иногда становятся блеклыми. В этом случае может помочь удаление шрифта Roboto:

Кодировка

Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:

Масштаб, шрифт и кодировка

Масштаб

Чтобы задать общий для всех страниц масштаб:

Чтобы изменить масштаб страницы:

В открывшемся меню нажмите кнопку:

— уменьшить масштаб,

— увеличить масштаб,

— развернуть окно во весь экран.

Чтобы удалить настройки масштаба для отдельных страниц:

Источник

Как создать тест в HTML, EXE, FLASH форматах (тесты для ПК и сайта в интернете). Инструкция

Доброго времени суток.

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

Но пробовали ли вы создать тест самостоятельно? Возможно у вас есть свой блог или сайт и вы хотели бы проверить читателей? Или вы хотите проводить анкетирование людей? Или хотите выпустить свой обучающий курс? Еще лет 10-15 назад, чтобы создать простейший тест — пришлось бы потрудиться. Я еще помню времена, когда за зачет по одному из предметов, мне пришлось программировать тест на PHP (эх… было время). Сейчас же, хотел бы с вами поделиться одной программой, которая помогает кардинально решить эту проблему — т.е. создание любого теста превращается в удовольствие.

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

1. Выбор программы для работы

Несмотря на сегодняшнее обилие программ для создания тестов, я рекомендую остановиться на iSpring Suite. Ниже распишу из-за чего и почему.

iSpring Suite 8

2. Как создать тест: начало. Первая страница приветствия.

После установки программы, на рабочем столе должен появиться значок iSpring Suite — с помощью него и запускаем программу. Должен открыться мастер быстрого старта: среди меню слева выбираем раздел « ТЕСТЫ » и щелкаем по кнопку « создать новый тест » (скриншот ниже).

Далее перед вами откроется окно редактора — оно очень напоминает окно в Microsoft Word или Excel, с которым, я думаю, почти все работали. Здесь можно указать название теста и его описание — т.е. оформить первый лист, который все будут видеть, при запуске теста (см. красные стрелки на скрине ниже).

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

3. Просмотр промежуточных результатов

Я думаю, со мной никто не будет спорить, что первое, что хотелось бы увидеть — это то, как это будет выглядеть в итоговом виде (а то может и не стоит забавляться дальше?!). В этом плане iSpring Suite выше всяких похвал!

На любом этапе создания теста — вы можете «в живую» посмотреть, как он будет выглядеть. Для этого есть спец. кнопка в меню: « Плеер » (см. скриншот ниже).

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

4. Добавление вопросов в тест

Наверное, это самый интересный этап. Должен вам сказать, что всю мощь программы начинаешь чувствовать именно в этом шаге. Ее возможности просто поражают (в хорошем смысле этого слова) :).

Во-первых, есть два типа теста:

Так как я «делаю» самый настоящий тест, то я выбираю раздел « Вопрос теста » (см. скрин ниже). При нажатии на кнопку для добавления вопроса — вы увидите несколько вариантов — типов вопросов. Разберу подробно каждый из них ниже.

ТИПЫ ВОПРОСОВ для тестирования

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

2) Одиночный выбор

Так же популярнейший тип вопросов. Смысл простой: задается вопрос и из 4-10 (зависит от создателя теста) вариантов нужно выбрать правильный. Так же можно использовать практически для любых тем, проверить таким типом вопроса можно все, что угодно!

Пример: выбор правильного ответа

3) Множественный выбор

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

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

Ввод строки — пример

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

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

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

Ввод числа — пример

Этот тип вопросов довольно популярен. Суть его в том, что вы читаете предложение и видите место, в котором не хватает слова. Ваша задача — его туда написать. Иногда, сделать это не просто…

9) Вложенные ответы

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

Вложенные ответы — пример

Не очень популярный тип вопросов, однако, имеет место для существования :). Пример использования: вы пишите предложение, пропускаете в нем слова, но слова эти не скрываете — они видны под предложением для тестируемого. Его задача: правильно расположить их в предложении, чтобы получился осмысленный текст.

11) Активная область

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

Активная область — пример

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

И так, как добавить вопрос

Сначала в меню выбираете « Вопрос теста «, далее в списке выбираете « Одиночный выбор » (ну или свой тип вопроса).

Далее обратите внимание на скрин ниже:

Составление вопроса (кликабельно).

Кстати, обратите внимание на то, что к вопросам так же можно добавлять картинки, звуки и видео. Я, например, добавил простую тематическую картинку к вопросу.

На скрине ниже показан, как будет выглядеть мой добавленный вопрос (просто и со вкусом :)). Обратите внимание, что тестируемому просто нужно будет выбрать мышкой вариант ответа и нажать кнопку « Отправить » (т.е. ничего лишнего).

Тест — как выглядит вопрос.

5. Экспорт теста в форматы: HTML, EXE, FLASH

И так, будем считать, что тест у вас готов: вопросы добавлены, картинки вставлены, ответы проверены — все работает, как нужно. Теперь осталось дело за малым — сохранить тест в нужном формате.

Для этого в меню программы есть кнопка « Публикация » — .

Если вы хотите использовать тест на компьютерах : т.е. принести тест на флешке (например), скопировать его на компьютер, запустить и посадить тестируемого. В этом случае, лучшим форматов будет EXE файл — т.е. самый обычный файл программы.

Если вы хотите сделать возможность прохождения теста на вашем сайте (по интернету) — то, на мой взгляд, оптимальным форматом будет HTML 5 (или FLASH).

Опубликовать тест — выбор формата (кликабельно).

В ажный момент

Помимо того, что тест можно сохранить в файл, есть возможность загрузить его и в «облако» — спец. сервис, который позволит сделать доступным ваш тест для других пользователей по сети интернет (т.е. вы даже можете не носить свои тесты на различных накопителях, а запустить их на других ПК, которые подключены к сети интернет). Кстати, плюс облака не только в том, что пройти тест могут пользователи классического ПК (или ноутбука), но и пользователи Android устройств и iOS! Есть смысл попробовать…

загрузить тест в «облако»

ИТОГИ

Таким образом, за полчаса-час я достаточно легко и быстро создал самый настоящий тест, экспортировал его в формат EXE (скрин представлен ниже), который можно записать на флешку (или скинуть на почту) и запустить этот файл на любом из компьютеров (ноутбуков). Затем, соответственно, узнать результаты тестируемого.

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

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

ДОПОЛНЕНИЕ

Пару слов о РЕЗУЛЬТАТАХ ТЕСТОВ / тестирования

iSpring Suite позволяет не только создавать тесты, но и получать в оперативном порядке результаты проверки тестируемых.

Как можно получать результаты от пройденных тестов:

График прохождения теста

Дополнения по теме статьи — приветствуются. На сим закругляюсь, пойду тестироваться. Удачи!

Источник