FYP 14021
Secondary school educational
content for computer foundation
Final Report - Individual
by Tao Ka Wai (UID: 3035009902)
Introduction
Project Background
Junior secondary students take computer lessons in schools regularly according to
the general education curriculum. These lessons provide students chances to learn
about computers and be prepared for the fast changing information world. Students
learn about tasks which computer can do and ways to use computers for solving
daily problems. They also learn the impacts of computer on society and other
aspects.
The teaching of computer in secondary schools has been changing with the trend
of computer technology. Under the current curriculum, task-oriented approach
has been adopted for computer subject. Students have to tackle practical tasks
besides taking written examinations. This enables students to practice which
computer software or applications they have learned.
Students gain knowledge about computer with the use of software and
applications. This provides opportunity for educational software and application
development on computer subject explicitly.
The development of modern technology on mobile has become more and more
significant. Smart phones, tablet computers and other mobile devices are popular
nowadays. One can access to different kinds of information with the browser
installed in them similar to that in a personal computer. More importantly, they
can enjoy the usage of smart devices with the application software, "mobile
application", installed. Mobile application are computer programs designed to run
on mobile devices. They are usually available through application distribution
platforms like App Store and Google Play. Users can download and install
application in their devices easily. The wide range of categories of application
have attracted vast number of downloads. The categories of application varies
from weather information, games, banking, ticket-purchases and much more.
One of the categories offered is education. The application in this category provide
the usage of learning in smart devices. Users can learn in a casual way. They can
learn at anytime and anywhere after having the application downloaded. This
provides an alternative way of learning in a computing environment.
Combine the opportunity for educational application development on
computer subject with popular mobile application creates room for
computer-learning application for junior secondary students.
The introduction of computer concept is the best-suited scope for this
computer-learning application. It serves as a basis for computer learning to any
aspects about computer for junior secondary students. Students can explore and
discover the interesting parts of computer concepts in a casual way. They can learn
and reinforce their knowledge for further computer learning.
With smaller screen sizes than personal computers, smart devices take input from
users mainly via simple tapping, dragging and dropping. This creates grounds for
student to access the content of application in a interactive way. Students can
enjoy and keep up with the process of learning easily.
The computer-learning application can be served as assistant for teachers in
teaching computer concepts. It can be used as a after-school support for computer
concepts lessons. Students can have practices on what they learnt for better
understanding. With the popularity of mobile application nowadays, the
interactive computer-learning application can help promote computer learning in
secondary school.
Project Objective
The project aims to design and develop interesting content on mobile devices for
introduction of computer concepts to junior secondary students. The objectives
of the projects are to:




Raise students' interest to learn computer concept;
Provide platform for students to learn in a casual way;
Assist teachers to teach computer concept; and
Promote computer-learning in secondary schools.
Computer concepts are basis for computer learning. Having good understanding of
these concepts is great advantages for students to admire and enjoy the fast growing
computer technology in the modern world. To help junior secondary students to
have such an understanding, interesting content at introductory level is helpful for
them to start exploring and discovering and therefore raise their interest to learn
computer concepts.
Provide platform for students to learn in a casual way can be achieved by the use of
mobile devices. Learning on mobile devices like smart phones and computer tablets
are different from that on regular lessons. One can learn freely with a mobile
device. The learning is flexible to fit with one's free time without any constraint on
location. More importantly, users can control their own learning progress. They can
adjust their learning processes by themselves. This mode of learning is encouraging
and poses no stress. Students can enjoy the process of learning easily.
For regular computer concepts lessons in school, teaching materials other than
textbooks are used. Computer software and application are used in class to draw
attention from students. The interesting mobile content developed can be served
as assistant for teacher as well as after-school support to reinforce what they
learnt. Students can keep up with the process of learning and therefore teachers
can maintain the general learning progress of classes.
Every student, and every one, can access the interesting content with mobile devices.
Junior students can learn in an alternative way while senior students can study again
for better understanding relaxingly. Everyone in secondary school can enjoy the
content with fun easily. This helps promote computer learning in secondary school.
Requirement
Requirement is comprised of two parts, the definition of scope of application
content and the range of platform supported.
The content of application focuses on the introduction of computer concepts.
Therefore the content should not be too advanced or introducing concepts that are
not technical. However, it should not be too basic that students who always access
to the Internet may possibly know about. The key is to select topics that are
fundamental for secondary student to understand basic computer concepts and
introduce these topics in way that reveal the complexity of these concepts
interestingly. In this way, student who are not interested in computer can have an
opportunity to explore computer while student who are interested in computer can
have access to acquire concrete basis for learning advanced concepts.
With an overall review of the syllabuses of computer subjects in secondary schools,
the scope of application content lays on the fundamental and basic computer
concepts including binary system and processor simulation. These concepts are
chosen as they give raise to many other computer concepts. They are concepts that
anyone interested in computer should have known. Understanding these concepts
will let anyone appreciate how wonderful that the great and complex constructions
of computers are developed from some very simple and easy ideas.
Binary is chosen as it is the very first concept computer is about. It is what computer
do. It is what computer use. It is how computer work. The concept itself is simple. It
is the real life example of binary numeric system. Though it is mathematical, the
calculation involved in computing is not as technical as that in mathematics. It is the
wide range of usage and implementation in every small and edgy parts in computer
that amazed us. Among these usage and implements, several are chosen as the
application content. They are chosen as they are less technical compared to others
and they show the binary concept in a clean and tidy way. Clean and tidy means that
their usage or implementation do not involve much other concepts. This is to avoid
distracting student from binary and to focus the concepts we want students to
understand. These includes how computer handle integers and characters and how
computer do calculations.
One important binary concept will also be introduced. That is, why computers use
binary numbers. For many students, they possibly know that computing uses binary
digits one and zero. However, this is almost what they know about the relationship
between binary digits and computer. Why computer use binary turns out to be a
very good question to let students view computer at a different angle. This question
encourage students to think as a computer designer instead of a computer user.
They shifts from having experience of using computer to why the experience is being
so. This is a question that can give student new experiences on thinking as well.
Therefore, it has to be in the scope of content.
For processor simulation, the father of computer and Turing machine have to be
introduced. It is until around 2012, we finally have the opportunity to know more
about Alan Turing and his achievements in computing. This is because many of his
achievement were political involved and thus kept under wraps. Turing was not a
man that many textbook would possibly describe about like Newton. In fact, he
seems to be a mysterious man to junior secondary student. They may not know
about him and that he was the father of computer. With Turing machine, Turing
was the first man to model computing and algorithm, which constitutes modern
computers. He is such an important and inspirational person to be introduced to
students with his Turing machine. Therefore, they has to be in the scope of
content. Relevant topics like software, computer virus and CPU have to be
included as well.
The content is defined with the aim to let students get a concrete foundation on
fundamentals. It is hoped that they learn ways to understand conceptual
knowledge on machines, and by this learning, they could have better skills to
understand other advanced concepts easily. This gives grounds for further
development on computer learning.
This application has to support both Android and web browsing. Android has to be
supported as this application aims to be an Android application. This is so to let
more students have the application downloaded in their smart phones. In Hong
Kong, students with smart phones supporting Android is more that that with smart
phone not supporting Android. Therefore, in order to maximized the number of
student having compatible devices to potentially download the application, the
application has to be an Android one. Web browsing is supported for students
who do not have access to Android. It is so to provide opportunity for them to
access the material without having Android devices.
Cross-platform is supported to make the material available to more users. It is
supported to give flexibility to the use of the material as well. Users can use the
devices or the way which they want to access the content most for learning.
Contribution of project
The contribution of project are:
 Creating a computer-learning application;
 Introducing fundamental concepts;
 Provide a basis for computer learning;
 Assisting teachers in teaching;
 Support computer-learning after school;




Give students new experiences of learning;
Reinforce knowledge for further computer learning;
Explore interesting parts of computer
Create ground for students to learn casually


Create ground for students to learn interactively;
Promote computer learning in secondary schools
In this project, I am responsible for the application construction. This is to create the
solution and connect all the SDK and other necessaries for app development. I am
responsible for application icon designing and implementing in the solution. I am also
responsible for selecting appropriate computer learning materials for both topic
binary and processor and deliver them organized to the application. I am responsible
for the design and development of all the interactive parts for the topic binary. I am
also responsible to make the necessary pages like content page and reference page
in the application .
Project Background and Literature Review
What is available now
The Internet contains huge amount of information. Thousands of results can be
searched simply by typing a key word to a powerful search engine. This shows that
huge amount of information are always available online. Material of computer
learning could be found easily on surfing the net.
If we type "computer learning" in a search engine, numerous results will be displayed.
By clicking onto the links, we can access the material and possibly learn something
about what we typed. It seems that we have numerous access towards learning
computer.
Moreover, it is easy for Hong Kong people to get online. Smart devices are common
nowadays. Many of us have a smart device which allow getting online easily via Wi-Fi
or 3G or higher standard of networking towards the Internet. It is the fact that we
can get online at anytime and anywhere, provided that the smart device is receiving
signals for online. Combining this with the numerous accesses provided by Internet,
it seems that we can learn much about computer freely with our devices.
What are their shortcomings
However, this is not what we always experienced. Instead, we always encounter
difficulties when we try to learn computer in the above way.
When we get onto the linked site though powerful search engines, it is always the
case that the content is too difficult or too simple. If it is too difficult, the topic gets
deeper and the concept gets more complex. Technical terms may appear and we
have to search for their meanings. We have to understand them in order to
understand the content. This turns complicated when we are in fact trying to
understand another technical term. Much effort and time are needed to understand
the original content. If it is too simple, the topic becomes a few sentences or even a
sentence describing the topics that students would possibly have known. The
content turns out to be something obvious and we gain nothing through it. The
learning process becomes an unnecessary revision process. We may have to get onto
another linked website to find what we really want and then , unfortunately, this
process may repeat and cause loss of effort and time.
Another problem is the use of mobile devices. Though mobile devices are enabled
with the net surfing function, it is not the most tailor-made form of information
access they contained. That is , surfing the net is just a function of smart devices and
that smart devices can show information in a more tailor-made way.
For example, if we want to go for a movie, given a personal computer, we may go on
a cinema website to check for its timetable. It is always the practice to open a web
browser and type in the website. Then pressing the key "enter" will get that website
onto the web browser we have opened. Information of the website is shown within
the browser. On the other hand, if we want to check the timetable of a movie in a
cinema by a smart device, we seldom go on the cinema website. Instead, we open
the cinema application in our smart device to do the checking. Web browser turns to
a kind of ways to get onto the Internet in smart devices. They are no longer the main
access to the Internet as they are in personal computers. Application shares the
access and turns out to be the more tailor-made and convenient access to
information than web browsers in smart devices.
The reason to do the project
The confusing results given by search engine and the popular use of application
combined gives the opportunity for a mobile application for computer learning. This
mobile application can be powerful if it could give the appropriate material towards
users via mobile device conveniently.
Appropriate material here means the material which bottom out from very technical
material but are comprised of basic material which have been known for junior
secondary students in Hong Kong. It is important to have junior secondary student in
Hong Kong as the targeted group. This target determines which material should be
used and which should not. It also determines which kinds of material is very
technical and which kinds are basic ones. The target gives us the guidelines to select
appropriate material.
The popular use of application is seen easily in public areas. For example, people use
application to chat with friends, to check movie timetable and to play games while
travelling by means of public transport. They can access the application material
whenever they want. This gives a great advantage for education. Students can access
to learn or to do revision with the appropriate material. They may open the
application when they are taking buses or trains to kill time. They may read the
materials when they are free for reading. This handy application allow them to have
it installed and get accessed anytime. It is not only for students who are interested in
computer and want to know about computer. It is also for students who are only
interested with new experience of application using. They may install the application
for different reasons. Then they may open it and read it when they want to
experience a new application usage. It is hoped that they feel nice about the usage
and that they do not delete the application right away. Once the application is not
deleted then it is on the devices and student may access it whenever he is free.
It is this kind of learning that makes the project interesting. Students nowadays are
always busy. This includes junior secondary students. They may have tight schedule
after school and during weekends. They may not have the time to develop interest in
computer learning. Learning though an application would give student access to first
know more about computer with flexibility. As it is not demanding, it poses no
pressure on students. Therefore students would not refuse to use this application.
Instead, they may get interested by occasionally reading the materials freely. It is
hoped that they could learn computer by accessing this application with interest.
Why this project is desirable
This project provides a chance to develop an interactive application to junior
secondary students. It is desirable as application have becoming more and more
popular nowadays. Developing application has become a trend followed by the
popularity of smart devices. Various industry has leading application developed. As
for education, variety of application have been developed for language learning and
skills learning. Now, computer learning has become a hot field to be developed.
In fact, there are vast number of tutorials teaching computer and its concepts on the
Internet. These tutorials usually aimed to be viewed by the public or professionals.
Therefore, these tutorials may or may not be suitable for junior secondary students.
Content provided to them has to be refined to cope with the learning of computer in
school as well. This is to avoid redundancy and focus on key fundamental topics. For
example, if the student has learnt the concept of software recently, it would be
helpful to introduce him Turing machine and Alan Turing to let him have a larger
picture on the concept as well as the development of computer and software. This
project is desirable as it is developing application with content which best-suit the
learning of junior secondary students and technique to best-suit the usage of mobile
device.
Project Methodology
This project to be implemented with three main parts, namely the structural part,
the content part and the interactive part.
The structural part means how the application is structured. It is aimed to generate a
stable application. The content part means the computer learning content to be
delivered to students via the application. It is mainly constituted by text, images and
graphics to present concepts involved in a neat and tidy way. The interactive part is
the practical representation of concepts. It is aimed to have animations in to facilitate
the thorough usage of the concept to be leant. That is, to let students have hand on
experiences to make use of the concept learnt.
Structural part
The structure application is divided into two main parts. The underneath part is the
application construction and the top part is the application output.
The application construction is implemented with Microsoft Visual Studio 2010
Express for Web. Microsoft is selected as it is commonly used. Express version is used
as it is free. Web version is used as the application has to support not only mobile
devices usage but the material has to be viewed in web browsers to meet the cross
platform requirement. Android SDK, Java SDK and ANT SDK are installed to facilitate
the construction. The construction is built with C#.
Settings on the application are implemented in particularly 2 files:
"project.properites" and "AndroidManifest.xml".
The" target=android-21" means that the target version for installation is 21. It is set
to 21 as 21 is the latest version of Android. Setting the target version to the latest
version can ensure the application can be installed in devices having the latest
version of Android. This means nothing to devices having older versions of Android.
The "minSdkVersion" indicates the oldest version of Android supported. Combine
with "targetSdkVersion", this app can be installed in devices with Android version 9
to 21. The "supports-screens" indicated the types of devices supported with respect
to their screen sizes. As this application is to be viewed both on screens of mobile
devices and monitor of computers, all sizes of screens are set to be supported.
The "user-permission" means the permission that has to be granted from users
before installation. This will be shown as notice to users before users download the
application. One permission is set needed only for this application. That is
"access_network_state". That means the application will access to check for the
network state of the device. It is set to serve one single purpose. That is, to cope with
auto update from play store if necessary . The "screenOrientation" sets the
orientation of screen once the application is loaded. It is set to landscape to allow
wider display for text, images and graphics.
The application layout part constitutes files to be displayed to users. Html files are
used to suit the web viewing purpose. Each html contains a page to be displayed.
Each html has hyperlinks towards other pages. Version of html is selected to be 5 to
facilitate the mobile purpose. Html5 is much flexible and suitable for mobile
application development than version 4.1.
<!DOCTYPE html> indicates this is html5. The "viewport" is set by
"width=device-width" and "user-scalable=no" to permit no scaling from fingers
positions by users. This is to prevent any unwanted finger gestures from disturbing
the application. Inside the tag <body>, <section> is used. It is a new tag in html5. It
helps define sections in the html document like headers, content and footers
Open sources jQuery and nativeDroid-master are used. Their CSS files are added to
html file to implement a better interface of the page that html file contains.
Content part
The content part is comprised of 3 elements, namely the topic "binary", the topic
"processor" and the necessary pages.
The topic "binary" includes 9 parts. They are:
 what is binary,
 why computer use binary,
 what does bit, byte, MB, GB means,



how computers handle integers,
how computers do calculations,
how computers handle characters,



what is hexadecimal,
what is analog and digital, and
how computers communicate with external storage.
The topic "processor" includes 6 parts. They are:
 what is processor,
 who is father of computer,
 what is Turing machine,
 what is software,


what is operating systems, and
what is computer virus, worm and Trojan horse.
These question are implemented as appropriate material for junior secondary
students as they are fundamentals of the topics with respect to the scope of
computer lessons defined by Education Bureau. They are simple but detailed version
of computer concepts taught to senior secondary students. Questions is used as the
title of the page. This is to attract students who have similar questions or feel curious
about the questions to tap or click into the page to look for answer.
The question are place in a order following the logic of step by step. That is, after
reading the page of the first question, students could possibly figure out the answer
of the first question. If there is any questions in the mind of student after getting the
answer of the first answer, it would possibly be the next question. Then student
would read the page for next question and the process repeats until all pages for
questions are read. At that moment, student may have even more questions in his
mind than the time he starts reading the first question. However, he gains knowledge
though reading these pages. He acquires the fundamental concepts. He practices the
way to have questions in mind and ability to read thought for answers. With these
skills, student is now able to learn from technical concepts about computing via
professional tutorials in the Internet.
Necessary pages includes the entry page, the content page, the "about this app"
page which tells the purpose of this application to users by text, and the "list of
reference" page which contains all the hyperlinks included in this application.
Each part of topics as well as each necessary pages is implemented as a page
contained in html file. Html file is to contain the content material to be display. The
CSS file is introduced to decorate and better the outfit of the html file. The following
is an example of a paired html and CSS. The "common.css" is added to
"binary3.html" inside the <head> tag as a style sheet.
Interactive part
The interactive part is the most important part among all the three parts. If this
interactive part is missed, this app is just a handy website to be carried around by
mobile device. The interactive part places the difference between a pure website and
an application on mobile devices.
To smoothly execute these interactive parts, ranges of free software are used. This
includes jQuery 1.9.1, jQuery-mobile 1.4.2, nativeDroid-master and Farbtastic Color
Picker 1.2.
All the interactive parts implemented can be viewed as html5 animations as they
written in html5 with the purpose of interactions with the use of html, CSS and
JavaScript files. The implementation of interactive part in this app serves a purpose.
They are useful but not just visual effects. There are three kinds of implementations:
content page, helpful animations and full screen animations.
Content page
The first one is the content page. This interactive part aims to ease the selection of
pages to users. That is, to divide the content into sub-contents contained in tabs.
Then by tapping or clicking on a tab, the corresponding sub-content is shown instead
of the whole content.
The reason to use this implementation is that the content itself is lengthy to be
shown. In fact, with the topic "binary" and "processor", the content has already had
16 entries. Imagine that these entries are placed from top to bottom, the content
page would be too long. Moreover, dividing into sub-content with meaningful tab
names helps the selection of pages to users. They can first tap on the tab which
expressed the common feature in its sub-content, and then tap on the entry that
want to read in the sub-content displayed.
To implement this, codes is added in the "app.html":
The division <div class="tabs"> serves as the wrapper wrapping <ul class="tab-links">
and <div class="tab-content">.
The <ul class="tab-links"> is an ordered list containing the 4 tabs to be tapped for
switching between the 4 sub-contents. Each element in the list is linked to the
corresponding sub-content by sub-content's id. The first element is the active tab,
thus the page will display the sub-content corresponds to the first element when the
html is loaded.
The <div class="tab-content"> is a division that contains the 4 sub-contents each
wrapped by <div> tags with id. As the <div> with id as "tab1" is active, the page will
display the sub-content contained in it when loaded. The sub-content will be in the
form of an ordered list.
To enable the change of sub-content, codes are added in corresponding app.js:
jQuery is used to enable smooth animation. Now once a tab is click, the sub-content
being displayed is hided and the sub-content corresponds to the tab clicked is shown.
The class "active" is removed from the list-element the sub-content displayed
corresponds to. The class "active" is now added to the list-element the tab clicked.
Tapping do the same trick as jQuery is powerful to handle the tapping events on
mobile devices as clicking automatically.
"fadeIn(400)" here is to enable a fading effect when the sub-contents switches. This
is to notify clearly to the user that the sub-content has been changed.
To visualize the tabs and change of sub-contents, codes are added in corresponding
app.css:
With "float: left;", all tabs are horizontally displayed with no order-list decorations.
That is, all tabs are placed from left to right horizontally as a corner-rounded
rectangles separated by space. When a mouse cursor is placed on a tab or a tab is
clicked, the color of rectangle and that of text inside the rectangle changes to
simulate the change of sub-contents displayed.
Helpful animations
The second part is implemented along reading the text of pages containing questions
of "binary" or "processor". These animation aims to better the understanding of the
text near the animation of users. They are placed to help users understand the flow
or the concept discussed on that page. There are altogether 6 animations of this kind
in the application.
Binary addition
The first one is to assist the learning of binary addition. As a junior secondary student,
they know addition well in decimal. The addition in binary is in fact a part within the
addition in decimal that they could handle well. However, they may not be familiar
with addition with purely one and zero. The animation is implemented to let users
understand the calculation step by step. That is, when two binary numbers are added,
user first see the addition of their ones, the places value, and then user can see the
addition of their twos, the places value, and so forth until addition completes. This
shows the steps of addition clearly to students.
To start with , codes are added to the corresponding html file:
Here a table is used to showcase the addition process. The sum is absent but a
button is at the ones, place value. When the button is clicked, the function
"myFunction()" will be called.
To give sum of the ones, place value, by clicking the "see sun" button, codes are
added to the "binary5.js":
When the "see sum" button is clicked, the ones of the sum is shown and the button
at the twos is with text "see sum" as that happens to the button at the ones. This
process repeats on button at twos and buttons at four like that on button at ones and
buttons on twos. Finally, when the button at fours is clicked, the fours of the sum is
shown and the some text is displayed under the table to conclude and signify the end
of this addition process to users.
As secondary student, they must know that addition starts from smallest place value.
However, to avoid misunderstanding, codes are added to CSS with the help of jQeury
and nativeDroid-master to hide these two buttons:
The imported style sheets help turn the appearance of button to a flat rectangle with
color #99cc00. The table is decorated in a way that all columns in the row for sum is
with same background color as the color of button . Now the overall appearance is
that the whole row intended to show sum is decorate with color #99cc00 with text
"see sum" at the ones, place value. Nothing special and clickable is visually appeared
at the twos and fours.
Binary addition with carrier
The second animation is a modified version of the first one. It is to handle binary
addition with carrier.
The implementation on html is very similar to that on the first animation except the
introduction of 2 <div>s with id as "carrier1" and "carrier2":
The main difference between the first and second animation lies on the
implementation of JavaScript:
When the "see sum" button at twos is clicked, the cell containing the fours of the
latter binary number has its text changed. The change constitutes the addition of a
"1". This number is subscribed and appear as an carrier drew as in ordinary
additions.
To let users aware of the carrier, codes are added to CSS:
These give the carrier a thicker and sharp-colored appearance. Note that tag <b> is
not supported in html5. Therefore bold has to be done with CSS.
Use 2's complement step-by-step
The third animation is to show steps to use two's complement for a negative number.
It aims to find the negative number in binary representation using two's complement
with a given value. In fact, the steps are displayed as text on the page. This animation
is to show users how the steps work with an example. As the transformation is really
simple but the steps can caught easily forgotten. It is hoped that student recognize
and remember these steps by having the experience of transforming to negative
number though clicking.
The animation is implemented in html as follows:
The table shows that exactly four steps are needed for transformation. User is invited
to click on the top button to see the first step.
The implementation on JavaScript is that clicking a bottom always show the step in
that button and invite user to click on the next button.
The implementation on CSS makes the rows of table having different colors. These
colors are highly contrasted to signify the uniqueness of each steps:
Character handling in computer
This animation aims to demonstrate what happen while a character is input to the
computer and displayed. Three buttons are displayed for user to click on. Each
button is labeled with a character. Once a button is clicked, the processes happened
in computer on handling character input is displayed in the form of table below the
buttons. This includes what computer receive in ON-OFF format, what computer
store in numbers as well as how monitor display the correct character. When user
click on another button, process of the character labeled on the another button are
shown. That of the previous click is removed.
The implementation on html is as follows: Only the first row contains text and images
for clicking. Other rows are empty to carry information about computer processing
character once a character is clicked. They are standby.
To display the process once a button is clicked, codes are added to JavaScript file:
Information about the process is displayed by replacing the html in elements with
several ids. They are replaced in a way that html codes are delivered as text through
JavaScript. The html codes delivered are then used as html codes by the html file
receiving them. For example, several rows in html file is with no columns. When user
click on any button, the html file receives html codes in the form of text. This
additional html codes are placed inside the rows tag. Therefore, rows with columns
are displayed.
The appearance of table is well-constructed by corresponding CSS file:
Increase in hexadecimal, decimal and binary
This animation aims to show that hexadecimal advance place-column slowly. This is
to show that why hexadecimal is used to help using binary. In the animation, a table
containing three cells showing, with the same value, the hexadecimal representation,
the decimal representation and the binary representation. To order to make the
slowly advance property significant, each representation is with a increment button
and decrement button. When an increment button is clicked, all representations will
advance their values by 1. While giving more clicks, it is easily observed than binary
representation has the greatest length, followed by decimal representation.
Hexadecimal representation always has the shortest representation among the three.
Moreover, the rate of length increased with respect to value increased can also be
observed. This show users binary representation grows in length very quickly while
hexadecimal representation grows very slowly in length.
When an decrement button is clicked, all representations will decrement their values
by 1. While giving more clicks, it is easily observed than binary representation has
the greatest length, followed by decimal representation. Hexadecimal representation
always has the shortest representation among the three. Moreover, the rate of
length reduced with respect to value reduced can also be observed. This show users
binary representation reduces in length very quickly while hexadecimal
representation reduces very slowly in length.
The html implements the layout as follows. The value to be represented is set as 0.
Therefore, every click start at 0. This gives a fair demonstration on comparing the
rate of advancing and reducing place-column with respect to advancing value to be
represented.
The JavaScript file handles the increment by using the decimal representation as the
key. Every time a click is received, the decimal representation is advanced by 1. Then
the decimal representation is used to transform to binary representation. This
transformed representation then replace the current binary representation. The
same process is done on hexadecimal. The decimal representation advanced is used
to transform to hexadecimal representation. This transformed representation then
replace the current hexadecimal representation.
Decimal representation is selected to be the key as it is easy to deal with. Functions
of transforming decimal to binary and hexadecimal are both well-defined for use.
The code in CSS is implemented to turn the row containing representations to have
black-colored background. This is to make the appearance of textbox containing
representations less obvious. A number can be typed into the textbox to get its
corresponding representations. However, the focus of this animation is about the
effect on representation on advancing the value. It is better to keep users focus on
the representations and the increment and decrement buttons.
Color picker
This animation aims to show users application of hexadecimal usage in computer. A
colorful wheel with a square inside is shown with text box at it right hand side. When
user click on any point on the wheel, the color at that point will be shown in the
square with colors lighter and darker than it as a gradual pattern. The textbox always
shown the hexadecimal representation of the color clicked. User can click on the
square or the wheel to see hexadecimal representation of color interested. The free
software, Farbtastic color picker, is used to complete this animation .
The html corresponds to the color picker is as follows. The default color selected is
#123456. Thus a the square inside the wheel will be showing this color with colors
lighter and darker than this color. The textbox will be showing "#123456'.
The JavaScript and CSS files supporting this animation are provided by Farbtastic.
They are complicated but yet understandable. To get color picker loaded when the
page is loaded. The following is added to the corresponding JavaScript file to initiate
the picker.
Full screen animations
There are 2 full screen animation in this app. They are, as the name, animations that
have to be well-presented in a detailed way. Unlike the helpful animations, they are
not to help student to understand concepts. Instead, they are used to provide
experience for students to use the concepts. Both of them make use of the new
elements in html5, canvas, to draw graphics, numbers, characters on screens.
Binary-to-decimal convertor
As it named, this animation aims to let students make use of the binary concept
learnt. The animation follows the content part question: how computer handle
integers. On the page for the question, the concept of place value is introduced. That
the places are two to the zero power ("ones place"), two to the one power ("twos
place"), two to the second power ("fours place"), two to the third power ("eights
place") and so on. The animation is linked on that page. Therefore this animation is
to let student practice the conversion from binary to decimal. The animation
provides conversion from a 10-bit binary number to a decimal number. By tapping on
the bits, 1 will change to 0 and 0 will change to 1, a new 10-bit string will be
produced and its decimal representation will be shown immediately. This is a
responsive animation. Place values of bits will be shown to briefly explain how the
conversion is done.
HTML, CSS and JavaScript are used to produce this animation. However, the HTML
and CSS are thin while the JavaScript is fat. That is, most of the code handle is passed
to JavaScript.
HTML corresponds to this animation is as follows.
The element <canvas> is added to allow drawings on screen. If the browser the user
is using does not support this tag, the text "Your browser does not support the
HTML5 canvas tag. " will be shown. This is to handle the situation that, a user may
feel confused or think that there is something wrong in the app, when a user is using
browser which does not support this tag. This sentence easily handles his concern.
CSS corresponds to this animation is as follows.
Properties of canvas is defined by its id. The canvas is set to have the screen width as
its width. That is , the canvas makes full use of the screen. This is to provide
maximum space for drawing elements by JavaScript.
The JavaScript file corresponds to this animation is structured in the following. First,
draw the elements needed. For this animation, a big square is needed to show the
decimal representations, ten small squares are needed to show the each binary digit.
An instruction and equal sign are also needed. The default value is 0000000000 for
binary for than of decimal is 0. Place values of bits are needed as well. All these
numbers have to be drawn.
To have a better handling on pixels for height and weight, the width of window, that
of a browser or that of a screen, is used to create a unit for height and weight. All
above are drawn with this unit initially for better element control. Refinement on
these elements are made to later to present them precisely.
Here is the parts of setting units and drawing the instruction, the result-box (the big
square) and the equal sign.
The following is the drawing of 10 small boxes, the 10-bit binary number and theirs
correspondent place value. They are drawn with a looping that increase the width
coordinate uniformly to give the outfit that 10 boxes, with the corresponding bit, are
placed one by one towards right clearly. Place value is generated by dividing it by to 2
in every loop. This suits the binary place value properties. Precision is made for clear
and tidy visual effect. Colors of boxes are alternated by four to do the same purpose.
Next, it is to handle triggering events. Click and touch are enabled. An array is set to
store the binary number. This is the code involved.
When an event is triggered, finding the position of cursor or finger will tell which
small box to be updated. This includes:
 change the bit from 0 to 1 or to 1 from 0,




update the array,
change of color of place value correspondent,
check if there is an need of "+" sign and add "+" if needed,
get the bid box updated.
This is the part of the code getting mouse/ finger position and then do checking on
which small box to update with respect to coordinates. The variable x, y represent
the world coordinates of mouse position. They are reduced by canvas size to
transform back to local coordinates.
This is the code for a small box to be updated if user tap/ click on its zero. That for
clicking one is very similar.
This is the code for add "+" sign. All "+"s are removed every time an event is
triggered. Then add "+" needed with the updated array for binary digits.
Finally, it is to get the box boxes updated. The codes are shown as follows. Precisions
have been refined. This is made because of the value. The value ranges from 1 to 4
digits. However, the size of big box remains the same for every case. Therefore, to
keep the value centered in the big box, refinement like changing font size and text
width coordinates had to be made.
Decimal-to-binary convertor
Similar to the binary-to-decimal convertor, this animation aims to let students make
use of the binary concept learnt. It follows question: how computer handle integers
and linked on that page too.
This animation displays the conversion from a 3-digit decimal number to 10-bit
binary number. Users can tap on sections on three clocks, which represent the three
digit in decimal, to create a decimal number. The 10-bit binary representation will be
shown immediately on 10 linear small boxes. This is a responsive animation. Place
values of bits will be shown. Moreover, a notice board will be displayed at the right of
the clocks to briefly explain how the conversion is done. The explanation is of
subtraction to the largest place value smaller than the decimal number. The
subtraction continues until the difference is zero. For example, if "10" is tapped for
conversion, The small boxes will show 0000001010. The notice board will shown
"10-8 = 2" and "2-2 = 0".
HTML, CSS and JavaScript are used to produce this animation. Similar to the
binary-to-decimal convertor, most of the code handle is passed to JavaScript.
Therefore, the HTML and CSS are thin while the JavaScript is fat.
The HTML and CSS implementation are exactly the same as the binary-to-decimal
convertor. Similarly, they are implemented to handle concerns from user using
html5-unsupported browser and maximize the space for drawing to screen
respectively. Here are the codes.
For the JavaScript, it is constructed as follows.
First, draw the elements needed. They are 3 clocks which each has 0 -9 printed
evenly from each other near the circumference of it, 10 small boxes each which a bit
and corresponding place value, a dash board briefly showing the conversion by
subtraction equations and an equal sign. Similarly, this convertor uses unit created by
the width f window to handle pixels for height and width for better control.
Refinement are made to later for precision. Here are the codes for the clocks.
The code above only draw a circle unless function drawClock() is called. Three
functions are called in drawClock(). They are drawFace(), drawSector() and
drawNumber() and they are called following this order. drawFace() return a circle
with a colored concentric circle labeled 0 inside. drawSector return a circle with a
colored concentric circle labeled 0 inside and 10 sectors with alternate sector colored.
drawNumber() return a circle with a colored concentric circle labeled 0 inside and 10
sectors with alternate sector colored and sectors labeled from 0 to 9.
In drawSector(), the "arcsector" is defined as "Math.PI*(2*1/10)". It is divided by 10
so as to generate 10 sectors, which each labeled by 1 number from 0 to 9. IN
drawNumbers(), the loop condition"(num = 0; num < 10; num++)" is set to have 10
loops. This is to cope with "ang = num * Math.PI/5;". In this way, the number 0 to 9 is
to be labeled evenly within the clock.
Elements other than clocks are drawn similarly as the binary-to-decimal convertor
does. Next, the event handler. "Mousedown" and" touchend" are events to be
handled for click and tap by users. Cursor and finger position are checked with
respect to coordinates. Here, Pythagorean theorem is used to check whether the
position of click or tap is within the clocks.
The three clocks, from left to right, represent the hundreds, tens and ones in a
decimal number. The default value of decimal number to be converted is zero.
Therefore three zeros are placed in centers of the three clocks. Once an event is
triggered, that is a tap or click on number in sectors, position of click and tap will be
taken. Then the following will be done immediately following the order:
 check which clock is clicked/ tapped,
 check which number is clicked/ tapped,
 place that number in the center of the clock clicked/ tapped,
 update the variable containing the decimal value,




calculate the corresponding binary representation ,
update the small boxes bits ,
update the place values for small boxes, and
update the dashboard.
Here is the code for updating the dashboard. Minuend, subtrahend and difference
are first drawn with background colored rectangles. Then "-" and "=" signs are drawn
to complete the update.
Results
The result of the project is an interactive Android computer learning application
containing detailed information to fundamental questions of basic concepts, binary
and processor, for junior secondary school students with the technique of HTML5.
This application can be installed in smart devices with version of Android 9 onwards
( that is Android 2.3 onwards for platform). It is handy and convenient. It is with
appropriate difficulty to junior secondary students.
The interactive part is important in this application. Here are the results of their
implementation. They are examples of using the animations. Desirable result is
granted.
Content page
When Binary button is pressed, only content related to binary is shown. This is so for
Processor, Fun and About respectively.
Helpful animations
Binary addition
When the "see sum" button in the upper diagram below is clicked, the sum of
addition for the ones are shown and a "see sum" button appears, which resulted as
the lower diagram.
Binary addition with carrier
When the "see sum" button in the upper diagram below is clicked, the sum of
addition for the tens are shown. A carrier and a "see sum" button appears, which
resulted as the lower diagram.
Character handling in computer
When the page is loaded, the upper diagram below is shown. By clicking the "B"
button, the lower diagram is shown. It is with details about how the computer
receive the input of the character "B" as well as the handling and display of it.
When a further click to done to button "O", the details about how the computer
receive the input of the character "B" and the handling and display of it change to
the details about how the computer receive the input of the character "O" and the
handling and display of it. The diagram below is the resultant diagram.
Increase in hexadecimal, decimal and binary
When the page is loaded, the upper diagram below is shown.
By clicking the "+" button inside the hexadecimal named, the numbers in all three
columns are incremented. After clicking that "+" button for 14 times, "e" is shown in
the hexadecimal named, "14" is shown in the decimal named and "1110" is shown in
the binary named. This result is shown in the lower diagram.
When a further click to done to button "-" in the binary named, the numbers in all
three columns are decremented. After clicking that "-" button for 5 times, "9" is
shown in the hexadecimal named, "9" is shown in the decimal named and "1001" is
shown in the binary named. The diagram below is the resultant diagram.
Color picker
When the page is loaded, the upper diagram below is shown.
By clicking a on the wheel, the color range shown in the square inside the wheel
changes and the hexadecimal representation of the color clicked is shown in the
textbox at its right. This result is shown in the lower diagram.
Full Screen animations
Binary-to-decimal convertor
When the page is loaded, this diagram below is shown. The values are all zeros with
place value dimmed.
By tapping onto the third small box, the digit in the box changes to 1. The place value
4 is lighted and raised. The result box becomes 4.
By tapping onto the forth small box, the digit in the box changes to 1. The place value
8 is lighted and raised. The result box becomes 12. A "+" sign appears between the 8
and 4.
By tapping onto the fifth small box, the digit in the box changes to 1. The place value
16 is lighted and raised. The result box becomes 28. A "+" sign appears between the
16 and 8.
By tapping onto the forth small box, the digit in the box changes to 0. The place value
8 is dimmed and dropped. The result box becomes 20. The "+" sign between the 16
and 8 vanished.
Decimal-to-binary convertor
When the page is loaded, this diagram below is shown. The values are all zeros with
place value dimmed.
By tapping onto the number 2 in the purple clock, the digit in the clock changes to 2.
The small boxes and dashboard are updated.
By tapping onto the number 5 in the blue clock, the digit in the clock changes to 5.
The small boxes and dashboard are updated.
By tapping onto the number 5 in the red clock, the digit in the clock changes to 5.
The small boxes and dashboard are updated.
By tapping onto the number 2 in the blue clock, the digit in the clock changes to 2.
The small boxes and dashboard are updated.
Conclusion and Future Works
Computer is an important and hot issue all around the world nowadays. From
personal computers to notebooks, now we have smart tablets and smart phone. The
access of information turns to be very easy with a few taps on the handy and
convenient smart phones. People start to use mobile devices they had as their
extensions particularly in social means. Web browsing no longer the main reason for
getting online. Connecting with friends takes the place instead. To ease
communications, mobile applications for social purpose such as Instagram and
WhatsApp are widely used. User simply makes a few taps to share, to view and to
chat with others. This kind of information access is turning to be more common and
popular with its ease.
Following the trend, many authorities and companies have their own mobile
applications. Information is delivered to clients and customers via these application.
Mobile application becomes one of the most popular data access to people. With its
great influence, many people including students enjoy the casual and handy
experience with their smart devices. These devices are called smart as they are made
to cope with our usage on them. They are so smart to make the usage on them
simple and easy. The smarter the device is, the less we have to do. Now we see that
how much we are going to rely on computers. In fact, we cannot pose no reliance on
computers. Therefore if we want to be a wise user of technology, it is important for
us to learn computer. Junior secondary studies would be a good start overall.
Reference
1.
2.
3.
4.
5.
6.
7.
8.
What is binary code, the history behind it and popular uses. (n.d.). Retrieved
April 19, 2015, from http://binarytranslator.com/what-is-binary.php
Why Computers Use Binary. (n.d.). Retrieved April 19, 2015, from
http://nookkin.com/articles/computer-science/why-computers-use-binary.ndoc
Basic Gates and Functions. (n.d.). Retrieved April 19, 2015, from
http://www.ee.surrey.ac.uk/Projects/CAL/digital-logic/gatesfunc/index.html
Megabytes, Gigabytes, Terabytes... What Are They? (n.d.). Retrieved April 19,
2015, from http://www.whatsabyte.com/
Data In The Computer. (n.d.). Retrieved April 19, 2015, from
http://homepage.cs.uri.edu/book/binary_data/binary_data.htm
Understanding Binary and Hex numbers. (n.d.). Retrieved April 19, 2015, from
http://www.codemastershawn.com/library/tutorial/hex.bin.numbers.php
Analog vs. Digital. (n.d.). Retrieved April 19, 2015, from
https://learn.sparkfun.com/tutorials/analog-vs-digital
(n.d.). Retrieved April 19, 2015, from
http://www.bbc.co.uk/education/guides/zjfgjxs/revision/3
9.
Binary Lesson 12 - One's Complement and Two's Complement. (2014, October
13). Retrieved April 19, 2015, from
https://delightlylinux.wordpress.com/2014/10/13/binary-lesson-12-ones-compl
ement-and-twos-complement/
10. UTF-8. (n.d.). Retrieved April 19, 2015, from http://everything2.com/title/UTF-8
11. Binary Lesson 10 - Binary Subtraction: Longhand. (2014, September 22).
Retrieved April 19, 2015, from
https://delightlylinux.wordpress.com/2014/09/22/binary-lesson-10-binary-subt
raction/
12. Android App Development in HTML5 using Visual Studio 2012 Express for Web.
(n.d.). Retrieved April 19, 2015, from
http://social.technet.microsoft.com/wiki/contents/articles/22813.android-appdevelopment-in-html5-using-visual-studio-2012-express-for-web.aspx
13. Quick no-nonsense guide to installing Apache Ant. (n.d.). Retrieved April 19,
2015, from https://www.youtube.com/watch?v=XJmndRfb1TU
14. How To Install APK File On Android Emulator. (n.d.). Retrieved April 19, 2015,
from https://www.youtube.com/watch?v=HVysAukOpCA
15. (n.d.). Retrieved April 19, 2015, from
http://www.bbc.co.uk/education/subjects/z34k7ty
16. Create an app icon using Photoshop in 20 easy steps. (2012, November 21).
Retrieved April 19, 2015, from
http://99designs.com/designer-blog/2012/11/21/create-an-app-icon-using-pho
toshop-in-20-easy-steps/
17. Icon Slayer. (n.d.). Retrieved April 19, 2015, from
http://www.gieson.com/Library/projects/utilities/icon_slayer/#.VNcg7vmUfzF
18. JQuery Mobile: Demos and Documentation. (n.d.). Retrieved April 19, 2015,
from http://demos.jquerymobile.com/1.2.1/
19. Detect and Set the iPhone & iPad's Viewport Orientation Using JavaScript, CSS
and Meta Tags. (n.d.). Retrieved April 19, 2015, from
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/388959
1/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSSand-Meta-Tags.htm
20. Manuel Ignacio López Quintero. (n.d.). Retrieved April 19, 2015, from
http://miloq.blogspot.hk/2011/05/coordinates-mouse-click-canvas.html
21. Touch Event Handling in JavaScript. (n.d.). Retrieved April 19, 2015, from
http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-event
s-in-javascript.html#handling-taps
22. Android force orientation. (n.d.). Retrieved April 19, 2015, from
23.
24.
25.
26.
http://developer.appcelerator.com/question/40001/android-force-orientation
Circles, text and getImageData. (n.d.). Retrieved April 19, 2015, from
http://codepen.io/rachsmith/pen/fBoiD
Simonsarris.com. (n.d.). Retrieved April 19, 2015, from
http://simonsarris.com/blog/510-making-html5-canvas-useful
HTML canvas arc() Method. (n.d.). Retrieved April 19, 2015, from
http://www.w3schools.com/tags/canvas_arc.asp
From circle to pie chart, with JavaScript and Canvas. (n.d.). Retrieved April 19,
2015, from http://www.scriptol.com/html5/canvas/circle.php
27. Detect if user clicks inside a circle. (n.d.). Retrieved April 19, 2015, from
http://stackoverflow.com/questions/16792841/detect-if-user-clicks-inside-a-circ
le
28. If mouse is inside circle sector? (n.d.). Retrieved April 19, 2015, from
http://stackoverflow.com/questions/23712191/if-mouse-is-inside-circle-sector
29. Smooth dragging – extending our simple dragging example | Rectangle World –
HTML5 Canvas and JavaScript: Tutorials and Experiments. (n.d.). Retrieved April
19, 2015, from http://rectangleworld.com/blog/archives/74
30. How to make a rectangle with rounded corners in Canvas. (n.d.). Retrieved April
19, 2015, from http://www.scriptol.com/html5/canvas/rounded-rectangle.php
31. Complete List of Emoji. (n.d.). Retrieved April 19, 2015, from
32.
33.
34.
35.
http://www.fileformat.info/info/emoji/list.htm
Software. (n.d.). Retrieved April 19, 2015, from
http://en.wikipedia.org/wiki/Software
Computer Operating Systems. (n.d.). Retrieved April 19, 2015, from
http://www.computerhope.com/os.htm
Computer virus. (n.d.). Retrieved April 19, 2015, from
http://en.wikipedia.org/wiki/Computer_virus
Turn a picture to Black & White online. (n.d.). Retrieved April 19, 2015, from
http://convertimage.net/online-photo-effects/black-and-white-photo-fx.asp?i=2
0150414-161733-flltr
36. (n.d.). Retrieved April 19, 2015, from
http://studio.code.org/unplugged/unplug1.pdf
37. Hanson, G., & Barwick, S. (n.d.). Retrieved April 19, 2015, from
http://www.wisegeek.com/what-is-a-digital-computer.htm
38. Binary Code. (n.d.). Retrieved April 19, 2015, from
http://soundandlight-cdplayer.weebly.com/binary-code.html
39. Data In The Computer. (n.d.). Retrieved April 19, 2015, from
http://homepage.cs.uri.edu/book/binary_data/binary_data.htm
40. What is flash memory ? - Definition from WhatIs.com. (n.d.). Retrieved April 19,
2015, from http://searchstorage.techtarget.com/definition/flash-memory
41. Online CS Modules: The Central Processing Unit. (n.d.). Retrieved April 19, 2015,
from http://courses.cs.vt.edu/csonline/MachineArchitecture/Lessons/CPU/
42. Microprocessor Tutorial. (n.d.). Retrieved April 19, 2015, from
http://www.eastaughs.fsnet.co.uk/cpu/execution-fetch.htm
43. The Alan Turing Internet Scrapbook. (n.d.). Retrieved April 19, 2015, from
http://www.turing.org.uk/
44. Why Alan Turing is the father of computer science. (n.d.). Retrieved April 19,
2015, from
http://www.techradar.com/news/world-of-tech/why-alan-turing-is-the-father-o
f-computer-science-1252107
45. The Imitation Game. (n.d.). Retrieved April 19, 2015, from
http://en.wikipedia.org/wiki/The_Imitation_Game
46. What is a Turing Machine? (n.d.). Retrieved April 19, 2015, from
http://www.i-programmer.info/babbages-bag/23-turing-machines.html
47. Computer Laboratory. (n.d.). Retrieved April 19, 2015, from
https://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/turing-machine/one.ht
ml