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 a 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 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 now.
You can use this Quiz and also you can add more questions on 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 to the understand 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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.
Note: I’ve commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you’re going to copy codes then uncomment the commented lines after pasting the following codes.
Создание учебного теста с ответами при помощи HTML и JavaScript
В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.
Содержание статьи.
Создание простого теста
Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.
Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.
Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.
Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:
- 4*12 +7 =
- 7-8*2 =
- 34*2 + 17 =
Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.
Сначала создадим HTML код задач:
<p>4*12 + 7 = <input type=”text” ><p>7-8*2 = <input type=”text” ><p>34*2 + 17 = <input type=”text” ><button onclick=”proverit();”>Проверить</button>
<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.
Теперь нужно посчитать процент правильных ответов.
В этой строке мы указываем сколько всего задач в учебном тесте. Если вы добавили еще, то нужно исправить эту цифру.
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» ></p>
<p>7-8*2 = <input type=»text» ></p>
<p>34*2 + 17 = <input type=»text» ></p>
<button onclick=»proverit();»>Проверить</button>
<div ></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качиваний: 5840)
Ниже вы можете скачать расширенную версию теста.
Разделение вопросов теста. Добавление кнопки «Следующий вопрос»
Нам нужно сделать так, чтобы единовременно отображался только один вопрос. А для переключения к следующему вопросу нужно было нажать кнопку «Следующий вопрос».
Для этого добавим каждый вопрос и поле для ответа в отдельные блоки div. Причем для второго и третьего вопросов добавим параметр «display:none» для того, чтобы их скрыть. Для первого указываем параметр «display:block». И для каждого блока подпишем номера вопросов.
Также добавим код кнопки «Следующий вопрос».
Далее на нужно добавить функцию перемещения между вопросами теста.
В первом условии мы проверяем отображается ли второй вопрос, если да, то его нужно скрыть и отобразить третий вопрос и также нужно скрыть саму кнопку переключения между вопросами теста и показать кнопку «Проверить» так как этот вопрос последний. Во втором условии мы проверяем отображается ли первый вопрос теста. Если это так, то нужно его скрыть и показать второй вопрос.
В итоге наш тест выглядит так:
Но в этом варианте добавить новые вопросы в тест будет уже сложнее.
Перенос вопросов и ответов теста в отдельный файл JаvaScript
Для того, чтобы заменить вопросы было проще нужно перенести их и ответы в отдельный файл. Тогда не придется искать эти данные в основном файле. Если вы не программист, то такой поиск будет непростым. Итак мы создаем новый файл data.js и подключаем его к основному html файлу нашего теста. Далее добавляем в него несколько переменных с вопросами и несколько с ответами (с ответами мы переносим из основного файла).
Дальше вместо текста вопросов создаем блоки span.
И прописываем jаvascript код постановки текста вопросов из переменных после загрузки страницы.
Вот и все. Теперь, для того, чтобы заменить текст вопросов теста и ответы к нему вам потребуется лишь отредактировать файл data.js. Аналогично добавим название теста:
Шифрование ответов теста
В программе учебного теста, которая у нас получилась есть один недочет. Если учащийся откроет файл «data.js», то он увидит не только тексты вопросов, но и ответы. Поэтому нам нужно зашифровать ответы, чтобы учащийся не смог узнать их.
Для этого используем функцию kodirov. Она выглядит следующим образом:
Аналогично шифруем второй и третий вопросы. После шифрования содержимое файла data.js выглядит следующим образом:
В результате программа проверяет зашифрованные ответы и учащийся не может узнать ответы к вопросам учебного теста.
Вывод результата ответа на каждый вопрос
Наш учебный тест выводит общий результат в процентах. Сделаем так, чтобы еще выводились результаты по каждому вопросу в отдельности. Таким образом можно будет проводить более подробный анализ выполнения теста учащимся.
Для этого нужно модифицировать функцию проверки ответов учащегося.
В результате модификации данной функции выводится верно ли ответил учащийся, а также выводится на экран его ответ. Учитель может сравнить ответ ученика с правильным, а также проанализировать учебную работу.
Таким образом, мы получили полноценный учебный тест, который можно использовать в своей учебной деятельности. Для большего удобства я переместил файл data.js в отдельную папку. Отредактировать файл data.js можно в любом текстовом редакторе, например, «Блокнот».
После последних модификаций, увеличения шрифтов, добавления цвета к ответам получаем следующий полный исходный код html файла:
Результат выполнения теста с ошибкой в третьей задаче показан на рисунке ниже. Также я добавил функцию округления процента выполнения задач «toFixed()».
Ниже вы можете скачать данную программу.
Скачать шаблон теста
Скачать файл: Шаблон теста на 3 вопроса [1.85 Kb] (cкачиваний: 1813)
Скачать файл: Шаблон теста на 10 вопросов [3.61 Kb] (cкачиваний: 2278)
Скачать файл: Шаблон теста на 15 вопросов [3.82 Kb] (cкачиваний: 1961)
Добавление изображений к вопросам теста
Естественно, что кл многим вопросам при создании теста необходимо добавление изображений. Часто нужно добавить изображение вместо текста вопроса. Реализуем данную возможность также через файл data.js. Я буду редактировать самый большой тест из 15 вопросов. Итак, я для каждого вопроса добавлю отдельную переменную и указываю в ней: если изображение есть, то — «да», иначе — «нет».
Обращаю ваше внимание на то, что текст вопроса в случае наличия изображения, я полностью убрал.
Но вы также можете добавить и изображение и текст вопроса.
В данном случае я указал, что в вопросах под номерами 1,4,7 и 15 будут изображения. Поэтому я должен добавить в папку «data» эти изображение. Их названия должны соответствовать (в т.ч. и содержательно) номерам вопросов: «01.jpg», «04.jpg», «07.jpg» и «15.jpg».
В программный код основного файла я добавил условия, которые проверяют переменные. Если есть ли изображение, то одно подгружается к вопросу теста. Пример такого кода для первого вопроса:
Скачать шаблон теста с изображениями
Перемешиваем вопросы теста в случайном порядке
В случае, когда тест выполняются сразу несколькими учениками в классе, которые сидят рядом я сталкивался с проблемой, когда одни смотрят, что же отвечают другие, сидящие рядом. Это первая причина перемешивания вопросов. Второй является просто создание большого количества вариантов одного и того же теста.
Данные манипуляции несколько усложняют программу. Для этого потребуется создать массив, поместить в него все вопросы, изображения и ответы, а затем перемешать все в случайном порядке.
При этом файл «data.js» я не редактировал.
Так выглядит переменная,в которую помещен массив:
Далее нужно перемешать элементы массива и подставить данные в ячейки для вопросов. Для перемешивания я использую функцию
В файл data.js я добавляю новую переменную, в которой можно указать — перемешивать вопросы или нет («да» или «нет»).
Пример вывода вопроса в файле html:
Загрузить тест с возможностью перемешивания вопросов вы можете по ссылке ниже.
Так как вопросы перемешиваются, то в результат работы программы я добавил вывод не только ответов учащегося, но и текста вопросов. Все это я объединил в одну таблицу.
Скачать шаблон теста с изображениями
Визуальное оформление программы тестирования
Все основные функции в тест добавлены. Теперь перейдем к оформлению программы учебного теста. Для сокращения времени работ по оформлению я использую бесплатную библиотеку bootstrap.
Добавлены классы библиотеки и заменены практические все свойства по оформлению как вопросов теста, так и таблицы вывода результата.
Итак, сам тест выглядит следующим образом:
А таблица ответов выглядит следующим образом:
Обратите внимание, что при помощи библиотеки bootstrap я также добавил шкалу, отображающую процентное соотношение верно выполненных задач теста.
Итак, последнюю версию (на данный момент) уже визуально оформленного теста вы можете скачать по ссылке ниже.
[banner_in_full_story_top_stat]
Скачать полную версию шаблона теста
Если вам понравился данный материал, пожалуйста, порекомендуйте его в социальных сетях друзьям или оставьте свой комментарий.
Видео «Как заменить вопросы в шаблоне теста». Не забудьте включить субтитры в видео, в них размещены подсказки.
Как сделать тест html css js
for (let question of questions) let div = document.createElement(‘div’);
test.appendChild(div);
let p = document.createElement(‘p’);
p.innerHTML = question.text;
div.appendChild(p);
let input = document.createElement(‘input’);
input.dataset.right = question.right;
div.appendChild(input);
>
let test = document.querySelector(‘#test’);
// CSS
.correct border: 2px solid green;
>
.incorrect border: 2px solid red;
>
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.