Тест – набор заданий, вопросов после выполнения, которых можно оценить знания человека исходя из результатов теста. Часто применяется в учебных заведениях, образовательных сайтов и прочее.
Сегодня хочу поделиться с вами, тестом на JavaScript. Тест прост в использовании, имеет таймер, подсчитывает количество правильных ответов и в процентом соотношении. JavaScript — язык веб-программирования, который обрабатывается на стороне клиента. Подобный тест можно запускать даже на компьютере не подключенного к сети Интернет.
Преимущество теста на JavaScript заключается в том, что при его использовании не затрачивается время на перезагрузку страницы как при тесте на PHP, но и есть недостаток. JavaScript может быть отключен в браузере, и произвести запуск каких-либо сценариев будет невозможно.
Тест на JavaScript позволяет использовать такие элементы HTML как: радиокнопка (выбор одного ответа), чекбоксы (выбор нескольких ответов), выпадающий список, текстовое поле (самостоятельный ввод ответа).
Для демонстрации работы с каждым элементом был разработан тест, с использованием всех объектов форм языка HTML.
Скрипт состоит из трех функций:
timer () – функция контроля работы запущенного таймера;
startTest () – функция старта теста, скрывает html блоки, запускает таймер;
stopTest () – функция подсчета количества правильных ответов и останавливает таймер.
Каждый элемент формы (кроме текстового поля) проверяется следующим образом:
//Первый вопрос (переключатели или выпадающий список)
for(i=0; i<d.getElementsByName("q_имя_объекта_формы ").length; i++){
if(d.getElementsByName("q_имя_объекта_формы")[i].checked) {
if(i==1){
rez+=2; //какой правильный чекбокс, начинается с 0
count++;
}
}
}
Каждый размещенный объект формы, размещенный на HTML странице должен иметь имя name=”q_номер вопроса”.
<div id="blockQuest"> Вопрос 1 <input type="radio" name="q1" value="1" />ответ1 <input type="radio" name="q1" value="2" />ответ2 <input type="radio" name="q1" value="3" />ответ3 </div>
Для проверки ответа необходимо в функцию поместить следующий код:
Для вопроса с одним ответом (переключатели)
//Первый вопрос (переключатели)
for(i=0; i<d.getElementsByName("q_имя_объекта_формы ").length; i++){
if(d.getElementsByName("q_имя_объекта_формы ")[i].checked) {
if(i==номер_правильного_ответа){
rez+=2; //кол-во баллов за правильный ответ
count++; // +1 к общему количеству правильных ответов
} //какой правильный чекбокс, начинается с 0
}
}
Номер правильного ответа для элементов radiobutton, checkbox, выпадающего списка содержаться в переменной value=””. Первый ответ начинается с 0.
Для checkbox формы используется аналогичный код, но при добавлении нескольких правильных ответов следует добавить еще одно условие с номером правильного ответа.
//Второй вопрос (чекбоксы)
for(i=0; i<d.getElementsByName("q_имя_объекта_формы ").length; i++){
if(d.getElementsByName("q_имя_объекта_формы ")[i].checked) {
if(i==0){rez+=2; count++;} //проверка для первого ответа – 0
if(i==2){rez+=2; count++;} //проверка для третього ответа - 2
}
}
Текстовое поле проверяется следующим образом:
//Четвертый вопрос (текстовая строка)
if(d.getElementsByName("q_имя_объекта_формы")[0].value.search("текст")!=-1){rez+=2; count++;}
Правильное слово должно быть заранее задано в «текст».
Для работы с тестом необходимы знания HTML. Настройка параметров теста осуществляется в начале скрипта:
var d=document, rez=0,
time='60', //общее время
ball=2, //балл за вопрос
vsego=5, //всего вопросов
В тесте можно изменить количество секунд, которое дается на выполнение теста, переменная time, балл, который будет выставляться за правильный ответ – необходим для расчета процентного соотношения–переменная ball и количество вопросов в тесте, переменная vsego;
