1
00:00:00,460 --> 00:00:07,240
In the last lesson, we created the JSON file we're looping through, we're getting the JSON data in

2
00:00:07,240 --> 00:00:13,450
this lesson, we want to loop through the data that gets returned and restructure it into the questions

3
00:00:13,450 --> 00:00:18,010
object so that we have a clear question and then we've got a bunch of answers.

4
00:00:18,160 --> 00:00:27,370
And then these can be set as objects that we can randomize the order of the array so that they're all

5
00:00:27,880 --> 00:00:30,820
listed within that same array.

6
00:00:30,820 --> 00:00:35,620
And then we can randomize where they're going to show up on the screen because we don't want the correct

7
00:00:35,620 --> 00:00:40,930
answer, always showing up in the same spot and we want it to be mixed in with the incorrect answers.

8
00:00:41,260 --> 00:00:45,370
So let's take the data content and using for each.

9
00:00:45,790 --> 00:00:52,960
We're going to loop through each one of the items within data and that will return back an element object.

10
00:00:53,270 --> 00:00:58,180
And with those elements, we're going to be pushing those into the questions.

11
00:00:58,390 --> 00:01:07,090
So let's first structure the content accordingly and we'll output the content into the console of the

12
00:01:07,090 --> 00:01:07,590
element.

13
00:01:07,870 --> 00:01:10,110
So that's going to be just each one of the objects.

14
00:01:10,120 --> 00:01:13,030
So we've got the question object.

15
00:01:13,210 --> 00:01:18,490
And then for each one of the items in the array, we've got a bunch of items as well.

16
00:01:18,500 --> 00:01:21,210
So we're going to add all of those into the array.

17
00:01:21,550 --> 00:01:30,040
So we want to construct temporary array that and this is going to be the holder of the object information

18
00:01:30,040 --> 00:01:32,020
for the correct and the incorrect answers.

19
00:01:32,470 --> 00:01:35,860
We want to loop through the incorrect answer arrays.

20
00:01:36,220 --> 00:01:38,530
So using data and in.

21
00:01:38,980 --> 00:01:39,730
Correct.

22
00:01:41,290 --> 00:01:43,420
Let's do a for each loop.

23
00:01:45,550 --> 00:01:54,500
And these are all the different answers that we have and will add the answers into the temp object.

24
00:01:54,850 --> 00:02:04,410
So first, let's also create a temporary object to hold that information and set it up as an object

25
00:02:04,780 --> 00:02:10,720
so this can be whatever the responses, and this is going to be the content that's contained within

26
00:02:10,720 --> 00:02:11,530
that answer.

27
00:02:11,920 --> 00:02:14,140
And these are all the incorrect ones.

28
00:02:14,650 --> 00:02:20,020
And for the incorrect ones, they're all going to be having a boolean value of false.

29
00:02:20,770 --> 00:02:27,410
And within the temp object, let's push the temp object into the temporary.

30
00:02:28,120 --> 00:02:31,660
So that will set up and structure our array.

31
00:02:31,960 --> 00:02:36,670
And actually this should be element as we're looping through each one of the elements.

32
00:02:36,670 --> 00:02:37,350
Incorrect.

33
00:02:37,750 --> 00:02:44,320
So that creates and updates the temporary array so you can log it out into the console just to check

34
00:02:44,320 --> 00:02:47,980
to see the content that you currently have available there.

35
00:02:48,190 --> 00:02:49,120
So does it twice.

36
00:02:49,120 --> 00:02:55,330
It creates two of these arrays and the arrays have the response and a boolean value for a corrected

37
00:02:55,330 --> 00:02:55,840
incorrect.

38
00:02:56,620 --> 00:02:58,350
Also, let's create another one.

39
00:03:00,160 --> 00:03:02,020
And actually the order doesn't matter.

40
00:03:02,470 --> 00:03:04,720
We're just creating another temporary object.

41
00:03:04,900 --> 00:03:10,430
And this one is going to be whatever we're getting originally for the correct answer.

42
00:03:10,720 --> 00:03:12,010
So from that element.

43
00:03:12,010 --> 00:03:12,580
Correct.

44
00:03:12,970 --> 00:03:15,610
And this value is going to be true.

45
00:03:16,040 --> 00:03:24,190
So that gives us an array that we can randomize that has all of the correct answers and the incorrect

46
00:03:24,190 --> 00:03:25,690
answers, all in one array.

47
00:03:27,340 --> 00:03:33,790
With Boolean values checking and being able to detect if the answer is correct or incorrect, so as

48
00:03:33,790 --> 00:03:41,190
we loop through, we've got the main questions array that we can add the content into.

49
00:03:41,590 --> 00:03:47,800
So as we're looping through each one of those, we can construct our object that we're going to eventually

50
00:03:47,800 --> 00:03:49,180
put into questions.

51
00:03:49,600 --> 00:03:53,740
And this can be another object that we're going to be creating.

52
00:03:53,980 --> 00:03:58,630
And for this one, we can start out with a value for question.

53
00:04:00,550 --> 00:04:07,750
And set that to be whatever the L question is, and we can also put this at the bottom because we're

54
00:04:07,750 --> 00:04:10,600
not concatenating to the temp.

55
00:04:10,600 --> 00:04:12,340
So the temp is just a placeholder.

56
00:04:12,940 --> 00:04:17,470
So let's actually put it at the bottom and then so that we don't have to add it into the object.

57
00:04:17,980 --> 00:04:23,660
And this will just list out all of the options using the temporary array.

58
00:04:24,880 --> 00:04:28,420
So at the end of all of this, within the questions.

59
00:04:28,600 --> 00:04:36,600
So let's take questions and we'll push the main temporary object into the questions.

60
00:04:37,960 --> 00:04:45,850
And so after we complete the loop through and iterating through the content, let's log out what we've

61
00:04:45,850 --> 00:04:46,960
got for questions.

62
00:04:48,160 --> 00:04:51,520
And that actually needs to be within this request.

63
00:04:52,150 --> 00:04:54,610
So we're going to log out what we've got for questions.

64
00:04:54,760 --> 00:05:01,030
And now we should have better structured questions and a comment about the other console messages so

65
00:05:01,030 --> 00:05:06,960
that we only just have the one main console content, which is going to be the newly constructed question.

66
00:05:07,300 --> 00:05:10,270
So we've got a question and we've got a bunch of options.

67
00:05:10,480 --> 00:05:12,460
The options are boolean values.

68
00:05:12,460 --> 00:05:19,690
So there's cracked and I whether it's correct, it's got a boolean value and then the response for the

69
00:05:19,840 --> 00:05:22,300
option for the user to select.

70
00:05:23,200 --> 00:05:29,080
So this was just a restructuring that it's going to be easier to loop through an output, this kind

71
00:05:29,080 --> 00:05:30,880
of content onto the page.

72
00:05:31,060 --> 00:05:38,250
And then once we've constructed the questions, we're ready to start and initiate the quiz for the user.

73
00:05:39,550 --> 00:05:41,490
So that's coming up in the next lesson.

74
00:05:41,620 --> 00:05:46,660
And also, if you ever want to see the output, you can always do a document.

75
00:05:47,440 --> 00:05:49,210
So doing document, right.

76
00:05:50,740 --> 00:05:56,650
And then JSON string of fi, the contents of questions.

77
00:05:58,980 --> 00:06:08,580
So this will provide you JSON object check within a validator and this would come out as valid JSON

78
00:06:08,760 --> 00:06:13,440
and of course, when you do put it into the validator, it's it's a lot easier to read.

79
00:06:13,870 --> 00:06:20,640
And this way we can see how the new construction is that we've got a bunch of options, whatever the

80
00:06:20,640 --> 00:06:22,080
correct answer is true.

81
00:06:22,200 --> 00:06:26,790
So we want to randomize the options array before we present it to the user.

82
00:06:26,940 --> 00:06:34,560
And then we've also got the question information here within the format of the new questions object

83
00:06:34,560 --> 00:06:35,520
that we just created.

84
00:06:36,240 --> 00:06:41,850
So before you move on to the next lesson, loop through the JSON data and get the object details and

85
00:06:41,850 --> 00:06:47,130
then rebuild it into a new object with Boolean values for the correct options.

86
00:06:47,130 --> 00:06:52,770
So either incorrect or correct aren't options and then just whatever the option value is and then check

87
00:06:52,770 --> 00:06:57,090
for the new object, make sure that the structure makes sense within the console.

88
00:06:57,300 --> 00:07:03,690
Also, you can try that within JSON lint or JSON validator and you could be ready to move on to the

89
00:07:03,690 --> 00:07:04,150
next list.

90
00:07:04,150 --> 00:07:08,160
So we're going to start creating the interaction and output on the page for the user.