Материал

Создание учебного теста с ответами при помощи 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качиваний: 5139)

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

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

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

Для этого добавим каждый вопрос и поле для ответа в отдельные блоки 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качиваний: 1581)
Скачать файл: Шаблон теста на 10 вопросов [3.61 Kb] (cкачиваний: 1989)   
Скачать файл: Шаблон теста на 15 вопросов [3.82 Kb] (cкачиваний: 1735)  

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


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

Естественно, что кл многим вопросам при создании теста необходимо добавление изображений. Часто нужно добавить изображение вместо текста вопроса. Реализуем данную возможность также через файл 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качиваний: 846)  

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

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

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

При этом файл "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качиваний: 960)  


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

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

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

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

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

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

[banner_in_full_story_top_stat] {banner_in_full_story_top_stat} [/banner_in_full_story_top_stat]
Скачать полную версию шаблона теста  

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


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

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

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

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

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