So we're pulling the sheet data from a Google sheet and using it within our quiz to structure the quiz
questions and load the quiz questions for the interaction for the user.
Now, wouldn't it be nice if we could also generate a report within a CSV file that the user can easily
see how they did on the quiz?
What question was asked, what was the correct answer and what their response was, whether it was right
or wrong?
So that's what we're going to do in this lesson.
We're going to be adding that option into the quiz.
So also going through the quiz and if we finalize the quiz, we already have a report that shows up
what we got right, what we got wrong, and now there's going to be a new option to download the report.
So selecting the download report downloads CSFI file.
So just given a default name of quiz and I've already download a few copies.
So that's what's bracketing three.
So that's downloaded to my computer.
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
just my software on my mark that used to open up CSV files.
So we see as it's opening up, it's got the question, the questions, what I did, what I responded,
whether I was right or wrong and then the correct answer.
So this is all done with JavaScript where we're structuring this and we're adding it for a downloadable
report for the user and that's what we're going to be creating in this lesson.
So let's get to it.
When you finish your quiz, you can select and you can download how you did and download the report.
So we need to add in another option.
So that's adding in a button that's going to allow us to download the report.
So instead of doing the next question, we're going to transform that button and change it into download
the report.
So we're going to show the button, but it's going to say that download the report.
So just as we're generating and updating and outputting the report here, let's update the button text
and we'll show the button as well.
So the BTM and let's update the text content.
And this can just say download a report and whenever it gets clicked, then it's going to download the
report.
So if the value of it is going to be downloaded, report of the button, then we know that we're triggering
the download of the report.
Otherwise we can do the other functionality.
So once we update that, we also need to have the condition that's going to get the current button text
content.
Or, of course, you could always add in a second button as well to make things a little bit easier.
So if it equals download report, then this is where we do the download.
Otherwise we'll just have an else condition and it will check and should function just as expected.
So let's update the button style.
And we're going to set it to be block and I'll update this to have the button style set to none, whatever,
we select the new question.
So let's try the new functionality and just make sure that everything is working as expected.
So now we've got the option to download the report.
So this should trigger the downloading of the report.
Right now, we don't have anything happening.
We can add the console log and we just type in download.
And I'll also update the background of the button as well.
So since we're at the end of the game, let's set the background color and I'll just set it to green
and the button style.
And these are going to override any of the classes that have been set for styling.
And we'll do that text white.
And this, again, is coming from the Google sheet.
So we've got to download the report button when we click it, it's ready to download the report, so
we want to trigger the ability to select the content and it's going to be the content that's sitting
within the player's answers.
And we need to construct some.
Output file for that will create a separate function that's going to handle the download.
So this function will be download a report and whenever it gets triggered, it's going to download whatever
the current report is.
And first, we need to create a file object to hold it.
And then let's also take and create a file name, so this file name.
We can just call it whatever the quiz, we can have a dynamic name if we want as well.
So this is going to be whatever our full name is, and this could be a regular text file.
And actually, let's do a CSFI file, so that way we can open it and we'll have a listing of the question
and whether we got it right or wrong and what our response was.
So we'll create an array.
And for Silsby's, you can use multidimensional array.
So within Holder, that's we're going to create the CSFI contents and setting up the properties of the
file object and creating the properties.
So using type and let's set the type two text C.
S V and set the character set is equal to UTF Dash eight.
That's going to be the character set.
So that will trigger a CSV type file that we're going to be creating.
And now we want to loop through the player's answers just as we did before, or creating the report,
and we want to populate some of the results into the answers.
And for now, we'll just output within the console log.
The result for Element, and then we can structure that afterwards, I'm also going to update the sheet,
so add another sheet and the sheets, I'll remove out some of the questions.
So that way we only have the one question, and while we're testing and debugging, it's going to be
a lot easier to trigger the download of the report.
So let's see what happens when we hit download of the report, so we've got download and we need to
invoke the download report function.
So try that one more time, see, score clearly a console, download the report.
So this is what we have.
We have a correct answer was false.
Correct answer was blue question.
So we've got all of the information that we need in order to generate the report so we can add that
content.
And let's update Holder so we don't actually need it as soon as we can, just create it as a string
and now we're going to construct what we want each one of these to look like.
So as we're building this.
We're going to add to Holder, so we want to separate line for each row of content and we want to get
the element information.
So we do have when we do finish the game, we've got a listing within the download of the report.
So we've got the question within the element.
And I'm going to use the template literals so that we can have quotes around it so that it's structured
properly and then just comma separate out all of the items.
And this is going to be for all of the columns of content that we want, so that was the question and
whatever our response was.
And then let's do one more where we've got whether it was correct or not.
And then whatever the Boulin value was, so this was actually the correct answer.
So that will construct our basic structure and then just do a backslash and in order to indicate a new
line for the content.
And will console log currently what we have for Holder.
So this is going to serve as what we want for our basic file structure.
And notice that they are comma separated, so it's the structure that we're going for in order to add
it to our file.
So adding it in as CSV file, so setting up the file object and to a new file and the file contents
are going to be within an array and adding in the holder content and then whatever we've got for the
file name and then whatever we have for the properties.
So it's going to construct the basic core file.
And then we want to create a hyperlink, so using that document creates elements, let's create an anchor
tag and for the anchor tag, we're going to set the you all for the file download.
So already use your URL globally.
So I'm just using your own one and using the window.
You URL creates object you URL and that we're going to create from the file contents.
So that will create a file object.
And within the link we want to set the attribute of the link, the ref to match whatever we've got for
the URL one.
So that's where we've just created the file object and then within the link set attribute we're going
to set the download attribute and that's going to download the file with the file using the file name.
And then also for the link, we don't want the link to show up on the page, so let's set the visibility
of the link to be hidden so that it's not visible.
Using the document's body append.
Will append the link to the page.
Then we'll take the link and click it with JavaScript, and then lastly, take the document body and
let's remove.
The child of just that newly created link, so that will remove it off the page so we can try it and
what we get for the download of the report, let's open up the CSV file on the computer and just check
to see what we ended up with.
So there's the file opened up an open office and we've got the question and our response the if it was
true or not.
So if we got it correct and then also for what was the correct answer.
So that's opening up within the file.
So we also need to add the headers so the headers would be whatever we want for the first.
Roll so we can set that in Holder as we define Holder, and this will define whatever we want for the
main headers, so let's suppose heads up.
So that would be the question.
Your selection.
And whether you got it correct and then lastly, the correct answer.
So let's try that one more time and open the CSFI and open office.
So now we've got the headers and what we ended up with for the question.
So we've got the question, your selection, correct?
Correct answer.
So we're actually able to now add that additional content into sheet one and play through and see if
we can get the proper all of the questions answered and generate a report.
And this is all done with JavaScript.
So play through it and make sure that it's working as you expect it to be.
And let's download the report and go to the computer and try out and see what we've got for the OpenOffice
CSP file.
There's our questions, all the questions that we generated, if we got it right or wrong and then whatever
the correct answer was, so this way you could provide the user some feedback and generating responses
from what they've got within the questions.
So this is a nice option to have for the user in order to download our report from the questions of
the sheet.
The task for this lesson are to add the option to download the report at the end of the quiz and then
generate the report from the player data array.
So all of the answers that we've gathered the same way as we're producing the report on the page, we
also are generating the report into the CSV file.
So generate the CSFI file and then allow the download.
So create the download link, link the new file that just was created.
Update the attributes of the link, click the link with JavaScript and then remove the link from the
page.
And that will create the download of the report for the quiz results.