1
00:00:01,560 --> 00:00:08,640
So we're pulling the sheet data from a Google sheet and using it within our quiz to structure the quiz

2
00:00:08,640 --> 00:00:11,890
questions and load the quiz questions for the interaction for the user.

3
00:00:12,330 --> 00:00:19,380
Now, wouldn't it be nice if we could also generate a report within a CSV file that the user can easily

4
00:00:19,380 --> 00:00:20,990
see how they did on the quiz?

5
00:00:21,000 --> 00:00:25,620
What question was asked, what was the correct answer and what their response was, whether it was right

6
00:00:25,620 --> 00:00:26,110
or wrong?

7
00:00:26,400 --> 00:00:27,900
So that's what we're going to do in this lesson.

8
00:00:28,100 --> 00:00:31,040
We're going to be adding that option into the quiz.

9
00:00:31,260 --> 00:00:40,080
So also going through the quiz and if we finalize the quiz, we already have a report that shows up

10
00:00:40,290 --> 00:00:44,980
what we got right, what we got wrong, and now there's going to be a new option to download the report.

11
00:00:45,210 --> 00:00:49,080
So selecting the download report downloads CSFI file.

12
00:00:49,290 --> 00:00:53,630
So just given a default name of quiz and I've already download a few copies.

13
00:00:53,640 --> 00:00:55,260
So that's what's bracketing three.

14
00:00:55,860 --> 00:00:58,140
So that's downloaded to my computer.

15
00:00:58,290 --> 00:01:05,370
And if I select that file and I open it up and I'm going to open it with open office software, so it's

16
00:01:05,520 --> 00:01:09,780
just my software on my mark that used to open up CSV files.

17
00:01:10,320 --> 00:01:18,060
So we see as it's opening up, it's got the question, the questions, what I did, what I responded,

18
00:01:18,210 --> 00:01:20,880
whether I was right or wrong and then the correct answer.

19
00:01:20,910 --> 00:01:26,970
So this is all done with JavaScript where we're structuring this and we're adding it for a downloadable

20
00:01:26,970 --> 00:01:30,330
report for the user and that's what we're going to be creating in this lesson.

21
00:01:30,810 --> 00:01:31,620
So let's get to it.

22
00:01:32,260 --> 00:01:38,010
When you finish your quiz, you can select and you can download how you did and download the report.

23
00:01:38,350 --> 00:01:40,410
So we need to add in another option.

24
00:01:40,410 --> 00:01:44,160
So that's adding in a button that's going to allow us to download the report.

25
00:01:44,460 --> 00:01:50,940
So instead of doing the next question, we're going to transform that button and change it into download

26
00:01:50,940 --> 00:01:51,780
the report.

27
00:01:51,780 --> 00:01:55,620
So we're going to show the button, but it's going to say that download the report.

28
00:01:55,890 --> 00:02:04,020
So just as we're generating and updating and outputting the report here, let's update the button text

29
00:02:04,020 --> 00:02:05,490
and we'll show the button as well.

30
00:02:05,910 --> 00:02:10,500
So the BTM and let's update the text content.

31
00:02:13,310 --> 00:02:20,720
And this can just say download a report and whenever it gets clicked, then it's going to download the

32
00:02:20,720 --> 00:02:21,150
report.

33
00:02:21,440 --> 00:02:29,000
So if the value of it is going to be downloaded, report of the button, then we know that we're triggering

34
00:02:29,000 --> 00:02:30,110
the download of the report.

35
00:02:30,230 --> 00:02:32,420
Otherwise we can do the other functionality.

36
00:02:34,970 --> 00:02:45,290
So once we update that, we also need to have the condition that's going to get the current button text

37
00:02:45,290 --> 00:02:45,980
content.

38
00:02:49,400 --> 00:02:56,550
Or, of course, you could always add in a second button as well to make things a little bit easier.

39
00:02:57,680 --> 00:03:02,470
So if it equals download report, then this is where we do the download.

40
00:03:03,470 --> 00:03:10,370
Otherwise we'll just have an else condition and it will check and should function just as expected.

41
00:03:17,780 --> 00:03:20,240
So let's update the button style.

42
00:03:24,330 --> 00:03:33,360
And we're going to set it to be block and I'll update this to have the button style set to none, whatever,

43
00:03:33,360 --> 00:03:34,640
we select the new question.

44
00:03:35,220 --> 00:03:43,090
So let's try the new functionality and just make sure that everything is working as expected.

45
00:03:43,530 --> 00:03:46,190
So now we've got the option to download the report.

46
00:03:46,500 --> 00:03:48,770
So this should trigger the downloading of the report.

47
00:03:48,780 --> 00:03:50,550
Right now, we don't have anything happening.

48
00:03:51,120 --> 00:03:57,690
We can add the console log and we just type in download.

49
00:03:59,340 --> 00:04:02,830
And I'll also update the background of the button as well.

50
00:04:03,300 --> 00:04:13,830
So since we're at the end of the game, let's set the background color and I'll just set it to green

51
00:04:14,700 --> 00:04:16,250
and the button style.

52
00:04:17,700 --> 00:04:22,620
And these are going to override any of the classes that have been set for styling.

53
00:04:24,540 --> 00:04:26,130
And we'll do that text white.

54
00:04:28,020 --> 00:04:31,410
And this, again, is coming from the Google sheet.

55
00:04:37,100 --> 00:04:43,310
So we've got to download the report button when we click it, it's ready to download the report, so

56
00:04:43,310 --> 00:04:49,610
we want to trigger the ability to select the content and it's going to be the content that's sitting

57
00:04:49,610 --> 00:04:51,110
within the player's answers.

58
00:04:51,410 --> 00:04:53,270
And we need to construct some.

59
00:04:54,760 --> 00:05:00,170
Output file for that will create a separate function that's going to handle the download.

60
00:05:01,240 --> 00:05:09,760
So this function will be download a report and whenever it gets triggered, it's going to download whatever

61
00:05:09,760 --> 00:05:10,960
the current report is.

62
00:05:14,840 --> 00:05:18,230
And first, we need to create a file object to hold it.

63
00:05:20,790 --> 00:05:27,690
And then let's also take and create a file name, so this file name.

64
00:05:30,920 --> 00:05:35,990
We can just call it whatever the quiz, we can have a dynamic name if we want as well.

65
00:05:37,820 --> 00:05:41,810
So this is going to be whatever our full name is, and this could be a regular text file.

66
00:05:48,820 --> 00:05:56,140
And actually, let's do a CSFI file, so that way we can open it and we'll have a listing of the question

67
00:05:56,140 --> 00:05:58,750
and whether we got it right or wrong and what our response was.

68
00:05:59,200 --> 00:06:00,850
So we'll create an array.

69
00:06:01,060 --> 00:06:05,500
And for Silsby's, you can use multidimensional array.

70
00:06:05,680 --> 00:06:15,550
So within Holder, that's we're going to create the CSFI contents and setting up the properties of the

71
00:06:15,550 --> 00:06:19,790
file object and creating the properties.

72
00:06:19,810 --> 00:06:24,940
So using type and let's set the type two text C.

73
00:06:24,940 --> 00:06:31,500
S V and set the character set is equal to UTF Dash eight.

74
00:06:32,620 --> 00:06:33,980
That's going to be the character set.

75
00:06:34,240 --> 00:06:39,100
So that will trigger a CSV type file that we're going to be creating.

76
00:06:39,590 --> 00:06:47,650
And now we want to loop through the player's answers just as we did before, or creating the report,

77
00:06:48,820 --> 00:06:52,420
and we want to populate some of the results into the answers.

78
00:06:55,770 --> 00:06:59,310
And for now, we'll just output within the console log.

79
00:07:04,840 --> 00:07:12,730
The result for Element, and then we can structure that afterwards, I'm also going to update the sheet,

80
00:07:13,000 --> 00:07:20,170
so add another sheet and the sheets, I'll remove out some of the questions.

81
00:07:23,600 --> 00:07:27,650
So that way we only have the one question, and while we're testing and debugging, it's going to be

82
00:07:27,650 --> 00:07:30,380
a lot easier to trigger the download of the report.

83
00:07:32,850 --> 00:07:38,640
So let's see what happens when we hit download of the report, so we've got download and we need to

84
00:07:38,640 --> 00:07:40,770
invoke the download report function.

85
00:07:47,490 --> 00:07:53,650
So try that one more time, see, score clearly a console, download the report.

86
00:07:54,090 --> 00:07:55,290
So this is what we have.

87
00:07:55,440 --> 00:07:57,660
We have a correct answer was false.

88
00:07:58,110 --> 00:08:00,020
Correct answer was blue question.

89
00:08:00,180 --> 00:08:06,480
So we've got all of the information that we need in order to generate the report so we can add that

90
00:08:06,480 --> 00:08:07,110
content.

91
00:08:09,040 --> 00:08:14,470
And let's update Holder so we don't actually need it as soon as we can, just create it as a string

92
00:08:16,570 --> 00:08:21,680
and now we're going to construct what we want each one of these to look like.

93
00:08:22,000 --> 00:08:24,280
So as we're building this.

94
00:08:29,220 --> 00:08:36,180
We're going to add to Holder, so we want to separate line for each row of content and we want to get

95
00:08:36,180 --> 00:08:37,650
the element information.

96
00:08:37,650 --> 00:08:46,740
So we do have when we do finish the game, we've got a listing within the download of the report.

97
00:08:47,400 --> 00:08:51,840
So we've got the question within the element.

98
00:08:57,660 --> 00:09:06,720
And I'm going to use the template literals so that we can have quotes around it so that it's structured

99
00:09:06,720 --> 00:09:12,600
properly and then just comma separate out all of the items.

100
00:09:15,730 --> 00:09:22,240
And this is going to be for all of the columns of content that we want, so that was the question and

101
00:09:22,240 --> 00:09:24,130
whatever our response was.

102
00:09:28,000 --> 00:09:33,760
And then let's do one more where we've got whether it was correct or not.

103
00:09:36,780 --> 00:09:41,570
And then whatever the Boulin value was, so this was actually the correct answer.

104
00:09:48,260 --> 00:09:57,710
So that will construct our basic structure and then just do a backslash and in order to indicate a new

105
00:09:57,710 --> 00:09:59,240
line for the content.

106
00:10:02,950 --> 00:10:06,860
And will console log currently what we have for Holder.

107
00:10:08,620 --> 00:10:12,900
So this is going to serve as what we want for our basic file structure.

108
00:10:17,140 --> 00:10:22,330
And notice that they are comma separated, so it's the structure that we're going for in order to add

109
00:10:22,330 --> 00:10:23,510
it to our file.

110
00:10:24,490 --> 00:10:37,270
So adding it in as CSV file, so setting up the file object and to a new file and the file contents

111
00:10:37,270 --> 00:10:46,300
are going to be within an array and adding in the holder content and then whatever we've got for the

112
00:10:46,390 --> 00:10:50,410
file name and then whatever we have for the properties.

113
00:10:50,440 --> 00:10:53,740
So it's going to construct the basic core file.

114
00:10:58,360 --> 00:11:06,820
And then we want to create a hyperlink, so using that document creates elements, let's create an anchor

115
00:11:06,820 --> 00:11:15,180
tag and for the anchor tag, we're going to set the you all for the file download.

116
00:11:15,550 --> 00:11:17,230
So already use your URL globally.

117
00:11:17,230 --> 00:11:20,560
So I'm just using your own one and using the window.

118
00:11:20,980 --> 00:11:30,160
You URL creates object you URL and that we're going to create from the file contents.

119
00:11:30,730 --> 00:11:32,800
So that will create a file object.

120
00:11:33,640 --> 00:11:44,920
And within the link we want to set the attribute of the link, the ref to match whatever we've got for

121
00:11:44,920 --> 00:11:45,910
the URL one.

122
00:11:45,940 --> 00:11:54,550
So that's where we've just created the file object and then within the link set attribute we're going

123
00:11:54,550 --> 00:12:02,470
to set the download attribute and that's going to download the file with the file using the file name.

124
00:12:04,090 --> 00:12:10,420
And then also for the link, we don't want the link to show up on the page, so let's set the visibility

125
00:12:10,600 --> 00:12:14,350
of the link to be hidden so that it's not visible.

126
00:12:16,840 --> 00:12:21,730
Using the document's body append.

127
00:12:24,360 --> 00:12:26,910
Will append the link to the page.

128
00:12:28,150 --> 00:12:36,850
Then we'll take the link and click it with JavaScript, and then lastly, take the document body and

129
00:12:36,850 --> 00:12:38,230
let's remove.

130
00:12:41,440 --> 00:12:51,430
The child of just that newly created link, so that will remove it off the page so we can try it and

131
00:12:51,430 --> 00:12:58,420
what we get for the download of the report, let's open up the CSV file on the computer and just check

132
00:12:58,420 --> 00:12:59,590
to see what we ended up with.

133
00:13:00,910 --> 00:13:11,020
So there's the file opened up an open office and we've got the question and our response the if it was

134
00:13:11,020 --> 00:13:11,840
true or not.

135
00:13:11,860 --> 00:13:17,150
So if we got it correct and then also for what was the correct answer.

136
00:13:17,530 --> 00:13:19,980
So that's opening up within the file.

137
00:13:20,470 --> 00:13:25,300
So we also need to add the headers so the headers would be whatever we want for the first.

138
00:13:26,850 --> 00:13:33,990
Roll so we can set that in Holder as we define Holder, and this will define whatever we want for the

139
00:13:33,990 --> 00:13:37,610
main headers, so let's suppose heads up.

140
00:13:37,620 --> 00:13:39,000
So that would be the question.

141
00:13:41,470 --> 00:13:42,550
Your selection.

142
00:13:45,670 --> 00:13:51,560
And whether you got it correct and then lastly, the correct answer.

143
00:13:53,410 --> 00:14:01,230
So let's try that one more time and open the CSFI and open office.

144
00:14:02,980 --> 00:14:07,740
So now we've got the headers and what we ended up with for the question.

145
00:14:07,750 --> 00:14:10,600
So we've got the question, your selection, correct?

146
00:14:10,600 --> 00:14:11,610
Correct answer.

147
00:14:12,070 --> 00:14:20,320
So we're actually able to now add that additional content into sheet one and play through and see if

148
00:14:20,320 --> 00:14:25,770
we can get the proper all of the questions answered and generate a report.

149
00:14:26,410 --> 00:14:28,360
And this is all done with JavaScript.

150
00:14:29,470 --> 00:14:35,520
So play through it and make sure that it's working as you expect it to be.

151
00:14:36,550 --> 00:14:46,570
And let's download the report and go to the computer and try out and see what we've got for the OpenOffice

152
00:14:47,830 --> 00:14:48,790
CSP file.

153
00:14:51,670 --> 00:14:58,570
There's our questions, all the questions that we generated, if we got it right or wrong and then whatever

154
00:14:58,570 --> 00:15:07,000
the correct answer was, so this way you could provide the user some feedback and generating responses

155
00:15:07,000 --> 00:15:08,630
from what they've got within the questions.

156
00:15:09,670 --> 00:15:17,350
So this is a nice option to have for the user in order to download our report from the questions of

157
00:15:17,350 --> 00:15:17,740
the sheet.

158
00:15:20,700 --> 00:15:26,850
The task for this lesson are to add the option to download the report at the end of the quiz and then

159
00:15:26,910 --> 00:15:30,090
generate the report from the player data array.

160
00:15:30,390 --> 00:15:35,810
So all of the answers that we've gathered the same way as we're producing the report on the page, we

161
00:15:35,820 --> 00:15:38,970
also are generating the report into the CSV file.

162
00:15:39,270 --> 00:15:43,010
So generate the CSFI file and then allow the download.

163
00:15:43,020 --> 00:15:47,370
So create the download link, link the new file that just was created.

164
00:15:47,580 --> 00:15:52,410
Update the attributes of the link, click the link with JavaScript and then remove the link from the

165
00:15:52,410 --> 00:15:52,950
page.

166
00:15:52,950 --> 00:15:56,790
And that will create the download of the report for the quiz results.