Topic FUNCTIONS AND LOOPS

Class Students learn to create abstractions in their code by declaring

Description functions. Students also learn to replace repetitive code with a
for-loop.

Class PRO-C5

Class time 45 mins

Goal ● Write custom functions to serve the ball, reset the ball and
draw the net.
● Draw the net using line instruction and for-loop.

Resources ● Teacher Resources

Required ○ [Link] login
○ Laptop with internet connectivity
○ Earphones with mic
○ Notebook and pen

● Student Resources
○ [Link] login
○ Laptop with internet connectivity
○ Earphones with mic
○ Notebook and pen

Class structure Warm Up - Slide show option 15 Mins

Teacher-Led Activity 8 Mins
Student-Led Activity 30 Mins
Wrap Up - Slide show option 5 Mins

Start the video call from H2H

WARM UP SESSION - 15mins

Teacher starts slideshow from slides 1 to 10

Refer to speaker notes and follow the instructions on each slide.
© 2019 - WhiteHat Education Technology Private Limited.
Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
1
 Activity details Solution/Guidelines

Hi, so good to see you again! How have you been? ESR​:Thanks, yes I am
excited about it.
Run the presentation from slide 1 to slide 10.
Click on the slide show tab
Following are the warm up session deliverables: and present the slides.
● Connecting students to the previous class.
● Explaining function and loop through real life
connections.
● Definition of functions and loops.

QnA Session

Question Answer

What is the difference between the two: A

a)a=b
b)a===b

A. a. Assigning value of b to a.
b. To check if the two values are same or not(we use
it as a condition in if-statement)
B. [Link] check if the two values are the same or not(we
use it as a condition in if-statement).
b. Assigning value of b to a.
C. a. The correct way of writing the code.
b. Incorrect code.
D. Both give us the same output.

How many choices are possible when using a single if-else B

statement?

A. 1
B. 2
C. 3
D. 4

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
2
 Continue the warm up session

Activity details Solution/Guidelines

Run the presentation from slide 11 to slide 14 to set the Narrate the story by using
problem statement. hand gestures and voice
modulation methods to
bring in more interest in
Following are the warm up session deliverables: students.
● Introduce students to the coding environment -
Workspace, blocks and output.
● Steps to write and run the code.

Teacher ends slideshow

TEACHER-LED ACTIVITY - 8mins

Initiates Screen ShareTeacher

CHALLENGE
● Use function abstractions and loops to make code more readable.

Step 2: "Let's look at the last version of the The student reads the
Teacher-led Pong Game we made in the last comments and the code
Activity class." and explains what's
(15 min) Teacher opens the project ​Pong Stage happening in the code.
2

"I have commented all my code.

Can you read the code from the top
and explain what we are doing here?"

"Amazing! A good programmer should Student listens

not only be able to write code but also
read and explain code written by
others. And you seem to have done a

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
3
 good job in reading and explaining this
code. Wonderful."

"Remember, the original Pong Game ESR:

had a dotted line at the centre?" Yes

"How do you think we can draw the ESR:

line? Do you see anything in the line() instruction?
drawing toolbox, which can help us
draw the line?"

"Let's drag the line() instruction inside ESR:

the draw()" It will draw a line.

What do you think will happen if we The student tries to guess

run the code?" where the line would
appear.
"Where?"

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
4
 "Let's run the code and find out." Student observes the
output.

"What do you think are the numbers Student takes a guess.

inside the line()?"

"Let's experiment and find out."

"Let's make changes to the first Student observes.

number and observe what happens to
the line."

Teacher changes the first number and

runs the code again.

"What changed?" ESR:

The starting point of the
line shifted.

"In which direction, horizontally or ESR:

vertically?" Horizontally
"What do you think the first number ESR:
stands for?" The horizontal position of
the starting point of the
line.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
5
Code:

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
6
 "Let's make changes to the second Student observes
number and run the code again"

Teacher changes the second number

and runs the code.

"What happened to the line?" ESR:

The starting point of the
line shifted - in the vertical
direction.

"What do you think the second number ESR:

stands for?" The vertical position of the
starting point of the line.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
7
Code:

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
8
 "Can we make a guess, what the third ESR:
and fourth numbers stand for?" The horizontal and vertical
position of the end point of
the line.

"Let's check if your guess is right" Student observes the

Teacher modifies the third and the output.
fourth numbers and runs the code.

"I think our guess was right . So the

first two numbers represent the x and y
position of the starting point and the
last two numbers represent the x and y
position of the end point."

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
9
Output:

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
10
Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
11
 "Let's now draw a simple line at the
centre of the screen.

Assist the student to get values using

the grid.

What do you think will be the x and y ESR:

position of the starting point?" x =200
y=0

What do you think will be the x and y ESR:

position of the ending point?" x = 200
y = 400

"Let's put these numbers inside the The student observes and
line() instruction and run the code to learns.
see if we get the line at the centre."

Teacher changes the numbers and

runs the code.

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
12
Output:

"We have the line in the centre ESR:

now....but we wanted a dashed line yes
instead of a continuous line, didn't we?
Like a net?"

"How do we do that?" ESR:

We use many lines.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
13
 "Let's try to draw the first dash. Let's
make our dash line's height to be 10
and leave a gap of 10 after every dash
line."

"What will be the instruction to draw ESR:

the first dash?" line (200, 0, 200, 10)

Teacher modifies the line instruction

to:
line (200,0,200,10);

Teacher runs the code to display the

first dash.

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
14
Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
15
 "How will we display the second ESR:
dash?" We will use a second line
instruction.

"What will be x and y position of the ESR:

starting point and the end point? line(200, 20, 200, 30)
Remember we are leaving a gap of 10
after the first dash"

"We can also write:

line(200, 0+20, 200, 0+20+10)"

"The computer will do the calculation Student observes the

for us. Let's run the code and see if we output.
get the second dash in the right place."

Teacher writes and runs the code.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
16
Code:

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
17
 "Let's draw the third dash. What ESR:
should be the instruction to the line(200, 0+20+20, 200,
computer? Remember we need a dash 0+20+20+10)
which is after a gap of 10 and has a 10
height"

"Let's try and see if we get the third

dash using this instruction."

Teacher writes and runs the code.

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
18
Output:

"If you observe carefully, what's ESR:

happening is that we are just adding Yes!
20 to the y position for both the starting
and ending point for drawing each new
dash. Do you see that?"

Let's add some more dashes using

this:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
19
 Teacher adds 5 new dashes

Code:

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
20
 "We can keep doing this, but I am ESR:
getting a familiar unpleasant feeling Because we are repeating
similar to writing 'I will never be late to ourselves?
school.' Why is that?"

"Yes! We are repeating ourselves. And

remember in programming we have an
important principle - DRY - Do not
repeat yourself. A good code avoids
repetition.

Let us be good programmers and

avoid repetition."

"What if we had a number which would -

automatically increase itself by 20,
then we could just write:
line(200, num, 200, num +10)

Explanation:
Assume​ num ​(y position of the starting
point)​ ​automatically increases by 20
num + 10 ​(y position of the end point)
makes the line of length 10.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
21
 We would want the number to keep
increasing till we reach the end of the
screen and we would want the line()
instruction to run for each increase. "

"We have something in our toolbox to

give this instruction to a computer! We
use something called for-loop to do it."

Teacher drags and drops the for-loop

inside draw().

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
22
 Inside for loop:
"We tell the computer:

● Store the number 0 in num

var num = 0;
● Keep increasing the number in
num by 20
num = num + 20;
● Each time the number is
increased in num, run the
instruction: line(200, num, 200,
num+10)
line(200, num, 200, num + 10);
● Stop increasing the number
when the number inside num
becomes 400
num < 400"

"This is called a for-loop because the

computer keeps running the same
instructions inside the curly brackets
(again and again and again) till the
condition num < 400 is true."

What do you think will happen if we Student takes a guess at

run the code? what the output would be.

Allow the student to experiment with

the different numbers and see what
happens or how the output changes.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
23
Code:

"Let's run the code and find out..." The student observes and
learns.
"We have what we want!!"

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
24
 "One final thing. Remember, our code ESR:
should read like a story? No
Right now, this for-loop is not very
readable. If someone else reads this -
would they know that this draws a
net?"

"Wouldn't it be nice, if we could just tell ESR:

the computer - drawnet() - and it draws Yes / Will the computer
the net?" understand?

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
25
 "We can actually teach the computer The student listens,
to draw the net using drawnet(). We do observes and learns.
that by defining a function drawnet
which tells the computer how to draw
the net."

We define a function for a computer

like this:

Teacher defines the drawnet()

function.

We put instructions to draw the net

inside this function.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
26
 "What do you think will happen if we Student takes a guess.
run the code now?"

"Let us run and find out"

Our computer knows how to draw a

net using drawnet() now. It also makes
our code more readable. Don't you ESR:
think so? Yes!

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
27
Code:

Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
28
 Ok! Now I want you to draw the net on ESR:
your own using for-loop. Yes!

Also, I want you to define functions for

drawnet(), serveball() and resetball()
and use it in your code to make it more
readable.

Ready for the challenge?

Teacher Stops Screen Share

Teacher starts slideshow :Slides 15-17

Run the presentation for slides 15-17 to set the student

activity context.

Now it's your turn. Please share your screen with me.

Teacher ends slideshow

● Ask Student to press ESC key to come back to panel

● Guide Student to start Screen Share
● Teacher gets into Fullscreen

ACTIVITY
● Implement for-loop to draw the net at the centre of the screen.
● Write custom functions to draw the net, serve the ball and reset the ball.

Step 3: Guide the student to draw the net Student opens ​Student
Student-Led using for-loop. Activity Link
Activity
(20 min) Observe the student for typos. The student writes for-loop
to draw the net.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
29
Code:

Guide the student to write a function The student writes the

drawnet() and use it in their program. drawnet() function and
uses it in their code.

Observe the student for typos. Student runs the code and
sees the output.

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
30
Calling the function:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
31
 "Let's write functions to serveball() and
resetball() and use it in our code so
that our code becomes more
readable."

"Can you locate the place where we

serve the ball in the game?"

Help the student locate the place in the The student tries to locate
game where the ball is served. the place where the ball is
served in the game.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
32
 "Let's put serveball() there and define The student writes a
a function to serve the ball " function to serve the ball
and uses it in the code.

Guide the student to write the function Student runs the code and
serveball() and use it in their program. sees the output.
Observe the student for typos.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
33
Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
34
Using the function inside the program:

"Let's locate the place where we reset

the ball in the game"

Help the student locate the place in the The student tries to locate
game where the ball is reset. the place where the ball is
reset in the game.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
35
Code:

"Let's put resetball() there and define a The student writes a

function to reset the ball " function to reset the ball
and uses it in the code.

Guide the student to write the function Student runs the code and
resetball() and use it in their program. sees the output.
Observe the student for typos.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
36
Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
37
Using the function in the program:

"Do you think our code is more ESR:

readable now?" Yes

"We have learned a great deal in

today's class. Let's wrap up the class
for today."

Teacher Guides Student to Stop Screen Share

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
38
 Quiz time - Click on in-class quiz

Question Answer

What is the correct syntax of for-loop B

A. for (condition test;initialization; increment or

decrement) {
//Statements to be executed repeatedly
}

B. for (initialization; condition test;increment or

decrement)
{
//Statements to be executed repeatedly
}

C. for (condition test;increment or decrement)

{
//Statements to be executed once
}

D. for (initialization; increment or decrement)

{
//Statements to be executed repeatedly
}

What must the change be so that the following fragment B

prints out the even integers 0 5 10 15 20?
for ( int j = 0; j <= 20; _______ ){
[Link]( j + " " );
}

A. j+5
B. j = j+5
C. J+++++

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
39
 D. j

End the quiz panel

WRAP UP SESSION - 5 Mins

Teacher starts slideshow Slide 18-24

Activity details Solution/Guidelines

Run the presentation from slide 18 to slide 24

Following are the warm up session deliverables:

● Explain the facts and trivias Guide the student to
● Next class challenge develop the project and
● Project for the day share with us.
● Additional Activity

Teacher ends slideshow

Project Overview Note:​ This is a tiered project with Students engage with the
multiple tasks. All students must do the teacher over the project.
main task. The main task is very
similar to the projects that are already
live. Each tiered project has two or
more additional tasks which are
optional.

VEGETABLE GARDEN - 1

Goal of the Project:

In todays you learned to create
abstractions in your code by declaring
functions. You also learned to replace
repetitive code with a for-loop.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
40
 In this project, you will have to practice
and apply what you have learned in
the class and create the layout of a
farm.
Story:
Richard is a hardworking and
dedicated farmer. He is always
experimenting with new farming
methods and now he wants to grow
new crops on his farm.

Help Richard set the locations of the

plants in rows as shown in the image
on the right. Each gray square is the
position of a plant.

I am very excited to see your project

solution and I know you will do really
well.

Bye Bye!

Teacher Clicks

Additional "Let's start a new project and write "I The student tries to write
Activities will never repeat myself" - 20 times code for writing "I will never
using for-loop. This might help us repeat myself" - 20 times
remember the Do Not Repeat Yourself on the screen using
(DRY) principle of writing code." for-loop.

Guide the student to write the code for

"I will never repeat myself" - 20 times -
using for loop.

Code:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
41
Output:

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
42
 Activity Activity Name Links

Teacher Activity 1 Pong Stage 2 [Link]

melab/pI8hRqjNi-eUH11vHtPFDA
OwWvjIUU350S5Thk-57Zc/edit

Student Activity 1 Pong Stage 2 [Link]

melab/pI8hRqjNi-eUH11vHtPFDA
OwWvjIUU350S5Thk-57Zc/edit

Additional Activity 1 Empty Activity [Link]

melab/D2YMjkHmDuWWRAnFUL
ECsNU6_XQ-Ca58I7hmgSXuEG
Q/edit

Teacher Reference visual Visual aid link [Link]

aid link isual+Project+Asset/PRO_VD/C5
[Link]

Teacher Reference In-class In-class quiz [Link]

quiz isual+Project+Asset/PRO_VD/PR
O-C5_Jayshree.[Link]

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
43