Тест с вариантами ответов в HTML коде на JavaScript
В предыдущих уроках ответы на вопросы теста должны были вбиваться в инпуты. В жизни, однако, часто бывают также тексты, в которых можно выбрать один вариант ответа из предложенных. Давайте научимся создавать такие тесты.
Давайте опять начнем с простого варианта, когда вопросы и ответы хранятся в HTML коде, а затем будем постепенно усложнять.
Итак, вот тест с вариантами ответов:
Как вы видите, варианты ответов мы можем выбрать с помощью радио кнопочек. При этом в каждом вопросе радио кнопка с правильным вариантом отмечена атрибутом data-right .
Сделайте так, чтобы при выборе одного из ответов вопроса этот ответ сразу проверялся на правильность.
Модифицируйте ваш код так, чтобы проверка ответов выполнялась по нажатию на кнопку.
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.
Create a Quiz App using HTML CSS & JavaScript
Hello , Today in this blog you’ll learn How to Create a Quiz App using HTML CSS & JavaScript . Earlier I have shared a blog on Background Image Slider Using Html Css & javascript and now it’s time to Create a Quiz App.
If you are familiar with HTML CSS & JAVASCRIPT then you can easily create this Create a Quiz App using HTML CSS & JavaScript . Those People who are feeling difficult to understand this, don’t worry You can watch a full video tutorial on this Quiz App .
Full Video Tutorial of Background Image Slider
You might like this:
Create a Quiz App using HTML CSS & JavaScript [Source Codes]
To create this Quiz App First, you need to create Three files, HTML File CSS File And JAVASCRIPT File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Quiz App using HTML CSS & JavaScript from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
# CSS CODE
Second, you create an CSS file (style.css) and paste the given codes in your CSS file.
# JS CODE
Last, create a JavaScript file ( script.js ) and paste the given codes in your JavaScript file.
That’s all, now you’ve successfull Quiz App using HTML CSS & JavaScript . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button.
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.