Code.org Block Code Tutorial - Switch From Screens With a Button

I'm a current student learning the basics of coding, and code.org is a great platform for beginners who are new to code. It is very user friendly, and the workspace is intuitive.

You only need a computer with internet connection

Type into the bar: "code.org" and hit enter.

On the top right corner, there is a "sign in" button.

Click the "Create an Account" button and enter in your information. You should be taken to the Dashboard after you click "Sign up"

On the upper right, there is be the drop down menu called "create," and after you click it, it shows many options.

For our purposes today, choose the "app lab" option to get started.

It is a good habit to start naming your projects, as it makes it easier to organize once you make more projects.

To rename, go to the upper left and click on "rename" button. Name this project however you want. After you've finished typing, click "save."

In order to start coding, we need to design the elements that we are going to code first.

So, go to the design tab.

Here, you will see a number of options. Feel free to play around with it.

Name the screen "coverScreen," this will be the screen in which the user sees first.

Make sure the there is no space between the words and the first letter is not capitalized, whereas "Screen" is capitalized. This special way of writing labels in code is called camel case.

Drag the "button" from the tool box into the screen. Now you have a button!

Click on the button to select it, and then rename the id to "btn."

To change the displaying text on the button, go into the workspace properties and write "Go to next screen," So that when this button is clicked, it will change the screen to another screen.

You can drag the button to change its location, and change its shape by dragging the lower left corner.

To make a new screen, either click the dropdown and select "new screen..." or drag a new screen from the toolbox.

Add a label by dragging it into the screen area, and change the text to say "it worked!"

You can choose any other text as well, it does not matter that much.

To change the font size, scroll down in the properties until you find "font size" and change the number.

Now that we have a button and two screens, we can do some coding!

Going back to the code tab, make sure that the toolbox is in "UI Controls." Then click and drag the "on event" block into the workspace.

For the id dropdown, select "btn."

For the type dropdown, select "click."

This means that when the "btn" is clicked, the function will run. We will write the function in the next step.

So the goal of clicking the button, in this case, is to switch to "screen2" (that was the default screen name of our second screen, so we are going along with it)

The code to do that is "setScreen()"

Scroll all the way down in the tool box and drag the code Into the "onEvent"

Select the dropdown in the "setScreen" to be "screen2"

Now to test our code, click "run"

Click the button to see if it switches over to the other screen. If it does, congratulations! Hopefully you enjoyed this tutorial and found it interesting.