Home Teach and assess Classroom resources Courses or tutorials Visual to text coding course Lesson 2: Calculator
Lesson 2: Calculator Image

About this lesson

This is the second in a series of lessons to transition from visual coding to text-based coding with a general-purpose programming language.

Year band: 7-8, 5-6

Curriculum Links Assessment

Learning sequence

Download Lesson

Learning hook

Use the context of ordering food for lunch to explain (in a practical way) the use of branching.

  • You and your friends are having lunch at a local food court.
    • Small plate: $8.95
    • Large plate: $10.95
    You know you have enough money for at least the small plate. How do you decide what to order? Write down some conditions. These are questions that result in a yes or no answer, for example:
    • Am I very hungry?
    • Do I have enough money for the plate I want?
  • After ordering your food, you discover that drinks cost $2.95. Write down some conditions for this second decision.
    • Am I thirsty?
    • Do I have enough money for the plate and a drink?
  • You’ve just made two branching decisions. Here’s pseudocode for an example: 
    BEGIN
If I am very hungry and myMoney >= 10.95 then
    Say “I’ll have the large plate.”
    If I am thirsty and myMoney >= (10.95 + 2.95) then
        Say “And a drink too, please.”
    End If
Else
    Say “I’ll have the small plate.”
    If I am thirsty and myMoney >= (8.95 + 2.95) then
        Say “And a drink too, please.”
    End If
End If
END
Decorative image

Image credit: sugree/flickr, Creative Commons BY-SA 2.0

Learning map and outcomes

In this lesson, students will:

  1. access an online programming environment for visual code (Scratch) and for general-purpose programming (Python or JavaScript)
  2. learn how to code decisions with an example about movie ratings
  3. plan and code a calculator program where the user enters an operation (add, subtract, multiply or divide) as well as two numbers to operate on, then the computer calculates and outputs the result.

Learning input

Step 1

As a class, or in teams, design the calculator program as a flowchart. Effective designs may vary, for example, the program might ask for the operation first, in the middle, or last.

Here is one solution (click on the image to expand in a new window):

Flow chart for calculator: Start, leads to 'ask user for first number', leads to 'ask user for second number', leads to 'ask user for operation (add, subtract, multiply or divide)', leads to 'which operation is it?' this then divides into four options. Option 1 is followed if the user selects the 'add' operation and it states 'Set result to first number plus second number'. Option 2 is followed if the user selects the 'subtract' operation and it states 'Set result to first number minues second number. Option 3 is followed if the user selects the 'multiply' operation and it states 'Set result to first number times second number'. Option 4 is followed if the user selects the 'divide' operation and it states 'Set result to first number divided by second number'. All four options then link to the next tile, which is 'display result', and then finally 'end'.

Image: Flow chart for calculator (simplified)

Step 2

In the following revised flowchart, we break the big decision into four yes or no decisions. This is closer to how we will code the program (click on the image to expand in a new window).

Flow chart for calculator: Start, leads to 'ask user for operation (add, subtract, multiply or divide', leads to 'ask user for first number', leads to 'ask user for second number', leads to 'is the operation to add?'. If yes, leads to 'set result to first number plus second number'. If no, leads to 'is the operation to subtract?'. If yes, leads to 'Set result to first number minus second number'. If no, leads to 'Is the operation to multiply?'. If yes, leads to 'set result to first number times second number'. If no, leads to 'Is the operation to divide?'. If yes, leads to 'Set result to first number divided by second number'. All options lead to the command 'display result', which then leads to 'end'.

Image: Flow chart for calculator

Step 3

Once the flowchart is complete, write the program in pseudocode (structured English). Remember, each of your conditions must come to a yes (true) or a no (false).

BEGIN
Display “Choose your operation - a for add, s for subtract, m for multiply, d for divide:”
operation ← input from user
Display “Enter the first number:”
firstNumber ← input from user
Display “Enter the second number:”
secondNumber ← input from user

If operation = “a” then
    Display “The result is “, firstNumber + secondNumber
Else If operation = “s” then
    Display “The result is “, firstNumber - secondNumber
Else If operation = “m” then
    Display “The result is “, firstNumber * secondNumber
Else If operation = “d” then
    Display “The result is “, firstNumber / secondNumber
End if
END
Starting pseudocode Image Click to learn more
Starting pseudocode

Learning construction

For more on setting up and choosing a language, see Setting Up.

Step 1: Introducing branching

Decision making is called branching or conditionals.

In general-purpose programming, we do this with IF, THEN and ELSE code structures.

Strategies for coding and debugging Image Click to learn more
Strategies for coding and debugging

Have students practice branching. Interpret the following pseudocode and code it in Scratch and either Python or Javascript. Students should predict the output of the program (what it will display) before doing their code.

BEGIN
a ← 20
Display a
b ← 14
Display b
c ← a + b
If c > 34 then
    Display “You win $1 000 000!”
Else
    Display “Better luck next time.”
End If
If (a + c) = 54 then
    Display “YOLO”
End If   
END

The following video is a real-world example of how branching is used in a more advanced program. If there is connection to the internet ( if (response.status_code == 220) then proceed, otherwise print(' no connection') and the program stops.

Solution Code

Step 2: Calculator

It’s time to code our calculator. The video above covers the entire process of building the code.

Solution Code

Step 3: Tinker task

Modify your calculator program to allow a fifth operation: power. If the user enters ‘p’ for the operation, the first number is raised to the power of the second number.

eg: if first number is 5 and second number is 3, result is 53 = 125

You’ll need to research how to perform this operation in Python or JavaScript. See the 'Resources' section at the bottom for cheat sheets.

Note: there is no power block (xy) in Scratch.

Solution Code

Challenge

These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate Application and Creation.

Challenge 1

Code a new program in Python or JavaScript to ask for the user’s name, then give a custom reply depending on the name entered. For example:

Hi, what’s your name?   Dani
    You’re the best, Dani!
    Hi, what’s your name?   Wei
    Welcome, Wei!
  • Write out the algorithm in pseudocode first.
  • If it helps, code the program in Scratch before going on to Python or JavaScript.

Challenge early finishers to add a second question about the number of Wi-Fi devices in their home, then give a smart comment based on the value.

Solution Code

Challenge 2

Design (flowchart or pseudocode) then code a program to sell you an ice cream.

  • First, ask which type of cone (plain = $1, cup = $1.50, waffle = $2).
  • Next, ask which flavour (always $2.50, no matter what flavour).
  • Next, ask which topping (nuts = 50c, sprinkles = 50c, chocolate sauce = $1).
  • Finally, display the total cost.
Solution Code

Challenge 3

Code a maths quiz, for example:

What is 2 + 5?  7
    That’s right!
    What is 10 – 5?  5
    That’s right!
    What is 3 * 5?  25
    Incorrect.
    Your total score is 2 out of 3.

Here’s a way to break down this challenge into smaller chunks:

  1. Ask one question, then check if the user got it right. Test your program.
  2. Add two more questions to follow the first one. Test your program.
  3. Include a score variable to keep track of how many questions the user got right.
  4. (Extension) Can you make your questions unique every time? Check out how to generate random numbers in Lesson 3.

Resources

  • Setting up online environments
  • Online environments for coding in each language
    • Scratch
    • repl.it: an online environment suited to Python
    • JSFiddle: an online environment suited to JavaScript
  • Cheat sheets listing basic commands for coding: