Flowcharts, Pseudocode and Block Coding Algorithms for JSS 1

Basic Algorithm for Creating Programs (Block Coding)

Performance Objectives

By the end of the lesson, students should be able to:

1. describe flowcharts;
2. state the importance of flowcharts in programming;
3. interpret flowcharts;
4. describe pseudocodes;
5. state the benefits of pseudocodes;
6. use pseudocodes to execute a task.

Introduction to Algorithms

An algorithm is a step-by-step set of instructions or rules followed to solve a problem or complete a task.

Before writing a computer program in any language, including block-based programming languages like Scratch, a programmer must first plan the steps to solve the problem. This plan is the algorithm. Algorithms can be represented in different ways so that humans can understand them easily before they are converted into computer code. The two most common tools used to represent algorithms are flowcharts and pseudocode.

Meaning of a Flowchart

A flowchart is a diagram that uses graphic symbols to show the step-by-step sequence of operations or steps in an algorithm.

Flowcharts use standard geometric shapes to represent different types of actions, and arrows to show the direction of the flow from one step to the next. This visual representation makes it easy to see how a program starts, processes information, makes decisions, and ends.

Flowchart Symbols and Meanings

Standard symbols are used internationally to design flowcharts. Each shape has a specific meaning and function in a program design.

The standard flowchart symbols include:

1. Terminal Symbol (Oval): This shape represents the starting point or ending point of a flowchart. It contains the word “Start” or “Stop”.
2. Input/Output Symbol (Parallelogram): This shape represents inputting data into the program or outputting results from the program. For example, reading a number or displaying a message.
3. Processing Symbol (Rectangle): This shape represents an action, calculation, or process. For example, adding two numbers together or moving a character on a screen.
4. Decision Symbol (Diamond): This shape represents a decision point where a question is asked. The answer to the question determines which path the program will follow. The paths are usually labelled “Yes” and “No”, or “True” and “False”.
5. Flowlines (Arrows): These lines connect the symbols and show the direction of the process flow.

Importance of Flowcharts in Programming

Flowcharts are highly valuable tools for programmers and system designers.

The main benefits of using flowcharts in programming include:

1. Easy Communication: Flowcharts provide a clear visual way to explain the logic of a program to other people, including non-programmers.
2. Effective Analysis: A flowchart allows a programmer to analyse the problem more effectively, ensuring that no steps or logical possibilities are missed.
3. Efficient Coding: Once a flowchart is drawn, it serves as a blueprint or guide that makes writing the actual program code much faster and easier.
4. Systematic Debugging: Flowcharts help programmers locate errors or logical bugs in a program by tracing the flowlines step by step.
5. Proper Documentation: Flowcharts serve as permanent records of how a program works, which is useful for future maintenance or updates.

Interpreting Flowcharts

Interpreting a flowchart means reading and understanding the logic of the algorithm by following the symbols and flowlines from the start to the end.

To interpret a flowchart correctly, a person must follow the direction of the arrows, perform the action described in each shape, and answer the questions in the decision diamonds to choose the correct path.

Worked Example 1: Flowchart for Making Tea

Making a cup of tea is a daily activity that can be described as an algorithm. The flowchart below shows the step-by-step process of making tea, including a decision point about adding sugar.

To interpret the tea-making flowchart, follow these steps:

1. Start the process at the “Start” terminal.
2. Move down to the first process box and boil the water.
3. Move to the next process box and pour the hot water into a cup containing a tea bag.
4. Reach the decision diamond and answer the question: “Want sugar?”.
5. If the answer is “Yes”, follow the “Yes” arrow to the process box “Add sugar”, then proceed to “Stir tea”.
6. If the answer is “No”, follow the “No” arrow directly to the process box “Stir tea”, skipping the sugar step.
7. Move to the output box to serve the tea.
8. End the process at the “Stop” terminal.

Worked Example 2: Flowchart for a Walking Animation

In block coding environments like Scratch, a walking animation is created by repeatedly moving a character (sprite) and changing its appearance (costume). The flowchart below shows the algorithm for a simple walking animation that repeats five times.

To interpret the walking animation flowchart, follow these steps:

1. Start the program at the “Start” terminal.
2. Set the step counter to 0 in the first process box.
3. Reach the decision diamond to check if the count has reached 5.
4. If the count is 5 (Yes), follow the arrow to “Stop” to end the animation.
5. If the count is not 5 (No), follow the arrow to move the sprite forward by 10 steps.
6. Change the sprite’s costume to the next costume to make it look like it is taking a step.
7. Wait for 0.2 seconds so the animation does not run too fast.
8. Add 1 to the count to record that one step has been completed.
9. Follow the flowline back up to the decision diamond to check the count again.

Meaning of Pseudocode

Pseudocode is an informal, detailed description of a computer program or algorithm written in simple English rather than a programming language.

The word “pseudo” means false or imitation. Therefore, pseudocode is “imitation code”. It does not follow the strict grammatical rules (syntax) of any specific programming language, making it easy for humans to read and write. It uses structured English to outline the logic of the program before actual coding begins.

Benefits of Pseudocode

Pseudocode is widely used in software development because of its simplicity and structure.

The main benefits of pseudocode include:

1. Simplicity: It is written in plain English, which means anyone with basic reading skills can understand the program logic.
2. Language Independence: Pseudocode does not belong to any specific programming language. A programmer can write pseudocode once and then translate it into Scratch, Python, Java, or any other language.
3. Quick Writing: It is faster to write than a flowchart because it does not require drawing shapes, and faster than actual code because it does not require correct programming syntax.
4. Easy Modification: Changes can be made quickly by simply editing the text lines.
5. Bridge to Code: It acts as an intermediate step that helps programmers transition smoothly from a mental idea to actual computer code.

Writing Pseudocode

When writing pseudocode, standard words are often used to represent programming structures. These words are usually written in capital letters to make the structure clear.

Common keywords used in pseudocode include:

1. START / BEGIN: Marks the beginning of the algorithm.
2. INPUT / READ: Gets information from the user or a sensor.
3. OUTPUT / DISPLAY / PRINT: Shows information on the screen.
4. IF / THEN / ELSE: Used for decisions and conditions.
5. REPEAT / WHILE: Used for loops and repeating actions.
6. END / STOP: Marks the end of the algorithm.

Worked Example 1: Pseudocode for Making Tea

The algorithm for making tea can be written in pseudocode as follows:

START
  Boil water
  Pour hot water into a cup with a tea bag
  IF sugar is wanted THEN
    Add sugar to the cup
  ENDIF
  Stir the tea
  Serve the tea
END

Worked Example 2: Pseudocode for Walking Animation

The algorithm for the walking animation project can be written in pseudocode as follows:

START
  Set count to 0
  WHILE count is less than 5 DO
    Move 10 steps
    Switch to next costume
    Wait 0.2 seconds
    Add 1 to count
  ENDWHILE
END

Designing a Flowchart and Writing Pseudocode (Practical Guide)

This section provides step-by-step instructions on how to design a flowchart and write pseudocode for a simple task.

How to Design a Flowchart

The procedure for designing a flowchart involves the following steps:

1. Identify the starting point and ending point of the task.
2. List all the inputs needed and the expected outputs.
3. Write down the processing steps and decisions in the correct order.
4. Draw the “Start” oval at the top of the page.
5. Draw flowlines downwards and add the input, process, decision, and output shapes in sequence.
6. Write the specific instruction inside each shape.
7. Draw the “Stop” oval at the end of the sequence.
8. Review the flowchart by tracing the paths with a finger to ensure the logic is correct.

How to Write Pseudocode

The procedure for writing pseudocode involves the following steps:

1. Write “START” on the first line.
2. Use simple English statements to describe each action.
3. Indent lines inside decisions (IF-THEN) or loops (WHILE) to make the structure easy to read.
4. Use capital letters for key control words like IF, THEN, ELSE, WHILE, and END.
5. Write “END” on the final line.

Summary

Algorithms are essential planning tools in computer programming. Flowcharts provide a visual diagram of the algorithm using standard shapes like ovals, rectangles, parallelograms, and diamonds. Pseudocode provides a text-based, structured English description of the algorithm. Both tools help programmers design, analyze, and communicate program logic clearly before writing actual block code in environments like Scratch.

Questions for Evaluation

The following questions can be used to assess understanding of this unit:

1. Define a flowchart.
2. State three benefits of using a flowchart in programming.
3. Identify the flowchart symbol represented by each of the following shapes:
   1. Oval
   2. Parallelogram
   3. Rectangle
   4. Diamond
4. Describe pseudocode and state two of its benefits.
5. Construct a flowchart for the process of washing hands.
6. Write the pseudocode for a program that asks a user for their name, and then displays a welcome message saying “Hello” followed by their name.