Материал

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

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

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

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

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

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

  1. 4*12 +7 =
  2. 7-8*2 =
  3. 34*2 + 17 =

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

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

<p>4*12 + 7 = <input type=”text” id=”z_1”></p>
<p>7-8*2 = <input type=”text” id=”z_2”></p>
<p>34*2 + 17 =  <input type=”text” id=”z_3”></p>
<button onclick=”proverit();”>Проверить</button>
<div id=”rezultat”></div>

Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в 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.

Теперь нужно посчитать процент правильных ответов.

vsego_zadach = 3

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

procent_vip = ball/vsego_zadach * 100;

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

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

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

<html>
<head><title>Тест из нескольких задач по математике</title>
<style>
p {
 font-size:24px;
}
input {
 font-size:24px;
}
</style>
</head>
<body style="background-color:#d9ffd6;">
<p>Выполните задания теста:</p>
<p>4*12 + 7 = <input type="text" id="z_1"></p>
<p>7-8*2 = <input type="text" id="z_2"></p>
<p>34*2 + 17 = <input type="text" id="z_3"></p>
<button onclick="proverit();">Проверить</button>
<div id="rezultat"></div>
<script>
function proverit(){
pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;
otv_uch_1 = document.getElementById('z_1').value;
otv_uch_2 = document.getElementById('z_2').value;
otv_uch_3 = document.getElementById('z_3').value;
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;
}
vsego_zadach = 3;
procent_vip = ball/vsego_zadach * 100;
document.getElementById('rezultat').innerHTML = "Задания выполнены верно на "+procent_vip+"%.";
}
</script>
</body>
</html>

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

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






Скачать шаблон теста  

Скачать файл: Шаблон теста [712 b] (cкачиваний: 73)

Вы можете создать тест "Эстафета знаний" в игровой форме (см. рисунок ниже), затем загрузить локальныую версию на компьютер, флешку и т.п. Затем вы сможете использовать эту программу без подключения к сети Интернет или на сайте "Сила знаний". Смотреть пример. "Эстафета знаний" содержит разное количесвто вопросов, ответ на каждый нужно давать в виде текста или числа.

est-zn

est-zn-zad

Перейти на сайт с онлайн конструктором тестов