Тест с вариантами ответов в HTML коде на JavaScript
В предыдущих уроках ответы на вопросы теста должны были вбиваться в инпуты. В жизни, однако, часто бывают также тексты, в которых можно выбрать один вариант ответа из предложенных. Давайте научимся создавать такие тесты.
Давайте опять начнем с простого варианта, когда вопросы и ответы хранятся в HTML коде, а затем будем постепенно усложнять.
Итак, вот тест с вариантами ответов:
Как вы видите, варианты ответов мы можем выбрать с помощью радио кнопочек. При этом в каждом вопросе радио кнопка с правильным вариантом отмечена атрибутом data-right .
Сделайте так, чтобы при выборе одного из ответов вопроса этот ответ сразу проверялся на правильность.
Модифицируйте ваш код так, чтобы проверка ответов выполнялась по нажатию на кнопку.
Building a Simple Quiz with HTML, CSS and JavaScript
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..
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.
Top comments (7)
hello I copy your quiz model impossible to make it work on my pc the form is empty even by directly copying your code I need your help if possible thank you my email address thank you
i know this is like really late. But you need to make your html outline proper. and you have to link the css page, and name the js file right and the css file right.
Как сделать тест на сайте html
Ссылки
На странице содержатся ссылки на ресурсы, где можно найти разнообразные тесты программы для их обработки.
Пример1
Пример интерактивного теста по теме Электромагнитная индукция.
Выполнить
Выполнить
Итак, вы решили создать собственный интерактивный тест в виде Интернет страницы на основе шаблона. Шаблон содержит 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);
>
<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 (count>0) <!— Вычисление и проверка все ли задания выполнены —>
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++)
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+". Загляните в окно рядом с номером задания. Если ответ правильный, то там (+). Если Вы ошиблись, там (-).";
<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>
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> необходим чтобы ответы начинались с другой строки.
Желаю успехов.
Create a Quiz App with Timer using HTML CSS & JavaScript
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.
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.
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.
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.
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.