В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.
Содержание статьи.
- Создание простого теста
- Разделение вопросов теста. Добавление кнопки «Следующий вопрос»
- Перенос вопросов и ответов теста в отдельный файл JаvaScript
- Шифрование ответов теста
- Вывод результата ответа на каждый вопрос
- Добавление изображений к вопросам теста
- Перемешиваем вопросы теста в случайном порядке
- Визуальное оформление программы тестирования
- Скачать шаблон теста. Полный вариант
Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне).
Создание простого теста
Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.
Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.
Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.
Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:
- 4*12 +7 =
- 7-8*2 =
- 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качиваний: 5819)
Ниже вы можете скачать расширенную версию теста.
Разделение вопросов теста. Добавление кнопки «Следующий вопрос»
Нам нужно сделать так, чтобы единовременно отображался только один вопрос. А для переключения к следующему вопросу нужно было нажать кнопку «Следующий вопрос».
Для этого добавим каждый вопрос и поле для ответа в отдельные блоки 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качиваний: 1808)
Скачать файл: Шаблон теста на 10 вопросов [3.61 Kb] (cкачиваний: 2274)
Скачать файл: Шаблон теста на 15 вопросов [3.82 Kb] (cкачиваний: 1955)
Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне).
Добавление изображений к вопросам теста
Естественно, что кл многим вопросам при создании теста необходимо добавление изображений. Часто нужно добавить изображение вместо текста вопроса. Реализуем данную возможность также через файл 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».
В программный код основного файла я добавил условия, которые проверяют переменные. Если есть ли изображение, то одно подгружается к вопросу теста. Пример такого кода для первого вопроса:
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качиваний: 945)
Перемешиваем вопросы теста в случайном порядке
В случае, когда тест выполняются сразу несколькими учениками в классе, которые сидят рядом я сталкивался с проблемой, когда одни смотрят, что же отвечают другие, сидящие рядом. Это первая причина перемешивания вопросов. Второй является просто создание большого количества вариантов одного и того же теста.
Данные манипуляции несколько усложняют программу. Для этого потребуется создать массив, поместить в него все вопросы, изображения и ответы, а затем перемешать все в случайном порядке.
При этом файл «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качиваний: 1082)
Визуальное оформление программы тестирования
Все основные функции в тест добавлены. Теперь перейдем к оформлению программы учебного теста. Для сокращения времени работ по оформлению я использую бесплатную библиотеку 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качиваний: 5128)
Закодировать ответы для теста вы можете на нашем сайте. Перейти на страницу кодирования ответов (откроется в новом окне).
Если вам понравился данный материал, пожалуйста, порекомендуйте его в социальных сетях друзьям или оставьте свой комментарий.
Видео «Как заменить вопросы в шаблоне теста». Не забудьте включить субтитры в видео, в них размещены подсказки.
This article is about building a simple quiz web application using HTML, CSS and pure JavaScript, I plan on making this short and simple as possible. An image of final result can been seen below;
firstly, we’d need to create 3 files,
index.html //to hold our html codes
index.css //to hold our css codes
index.js //to hold our javascript codes
//feel free to name the files whatever you like, but this article I'd be going with those names above...
Enter fullscreen mode
Exit fullscreen mode
Let start by adding the following codes to the html file
<body onload="NextQuestion(0)">
<main>
<!-- creating a modal for when quiz ends -->
<div class="modal-container" id="score-modal">
<div class="modal-content-container">
<h1>Congratulations, Quiz Completed.</h1>
<div class="grade-details">
<p>Attempts : 10</p>
<p>Wrong Answers : <span id="wrong-answers"></span></p>
<p>Right Answers : <span id="right-answers"></span></p>
<p>Grade : <span id="grade-percentage"></span>%</p>
<p ><span id="remarks"></span></p>
</div>
<div class="modal-button-container">
<button onclick="closeScoreModal()">Continue</button>
</div>
</div>
</div>
<!-- end of modal of quiz details-->
<div class="game-quiz-container">
<div class="game-details-container">
<h1>Score : <span id="player-score"></span> / 10</h1>
<h1> Question : <span id="question-number"></span> / 10</h1>
</div>
<div class="game-question-container">
<h1 id="display-question"></h1>
</div>
<div class="game-options-container">
<div class="modal-container" id="option-modal">
<div class="modal-content-container">
<h1>Please Pick An Option</h1>
<div class="modal-button-container">
<button onclick="closeOptionModal()">Continue</button>
</div>
</div>
</div>
<span>
<input type="radio" id="option-one" name="option" class="radio" value="optionA" />
<label for="option-one" class="option" id="option-one-label"></label>
</span>
<span>
<input type="radio" id="option-two" name="option" class="radio" value="optionB" />
<label for="option-two" class="option" id="option-two-label"></label>
</span>
<span>
<input type="radio" id="option-three" name="option" class="radio" value="optionC" />
<label for="option-three" class="option" id="option-three-label"></label>
</span>
<span>
<input type="radio" id="option-four" name="option" class="radio" value="optionD" />
<label for="option-four" class="option" id="option-four-label"></label>
</span>
</div>
<div class="next-button-container">
<button onclick="handleNextQuestion()">Next Question</button>
</div>
</div>
</main>
<script src="index.js"></script>
</body>
Enter fullscreen mode
Exit fullscreen mode
That’ll be all for the HTML file. Next, we’ll be adding the following code to the CSS file to give the HTML some styling.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
}
body{
font-family: 'Montserrat', serif;
}
main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
background: url('../assets/background_image.jpg');
background-color : black;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.game-quiz-container{
width: 40rem;
height: 30rem;
background-color: lightgray;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-radius: 30px;
}
.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.game-details-container h1{
font-size: 1.2rem;
}
.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid darkgray;
border-radius: 25px;
}
.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}
.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.game-options-container span{
width: 45%;
height: 3rem;
border: 2px solid darkgray;
border-radius: 20px;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: rgb(22, 22, 22);
}
span label:hover{
-ms-transform: scale(1.12);
-webkit-transform: scale(1.12);
transform: scale(1.12);
color: white;
}
input[type="radio"] {
position: relative;
display: none;
}
input[type=radio]:checked ~ .option {
background: paleturquoise;
}
.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
border-radius: 10px;
background: none;
color: rgb(25, 25, 25);
font-weight: 600;
border: 2px solid gray;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
background-color: rgb(143, 93, 93);
}
.modal-container{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}
.modal-content-container{
height: 20rem;
width: 25rem;
background-color: rgb(43, 42, 42);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-radius: 25px;
}
.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: lightgray;
text-align: center;
}
.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.grade-details p{
color: white;
text-align: center;
}
.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid rgb(252, 242, 241);
color: white;
font-size: 1.1rem;
cursor: pointer;
border-radius: 20px;
}
.modal-button-container button:hover{
background-color: rgb(83, 82, 82);
}
@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}
.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}
.game-question-container{
height: 8rem;
}
.game-question-container h1{
font-size: 0.9rem;
}
.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
Enter fullscreen mode
Exit fullscreen mode
If you successfully followed along correctly up to this point, you should be having the below image on your page;
Yes, there are no questions yet, don’t worry our friend JavaScript would take care of that.
Now lets add the following codes to the JavaScript file..
//this would be the object shape for storing the questions
//you can change the questions to your own taste or even add more questions..
const questions = [
{
question: "How many days makes a week ?",
optionA: "10 days",
optionB: "14 days",
optionC: "5 days",
optionD: "7 days",
correctOption: "optionD"
},
{
question: "How many players are allowed on a soccer pitch ?",
optionA: "10 players",
optionB: "11 players",
optionC: "9 players",
optionD: "12 players",
correctOption: "optionB"
},
{
question: "Who was the first President of USA ?",
optionA: "Donald Trump",
optionB: "Barack Obama",
optionC: "Abraham Lincoln",
optionD: "George Washington",
correctOption: "optionD"
},
{
question: "30 days has ______ ?",
optionA: "January",
optionB: "December",
optionC: "June",
optionD: "August",
correctOption: "optionC"
},
{
question: "How manay hours can be found in a day ?",
optionA: "30 hours",
optionB: "38 hours",
optionC: "48 hours",
optionD: "24 hours",
correctOption: "optionD"
},
{
question: "Which is the longest river in the world ?",
optionA: "River Nile",
optionB: "Long River",
optionC: "River Niger",
optionD: "Lake Chad",
correctOption: "optionA"
},
{
question: "_____ is the hottest Continent on Earth ?",
optionA: "Oceania",
optionB: "Antarctica",
optionC: "Africa",
optionD: "North America",
correctOption: "optionC"
},
{
question: "Which country is the largest in the world ?",
optionA: "Russia",
optionB: "Canada",
optionC: "Africa",
optionD: "Egypt",
correctOption: "optionA"
},
{
question: "Which of these numbers is an odd number ?",
optionA: "Ten",
optionB: "Twelve",
optionC: "Eight",
optionD: "Eleven",
correctOption: "optionD"
},
{
question: `"You Can't see me" is a popular saying by`,
optionA: "Eminem",
optionB: "Bill Gates",
optionC: "Chris Brown",
optionD: "John Cena",
correctOption: "optionD"
},
{
question: "Where is the world tallest building located ?",
optionA: "Africa",
optionB: "California",
optionC: "Dubai",
optionD: "Italy",
correctOption: "optionC"
},
{
question: "The longest river in the United Kingdom is ?",
optionA: "River Severn",
optionB: "River Mersey",
optionC: "River Trent",
optionD: "River Tweed",
correctOption: "optionA"
},
{
question: "How many permanent teeth does a dog have ?",
optionA: "38",
optionB: "42",
optionC: "40",
optionD: "36",
correctOption: "optionB"
},
{
question: "Which national team won the football World cup in 2018 ?",
optionA: "England",
optionB: "Brazil",
optionC: "Germany",
optionD: "France",
correctOption: "optionD"
},
{
question: "Which US state was Donald Trump Born ?",
optionA: "New York",
optionB: "California",
optionC: "New Jersey",
optionD: "Los Angeles",
correctOption: "optionA"
},
{
question: "How man states does Nigeria have ?",
optionA: "24",
optionB: "30",
optionC: "36",
optionD: "37",
correctOption: "optionC"
},
{
question: "____ is the capital of Nigeria ?",
optionA: "Abuja",
optionB: "Lagos",
optionC: "Calabar",
optionD: "Kano",
correctOption: "optionA"
},
{
question: "Los Angeles is also known as ?",
optionA: "Angels City",
optionB: "Shining city",
optionC: "City of Angels",
optionD: "Lost Angels",
correctOption: "optionC"
},
{
question: "What is the capital of Germany ?",
optionA: "Georgia",
optionB: "Missouri",
optionC: "Oklahoma",
optionD: "Berlin",
correctOption: "optionD"
},
{
question: "How many sides does an hexagon have ?",
optionA: "Six",
optionB: "Sevene",
optionC: "Four",
optionD: "Five",
correctOption: "optionA"
},
{
question: "How many planets are currently in the solar system ?",
optionA: "Eleven",
optionB: "Seven",
optionC: "Nine",
optionD: "Eight",
correctOption: "optionD"
},
{
question: "Which Planet is the hottest ?",
optionA: "Jupitar",
optionB: "Mercury",
optionC: "Earth",
optionD: "Venus",
correctOption: "optionB"
},
{
question: "where is the smallest bone in human body located?",
optionA: "Toes",
optionB: "Ears",
optionC: "Fingers",
optionD: "Nose",
correctOption: "optionB"
},
{
question: "How many hearts does an Octopus have ?",
optionA: "One",
optionB: "Two",
optionC: "Three",
optionD: "Four",
correctOption: "optionC"
},
{
question: "How many teeth does an adult human have ?",
optionA: "28",
optionB: "30",
optionC: "32",
optionD: "36",
correctOption: "optionC"
}
]
let shuffledQuestions = [] //empty array to hold shuffled selected questions out of all available questions
function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
//app would be dealing with 10questions per session
while (shuffledQuestions.length <= 9) {
const random = questions[Math.floor(Math.random() * questions.length)]
if (!shuffledQuestions.includes(random)) {
shuffledQuestions.push(random)
}
}
}
let questionNumber = 1 //holds the current question number
let playerScore = 0 //holds the player score
let wrongAttempt = 0 //amount of wrong answers picked by player
let indexNumber = 0 //will be used in displaying next question
// function for displaying next question in the array to dom
//also handles displaying players and quiz information to dom
function NextQuestion(index) {
handleQuestions()
const currentQuestion = shuffledQuestions[index]
document.getElementById("question-number").innerHTML = questionNumber
document.getElementById("player-score").innerHTML = playerScore
document.getElementById("display-question").innerHTML = currentQuestion.question;
document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;
}
function checkForAnswer() {
const currentQuestion = shuffledQuestions[indexNumber] //gets current Question
const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
let correctOption = null
options.forEach((option) => {
if (option.value === currentQuestionAnswer) {
//get's correct's radio input with correct answer
correctOption = option.labels[0].id
}
})
//checking to make sure a radio input has been checked or an option being chosen
if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
document.getElementById('option-modal').style.display = "flex"
}
//checking if checked radio button is same as answer
options.forEach((option) => {
if (option.checked === true && option.value === currentQuestionAnswer) {
document.getElementById(correctOption).style.backgroundColor = "green"
playerScore++ //adding to player's score
indexNumber++ //adding 1 to index so has to display next question..
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
else if (option.checked && option.value !== currentQuestionAnswer) {
const wrongLabelId = option.labels[0].id
document.getElementById(wrongLabelId).style.backgroundColor = "red"
document.getElementById(correctOption).style.backgroundColor = "green"
wrongAttempt++ //adds 1 to wrong attempts
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
})
}
//called when the next button is called
function handleNextQuestion() {
checkForAnswer() //check if player picked right or wrong option
unCheckRadioButtons()
//delays next question displaying for a second just for some effects so questions don't rush in on player
setTimeout(() => {
if (indexNumber <= 9) {
//displays next question as long as index number isn't greater than 9, remember index number starts from 0, so index 9 is question 10
NextQuestion(indexNumber)
}
else {
handleEndGame()//ends game if index number greater than 9 meaning we're already at the 10th question
}
resetOptionBackground()
}, 1000);
}
//sets options background back to null after display the right/wrong colors
function resetOptionBackground() {
const options = document.getElementsByName("option");
options.forEach((option) => {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}
// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options[i].checked = false;
}
}
// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null
// condition check for player remark and remark color
if (playerScore <= 3) {
remark = "Bad Grades, Keep Practicing."
remarkColor = "red"
}
else if (playerScore >= 4 && playerScore < 7) {
remark = "Average Grades, You can do better."
remarkColor = "orange"
}
else if (playerScore >= 7) {
remark = "Excellent, Keep the good work going."
remarkColor = "green"
}
const playerGrade = (playerScore / 10) * 100
//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"
}
//closes score modal, resets game and reshuffles questions
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}
//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
Enter fullscreen mode
Exit fullscreen mode
And that’s all, you should have a fully functioning simple quiz if you correctly followed this article.
You can follow this link : https://codepen.io/Sulaimon-Olaniran/pen/zYKJLjK to see it live on Codepen.
Изучение вопроса
В настоящее время особое значение приобретает дистанционное образование, e-learning, которое трудно, наверное, представить без средств контроля знаний обучающихся. Системы контроля знаний строятся, как правило, по принципу «клиент-серверных» систем. Такие системы достаточно удобны, однако не лишены ряда недостатков, одним из которых является зависимость от работы ПО на стороне сервера (например, php-интерпретатора).
В рамках дистанционного обучения через Интернет «клиент-серверные» системы тестирования могут дополняться возможностями JavaScript (JS), открывающего дополнительные пути визуализации интерфейса средствами браузера. К недостаткам JS относятся требование, чтобы браузер поддерживал его текущую версию.
Следует также отметить, что системы «клиент-сервер», основанные на специализированном ПО, являются зависимыми от ОС, установленной на стороне клиента, что не делает их универсальными, в отличие от технологий html/php/JS.
Таким образом, php и JS являясь, бесспорно, мощными инструментами создания систем тестирования обучающихся, не свободны от упомянутых выше недостатков.
Для решения некоторых несложных задач: создание небольших тестов для самопроверки по теме разделов, организация текущего контроля в локальной сети аудитории, возможно, будет оправдан подход, основанный на использовании исключительно технологии html, т.е. когда на сервере (а, возможно, и просто на локальной машине тестируемого) хранится набор html-страничек, связанных между собою гиперссылками. Переходя последовательно по ссылкам, каждая из которых соответствует определённому варианту ответа, тестируемый выходит на конечную страницу, содержащую результат прохождения теста.
Естественно, что создать вручную такой набор html-страниц для более или менее приличного теста не представляется возможным, и необходимо разработать специальное ПО, генерирующее данный набор, т.е. «генератор» теста.
Постановка задачи
Пусть V — вектор строк, каждая из которых соответствует определённому вопросу из общего их количества n. Пусть Q — матрица строк возможных ответов размерностью nxm, где m — количество вариантов ответов. Пусть T — матрица правильных ответов размерностью nxm, составленная из 0 и 1. Каждая строка такой матрицы соответствует номеру вопроса, а столбец — номеру варианта ответа на данный вопрос. Введём ещё матрицу фактических ответов A, элементы которой также могут принимать значения от 0 до 1 в зависимости от фактически данного ответа. При всех правильных ответах матрицы A и T совпадают.
Возникает задача при заданных V, Q и T построить набор html-файлов, реализующих систему тестирования «1 правильный из m«.
Решение задачи
Выполняется на основе конструкции «вложенные циклы», псевдокод которой (для случая n = 5) представлен ниже:
for i1 = 1:m
for i2 = 1:m
for i3 = 1:m
for i4 = 1:m
for i5 = 1:m
%создание html-страницы с выводом результата,
%основанном на сравнении матриц A и T
end
% (1)создание html-страницы со ссылками на страницы результатов
end
% (2) создание html-страницы со ссылками на страницы (1)
end
% (3) создание html-страницы со ссылками на страницы (2)
end
% (4) создание html-страницы со ссылками на страницы (3)
end
% (5) создание html-страницы со ссылками на страницы (4), т.е. страницы
с первым вопросом (index.html)В результате реализации псевдокода, должен получиться набор html-страниц, имеющих следующий формат:
i1_i2_i3_i4_i5.html
i1_i2_i3_i4.html
i1_i2_i3.html
i1_i2.html
i1.html
index.html,
где все индексы пробегают значения от 1 до m.
По названию файла страницы можно определить, на какой стадии находится тестирование, и какие ответы были даны. Например, если в браузере тестируемого открыты страница 1_3_3_2_1.html, то это означает, что тестирование завершено, и выбраны следующие варианты ответов: на первый вопрос — 1, второй — 3, третий — 3, четвёртый -2, пятый — 1. Если открыта страница 1_3_2.html, то даны три ответа с вариантами 1, 3, 2 и т.д. При этом на последней странице выводится непосредственно результат тестирования.
Пример реализации
Приведённая выше логика (с параметрами n=5, m=3) была реализована в пакете MATLAB. M-файл с кодом можно найти по ссылке: https://yadi.sk/d/P_lCp88Bhx8F3w
«Живой» пример теста с теми же параметрами размещён на GitHub и доступен по следующему адресу: https://vitder.github.io/
Итоги
Предложенная технология создания систем проверки знаний (тестирования) с использованием исключительно средств html показывает свою работоспособность. Она может быть использована для создания тестов и на основе других языков разметки или программ, поддерживающих гиперссылки.
Подобные тесты можно применять в качестве контрольных вопросов после каждого раздела дисциплины, когда тест обучающийся проходит «для себя». Также подобные тесты можно использовать для тестирования в рамках учебной аудитории, оборудованной ПК. В последнем случае, преподаватель может зафиксировать результат, просто пройдясь вдоль мониторов всех обучающихся. Для более надёжной оценки от также может посмотреть и журнал браузера. Наконец, такой тест может быть запущен просто с «флешки», вставленной в ПК.
ПО для генерации данного теста имеет довольно массивный код, возрастающий с увеличением количества вопросов и вариантов ответа на них. Однако, для небольших тестов (до 10 вопросов) он может быть реализован в «домашних условиях», т.к. логика программирования достаточно понятна и содержит много блоков, похожих один на другой.
Дальнейшие разработки
Можно модернизировать страницы теста с возможностью возвращения к любому вопросу, просмотра ошибок и т.п. Также имеет смысл автоматизировать систему контроля выполнения теста на основе, например, журнала браузера, показывающего хронологию открытия страниц. Наконец, можно доработать ПО генерации теста с возможностью случайного перемешивания вопросов и вариантов ответов на них, создав несколько комплектов html-теста. Последние можно выдавать случайным образом на клиентские станции.
Итак,
вы решили создать собственный интерактивный
тест в виде Интернет страницы на основе
шаблона. Шаблон содержит 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. Проверьте на
работоспособность ваш тест.
Образец:
<!DOCTYPE
HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
<!—
saved from url=(0038)http://www.junior.ru/wwwexam/t_gig.htm
—><HTML><HEAD><TITLE>Текст
в заголовке браузера</TITLE>
<META
http-equiv=Content-Type content=»text/html;
charset=windows-1251″>
<META content=»Автор»
name=Author>
<SCRIPT language=JavaScript>
<!—
hide
var
scrtxt
= «Бегущая
строка»
; var length = scrtxt.length;
var width = 100;
var pos =
-(width + 2);
function
scroll() {
pos++;
var scroller = «»;
if (pos ==
length)
{
pos
= -(width + 2);
}
if (pos < 0) {
for (var i = 1; i <=
Math.abs(pos); i++)
{
scroller
= scroller+» «;}
scroller = scroller +
scrtxt.substring(0, width — i + 1);
}
else
{
scroller = scroller + scrtxt.substring(pos, width + pos);
}
window.status
= scroller;
setTimeout(«scroll()», 100);
}
//
—>
</SCRIPT>
<META
content=»MSHTML 6.00.2800.1106″
name=GENERATOR></HEAD>
<BODY bgColor=white
onload=scroll()>
<SCRIPT language=JavaScript><!—Начало
сценария
var
res=»111111″
function
check_me()
<!—вместо
«111111» нужно
вставить
последовательность
правильных
ответов
{
var
count=0
with(document.test)
{if
(!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked)
{count+=1};
if
(!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked)
{count+=1};
if
(!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked)
{count+=1};
if
(!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked)
{count+=1};
if
(!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked)
{count+=1};
if
(!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked){count+=1};<!—скопируйте
эту
строку
и
вставьте
ниже необходимое
количество
раз
в
зависимости
от
количества
вопросов,
изменив
Q6 на
Q7, Q8 и
т.д.,
если
добавляете
количество
вопросов
{count+=1};
if
(count>0) <!— Вычисление
и проверка все ли задания
выполнены —>
{alert(«Вы
выполнили не все задания. Проверьте
себя.»)
}
else
answer()
}
}
function control(k,f1,f2,f3,f4,f5,f6)
<!—
добавьте переменные f7, f8,… в зависимости
от количества вопросов
{
if
(k==1&&f1.checked) return true;
if (k==2&&f2.checked)
return true;
if (k==3&&f3.checked) return true;
if
(k==4&&f4.checked) return true;
if (k==5&&f5.checked)
return true;
if
(k==6&&f6.checked) return true;
<!—скопируйте
эту строку и вставьте ниже необходимое
количество раз( в зависимости от
количества вопросов), изменив 6 на 7, 8 и
т.д если добавляете количество вопросов
return
false;
}
function
answer()
{
answ=»»;
with(document)
{
answ+=control(res.charAt(0),test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3])?»1″:»0″
answ+=control(res.charAt(1),test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3])?»1″:»0″
answ+=control(res.charAt(2),test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3])?»1″:»0″
answ+=control(res.charAt(3),test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3])?»1″:»0″
answ+=control(res.charAt(4),test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3])?»1″:»0″
answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?»1″:»0″
<!—скопируйте
эту строку и вставьте ниже необходимое
количество раз( в зависимости от
количества вопросов), изменив 5 на 6, 7 и
т.д если добавляете количество
вопросов.
<!—Анализ
результатов —>
showResult();
}
}
function
showResult()
{
var nok=0;
var i,s;
for
(i=0;i<answ.length;i++) {nok+=answ.charAt(i)==»1″?1:0;}
if(nok<3)
s='»НЕУДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==3)
s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok>3 &&
nok<4) s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==4)
s='»ХОРОШО»‘;
if(nok>4 && nok<6)
s='»ХОРОШО»‘;
if(nok==6)
s='»ОТЛИЧНО»‘;
document.test.s1.
value=»Количество
правильных ответов «+nok+». Ваша
оценка «+s+». Загляните в окно рядом
с номером задания. Если ответ правильный,
то там (+). Если Вы ошиблись, там (-).»;
with(document.test)
{
if
(answ.charAt(0)==»1″) {T1.value=» +»} else
{T1.value=» -«};
if (answ.charAt(1)==»1″)
{T2.value=» +»} else {T2.value=» -«};
if
(answ.charAt(2)==»1″) {T3.value=» +»} else
{T3.value=» -«};
if (answ.charAt(3)==»1″)
{T4.value=» +»} else {T4.value=» -«};
if
(answ.charAt(4)==»1″) {T5.value=» +»} else
{T5.value=» -«};
if
(answ.charAt(5)==»1″) {T6.value=» +»} else
{T6.value=» -«};!—скопируйте
эту строку и вставьте ниже необходимое
количество раз( в зависимости от
количества вопросов), изменив 5 на 6, 7 и
т.д если добавляете количество
вопросов.
}
}
</SCRIPT>
<FORM
name=test>
<CENTER><FONT
face=Arial,Helvetica,sans-serif color=#000099>
<H3>Название
теста </H3></CENTER>
<OL>
<LI>
<H4><INPUT
size=1 name=T1> Вопрос
1 </H4>
<INPUT
type=radio name=Q1> ответ
1.1 <BR>
<INPUT
type=radio name=Q1> ответ
2.1 <BR>
<INPUT
type=radio name=Q1> ответ
3.1 <BR>
<INPUT
type=radio name=Q1> ответ
4.1 <BR><BR>
<LI>
<H4><INPUT
size=1 name=T2> Вопрос
2 </H4>
<INPUT
type=radio name=Q2> ответ
1.2 <BR>
<INPUT
type=radio name=Q2> ответ
2.2 <BR>
<INPUT
type=radio name=Q2> ответ
3.3 <BR>
<INPUT
type=radio name=Q2> ответ
4.4 <BR><BR>
<LI>
<H4><INPUT
size=1 name=T3> Вопрос
3 </H4>
<INPUT
type=radio name=Q3> ответ
1.3 <BR>
<INPUT
type=radio name=Q3> ответ
2.3 <BR>
<INPUT
type=radio name=Q3> ответ
3.3 <BR>
<INPUT
type=radio name=Q3> ответ
4.3 <BR><BR>
<LI>
<H4><INPUT
size=1 name=T4> Вопрос
4 </H4>
<INPUT
type=radio name=Q4> ответ
1.4 <BR>
<INPUT
type=radio name=Q4> ответ
2.4 <BR>
<INPUT
type=radio name=Q4> ответ
3.4 <BR>
<INPUT
type=radio name=Q4> ответ
4.4 <BR><BR>
<LI>
<H4><INPUT
size=1 name=T5> Вопрос
5 </H4>
<INPUT
type=radio name=Q5> ответ
1.5 <BR>
<INPUT
type=radio name=Q5> ответ
2.5 <BR>
<INPUT
type=radio name=Q5> ответ
3.5 <BR>
<INPUT
type=radio name=Q5> ответ
4.5 <BR><BR>
<LI>
<H4><INPUT
size=1 name=T6> Вопрос
6 </H4>
<INPUT
type=radio name=Q6> ответ
1.6 <BR>
<INPUT
type=radio name=Q6> ответ
2.6 <BR>
<INPUT
type=radio name=Q6> ответ
3.6 <BR>
<INPUT
type=radio name=Q6> ответ
4.6 <BR>
</LI></OL><BR>
<CENTER>
<P><TEXTAREA
name=s1 rows=4 cols=70> </TEXTAREA> </P><INPUT
onclick=check_me()
type=button
value=»Показать
результат»>
<INPUT
type=reset value=»Сбросить ответы»>
</CENTER><BR><BR></FORM>
<P>
<H5> © автор.,
год</H5>
<P></P></FONT></BODY></HTML>
Окончание
образца.
III
Изменение количества вопросов
1.
После того, что вы добились работоспособности
вашего теста, снова откройте код страницы
с тестом.
2.
Скопируйте весь блок от вопроса
6:
<LI>
<H4><INPUT
size=1 name=T6> Вопрос 6 </H4>
<INPUT type=radio
name=Q6> ответ 1.6 <BR>
<INPUT type=radio
name=Q6> ответ 2.6 <BR>
<INPUT type=radio
name=Q6> ответ 3.6 <BR>
<INPUT type=radio
name=Q6> ответ 4.6 <BR>
И
вставьте его ниже, изменив соответственно
T6 на T7, Q6 на Q7 подставив соответствующие
вопросы и варианты ответов. Добавьте в
конце исходного блока 6, еще один тег
<BR> так чтобы у вас получилось: ….INPUT
type=radio name=Q6> ответ 4.6 <BR><BR>
3.
Проделайте пункт 2 необходимое количество
раз.
4. Теперь мы будем изменять саму
программу, для того чтобы обработка
результатов велась и для добавленных
вопросов. Для этого необходимо добавить
строки программы и дописать некоторые
величины. Строки для изменения выделены
в образце красным цветом, комментарии,
что нужно делать коричневым.
5. В новых
строках необходимо изменить индексы
переменных на 1 больше, например
кansw+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?»1″:»0″ добавилась
строкаansw+=control(res.charAt(6),test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3])?»1″:»0″ в
остальных местах аналогично.
6. В
команде function
control(k,f1,f2,f3,f4,f5,f6) необходимо
добавить переменные f7, f8…в зависимости
от количества вопросов. Например: function
control(k,f1,f2,f3,f4,f5,f6,f8,f9,f10)
7.
Теперь
изменим анализ результатов. Под переменной
nok понимается количество правильных
ответов (баллов). Перевод баллов в оценки
осуществляется в этом фрагменте
программы:
if(nok<3)
s='»НЕУДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==3)
s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok>3 &&
nok<4) s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==4)
s='»ХОРОШО»‘;
if(nok>4 && nok<6)
s='»ХОРОШО»‘;
if(nok==6) s='»ОТЛИЧНО»‘;
Для
изменения необходимо проставить
соответствующие границы для оценки.
Например
для 10 вопросов с границами: 4 и меньше
«2» ; 5-7 «3»; 8-9 «4»; 10 «5» фрагмент примет
вид
if(nok<4)
s='»НЕУДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==4)
s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok>4 &&
nok<8) s='»УДОВЛЕТВОРИТЕЛЬНО»‘;
if(nok==8)
s='»ХОРОШО»‘;
if(nok>8 && nok<10)
s='»ХОРОШО»‘;
if(nok==10) s='»ОТЛИЧНО»‘;
IV
Вставка рисунков.
Для
вставки рисунков на Интернет страницы
служит команда (Тег) <IMG
src=»имя файла.расширение»/>.
Для
вставки рисунка вам достаточно вставить
этот тег в код страницы и указать имя
файла с расширением. Необходимо знать,
что рисунок должен быть в той же папке,
что и сама страница. Например рисунок
к заданию 6 находится в той же папке, что
и сама страница, и имеет имя ris1.gif Вставить
его нужно после вопроса, но до вариантов
ответа. Тогда соответствующий фрагмент
будет выглядеть:
<LI>
<H4><INPUT
size=1 name=T6> Вопрос 6 </H4>
<IMG src=»
ris1.gif «/><BR>
<INPUT type=radio name=Q6>
ответ 1.6 <BR>
<INPUT type=radio name=Q6> ответ
2.6 <BR>…..
Тег <BR> необходим чтобы
ответы начинались с другой строки.
Желаю
успехов.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
- #
Hello readers, Today in this blog you’ll learn how to Create a Quiz Application with Timer using HTML CSS & JavaScript. Earlier I’ve shared a blog on how to Create a Responsive Personal Portfolio Website and now it’s time to create Quiz Web App using JavaScript.
In this program [Quiz App with Timer], there are three layers or boxes, and these boxes shown one by one on a particular button clicked. At first, on the webpage, there is shown a button labeled as “Start Quiz” and when you clicked on that button, then the info box appears with popup animation.
In this infobox, there are some rules of the quiz and two buttons labeled as “Exit” and “Continue”. When you clicked on the Exit button, the info box will be hidden but when you clicked on the Continue button, then the Quiz Box appears.
In the Quiz Box, there is a header with a title on the left side and a timer box on the right side. This timer starts decrement from 15 to 0 sec and there is also shown a timeline indicator that is sliding from the left to right side according to the timer. If the user selects an option between 15 to 0 sec, the timer will be stopped and all available options will be disabled.
If the user selected option is correct, the selected option color, background color changed to green and there is also shown the tick icon to inform the user that the selected answer is correct. If the user selects an option that is incorrect, the selected option color, background color changed to red and there is shown the cross icon to inform the user that the selected option is incorrect and the correct option will be automatically selected.
If the user doesn’t select an option between 15 to 0 sec, the timer will be stopped once it comes in 0 and the correct option of that question will be selected automatically. After that, there is the next button to show the next question, and there is a total of five questions on this Quiz.
In the end, the result box will be appeared and shown the user score and two buttons [Replay Quiz, Quit Quiz], if the user clicked on the replay quiz button, the quiz will again start with the number 1 question, and the score of the user will be 0 but if the user clicked on the quit quiz button, the current window will be reloaded and the quiz starts from the begin.
Video Tutorial of Create a Quiz App with Timer
In the video, you have seen the actual preview of the Quiz Application with Timer and I hope you’ve understood the codes behind creating this Quiz Box layout. In this video, I’ve only written the HTML & CSS codes, and in the second part of this video, I’ve completed the JavaScript codes of this program. If you haven’t watched part 2 of this video, click here to watch it now.
You can use this Quiz and also you can add more questions to this Quiz. In the source codes, I’ve written many comments on how you can add more questions and explained each JavaScript line of this Quiz. If you’re a beginner, you may have difficulties understanding the JavaScript codes but you can easily understand the HTML & CSS codes and I’ve tried to explain all JavaScript line with comments, hope you will understand.
To create this program (Quiz Application with Timer). First, you need to create four Files one HTML File, CSS File and the other two are JavaScript files. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Quiz App | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button>Start Quiz</button></div>
<!-- Info Box -->
<div class="info_box">
<div class="info-title"><span>Some Rules of this Quiz</span></div>
<div class="info-list">
<div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
<div class="info">2. Once you select your answer, it can't be undone.</div>
<div class="info">3. You can't select any option once time goes off.</div>
<div class="info">4. You can't exit from the Quiz while you're playing.</div>
<div class="info">5. You'll get points on the basis of your correct answers.</div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
</div>
</div>
<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">Awesome Quiz Application</div>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- Here I've inserted question from JavaScript -->
</div>
<div class="option_list">
<!-- Here I've inserted options from JavaScript -->
</div>
</section>
<!-- footer of Quiz Box -->
<footer>
<div class="total_que">
<!-- Here I've inserted Question Count Number from JavaScript -->
</div>
<button class="next_btn">Next Que</button>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">You've completed the Quiz!</div>
<div class="score_text">
<!-- Here I've inserted Score Result from JavaScript -->
</div>
<div class="buttons">
<button class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<!-- Inside this JavaScript file I've inserted Questions and Options only -->
<script src="js/questions.js"></script>
<!-- Inside this JavaScript file I've coded all Quiz Codes -->
<script src="js/script.js"></script>
</body>
</html>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #007bff;
}
::selection{
color: #fff;
background: #007bff;
}
.start_btn,
.info_box,
.quiz_box,
.result_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult{
opacity: 1;
z-index: 5;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.start_btn button{
font-size: 25px;
font-weight: 500;
color: #007bff;
padding: 15px 30px;
outline: none;
border: none;
border-radius: 5px;
background: #fff;
cursor: pointer;
}
.info_box{
width: 540px;
background: #fff;
border-radius: 5px;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.info_box .info-title{
height: 60px;
width: 100%;
border-bottom: 1px solid lightgrey;
display: flex;
align-items: center;
padding: 0 30px;
border-radius: 5px 5px 0 0;
font-size: 20px;
font-weight: 600;
}
.info_box .info-list{
padding: 15px 30px;
}
.info_box .info-list .info{
margin: 5px 0;
font-size: 17px;
}
.info_box .info-list .info span{
font-weight: 600;
color: #007bff;
}
.info_box .buttons{
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 30px;
border-top: 1px solid lightgrey;
}
.info_box .buttons button{
margin: 0 5px;
height: 40px;
width: 100px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.quiz_box{
width: 550px;
background: #fff;
border-radius: 5px;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.quiz_box header{
position: relative;
z-index: 2;
height: 70px;
padding: 0 30px;
background: #fff;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
}
.quiz_box header .title{
font-size: 20px;
font-weight: 600;
}
.quiz_box header .timer{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 45px;
padding: 0 8px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
width: 145px;
}
.quiz_box header .timer .time_left_txt{
font-weight: 400;
font-size: 17px;
user-select: none;
}
.quiz_box header .timer .timer_sec{
font-size: 18px;
font-weight: 500;
height: 30px;
width: 45px;
color: #fff;
border-radius: 5px;
line-height: 30px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
}
.quiz_box header .time_line{
position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #007bff;
}
section{
padding: 25px 30px 20px 30px;
background: #fff;
}
section .que_text{
font-size: 25px;
font-weight: 600;
}
section .option_list{
padding: 20px 0px;
display: block;
}
section .option_list .option{
background: aliceblue;
border: 1px solid #84c5fe;
border-radius: 5px;
padding: 8px 15px;
font-size: 17px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
section .option_list .option:last-child{
margin-bottom: 0px;
}
section .option_list .option:hover{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
}
section .option_list .option.correct{
color: #155724;
background: #d4edda;
border: 1px solid #c3e6cb;
}
section .option_list .option.incorrect{
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
}
section .option_list .option.disabled{
pointer-events: none;
}
section .option_list .option .icon{
height: 26px;
width: 26px;
border: 2px solid transparent;
border-radius: 50%;
text-align: center;
font-size: 13px;
pointer-events: none;
transition: all 0.3s ease;
line-height: 24px;
}
.option_list .option .icon.tick{
color: #23903c;
border-color: #23903c;
background: #d4edda;
}
.option_list .option .icon.cross{
color: #a42834;
background: #f8d7da;
border-color: #a42834;
}
footer{
height: 60px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid lightgrey;
}
footer .total_que span{
display: flex;
user-select: none;
}
footer .total_que span p{
font-weight: 500;
padding: 0 5px;
}
footer .total_que span p:first-child{
padding-left: 0px;
}
footer button{
height: 40px;
padding: 0 13px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
background: #007bff;
border: 1px solid #007bff;
line-height: 10px;
opacity: 0;
pointer-events: none;
transform: scale(0.95);
transition: all 0.3s ease;
}
footer button:hover{
background: #0263ca;
}
footer button.show{
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.result_box{
background: #fff;
border-radius: 5px;
display: flex;
padding: 25px 30px;
width: 450px;
align-items: center;
flex-direction: column;
justify-content: center;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.result_box .icon{
font-size: 100px;
color: #007bff;
margin-bottom: 10px;
}
.result_box .complete_text{
font-size: 20px;
font-weight: 500;
}
.result_box .score_text span{
display: flex;
margin: 10px 0;
font-size: 18px;
font-weight: 500;
}
.result_box .score_text span p{
padding: 0 4px;
font-weight: 600;
}
.result_box .buttons{
display: flex;
margin: 20px 0;
}
.result_box .buttons button{
margin: 0 10px;
height: 45px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.buttons button.restart{
color: #fff;
background: #007bff;
}
.buttons button.restart:hover{
background: #0263ca;
}
.buttons button.quit{
color: #007bff;
background: #fff;
}
.buttons button.quit:hover{
color: #fff;
background: #007bff;
}
Last, create a JavaScript file with the name of questions.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension. In this file, we store all questions in an array.
// creating an array and passing the number, questions, options, and answers
let questions = [
{
numb: 1,
question: "What does HTML stand for?",
answer: "Hyper Text Markup Language",
options: [
"Hyper Text Preprocessor",
"Hyper Text Markup Language",
"Hyper Text Multiple Language",
"Hyper Tool Multi Language"
]
},
{
numb: 2,
question: "What does CSS stand for?",
answer: "Cascading Style Sheet",
options: [
"Common Style Sheet",
"Colorful Style Sheet",
"Computer Style Sheet",
"Cascading Style Sheet"
]
},
{
numb: 3,
question: "What does PHP stand for?",
answer: "Hypertext Preprocessor",
options: [
"Hypertext Preprocessor",
"Hypertext Programming",
"Hypertext Preprogramming",
"Hometext Preprocessor"
]
},
{
numb: 4,
question: "What does SQL stand for?",
answer: "Structured Query Language",
options: [
"Stylish Question Language",
"Stylesheet Query Language",
"Statement Question Language",
"Structured Query Language"
]
},
{
numb: 5,
question: "What does XML stand for?",
answer: "eXtensible Markup Language",
options: [
"eXtensible Markup Language",
"eXecutable Multiple Language",
"eXTra Multi-Program Language",
"eXamine Multiple Language"
]
},
// you can uncomment the below codes and make duplicate as more as you want to add question
// but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9.....
// {
// numb: 6,
// question: "Your Question is Here",
// answer: "Correct answer of the question is here",
// options: [
// "Option 1",
// "option 2",
// "option 3",
// "option 4"
// ]
// },
];
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
//selecting all required elements
const start_btn = document.querySelector(".start_btn button");
const info_box = document.querySelector(".info_box");
const exit_btn = info_box.querySelector(".buttons .quit");
const continue_btn = info_box.querySelector(".buttons .restart");
const quiz_box = document.querySelector(".quiz_box");
const result_box = document.querySelector(".result_box");
const option_list = document.querySelector(".option_list");
const time_line = document.querySelector("header .time_line");
const timeText = document.querySelector(".timer .time_left_txt");
const timeCount = document.querySelector(".timer .timer_sec");
// if startQuiz button clicked
start_btn.onclick = ()=>{
info_box.classList.add("activeInfo"); //show info box
}
// if exitQuiz button clicked
exit_btn.onclick = ()=>{
info_box.classList.remove("activeInfo"); //hide info box
}
// if continueQuiz button clicked
continue_btn.onclick = ()=>{
info_box.classList.remove("activeInfo"); //hide info box
quiz_box.classList.add("activeQuiz"); //show quiz box
showQuetions(0); //calling showQestions function
queCounter(1); //passing 1 parameter to queCounter
startTimer(15); //calling startTimer function
startTimerLine(0); //calling startTimerLine function
}
let timeValue = 15;
let que_count = 0;
let que_numb = 1;
let userScore = 0;
let counter;
let counterLine;
let widthValue = 0;
const restart_quiz = result_box.querySelector(".buttons .restart");
const quit_quiz = result_box.querySelector(".buttons .quit");
// if restartQuiz button clicked
restart_quiz.onclick = ()=>{
quiz_box.classList.add("activeQuiz"); //show quiz box
result_box.classList.remove("activeResult"); //hide result box
timeValue = 15;
que_count = 0;
que_numb = 1;
userScore = 0;
widthValue = 0;
showQuetions(que_count); //calling showQestions function
queCounter(que_numb); //passing que_numb value to queCounter
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
startTimer(timeValue); //calling startTimer function
startTimerLine(widthValue); //calling startTimerLine function
timeText.textContent = "Time Left"; //change the text of timeText to Time Left
next_btn.classList.remove("show"); //hide the next button
}
// if quitQuiz button clicked
quit_quiz.onclick = ()=>{
window.location.reload(); //reload the current window
}
const next_btn = document.querySelector("footer .next_btn");
const bottom_ques_counter = document.querySelector("footer .total_que");
// if Next Que button clicked
next_btn.onclick = ()=>{
if(que_count < questions.length - 1){ //if question count is less than total question length
que_count++; //increment the que_count value
que_numb++; //increment the que_numb value
showQuetions(que_count); //calling showQestions function
queCounter(que_numb); //passing que_numb value to queCounter
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
startTimer(timeValue); //calling startTimer function
startTimerLine(widthValue); //calling startTimerLine function
timeText.textContent = "Time Left"; //change the timeText to Time Left
next_btn.classList.remove("show"); //hide the next button
}else{
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
showResult(); //calling showResult function
}
}
// getting questions and options from array
function showQuetions(index){
const que_text = document.querySelector(".que_text");
//creating a new span and div tag for question and option and passing the value using array index
let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>';
let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[1] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[2] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[3] +'</span></div>';
que_text.innerHTML = que_tag; //adding new span tag inside que_tag
option_list.innerHTML = option_tag; //adding new div tag inside option_tag
const option = option_list.querySelectorAll(".option");
// set onclick attribute to all available options
for(i=0; i < option.length; i++){
option[i].setAttribute("onclick", "optionSelected(this)");
}
}
// creating the new div tags which for icons
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';
//if user clicked on option
function optionSelected(answer){
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
let userAns = answer.textContent; //getting user selected option
let correcAns = questions[que_count].answer; //getting correct answer from array
const allOptions = option_list.children.length; //getting all option items
if(userAns == correcAns){ //if user selected option is equal to array's correct answer
userScore += 1; //upgrading score value with 1
answer.classList.add("correct"); //adding green color to correct selected option
answer.insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to correct selected option
console.log("Correct Answer");
console.log("Your correct answers = " + userScore);
}else{
answer.classList.add("incorrect"); //adding red color to correct selected option
answer.insertAdjacentHTML("beforeend", crossIconTag); //adding cross icon to correct selected option
console.log("Wrong Answer");
for(i=0; i < allOptions; i++){
if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer
option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option
console.log("Auto selected correct answer.");
}
}
}
for(i=0; i < allOptions; i++){
option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
}
next_btn.classList.add("show"); //show the next button if user selected any option
}
function showResult(){
info_box.classList.remove("activeInfo"); //hide info box
quiz_box.classList.remove("activeQuiz"); //hide quiz box
result_box.classList.add("activeResult"); //show result box
const scoreText = result_box.querySelector(".score_text");
if (userScore > 3){ // if user scored more than 3
//creating a new span tag and passing the user score number and total question number
let scoreTag = '<span>and congrats! , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text
}
else if(userScore > 1){ // if user scored more than 1
let scoreTag = '<span>and nice , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
else{ // if user scored less than 1
let scoreTag = '<span>and sorry , You got only <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
}
function startTimer(time){
counter = setInterval(timer, 1000);
function timer(){
timeCount.textContent = time; //changing the value of timeCount with time value
time--; //decrement the time value
if(time < 9){ //if timer is less than 9
let addZero = timeCount.textContent;
timeCount.textContent = "0" + addZero; //add a 0 before time value
}
if(time < 0){ //if timer is less than 0
clearInterval(counter); //clear counter
timeText.textContent = "Time Off"; //change the time text to time off
const allOptions = option_list.children.length; //getting all option items
let correcAns = questions[que_count].answer; //getting correct answer from array
for(i=0; i < allOptions; i++){
if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer
option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option
console.log("Time Off: Auto selected correct answer.");
}
}
for(i=0; i < allOptions; i++){
option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
}
next_btn.classList.add("show"); //show the next button if user selected any option
}
}
}
function startTimerLine(time){
counterLine = setInterval(timer, 29);
function timer(){
time += 1; //upgrading time value with 1
time_line.style.width = time + "px"; //increasing width of time_line with px by time value
if(time > 549){ //if time value is greater than 549
clearInterval(counterLine); //clear counterLine
}
}
}
function queCounter(index){
//creating a new span tag and passing the question number and total question
let totalQueCounTag = '<span><p>'+ index +'</p> of <p>'+ questions.length +'</p> Questions</span>';
bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter
}
That’s all, now you’ve successfully created a Create a Quiz App with Timer using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Здравствуйте, давайте создадим тест и опрос на html, который будет состоять из 3 вопросов и 6 ответов в каждом из них и обработаем их результаты с помощью javascript.
Для того чтобы узнать какой товар (услуга) пользуется наибольшим спросом на данный момент времени применяют различные опросы и тесты.
Как только вы сможете проанализировать результаты тестов и опросов – начинайте рекламировать ваш товар (услугу) – лучше всего для этого подойдет Яндекс.Директ – идеальная площадка для размещения рекламы на просторах Рунета. Ежедневно эту сеть посещает свыше 5 миллионов пользователей в России и других странах СНГ, поэтому частотность показов релевантных объявлений достаточно высокая. А для того чтобы ваша реклама была максимальна эффективна, то лучше всего обратиться по настройке Яндекс.Директа к профессионалам от Direct-UP – dircet-up.ru. Удачного вам бизнеса!
1. Создаем тест на JavaScript:
Скачать готовые html файлы для теста можно по следующей ссылке – скачать!
Тест будет состоять из 3 вопросов, вы можете установить правильный ответ в каждом из вопросов и в зависимости от набранных баллов перенаправить посетителя на разные страницы.
Рассмотрим код первого вопроса:
<div class="quizsection"> <h2>Вопрос #1</h2> <div class="answer"> <input name="q1" value="value2" id="value1" type="radio" checked="checked" /> Value 1 </div> <div class="answer"> <input name="q1" value="value1" id="value2" type="radio" /> Value 2 </div> <div class="answer"> <input name="q1" value="value1" id="value3" type="radio" /> Value 3 </div> <div class="answer"> <input name="q1" value="value1" id="value4" type="radio" /> Value 4 </div> <div class="answer"> <input name="q1" value="value1" id="value5" type="radio" /> Value 5 </div> <div class="answer"> <input name="q1" value="value1" id="value6" type="radio" /> Value 6 </div> </div>
Здесь правильный ответ помечен значением value2, все остальные имеют значение value1.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти сколько же набрано правильных ответов в тесте:
if (value2 == 0) {
// Нет правильных ответов
result = "ocenka2";
}
В принципе, мы проверяем только значение value2 и в зависимости от его количества выставляем оценку.
После того, как мы узнали оценку, то можем перенаправить посетителя на разные странички, в зависимости от результата:
window.location = result + '.html';
Например, перенаправить посетителя на страничку /ocenka2.html.
Вот готовый код файл index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Multiple Choice Quiz with JavaScript</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #2F2556; color: #B9B5C7; font: 14px 'Open Sans', sans-serif;}
.top { padding-right: 20px; background: #261F41; text-align: right; }
a { color: rgba(255,255,255,0.6); text-transform: uppercase; text-decoration: none; line-height: 42px; }
h1 {padding: 50px 0; font-weight: 400; text-align: center;}
.main {margin: 0 auto; max-width: 500px;}
.main .quizsection {margin-bottom: 20px;}
</style>
</head>
<body>
<h1>JavaScript Quiz</h1>
<section class="main">
<form name="quiz" action="javascript:check();" class="quizform">
<div class="quizsection">
<h2>Вопрос #1</h2>
<div class="answer">
<input name="q1" value="value2" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q1" value="value1" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q1" value="value1" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q1" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q1" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q1" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<div class="quizsection">
<h2>Вопрос #2</h2>
<div class="answer">
<input name="q2" value="value1" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q2" value="value2" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q2" value="value1" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q2" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q2" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q2" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<div class="quizsection">
<h2>Вопрос #3</h2>
<div class="answer">
<input name="q3" value="value1" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q3" value="value1" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q3" value="value2" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q3" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q3" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q3" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<input value="Submit" type="submit" /> <input value="Reset" type="reset" />
</form>
</section>
<script type="text/javascript">// <![CDATA[
var result;
function check()
{
var question;
var value1;
var value2;
question = 1;
value1 = 0;
value2 = 0;
result = "";
var choice;
for (question = 1; question <= 3; question++) {
var q = document.forms['quiz'].elements['q'+question];
for (var i = 0; i < q.length; i++) {
if (q[i].checked) {
choice = q[i].value;
}
}
if (choice == "value1") {
value1++;
}
if (choice == "value2") {
value2++;
}
}
if (value2 == 0) {
// Нет правильных ответов
result = "ocenka2";
}
else if (value2 == 1) {
// Один правильный ответ
result = "ocenka3";
}
else if (value2 == 2) {
// Два правильных ответа
result = "ocenka4";
}
else if (value2 == 3) {
// Три правильных ответа
result = "ocenka5";
}
else {
result = "404";
}
window.location = result + '.html';
}
// ]]></script>
</body>
</html>
2. Создаем простой опрос на javaScript:
Скачать готовые html файлы для теста можно по следующей ссылке – скачать!
Рассмотрим код первого вопроса:
<div class="quizsection"> <h2>Вопрос #1</h2> <div class="answer"> <input name="q1" value="value1" id="value1" type="radio" checked="checked" /> Value 1 </div> <div class="answer"> <input name="q1" value="value2" id="value2" type="radio" /> Value 2 </div> <div class="answer"> <input name="q1" value="value3" id="value3" type="radio" /> Value 3 </div> <div class="answer"> <input name="q1" value="value4" id="value4" type="radio" /> Value 4 </div> <div class="answer"> <input name="q1" value="value5" id="value5" type="radio" /> Value 5 </div> <div class="answer"> <input name="q1" value="value6" id="value6" type="radio" /> Value 6 </div> </div>
Затем мы повторяем этот шаблон для каждого вопроса.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти ответ с наибольшим значением:
if (value1 >= value2 && value1 >= value3 && value1 >= value4 && value1 >= value5 && value1 >= value6 && value1 > 0) {
// value1 is the highest
result = "value1";
}
В принципе, мы проверяем, что сумма всех ответов со значением value1 выше суммы других возможных вариантов, а также что она выше 0.
Мы выполняем одинаковую проверку для каждого значения.
После того, как мы знаем, самое высокое значение, мы можем использовать этот результат, например, чтобы перенаправить посетителя на разные url:
window.location = result + '.html';
Так если в большинстве вопросов был выбран ответ под цифрой 1, то result = value1 и соответственно посетитель попадет на страничку value1.html.
Счастливое кодирование!
#Руководства
- 25 июн 2020
-
10
Разбираемся, как создавать тесты и викторины для сайта на ванильном JavaScript.
vlada_maestro / shutterstock
Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Тесты и викторины хороши не только ради проверки знаний, но и как развлекательный контент, который заставляет пользователей дольше оставаться на сайте.
Чтобы их создать, можно воспользоваться сторонними сервисами, но разве это когда-нибудь останавливало хоть одного разработчика? С любовью изобретать велосипеды мы создадим собственный код для встраивания тестов на страницы.
Репозиторий проекта на GitHub
Тест мы поместим в файл quiz.html, чтобы его можно было вставлять с помощью iframe в другие страницы. Давайте сверстаем тест:
<div class="wrapper">
<main class="main">
<div class="quiz__head">
<div class="head__content" id="head">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus odit accusamus, illum quas magni provident odio praesentium commodi sint, porro harum, minus cupiditate architecto culpa aut ex dolore officia.</div>
</div>
<div class="quiz__body">
<div class="buttons">
<div class="buttons__content" id="buttons">
<button class="button">Default button</button><br>
<button class="button button_wrong">Wrong answer</button><br>
<button class="button button_correct">Correct answer</button><br>
<button class="button button_passive">Unclicked button</button><br>
</div>
</div>
<div class="quiz__footer">
<div class="footer__content" id="pages">0 / 0</div>
</div>
</div>
</main>
</div>
Теперь добавим стили:
body, html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 16px;
font-family: helvetica, arial;
background: #f9f9f9;
color: #111;
}
.wrapper
{
width: 100%;
height: 100%;
display: table;
}
.main
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.quiz-frame
{
border: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.quiz__head
{
font-size: 20pt;
margin: 10px;
margin-bottom: 50px;
}
.head__content
{
padding: 5px;
}
.quiz__body
{
margin: 10px;
}
.quiz__footer
{
position: absolute;
bottom: 0;
display: block;
width: 100%;
}
.footer__content
{
padding: 5px;
}
.button
{
border: 0;
border-radius: 10px;
background: #6477EB;
color: #fff;
padding: 10px 25px;
width: 70%;
font-size: 15pt;
display: block;
margin: 2px auto;
cursor: pointer;
}
.button_wrong
{
background: #EB6465;
}
.button_correct
{
background: #5EB97D;
}
.button_passive
{
background: #B3B3B3;
}
В файл index.html добавим iframe, чтобы подключить тест:
<iframe src="quiz.html" width="480" height="720" class="quiz-frame"></iframe>
Смотрим, что получилось:
Наверху находится сам вопрос, под ним — варианты ответов, а в самом низу — прогресс прохождения теста.
Тест будет работать с помощью следующих классов:
- Quiz — сам тест. Содержит все данные, отвечает за переход к следующему вопросу и завершение теста.
- Question — вопрос. Содержит текст вопроса и варианты ответов.
- Answer — ответ. Содержит текст ответа и количество очков.
- Result — результат. Содержит финальный текст и количество очков, которое необходимо для достижения этого результата.
Вот сами классы:
//Класс, который представляет сам тест
class Quiz
{
constructor(type, questions, results)
{
//Тип теста: 1 - классический тест с правильными ответами, 2 - тест без правильных ответов
this.type = type;
//Массив с вопросами
this.questions = questions;
//Массив с возможными результатами
this.results = results;
//Количество набранных очков
this.score = 0;
//Номер результата из массива
this.result = 0;
//Номер текущего вопроса
this.current = 0;
}
Click(index)
{
//Добавляем очки
let value = this.questions[this.current].Click(index);
this.score += value;
let correct = -1;
//Если было добавлено хотя бы одно очко, то считаем, что ответ верный
if(value >= 1)
{
correct = index;
}
else
{
//Иначе ищем, какой ответ может быть правильным
for(let i = 0; i < this.questions[this.current].answers.length; i++)
{
if(this.questions[this.current].answers[i].value >= 1)
{
correct = i;
break;
}
}
}
this.Next();
return correct;
}
//Переход к следующему вопросу
Next()
{
this.current++;
if(this.current >= this.questions.length)
{
this.End();
}
}
//Если вопросы кончились, этот метод проверит, какой результат получил пользователь
End()
{
for(let i = 0; i < this.results.length; i++)
{
if(this.results[i].Check(this.score))
{
this.result = i;
}
}
}
}
//Класс, представляющий вопрос
class Question
{
constructor(text, answers)
{
this.text = text;
this.answers = answers;
}
Click(index)
{
return this.answers[index].value;
}
}
//Класс, представляющий ответ
class Answer
{
constructor(text, value)
{
this.text = text;
this.value = value;
}
}
//Класс, представляющий результат
class Result
{
constructor(text, value)
{
this.text = text;
this.value = value;
}
//Этот метод проверяет, достаточно ли очков набрал пользователь
Check(value)
{
if(this.value <= value)
{
return true;
}
else
{
return false;
}
}
}
Когда классы готовы, можно инстанцировать объекты (создавать экземпляры):
//Массив с результатами
const results =
[
new Result("Вам многому нужно научиться", 0),
new Result("Вы уже неплохо разбираетесь", 2),
new Result("Ваш уровень выше среднего", 4),
new Result("Вы в совершенстве знаете тему", 6)
];
//Массив с вопросами
const questions =
[
new Question("2 + 2 = ",
[
new Answer("2", 0),
new Answer("3", 0),
new Answer("4", 1),
new Answer("0", 0)
])
];
//Сам тест
const quiz = new Quiz(1, questions, results);
Здесь создан только один вопрос, чтобы не отвлекать повторяющимся кодом. Вы можете добавить их столько, сколько вам необходимо.
Остаётся только прописать логику взаимодействия с пользователем:
Update();
//Обновление теста
function Update()
{
//Проверяем, есть ли ещё вопросы
if(quiz.current < quiz.questions.length)
{
//Если есть, меняем вопрос в заголовке
headElem.innerHTML = quiz.questions[quiz.current].text;
//Удаляем старые варианты ответов
buttonsElem.innerHTML = "";
//Создаём кнопки для новых вариантов ответов
for(let i = 0; i < quiz.questions[quiz.current].answers.length; i++)
{
let btn = document.createElement("button");
btn.className = "button";
btn.innerHTML = quiz.questions[quiz.current].answers[i].text;
btn.setAttribute("index", i);
buttonsElem.appendChild(btn);
}
//Выводим номер текущего вопроса
pagesElem.innerHTML = (quiz.current + 1) + " / " + quiz.questions.length;
//Вызываем функцию, которая прикрепит события к новым кнопкам
Init();
}
else
{
//Если это конец, то выводим результат
buttonsElem.innerHTML = "";
headElem.innerHTML = quiz.results[quiz.result].text;
pagesElem.innerHTML = "Очки: " + quiz.score;
}
}
function Init()
{
//Находим все кнопки
let btns = document.getElementsByClassName("button");
for(let i = 0; i < btns.length; i++)
{
//Прикрепляем событие для каждой отдельной кнопки
//При нажатии на кнопку будет вызываться функция Click()
btns[i].addEventListener("click", function (e) { Click(e.target.getAttribute("index")); });
}
}
function Click(index)
{
//Получаем номер правильного ответа
let correct = quiz.Click(index);
//Находим все кнопки
let btns = document.getElementsByClassName("button");
//Делаем кнопки серыми
for(let i = 0; i < btns.length; i++)
{
btns[i].className = "button button_passive";
}
//Если это тест с правильными ответами, то мы подсвечиваем правильный ответ зелёным, а неправильный - красным
if(quiz.type == 1)
{
if(correct >= 0)
{
btns[correct].className = "button button_correct";
}
if(index != correct)
{
btns[index].className = "button button_wrong";
}
}
else
{
//Иначе просто подсвечиваем зелёным ответ пользователя
btns[index].className = "button button_correct";
}
//Ждём секунду и обновляем тест
setTimeout(Update, 1000);
}
Смотрим, что получилось:
Когда пользователь завершит тест, то увидит свой результат:
Как вы могли заметить, это очень простой тест. Он пригодится, чтобы пользователи могли проверить, насколько хорошо они усвоили материал. Ну или просто для веселья — вот несколько тем для развлекательных тестов:
- Кто ты из «Чародеек» (W. I. T. C. H.).
- За кого из «Сверхъестественного» ты выйдешь замуж.
- Твой гороскоп на сегодня.
- На какой факультет ты бы попал в Хогвартсе.
Всё это может быть очень забавным и вовлекающим, если учитывать особенности своей аудитории. Например, для программистов есть интересные тесты на сайте tproger.ru.
Другое дело, если у вас образовательная платформа и результаты теста влияют на итоговую оценку. В этом случае данные о правильных ответах нужно хранить на сервере. Иначе их можно подсмотреть через консоль разработчика:
То же самое касается и таймеров: если вы даёте ограниченное время на прохождение теста, то время начала отсчёта должно храниться на сервере, а не в JS-коде.
С помощью кода из статьи можно создавать сколько угодно тестов. Разве что для каждого придётся дублировать файл app.js, чтобы указать новые вопросы.
Исправить это можно с помощью HTTP-запросов — вопросы будут храниться на сервере и отправляться пользователю в виде JSON. Это очень распространённая практика в веб-разработке, которую нужно знать каждому разработчику.
Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.
Участвовать
Научитесь: Профессия Frontend-разработчик
Узнать больше