 Welcome to Code.org App Lab, making a simple quiz app with me, Tokyo EdTech. So let's go ahead and get started. We are going to be using Code.org, a great website if you haven't seen it before. Check it out. You can log in, create an account. I did another video on this, so you might want to check that one out first. So assuming that you're all logged in, you're going to go to Create and you'll see App Lab. So I'm going to go ahead and click App Lab and make a new project. So today what we're doing is doing a very simple quiz. So Tokyo EdTech's quiz. And so what we're going to do is I'm going to try and make this as simple as possible. Let's see if I can make that any bigger. Might be helpful. There we go. So what I'm going to do is I'm going to be making a very simple quiz app and I'm going to have multiple screens with multiple questions. So when you start doing a project like this, what you want to do is you want to start from your design. So I'm going to go ahead and click on my first screen and I'm going to change the ID. I'm going to call this Main. And this will be basically my first screen. So what I usually put here is I put something like a label and this might be label title and I'll call this Music Quiz App. Now I'm going to spend a bunch of time trying to make this look super-duper pretty. We'll just leave it the way it is and go ahead and make that 30 and drag this over and make it so we can see the whole thing. So I'm going to make a simple Music Quiz App and so I'm on my main screen. I've got a title and I'm just going to make a little start button here. So I'm going to call this Button Start and the text is going to say Start. And again, I could put a bunch of other stuff, some images, make it a little bit nicer but for now I just want to do this to show you how the coding side of it works. So I'm going to go ahead and hit Run and so this is what my app looks like. I'm going to hit Start. Nothing happens, of course. So let's go ahead and take care of that. Well actually first, I'm on screen main. So what I need to do is I need to make another screen for my first question. So I'm going to go to Screen and I just drag that over and let it go. So I'm going to call this Screen Q1. So this is going to be my first question. So I'm going to go back up to Label and I'm going to call this LBL Q1. It kind of makes sense. So I'm going to say who is the singer of the cure? Yes, I'm a big fan of the cure so I'm going to go ahead and put that here. Again, I can go ahead and make this a little bigger. I can go ahead and play with the font size. I'm going to go ahead and try to make that, let's say 20. And I can also do text line. I usually like to do things centered like that. So now what I'm going to do here is I'm going to make two buttons. Now you can have two, three, four, five buttons. It doesn't matter. Okay. So I'm going to call this button Q1A1. So that's button, question one, answer one. And the text is going to be, let's see what would be a good choice. It's a Bob mold, it's mode. Okay. And then I'm kind of a lazy person. So I'm going to go ahead and click this and I'm going to duplicate it. And what you can do is you can get your size and fonts and stuff set up the way you want it to. And so I'm going to call this button Q1A2. And the text of this one is going to be Robert Smith, which is the correct answer. So now I've got two questions that I want to be using. Now I'm going to go ahead and just make one more screen. Actually, I was going to go ahead and copy this screen. So I'm going to go ahead and duplicate it. Okay. Now it says screen three. So I'm going to call this SCRQ2. Because this is going to be my question two. Oops, that's the wrong thing. I think I'm clicked on this. I'm going to go back and click on the screen. I'm going to call it SCRQ2. Okay. And it is not letting me do this. Question two. Why is that? So let's go ahead and question screen Q1. That should be SCRQ1. Well, let me do that. Let's see here. Okay. That's fine. I'm going to go to SCRQ2. I don't know why it doesn't let me do that. Screen Q2. That's fine. Maybe it has to be a certain length to Q1. Very weird. I don't know why it's doing that. But anyway, normally I do SCR. I don't know why it's not letting me do that here. So let me try this one more time. SCR. It does not like Q2QQ. Huh. The numbers. Somehow the numbers aren't registering quite correctly. Screen Q2. Well, I'm not going to fight it. I'm just going to go ahead and go with it. And go screen Q1, screen Q2. Now again, I'm using names that make sense. Okay. Actually, that's how I'm going to try one more thing, because that really bothers me. Question 2. It lets me do that. I guess it's the length. So SCR. I'll say question 1. Okay. It does let me do that. So it has something to do with the length. Okay. So I'm going to go to question 2. Now notice how this label is now LBL, label 3. So I'm going to call this label Q2. Sorry. Label Q2. So this is question 2 label. And this is going to be button question 2, answer 1. And this is going to be button question 2, answer 2. And I'm going to go ahead and make a different question here. And so who's the singer of the cure? Let's see here. Who is the... I like singers. I like music. Who is the singer of... I can't do the Beatles because there's four singers. So let's think here. It's a good man. Who is the... Okay. I'll say who's the guitarist. Guitarist of Pink Floyd. And so we'll go ahead and we're going to make this one is going to be... I think that's the right answer. Well, this is David Gilmore. And for this one, we'll go ahead and make this... There's another... I'll say Eric Clapton. Obviously for the wrong answer. Okay. So what I'll do is I'll go ahead and program this now and just program it so that it works a little bit. So just to reiterate, to review, we've got our main screen. We've got screen question 1. We've got screen question 2. And so we've got different questions. Everything's labeled properly. I'm going to go over to my code part of my app. And if you didn't watch my other video on how to do this or you haven't watched the tutorial video from code.org I would strongly recommend you do that before we get into this. So what I'm going to do is I'm going to pull this over and what I'm going to do is on button start. So notice how my cursor is on top of this. See it says BTN start. So I'm just going to hit the drop down and I'm going to find button start. So when I click button start, what I want to do is I want to go to the next screen. So if you scroll down in the UI controls, you'll see set screen. So I want to go to screen question 1. Okay, so let's go ahead and run it and test it. I'm going to hit start and it takes me to this screen. So now I'm going to do basically the same thing. I'm going to go on event. Okay, button question 1, A1. I can also do button on event, button Q1, A2. So now if I go to that screen, let's take a look at that real quick. So Robert Smith is the correct answer. Bob Moll is an incorrect answer. But it doesn't really matter at this point. So no matter which one I do, I want to actually go to the next screen. I'm not keeping track of the score quite yet. Okay, so I'm going to go ahead and run it. Start. So I hit Bob Moll. It takes me to who's the guitarist at Pink Floyd. Okay, so I'm going to reset that. Now, I'm going to do the same thing for that next page. Okay, so I'm going to go to on event. So on ID. So it's going to be button question 2, answer 1. Same thing. I'm going to be setting screen. Now we don't actually have a next screen actually. So I guess I have to leave that out for now. So let's go ahead and think about this. So what I want to do is I want to make a music quiz app. And when I hit start, it's going to take me to the first question. And it's going to take me to the second question. And I'm going to have one more screen that tells me the result. So I'm going to go back to design. And I'm going to go ahead and drag screen in again. Creates a new screen. I'm going to call this SCR result. And then I can pull in a label. And I'm going to call this label result title. And we'll call this results. And let's see here. We're going to make this pretty big. And then I'm going to go ahead and make one more label. And I'm going to call that actual label score. And the text, I'm going to leave it like this score. I'll leave it like that, zero for now. And we'll talk about how we're going to change that in a second. So I'm going to go ahead and make that 20. And again, I can center it. I can do all kinds of different things with the appearance of it. So I've got screen result and the score. So now I want to go back to my code at this point. So when I click button, question 2, A1, I'm going to go to that final result screen. When I click on button, question 2, answer 2, I'm going to do, oops, wrong one. That should be on event. I'm going to do button, question 2, answer 2. Same thing, set screen, screen result. Again, I'm just going to go ahead and test it, make sure it's working. So start, Bob Moll. Okay, so this part is working. I should do, I should check start, oops, I should run it. Start, Bob Moll, David Gilmore, results, good. Start, oops, run. Start, Robert Smith, Eric Clapton, results. So far, so good. It's doing exactly what we wanted to do. Now, here's the trick. What I need to do is I need to create a variable. And a variable is like x, it just stores a value. So I'm going to go ahead and put there, and I'm going to make this the first line of my program. I'm going to call this score. And when I start the program, the score is zero. So I'm going to go back to my design. And if you remember, question 1, button Q1A2 is the correct answer. And for question 2, Q2A1 is the answer. So watch what I do here. So when I click button 1, question A2, that's the correct answer, I do the following. Notice I'm not choosing there, I'm just choosing x equals. And before I set the screen, I'm going to say score equals, type score plus 1. What that does is it adds 1 to the score. Can I copy that now? And then over here, for the second question, A1 was the correct answer. So I'm going to go ahead and do the same thing. It's got to be before you set the screen. So score equals score plus 1. Now, here's the trick. Here's a bit of a trick for you. Let's see. Let me just make sure. I want to try one thing. I don't know if this is possible, so I should check this before. I just want to check one thing. And if it works, I'll tell you. If it doesn't, I'll just ignore it. Screen result, oops. Screen result. No. Okay, we can't do that. Okay, so let's get rid of that. So what I'm going to do, now this is my last correct. This is my last question. So what I want to do is on my last question only, I'm going to do the following. Set property, label, score. I'm going to set the text to the following. Score, space, plus score. See, I might have to scroll out a little bit here. Okay, so it came out, quote, score, below space here, plus score. I'm going to do the same thing for the other last question. Again, there are other better ways to do this, but if you're a beginner, this is a good way to do it that's understandable. Okay, same thing. I'm going to do score, colon, space, and after the quotation mark, score. This is a hit tab. The program automatically switches it to block program. Now, again, I think I showed this in the other video. You can switch this into JavaScript and just type code if you'd like to. It's probably easier for beginners to do it this way. Okay, so let me go ahead and run this and make sure it works. So quiz app. So who is the singer of the cure, Robert Smith? Who is the guitarist of Pink Floyd, David Gilmore? And you can see my score is two. Let's go ahead and reset it. I'm going to test it and run it again. I'm going to test it and get the wrong answers. Bob Mullen, Eric Clapton, and you can see my score is zero. Now, I should test correct answer and wrong answer, and should get one. And there's also one other path there, wrong answer and correct answer, score one. So that is how you do a very super simple quiz app with very, very low coding requirements. Let me just make this just a little smaller. And I'm going to go over this one more time and just explain what I did. Okay, so I started out with my design. I created my first screen. I called it main. I put a label. I put a button. And then I put two question pages, two question screens. Okay, label question one, button question one answer one, button question one answer two. And then I did the same thing with screen question two. Just change the labels to label Q2, button Q2 A1, and button Q2 A2. And then a file screen result. Now I could have had, you know, I could have had 20 questions. So I'd have 20 screens. I have a label called result title and a label called score. And then I just set that default to score zero. Then in my code, I did the following. I set the score to zero at the start. When I click the start button, I go to screen question one. When I click button Q1 A1, I go to screen question two. Because this is the wrong answer. When I click button Q1 A2, I add one to the score. Then I go to screen question two. On screen question two, if I push button Q2 A1, I add one to the score. Then I update the label score over here with the text to score plus score. Note the quotation marks. That's really, really important. So quotation marks here, no quotation marks there. Then I set the screen to the result screen. Same thing for button Q2 A2. Even though it's the wrong answer, I do the same thing because I still need to set this to whatever the total is at that point. But the difference here is this was the right answer, so I add one. And that is it. That's the entire code. Now, if I were to make... I could end up making screen question three, screen question four, screen question five, screen question six. And it's just the exact same concept. So I could just basically copy and paste all the code. Or again, I can just drag it all in. And so we're only using a few of the features of this program. But you can do some pretty advanced stuff. So again, I made a variable. I did some events where we click, we set the screen, and we set the property of this. And that, my friends, is that. So click like. And if you have any questions, hit the comments down below. Take care and keep on coding.