Skip to main content
Skip to main content

Visual to text coding
Lesson 2: Calculator

Years 5-6; 7-8

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

Included videos can be used by the teacher and/or students to see how to code each of the simple programs step-by-step in all three languages: Scratch, Python and JavaScript.

This lesson may take two to three 45-minute periods. It introduces how to make decisions (branching) and identify data types.

Cross-curricular approach...

This lesson can be used by Mathematics teachers keen to include programming and logical thinking as part of their course. However, it is suggested that students complete The Basics page to familiarise themselves with relevant skills on which this lesson builds.




   
Next 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
                    

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

  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:

    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)

  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.

    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

  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

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.

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
ca + 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

Solution code:

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.

 

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

  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!
    1. Write out the algorithm in pseudocode first.
    2. 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:

  1. 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:

  1. 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:
    • Python Cheatsheet (from Grok Learning)
    • JavaScript CheatSheet (Tip: Press the little blue tabs to move Variables, Basics, Strings and Data Types to the top.)