WEBVTT

00:00.000 --> 00:07.000
Understanding events with an interactivity

00:07.000 --> 00:15.000
In this video, we will learn how to create a quiz application, understand types of events.

00:15.000 --> 00:22.000
In this video, we will create a simple quiz using HTML and JavaScript, focusing on event handling,

00:22.000 --> 00:27.000
writing the code.

00:27.000 --> 00:32.000
We will add our first question.

00:32.000 --> 00:37.000
Here input tag creates an input field for user entry.

00:37.000 --> 00:42.000
Type equals text, attribute, allows text input.

00:42.000 --> 00:44.000
ID equals question 1.

00:44.000 --> 00:49.000
Unique identifier used to retrieve the value in JavaScript.

00:49.000 --> 00:53.000
We will add our second question.

00:53.000 --> 00:58.000
We will add our third question.

00:58.000 --> 01:04.000
We will add a submit button, understanding events.

01:04.000 --> 01:10.000
The button tag creates a clickable button, on click event, on click equals check.

01:10.000 --> 01:15.000
Answers is an event attribute that calls the check answers function when the button is clicked.

01:15.000 --> 01:20.000
The other type of event used in JS are on change event.

01:20.000 --> 01:29.000
Triggered when an input value changes, example, selecting from a drop down or typing in a field.

01:29.000 --> 01:33.000
On mouse over and on mouse out events.

01:33.000 --> 01:38.000
On mouse over. Triggered when the mouse enters an element.

01:38.000 --> 01:42.000
On mouse out. Triggered when the mouse leaves an element.

01:42.000 --> 01:46.000
On key down event.

01:46.000 --> 01:50.000
Triggered when a key is pressed on the keyboard.

01:50.000 --> 01:52.000
On load event.

01:52.000 --> 01:55.000
Executes when the web page has fully loaded.

01:55.000 --> 01:59.000
Adding a paragraph element with an ID for reference.

01:59.000 --> 02:02.000
Add an external JS.

02:02.000 --> 02:05.000
We have to add an external JS file.

02:05.000 --> 02:11.000
Click on the plus sign to add a new JS file.

02:11.000 --> 02:25.000
We are storing the correct answers.

02:25.000 --> 02:39.000
Here getting the answers entered by the user using their input field IDs.

02:39.000 --> 02:45.000
Here we loop through answers and compare them with correct answers.

02:45.000 --> 02:48.000
Now this will help to display results.

02:48.000 --> 02:51.000
Let's add the link in HTML.

02:51.000 --> 02:53.000
Testing.

02:53.000 --> 02:54.000
The code.

02:54.000 --> 02:57.000
Download the file and open it.

02:57.000 --> 02:59.000
We can see the question displayed on the screen.

02:59.000 --> 03:01.000
Let's type the answer.

03:01.000 --> 03:05.000
We will purposely add one wrong answer to see if the score changes.

03:05.000 --> 03:07.000
Click on submit answer.

03:07.000 --> 03:09.000
We have scored two out of three.

03:09.000 --> 03:12.000
Let's change the wrong answer and see the score.

03:12.000 --> 03:15.000
I have entered the correct answer.

03:15.000 --> 03:16.000
Let's submit.

03:16.000 --> 03:18.000
We have scored three out of three.

03:18.000 --> 03:22.000
We have successfully executed the code.

03:22.000 --> 03:28.000
You can enhance its appearance and layout by adding CSS to it.