2D - SDG 1 - Poverty Rate in Africa (Difficulty: 3)

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 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.

Step 1 - Remix a Template Project

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

https://play.creaticode.com/projects/8efd36a7b7be69e4fd86d12d

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.

Step 2 - Draw a Dark Backdrop

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:

Step 3 - Add a Title to the Backdrop

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.

Step 4 - Create 55 Clones

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.

Step 5 - Show Different Costumes in Each Clone

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.

Step 6 - Move Every Clone

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.

Step 7 - Avoid Screen Refreshing

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.

Step 8 - Set Clones to Random Color and Brightness

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.

Step 9 - Read the Poverty Rate from the Table

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.

Step 10 - Print the Country Name and Poverty Rate

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:

Step 11 - Highlight the Country Touched by the Pointer

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:

Step 12 - Restore the Brightness

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:

Next Steps

There are many ways you can extend this project. Here are some examples:

Make each clone report its name: when the mouse is touching a clone, we can also make that clone “say” its country name and poverty rate.
Other Metrics: Besides the poverty rate, there are other important metrics that can be displayed, such as life expectancy or child mortality rate.