1 Lesson 10: Sorting Hat
What you will need
• CloudProfessor (CPF)
• Light sensor
• RGB LED Light
• Arduino Leonardo
• Arduino Shield
• USB cable
Learning Expectations (how learning / progress will be demonstrated)
All Use sequences of instructions.
Most Explain how their app works.
Some Use logical reasoning to detect errors in their algorithms.
Learning Objectives
Design and create an app which uses sequence, selection, repetition and variables.
Program, debug and refine the code for their app.
Understand and use selection in an algorithm (IF, Else and Else if)
Overview
In this lesson, students will continue to explore the basics of writing algorithms using the Blockly editor. Students will create
a program to simulate a simple sorting hat, using the RGB LED light component and light sensor, which will pick one of four
colours at random when the sorting hat is placed on a persons head (light sensor drops below a certain value).
This lesson introduces students to IF / ELSE / ELSE IF and random.
Curriculum Links (Computing PoS)
Designs simple algorithms using loops, and selection i.e. if statements. (AL)
Uses logical reasoning to predict outcomes. (AL) Detects and corrects errors i.e. debugging, in algorithms. (AL)
Creates programs that implement algorithms to achieve given goals. (AL)
Understands that programming bridges the gap between algorithmic solutions and computers. (AB)
Computational Thinking Concepts: AB = Abstraction; DE = Decomposition; AL = Algorithmic Thinking; EV = Evaluation;
GE = Generalisation.
Lesson 10 Sorting Hat
1
2 Lesson 10: Sorting Hat
1. Connect the power of CloudProfessor then press and hold the power button for two seconds; it will turn on and the
power indicator will light up.
2. Insert the Arduino Shield into Arduino Leonardo and use the USB cable to connect the CloudProfessor with Arduino
Leonardo. Attach the light sensor to port A0 and the RGB LED light component to port D7.
3. When the CloudProfessor detects the Arduino Leonardo, a notification will appear on your device; click the
notification to launch the Arduino Leonardo APP, and select the CPF Arduino Blockly app. Click on Lesson 4.
4. Press the execute button to enter the control user interface (UI).
5. Press the edit button to enter the program editing page.
Step-by-step instructions (Blockly) 2
1
2 3
CPF Arduino Blockly app
Edit button
Execute button
Control user interface (UI) Program editing page
3 Lesson 10: Sorting Hat
Code recap (Blockly)
Let’s explore some of the code used in the previous lessons.
1. Light Get Value:
The Light Get Value block returns the value of the light sensor (Returns a numeric value
based on the brightness level of the environment).
2. RGB LED Setting colour with:
The RGB LED Setting colour with block sets the colour of
the attached RGB LED.
The colour can be either set manually (2) or controlled
by the program UI (1).
3. If / else:
The if / else block is used to conditionally run code
depending on whether a Boolean condition is true or
false.
In this example, if the light sensor value is less than
(<) 500, the RGB LED light will light up; or else (else),
if the light sensor value is greater than or equal to
500, the RGB LED light will automatically turn off.
4. Random integer from to:
The Random integer from to, block generates a random number between 1 and value set by the user. In the
example above, the program will pick a number at random between 1 and 4.
5. Delay Time(Sec.):
The Delay Time(Sec.) block is used to pause the code (time set in milliseconds). In the example above, the
program is paused for 1000 milliseconds (1 second).
6. Set CPF control request:
Finally, the Set CPF control request block at the end of the program tells the program to run the code from the
beginning again. The program will continuously repeat until the user closes the app or stops the program manually.
3
1
2
4 Lesson 10: Sorting Hat
Step-by-step instructions (Blockly)
Let’s create a new program to simulate a simple sorting hat.
1. Clear the existing code so that you have a blank canvas to create your new program. Click on the bin icon (1). Click
on ‘OK’ (2) to create a blank canvas.
2. Note: You can return to the original program at any time by clicking on
the restore icon (3).
3. First, let’s give our app a title. Click on ‘CPF UI’. Drag the ‘Title Name
Panel Set’ block onto the empty canvas. Call your app ‘Sorting Hat’.
4. Next, we need to write the condi-
tion which checks to see if the
sorting hat has been placed on
someone's head (light sensor value
is less that 250). For this we will use
an IF statement.
a). Click on the ’Logic’ tab. Drag the
‘if do’ block and attach it to the end
of your code (4).
b). Click on the ‘logic’ tab. Drag the
‘=‘ block and attach it to your ‘if’ block (5).
c). Click on the ‘CPF Devices’ tab. Drag the ‘Light Get Value’ block onto the first slot in your logic block (6).
d). Click on the ‘Math’ tab. Drag the ‘0’ block onto the second slot in your logic block. Change this value to 250 (7).
e). Finally, click on the = symbol inside the if statement. From the drop down menu, select the less than ‘<‘ symbol.
5. Next, we need to generate a random number (1 for each of the four houses / colours).
a). Click on the ‘Variables’ tab. Select the ‘set item to’ block and drag it into the empty slot next to ‘do’. Rename
your new variable to ‘rand’ (8).
b). Click on the ‘Math’ tab. Drag the ‘random integer from’ block and attach it to your variable. Change the to value
to ‘4’ (9).
4
3
Change the values of the RGB LED to create your
own colour scheme.
1 2
4
5
6
7
8
9
5 Lesson 10: Sorting Hat
Step-by-step instructions (Blockly)
6. Next, we need to write the condition which changes the colour of the RGB LED based on the result of the random
number. In this example, the RGB LED will turn Red if a 1 is selected at random. Green if a 2 is selected, Blue if a 3 is
selected and White if a 4 is chosen.
(a). Click on the ‘Logic’ tab. Select another ‘If’ statement and place
it below your random integer block.
(b). Click the cog inside your if block. Drag two ‘else if’ blocks and
one ’else’ block inside the pop-up window (See image opposite).
(c). Click on the ‘Logic’ tab. Drag a ‘=‘ block and attach it to the first
if condition.
(d). Click the ‘Variables’ tab. Select ‘rand’ and drag it onto the first
empty slot in your ’=’ block.
(e). Click the ’Math’ block. Select a ’0’ block and place it
inside the second empty slot in you ‘=’ block. Change
the second value to 1.
(f). Next, click on the ‘CPF Devices’ tab. Select the ‘RGB
LED Setting colour with’ block and drag it into the first
empty ‘do’ slot. Change the colour to red (10).
Repeat the above step for the other colours.
7. At the moment, our RGB LED will flash briefly before
re-running the code from the beginning. Let’s add in a
natural pause of about 3 seconds. Click on the ‘AOP
Cloud’ tab. Click and drag the ‘Delay Time(Sec.) block
and attach it to the ‘else’ block.
8. Finally, we want the program to run continuously until
the user ends the program. Select the ‘CPF Devices’ tab.
Click and drag the ‘Set CPF control repeat block and
attach it to the end of your code.
9. Run your code.
5
Modify your code so that it also displays one of the four houses from Harry Potter (Gryffindor, Hufflepuff,
Ravenclaw, Slytherin.) on the user interface. Hint: You can use the ‘Title Panel Set’ block to display the result!
Your finished code should look like this.
6 Lesson 10: Sorting Hat
1. Connect the power of CloudProfessor then press and hold the power button for two seconds; it will turn on and the
power indicator will light up.
2. Insert the Arduino Shield into Arduino Leonardo and use the USB cable to connect the CloudProfessor with Arduino
Leonardo. Attach the light sensor to port A0 and the RGB LED light component to port D7.
3. When the CloudProfessor detects the Arduino Leonardo, a notification will appear on your device; click the
notification to launch the Arduino Leonardo APP, and select the CPF Arduino app. Click on Socket Mode.
4. Press the execute button to enter the control user interface (UI).
5. Press the edit button to enter the program editing page.
Step-by-step instructions (JavaScript) 2
1
2
3
CPF Arduino app
Edit button
Execute button
Control user interface (UI) Program editing page
7 Lesson 10: Sorting Hat
Code recap (JavaScript)
Let’s explore some of the code used in the previous lessons.
1. cpf.get(“light sensor”);
The cpf.get(“light sensor”); statement returns the value of the light sensor . (Returns a
numeric value based on the brightness level of the environment) and stores it in a
variable called value. ui.set(“light sensor”, value); reads the value taken from the light
sensor and displays it in the program control Interface (UI).
2. cpf.set(“rgb led”, 0, 0, 0);
The cpf.set(“rgb led”, r, g, b); statement sets the colour of the attached RGB LED.
3. If / else:
The if / else statement is used to conditionally run code
depending on whether a Boolean condition is true or false.
In this example from lesson 1, if the light sensor value is less than (<) 500, the
RGB LED light will light up (based on the values taken from the UI); or else
(else), if the light sensor value is greater than (>) 500, the RGB LED light will
automatically turn off: cpf.set(“rgb led”, 0, 0, 0);
4. Math.random()
Through Math.random(), a random number between 0 and 0.999999 is generated. If we want to generate a whole
number in a range such as 1—255 we first need to multiply the result of the random function by 255 and then
round the result to produce a whole number e.g.,
5. cpf.sleep(1000);
The cpf.sleep(1000); statement is used to pause the code (time set in milliseconds). In the example above, the
program is paused for 1000 milliseconds (1 second).
6. Set CPF control request:
Finally, the cpf.repeat(); statement, usually found at the end of the program, tells the program to run the code from
the beginning again. The program will continuously repeat until the user closes the app or stops the program
manually.
3
8 Lesson 10: Sorting Hat
Step-by-step instructions (JavaScript)
Let’s create a new program to simulate a simple sorting hat.
1. Clear the existing code so that you have a blank canvas to create your new program. Press and hold on a selection
of code and click on ’Select all’ (1). Click on ‘Cut’ (2) to create a blank canvas (3).
Note: You can return to the original
program at any time by clicking on
the restore icon in the Save/load
menu.
2. First, let’s give our new script a name. Click on line 1 and type in the following: //Sorting Hat
3. Let’s also set the title of our app. Click on line 3 at type the following: ui.set(“title”, “Sorting Hat”);
4. Next, we need to read the light sensor to detect if the sorting hat has been placed on someone’s head. Click on line
4 and type the following:
var a0 = cpf.get(“socket a0”);
ui.set(“socket a0”, a0);
5. Next, we need to write the condition which checks to see if the sorting hat has been placed on someone's head
(light sensor value is less that 250). For this we will use an IF statement. Click on line 7 and type in the following
(making sure you leave a blank line on line 8):
if(a0 < 250) {
}
6. Next, we need to generate a random number (1 for each of the four houses / colours). Math.random() generates a
random number between 0 and 0.999999. If we want to generate a whole number in a range of 1—4, we first need
to multiply the result of the random function by 4 and then round the result to produce a whole number. Click on
line 8 and type in the following:
//rand : random number
var rand = Math.round(Math.random() * 4) + 1);
7. Next, we need to write the condition which changes the colour of the RGB LED based on the result of the random
number. In this example, the RGB LED will turn Red if a 1 is selected at random. Green if a 2 is selected, Blue if a 3 is
selected and White if a 4 is chosen. Click on line 10 and type in the following:
if (rand == 1) {
cpf.set(“socket d7”, 255, 0, 0);
} else if (rand == 2) {
cpf.set(“socket d7”, 0, 255, 0);
} else if (rand == 3) {
cpf.set(“socket d7”, 0, 0, 255);
} else {
cpf.set(“socket d7”, 255, 255, 255);
4
1
3
2
Change the values of the RGB LED to create your
own colour scheme.
9 Lesson 10: Sorting Hat
Step-by-step instructions (JavaScript)
8. At the moment, our RGB LED will flash briefly before re-running the code from the beginning. Let’s add in a natural
pause of about 3 seconds. Click on line 19 and type the following:
cpf.sleep(3000);
9. Whilst we are waiting for the sorting hat to be placed, we want the RGB LED to be turned off. Click on line 20 and
type in the following:
} else {‘
cpf.set(“socket d7”, 0, 0, 0);
10. Finally, we want the program to run continuously until the user ends the program. Click on line 24 and type the fol-
lowing:
cpf.repeat();
11. Run your code.
5
Modify your code so that it also displays one of the four houses from Harry Potter (Gryffindor, Hufflepuff,
Ravenclaw, Slytherin.) on the user interface. Hint: ui.set(“content”, “Slytherin”);
Your finished code should look like this.
10 Lesson 10: Sorting Hat
Extension
Students to modify their code so as to include more than 4 groups. Students can build a sorting hat out of paper or card to
house their CloudProfessor and use it to sort students in their class.
Differentiation
To support students, provide step by step guides.
To stretch students ask them to create a flowchart / pseudocode of their code first or code their solution using JavaScript.
Homework
Students to write up a summary of what they’ve learned; students to include screenshots and snippets of their code in
their summary.
Students to explore other types of random selectors e.g. random name picker from ClassTools.net and explain how they
think they work.
Links
Sorting hat scene from Harry Potter & the Philosopher’s Stone: https://www.youtube.com/watch?v=xQZFWA2KDbw
Random name picker (ClassTools.net): https://www.classtools.net/random-name-picker/
Collection of random name pickers: http://teachwithict.weebly.com/classroom-management-tools.html
Disclaimer: Use these sites at your own risk. Acer is not responsible for the content of external Internet sites. We
recommend that you check the suitability of any recommended websites links before giving them to students.
6
7
8
9