Меню Закрыть

Тест на javascript для сайта

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

Идея в следующем: создается нескольно однотиптных страниц с расширением ‘.htm’, в которых меняется только содержимое вопросов.

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

Исходный код этого примера:

Замечательный тест, большое спасибо! Но возник вопрос, как скрыть вопросы и ответы, что бы после нажатия на кнопку Проверить изменить их было нельзя?

Проставить disable всем input-ам ! Но пользователь всегда сможет обновить страницу и опять ответить. Для защиты от этого можно поставить куку, но опять таки пользователь может очистить куки в браузере. Чтобы полностью защититься от всех возможных вариантов – нужно делать серверный скрипт на PHP и регистрацию пользователя.

БлогNot. Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом ба.

Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом баллов

Ответ на заданный вопрос.

На самом деле все ответы есть на моем сайте по следующим ссылкам:

Архив с обучающей статьей и примерами по JavaScript

Раздел по JavaScript с множеством доступных для скачивания архивов

Приведу здесь пример с комментариями именно для теста на JavaScript.

Читайте также:  Почему дисковод не видит диск на компьютере

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как подключить сетевой адаптер wifi

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;

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

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

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

Рекомендуем к прочтению

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code

Adblock detector