2D - SDG 5 - % of Women in Congress (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 percentage of women in the national congress for different countries, which is related to the 5th goal of “gender equality”.

Your project will allow the user to pick a country and then display an animation that shows the ratio of congresswomen in that country. This number is often used to measure how much power women have in a country.

Step 1 - Remix a Template Project

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

https://play.creaticode.com/projects/031866d2c5b75663d2b2c094

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

This project contains 1 sprite over a green backdrop. The sprite has some costumes for congressmen and congresswomen.

Step 2 - Add a T*tle to the Backdrop

First, let’s add a t*tle over the green backdrop. You can select the stage, and use the “T” tool to add text over the backdrop. You can change the color, position and size of the text as well.

Step 3 - Add a Dropdown for Country Names

Next, we will make a new list named “countries”, and add these 5 example countries to the list:

With this list ready, we can add a dropdown widget to show this list when the user clicks the green flag:

Step 4 - Adjust the Dropdown Menu

We need to move the dropdown menu higher. This can be easily done using the “widget position” tool :

Note that as you move or resize the dropdown widget, the numbers in the block are changed automatically.

Step 5 - Watch for User Selection Change

When the user selects a different country in the dropdown, we need to show that country’s information. We can use the “when widget changes” block to trigger this action.

Step 6 - A New Block for Showing Information

We will add a new block called “show info”. It will contain all the blocks for showing the information for the selected country.

Note that you can change the new block’s color as well.

Step 7 - Get the Women % Value

Now we need to use a new variable to represent the percentage number of the selected country. For example, on this page we can find that in Iceland the congress (parliament) has about 47% of women. The easiest way is to use an “if” block that checks the value of the dropdown menu like this:

You can duplicate this “if” block for the other 4 countries like this:

Step 8 - Print the Percent Variable

Now let’s display that percentage number next to the country name. You can use the print text block to write any text on the stage. You will also need to clear all prints before it, so that when the country name changes, the previous number is erased.

Step 9 - Stamp the Costume 20 Times in a Row

For the last part, we need to print 100 men’s or women’s images on the stage. To start simple, let’s only add one row of 20 images, and let’s not worry about which costume to use yet.

As shown, you can use a “for-loop”, which sets the variable “x” to 20 different values one by one: -190, -170, -150, … 170, 190.

Then we just need to move the sprite to that X position, and Y position of 30, and stamp the costume. Note that we need to clear all the stamps first.

Now we get 20 stamps of the costume. To make them fit on the stage, we need to reduce the size to about 20:

Step 10 - Count the Number of Stamps

To control whether to stamp a woman or man costume, we need to know how many stamps we have printed over time. We can use a new variable “counter” to keep track of it. It should start as 0, and increase by 1 every time we make a stamp:

Step 11 - Decide Which Costume to Stamp

Now we know how many stamps we have printed, we can dynamically decide whether to print a woman or a man. We will always start with the woman’s costume, and when the counter is greater than the percentage value, then we switch to the man’s costume.

Now our code is already working for the first 20 stamps. For example, if we select “Japan”, then the costume will switch to man after 10 stamps:

Step 12 - Add 4 More Rows of Stamps

For the last step, we just need to print 4 more rows of the costume, with 20 stamps in each row. The only difference will be the Y position, which will decrease by 40 for each new row: 30, -10, -50, -90, -130.

Here is the final result we get:

Creative Ideas

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

Optimize the Blocks: Currently the “show info” stack is quite long. You can move some part of it to another new block, and also simplify the 5 for-loops into a 2-layer nested loop.
Other Countries: Try to add some other countries to the list. If you don’t like to use the “if” blocks to set the “percent” variable, you can try to use a table to store these values instead.
Other Topics: Instead of the percentage of women in congress, you can use this format to present other ratios, such as people living in poverty, or people over a certain age, etc.