WEBVTT 00:01.480 --> 00:06.780 All right, now it's time to have an overview of the project and demonstrate how this quiz application 00:06.780 --> 00:10.080 actually works and details and see what features it has. 00:10.740 --> 00:15.900 So here we have a nice landing page which tells us test your knowledge below. 00:15.940 --> 00:21.360 There is a nice login form which received the information about first name and last name. 00:21.720 --> 00:24.120 And then we have button for starting the quiz. 00:24.690 --> 00:28.010 So in order to start a quiz, you need to fill up this form. 00:28.470 --> 00:34.650 But if we miss inserting a first name and last name or one of them and then press the button directly, 00:35.010 --> 00:39.900 we'll get a pop up message saying that we have to enter first name and last name. 00:40.620 --> 00:42.720 OK, let's type here something. 00:42.720 --> 00:49.770 For example, Nick do in order to start quiz, we can either press this Starquest button or just press 00:49.770 --> 00:50.490 the andrikienė. 00:51.120 --> 00:56.100 So let's start quiz, press the entry and you see that we have again a pop up box with message. 00:56.640 --> 00:58.170 That quiz is not ready. 00:58.180 --> 01:00.070 Please contact the administrator. 01:00.900 --> 01:03.600 So what does quiz is not already mean. 01:04.320 --> 01:07.170 It means that there is not any question prepared yet. 01:07.950 --> 01:09.590 So someone has to do it. 01:09.600 --> 01:12.550 And in our case it should be done by administrator. 01:13.500 --> 01:17.420 We have defined the first name and last name of Admon as John Smith. 01:18.150 --> 01:20.190 So that's Log-in as admin, right? 01:20.190 --> 01:21.000 John Smith. 01:22.830 --> 01:25.650 Then press the button and here we go. 01:26.190 --> 01:27.860 We've got to an admin panel. 01:28.740 --> 01:35.280 This is the place from where an admin can manage the entire quiz before someone starts passing the quiz. 01:35.280 --> 01:37.680 The questions should be prepared and added. 01:38.520 --> 01:44.370 Here we have a text area for adding question text and also the inputs for adding the proper options 01:44.370 --> 01:45.090 for the question. 01:46.050 --> 01:51.150 In order to add a question, we need to fill up these inputs and then press the button. 01:52.200 --> 01:56.530 As for setting the correct answer, we can manage it using the radio buttons. 01:57.530 --> 02:04.020 OK, as you see, as a default, we have only two inputs, but if we need more options than they will 02:04.020 --> 02:07.500 be appeared automatically when we focus on the last input. 02:08.640 --> 02:12.350 All right, let's add question and see actually how it works. 02:12.840 --> 02:16.850 Let's right at first in the text area, the content of the question, right. 02:16.860 --> 02:18.270 What is JavaScript? 02:21.250 --> 02:33.670 And then put some options here, right, markup language that stylesheet as the second option, that 02:33.670 --> 02:35.770 right programming language. 02:39.020 --> 02:48.650 And then for the last option, right, for example, database, I said last option, but you can add 02:48.650 --> 02:50.130 more options if you want. 02:50.930 --> 02:57.290 We know that JavaScript is a programming language, so set it as a correct answer and check the proper 02:57.290 --> 03:01.100 radio button, then press insert. 03:02.130 --> 03:05.950 And you see that question is added below in question list at the first one. 03:06.720 --> 03:14.490 So when you add the questions they collect and appear in question list below, we are able to see the 03:14.490 --> 03:16.710 content of question, but without options. 03:17.130 --> 03:19.640 And on the right side, we have added button. 03:20.310 --> 03:26.070 This button is created for changing the content of the question, also for changing or adding the other 03:26.070 --> 03:26.600 options. 03:27.180 --> 03:33.060 So if we click on that, we will be able to edit the content of question and the options as well and 03:33.060 --> 03:36.270 even delete the question from that. 03:36.270 --> 03:42.780 After clicking the added button, the question text and the options are inserted to the inputs in working 03:42.780 --> 03:48.930 mode and also above appear to buttons for updating the question and for deleting it as well. 03:49.920 --> 03:52.620 All right, let's change the text here. 03:52.620 --> 04:03.240 Right, James, instead of JavaScript, then set the correct answer, click updates, and you see that 04:03.240 --> 04:07.680 the content of question is updated and we are able to see it in question list. 04:08.990 --> 04:15.440 As you mention, I'm trying not to forget checking the answer, because I will get than the warning 04:15.440 --> 04:21.050 message about it and also we'll get them if I don't protect other rules and conditions as well. 04:22.100 --> 04:22.430 All right. 04:22.430 --> 04:24.470 Let's see what happens if we miss something. 04:25.550 --> 04:31.010 If all the inputs are empty and we are pressing the button, then we get a message which tells us, 04:31.010 --> 04:32.270 please insert question. 04:33.560 --> 04:35.480 So let's write the question here. 04:35.570 --> 04:41.600 For example, is JavaScript dynamically typed language? 04:43.930 --> 04:51.490 Then click again, it's a button and yes, we have another error message saying that we must insert 04:51.490 --> 04:58.000 at least two options if we miss inserting at least two options, that we won't be able to add. 04:58.010 --> 05:02.330 The question at the same will happen if we put here only one option. 05:02.980 --> 05:08.320 So right through that click and we have again, the same message. 05:09.700 --> 05:12.490 OK, if we put two options. 05:14.570 --> 05:20.930 But then, Miss, checking the correct answer again, we will get an error message which tells us that 05:21.290 --> 05:23.350 we may need to check correct answer. 05:24.020 --> 05:30.980 But besides those words, you see the second part of the message or you checked answer without value. 05:31.490 --> 05:38.480 It means that if we put at least two options and then check as a correct answer input without value, 05:38.930 --> 05:41.060 then we will get the same error message. 05:42.320 --> 05:42.770 All right. 05:43.440 --> 05:50.660 The last thing about validation is that if we leave an empty input between options, but of course, 05:50.660 --> 05:57.630 without checking it as a correct answer and press the insert key, we won't get any error message. 05:58.040 --> 06:03.050 The question will be added in the question list and it will have only two options. 06:04.910 --> 06:11.950 All right, we have already prepared the two questions so we can start to decrease in order to do that 06:11.960 --> 06:12.480 at first. 06:12.500 --> 06:15.950 We need to look out from Adam and panel for that. 06:15.950 --> 06:21.020 We have to press logout button and we get on landing page again. 06:21.790 --> 06:29.090 OK, if we want to pass the quiz, we need to enter here any first name and last name except John Smith 06:30.110 --> 06:32.000 and then press start quiz. 06:32.720 --> 06:34.040 Let's do it right again. 06:34.150 --> 06:37.390 Nick Press start quiz. 06:37.400 --> 06:38.390 And here we go. 06:38.780 --> 06:41.200 We get directly to the quiz page. 06:42.530 --> 06:47.440 So on the left side of the page, we have a question and its proper options. 06:48.320 --> 06:55.280 You remember that first question, which we have added in question list was what is JavaScript or JS? 06:56.150 --> 06:57.470 Therefore, we got it here. 06:58.100 --> 07:03.350 On the right side, you can see a nice progress bar which helps us to check our progress. 07:04.310 --> 07:09.170 It shows us the current question number and also the total number of questions. 07:10.100 --> 07:12.130 Because of that, we have only two questions. 07:12.140 --> 07:14.600 It shows us two and below. 07:14.600 --> 07:19.960 This line fills up as we proceed through the questions we have in total. 07:20.060 --> 07:20.900 Two questions. 07:21.380 --> 07:23.510 Therefore, the half of the line is filled. 07:24.470 --> 07:24.950 All right. 07:25.640 --> 07:30.460 Let's check here the correct answer, which is C programming language. 07:31.040 --> 07:32.030 And here we go. 07:32.420 --> 07:39.230 We have the message with the nice little happy smile message tells us that this is a correct answer 07:39.740 --> 07:42.380 and background of it is green. 07:42.380 --> 07:47.960 And at the same time, after checking the answer, the options section is disabled. 07:48.140 --> 07:54.790 So you cannot change the answer or do anything anymore in order to proceed. 07:54.830 --> 07:59.120 Chris, we have here next button, so we need to click on that. 08:00.020 --> 08:00.860 And you see it. 08:00.860 --> 08:05.570 The next question, the progress bar is updated accordingly. 08:05.570 --> 08:11.710 And also the line below is fully filled up in order to see the opposite results. 08:11.720 --> 08:15.310 I mean, to see what happens when the wrong answer is chosen. 08:15.890 --> 08:19.070 We know that JavaScript is a dynamically typed language. 08:19.070 --> 08:22.940 So in order to make the option wrong, let's check false. 08:23.660 --> 08:26.420 And you see again that we got a message. 08:26.750 --> 08:28.640 But in this case, it's different. 08:29.210 --> 08:32.240 Instead of happy, we have kind of a sad one. 08:32.960 --> 08:35.890 The message tells us that this is a wrong answer. 08:36.410 --> 08:37.730 Its background is red. 08:38.090 --> 08:44.330 And also you see that instead of next button we have finished, it means that it was the last question. 08:45.080 --> 08:49.930 If we click on Finish, we will directly get in final result page. 08:51.020 --> 08:53.210 This is the last page of our application. 08:53.510 --> 08:59.200 It's very simple one because it only tells us the name of the user and his or her final score. 09:00.560 --> 09:07.460 So Cui's is finished and in order to get again on the landing page, we need to press on the go button. 09:09.270 --> 09:10.820 All right, perfect. 09:11.610 --> 09:13.140 But it's not over yet. 09:13.680 --> 09:20.610 One of the main features of this application is that the questions and final results are not lost after 09:20.760 --> 09:24.110 loading the page and even after closing the browser. 09:25.140 --> 09:32.760 The reason is that we use local storage of the browser and we save this data in it regarding local storage 09:32.760 --> 09:33.930 and all of this stuff. 09:33.960 --> 09:36.830 We will discuss in depth incoming videos. 09:37.590 --> 09:41.850 So if we reload the page and log in as admin. 09:44.290 --> 09:52.060 We will find again our questions in question list and also in the results section, we'll find final 09:52.060 --> 09:53.680 results of NACDL. 09:54.730 --> 09:58.540 It shows us the name of the user, also the points. 09:59.110 --> 10:01.900 And to the end, we have a delete button. 10:02.770 --> 10:06.030 Using this button, we are able to delete the results on the list. 10:07.090 --> 10:13.490 Besides that, we have clear results and also the oldest buttons just in case, if we want to delete 10:13.490 --> 10:16.140 the entire question list and enter was at least. 10:16.840 --> 10:23.860 But after we click on any of them, we will get a warning message which wants us that we may lose the 10:23.860 --> 10:24.820 entire at least. 10:26.040 --> 10:32.150 All right, let's look out and then try again to Log-in. 10:34.290 --> 10:38.550 Of course, you see the same message saying that quiz is not ready. 10:39.210 --> 10:45.150 That's because we have just cleared the entire question list and the quiz needs to be prepared again 10:45.150 --> 10:46.360 by administrator. 10:47.980 --> 10:50.760 OK, it is perfect, right? 10:51.440 --> 10:56.630 I'm sure that you cannot wait anymore to start building this very nice and great application. 10:57.120 --> 11:02.340 So let's move on to the next video where we will start creating this app step by step.