2D - SDG 10 - Education vs Income (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

The SDGs are 17 goals adopted by the United Nations in 2015. They are a to-do list for everyone to work on together.

This tutorial is about the relationship between school years and income, which is related to the 10th goal of “reducing inequality”.

You will create a simple salary calculator: the users can input the number of years they will stay in school, and your program will display the degree they will get and the average weekly salary

Step 1 - Remix a Template Project

First, please click this link to open the project template:

https://play.creaticode.com/projects/0edc60af14f4a6177a32f3c7

Click the “remix” button to make a remix project of your own. Note that you need to be signed in to do this.

This project contains 1 empty sprite and some backdrops in the stage.

Step 2 - The Start Screen

When the user clicks the green flag, we need to show the “start” backdrop. You can use the “switch backdrop” block in the “Empty” sprite:

Step 3 - Show an Input Textbox

To allow users to input the number of years they plan to go to school, there are a few ways. For example, we could use the “ask and wait” block.

However, in this tutorial, we will use a different method: the textbox widget. You should be able to see the “widget” category on the left, and you can find the “add textbox” block at the top of the flyout.

You would get an input box in the center like this when you click the green flag:

Step 4 - Adjust the Textbox

Now we need to move the input box up, and also make it smaller. You can try to adjust it using the gizmo tool like this:

Note that the position and size values in the block will change automatically. If you don’t know how to use the gizmo tool, you can still input these values directly into the block:

Step 5 - When the Textbox Changes

Whenever the user changes the number in the textbox, we should change the backdrop. To start simple, let’s try to change the backdrop to “dropout” when the textbox changes:

Now as soon as we input anything, the backdrop will change:

Step 6 - Check the Number of Years

You can get the number input by the user by reading the “value” of the textbox widget. We know that finishing high school takes 12 years, so if the number from the user is less than 12, we need to show the “dropout” backdrop:

Step 7 - High School Diploma

Now let’s look at the case when the input is at least 12, which means the user will get at least a high school diploma. To get an A*sociate’s degree from a college, one needs to study for at least 14 years. So if the input value is less than 14, we can be sure this user is getting a high school diploma.

You can right-click the “if-else” block to duplicate it, then change in 2 places:

Step 8 - Bachelor’s Degree

The next step is very similar. To get a Bachelor’s degree, one needs to study for 16 years, so we add a condition for less than 16 years:

Step 9 - Up to the Doctor’s Degree

You can keep adding more conditions to level up. Note that in the last part, if the school year is at least 22, we no longer need to add more “if-else” blocks, since the user will get a doctor’s degree.

Here is a final demo of the project:

Next Steps

Here are some ways that you can extend this project with your own creative ideas:

Change the Backdrops: You can change the backdrop to show other information in a similar way. For example, you can change the characters in the backdrops, or show monthly salary instead of weekly.
Say Something: After switching to a different backdrop, you can also make the program say something using the “AI speaker” or your own voice recording. For example, you can say “Congratulations! Getting a bachelor’s degree will pay off very well!”.