тест на html код

Создание учебного теста с ответами при помощи 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 страницу.

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

Источник

Тест на html код

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

Пример1
Пример интерактивного теста по теме Электромагнитная индукция.

Итак, вы решили создать собственный интерактивный тест в виде Интернет страницы на основе шаблона. Шаблон содержит 6 вопросов к каждому из которых предлагается 4 варианта ответов. Как изменять количество вопросов в статье описано, изменение количества ответов не затрагивается. Вы должны уметь копировать, сохранять, переименовывать файлы. Копировать рисунки из документов, изменять их реальный размер и сохранять в виде файла (при условии, что вы будете использовать рисунки)
Необходимо понимать, что для изменения инетернет страницы необходимо открыть ее код (называют HTML код). В этот код внедрена программа, ее необходимо немного изменить только при условии, что вы изменяете количество вопросов. Эта задача доступна любому пользователю, но необходима аккуратность, пунктуальность, эта инструкция и конечно, ваша природная сообразительность. Приступим:

I – Подготовительный этап
1. Cохраните шаблон (Сохранить) и эту страницу на своем компьютере. ( Теперь можно выйти из сети, и запустить эту инструкцию в режиме автономного просмотра).
2. Подготовьте тест который будете превращать в электронный. Наверняка у вас уже имеется такой напечатанный в любом редакторе например в MS Word.
3. Создайте в удобном для вас месте папку и назовите ее как вам удобно (ФизТест10вар1 и т.п.)
4. Скопируйте в эту папку распакованный шаблон (zagotovka.html) и при необходимости рисунки к тесту. (Напоминаю, что формулы в MS Word являются рисунками.
5. Имена рисунков лучше задавать латинскими буквами и короткими именами например ris2-1.gif
6. Проверьте работоспособность шаблона, запустив его и разрешив заблокированное содержимое. На все вопросы поставьте первый ответ. Вы получите оценку отлично.

II Получаем тест из шести вопросов без рисунков.

1. Не закрывая этой страницы запустите (если закрыли) шаблон. В меню Internet Explorer в окне с шаблоном дайте команду Вид-Просмотр HTML-кода.
2. Откроется текст кода в программе Блокнот.
3. Измените текст этого кода (непосредственно Блокноте) в соответствии с образцом приведенном ниже. В образце, выделенный зеленым цветом текст показывает где именно необходимо изменять, (смысл надписей говорит сам за себя)
4. Найдите выделенный зеленым цветом текст «111111» он идет после команды var res=, и поставьте последовательность правильных ответов.
5. Коричневым цветом выделены комментарии к коду, они не влияют на работу и не отображаются на экране.
6. Сохраните в блокноте файл в подготовленную папку с рисунками выбрав при сохранении Тип файлов «Все Файлы» имя задайте любое (лучше латинскими буквами) и задайте расширение файла html (после имени файла поставьте точку и наберите html Например test1.html) Это необходимо чтобы шаблон zagotowka.html не изменился.
7. Проверьте на работоспособность ваш тест.

Текст в заголовке браузера

Автор » name=Author>

Источник

Как создавать тесты и викторины на JavaScript

Разбираемся, как создавать тесты и викторины для сайта на ванильном JavaScript.

Тесты и викторины хороши не только ради проверки знаний, но и как развлекательный контент, который заставляет пользователей дольше оставаться на сайте.

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

Репозиторий проекта на GitHub

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

Вёрстка страницы

Тест мы поместим в файл quiz.html, чтобы его можно было вставлять с помощью iframe в другие страницы. Давайте сверстаем тест:

Теперь добавим стили:

В файл index.html добавим iframe, чтобы подключить тест:

Смотрим, что получилось:

Наверху находится сам вопрос, под ним — варианты ответов, а в самом низу — прогресс прохождения теста.

Создаём классы

Тест будет работать с помощью следующих классов:

Когда классы готовы, можно инстанцировать объекты (создавать экземпляры):

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

Остаётся только прописать логику взаимодействия с пользователем:

Смотрим, что получилось:

Когда пользователь завершит тест, то увидит свой результат:

Особенности создания разных тестов

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

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

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

То же самое касается и таймеров: если вы даёте ограниченное время на прохождение теста, то время начала отсчёта должно храниться на сервере, а не в JS-коде.

Заключение

С помощью кода из статьи можно создавать сколько угодно тестов. Разве что для каждого придётся дублировать файл app.js, чтобы указать новые вопросы.

Исправить это можно с помощью HTTP-запросов — вопросы будут храниться на сервере и отправляться пользователю в виде JSON. Это очень распространённая практика в веб-разработке, которую нужно знать каждому разработчику.

Если вы хотите лучше освоить JavaScript, то можете записаться на наш курс по Frontend-разработке.

Frontend-разработчик

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

Источник

HTML Тестирование

Вы можете проверить свои навыки HTML с помощью Викторины SchoolsW3.

Тест HTML

Тест содержит 40 вопросов с учетом времени.

Тест не является официальным, это просто хороший способ, чтобы проверить себя, на сколько хорошо вы знаете HTML.

Подсчет баллов

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

Начать тест

Если вы не знаете HTML, выучить HTML Учебник с нуля самостоятельно.

SchoolsW3 онлайн сертификат

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

Уже выдано более 10 000 сертификатов!

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания продвинутого CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

jQuery Сертификат документирует ваши знания jQuery.

PHP Сертификат документирует ваши знания PHP и SQL (MySQL).

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания Bootstrap фреймворк.

Упражнения

Тесты

КАК СДЕЛАТЬ

ПОДЕЛИТЬСЯ

СЕРТИФИКАТЫ

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:

Ваше предложение:

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Источник

Как создать тест в 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 позволяет не только создавать тесты, но и получать в оперативном порядке результаты проверки тестируемых.

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

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

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

Источник