Материал

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

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

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


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

  1. Создание простого теста
  2. Разделение вопросов теста. Добавление кнопки "Следующий вопрос" 
  3. Перенос вопросов и ответов теста в отдельный файл JаvaScript
  4. Шифрование ответов теста
  5. Вывод результата ответа на каждый вопрос
  6. Добавление изображений к вопросам теста
  7. Перемешиваем вопросы теста в случайном порядке
  8. Визуальное оформление программы тестирования
  9. Скачать шаблон теста. Полный вариант 
Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне). 

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

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание 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качиваний: 1407)

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

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

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

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

<div id="vopros1" style="display:block;">
<p>Вопрос 1</p>
<p>4*12 + 7 = <input type="text" id="z_1"></p>
</div>
<div id="vopros2" style="display:none;">
<p>Вопрос 2</p>
<p>7-8*2 = <input type="text" id="z_2"></p>
</div>
<div id="vopros3" style="display:none;">
<p>Вопрос 3</p>
<p>34*2 + 17 = <input type="text" id="z_3"></p>
</div>

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

<button id="kn_sl" onclick="sled_vopr();">Следующий вопрос</button>

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

function sled_vopr(){
    if(document.getElementById('vopros2').style.display == "block"){
        document.getElementById('vopros2').style.display = "none";
        document.getElementById('vopros3').style.display = "block";
        document.getElementById('kn_sl').style.display = "none";
        document.getElementById('kn_pr').style.display = "block";
    }
    if(document.getElementById('vopros1').style.display == "block"){
        document.getElementById('vopros1').style.display = "none";
        document.getElementById('vopros2').style.display = "block";
    }
}

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

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



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


Перенос вопросов и ответов теста в отдельный файл JаvaScript

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

vopros_1 = "4*12 + 7 = ";
vopros_2 = "7-8*2 = ";
vopros_3 = "34*2 + 17 = ";
pr_otv_zadachi_1 = 55; 
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

Далее подключаем data.js к основному файлу теста

<script type="text/jаvascript" src="data.js"></script>

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

<div id="vopros1" style="display:block;">
<p>Вопрос 1</p>
<p><span id="v_1" style="font-size:22px;"></span> <input type="text" id="z_1"></p>
</div>
<div id="vopros2" style="display:none;">
<p>Вопрос 2</p>
<p><span id="v_2" style="font-size:22px;"></span> <input type="text" id="z_2"></p>
</div>
<div id="vopros3" style="display:none;">
<p>Вопрос 3</p>
<p><span id="v_3" style="font-size:22px;"></span> <input type="text" id="z_3"></p>
</div>

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

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('v_1').innerHTML = vopros_1;
    document.getElementById('v_2').innerHTML = vopros_2;
    document.getElementById('v_3').innerHTML = vopros_3;
});

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

var test = "Умножение";

Шифрование ответов теста

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

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

function kodirov(stroka) { 
    var b64ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+ 
                   'hijklmnopqrstuvwxyz0123456789+/='; 
    var b64enc = ''; 
    var ch1, ch2, ch3; 
    var en1, en2, en3, en4; 
    for (var i=0; i<stroka.length;) { 
        ch1 = stroka.charCodeAt(i++); 
        ch2 = stroka.charCodeAt(i++); 
        ch3 = stroka.charCodeAt(i++); 
        en1 = ch1 >> 2; 
        en2 = ((ch1 & 3) << 4) | (ch2 >> 4); 
        en3 = isNaN(ch2) ? 64:(((ch2 & 15) << 2) | (ch3 >> 6)); 
        en4 = isNaN(ch3) ? 64:(ch3 & 63); 
        b64enc += b64ch.charAt(en1) + b64ch.charAt(en2) + 
                      b64ch.charAt(en3) + b64ch.charAt(en4); 
    } 
    return b64enc; 
} 

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

var vopros_1 = "4*12 + 7 = ";
var vopros_2 = "7-8*2 = ";
var vopros_3 = "34*2 + 17 = ";
var pr_otv_zadachi_1 = "NTU="; 
var pr_otv_zadachi_2 = "LTk=";
var pr_otv_zadachi_3 = "ODU=";

Как видите, ответы зашифрованы и представляют собой набор символов.

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

otv_uch_1 = document.getElementById('z_1').value;
otv_uch_1 = kodirov(otv_uch_1);
otv_uch_2 = document.getElementById('z_2').value;
otv_uch_2 = kodirov(otv_uch_2);
otv_uch_3 = document.getElementById('z_3').value;
otv_uch_3 = kodirov(otv_uch_3);

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


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

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

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

function proverit(){
otv_uch_1 = document.getElementById('z_1').value;
otv_ucgenika_1 = otv_uch_1;
otv_uch_1 = kodirov(otv_uch_1);
otv_uch_2 = document.getElementById('z_2').value;
otv_ucgenika_2 = otv_uch_2;
otv_uch_2 = kodirov(otv_uch_2);
otv_uch_3 = document.getElementById('z_3').value;
otv_ucgenika_3 = otv_uch_3;
otv_uch_3 = kodirov(otv_uch_3);
ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1){
    ball +=1;
    otveti = "Вопрос 1. Вы ответили верно. Ваш ответ:"+otv_ucgenika_1;
} else {
    otveti = "Вопрос 1. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_1;    
}
if(otv_uch_2 == pr_otv_zadachi_2){
    ball +=1;
    otveti += "<br>Вопрос 2. Вы ответили верно. Ваш ответ:"+otv_ucgenika_2;
} else {
    otveti += "<br>Вопрос 2. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_2;    
}
if(otv_uch_3 == pr_otv_zadachi_3){
    ball +=1;
    otveti += "<br>Вопрос 3. Вы ответили верно. Ваш ответ:"+otv_ucgenika_3;
} else {
    otveti += "<br>Вопрос 3. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_3;
}
vsego_zadach = 3;
procent_vip = ball/vsego_zadach * 100;
document.getElementById('rezultat').innerHTML = "Задания выполнены верно на "+procent_vip+"%.<br><br>"+otveti;
}

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

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

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

<html>
<head><title>Тест</title>
<script type="text/jаvascript" src="data/data.js"></script>
<style>
p, span, input {
 font-size:24px;
}
button{
    font-size:18px;
}
#vo {
    color:green;
}
#nvo {
    color:red;
}
#ot {
    color:blue;
}
</style>
</head>
<body style="background-color:#d9ffd6;">
<div style="margin-left: auto;margin-right: auto;width: 600px;text-align:center;">
<p>Тест. Тема. <span id="tema"></span>.</p>
<div id="vopros1" style="display:block;">
<p>Вопрос 1</p>
<p><span id="v_1"></span> <input type="text" id="z_1"></p>
</div>
<div id="vopros2" style="display:none;">
<p>Вопрос 2</p>
<p><span id="v_2"></span> <input type="text" id="z_2"></p>
</div>
<div id="vopros3" style="display:none;">
<p>Вопрос 3</p>
<p><span id="v_3"></span> <input type="text" id="z_3"></p>
</div>
<button id="kn_sl" onclick="sled_vopr();">Следующий вопрос</button>
<button id="kn_pr" style="display:none;" onclick="proverit();">Проверить</button>
<div id="rezultat"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('v_1').innerHTML = vopros_1;
    document.getElementById('v_2').innerHTML = vopros_2;
    document.getElementById('v_3').innerHTML = vopros_3;
    document.getElementById('tema').innerHTML = test;
});
function sled_vopr(){
    if(document.getElementById('vopros2').style.display == "block"){
        document.getElementById('vopros2').style.display = "none";
        document.getElementById('vopros3').style.display = "block";
        document.getElementById('kn_sl').style.display = "none";
        document.getElementById('kn_pr').style.display = "block";
    }
    if(document.getElementById('vopros1').style.display == "block"){
        document.getElementById('vopros1').style.display = "none";
        document.getElementById('vopros2').style.display = "block";
    }
}
function proverit(){
otv_uch_1 = document.getElementById('z_1').value;
otv_ucgenika_1 = otv_uch_1;
otv_uch_1 = kodirov(otv_uch_1);
otv_uch_2 = document.getElementById('z_2').value;
otv_ucgenika_2 = otv_uch_2;
otv_uch_2 = kodirov(otv_uch_2);
otv_uch_3 = document.getElementById('z_3').value;
otv_ucgenika_3 = otv_uch_3;
otv_uch_3 = kodirov(otv_uch_3);
ball = 0;
document.getElementById('vopros3').style.display = "none";
document.getElementById('kn_pr').style.display = "none";
if(otv_uch_1 == pr_otv_zadachi_1){
    ball +=1;
    otveti = "<span id='vo'>Вопрос 1. Вы ответили верно. Ваш ответ: "+otv_ucgenika_1+"</span>";
} else {
    otveti = "<span id='nvo'>Вопрос 1. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_1+"</span>"; 
}
if(otv_uch_2 == pr_otv_zadachi_2){
    ball +=1;
    otveti += "<br><span id='vo'>Вопрос 2. Вы ответили верно. Ваш ответ: "+otv_ucgenika_2+"</span>";
} else {
    otveti += "<br><span id='nvo'>Вопрос 2. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_2+"</span>"; 
}
if(otv_uch_3 == pr_otv_zadachi_3){
    ball +=1;
    otveti += "<br><span id='vo'>Вопрос 3. Вы ответили верно. Ваш ответ: "+otv_ucgenika_3+"</span>";
} else {
    otveti += "<br><span id='nvo'>Вопрос 3. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_3+"</span>";
}
vsego_zadach = 3;
procent_vip = ball/vsego_zadach * 100;
procent_vip = procent_vip.toFixed();
document.getElementById('rezultat').innerHTML = "<span id='ot'>Задания выполнены верно на "+procent_vip+"%.</span><br><br>"+otveti;
}
function kodirov(stroka) { 
    var b64ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+ 
                   'hijklmnopqrstuvwxyz0123456789+/='; 
    var b64enc = ''; 
    var ch1, ch2, ch3; 
    var en1, en2, en3, en4; 
    for (var i=0; i<stroka.length;) { 
        ch1 = stroka.charCodeAt(i++); 
        ch2 = stroka.charCodeAt(i++); 
        ch3 = stroka.charCodeAt(i++); 
        en1 = ch1 >> 2; 
        en2 = ((ch1 & 3) << 4) | (ch2 >> 4); 
        en3 = isNaN(ch2) ? 64:(((ch2 & 15) << 2) | (ch3 >> 6)); 
        en4 = isNaN(ch3) ? 64:(ch3 & 63); 
        b64enc += b64ch.charAt(en1) + b64ch.charAt(en2) + 
                      b64ch.charAt(en3) + b64ch.charAt(en4); 
    } 
    return b64enc; 
} 
</script>
</body>
</html>

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


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

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

Скачать файл: Шаблон теста на 3 вопроса [1,85 Kb] (cкачиваний: 336)
Скачать файл: Шаблон теста на 10 вопросов [3,61 Kb] (cкачиваний: 423)   
Скачать файл: Шаблон теста на 15 вопросов [3,82 Kb] (cкачиваний: 422)  

Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне).


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

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

var vopros_ris_1 = "да";
var vopros_ris_2 = "нет";
var vopros_ris_3 = "нет";
var vopros_ris_4 = "да";
var vopros_ris_5 = "нет";
var vopros_ris_6 = "нет";
var vopros_ris_7 = "да";
var vopros_ris_8 = "нет";
var vopros_ris_9 = "нет";
var vopros_ris_10 = "нет";
var vopros_ris_11 = "нет";
var vopros_ris_12 = "нет";
var vopros_ris_13 = "нет";
var vopros_ris_14 = "нет";
var vopros_ris_15 = "да";

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

var vopros_1 = "";
var vopros_2 = "7-8*2 = ";
var vopros_3 = "34*2 + 17 = ";
var vopros_4 = "";
var vopros_5 = "36*2 + 4 = ";
var vopros_6 = "37*8 + 7 = ";
var vopros_7 = "";
var vopros_8 = "39*12 + 19 = ";
var vopros_9 = "40*2 + 16 = ";
var vopros_10 = "41*4 + 3 = ";
var vopros_11 = "42*8 - 7 = ";
var vopros_12 = "43*6 - 5 = ";
var vopros_13 = "4*62 - 6 = ";
var vopros_14 = "45*9 - 9 = ";
var vopros_15 = "";

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

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

 Список изображений в папке dataВ программный код основного файла я добавил условия, которые проверяют переменные. Если есть ли изображение, то одно подгружается к вопросу теста. Пример такого кода для первого вопроса:
if(vopros_ris_1 == "да"){
        vopros_1 = "<img src='data/01.jpg'><br><br>"+vopros_1;
        document.getElementById('v_1').innerHTML = vopros_1;
    } else {
        document.getElementById('v_1').innerHTML = vopros_1;
    }

Скачать шаблон теста с изображениями  

Скачать файл: Шаблон теста на 15 вопросов с изображениями [22,08 Kb] (cкачиваний: 193)  

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

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

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

При этом файл "data.js" я не редактировал.
Так выглядит переменная,в которую помещен массив:
voprosi = [[vopros_1,pr_otv_zadachi_1],[vopros_2,pr_otv_zadachi_2],[vopros_3,pr_otv_zadachi_3],[vopros_4,pr_otv_zadachi_4],[vopros_5,pr_otv_zadachi_5],[vopros_6,pr_otv_zadachi_6],[vopros_7,pr_otv_zadachi_7],[vopros_8,pr_otv_zadachi_8],[vopros_9,pr_otv_zadachi_9],[vopros_10,pr_otv_zadachi_10],[vopros_11,pr_otv_zadachi_11],[vopros_12,pr_otv_zadachi_12],[vopros_13,pr_otv_zadachi_13],[vopros_14,pr_otv_zadachi_14],[vopros_15,pr_otv_zadachi_15]];

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

peremeshat_vse_voprosi(voprosi);

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

var peremeshat_voprosi = "да";

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

document.getElementById('v_1').innerHTML = voprosi[0][0];

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

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

Скачать шаблон теста с изображениями  

Скачать файл: Шаблон теста на 15 вопросов с изображениями и перемешиванием вопросов [22,89 Kb] (cкачиваний: 236)  


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

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

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

А таблица ответов выглядит следующим образом:

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

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


Скачать полную версию шаблона теста  

Скачать файл: Шаблон теста на 15 вопросов с изображениями, перемешиванием вопросов и современным оформлением [623,29 Kb] (cкачиваний: 992)  


Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне).

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

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

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

Поделиться в соц. сетях: