Module 002 Problem Solving through

Flowcharts 1

“Creativity is the process of having original ideas that have value. It is a

process; it’s not random.”
–Ken Robinson.

Have you encountered challenges before? How did you solve it? Were you
successful in overcoming those challenges? If not, do you attribute your
failure in your lack of planning and visualization of the situation? Those
questions are our focus for these two consecutive modules about Problem
Solving through Flowcharts.

In this first of the two-part modules, you will learn about the art of problem
solving, particularly in Computer Programming. To aid you with the
conceptualization of your soon-to-be instructions that you will command the
computer to do, you will create a visual aid called flowcharts. In addition to
that, you will be exposed to the Research-standard syntax called Pseudocodes.

At the end of this module, you will be able to:

1. Identify the characteristics of problem solving in computer programming
2. Identify and describe the symbols in flowcharting
3. Identify the conventions in pseudocodes
4. Organize a day-to-day process using flowcharts and pseudocodes
5. Deduce the benefits and shortcomings of flowcharts and pseudocodes

Again, researching beyond the coverage of this module is highly encouraged

to supplement your understanding of the topics covered. And as always,
think and see beyond the box.

So, what are we waiting for? Let us continue our explorationof the world of
Computer Programming.

Course Module
Recall

In the previous module, we talked about the field of Computing and

Programming in general. We also enumerated the domains under Computer
Development, namely:
a. Web Development
b. Back-end Development
c. Mobile Development
d. Data Science
e. Application Development
f. API Development, and
g. Embedded Systems Development
Lastly, we went through an overview of the infamous programming
languages as of 2016:
a. JavaScript
b. Java
c. Python
d. Ruby
e. PHP
f. C++
g. C#
h. Go
i. Shell
j. Objective-C

Introduction

Problem Solving is defined as the systematic approach in searching for a

solution or set of solutions to a specific problem. This approach can be in any
form such as by listing the possible options and choosing the most efficient of
them, providing weights to all possible scenarios and choosing the most
significant scenario, or applying small-scale to massive calculations to
incorporate values to challenges and optimally solve those smaller
challenges to complete the main problem. With addition of several other
characteristics, in the context of Computer Science, this can be called
algorithms.

In this module, we will be taking the concept of Problem Solving in the

context of Computer Programming; how to come up with the right solution to
a given problem.
Problem Solving in Computer Programming

Problem Solving is the most essential skill that anyone venturing the field of
Computer Programming needs. It basically says whether a specific challenge
is worth solving given a finite time. However, what makes problem solving in
Computer Programming different from the conventional problem solving are
the characteristic that a solution to the problem should have met. Problem
Solving in Computer Programming should satisfy the following
characteristics:
1. Solvable
2. Goal-oriented
3. Verifiable
4. Quantifiable
5. Doable in finite steps
6. Doable in current technological limitations

Problem solving in Computer Programming requires the problem to be

solvable. This characteristic might seem to be an obvious requirement, but is
tend to be overlooked in several ways. A famous quote from a 2009 American
comedy-drama film “Up in the Air” says “It’s only a problem, if it has a
solution.” This presents one aspect of solvable that focuses on the problem –
there should exist at least one probable solution. It is unthinkable to process
problems that pose no direct solutions. It is like playing NBA-sized basketball
with tigers. That situation is designed for humans-only convention, whereas
the subjects involved cannot in anyway be altered to satisfy the need of the
situation in this very moment.

Problem solving also requires the problem to be goal-oriented. A goal focuses

the solutions to meet a specific one-path ending. Setting a goal to the
problem-at-hand lets you identify several approaches and solutions. It also
set a few limitations to which possible solutions are subjected to determine
accept-reject criteria.

Problem solving also requires the problem to be verifiable. It is impractical to

provide solutions for problems where you cannot even verify the validity of
your solutions. In addition, there is also the need to certify that there exist
manyother criteria to make the solution fail and succeed. For example, we
can have a slot machine that accepts only 5-peso and 1-peso coins be
subjected to tests wherein you can attempt to insert 10-peso, 5-peso, 1-peso
and 5-cent coins into the slot machine. The slot machine should then reject
the 10-peso and 5-cent coins in some defined way but accept the 5-peso and
1-peso coins.
Course Module
 Problem solving also requires the problem to be quantifiable. It is
unworkable in Computer Programming if the problem cannot be quantified
in any scale possible. For instance, we have a problem which is about
determining the acceptance rating of a proposed Thesis title. This problem
can be solved through Computer Programming provided a qualifying
criterion is provided. However, if tasked to provide solution for a problem to
classify which of the given inputs is fake and which is real.

Problem solving also requires the solution to be doable in a finite number of

steps. We live in a world of limited resources. One of those resources
concerned in Computer Programming is time. It is highly impractical to
provide a solution that takes a million of hours to complete. In addition to
time, computers have a limited amount of allocated resources, namely: RAM,
storage and processing power. Maxing out these resources just for a solution
is not only impractical but also useless.

Lastly, problem solving also requires the problem and solution to be doable
within the limits of the current technology. In computer programming, we
simply reuse the resources currently at hand. Relying on other resources that
either does not yet exist or is impossible to get our hands on is proven to be
unintelligible. We do not concern ourselves with what will probably be
available in the future since Computer Programming aims for practicality
over theory. We have Computer Science for those regards.

Flowcharts Essentials

Now that we have a set of characteristics which we can use to determine the
viability of problems and possible solutions in terms of Computer
Programming, we now should be able to present our solution in a visual
format called flowchart. Flowchart is a visual aid showing a sequence of
actions or operations involved in Computer Programming. Flowchart helps
computer programmers in visualizing their thought solution which helps
them visually relay their low-level solution and helps to identify key aspects
of the solution which can pose problems given a specific combination of
inputs and outputs. Figure 1 shows a sample of a flowchart which illustrates
the process of going to school using one of the two transportation systems
available, the bus and the subway.
 Figure 1. Lau, J and Chan, J. (2017). [G05] Charts & Diagrams [Online Blog].
Retrieved from http://philosophy.hku.hk/think/strategy/chart.php

The flowchart in Figure 1 shows almost all the fundamental elements used in
flowcharting. That flowchart solves the problem of going to school by
choosing an appropriate transportation system based on time.

Let us go through the process in the flowchart. The flowchart starts with the
student leaving home. After leaving, the student needs to choose the best
transportation system he will take to arrive at his school.

Based on the given flowchart, we can assume that there is a heavy buildup of
traffic past 7 AM. It is therefore a better choice to take the subway if the time is
past 7 AM.

The student then needs to check the time whether it is already past 7 AM. If
not, he can still choose bus as his transportation vehicle. If it is already past 7
AM, he needs to take the subway to arrive at school on time. After taking the
best transportation system, the flowcharts end with the student arriving at
school on time.

You might have noticed that the flowchart uses two distinct symbols for
checking the time and deciding what action to do. This is essential in Computer

Course Module
Programming. You need to learn how to identify distinct actions. The act of
checking the time is totally different from deciding which action to do.
Although it is tempting to simply combine the two actions, the computer will
still read them as two distinct actions. Hence as a promising computer
programmer, you need to be able to personally identify such easily missed
distinctions and act accordingly as how the computer will interpret those
instructions. Knowing this will not only make your codes easy to read, but also
optimize your codes.

Symbols used in Flowcharts

Flowcharts use a defined set of symbols to represent a specific action
performed. Those symbols are used like how you will use Lego bricks to
build something. In Computer Programming, those symbols are combined in
a specific manner to build an application, for example. One thing to note for
the symbols is like a set of Lego bricks, symbols should be used in a manner
that fits the requirements of the solution to create a logical flow of actions
(i.e. instructions for the computer).

Symbol Name Description

Terminator A symbol used to indicate the

beginning or the end of the process
S
flow
T
Process AA symbol used to indicate a specific
cR action done
oT
Preparation u A symbol used to prepare data or
i
n initialize something
t n
Data A symbol used to retrieve value from
=t
the
c user as input or present value to
1 Ithe user as output
no
u
pA
Decision symbol used to identify which of
n
uthe two possible paths will be taken
t W on the conditions set inside
tbased
h
u,
On-page i
sA symbol used to connect two or
u l symbols belonging to the same
Connectors emore
s e together to form a continuous
rpage
ec
iprocess
nr o
Off-page A symbol used to connect two or
pi u
Connectors more symbols belonging to the
un n
different
p t pages together to form a
tcontinuous process
u<
t =
u
s
e
r
 Table 1. Basic Symbols in Flowcharting

The symbols in Table 1 are connected by a line with one and only one arrow
head, usually called arrow. In Mathematics, this is a ray with no suggestive
prominent endpoint. The arrow head determines the flow of the process,
where next symbol to read is.

Process 2 Process 1

Figure 2. Partial Flowchart Showing the Progression of Symbols

Figure 2 shows the progression of symbols using the arrow. In the figure,
Process 2 is executed first before Process 1 despite their naming. The arrow
is the sole indicator of the progress.

A Process 1

Process 2

Process 3

Process 4 A

Figure 3. Partial Flowchart Showing another Progression of Symbols

Figure 3 shows a more complex progression using arrows. In this figure,

Process 1 is executed first, followed by Process 2, then Process 3. In Process
3, the arrow points to Process 4 which is pointed back to Process 1. This
specific example is a non-terminating process which should be avoided in
actual programming design.

Standards in Flowcharting

Course Module
Now that you know the different symbols used in creating your flowcharts,
you need to adhere to the standards used in writing flowcharts. In this
section, you will learn the different standards in flowcharts which should aid
you also in writing your codes in the future. These standards were set not to
limit you with the usage of the symbols, but to give you freedom in setting
your logic for writing computer instructions through computer
programming.

START

END

Figure 4. Start Terminator and End Terminator

Flowcharts should always have two (2) and only two terminator symbols,
namely the Start terminator and the End terminator. The Start terminator
always starts the entire flowchart sequence. It should always be the first
symbol found at the top-most of all flowcharts. If the flowchart sequence is
multi-paged, the Start terminator is found at the first page. The End
terminator always ends the entire flowchart sequence. It should always be
the last symbol found at the bottom-most of all flowcharts. If the flowchart is
multi-paged, the End terminator is found at the last page.

No
Is 1 > 2

Yes

Figure 5. Decision Symbol with Yes and No Scenarios

Decision symbols always have two (2) possible scenarios, the YES and NO.
Since the Decision symbol contains a specific condition, that condition should
always be answerable by YES or a NO. If the condition is not answerable by a
YES or a NO, the condition should be rephrased to adhere to standard
regardless of the number of nested Decision symbols to be made. This is the
 case for the Decision symbol since the computer can only process one
condition at a time. For example, if you asked “which color did the user
pick?”, the computer will process that with a series of question like “Is it
Blue?”, “Is it Red?”, and so on. The computer will not directly check for the
answer like “The user definitely chose Red” without checking for the rest of
the possible answers.

Inputv

Figure 6. Data Symbol with Out-going Arrow

END

Figure 7. End Terminator without any Out-going Arrow

Flowchart symbols should always have one (1) and only one out-going arrow.
Since the arrow signifies that there is a progression of flow, it is a
requirement that symbols should only have one arrow to other symbols. We
are limiting our thinking to single-threaded flow. Hence, a symbol can only be
succeeded by only one symbol. The exceptions to this are the End terminator
and the Decision symbol. The End terminator marks the end of the flowchart;
therefore, there is no logical need for it to have an arrow. The Decision
symbol has two possible scenarios; therefore, there are always two (2) and
only two arrows.

Outputv
Figure 8. Data Symbol with many In-going Arrow

START
Figure 9. Start Terminator without In-going Arrow

Flowchart symbols can have any number of in-going arrows. Since most
symbols can start from any of the other symbols, it is logically accurate to
allow any number of in-going arrows. However, there is only one (1) symbol

Course Module
 that does not allow any in-going arrow – the Start terminator. The Start
terminator marks the start of the entire flowchart; therefore, there is no
logical reasoning to connect other symbols to the Start terminator . Should
there be a need to restart the entire flow, the symbol should connect to the
symbol with an in-going arrow from the Start terminator.

START

x=1 +1

END

Figure 10. Flowchart Layout

Flowcharts are written from top to bottom. With the Start terminator at the
top, the next symbols should be placed below the Start terminator, and the
next below the previous symbol. There exist some symbols beside a symbol,
which is the case for the Decision, On-page Connector and Off-page
Connector symbols.

Flowcharts should not have any out-going arrow pointed upwards. This is for
creating a seamless flow process. For complex flowcharts supporting upward
out-going arrows, determining the connection between the symbols will
prove to be difficult. Hence, there is the need for this standard. Should there
be a need to connect to other symbols found at the top of the sequence, you
can use On-page and Off-page Connector symbols.

Lastly, flowcharts should not have any overlapping arrows. This is for
emphasizing clarity. Having overlapping arrows creates ambiguity in the
direction of the arrows intersecting and their respective symbols.

Pseudocodes

Pseudocodes are not Academe-standard for expectant undergraduate

students. However, there is a growing demand in the usage of pseudocodes
not only in the Academic sector, but also the Research sector.Pseudocodes are
 high-level description of the processesin Computer Programming.Their
format varies by writer. Some are English-like to accommodate non-technical
audience. Some are written close to the actual syntax used in the source code
to accommodate technical audiences and Research critics.

DECLARE name
SETnameAS “Charlotte”
APPEND “ Queens” TOname
APPEND “ B.A.” TOname
OUTPUT name
Figure 11. Sample Pseudocode

Course Convention

Pseudocode are generally user-centric and no defined standard for writing

them. However, for the ease of the codes to be written in the future modules
and for the ease of understanding for your peers, we will set a convention in
writing pseudocodes. This should enable us, together with your peers and
mentors, to talk using only one language.

Keyword Usage Description

DECLARE DECLAREv, a[] A keyword to signify we are

about to declare a variable v and
an array a

NOTE: Variables and arrays will

be discussed in the coming
weeks. For now, think of a
variable as a word that
represents something, and an
array as a word that represents a
series of anything.

SET…AS… SETvariable1ASvalue1, A keyword to set values to

variables
variable2ASvalue2

APPEND … TO APPENDvalue1TOvariable1, A keyword to insert String values

… at the end of a variable
value2TOvariable2
containing a String

IF … THEN IFcondition1THEN A keyword to limit selected

statements from being executed
… statements1
only when the specified
[ELSE IF … END condition was met

Course Module
THEN
… - or - NOTE: Conditions and
statements will be discussed in
ELSE
the coming weeks.
…] IFcondition1THEN
END statements1
ELSE
statements2
END

- or -

IFcondition1THEN
statements1
ELSE IFcondition2THEN
statements2
ELSE
statements3
END

WHILE … DO WHILEcondition1DO A keyword to limit selected

statements from being executed
… statements2
repeatedly until the specified
LOOP LOOP condition becomes false

OUTPUT … OUTPUTvariable/value A keyword to display a value or a

value of a variable to the user

INPUT … INPUTvariable A keyword to accept any value

from the user and save it to a
variable

CALL … CALL function/subroutine A keyword to call a user-defined

or external function

NOTE: Functions and

subroutines will be discussed in
the coming weeks
Table 2. Pseudocode Keywords

For you to understand pseudocodes better, let us use the sample flowchart at
Figure 1. Remember that in the sample flowchart, the problem being solved
is how to reach school in the most efficient and travel-wise method.
 Following the flowchart, we will have the following as its pseudocode
equivalent.

CALL LeaveHome()
SETtimeAS GetCurrentTime()
IF time< 8:00 AM THEN
CALL RideBus()
ELSE
CALL RideSubway()
END
CALL ReachSchool()
Figure 12. Pseudocode of the Sample Flowchart

Glossary
Algorithm: a systematic quantifiable methodology in Computer Science
where there is a finite set of feasible solutions to solve a specific problem or
to achieve a specific condition or series of conditions.
Arrow (Flowchart): a line with one and only one arrow head pointing to the
next symbol in the process.
End Terminator (Flowchart): an “END”-labeled Terminator symbol in
flowcharts that marks the end of the entire flowchart.
Finite: has a limit or constraint.
Flowchart (Computer Programing): a visual aid showing a sequence of
actions or operations with only one entry and one exit points.
Low-level Solution: a specific solution which presents all the detailed
information and processes involved within.
Single-threaded Flow: a concept in flowcharting wherein there is only one
allowed flow for the sequence of processes.
Start Terminator (Flowchart): a “START”-labeled Terminator symbol in
flowcharts that marks the start of the entire flowchart.
Problem Solving: systematic approach in searching for a solution to a
specific problem.
Pseudocode: an English-like high-level description of the processes in
Computer Programming.

Course Module
References and Supplementary Materials
Books and Journals
Simon Withers; 2017; Pseudocode; United States of America
Mary Colson; 2017; Light (Flowchart Science); United States of America

Online Supplementary Reading Materials

Introduction to Pseudocode;
https://www.slideshare.net/DamianGordon1/pseudocode-10373156; April
16, 2017

Online Instructional Videos

Planning with Pseudo-code;
https://www.khanacademy.org/computing/computer-
programming/programming/good-practices/p/planning-with-pseudo-code;
April 16, 2017