Как сделать тест на javascript с ответами?
Приветствую вас дорогие друзья! В этом уроке я покажу, как создать простой тест на javascript, в котором будет учитываться время, а также, пользователю будет даваться оценка!
Я уже публиковал урок - как сделать тест, в том уроке можно выбрать ответ, но после выбора вы не узнаете правильный ответ, даже после прохождения всего теста.
Что умеет тест?
В этом уроке мы создадим тест со следующими возможностями:- Можно будет выбрать вариант ответа (1 из 4);
- После выбора ответа, пользователь будет знать - правильно ли он ответил на данный вопрос;
- После прохождения теста, будет выведено количество и процент правильных ответов;
- Будет засекаться время, потраченное на прохождение теста;
- После теста, будет выводиться оценка (плохо, хорошо, отлично).
Хранение данных
В первую очередь нам нужно подумать о том, где мы будет хранить следующие данные:- вопросы
- варианты ответов
- правильные ответы
//Массив вопросов и ответа var data_array = [ ["Сколько сантиметров в метре?","10","1024","100","1000",3], ["Перевод слова: Hello","Как дела?","Привет","Ты","Дом",2], ["Перевод слова: Dog","Собака","Кошка","Дерево","Сосиска",1], ["Сколько месяцев в году?","10","11","12","13",3], ["Перевод слова: Tree","Три","Собака","Дерево","Дом",3], ["Перевод слова: Wall","Стена","Дом","Башня","Война",1], ];Например, для того, чтобы узнать номер правильного ответа для 3 вопроса (слева направо), нужно написать такой код:
data_array[2][5]; //1Т.е. в вопросе, где нужно перевести слово "Dog", правильный ответ стоит на первом месте. Для того, чтобы узнать правильный ответ для 3 вопроса (слева направо), нужно написать такой код:
data_array[2][data_array[2][5]]; //Собака
Конечный вариант кода
Теперь приведу js код целиком и поясню основные моменты:
//Массив вопросов и ответа
var data_array = [
["Сколько сантиметров в метре?","10","1024","100","1000",3],
["Перевод слова: Hello","Как дела?","Привет","Ты","Дом",2],
["Перевод слова: Dog","Собака","Кошка","Дерево","Сосиска",1],
["Сколько месяцев в году?","10","11","12","13",3],
["Перевод слова: Tree","Три","Собака","Дерево","Дом",3],
["Перевод слова: Wall","Стена","Дом","Башня","Война",1],
];
var plus = 0;
var time = 0;
var cur_answer = 0;
var count_answer = data_array.length;
function sec() {
time++;
document.getElementById('time').innerHTML='Затрачено времени: ' + time + ' сек';
}
function check(num){
if(num == 0){
document.getElementById('option1').style.display='block';
document.getElementById('option2').style.display='block';
document.getElementById('option3').style.display='block';
document.getElementById('option4').style.display='block';
document.getElementById('question').style.display='block';
document.getElementById('option1').innerHTML=data_array[cur_answer][1];
document.getElementById('option2').innerHTML=data_array[cur_answer][2];
document.getElementById('option3').innerHTML=data_array[cur_answer][3];
document.getElementById('option4').innerHTML=data_array[cur_answer][4];
document.getElementById('question').innerHTML=data_array[cur_answer][0];
document.getElementById('start').style.display='none';
document.getElementById('end').style.display='inline';
var intervalID = setInterval(sec, 1000);
}else{
if( num == data_array[cur_answer][5]){
plus++;
document.getElementById('result').innerHTML='Верно!';
}else{
document.getElementById('result').innerHTML="Неверно! Правильный ответ: " + data_array[cur_answer][data_array[cur_answer][5]];
}
cur_answer++;
if(cur_answer < count_answer){
document.getElementById('option1').innerHTML=data_array[cur_answer][1];
document.getElementById('option2').innerHTML=data_array[cur_answer][2];
document.getElementById('option3').innerHTML=data_array[cur_answer][3];
document.getElementById('option4').innerHTML=data_array[cur_answer][4];
document.getElementById('question').innerHTML=data_array[cur_answer][0];
}else{
document.getElementById('time').id = 'stop';
document.getElementById('option1').style.display='none';
document.getElementById('option2').style.display='none';
document.getElementById('option3').style.display='none';
document.getElementById('option4').style.display='none';
document.getElementById('question').style.display='none';
document.getElementById('end').style.display='inline';
var percent = Math.round(plus/count_answer*100);
var res = 'Плохо!';
if(percent>70) res = 'Хорошо!';
if(percent==100) res = 'Отлично!';
document.getElementById('result').innerHTML='Правильных ответов: ' + plus + ' из ' + count_answer + ' (' + percent + '%)<br>' + res;
}
}
}
Для учета времени (в секундах) будет использоваться функция - "sec", эта функция увеличивает переменную time на 1 и выводит новое значение на экран.
Для того, чтобы время "шло", используется интервал, установленный на одну секунду - этот интервал и запускает функцию sec (сразу после начала теста).
В переменной "plus" мы храним количество правильных ответов, по умолчанию в этой переменной хранится 0, а при каждом правильном ответе эта переменная увеличивается соответственно на единицу.
Для вычисления процентного показателя (переменная percent) правильных ответов, просто делим кол-во правильных ответ на общее кол-во вопросов и умножаем это значение на 100.
Для определения общего кол-ва вопросов, просто определяем размер массива с данными, это означает, что при добавлении или удалении вопросов из массива, больше ничего изменять не нужно.
Также, после прохождения теста, пользователю выставляется оценка - в зависимости от процентного показателя правильных ответов (percent):
- по умолчанию оценка: плохо!
- если percent больше 80%: хорошо!
- если percent равен 100%: отлично!
Раздел: Программирование
Дата последнего изменения: 2017-01-05 00:11:33
Просмотров: 18312
Читайте также:
Оставить комментарий
* Комментарий: (отменить ответ)
* Ваше имя:
Ваш e-mail:
*
//функция, которая перемешивает массив function mix(mixArray) { var index, valueIndex; for (var i=0; i<=mixArray.length-1; i++) { index = Math.floor(Math.random()*i); valueIndex = mixArray[index]; mixArray[index] = mixArray[i]; mixArray[i] = valueIndex; } return mixArray; } //Здесь идет массив вопросов и ответа mix(data_array); //перемешиваем массивОстальной код остается без изменений.<style> #question img { border: 1px solid #000; } </style>var randomNum = Math.round((Math.random() * (3 - 1) + 1)); if( randomNum == 1 ){ var data_array = [ //Вопросы и ответы для 1-го теста ]; }else if( randomNum == 2 ){ var data_array = [ //Вопросы и ответы для 2-го теста ]; }else{ var data_array = [ //Вопросы и ответы для 3-го теста ]; }body{ font-family:verdana; color:#444; }На это:body{ font-family:verdana; color:#444; background: url(https://sergey-oganesyan.ru/wp-content/uploads/2017/01/test-na-javascript-s-otvetami.jpg); }Где https://sergey-oganesyan.ru/wp-content/uploads/2017/01/test-na-javascript-s-otvetami.jpg - это путь к фотографии, поставьте свой путь.if( num == data_array[cur_answer][5]){Добавьте В итоге в массиве будет храниться кол-во каждого ответа:document.getElementById('moy_block').style.display='none';Показать блок:document.getElementById('moy_block').style.display='block';Где moy_block - id нужного блока.document.getElementById('end').style.display='inline';и вставьте её перед строчкой:document.getElementById('time').id = 'stop';if( document.getElementById("answer").value == data_array[cur_answer][1]){ ... }Это все в общих чертах.if( nextTest ){ //здесь код второго теста.. }document.getElementById('question').innerHTML=data_array[cur_answer][0]На эту:document.getElementById('question').innerHTML=data_array[cur_answer][0] + '<br>' + (cur_answer+1) + '/' + count_answer;И тогда под вопросом будет выводиться номер вопроса вида: 2/6document.getElementById('result').innerHTML="Неверно! Правильный ответ: " + data_array[cur_answer][data_array[cur_answer][5]];Добавьте строчку: И в самом низу - "res" замените на - "res + wrongAnswers" В итоге после теста будут выводиться неверные ответы в виде: Вопрос: Перевод слова: Dog/ Ваш ответ: Кошкаpercent + '%)<br>' + res; if(percent>70){ function timeoutRedirect() { location="https://www.google.ru/"; } setTimeout(timeoutRedirect, 5000); }5000 миллисекунд - это 5 мекундfunction checkTest(){ //массив с правильными ответами //проверка правильного овтета }Это один из вариантов (самый простой), можно всю информацию выводить на страницу с помощью скрипта.if( time > 600 ){ //тогда прекратить тест и вывести оповещение, что время закончилось // 600 - это время в секундах, т.е. 10 минут }time--; if( time == 0 ){ //прекратить тест и вывести оповещение, что время закончилось }