Demonstration of Sorting Algorithms on Mobile Platforms

Robert Meolic

Faculty of Electrical Engineering and Computer Science, University of Maribor, Maribor, Slovenia

Keywords:

Learning Software, Mobile Learning, Computer Science, Engineering Education.

Abstract:

This paper presents a systematic approach to the implementation of a mobile framework for demonstrating

of sorting algorithms. Well-known corresponding projects are listed. The pseudo-code form is discussed,

together with the graphical presentation of actions. A set of atomic operations that reveal the concept of

sorting algorithms has been identiﬁed. Implementations of Gnome Sort, Insertion Sort, and Quicksort are

given as a portable C-style code. The presented code has been tested within a prototype application on a

modern smartphone. The project was oriented towards the usage in mobile learning systems.

1 INTRODUCTION

There are many subjects and concepts within com-

puter science. Some of them are broad and extensive

whilst others are relatively narrow and speciﬁc. Sort-

ing algorithms can be classiﬁed into the last group

as long as we are not creating science from them

(Vitanyi, 2007). In (Skiena, 2008) the author states

that sorting is the fundamental algorithmic problem

in computer science and that learning the different

sorting algorithms is like learning scales for a musi-

cian. Indeed, sorting is the ﬁrst step in solving a host

of other algorithmic problems. Pseudo-codes of dif-

ferent sorting algorithms and their implementation in

different programming languages can easily be found

on the internet (Wikipedia, 2012), (Rosetta Code,

2012). However, the most respected reference is the

3rd volume of Knuth’s encyclopedia (Knuth, 1998).

The number of mobile platforms has been increas-

ing rapidly, and it is expected that they will inﬂuence

the education process at least as much as personal

computers and the internet. The beneﬁts of mobile

learning include learning from rich interactive con-

tent (in contrast to books), ﬂexible learning locations

(in contrast to PCs), and and at ﬂexible learning times

(in contrast to classrooms). Smartphones, that are be-

coming the more widespread mobile platforms, are

introducing another interesting factor, the application

market, which is the most effective way of software

distribution ever. Just anyone can publish his/her ap-

plication. From amongst millions of these applica-

tions, many of them are already oriented towards mo-

bile learning.

We are deﬁnitely not the ﬁrst nor alone in re-

searching the usage of mobile applications for teach-

ing various topics regarding computer programming.

We have been directly encouraged by a recent pa-

per on teaching sorting algorithms using an Android-

based application (Boticki et al., 2012). It encour-

ages learning by location-independent usability and

by awarding students with points.

Many applications on mobile platforms resemble

Java applets and other web applications. This is be-

coming even more frequent as new ubiquitous web

technologies (e.g. HTML 5) can be directly used

to develop applications on mobile platforms. Let us

mention some existing web applications visualising

sorting algorithms.

The web site called Sorting Algorithm Animations

(Martin, 2012) provides an interesting comparison of

the algorithms’ efﬁciencies. The main properties and

very formal pseudo-codes are given for each algo-

rithm. Please, note that our goal is not the same, e.g.

we do not want to only provide a plain description or

comparison of different sorting algorithms.

Project JHAV

E (Naps et al., 2012) includes dif-

ferent sorting algorithms. It is a client-server project

where each demonstration is implemented in a special

scripting language. In principle, the demonstrations

of each algorithm looks differently because they are

precisely created to explain each particular algorithm.

D. K. Nester set up a web page powered by

Javascript, that shows the pseudo-codes for various

sorting algorithms and enables the tracing of their ex-

ecutions (Nester, 2012). The outline of our work is

very similar but we have involved mobile platforms.

136

Meolic R..

Demonstration of Sorting Algorithms on Mobile Platforms.

DOI: 10.5220/0004388201360141

In Proceedings of the 5th International Conference on Computer Supported Education (CSEDU-2013), pages 136-141

ISBN: 978-989-8565-53-2

 2013 SCITEPRESS (Science and Technology Publications, Lda.)

2 MOBILE FRAMEWORK FOR

DEMONSTRATING OF

SORTING ALGORITHMS

A computer program is given by its source code. As a

premise for a good design the code should be clear,

difﬁcult statements should be accompanied by ex-

planatory comments. Moreover, graphical debuggers

allow for easy observation of every memory bit, and

the tracking of any program ﬂow. However, design-

ing the algorithm is not the same as implementing and

testing it. Indeed, engineers do not learn computer al-

gorithms only to be able to write their straightforward

implementation — efﬁcient implementations are al-

ready present in libraries. The goal of knowing var-

ious algorithms is to be capable of adapting and ex-

tending existing ones and to help in inventing com-

pletely new algorithms.

A purpose-built demonstration of an algorithm

may differ considerably from the debugger approach:

• Pseudo-code can be used instead of a real pro-

gramming language;

• Actions can be explained in advance;

• Explanations can be beyond simple comments;

• Additional functionality can be added such as an

examination mode for testing the user’s knowl-

edge.

A wide-selection of mobile platforms already

exists, and this technology is still expanding very

quickly. Smartphones, handhelds, gaming consoles,

tablets, and ultrabooks, all of them are mobile in the

sense of portability. Developing applications that can

be used on different platforms is often extremely dif-

ﬁcult (Holzinger et al., 2012). In order to address at

least a part of this problem we were interested in a

rather minimal GUI, and set only a few expectations:

• A display with a least 800x480 points;

• A touchscreen display recognising click, click-

and-hold, and drag;

• A sensor for detecting screen orientation;

• A virtual keyboard on demand.

We found a helpful review of a mobile interface

design in (Mirkovic et al., 2011). Based on the feed-

back from users, they suggested that:

• All description texts that do not give extra knowl-

edge should be omitted;

• The right colours and text sizes are very important

for increasing readability and clarity;

• The usage of icons and images should be highly

limited;

• Concepts from web applications helps users to

transfer known user experience to the mobile ap-

plication, but text input and menu organisation

should resemble standard mobile functionalities.

There is a lot of information, numerical and graph-

ical, that we want to present to the user. However,

we cannot show it all in once because of the limited

screen size and because this would be to demanding

for the user. Some possible solutions are:

• Let the device show different data in the portrait

and landscape modes;

• Use pop-ups to show detailed data about items;

• Implement different screens which can be navi-

gated by using tabs or swipe gestures;

• Use a hierarchical presentation where different

groups and/or subgroups of data can be shown

(expanded) or hidden (collapsed).

We have decided to take advantage of orientation

detection. The portrait view is an obvious choice to

show source code. Thus, we give the largest part of

the screen to that component. However, without ob-

serving data changes the user will not beneﬁt much

from watching the run of a source code. Thus we also

show the table of elements as small as possible but

readable. Before an algorithm is chosen, the area re-

served for the source code is used to show statistics.

The landscape view serves for those presentations

and interactions not realised on the portrait view. Al-

most all the area is occupied by a table of elements.

Large elements make the user’s interaction with them

easier. We have added a one-line comment about the

algorithm’s next action. This allows for tracking the

algorithm even without seeing it completely.

3 TRACKING THE EXECUTION

OF SORTING ALGORITHMS

The goal was the tracking of sorting algorithms by us-

ing a set of given visual effects whilst taking into ac-

count the limitations of the target platform. Different

algorithms require different approaches.

The initial decision went to the pseudo-code style

used for the presentation of the algorithms. Since we

aimed at the usage within a basic computer science

course, the obvious choice was a procedural pseudo-

code form. Hence, the sorting algorithms are com-

posed of sentences that are either assignments, de-

cisions, or ﬂow control statements. As well as the

syntax, we also paid careful attention to the presen-

tation of the semantics. The inclusion of compound

and otherwise complicated sentences is undesirable.

DemonstrationofSortingAlgorithmsonMobilePlatforms

137

The ﬂow control by using the

for

loop is a typical

example of complex statement which is composed of

an initial assignment, a condition to stop, and control

actions applied at the end of every looping. Thus, we

preferred

while

loops within the presentation.

In order to avoid an inconsistent handling of dif-

ferent semantic parts, we identify a set of atomic op-

erations that reveal the concept of sorting algorithms.

Atomic operations are those that will be emphasised

on the screen, either simply by showing/changing

some value or applying some graphical effect, e.g.

highlighting part of the screen or doing some anima-

tion. Moreover, the atomic operations formed sepa-

rate steps during step-by-step tracing. To some extent,

the atomic operations correspond to the pseudo-code

statements, but we would have lost all the ﬂexibil-

ity by equating these two formalisms. The following

atomic operations are necessary and sufﬁcient:

• Changing the value of a variable;

• Starting/continuing/ﬁnishing a loop;

• Reading the value of an element;

• Comparing the value of one element with the

value of another one or with some stored value;

• Swapping two elements;

• Moving elements.

We were interested in the basic form of sorting al-

gorithms where the elements to be sorted were stored

in the table and no fancy optimisations were used.

We considered swapping and moving elements to be

atomic operations. They were autonomous principles

usually taught along the sorting algorithms.

3.1 Gnome Sort

Gnome Sort is advertised as the technique used by the

standard Dutch garden gnome to sort a line of ﬂower

pots (Grune, 2012). Gnome Sort is supposed to be

the simplest sorting algorithm and, indeed, it is very

easy to demonstrate it. Our implementation of the al-

gorithm is shown in Figure 1. Only the bold lines

are shown to the user of the mobile application. The

shown lines are slightly modiﬁed (to reduce the text

width and also to make it more appealing for devel-

opers using different programming languages).

The index used by the algorithm (yes, Gnome Sort

uses only one index) is for brevity denoted by variable

in the pseudo-code. We use function

setMark()

to mark the element on the index

and function

setSpecial()

to denote the elements that are already

in order. We use function

CC()

to enable step-by-step

tracing and to describe the current/next step.

3.2 Insertion Sort

Insertion Sort is a simple sorting algorithm that builds

the ﬁnal sorted array one item at a time. It is much

less efﬁcient on large arrays than more advanced al-

gorithms, but for small arrays it can even outperform

them. Moreover, insertion sort handles nearly sorted

arrays quite efﬁciently. When humans manually sort

something (e.g. a deck of playing cards), most of

them use a method similar to Insertion Sort.

In our implementation of Insertion Sort (Figure 2)

we use mark-up function

setCheck()

to denote ele-

ments with indices

and

, that are currently being

compared, and function

setSpecial()

to mark the

already sorted elements. Please, note that we omit-

ted the details of moving the elements. Moreover, to

ﬁnd a proper place for a current element we do not as-

sume the moving of each individual element. We only

perform the necessary comparisons and subsequently

move a whole block of elements at once. Whilst such

an approach is not used in most practical implemen-

tations of Insertion Sort (at least not in those sorting

a table of elements), this divergence neither change

the main idea of the algorithm nor causes troubles or

misunderstandings.

3.3 Quicksort

Quicksort is a divide-and-conquer algorithm which

ﬁrst divides elements into two subgroups and then re-

cursively sorts these subgroups. Many versions ex-

ist of the original algorithm, which are either called a

simple version or an in-place version. In our project

we choose one of the in-place versions (Figure 3), i.e.

an algorithm which does not need an extra space for

dividing elements into two subgroups. Moreover, we

used a recursive version of the algorithm, which is

also the most common. The presented variant is not

the original version of the algorithm (Khreisat, 2007)

but in our opinion it is the most appropriate one for

the use in the class.

At the beginning of each recursion pass, the in-

dices of lower and upper elements are stored into

variables

left

and

right

which are then increased

and decreased, respectively. Each recursion pass ends

when index

left

becomes greater or equal to index

right

. Please, note that we omitted details for func-

tion

calculatePivot()

to make the code shorter.

In the prototype application we used the median of

the ﬁrst, middle and last elements. For the sake of

simplicity, the given implementation detects the ﬁnal

condition at the beginning of each recursive call (we

could make this decision at the end, just before each

recursive call).

CSEDU2013-5thInternationalConferenceonComputerSupportedEducation

138

gnomeSort(table T, int n) {

··

int i, prev=-1;

··

setLabel("read",0);

··

setLabel("write",0);

··

setLabel("sourceLine",1);

·· i = 0;

··

setLabel("i",0);

··

setMark(0);

··

CC("Position starts at 0");

·· while (i < count) {

····

if (prev != -1)

{

······

setLabel("sourceLine",3);

······

setLabel("i",i);

······

clearMark(prev);

······

setMark(i);

···· }

····

prev = i;

····

CC("Position now at i");

···· if (i == 0 || T[i] >= T[i-1]) {

······

setLabel("sourceLine",4);

······

if (i == 0)

{

········

CC("Increment position (i==0)");

······ }

else

{

········

incrLabel("read",2);

········

CC("Increment position ([i]>=[i-1])");

······ }

······

setSpecial(i);

······ i++;

···· } else {

······

setLabel("sourceLine",6);

······

CC("Swap elements [i] and [i-1]");

······

clearMark(i);

······ swap(i,i-1);

······

incrLabel("write",2);

······

setLabel("sourceLine",7);

······

CC("Decrement position");

······ i--;

···· }

·· }

··

setLabel("sourceLine",9);

··

setLabel("i",i);

··

clearMark(i-1);

··

CC("Algorithm finished");

}

Figure 1: Implementation of Gnome Sort algorithm.

insertionSort(table T, int n) {

··

int i, j, key;

··

setLabel("i",-1);

··

setLabel("j",-1);

··

setLabel("key",-1);

··

setLabel("read",0);

··

setLabel("write",0);

··

setLabel("sourceLine",1);

··

setSpecial(0);

··

CC("Skip first element");

·· i = 1;

·· while (i < n) {

····

setLabel("sourceLine",2);

····

setLabel("i",i);

····

setMark(i);

····

CC("Outer loop now at i");

···· key = T[i];

····

incrLabel("read",1);

····

setLabel("key",key);

····

setLabel("sourceLine",4);

····

CC("[i] stored into variable key");

···· j = i - 1;

····

if (j >= 0)

{

······

setLabel("sourceLine",5);

······

setLabel("j",j);

······

setMark(j);

······

CC("Inner loop starts at j=i-1");

······ while (j >= 0 && T[j] > key) {

········

incrLabel("read",1);

········

setLabel("sourceLine",6);

········

CC("Decrement j ([j]>key)");

········

clearMark(j);

········ j--;

········

setLabel("j",j);

········

if (j >= 0) setMark(j);

······ }

···· }

····

setSourceLine(7);

····

if (j >= 0)

{

······

incrLabel("read",1);

······

CC("Stop inner loop ([j]<=key)");

······

clearMark(j);

···· }

else

{

······

CC("Stop inner loop (j<0)");

···· }

···· if (j != i-1) {

······

setLabel("sourceLine",8);

······

CC("Move [i] to index j+1");

······

clearMark(i);

······ move(i,j+1);

······

incrLabel("write",i-j);

···· }

····

if (j == i-1) clearMark(i);

····

setSpecial(j+1);

····

setLabel("sourceLine",9);

····

if (j >= 0) setLabel("j",-1);

····

CC("Increment <b>i</b>");

···· i++;

····

setLabel("key",-1);

·· }

··

setLabel("sourceLine",11);

··

setLabel("i",i);

··

CC("Algorithm finished");

}

Figure 2: Implementation of Insertion Sort algorithm.

DemonstrationofSortingAlgorithmsonMobilePlatforms

139

quickSort(table T, int begin, int end) {

··

int left, right, pivot;

··

setLabel("read",0);

··

setLabel("write",0);

·· left = begin;

·· right = end;

·· if (left < right) {

····

setLabel("sourceLine",3);

····

setLabel("left",left);

····

setLabel("right",right);

····

setLabel("pivot",-1);

····

setSpecial(left,right);

····

CC("Sort elements from left to right");

····

setLabel("sourceLine",4);

····

CC("Calculate pivot");

···· pivot = calculatePivot(left,right);

····

incrLabel("read",3);

····

setLabel("pivot",pivot);

····

setLabel("sourceLine",5);

····

CC("Start partitioning");

···· while (left <= right) {

······

setLabel("sourceLine",6);

······

CC("Search forward from left");

······

setMark(left);

······ while (T[left] < pivot) {

········

incrLabel("read",1);

········

CC("Element less than pivot");

········

clearMark(left);

········

clearSpecial(left);

········ left++;

········

setLabel("left",left);

········

setMark(left);

······ }

······

incrLabel("read",1);

······

CC("Element not less than pivot");

······

setLabel("sourceLine",7);

······

CC("Search backward from right");

······

setMark(right);

······

clearSpecial(right);

······ while (T[right] > pivot) {

········

incrLabel("read",1);

········

CC("Element greater than pivot");

········

setSpecial(right);

········ right--;

········

setLabel("right",right);

········

setMark(right);

········

clearSpecial(right);

······ }

······

incrLabel("read",1);

······

CC("Element not greater than pivot");

······

clearMark(right);

······ if (left <= right) {

········

setLabel("sourceLine",9);

········

clearMark(left);

········

setSpecial(right);

········

CC("Swap elements [left] and [right]");

········ swap(left,right);

········

incrLabel("write",2);

········

setMark(right);

········

clearSpecial(left);

········ left++;

········ right--;

········

setLabel("left",left);

········

setLabel("right",right);

······ }

···· }

····

setLabel("sourceLine",12);

····

CC("left greater than right");

····

setLabel("left",-1);

····

setLabel("right",-1);

····

setMark(begin,right);

····

CC("Elements sorted per pivot");

····

clearMark(begin,end);

····

clearSpecial(left,end);

···· quickSort(begin,right);

···· quickSort(left,end);

·· }

··

CC("Return from recursive call");

}

Figure 3: Implementation of Quicksort algorithm.

4 DISCUSSION

AND CONCLUSIONS

We have studied sorting algorithms with the goal

of their demonstration on mobile platforms. There

are many aspects to such work, e.g. choosing the

proper presentation of the pseudo-code and choosing

the proper type and amount of visual effects. Because

we successfully managed three very different algo-

rithms, we believe that our approach can be smoothly

extended to the most of other sorting algorithms as

well. Indeed, we do have some scruples about using

the same framework for demonstrating various sort-

ing algorithms. It could, however, be acceptable to

sacriﬁce some ﬂexibility for uniformity because we

obtained a more direct comparison between different

solutions. All in all, the shared platforms for demon-

strating the problems and solutions are quite common

in computer science teaching books.

When considering the practical part of the project,

the main results were the implementations of sorting

algorithms. When they are observed more closely, it

is noticeable that each statement either belongs to the

sorting algorithm, or collects statistical data, or serves

as a part of the demonstration strategy. We were very

careful not to mix these roles. Hence, the obtained

C-style code is portable and not bound to any speciﬁc

graphical API. Furthermore, we can obtain statistical

CSEDU2013-5thInternationalConferenceonComputerSupportedEducation

140

Figure 4: Prototype application running on Nokia N9.

Figure 5: Prototype application in landscape mode.

data by only excluding all GUI statements. The pre-

sented implementations were tested in a prototype ap-

plication on Nokia N9. This smartphone uses Meego

OS (based on Linux kernel) and allows native applica-

tions in C++. Figures 4 and 5 give some screenshots

from the prototype application. In any case, the goal

of the project was to research the problems in such a

general way that the implementation on any mobile

platform could beneﬁt from it.

indent Although not being the main goal of this

project, we found it very usable when teaching soft-

ware project management. Today, students often

underestimate the beneﬁt of appropriate planning

(e.g. preparation of graphical views) and testing (e.g.

preparation of test cases). The presented project re-

quires detailed planning of graphical representation

because of the limited screen sizes on mobile devices,

and because the effective demonstration of sorting al-

gorithms involves several navigation commands (run,

pause, stop, one step, reset, etc.), so testing the ob-

tained application is quite a challenge.

Although, at least Quicksort algorithm is not triv-

ial, sorting is not a real challenge for most of the stu-

dents. This is not the case with all subjects. For ex-

ample, when considering search trees, e.g. AVL trees,

2-3 trees, and red-black trees; have you ever been able

to manage them? Every group of algorithms needs a

special framework and more complex and longer al-

gorithms are quite problematic for demonstrating on

mobile platforms. Fortunately, mobile devices are be-

coming bigger and more powerful, capable of pre-

senting more text and graphics, fancier animations,

and effects. Also, many diverse controls are appear-

ing (gestures, 3D accelerometers, voice commands).

Hence, we all have a lot of further work.

REFERENCES

Boticki, I., Barisic, A., Martin, S., and Drljevic, N. (2012).

Teaching and learning computer science sorting algo-

rithms with mobile devices: A case study. Computer

Applications in Engineering Education.

Grune, D. (2012). Gnome sort - the simplest sort algo-

rithm. Retrieved December 14, 2012, from http://

dickgrune.com/Programs/gnomesort.html.

Holzinger, A., Treitler, P., and Slany, W. (2012). Making

apps useable on multiple different mobile platforms:

On interoperability for business application develop-

ment on smartphones. In Multidisciplinary Research

and Practice for Information Systems, volume 7465 of

Lecture Notes in Computer Science, pages 176–189.

Khreisat, L. (2007). Quicksort — a historical perspective

and empirical study. International Journal of Com-

puter Science and Network Security, 7(12):54–65.

Knuth, D. E. (1998). The Art of Computer Programming,

volume 3: Sorting and Searching. Addison-Wesley

Professional, 2 edition.

Martin, D. R. (2012). Sorting algorithm anima-

tions. Retrieved December 14, 2012, from http://

www.sorting-algorithms.com/.

Mirkovic, J., Bryhni, H., and Ruland, C. M. (2011). De-

signing user friendly mobile application to assist can-

cer patients in illness management. In The Third In-

ternational Conference on eHealth, Telemedicine, and

Social Medicine, pages 64–71.

Naps, T., Furcy, D., Grissom, S., and McNally, M. (2012).

Java-hosted algorithm visualization environment. Re-

trieved December 14, 2012, from http://jhave.org/.

Nester, D. K. (2012). Sorting demonstrations. Retrieved

December 14, 2012, from http://www.bluffton.edu/

∼nesterd/java/SortingDemo.html.

Rosetta Code (2012). Sorting algorithms. Retrieved De-

cember 14, 2012, from http://rosettacode.org/wiki/

Category:Sorting Algorithms.

Skiena, S. S. (2008). The Algorithm Design Manual.

Springer, 2 edition.

Vitanyi, P. (2007). Analysis of sorting algorithms by kol-

mogorov complexity (a survey). Entropy, Search,

Complexity, pages 209–232.

Wikipedia (2012). Sorting algorithm. Retrieved De-

cember 14, 2012, from http://en.wikipedia.org/wiki/

Sorting algorithm.

DemonstrationofSortingAlgorithmsonMobilePlatforms

141