1
00:00:00,210 --> 00:00:06,850
In this lesson, we are going to be using JSON object to drive a dynamic quiz application.

2
00:00:07,170 --> 00:00:13,260
So what I mean by that is if we make some updates to the data within the JSON, it's going to work dynamically

3
00:00:13,260 --> 00:00:13,950
within the quiz.

4
00:00:13,960 --> 00:00:19,850
So they're working independently where we're getting data that's JSON data and structured JSON data.

5
00:00:19,860 --> 00:00:25,170
And then we're iterating through it, looping through it within the JavaScript, creating a JavaScript

6
00:00:25,170 --> 00:00:27,430
object and then rendering out our game.

7
00:00:27,750 --> 00:00:30,000
So we've got our basic quiz.

8
00:00:30,030 --> 00:00:38,070
So when the quiz and the DOM loads, we make a connection to the JSON file and we rebuild the JSON data

9
00:00:38,220 --> 00:00:40,560
into usable JavaScript object.

10
00:00:42,650 --> 00:00:49,490
So we've got the correct answer loaded into correct, we've got the question value here and then we've

11
00:00:49,490 --> 00:00:52,890
got all of the possible options and these are objects.

12
00:00:52,910 --> 00:00:55,550
So these are an array of options.

13
00:00:56,910 --> 00:01:03,150
That we can loop through and we can randomize the order of those options and they each contain the value,

14
00:01:03,160 --> 00:01:07,470
so that's as response and then they also have whatever it is.

15
00:01:07,570 --> 00:01:09,300
That's correct or incorrect.

16
00:01:09,510 --> 00:01:12,120
So the correct is going to be a boolean value.

17
00:01:12,130 --> 00:01:18,480
So whether it's true or false and as you go through them, you're able to see that the correct one,

18
00:01:18,480 --> 00:01:24,090
which is blue, is going to have boolean value of true and then the response is going to be blue.

19
00:01:24,300 --> 00:01:32,300
So this is all driven by the JSON data and it constructs it so that we can use it within our Web application.

20
00:01:32,520 --> 00:01:39,630
So it actually doesn't matter if we have five, if we have four questions, 50 questions, it will all

21
00:01:39,630 --> 00:01:41,490
load dynamically into the quiz.

22
00:01:41,610 --> 00:01:48,240
And the quiz can handle the number of questions and it will automatically calculate out the quiz results

23
00:01:48,390 --> 00:01:50,090
and also provide a score at the end.

24
00:01:50,370 --> 00:01:51,890
So let's go through the application.

25
00:01:51,900 --> 00:01:53,880
So we've got one out of four questions.

26
00:01:54,030 --> 00:01:56,090
So that matches the JSON data.

27
00:01:56,310 --> 00:02:02,250
And our first question value also matches with what we've got within the question data so we can select

28
00:02:02,790 --> 00:02:06,060
from possible options and what is the correct one here.

29
00:02:06,090 --> 00:02:07,550
So this is randomly set.

30
00:02:07,830 --> 00:02:13,260
So even if you go through multiple times with the same question, it's not always going to be in the

31
00:02:13,260 --> 00:02:13,920
same spot.

32
00:02:14,040 --> 00:02:19,650
And that was one of the reasons why we're restructuring the data so that we can have it all within one

33
00:02:19,650 --> 00:02:22,800
array and we can just randomize the order of the array.

34
00:02:23,040 --> 00:02:24,150
So make a selection.

35
00:02:24,150 --> 00:02:25,980
If you get it right, it goes green.

36
00:02:26,280 --> 00:02:28,340
If you get it wrong, it goes red.

37
00:02:28,350 --> 00:02:30,240
You can't make a second selection.

38
00:02:30,510 --> 00:02:32,190
So it tracks it in as a score.

39
00:02:32,550 --> 00:02:35,310
And we have an option to move to the next question.

40
00:02:35,670 --> 00:02:39,980
So we get the feedback and we have an option to move to the next question.

41
00:02:40,290 --> 00:02:41,990
So what color is the grass?

42
00:02:42,150 --> 00:02:43,770
Same marching with the question.

43
00:02:44,280 --> 00:02:48,290
We see the correct answer here and then we've got the options that are incorrect.

44
00:02:48,480 --> 00:02:51,000
So if you select it incorrectly, it goes red.

45
00:02:51,120 --> 00:02:53,400
You don't get any of the score points.

46
00:02:55,200 --> 00:02:57,300
You only score if you get it correct.

47
00:02:58,980 --> 00:03:05,820
And then at the end, once it's gone through all of the options, the button changes to see the score,

48
00:03:06,030 --> 00:03:07,500
we get our total score.

49
00:03:07,650 --> 00:03:12,240
And then we've got the summary of what what we had selected.

50
00:03:12,240 --> 00:03:15,330
And if we got them wrong, then it's going to be red.

51
00:03:15,510 --> 00:03:17,450
If we got it right, it's going to be green.

52
00:03:17,940 --> 00:03:19,680
So we create a basic HTML.

53
00:03:19,680 --> 00:03:21,570
Shell staling is up to you.

54
00:03:21,570 --> 00:03:23,220
I've got some basic styling here.

55
00:03:23,700 --> 00:03:29,820
You might want to update and add to that, to stylize it, to suit your needs and your purposes.

56
00:03:30,300 --> 00:03:36,480
We've got some very limited HTML elements that we're selecting with JavaScript and that create the interaction

57
00:03:36,480 --> 00:03:37,560
for the page.

58
00:03:38,190 --> 00:03:42,300
And then also we have, of course, the JavaScript, which is the application.

59
00:03:42,810 --> 00:03:47,820
So making a selection of the objects that we're going to use.

60
00:03:48,000 --> 00:03:54,030
So the URL, the page elements that we need and then also some variables that are going to be global

61
00:03:54,180 --> 00:03:57,180
that we can access within the functions of the JavaScript code.

62
00:03:57,450 --> 00:04:03,870
Adding in the event listeners to kick off the moving to the next question's also an event listener to

63
00:04:03,870 --> 00:04:05,820
make sure the content has loaded.

64
00:04:06,360 --> 00:04:12,510
We created some helper functions such as capitalize in the text and this was just to for the purposes

65
00:04:12,510 --> 00:04:13,860
of making it look nice.

66
00:04:14,040 --> 00:04:19,800
So sometimes within the JSON data, again, it depends on the data and depends on what the needs are.

67
00:04:20,250 --> 00:04:23,280
But in some cases you might want to capitalize the content.

68
00:04:23,280 --> 00:04:24,540
So it might all be a lower case.

69
00:04:24,720 --> 00:04:28,800
So it's easier to do this with JavaScript and just do a quick capitalization.

70
00:04:29,370 --> 00:04:32,430
So we're ready to just load whatever the new question is.

71
00:04:32,700 --> 00:04:36,570
We've got a mean value for the index of the questions array.

72
00:04:36,780 --> 00:04:40,230
And the questions are, is the one that we build from the adjacent file.

73
00:04:40,830 --> 00:04:46,350
We randomize the order of the options and then as we loop through the options, we add the VAT listeners.

74
00:04:46,350 --> 00:04:48,600
That's going to create the interaction for the user.

75
00:04:48,750 --> 00:04:49,950
We append it to the screen.

76
00:04:49,950 --> 00:04:52,530
So it's visually seen by the user.

77
00:04:53,010 --> 00:04:55,260
We also select the options.

78
00:04:55,830 --> 00:05:00,720
So whenever the options are selected within a function, we've got another one for ending the turn.

79
00:05:00,720 --> 00:05:07,020
We've got one for scoring and then also providing the next button against some more helper functions

80
00:05:07,980 --> 00:05:09,270
for updating the score.

81
00:05:09,510 --> 00:05:15,510
The end turn is the one that Griese out and removes, though that listener from all of the options on

82
00:05:15,510 --> 00:05:21,030
the page so that the user can't click multiple times adding in and showing the next button.

83
00:05:21,030 --> 00:05:26,460
So this function here and then this is the initial function where we're loading the data and we're constructing

84
00:05:26,460 --> 00:05:29,160
the data to suit the needs of the application.

85
00:05:29,400 --> 00:05:34,020
So a lot of times when you get the JSON data, sometimes there's excess data that you might not need

86
00:05:34,020 --> 00:05:34,560
to use.

87
00:05:34,740 --> 00:05:39,180
And also sometimes it's not exactly structured easily for your application.

88
00:05:39,190 --> 00:05:44,610
So one of the best ways to do that is to just loop through the data and build it and structure it the

89
00:05:44,610 --> 00:05:45,360
way that you need it.

90
00:05:45,540 --> 00:05:50,370
And of course, sometimes you do get the JSON data and it's structured exactly how you need it.

91
00:05:50,790 --> 00:05:52,530
So there's a number of ways to do this.

92
00:05:52,530 --> 00:05:55,740
And in this case, I just want to provide an opportunity to.

93
00:05:55,840 --> 00:06:03,040
Practice working with the JSON data and restructuring into other JSON data, so you can always use the

94
00:06:03,040 --> 00:06:10,060
document, right, Jason String Afie to output the string of IDE version of the current JSON object.

95
00:06:10,630 --> 00:06:17,080
So if you want to take that object and put it into a limit to validate the JSON, you can do that as

96
00:06:17,080 --> 00:06:21,490
well and that will just display it onto the screen.

97
00:06:22,960 --> 00:06:29,050
So I'm actually going to comment that out because that's not allowing our application to run and not

98
00:06:29,050 --> 00:06:30,580
showing our start button.

99
00:06:32,680 --> 00:06:37,570
All of the source code is included and I do suggest one of the best ways to learn is to try the code

100
00:06:37,570 --> 00:06:38,320
out for yourself.

101
00:06:38,920 --> 00:06:45,340
We do focus quite a bit on the JSON and the JavaScript object data and manipulating that object data

102
00:06:45,520 --> 00:06:50,890
as that's the core focus of this lesson, is to become more familiar with what you can do with Jason

103
00:06:50,890 --> 00:06:58,720
in JavaScript objects and how you can create interaction and use that data on your Web page at the end

104
00:06:58,720 --> 00:06:59,820
of each lesson.

105
00:06:59,860 --> 00:07:06,370
I do have the lesson challenges, and one of the best ways to learn is to go through the lesson challenges

106
00:07:06,370 --> 00:07:11,200
at the end and build your own version of the application as you go through the lessons if you have any

107
00:07:11,200 --> 00:07:12,190
questions or comments.

108
00:07:12,220 --> 00:07:13,510
I'm always happy to hear from you.

109
00:07:13,720 --> 00:07:16,510
So let's get started building a JavaScript quiz from scratch.