API Quiz Game - JavaScript Project using Google Sheet Data | Laurence Svekis | Skillshare

API Quiz Game - JavaScript Project using Google Sheet Data

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 3m)
    • 1. 0 Dynamic Quiz Introduction

      2:46
    • 2. 1 Web dev Setup

      3:38
    • 3. 2 Setup HTML and CSS

      3:26
    • 4. 3 JavaScript Select Page Elements

      4:10
    • 5. 4 Request spreadsheet data

      5:04
    • 6. 5 JavaScript Elements Create Question

      8:09
    • 7. 6 Check Answer Next Question

      3:26
    • 8. 7 Bug Fixes Updates to Game

      5:44
    • 9. 8 Random Order Array

      2:21
    • 10. 9 Make it look Nice CSS

      4:17
    • 11. 10 Google Web App Data

      8:02
    • 12. 11 Google Web App Data 2

      6:16
    • 13. 12 Dynamic Quiz Conclusion

      5:58

About This Class

b8206016

Explore how to connect to a Google Sheet Data JSON feed and use the data to create a dynamic web quiz game application

Explore how to connect to a Google Sheet Data as a JSON feed and use the data to create a dynamic web quiz game application

Welcome to the course that will show you how you can apply JavaScript to connect to a web API - get JSON data and build a JavaScript Quiz game from scratch using the data coming from a Google Spreadsheet.  As a bonus the course will also show you how you can setup your own spreadsheet webapp using Google Script so that you can customize the content and have your very own version of the questions in your application.

YOU MUST HAVE JAVASCRIPT EXPERIENCE FOR THIS COURSE. 

Source code is included - please try the code as you work through the lessons.

Course Covers applying JavaScript code

How to setup the basic Project shell with HTML and CSS

How to use JavaScript query selector to select page elements as JavaScript objects

Use fetch to connect to the web app URL for data source

JSON data and how to prepare it in JavaScript

Creating a function to display data content in the web application

Logic to approach game design and building of the web application

Next steps for player and using Game data

Debugging and advancing game design

Apply styling for a better looking game

Conclude the game quiz - make it dynamic so driven by the JSON data and flexible to change as the data changes.

Create a Google Script web app using Google Spreadsheet data

Structure JSON from an array object

Connecting sheet data to your web application

Enjoy learning have fun!!!!

Try the code for yourself and explore what you can do with JavaScript

Fast Friendly support to help answer any questions you might have and to help clarify content is always available in the Q&A section.  Taught by an instructor with over 20 years real world experience ready to help you learn more.  Step by step training resources and source code is also included to get you started quickly.

Transcripts

1. 0 Dynamic Quiz Introduction: hi there. And welcome to the course where we're gonna be building out a fun project from scratch using Google spreadsheet data and then out putting into an application quiz for a user. My name is Lawrence, and I'm gonna be instructor for this course that come to you with many years of Web development experience. And I really enjoy working with JavaScript. The upcoming project is gonna take content from a spreadsheet, and I'm also going to show you how I output the content from the spreadsheet in a Web app. It's going to provide a URL where we've got the content presented from the spreadsheet and they were going to take that you are l create ah, Web app that's going to dynamically take that content to generate an interactive Web application. We've got an index page. We've got a little a styling. And of course, the main focus is javascript. So there's the web app. U R l we're picking up the data and they were constructing our fun interactive game with the data coming out of the web application. So this is the project that we're gonna be building in this section. What it's doing is it's loading. All of the questions can see all of the content there that's being loaded within the console log. It tells the user how many questions which question there on that asked the question and presents possible options. So this is randomize, so retirement loads. The order of the options is gonna be different. So there's one right answer. The rest are wrong answers. So what color is the ocean selected? Blue? We see it's correct, moved to the next question. So you click that moved in. The next question question number two out of four. Do you like JavaScript? And I know you like javascript. So the answer to this one, of course, is yes. And you also see that we're presenting some data within the console as we're debugging and building the application. So again, correct, I'm going to say are wrong. One to see it. It does detect it as being wrong, and also one more wrong answer. So once the game is over, it gives us the final score. That tells us the game is over. All of this is what we're going to be covering. How to build an application just like this from scratch using JavaScript. Getting the data from a Google spreadsheet must have prior knowledge of JavaScript in order to use the course content and to be able to apply the JavaScript from the upcoming lessons . JavaScript, HTML and CSS are prerequisites as we are covering applying JavaScript and the functionality of JavaScript connecting to a Jason object and then using Jason Dida in order to create the application. If you have any questions or comments, please let me know within the Q and a section of the course I'd love to hear from you. I know you're excited to get started so it's diverted and start building out this application from scratch. 2. 1 Web dev Setup: hi and welcome in this lesson, I'm going to give you a quick overview of the developer environment and the different applications that are going to be using and resources that I'm going to be using in order to deliver the upcoming lessons. So first of all, you're going to need an editor in order to write the code. The code that I'm gonna be writing is could be written within brackets so as well. If you already have an editor, feel free to use that if you don't have an editor. If you want to try the same one that I'm using, eking over two brackets io download it. It's a free open source, text editors and Dolby product, and it's a pretty good editor. So if you're looking for one to try, go ahead, check that out. Another resource that you're going to need is a Google account, and that's only if you want to be able to create your own spreadsheet because the data that we're generating and the quiz content is coming from a spreadsheet. So we're gonna set up a spreadsheet using Google scripts and output it as an A P I that you can pick up and use and bring into the application to generate our content so that a p I is going to be available from the web of Google script and you can use the one that I've created or you can create your own. And if you want to use the same one so you can see that this is the data that's coming from the Google spreadsheet. So if I update any of the data here, it's gonna also be reflected within the end point of the A p I. So we're gonna be making a fetch request to pick up the data from the spreadsheet. And I'll also show you how to set that up within your Google script in orderto output your own spreadsheet data. So you are gonna need a Google account if you want to create your own spreadsheet or if you want to use mine, you won't need a Google account. And then besides that, we're also gonna be using chrome as the browser of choice. And chrome comes with developer tools that you can open up and inspect, and it opens up the developer console. So we're gonna be communicating information from our application into the browser and using mainly console log. Put that in the browser so we can see what's happening with our data before we're out putting it within the visible page. The structure of the course is going to be predominately with the editor opened on their left hand side. So this is brackets that I've got opened open and I've got a blank folder called Quiz Where we're gonna be Dick creating all of the files are gonna create an index file with the little bit of HTML and a little bit of CSS within the CSS file and then focusing on JavaScript, of course, because I know that's what you're here for, So we're gonna be writing all of the code and generating all of the output using predominantly JavaScript. So we're gonna minimize the HTML and CSS in the upcoming lessons as well. I'm gonna be using brackets live preview. And, of course, you can open up your file your index file in the browser as well, and it will render the code out. So for live preview, you do need an index file. So when I create the index file, I'm gonna open it up as a life preview. And then that's gonna be opened on the right hand side in a minimized window. And we're gonna have our consul opened at the bottom, and all of the code is going to be visible within the display area of the browser. So once year set up and I do suggest that you follow along with the lessons I am going to issue you challenges throughout the lessons. Try the source code source code is also included. Run it within the browser, get familiar with it and get comfortable with what's happening and how the code is being presented. So once you're set up paying, ready to go here, ready to move on to the next lesson where we're going to structure the HTML and add a little bit of CSS, and we're going to dive right into the JavaScript 3. 2 Setup HTML and CSS: this lesson, we're gonna be setting up the index file. So go ahead and create a brand you file in your editor and you can save this as index dot html. So this will be our main file where we're gonna hold all of the index content and all of the HTML content. I'm generating basic html template here, and we'll call it Java script quiz as a title for it and then link out to a style sheet. So I'm gonna also create the style sheet as well. So creating a brain, you file call it styled at CSS, and I'll create one more file where we're gonna host our JavaScript. So I say that to him. This could be a script dot Js or you can call it, however, whatever makes sense for you and linking out to the style sheet where you create a link, make sure you set it to style sheet are yell to style sheet, and the type is gonna be text CSS and the H ref is going to be located at style that CSS so hook up the style sheet and then we're also going to hook up the script as well so script source and we use script jf So it's the script file that we just created and then some basic HTML structure. And you can also of course, create this with JavaScript. But let's create this with HTML, and we're gonna have plenty of opportunity to create some elements in JavaScript. So, first of all, we need an area to communicate some information to the users. So we just give this div a class of message. This is where all of our message information is gonna go next. We're going to create the question area. So this is where the question content is going to go. And then lastly, we need a button that we can move next. And this is our button that's gonna move to the next available item. So now that you set up your basic HTML and actually this is all we need in order to get started, and then we're also gonna play a little bit of CSS. So it's first tried it and do the life preview. So this is going to open up a browser window with a life preview of the index page. So not a whole lot to see here and I'm gonna open up. The consoles were gonna be ready to get information from our code, and that's our basic set up there. Let's apply some styling. I gotta minimize this so we get a little bit more real estate to view. So first of all, let's select that next button and apply a little bit styling to that button. So setting up, maybe some fought size to that and said in the thought size So let's make it one e m and do background color. So I gotta do a backlog color of red that stands out. Give it a with so the with can be but 300 pics and you can customize this as needed. Of course, I can also give it a margin so top and bottom and then left and right, We're gonna just keep it as is at a little bit of padding around the words. So it looks a little bit more like a button, and we're ready to apply some content to that button. So this will also be the I mean button that we can navigate with, and we're gonna add all of the functionality with the JavaScript. So next let's create our question area, and you could actually just put some tests content in there so you can actually see the elements on the page. So there's our button that we've created. So that's it for now that we're going to be applying styling to suggest that one element and you're gonna be ready to move on to the next lesson. And coming up next, of course, is JavaScript. That's when you've been waiting for. 4. 3 JavaScript Select Page Elements: I hope you had an opportunity to set up here. HTML because now it's all javascript and smooth sailing with JavaScript. From now on, the first thing that I usually like to do is select the elements from the page using my JavaScript and ah, you typically use document query selector. And the reason I do that is that this one is probably one of the most flexible ones, and it's a lot like CSS, so you can really easily select your elements and select them as objects in JavaScript, and then you can select them and use them within your coat, also creating a game object. So this is a global object that can hold the game data and then also an output area. So we are gonna have to constantly update that. So let's create a variable in order to hold our output. This is our main game output area, and this is all corresponding with the elements that we created on the page in the last lessons, these air corresponding with the HTML elements and we created one called. So this was for the questions or for the output, another last element that we created so that was the next button and doing the same thing where we do document queries, selector and selecting the element by the class of next. Now we've got all of our elements as objects in JavaScript. So coming up next, we need to add in some functionality. So we've got this next button. It's not doing anything right now, but we have the ability to select it. So when I type in into the Consul now, we can see that we've selected the element properly within the annex object. So we're ready to add some functionality and adding an event listener. So this is gonna be a crucial part of navigating through the game because you need to give the player on ability to move to the next question and also to create the question. So we're going to create a function that's gonna create questions, and this is going to get triggered, and we're gonna be able to move to the next question within the same format. So when we start the game, it's gonna do a fetch request. Pick up all of the data that we need and load all of that data into the JavaScript object, and we're going to display it on the Peach and the create question function is going to be really the core of what we're doing and how we're displaying the content from the game object. And the game object is where we're gonna load and get all of the Jason data from the spreadsheet and building this application dynamically. So that means that if we update any of the spreadsheet content and we're also gonna correspondingly be ableto output it and thats gonna be what we mean by dynamic. When we build applications, we want them to be as flexible as possible. So if we add new questions or removed questions, as long as the structure is the same, the application should be able to handle as many questions as we have loaded within the spreadsheet. And that's the objective of what we're going to be doing in the upcoming lessons. We're gonna make this application dynamic and flexible as possible. So creating that question and when we create the question, what I want is that nxe button applying a style and display and applying the style of displayed none. So what's gonna happen when we click the button? It's going to disappear. And then there's gonna be a bunch of other stuff that we're gonna add in in the upcoming lessons as well, when we add some more additional functionality. So coming up next, we need some data toe work with, because without the data, we have no idea what we want to display on the page. So that's coming up. Next, we're going to make a request to the URL. And this is the girl where we've got the content coming from the spreadsheet. So this is an endpoint, a p I that we can connect to using fetch, bring all the data into the application, is a JavaScript object and then make use of that data within our JavaScript code. So all of that is still yet to come. So go ahead, set up your application, select all of the elements on the page so that their objects in JavaScript add the event listeners. So they have some basic functionality of a next button and then also make sure that create the corresponding function and set the display to none. And that's the functionality that we've got for this lesson. 5. 4 Request spreadsheet data: Welcome back in this. Listen, we're gonna be making the fetch request to Ah, you, Earl in the URL is where the spreadsheet data is gonna be housed. So usually I like to place the URL within the browser just to make sure that we do have our content sitting there because there's nothing worse than making a request to Are you, Earl, that maybe doesn't exist. So setting up a constant variable called out you are l. And then this is where we're gonna post the URL that we're connecting to and then within the fetch request, were using that same u R l value. And we're making a request to that. You are l value and fetch is promised based. So we have that, then included. And then once we have a response, we're gonna return that response object and then use that data that's coming back from that . You are l and I put that in our application. So what we want to do and we get the first response is we want toe format it. We wanna return that data, and this is going to be going into the next promise. So we're gonna have to have another than as well. And this is the way to with Fetch, to return the response as Jason Jason Format. And then lastly, let's do our other promise. And this is the promise once we actually have the data object and it's ready to use. So for usually I do want to make sure that it is working. So I just console, log the data and then look at the structure of the data and see if it's usable. So CR structure of the data is coming back. Status success. And you can also put in a condition there to make sure that you have status success and also to make sure that you have some data within the data array. So we've got actually there. A re data is in data data, so I know it's a little confusing, but it's refresh, and we see that we get the array of objects. We got all of the questions within this type of format, so it's a rebased. So each question has its own object structures has got an answer, which is blue. It's got a bunch of options. Eso blue is also included within the options, so the answer is within the options. And this gives you the ability to randomize this cause it's with an injury, so you can randomize it so they don't always aren't within that same order. And then the question itself as well with this is within an object. So now that we've got the data back now, we can make use of it. And what we're gonna do is we're gonna load it into the game objects. The game object was the one that we created as a global object, and then we're also going to create the question out of it. So now that we know that we're getting the data back, let's create a game object where we've got all of the total. So this is the total off the data that's being returned back. So data data. And because this isn't a generate, we can use length, so it gives us a total. So also, let's track what question were on so we could do that under the game value. And I just comment here that this is the question and also let's ah track score. So set the score 20 So whenever we load the data, that's gonna be initiating and starting out the quiz. So we set the score 20 the game value to zero. And then also, let's put the ary So the data data array into a game object called G R E. And if you want to see that game data or you want to see the data that's coming back, you can use for each and JavaScript in order to select each one of the items that are contained within the worry, and we're not actually going to be using it here. But I'm just doing this for demonstration purposes. Eso Sometimes you might want to fetch the object and then output it directly on the page So you can do that at this point. So it's gonna happen is that once the content loads, we see each one of the questions is being put into the console by this statement. Here we're consul, logging out l. So you can use this if you want, but we are going to be structuring this data because we've placed it within the global game are Ray. So we're able to access that data globally and were able to access it in our question create question function, which we're gonna build in the upcoming lesson. So that's where we're gonna call the create question function. Once we load the data, we create the question with that data, and that's coming up in the next lesson. So go ahead and make the connection to the and point, get the data. And then I put that data within the consul to make sure that you do have a solid connection of the data. And also, I'm gonna be showing in the upcoming lessons how you can create your own endpoint from your own spreadsheet. So if you don't like the questions I'm using, you're gonna be able to create your own endpoint and output it and then simply update the u . R L and get your own data and create your own quiz. So that is all still yet to come in the upcoming lessons 6. 5 JavaScript Elements Create Question: Hey, welcome back in this lesson, we're gonna be creating the question. So this is that function that we created. And this kicks off the creation of the question also with the next button. So it's gonna create it the next question as well. And then what we're doing is we're hiding that. And we're gonna also hide that right off the bat on swelling where you only show that when we are ready for the player to move onto the next question we're gonna do some hiding in showing of that. So first, let's take a look in. We're gonna update the message content so we can see what the value is. And so we have our message, object and text content. So this is always important when you are creating interactions for users, you got to tell them what's going on. So we're gonna mention that question number and because we do have all of these values, we know how many questions are, and we know which question that the users on. So this is the question the users on. So right now they're on zero. But it's actually because arrays are zero based. They're actually going to be on one. So let's police that one in, but we're gonna add so we've got them question number, and this is the question that they're currently on. And this will read number one because this is the first question that they're on. So question is zero. But we could also update that as well. We could set that to number one and have them on first question and also out of they need to know how many questions are out of. And we've got our game total, which is the total number of questions that are available. So once we load the data, we could see question number one out of three. That's the message for the user. We also want to take output and clear any HTML that might currently be within the page. Those are just some double quotes, and that's gonna clear all of that content that test content. We don't actually even need to have it there right in the beginning, we also might want to take a look at what we have contained within the game objects. So this is that global object that's tracking all the game information. So you see, we've got the total, the score and we've got an array which contains all of the data that we want to use. And we also want to random us. So we've got the question data, and we've got the content that's contained within the array. And in order to output that content, let's simplify this and select that array, and we're gonna sucked it according to whatever the game value is so setting up a variable . And so this is going to contain all of the information that we need in order to construct it. So getting from the game array and then using that game value, we can output in. Q. All of the data that we need. So this is all of the content that's related to this particular question. So whatever question we're on, we see we've got that question. What color is the sky? So if you want to get the question, we could do dot question. If we want to see the answer, we can do dot answer for that object value, and then we also have the array of content. So these are all the different options that are available to the user. So let's make some updates to and create some elements for the peach. So first, let's create our main object. So this is where all of the main content will go and using documents and create element, and the element that we want to create is a def. So we did tell you how we can create these elements here. And we could have done this in JavaScript as well. We'll recreate the element, and we're gonna be creating a few different elements. So there is enough practice within the section before that. So creating an elements and this is just a regular div and then main text content and within the mean text content, we're gonna put the question this is within the Q object, and then we're gonna take that output objects. So this is the mean of put area and upend child, and the child that we're gonna penned is me. So this should I put the question whenever it loads. So there we've got the question. What color is the sky? So we've got our question there, and we also need to show some of the options. So it's Duke. You opt. So this was the ary with all of the questions, and we can use for each for this to loop through the array and get all of the content from the worry I'm gonna use elegant. And that's going to represent each one of the items that are available within the array. And if you want to see what's going to get output, you can always console Log that it so you can see as we looked through. So these are all of the options said, being output so blue, green, purple, pink and yellow. So we're ready to create an element. And this case, let's create a span and using same format. We're using document, create element and creating a span and then within the span but slowed our text content and the text content is going to be L. And it's just going to simply be the content of L. And they will take our output and do upend child, and we're gonna penned the span to the output. So I saved that. We get what color is the sky and there's all of our options. Of course, we're gonna have to play some styling to make it look nice and usually within the elements eso All the elements are actually objects, so you can add additional values as needed. So these air going to be hidden values, you're not actually gonna be able to see them, but you can pick them up. So if you wanna know, how is the answer in there? We can do que answer because we have access to that object right now as well. You won't see it being represented on the page, but you're able to pick it up because it's attached to that object. That element objects you can apply hidden content to those elements. You can also add event listeners. So adding an event listener, we're gonna listen for a click on that element. And then whenever it gets clicked, it's gonna invoke a function called Checker. Now let's create that function. So we're looping through. We're adding all of that content and this is all contained within that main function there that we've got. We're creating question, creating another function, and this is picking up that event object. So there's a few ways that you can get the answer back and I'll console Log out that event target as well as Consul log this so there's gonna be a number of ways to do so once we get all of this content, let me clear that. And if I click any one of these, you're going to see that we're able to pull back that element. And once we select the element, the answer is him. So either one of those will provide the answer for us. So any one of them that we're gonna click right now, it's gonna tell us what the answer is. And the answer is blue. So either way that you select it, you can use the e target answer or this answer. And this is referring to the object value of a N S that we set here and we got the Q answer value as we're looping through the elements. And this was provided when we selected that mean question. Object here under Q. So when we go to Q, we got the game array. So this is coming from the global, a rate of game data and we're selecting the particular item using the index value of game, Val. So go ahead, try this one out. And I know this has been a fairly long lesson, but The objective here is to get the data and this is globally stored under the game object so you can select it. You don't have to pass anything into the create question function and pick up that information from the global object game object and then construct your visible part for the page. And, of course, we're gonna apply some styling later on this well, and you're gonna be ready to move on to the next lesson where we're going to continue to build out and update the checker to check to see if the answer is right or wrong and add that functionality in that we're going to be keeping score and telling the user whether they answered it correctly or incorrectly. So that is all still yet to come. 7. 6 Check Answer Next Question: in this lesson. We're gonna work on the checker function, and this is the one that's gonna check to see if we've got the right answer. So what we need to do is we need to get that content that's contained within the element. And we can get that from the event target and out putting the text content of that element . Let's create a variable that's gonna hold the E target. You can console log outs and select text content that's contained there. That way we can see what was clicked, and we can see that if this gets clicked, it's gonna output the blue blue that pink gets clicked. So this is the one that's out putting the content. And then both of these consul messages are actually just a putting the answer. So now we have a way to check what was clicked, and we also know what the answer is so we could do a condition to check to see if the player selected the right value. So we've got it within the text. Content is equal to answer that we provided, and if it ISS and for now what we can do is we can consul log. Correct. And if it's wrong, so just to in else and console log that it's incorrect or wrong, and it will provide that information to the user. Let's clear the console and click yellow. You see, it's wrong. I click blue, you see, it's correct. So you got all of the core functionality that we need and then coming up. We need to increase the game value, and then we also need to show the next button as well. So taking the next style and applying style of display block to it. So it's gonna show that next button and allow that player to move on to the next value. So they make a selection. We tell them that it's wrong. We should be putting a message that it's wrong, and then they could move to the next one. So, do you like JavaScript? Yes, no, don't know. And the answer is yes, that's correct. And we could move to the next one, and then we've got the last question. So there's a bunch of things that we still need to do to troubleshoot and Teoh Bug. Check this eso Also, I wanted to output to the user whether they got it right or wrong. So let's put that information into the texts content of the button, so text content of the button is going to see. And if it's wrong, because remember, you always have to put that content. That player is not gonna be looking the console so say wrong. So apply some styling and all of that is still it coming up, and we've got the score so need to increment the score. If they got it correct, let's do Blue correct click to move to the next question. Wrong click to move to the next question, and then we also need to handle when there aren't any more questions. Wrong move to the next question and we can't read the property in question. Undefined because we don't have a question. Number four. It's so there's only three questions, so there's a bunch of things that we still need to take care of. But this was the core functionality that we needed within the application, and next is just doing some styling and making sure that we can play through the game and that we have a way to complete the game when we run out of questions, so all of that is still yet to come. Go ahead and add into your checker function ability to check if it's correct and wrong and also truck the score. And it put the results of the selection within the tax content. There's quite a few things to come, and that's coming up to the next lesson. 8. 7 Bug Fixes Updates to Game: you're building out a game, you're gonna find your playing it quite often, and that's use it the best way to catch what you need to do next and what things you need to take care of. So obviously the styling is one big thing that we need to do. And we should also take care of this little minor issue here where when we click the wrong answer, we can keep clicking wrong answers until we get the right answer. So you don't really wanna have that within the quiz, because otherwise, people just keep clicking and people will get right. So you should remove the option to have other elements. Clickable. So it's we're going to do now. We're gonna select all of the available answers and using the documents query selector. So they have one thing in common that they all are gonna have A class that we're gonna add in will add the class of answer to them and going up Teoh, where we've got the different elements here. So where we're creating them and within a span object underclass list, let's add not class of answer. So now when you do an inspect on the element. You can see that they've all got the class of answer applied so we can select them in the select answer and that's available within that checker function. Now that we've got them within a node list, we've got select answer and looping through each one of those available elements. We can use function as well, and I use E l E for this one. So to distinguish it from the other E l's that we have here and selecting the E l E objects and class list. And just as we added it, we've got an option to remove it. We can check if it contains a value, and they're all going to contain answer because that's how we were able to select them in the first place. And also let's update the style color of the elements so we'll feed them out so that they're not gonna be as visible so that it will kind of mute mute the color off that element. So also on the one thing that we did want to do is remove the event listener. So what removed event listener does is roofs of that listeners for a better target. So that's gonna basically make it so you can't click it anymore, and it's not gonna do anything even if you click it. And that was the function that we were sending it to. So it's tried it and go back into the console and clear that so I can select yellow and you notice that I can't keep selecting them. And also, another nice effect is that if we get it correct, maybe we want to update that style target as well. So we've got it within the select and just as we did style, color, maybe Want to change the color. If it's correct, two sucked and style color and we'll set the color to be green and correspondingly. If they've selected it wrong, then we're gonna select it and turn it to read. Let's see what happens. So we've got green. That's wrong. See what happens again. Blue, green or green? The other one was red, so that looks pretty good. We've got the event listeners all there, and we've got the score increasing. We've got the classes adding and removing so all of that functionality is there, and we also ran into another bug in the last one where we saw when we were selecting the questions. Eventually we ran out of questions. But we're still trying to build the questions and that's where we need to add in a condition. And this condition is basically going to check to see if the game is over and we're already tracking all of these values globally. So if the Globe game value plus one is greater than in game total, then we know that we have a problem there that we need to end the game. So that will be our ending of the game. Got no more questions to show, so there's nothing to display so that would effectively mean that it's over. And so we should also put out a message to the user and let them know that something has happened and that the game is over and well, put your score Waas. So what? I put the score to the user because we are tracking score and that's the game total. So that was how many questions we asked the user and then also within the output. We're going to do the text content and, well, right, so let's see what happens to try to play through it. It will play some styling next. So correct. Move to the next one. Wrong green correct. Eso score was two out of three game over. All of our functionality is there, and it appears to be working, so there are a few things that we need to still fix. And if you notice that it's always the first answer, that's gonna be correct. So we don't want that. It's a little bit too easy for the player. They'll eventually figure that it so need to randomize where these elements are being appearing. So as we look through the Q options, we need to randomize that. So before we get into that, let's randomize that and that's coming up. Next. We're creative function to randomize the rate and randomize the order of the elements says they're being presented, and then we'll top it off by applying some styling to make it look nice. And then I'll show you how you can create your own version of the spreadsheet data that you can output into a girl that connecting Teoh your application so you can customize and have your own questions. So a lot of stuff still to come go ahead and play through the game, pick up anything that might be causing an error. Make sure that you can play through to the end of the game and make the corrections as needed. You can also apply styling as needed as well. And you could be ready to move on to the next lesson. We're gonna be wrapping up this project. 9. 8 Random Order Array: noticed in the last lesson that all of the questions the first option is always the correct one. That's no good. And we need to update that within the gameplay. So as before, we out put them on the screen. Let's randomize the order very creative function. In order to handle that, there's gonna be a really simple function where it's gonna take in the array object, and it's gonna just we can just call it a re random and we're doing it as a separate function. You could also random order that a rate on the spot, but sometimes these functions are good that you can reuse them. Eso What it's gonna be using is the re sort option. It's gonna be selecting whatever array is passed in and then using that Marie and it's gonna be sorting it with a function. What's returning back? The items within a 0.5 minus math and random. And so what this will do is this is going to randomize the order with sort order and allow us to randomly sort the content of the array and we have the array contained as we're building this within that Q options. So this is the read that we want randomize. So let's pass that into a ray random, and we're going to randomize the Q Opt, hurry and we'll try that and see what happens so safe. And so hopefully now, every time we load, you can see that the order is different or should be different. So you see, now we've got purple. Last time we had green So blue is somewhere in the middle here and we moved to the next question. So no, don't know. Yes. So everything seems to be working and this is a quick way to randomize the order by using the built in method sort method and updating how it's returning the order and do it using math, random and randomize ing the items that are being returned to. Go ahead, try this one out. An ad in ability to sort you're a re randomly and this is a great helper function that you could reuse in a number of ways within different projects and then next play through the game, make sure that everything is working as expected and we're gonna apply some styling in the next lesson. And then I'll show you how you can use Google Act swept to customize your own output and quiz content 10. 9 Make it look Nice CSS: I am gonna move rather quickly through this lesson because this is all a bit styling, and I don't want to focus too much time on the styling itself. So what we need is a few buttons, and we're gonna style the elements the options as buttons. So doing it as an in line block and you could apply your own styling as needed. So fought family. I'm just doing some quick styling here and said aboard a radius that slightly rounded will make the font size fairly large and also margin right so that their right not all right next to each other. And then I'm going back into the JavaScript. As we're constructing these elements, we can add the button close to the elements that will apply that styling property to them. So we're already adding one Kloss there. So let's add another class there. And we could also set a class for the answers as well, so you can see now there quite a bit bigger, and we also maybe wanna have a value there for the answer. So it makes a little bit more space and do another class called answer because we are applying this one as well. Eso for this one. We could do a border. How about we do a red porter and we'll color content read or we're just color block because that stands out or we want color. It'll just leave it black, and then we're gonna update it with stabbing. So it's that answer. It's got a border. And then let's do one for answer. Hover s a nice thing about brackets is that you can actually see as your styling, So this is fairly helpful. I want to do a background color so slight beach color there. Now let's update the border and will make this one red, and we're gonna make this one. So now whenever I hover over them, they're gonna look a little bit more like buttons. And also wanna style this one here, so apply a style. So let's create a new class. It will call this one question so this can contain the actual question content and will apply that class to it because we do. It doesn't really stand. It's We do want it to stand it. So it's do a display and fought size on this one. This is the main question so we really want to pop in. Stand it and we could do a margin bottom so that there's some spacing between that and the possible answers and then going into the JavaScript as we're building that main object, we can add the styling in. At that point, it's instead of applying that, let's select the mean object and will apply a class of question to it and save that and see how that loads. Now we've got the question, and we've got the process Will options below. You also might want apply some styling to the message area as well. So it's another option, and you can see that now Wrong click to move next. Questions Don't know. It would probably need a little bit of a border around there so we can distinguish between the different buttons. So I had said it toe white. Let's update this Teoh show slightly so just do de de dee and now it's up to you. You can add in apply styling as needed. So I've just got some basic styling here that's available, and you probably want to make some updates to it, to make it a little bit more presentable. and you can also remove it. Those test values when it's loading so you could have loading and then with a question as well as test. So now, when uh, loading should sit within here and next should actually be displayed hidden because we're hiding and showing that one as needed. Let's try that. We've got the loading question one out of three. What color is the sky? You got your options there and make this slightly smaller. We've got quite a few adjustments, so we select pink wrong click to move next week late Can't click on any of them. The only option you have is to click the next button, and I'm also gonna update the pointer a swell. So change the cursor to a pointer so that use understands that they can click on these. So we have Our game is complete, and coming up next is an optional one where we're gonna show you how you can take their spreadsheet data and and put it within the U. R. L. And then you can use that within your game project and have your own customized quiz. So it's still coming up the next lesson 11. 10 Google Web App Data: So if you're wondering how you can take your spreadsheet data and output it within a Web app and get a girl just like the one that we've been using in the project, this lesson is for you, cause I'm gonna show you how to do that. So open up your Web browser and you will need to have a Google account for this because you're gonna have to log into your Google account in order to get started and create Europe's script. Because this is Kyle Bass stand. It is just like JavaScript. It's based on JavaScript 1.6, and it is Cloud based to go to script dot google dot com, and this will open up your start page to be will start scripting. And there's also home for slash start, and this is going to create a script within your Google drive. There's two ways to create Skips so you can go into an existing spreadsheet and go to Tools script editor. So that's going to create a balance script, and going over to here and doing a new project is gonna do a standalone script and the reason that I prefer stand alone for this project is that it gives us more flexibility if we want toe, for instance, change spreadsheets. You can do it really quickly and easily as you've got a standalone script and all you have to do is update the i. D. So let me show you how to do that. So creating a new project, it's gonna open up the web interface. So this is the up script editor and make it a little bit bigger. And all of the code is sitting within code dot gs. So I'm gonna minimize that screen, give your project title So this congest be sheet data or do you want to call it? And this is how it's gonna be represented within your Google. The applications that you've often authorized Teoh run within your Google account. So you have to be logged into Google as well. And also, I'm gonna compact that controls. So you've got all of your typical things like the file where you can create new files and you can create brand new spreadsheets here as well. So if you want to create a new spreadsheet, you don't have to go outside of the script. Enter and this is cloud basic and share the content. There's typical things where you edit view and the run one is gonna be one of the important ones because this allows you to run the various functions and these air just common functions that you create. And then you can run the functions within the Google script interface. And then there's also published. So this is where we're deploying it as a Web app. So this is the important one. And under help, there's more documentation and getting started and a whole bunch of really cool things. So now that you've got your Google editor up and running, we're gonna be using one of the default functions, and that's do get so you're going to need do get in order to run your Web app. So this is the function that it's gonna look for within your code in order to run the Web app content. So let's select some variables and we're gonna have our spreadsheet, so just call it S s. And there's a bunch of built in methods with classes in each one of those. So then that we're using is spreadsheet app. And then when you press the dot, you're going to get this drop down menu of all the different functions and methods that are available for this and what we want to do is open by I. D. So it's expecting one parameter, which is on I d. Every single Google document will have its own unique I d. And the idea is available within that you are l so you can go over to the spreadsheet. So also, go ahead, create a spreadsheet with the same columns where you've got the question, the answer, and then the various options that you want to have for the user so you can do is many columns as you want here because we're gonna be picking up this information from the spreadsheet. So create your spreadsheet first with some dummy content in there, grab the I d of the spreadsheet that you just created and go back into your Google script and paste that i d. S. It's a long number so easier to copy and peace that next we have selected the spreadsheet object within the S s variable and the next thing that we want to do is select our sheet. And now that we've got the spreadsheet content within the sheet. And we know with Google spreadsheets we can have any number of sheets. So what we want to do is we want simply select the first sheet. You could also select sheets by names as well. So using that get sheets method, we're going to get on a rate of all the sheets, and we want to simply select the first sheet or the first available sheet in order to get her data. So it's going to default to whatever she is first in order of the taps. So we also want to get that content that's contained in there, so set up another variable and using the sheet object that we just created, then get data and data range. And then it's got another method where we get the values that are contained within it. So this is gonna output all of the values, and it's still a console log. It's got a function called longer lock, where you can log your information into the view logs there. So let's try to run. This function will run it on debug. It's gonna ask us to accept permissions because rocks issing a spreadsheet so you can go through and accept the permissions. If you don't accept the permissions, your script won't run because the script has to run as you. So now when you go into view logs, you can see that you've got all of the content from the spreadsheet contained within that Rose object. So that's exactly what we want, because we'll take that rose content and we want to get all the questions out of it. So under response, object. And so we've got question answer options as the headers. So we don't want to pick up the headers for the questions we want to start at Roll number two of data. So anything boat, Not including row number one. So what we want to do. And if you're familiar with JavaScript slice, we can slice starting at row number one, and that's going to return back. Just the questions. Let's also set up a placeholder response array where when we looked through all of the rows of content, we can structure our array as needed, and the do get function needs to return some content so it uses a service called Content Content service. This another built him class and we want to create text output, and it's expecting string content here. So you can. Right now you can tape it anything, just to see how that works. And next, let's publish it as a Web app. So they're going to the publish topic, deployed as a Web app, and then this is where you can applies some project version information. Execute the app. So generally keep the executing the app as you. If you said it to the user accessing the app, they're gonna have to log in in order to access it. And they might not have permissions to your spreadsheet and then also who has access to the app. So this is also really important because you're accessing it from your Web application with the A P I without any authentication. So basically, you want anyone to be able to go to the URL and see the content that's being output from your spreadsheet and then go to deploy and you're going to see that you get a current Web app. You are. Oh, so this is the web up that I was using the Web app you Earl, and there's also developer version where you contest it so you can see the latest code being output there. And then when you commit the changes, you create the exit. Beautiful version. So right now all we have is that hello being output, and that's coming from the absolute. So once you set up this, make sure that you can connect to the spreadsheet, make sure you can see the data from the spreadsheet and then also make sure that you've got some content to output for the Web app and do a deployed Web published and get your your l and then coming up next, I'm gonna show you how you can set it up and structure your data. So it's in a Jason format being returned back in output within that girl. That's still to come in the next lesson, part two. 12. 11 Google Web App Data 2: did you get your Web app up and running? And did you get the output of hello so much you're happy with just that Put of Hello? You can You need to watch this lesson. We're gonna structure the data that were out putting that. We're gonna put it as Jason Data so that we can use it within our A p I. So we want to do. We've got all of the content within questions. We're gonna loop through all of that and using for each loop we're gonna set var and can use info and question is going to get each one of those items that are contained within that a rate and allow us to use those. And also gonna have set up a blank variable object that we can use to load our content into so temp. And first we need a question. So the question is contained in info zero the first item within that very next. We've got temp answer because it's l. A Wray based. And as we saw within the view, there were reviewed out the content from the log. You can see that everything was within a rebased and the temp off is going to be a little bit different because this is an array in its own. And that's what we're expecting. Teoh Cibak within that returned content. So this is another loop where we loop through the array of content so variable and starting X at one, since we'll start at the depending on which role. So I want to start at column number one. So again, thinking as JavaScript with the rays with zero base, won't start at the first answer because we want this to be part of the options so that we can randomize it and we can use that value so looping through while X is less than in full length and incorrect X. This is a regular four loop that you would expect in JavaScript and we're looping through each one of the items contained there. And also we want to make sure that the content contained within Info X has a length before we drop it into our object. If it has no length and we don't want to display it, so I don't want any blank content, and if it does have a length, then we're setting up our attempt up and pushing. So JavaScript push and expecting an object there. And that's the info X value that we're gonna push in there. So it's going to construct that array. And also we know that we were returning back that worry so looping through and looping through all of those options that are available. And once we finished that, we can take our rest. So this is that a re we're gonna have our response data and push the temp object into the response data. And then lastly, we're gonna create our output and using Jason Stratify we're gonna string if I that object . So we've got the value where we have the status that was being returned back. So that was part of that object that we're going to construct so status. And this is Jason says I think, as a Jason object is status success. And this is a JavaScript objects in JavaScript converting to Jason. So we don't actually quote you can add the courts if you want, And then the data that were sending back and noticed that this is the same data that we're picking up within the response query when we're querying for that. So that returns back our Jason object. So next we just need to output that Jason object so we can put it. And we also want to make sure that it is seen as a Jason object. So go into the developer version and refresh the script agency. The content is being output within a Jason format because it is stratified. And within the execute herbal, you're not going to see anything quite yet. Eso One other thing that I did want to add just to make sure that it's understood that this is a mean of Jason mean so we can set the mean type and again using that content service class, we have an option to set me type. And the mean type that we're setting is Jason. So you've got quite a few options there, and it's actually not gonna affect any of the output. But it's always good to have that within the headers, so that it's understood that this is Jason content. So we've got the output and we're ready to publish it. So this is a new version and we just call that And what this is doing is this is updating the execute herbal to be ableto output the content. So now that we've got it within our output, you can copy that you are l and bring it into your JavaScript application. So I got to simply go in here. I'm going to replace that you are l with the fresh new one that we've created and checked the application just to make sure that it is still up and running and working. And when we refresh. And just to show you that it is coming from that new new source, let's update, and we'll update it to what color is the ocean and go back into the app, refresh it, and then we see what color is the ocean. So it's getting that data, and we've got our Web up working. We've hooked it to the spreadsheet, and then also it's out putting in our application. So it's dynamically adjusting and updating so one other tests before we conclude. And that's to see if we can add in some additional questions. We should be able to update the spreadsheet data and have that reflected within our application. So let's try that, and we should have a different number of questions. So what color Is the ocean correct? Yes. Do you like JavaScript? Of course you do. Grass is gonna be read. So I get one wrong and grass is blue or green. And I got three out of four deep over. So the application as well, dynamically adjust if we had additional questions in our spreadsheet. So everything is working as expected, coming up next, we're gonna do conclusion quick code review and run over some of the code and functionality . So that's still to come in the next lesson. 13. 12 Dynamic Quiz Conclusion: congratulations on making it to the end of the course. This is the part of the section where I'm going to run through and run through some of the code that we've covered in the earlier lessons and do quick overview. So we started by creating our HTML and then also a little bit of styling. And then we added styling later on. In addition to the original styling, we first we selected all of the elements, created our main game object, added an event listener and also connected the URL. So this girl is coming from a Google spreadsheet Web app. So all of the data is sitting within a spreadsheet that next we did a connection of fetch connection to the U. R L and returned back the data within a Jason format and using that data, we could calculate all of the data, and we also got the length of the data for the game. So this basically told us how many questions would be available, and we looked through the questions, but we're not really doing anything with that function, but we are holding that game array data within the game so that we can use it in the other functions. And next we create a question. So this is the visual question for the user. We hide the next button. That's the default action that we take. And we also check to see if we're out of questions. And if we are in the game is over. We provide the user the score that they scored within the questions of the quiz. We tell them how many questions that were and how many that scored correct. And if the game is not over, then we let them know what question they are on and how many questions they have left. We clear the output content and then we construct some dibs we created. If adding in some adding in text content as well as adding a class to it and then depending it to the main output part as well, we randomize the options and then build it. The options in a span present them on the page and also add in an event listener so that if it gets clicked, then we run a function called checker, adding in text content. So this is the output. This is the option that we have and then also adding in a few classes and then hiding the answer in the background of the element object. This is our random array function, and another main function that we had was the Checker function. So what any one of the options gets click? The first thing that we want to do is disable all the options so that the user can't click them anymore. So if you click one, it's gonna disabled ability to click any of the other ones. And we kind of agree The moat mutant, the mote with updating the color, we removed the class of answer so that they're no longer clickable, adding in and removing the event Lister that we had added it. Then we set the target element into on variable called SCL, where you can see the text content. We check the text content against the answer, and if it's correct that we put in the consul correct, which is not visible to the user. But more importantly, we output within the button whether the user gotta correct or whether they got it wrong. If they got it correct, then we make it green. If they got it wrong, we make it red and we increase the to the next question and then we hide the next button and then that's all we're doing within the code. And this gives us all of the functionality we need in order to run the game. And I also do suggest that you try the game out several times just to make sure that it's playing through as needed, make adjustments as well as needed. The girl that we use, we make sure we check that we've got it visible within the You are else, so that if we can access it within the Web browser, we can also access it within our fetch request, so we don't have any issues with that. And then we concluded the course section by building out Google Web app, and this was getting content from a spreadsheet, selecting the sheet that we wanted to use for the data, getting all of the data into an object called Rose and then slicing it and returning back all of the rows where we don't have the header. So the first rule has the header, so it's so we're getting additional rows, so we basically sliced the rose object and returned back. Questions object, and this is the one that we wanted to use. We looked through all of the available questions constructed. Our JavaScript are object are Jason Object lived through all of the possible answers as well, and then created a response array. And then that array is what we're out putting. So we're strong defying that Jason object and out putting it into the text content output of the Web and then publishing the Web apps who deployed as a Web app, which gives us a Web Buehrle. It actually gives us to your girls so it gives us a testing version and then the live version in the live version. Onley updates when you update the project version. So while you're developing, try the test version. You could also linked to the test version, but it's not advisable. The best way to go is to make sure that you're linking to the execute herbal version, so make sure at the end of the URL it's got execute herbal. If you have any questions or comments, please let me know within the Q and a section I'd love to hear from you and also one of the objectives as well before we conclude, is to make the application dynamic so we can adjust the number of questions, and I just some of the options that we're providing as options for the questions. And that's not gonna affect the application itself so fully dynamic. And as we adjust these values the application itself. When the user loads that the data will adjust and using that data, it adjusts how it presents the application to the user. And I hope you had an opportunity to try the code out for yourself. I'll see you in the next one.