In the last lesson, we used JSON file that we created locally in order to get the data for our quiz
project, so we're going to make some updates to it and use a Google sheet, output the sheet content
as JSON, and then pick that up from our Web application.
If you do have a Google account, you can log into your Google account, go over to the drive, create
a new sheet.
So within the drive option, just create a brand new sheet.
And we're going to use this sheet as our quiz data, so we need to have headers so we'll have the questions
or this can just be a single question and have the correct answer and then just the options.
So it will iterate through all of the options we can have, option number one, and possibility of up
to six different options.
So this is our basic structure that we're going to use for the sheet content and let's populate some
content into there.
So using the same questions that we had within our other and the correct answer was blue and then within
the options will have some different color values.
And then purple and the ones that we can just leave some blank as as we're iterating through and we're
building the JavaScript object from the sheet data, then we can account for the blank areas.
So it's out in the other two questions.
And the correct answer, and I'll just use these values, save a little bit of time there, and of course,
you can just change these options to whatever color or whatever options that you want.
So the correct one is going to be yellow.
And let's update red to be green.
And also let's add in.
Another option in this one, so that they don't all have the exact same options, so we can have an
account for more of that dynamic capability of the sheet data.
So now that we've got the sheet object, we want to share the sheet data and be able to pick up the
sheet information.
So this is can be done by using the file for the top menu and then publishing to the web.
So you have an option to create a link of the entire document or just the sheet and you can set it up
and you can create it as a Web page.
So hit the public option.
And then there's also some published content and settings.
So once you publish it, it provides you a Web, you URL and you can use that Web you URL to see the
sheet data.
So this isn't within the JSON format, so we need to select the sheet ID and every Google sheet is going
to have a unique ID.
The easiest way to grab it is from the Web you URL.
So in this case, mine is one H2.
So it's just up here in the top when you do the slash and edit all of those characters in, there are
going to be the sheet ID.
So going back into the JavaScript application and let's go ahead and we'll create up six.
And create a brand new file, calling it up six and then this is where we can track the connection to
the sheet data that Jason sheet data.
So save us up six us and let's add in the variables, so that's tracking the sheet objects I just copied
and pasted whatever the current sheet object was, I'll make this a little bit smaller so it's easier
to to read and see.
And there is a specific you, Earl, that you can use to output it as JSON, so I'm going to copy and
paste it and this is rather long.
So the URL will be.
HTP spreadsheets, Google dot com feeds list, and then this is where we use the ID one, which indicates
the first sheet public values alt Jason and all we can do is we can console log out the euro.
So going into the Web application, there's our You URL.
So if you click that you get this JSON object.
So this is going to be the final you URL that we're outputting to.
So again, very long web URL.
So basically hsp esport its colon colon forward slash slash spreadsheets, dot Google dot com forward
slash feeds, forward slash list.
That's where we got the idee and we're dynamically updating it.
So in case we do change sheets we can easily change the sheet contents.
We've got the one public values alt JSON, so that puts out all of the sheet content with an adjacent
format.
So you can see some of the questions there.
The options, some of the options are blank.
So when we construct our JavaScript object and we want to make it the same as what we were using in
the previous lesson, so we can really easily bring that in instead of using the JSON object.
So that's what we're going to do next.
We're going to make Futch request to this JSON object and then start creating and constructing the JavaScript
object that we need for our application to run all using JavaScript and coming from the Google sheet
data live from the Google sheet data.
So let's close off some of these tabs.
And so now it's up to you.
Go ahead.
Create your own sheet.
And share your sheet feed as a Jason and then just log out the URL and you can click the URL from the
console to make sure that you do have a JSON feed of your sheet data and you should see something similar
to what I see.
The task for this lesson is to create a Google sheet, populate some data into the Google sheet.
Then once you've added in some data, go to file, publish to the web sheet and select publish, hit
the publish button and that will publish the document to the Web.
You can check it out and make sure that it is published to the Web with the you are all that's within
the published the Web popup window and then go back into the sheet, select the ID from the Web URL
and you're going to see that you've got a unique idea at the top of it when you've got your sheet open.
So copy that ID and then also copy the URL.
The spreadsheet start Google dot com forward slash feeds, forge lists with the value and output it
as JSON double check that you can see the JSON object within your web browser and you're going to be
ready to move on to the next lesson where we're going to make and connect to that JSON data and then
construct our JavaScript object to use within the quiz application.
So that's all still coming up next.