WEBVTT 00:00.960 --> 00:06.270 Before we actually start writing the code, we need to get ready for that, I mean, to get familiar 00:06.270 --> 00:07.820 with the files of the project. 00:08.400 --> 00:12.930 So here I have a new folder on my desktop called Project Quiz App. 00:13.380 --> 00:18.390 As we already said, the starting source file is attached to the first lecture of the section. 00:18.900 --> 00:23.580 So before we start coding, you need to download and then write the code step by step with me. 00:24.240 --> 00:27.240 All right, let's open this folder in brackets. 00:28.350 --> 00:34.500 You know, from the previous video that our application consists of four different pages and each of 00:34.500 --> 00:36.570 them has an image as background. 00:36.990 --> 00:39.330 And we had also small small icons. 00:39.780 --> 00:43.200 So all of those images are stored in images folder. 00:43.830 --> 00:49.980 And then we have three files, indexed HTML standards and script OJs. 00:50.670 --> 00:55.020 So as we said, our application consists of four different pages. 00:55.530 --> 01:01.860 And you may think that we have four different HMO files, but all of these sections, XML code is placed 01:01.860 --> 01:03.060 in one document only. 01:03.840 --> 01:08.490 Let's say it opened the index extremophile in browser. 01:09.750 --> 01:15.690 So you can see that all of these parts are placed in one page. 01:17.190 --> 01:17.670 OK. 01:18.960 --> 01:22.350 Let's have a brief overview of index extremophile. 01:23.410 --> 01:31.810 Inside haptics, we have several links, one for style useful, and the rest of them are for different 01:31.810 --> 01:40.570 Google fonts, then in body aliments pages are separated as sections and they start and and of them 01:40.570 --> 01:42.190 is indicated with comments. 01:43.730 --> 01:46.100 First, we have section for a landing page. 01:46.520 --> 01:51.380 It consists of having element with two inputs and button for starting the quiz. 01:52.550 --> 01:55.510 Next, we have Section four admin panel. 01:56.210 --> 01:58.550 It includes three main parts. 01:59.360 --> 02:01.310 First one is for adding questions. 02:01.940 --> 02:04.520 It has multiple inputs and button elements. 02:05.220 --> 02:08.000 Next part is for results list. 02:08.810 --> 02:12.700 And the last one is for inserting questions in question list. 02:14.070 --> 02:22.590 All right, after that, we have Chris section, it has two main parts, one for question and options. 02:23.250 --> 02:26.330 Also in this part, we have container for instant answer. 02:26.730 --> 02:29.910 I mean, message four, correct or wrong answer. 02:30.450 --> 02:33.110 But at this point, this container is hidden. 02:33.120 --> 02:38.430 Using CSFs quiz section also includes Development for Progress Bar. 02:40.050 --> 02:43.760 The last section of Estill document is for final results page. 02:44.370 --> 02:45.570 This one is very simple. 02:45.570 --> 02:51.150 It just includes button for a log out and had an element for showing the final result. 02:51.450 --> 02:54.600 And below, of course, we have a link for our JavaScript file. 02:55.590 --> 03:04.860 OK, let's open Standard Xerces file, it includes hundreds of lines of code, so it is very large file 03:05.490 --> 03:12.740 because I have used pure access without any frameworks like bootstrap material design or any others. 03:13.380 --> 03:17.820 I'm not going to describe which of this line, if you're interested in it, you can have a deep look 03:17.820 --> 03:19.530 at this code and consider it. 03:20.050 --> 03:25.290 Also, I would like to say that if you're not familiar with access or you don't have deep understanding 03:25.290 --> 03:27.150 of it, it's not a problem. 03:27.630 --> 03:31.890 Throughout this project, we are going to use several very simple Sears's properties. 03:32.250 --> 03:34.230 So you won't have any trouble with that. 03:35.790 --> 03:36.210 All right. 03:36.780 --> 03:43.380 As for the JavaScript file, it is completely empty for now because we are going to start writing JavaScript 03:43.380 --> 03:44.970 code right from the beginning. 03:45.690 --> 03:47.960 Before we finish, I want to show you one more thing. 03:48.420 --> 03:54.930 I believe you guessed that we are going to write large JavaScript code because our application has lots 03:54.930 --> 03:57.170 of features and brackets. 03:57.180 --> 04:01.130 Also, other code editors have a nice feature called a mini map. 04:01.560 --> 04:07.820 It has a small view of the entire code and also it helps us to navigate through it. 04:08.700 --> 04:18.210 So if you use brackets and you didn't have install it yet, you can simply go to extension manager and 04:18.210 --> 04:23.490 in available section you can search M.F.. 04:27.410 --> 04:34.850 That install it and use all right, that's it now we're ready to go.