lesson 10 - acer for education magazine3 lesson 10: sorting hat ode recap (lockly) let’s explore...

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


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


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


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


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.


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


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


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) {


} else if (rand == 3) {


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


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 {‘


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.


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

lesson 10 - acer for education magazine3 lesson 10: sorting hat ode recap (lockly) let’s explore...

Documents