Lesson video

Hello and welcome to lesson two of our Mobile App Development unit.

I'm Ben and in this lesson we're going to continue developing the Toppy Top app that we started last lesson.

So last lesson, you started the graphical user interface elements.

So in this lesson, we're going to start adding codes to that app.

So all you need for this lesson is your computer and a web browser.

You'll also need access to your Code.

org account that you started your work on from lesson one.

So if you're under 13, please ask your parent or carer to login for you or use your credentials that your teacher might have given you.

Okay, so if you may clear away any distractions that you might have, turn your mobile phone off, find a nice quiet place to work and when you're ready, let's get started.

Okay, so in this lesson, you will use a block-based programming language to create a sequence and the environment we're going to use is App Lab from Code.

org which used in lesson one.

I'm also going to use user input in an event-driven programming environment and also use variables again in that event-driven programming environment.

Now there may be some some terminology there that you don't feel too comfortable with or not familiar with.

Don't worry, we're going to address that early on in this lesson so we've got a good understanding of what we can achieve in this lesson.

So first of all, I've got a question for you.

So let me bring that up on screen.

So the question is, what do all these blocks have in common? Now, you might instantly be thinking, I know the answer to that and not is it I've seen these before and I've used them before using scratch.

That's one thing that they do have in common.

They all come from the programming environment scratch but that's not the answer I'm looking for here.

So see if you can pause the video now and see if we can come up with a second thing that they have in common, okay.

So pause the video and unpause when you think you can answer.

Okay, so what do you think they all have in common? Well, the other thing is that all yellow, but again, that wasn't the answer and now give the answer first of all.

Now this might not be the answer you came up with but they all actually come from the section scratch called events.

These are all event blocks.

Now the thing that they all had in common as well is the fact that if we read the language on the blocks, it was when this sprite is clicked or when the Spacebar is pressed or when the green flag is clicked or when I receive a message.

So the similarity there is that they all use that word when.

And that's really important because we're talking about when something happens.

So if you imagine underneath each one of these blocks is a sequence of code and that sequence of code will be executed when an event happens.

Okay, so when the sprite is clicked, then some code will be executed but it won't be executed until that happens, okay.

So we're introducing this terminology here which is event-driven programming.

So let's explore what that is.

So in event-driven Programming, the flow of the programme is controlled by events.

Now events can be user actions such as mouse clicks or maybe key presses.

So if you might turn on on a touchscreen you can use your finger that would be the same maybe as a mouse click or key press on the keyboard.

It might be hovering over a pitch and you might have seen that before on a website where you get your mouse and you put your mouse over a picture and the picture changes.

That would also be an event that's triggered by the user doing something.

It might also be voice input as well.

So it doesn't have to be necessarily electronically driven by a device attached to your computer, it might actually just be you using your voice.

For example, I'm sure you might have a device at home or your mobile phone that allows for this kind of thing.

So for example, let's see if this works.

I'm going to say, "Okay, Google, "what is event-driven programming?" According to Wikipedia, in computer programming, event-driven programming is a programming paradigm in which the flow of the programme is determined by events such as user actions, sensor outputs or messages from other programmes or threads.

Brilliant, and put it much better than I just did there.

Okay, so you see what I triggered that event using my voice, okay.

And also what Google just explained to me was that events can also be triggered by sensors.

For example, if a movement is sensed a light might turn on or if you might have a doorbell outside your house, a fancy modern electronic doorbell that maybe might alert you on your mobile phone if there's movements outside your house, okay.

But it also might be messages from other programmes that trigger something to happen, okay.

So to put this in context of App Lab which we're going to be using.

If you imagine, if you look at that screen on the left hand side there, that should look a little bit similar to what you created in lesson one.

Okay, so that was the graphical user interface.

Now what we're going to work on in this lesson is actually triggered and doing something with the buttons for example, we have a button that says, Press to Start.

So what happens there if the user does press it on their mobile phone that would then be counted as an event.

Now what we're going to do is we're going to link some code to that button so once that event has been triggered, you can see that code execution then happens.

So when the Startbutton was clicked, it then says set the screen to game screen.

And then on the pitch on the right hand side, that's a result of the code being executed.

So in short, once the event is triggered the code then is triggered and then it's executed and then you see the results of the output happening, okay.

Now, what like to do is pause the video and head over to your worksheets because on your worksheet there's a really great video by Code.

org that explains event-driven programming and how it happens inside App Lab.

Okay, so pause the video, watch that great video now and then once you've unpause that we'll get going with the rest of the lesson.

Okay, so we've reached a point where we're actually going to start doing some coding.

So remember, last lesson, we designed the graphical user interface section to the home screen.

So now what we're going to do is we'll actually start adding some code to that to maybe add some adventure in programming as well.

Okay, so I'm going to demonstrate the first section to using live coding.

So what I mean by that is, you can get two choices here.

What I'm going to do is I'm going to demonstrate it and then you can follow on.

But if you feel more comfortable, you might want to just code along with me.

Okay, so what I'm going to do is I'm going to add the game and score screens, I'm going to add an event that will move the game, sorry, move that so move to the game screen when the startbutton is clicked.

And then I'm going to add code that will automatically switch the screen to the score screen after five seconds.

So the idea is I've got my home screen, I'm going to make a game screen and the score screen.

And then when I press the Startbutton, it's going to move to that game screen.

The game is going to play for five seconds before moving to the score screen.

Okay, now if you want to code along with me and you don't want to use the app that you started last lesson then I've got a starting point for you and there's a hyperlink for that on your worksheet.

So what you'll need to do is you need to click on the hyperlink and Remix a project and I'll show you that in a second.

But like say, alternatively, you might feel more comfortable just to watch this short demonstration and then pause the video and then go and do all these steps yourself later on.

Okay, so I'll leave it up to you which method you would prefer.

So, the starting point if you do use the link on your worksheet rather than your own one but if you're using your own one of course log into your account and then go to projects, and then you find the app that you started last lesson, okay.

But if you're using mine, what you need to do is you need to follow the hyperlink on your worksheet and that'll take you to this app, then I'll try this.

But nothing happens at the moment.

This is in preview mode.

I click on Start, nothing is happening and it doesn't let me do anything else.

Okay, so what you've got to do if you're again, if you're using my application, you need to go to view code.

Okay, and that'll open this up, it's just taking a moment.

And once it opens the application, you'll see after I've done but you won't be able to make any changes to it.

So what you need to then do is you then Remix the project.

Okay, so I'll show you that when it's loading, it's just taking, as I said, it's taking longer than usual, try and reloading the page.

I'm not going to do that.

So what I'm going to do is I then click on Remix and that will then give me a version, save it under my account and give me a version that I can then start adding code too.

So I'm just going to click this Remix button and I'll pause the video so you don't need to watch this loading up and then I'll rejoin you when it's worked.

Okay, so now we've got my Remix version of Toppy Top App.

Okay, so it opens Austria when code move but just in case yours doesn't and it's opened up in design view.

Okay, you can see, remember the design view gives us all the elements that we use last lesson when we were making our graphical user interface.

So if it is open on the design, make sure that the code window is open.

So just click on the code over there and that will give me all the blocks that I'm able to use, okay.

Now, the first thing I wants us to do is to create an event so once one press the Startbutton, then it's going to move them to the other screens, okay, on to the game screen.

Now at the moment don't have a game screen, okay.

So let me click on the, I do have a game screen, sorry.

So if you're using mine, you do have a game screen but you need to create the score screen but I left the game screen as you can see it.

So click on the game screen there, okay and I've got my game screen.

So I do need to move over to my design view.

Okay, and then now I've moved over to my design view, I can now add a new screen.

So if you haven't got a game screen, you need to click on new screen and make a game screen.

Okay, now notice on my game screen, I've just put a label on here, I put my dot but you don't need to worry about that just now we can do that later on.

But I'll put a title on here that's maybe made it obvious that that's my game screen because you don't want to just be a white page and you wouldn't know if it's worked.

So I'm going to demonstrate the process of creating new screen 'cause I'm going to create my score screen.

So on the drop down here, I'm going to click on new screen.

Okay and you can see it creates a white screen and calls it screen one and that's not a good name.

So remember from last lesson, I'm going to use the same naming convention that I started with which is using all lowercase and an underscore between the words so I'm going to call mine score_screen, okay.

So I've written a score screen and therefore I've got a score screen.

Okay, so I've got my welcome screen, I've got my game screen and I also got my score screen here.

But remember, score screen is just a white page.

So what I'm going to do, we can always change this later.

Okay, I'm just going to drag in a label.

Okay, and just change around some of the properties of it.

So let's leave the word label in but it's going to be my type probably, could be my score_screen title label, that'll work, okay.

Score screen title label and I just put your score was.

I like to say, don't worry too much about what this looks like now, we're going to come back and edit this page later on.

But we're just going to put a nice title here.

So we are aware that this white screen is the score screen when we're actually previewing our application, okay.

So I'm going to go back to my welcome screen so you can see now on my drop down I got my welcome screen, I've got score screen and I've got a game screen.

Okay, so now I want to add some code.

So I'm going to click on Code.

Now we want to create this event like I spoke about earlier on.

So when that Startbutton is pressed, I want something to happen.

Okay, so on our user interface controls, you'll notice we have this event on the vent option here, you've probably going to end up using this quite a lot.

So I'm just going to click on this, I'm going to drag it into my coding window much like you will do if you're using scratch.

Okay, so you see the way that's put that in there.

And what's kind of nice about Code.

org and App Lab, sorry, is I wanted to show you is that if you're using any of these, just put your mouse over it and it'll describe what actually it does and what the properties are.

Okay, so this says on event, executes a callback code when a specific event occurs for the specified a user interface element ID and you can see some examples.

So you click on that you can see other examples that have been used and that might be helpful to you.

Okay, now what essentially this means is on an event, ID.

So what is the event that we're hoping? What element to my screen is this going to be linked to? Okay, I wanted to link it to my score button.

Now if you've named this properly and you've used a good naming convention, we should be should be fairly obvious if I click this drop down this here, which one that I want.

Okay, now we've got quite a lot of things going on here.

But these are all the different things I've named in my game.

So we've got labels, we've got images.

Now can you remember this here? What element was this? Well, it was a button that we put in, okay.

And I've named if we move my mouse over the top of it, you see the way it's actually told me what idea it is.

I can see that that's called the Startbutton.

So because that's called the Startbutton, all I need to do is go into my drop down list and find my Startbutton.

Okay, and there you go.

So, when the Startbutton is clicked and we do have some other options but we're actually going to stay with collect but we also have mouse over we got mouse up, mouse down, the key press and things like that.

So let's just leave it as click for now 'cause it's when it's going to be clicked.

Then underneath here, what code do we want to be executed when they have clicked on the Startbutton or very simply all we want to do is we want it to move to my game screen.

Okay, so what we have and we can scroll down here.

Okay, we've got the set screen option right to the bottom.

So three from the bottom of this list.

And if I drag that into here, set screen.

Okay, you can see I've just dragged into that and dropped it and now I've got a drop down list and I've got my three screens.

So when the Startbutton is pressed on the home screen, I want it to move to the game screen.

So I'm going to click on that, game screen and now they should work.

Now we can preview this working which is really great.

So on my, use my web browser, I can click on Run here in the bottom left and once I click on Run it will show you my app being previewed.

So I can click around here nothing's happening but if I click on Start, can you see the way it has now moved me to my game screen.

So I know that's worked which is absolutely brilliant and you want to test out again, you can always click Reset.

And that will then take you back to the home screen.

Okay, now that's fine.

So the next thing I asked you to do on the test sheet was to once it's in the game screen, then I want you to move on to the final screen.

So the score screen after five seconds so we're going to allow the game to play for five seconds.

Okay, now to do this, we're going to then move to the control menu.

So not user interface controls anymore, we're going to click on the blue control menu and we're going to use this thing called set timeout.

So I'm going to drag this in.

Now I'm just going to slot this in here for now.

Okay, so you can see what it does.

Now set timeout.

Now another function for the time being.

Now if you move your mouse over this, you can see that the MS function is milliseconds, okay so that there is milliseconds.

So if I was to change that to 5,000, that would actually be five seconds.

Okay, and we can test out whether or not I've got that right in a moment.

But the key is, where do we want to put this, okay? Do we want to leave it underneath here or do we want to put it on the set screen? What do you think? Now if we put it underneath here, this bit of code will run as soon as my application starts running as soon as I click Run, this bit of code will run because this code will only run once it is triggered but unless it's in an event, it would it would start being executed.

Okay, so what we want to happen is, we don't want it to start triggering that five second countdown until the game's green is been loaded.

And we only know the games green has been loaded once the game has been game screen has been executed.

So once they click on this, it moves them to the game screen and then I want the countdown time to start.

So what I'm trying to say here is I would like this block to be put on the set screen like that, okay.

So I've currently got it so that when the Startbutton is clicked, it's going to move to the game screen and then this five second countdown is going to start but what I want to happen after that five second countdown.

Well, I wanted to move to the score screen.

So can you remember which menu that was under? So it's under the user interface controls.

So let me click on that, I want to go back down to set screen.

Drag that underneath the set timeout.

Okay, I'm going to click on the drop down and I want it to move to my score screen.

Okay, so let's see if that works.

So in theory, we predict what's going to happen is that when the start was clicked is going to move to the game screen, we know that works and then after five seconds is going to move to the score screen.

So let's test that out.

So let's click on Run, okay, now I know it's running now because it's changed that little reset button and click Start, it's going to move to my game screen.

I should be able to count five seconds, one, two, three, four, five and there we go and it moves to the score screen.

Perfect, so we know that bit of code works.

Okay, so that's all I'd like you to do.

So if you've coded that alongside me, well done, okay and you're ready to move on to the next challenge, okay, but if you haven't, what I'd like you to do is I would just like you to go through the steps which are on your worksheets as well.

And remember on your worksheets, so the same app that I just worked on then.

But again, please feel free to use the one that you have designed, you made your own life lessons.

So it'd be preferable if you could reuse that one because of course, it wouldn't follow your naming conventions.

Okay, but if you'd like to use mine, you can find the links in the worksheets.

So I'd like to just go ahead, follow those steps, pause the video and when you've done that, we'll move on and we'll develop our app just a little bit more.

Okay, so hopefully you've managed that and if you have so far, you've created an app with three screens, you add an event to a button that will move at the game screen when it's clicked and you've added a timeout to automatically move the score, sorry, automatically moved to the score screen after five seconds.

Okay, so you should be at a stage where your window looks like the code on the right hand side, okay.

And if it isn't then, please go ahead and add those blocks of code so you're ready to move on to the next step.

Okay, now the next step is to go to your worksheet and go through all the tasks on task one.

Now, I made a step by step guide, it involves some kind of challenge.

So it's not showing you exactly how to do it but it describes the task and describes how you might achieve that.

Okay, so what would be really great if you can work through those tasks.

Okay, so I'd like to pause the video now, work through all the tasks on task one on your worksheet, go get as far as you can and then once you've done that, you can unpause the video and I'll go through a little demonstration of where we should be at by the end of this lesson.

Okay, so good luck with that.

Please enjoy it involves some kind of problem solving but I'm sure you'll be absolutely fine, okay.

So good luck with that and then unpause the video once you're done.

Okay, so how did you get on with that? Were you able to achieve or complete all the tasks? There even some explorer tasks you might be worth having to go out if you found that really straightforward and you're able to do it really easily, okay? But if not, what I'm going to do is I'm going to go through how to complete those steps.

So if you've got a little bit stuck at some point, then please watch a video and it might hopefully make a few things clear.

But even if you're able to complete it, I would recommend that you watch this video because I might describe something in a way that maybe makes it easy for you to understand or you might have missed something out.

Okay, so I'm going to head over to my Remix app.

Okay, lets me do that now.

So this is the point where you should have started these tasks at.

So the first task was adding a score, okay? Now to do that we needed to add a variable in, okay.

Now variable is going to be something that's going to link to a memory position inside a computer that's going to store this score essentially, okay? So, because what we want to happen is when the blue dot is clicked, we want the score to be incremented.

Okay, so I'm going to just click on variables here.

So we need to underscore, something click on variables there.

Okay, and I'm again is currently my application so it's running so I'm just going to make sure it's still in preview mode.

So I'm just going to click Reset.

Okay, so if that's the case, it's not a big deal.

I just I quite like it to be that way.

So I can see what's going on on screen rather than it being kind of like a run mode.

Okay, now anyway, go back to I clicked with variables, okay? Now, in the instructions it said variable x equals so I'm just going to drag this into the screen.

Okay, now I wanted to have a score variable.

So I'm just going to name, so lets say X, I don't want that as a variable name because I'm never going to remember what X is so we always must give variables a sensible name that's easy for you to remember but be easy for someone else to read your code and try and understand what's going on.

Okay, so I'm just going to change X to the word score.

Okay, and I'd like the score to start off as zero, okay? Now, where do we put this code? Do we want to put it inside the event? So when the start was clicked, it starts a score zero.

Do we want it to be right at the start of when the maybe when the game so when we start running the application? Well, it's fine hairs it is because this on events happening that's kind of invalid way that is in some respects because this code will only be executed once the event is triggered.

So the first thing my application will see there's not inside an event tool, but this one.

So when I run the application score will be set to zero.

Okay, but do we want it there or do we, if we were to play this game more than once, when the game is finished, we might want the user to be able to play the game again.

So the score will start at zero again.

So at that point, what actually triggers the game starting? While it is actually when they press the start.

So I'm quite happy to move this inside the event and be the first thing that happens there.

So when the stop was clicked, at that point I want the score to be set to zero, okay? Now, what we also want to happen is that when the blue dot is clicked, it's going to then increment the score.

Okay, so where's my blue dot? So if I go to my score, my game screen sorry, okay, I've got blue dot here.

Now, if you've not yet put your blue dot in, then you can put your blue dot in at this point, okay.

so what you need to do is you can click on Design, okay.

And you can select Image, okay and drag in an image like this, okay.

Now with your with the resources this lesson is a file which has the blue and the red buttons like dots in them.

So all you need to do is download those to your computer and when you put your image in here, what you need to do is where it says choose, select Choose there and then you can upload a file into, you can upload a file from your device, okay.

So you can see these ones that I've already uploaded but if you click Upload, it will allow you to select the file that you downloaded from the resources.

So name that way if you like, I've called mine blue_dot_game_image.

Okay, so I know that's the blue dot and it's going to be used on the game screen and it's an image, all right.

So I'm just going to click and get rid of this one.

So select that image and just delete that one 'cause I'm not using it.

So put my blue dot in and I'm on the game screen so I know that is called blue dot game image.

So when that has been clicked that I want the score to increment.

Okay, so I'll go back to the code what we need to do is put another event in so the event is going to happen once that blue dot is been clicked, okay.

So now remember that the user can only see this blue dot once they've accessed the game screen.

So it can be a separate event from the one that we can see on the screen already.

So I'm going to go back to my user interface controls and I'm going to select another event and just drag that into my window like such.

Okay, and then where it says on event ID, the ID is going to be the button, the Blue Dot button.

Okay, so my blue dot game image so when that is clicked, what code do I want to be executed? Okay, well, I want the score to be incremented.

So let's just go back to my variables and have a look.

Okay and what options I've got.

Now, I've got var x equals var x equals, okay.

Now I've already set my variable score equals zero so I'm just going to use the x equals this time, okay.

Because I'm not reassigning a new variable, I'm using the variable that I've already got but it's not called x, it's called score.

So I'm just going to change score x to be a score, a number is a score equals or what I want it to equal when they click it.

I could put one there but what that would mean is every time the blue dots are clicked, it would just set the score to be one, it wouldn't incremented by one or increase it by one, it just set it has been one.

So how are we going to increment it by one? Well, there's a hint on the slide on how to do this.

And what we need to do is use this, the math functionality here, and we want to use the plus one, so I'm going to drag that in and slot it, you see the way that section where I put a number and that's highlighted yellow, that's where I want to slot it in.

Okay, so what I'm going to do is score equals, well, I wanted to have the current score and I'd want that score.

So I'm just going to put score equals score plus one.

So what that means is let's say my score was zero and I click the blue dots, score is zero so it would be zero plus one.

So score would then be reset to be overwritten to being one.

Okay, and then if I click that again, your score is currently one.

So this one plus one, so score be overwritten to being two.

And this it works on like that.

So again, scores two and I click on the blue dots again, then it will be two plus one, okay.

Now, I'd like to test to see at this point if this works, okay.

So what I need to do is I'm going to have a look on some of my menus and I wanted something called console.

log, okay.

And now I'm pretty sure that this is not under this menu.

Okay, so I'm looking for a menu that is going to allow me to look at console log.

So that's going to look under variables, there we go.

Under variables, we have console.

log.

And what this shows mean is it's going to print out to the console, something I can I can use for testing purposes, it's going to be really useful to me.

So I'm going to click on that, I'm going to drag it under here.

Now what that means is every time the blue dots is clicked, it's going to log something and display it to me.

But at the moment, it's only going to log the word message.

But let's test that out.

So I'm going to run my application.

So clicked on Run.

Okay, I'm going to click on the Startbutton.

I started my game.

Now I'm just going to click on my blue dots.

Now, let's have a look at this.

Now we have, we have a problem here.

Okay, let's have a look at what that problem is.

Okay, so it says here.

Score hasn't been declared yet.

Now, that's interesting.

So my variable score has been declared there but I can't use it because it's only under this event.

Okay, so let's just try moving that outside the event.

Okay, let's see if that makes any difference.

Okay, so I'm going to reset my game, run, I'm going to start, I can click on the blue dots.

Now, every time I click on the blue dot now, you can see the word messages appearing but then after five seconds, it moves to the game screen.

So that's showing me that every time I clicked on it, it is logging console.

log, it is showing me message which means it is working that when the blue dots are clicked, something is happening, okay.

Now two things I want to unpack here.

First of all, it didn't like score, because it didn't think that score had been declared yet.

Okay, so it needs to be outside of the event.

So I initially put it inside the event, it didn't like it.

So that score the variable had to be declared right at the beginning of my programme.

Okay, so I changed that there.

Now, we don't know yet if the score is incrementing.

We do know that when we click on the blue dot image, something is happening because it's showing me the message but I'm not going to change this to something else.

So it's going to prove to me that the score is working.

Okay, so I could change this from message to score.

Now, what do you think? Is that going to work? What do you think is going to happen when I run this? Is it going to show me the score incrementing or do you think something else is going to happen? Or it could be a clue, something else going to happen? I think something else is going to happen but what do you think is going to happen? So let me just run this again so I'm going to run my application, I'm just going to click on start, I'm going to click on my blue dot a few times.

Now, can you notice what's happening on screen now? Not sure where you can see that may well on the video but underneath it showing the word score, that's not what I want often.

So let me reset my application.

I don't want to show me the word score, I wanted to show me what the value of score is.

What is the variable score holding? So what have I done wrong there? Okay, well, hopefully you've noticed that it's inside these speech marks, okay.

Now if I put anything inside speech marks, it's literally going to print out that wording, okay? If I get rid of the speech marks, it should recognise that actually what I want is the variable score, not the actual string or the text of score.

Okay, so you can see now that I've changed the console.

log to have score in there.

So I've removed the speech marks around it.

So hopefully it'll display the value that the variable score is holding.

Okay, so let's have a look at that.

So I'm going to run this, and I'm going to click Start and then hopefully when I click on the blue dot and there we go and click on a few times and you can see as I'm clicking on it just at the bottom there and small you can see the blue writings, see the numbers are incrementing which is exactly what I want it to do.

Okay, now we've seen some kind of error message or the NAN message at the bottom there.

Just double check that when you included the variables, so score equals score plus one.

That's because we've already declared the variable at top there, the vast score equals zero.

Then when we've used this one, we haven't used the var X equals the blank one there because that's the client available which we already done, we want to just use a variable to assign the variable.

So make sure it's that one that you've actually used, okay, otherwise it won't work properly.

Right, okay, so the next bit of the code that you needed to do was to, let's get something to happen with our blue dots.

So once that blue dot has been clicked, we've got the score incrementing we know that that's working now but now we want the the dots to move somewhere else on the screen, okay.

So the user interface controls that that one for this, let's have a look at the yellow menu and the user interface controls and see which block we actually wanted to use.

Okay, so I'm just going to scroll down so I can have a look of all the ones I want.

Now the one that wanted to use was the set position, okay? So I'm going to move this and I'm going to put it inside here.

So it's going to set the position, okay.

Now you'll notice this takes a lot of parameters, okay? And it might be worth kind of getting familiar of what these parameters are, okay? Now if we move our mouse over it, you should see what they are.

In fact, we can see here, we've got separation ID, xy width height, okay.

So that's going to ID means what are we moving.

So when the blue dot image is clicked, what do we want to move or where we want to move the blue dot image.

The x and y are the x and y coordinates on the screen and the width and height are the width and height of the image itself.

Now, I don't actually at this stage, want to change the width and height of the image but if you want to then go for it, I mean, if you want to make it even trickier by making it move to a bigger or smaller every time they click it, that might be a really fun thing to do if you wanted to do that.

But all I want to do is change the x and the y.

So let's go ahead and change some of the properties for this.

So set position ID, I'm going to click on my drop down and make sure I select my blue dot image.

Okay, so my blue dot game image is the ID, the thing that I want to change the position of.

Now this is the the x and the y coordinate here.

Okay, now what are the x and the y coordinates off my screen, okay.

Well, let's have a look.

Now, the App Lab makes this really straightforward for you.

So if you get your mouse and you move over the screen, and we need to make sure we're not in preview or not in the game, the running mode, we need to make sure we are in our preview mode and I'm going to just go move to my game screen.

There we go.

Now if I put my mouse over the screen, notice as I move it left and right now, you can see the x values changing.

And as I move up and down, you can see the y value is changing as well.

Okay, so what would be really great if we kind of like work out where we want to move it to? Okay, so for example, if I wanted to move it to the bottom right hand side, I would change it to x 237 and y 371.

So let me do that.

So x 237, I was at 371, I wanted to change it to the y position, I think it was 371.

So now that's going to move it to that position and then that x position and not y position.

So I think it's going to move to the bottom right.

Okay, so let's see if that works.

I'm going to run it.

Okay, there we go and I'm just going to click on, press the start, okay? And when the game starts, I'm going to click on the blue dot, I'm going to click it again.

Now, perfect is to what I wanted sort of, is I clicked on the blue dot and it has moved to the bottom right hand side of the screen.

But when I clicked it again, it keeps in the same position.

So why is that? Well, basically, it's because every time if we follow the code through.

When the blue dot image is clicked, it's going to increment the score and the blue dot image is going to a move to that position that x position and not y position.

Okay, I'm going to click it again, it's going to increment the score.

And it's going to move it to that position, that x position and that y position but it's already there so you're not going to see it moving.

So how do I get it to move every time? How do I get to move to like a random position.

Well, luckily, there is some random functionality that we can use here.

So I'm going to look and that's the math option, here we go.

So click on math we have random number.

So I'm going to replace my x here and I'm going to drag that in and I'm going to slot it under the x but now that bit can be a little bit fiddly and I'm also going to put a random number for the y.

Okay, I'll see if I got that in the right position.

Okay, now it's going to slide so this means every time this line of code executes, it's going to move the blue dot image to a random x coordinate between one and 10 and the random y coordinate between one 10th so each time this the two blocks of random number 'cause they're going to generate a unique or different, not unique, a different random number every time but only between the numbers one and 10.

Now let's have a look at our x and y coordinates again.

So go back to my game screen.

Okay, so I want, where's it starts.

So x starts from zero on the left hand side that's probably a bit too close to the edge.

So let's stay about there, about 40 and let's go the other side because it's about 320, that's probably too much.

So I'm going to change that to maybe between 40 and 300.

So let's have a look at that.

So that's kind of works out for me so my x coordinates and it change between so it's going to generate a random number between 40 and 300.

Let's have a look at my y axis.

Now so we go to my top of my y, it starts at zero, so let's move it down probably about 20 maybe, maybe 30 or 40, I think 40.

Okay, so 40 at the top, let's go right down to the bottom.

So it goes all the way up to about 450.

So maybe change to 400.

So 40 to 400 on the y axis.

So 40 to 400.

Okay, so let's see if that's worked.

So, again, hopefully now we have the starting, of a really good game.

So I click Run.

I'm going to start my game and then click it and move to a different position.

Yeah, brilliant, okay.

Let's keep moving, I'm going to keep clicking as many times as I can, okay and I can see from the bottom, I got a score of four.

But obviously, we want to put the score in there but that's not for this lesson, that's something that we'll achieve next lesson, okay? So if you've done all of that really well done and like I say, if you've not done all of that or you work through it but got stuck, then hopefully that video helped you just a little bit, okay.

Okay, so to finish off this lesson, I've got a question for you to think about.

Now, in this lesson, we've looked at events and we created our own events.

Now on the right hand side, you can see the two events that you created.

Now, my question to you is, what sequence should the two events been? I mean, does it matter? So what I like to do is pause the video and think about what sequence they should be in and then see if you can justify your answer and then unpause when you've done that.

Okay, so what do you think the answer is, do you think it should be one and two, two then one or do you not think it matters? Okay, so give me an answer shouted out to me, three, two, one, it is then it doesn't matter, okay, so you got that well done because all of that both of these events are triggered by an action.

And in this case, it's a user action.

So when the users click the Startbutton, the code underneath it will execute.

And when the blue dot is clicked or then the blue, so the blue game dot sorry, is clicked, then the that code will be executed.

So actually, it doesn't matter what order they're put in because the code underneath them is only executed once the event has been triggered.

So two was above one instead of one above two, neither would happen until the event has been triggered.

Okay, so the key there is it doesn't matter, okay.

Now, so hopefully you enjoyed this lesson.

I certainly enjoyed it and hopefully got a real sense of achievement actually because you've started this lesson with just some graphical user interface elements and you going to end this lesson with pretty much a fully working up, there's some things we need to develop a bit further like next lesson, we need to add the score label so that when the user has finished a game, then they can actually, they can see the score that they've got and also to get the option to play again.

So we'll add that functionality in next lesson.

Okay, so if you've achieved all that a big well done.

Now, I would really love to see the apps that you've made as well.

So if you're willing to share those with us then please ask your parents or carers to share your work on Instagram Facebook or Twitter, talking out national and using the #learnwithOak.

Okay, and hopefully you're looking forward to developing your app a little bit further.

In next lesson, we'll also start looking at the project that you might want to work up to develop your own mobile phone application.

Okay, so I'll see you then.