2D - SDG 1 - Poverty Rate in Africa (Difficulty: 3)
CreatiCode last edited by info-creaticode
- Paint Costumes
- Cloning sprites
- Graphic Effects
- Using variables
- Reading from tables
- Printing Text
- When touching event
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 poverty rate of African countries, which is related to the first goal of “No Poverty”.
Your project will allow the user to pick a country from the map, then display the percentage of people living below the poverty line in that country. These people earn less than $1.90 daily, so it is hard to cover basic needs like food and healthcare. Most of the countries with high poverty rates are from Africa, so this map will give us a clear picture of which countries need the most help.
First, please click this link to open the project template:
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 a sprite called “Countries”, which has 55 costumes. Each costume is a map of one country, with the country name as the costume name. There is also a table called “countries”, which contains the poverty rate for each of these 55 countries.
First, let’s draw a dark backdrop with some gradient. Click the “stage” icon, then draw a rectangle that covers the entire costume. Then pick the gradient fill mode, and pick 2 colors you like:
Now let’s add a title over the backdrop, which says “Poverty Rate in Africa”. You can use the “T” tool to add text over the backdrop. You can change the color, position and size of the text as well.
Now we are ready to add the maps. Since there are 55 countries, we will create 55 clones of the “Countries” sprite, and make each clone show a different costume.
To create these clones, you can use a “for-loop” and a new variable “i”, so that this variable will go from 1 to 55. Inside the for-loop, you can create the clone, and use the variable “i” as that clone’s ID.
Next, we are going to work on individual clones. We will start with the block “when I start as clone”, and add 2 blocks to it.
- We will switch to a different costume based on the “clone ID”. Each clone has its own “clone ID”, which is different from other clones. The “clone ID” will be a number between 1 and 55, so the clones will be showing costume number 1 to costume number 55.
- The original sprite “Countries” is set to be hidden. So after a clone switches to the correct costume, we need to make it show up.
We are not seeing the entire map because the maps are shifted in the costumes. This can be easily fixed by moving each of the clones up and left.
Currently, it takes some time to create all 55 clones, because after adding each clone, the screen is refreshed to show the change in the map. To make the program run faster, we can create a new block that does not refresh the screen, and move the code blocks into that new block’s definition. This way, the screen will only refresh when all 55 clones have been added.
Next, we are going to make our map look better by setting each clone to a different color and brightness. Note that to make the maps brighter but not too bright, we will only choose a random range between 40 and 70.
To display the poverty rate, we first need to read from the table in each clone. Please create a new variable “poverty” that is “for this sprite only”. This way, each clone will have its own “poverty” variable as well.
Now we can read the poverty rate from the table, using the column name of “data” and the row number of “clone ID”. We can do that because the costumes and the rows in the table are both sorted alphabetically, so costume 1 has the same country name as in row 1 in the table.
When the user clicks any country, we would want to show the name of that country and its poverty rate. We can use the block “when this sprite clicked”, which works on all the clones as well. To print, we first need to clear all existing prints, then use the “print” block to print the data on the stage. Note that the country name is simply the name of the costume.
Now we have a working version of the project:
To make our map more interactive, we highlight any country touched by the mouse pointer. The event is called “when touching (mouse pointer)”, and we just need to reduce the brightness of the clone by 50:
There is one small issue: when the mouse is no longer touching a country, that country stays in a darker color. To restore its original brightness, we need to wait until the mouse is no longer touching the country, and add 50 back to its brightness:
Here is the final result:
There are many ways you can extend this project. Here are some examples: