e-ISSN : 2443-2229 Jurnal Teknik Informatika dan Sistem Informasi

Volume 2 Nomor 1 April 2016

AP-ASD1: An Indonesian Desktop-based Educational

Tool for Basic Data Structure Course
Lucky Christiawan#1, Oscar Karnalim#2
Information Technology, Maranatha Christian University
Bandung, Indonesia
lucky.christiawan@gmail.com
oscar.karnalim@gmail.com

Abstract— Although there are so many available data structure may handle dynamic test cases efficiently in terms of time
educational tools, it is quite difficult to find a suitable tool to aid (lecturer does not require to write/draw algorithm steps on
students for learning certain course [1]. Several major board) [3, 4, 5]. Although many data structure educational tools
impediments in determining the tool are teaching preferences, have been developed and can be easily found on the internet
language barrier, confusing terminologies, internet dependency,
various degree of material difficulty, and other environment
(e.g. AlgoViz [6], VisuAlgo [7] and OpenDSA [8]), these tools
aspects. In this research, a data structure educational tool called may have different terminologies with class material since each
AP-ASD1 is developed based on basic algorithm and data university may have its teaching preferences due to student
structure course (ASD 1). Since AP-ASD1 is developed following characteristics. Language used in educational tools also affects
course materials and not vice versa, this educational tool is student understanding since some of them are only fluent in
guaranteed to fit in our needs. The feasibility of AP-ASD1 is their native language and forcing them to learn foreign
evaluated based on two factors which are functionality correctness language and data structure at the same time may lower their
and survey. All features are correctly functioned and yield chance to understand.
expected output whereas survey yields fairly good result (84,305% In this research, an Indonesian desktop-based data structure
achievement rate). Based on our survey, AP-ASD1 meets
eligibility standard and its features are also successfully
educational tool has been developed based on Algorithm and
integrated. Survey also concludes that this application is also quite Data Structure 1 course. This tool is called AP-ASD1 (Aplikasi
effective as a supportive tool for learning basic data structure. Pembelajaran Algoritma dan Struktur Data 1) which is an
acronym of “Educational tool for Algorithm and Data Structure
Keywords—educational tool; algorithm visualization; basic data 1 course” in Indonesian language. Algorithm and Data
structure; dynamic algorithm tracking Structure 1 (ASD 1) is a computer science course in Maranatha
Christian University which consists of basic data structure
materials such as stack, queue, linked list, and priority queue.
I. INTRODUCTION To fulfill our needs, this tool is developed as Indonesian-
Teaching data structure in computer science class requires language desktop-based application with no internet
several illustrations about how the data structure works in order requirement. It also has several additional features such as
to improve student’s understanding. Illustrations are usually dynamic algorithm tracking mechanism and embedded course
drawn manually on the board, stored as animations in materials.
presentation file, or visualized with educational tools [2].
Hand-drawn illustration is the most conventional representation II. RELATED WORKS
which let lecturer illustrates the flow of data structure by
A. AlgoViz
drawing its steps on the board. This mechanism may be the
most comfortable one since lecturer can adjust his/her AlgoViz which is the successor of AlgoViz Wiki [9] is an
illustration by adding, removing, or updating several specific algorithm visualization (AV) portal that contains links to
details based on students’ feedbacks. However, this mechanism various AV websites [6]. It is intended to connect educators,
consumes a lot of time and may yield faulty steps especially developers, and users for AVs. This portal homepage can be
when the lecturer is in a rush. Storing illustrations as seen in Figure 1. It is built on Drupal [10] (an open-source
animations in presentation tools (e.g. Microsoft PowerPoint or content management system written in PHP) and can be
Prezi) is a better approach since it is more efficient in terms of accessed from http://algoviz.org/.
time and its steps are definitely error-free. However, most AlgoViz portal does not only enlist all available AV
animations in presentation tools are built hardcoded which is websites but also provides its quality assessment information
quite difficult to incorporate dynamic test cases. such as ranking given by catalog editor, user rating,
There is a long tradition among Computer Science lecturers description, review information, field reports, and user
of using educational tool software to teach algorithms since it comments [11]. These quality assessments can be used as user

21
Jurnal Teknik Informatika dan Sistem Informasi e-ISSN : 2443-2229
Volume 2 Nomor 1 April 2015

consideration before exploring the target site. Since this portal 3. VisuAlgo covers various algorithm and data structure so
is greatly depends on AV community, several mechanism are that students have a “one-stop” place for all their
applied in order to keep the members in touch such as AlgoViz learning needs.
awards, forum, email notification, RSS feeds, and social-
media-based notifications. C. OpenDSA
OpenDSA aims to build a complete open-source, online
eTextbook for algorithm and data structure courses that
integrates textbook text with a rich collection of interactive
activities (including algorithm visualizations) [8, 13, 14, 15].
OpenDSA can be accessed from http://algoviz.org/OpenDSA/
(this tool is registered in AlgoViz portal) and its homepage can
be seen in Figure 3. This website is built with HTML 5
technology which enables course modules to be available for
use in many modern browsers with no additional plugins or
software needed.

Figure 1. AlgoViz Homepage

B. VisuAlgo
VisuAlgo is a web-based educational tool which visualizing
algorithm and data structure through animation [7, 12]. This
website was conceptualized by Steven Halim in 2011 with the
aims of improving teaching of data structures and algorithms
through dynamic interactive visualization. VisuAlgo can be
accessed from http://visualgo.net/ where its homepage can be
seen in Figure 2. This website is utilized in several computer Figure 3. OpenDSA Homepage
science class at National University of Singapore (NUS) and
covers various algorithm and data structure materials such as OpenDSA is designed with the following educational goals
sorting, bitmask, linked list, hash table, binary heap, binary [16]:
search tree, graph, segment tree, and suffix tree. 1. To become a leverage technology that present course
material in a way that makes learning easier.
2. Engaging and motivating students through interactive
activities.
3. To evaluate student performance easier through
exercises and self-assessments.
A sample of eTextbook generated by OpenDSA can be seen
in Figure 4 [8]. Each eTextbook is formed as a series of HTML
pages which consists of algorithm and data structure materials
[16]. Lecturer for a given course have control over the content,
such as reuse, alter, remove, or add existing materials on it.
Each material is converted as an interactive module which
algorithm visualization is supported by JSAV, a JavaScript
algorithm visualization library [17]. It also may consist of
Figure 2. VisuAlgo Homepage
interactive activities such as interactive exercises, algorithmic
VisuAlgo improves learning and teaching of algorithms in calculator, and performance simulator [16]. Exercises can be
the following ways [2]: conducted in several ways which are simple questions,
1. VisuAlgo visualizes algorithm flow through animation proficiency exercises, and programming exercises. Proficiency
and highlighted pseudocode which improves student exercises aim to verify student understanding about how a
understanding. These steps can be repeated as many as given algorithm works by requiring them to simulate its
needed so that students can focus on algorithm part that behavior whereas programming exercises aim to verify student
has not been understood. understanding about how to implement an algorithm or using a
2. VisuAlgo applies dynamic visualization which let certain data structure. Several minor features are also
students use their own examples and see the result. embedded such as algorithmic calculator and performance
simulator. Algorithmic calculator is conducted to calculate

22
e-ISSN : 2443-2229 Jurnal Teknik Informatika dan Sistem Informasi
Volume 2 Nomor 1 April 2016

complex part such as hashing function whereas performance translation between two programming language. Pop-up
simulator is conducted to “measure” how many processes questions are designed to maintain student interaction towards
needed for executing an algorithm. the application. It also helps the lecturer to measure student
understanding about the code. Breakpoints are utilized to let
this application run similar to standard debugger.

E. JHAVE
JHAVE (Java-Hosted Algorithm Visualization
Environment) is a support environment for AV systems where
users can design their AV on it [19]. It provides several user
benefits such as a standard set of VCR-like controls, graphical
representation, information and pseudo-code window, input
generator, pop-up question mechanism, and even several
supportive content generation tool. Sample user interface of
Figure 4. A Sample of E-Textbook Generated by OpenDSA AV developed in JHAVE can be seen in Figure 6. Lecturers
D. ViLLE may design their AV including what information is represented
during that phase. JHAVE is designed in client-server
ViLLE is a desktop-based program educational tool for architecture for dynamic material update.
teaching programming to novice programmer where student
can see the dynamic behavior of program execution through
variable changes between each instruction, function calls
through stack view, and even the description of certain code
line [18]. Function call through stack view is utilized to let
students understand recursion whereas code line description is
required to tell specific detail of certain line (which is
frequently used in advanced algorithm). ViLLE sample user
interface can be seen in Figure 5. Current code line is
highlighted whereas user gains flexible control of the
visualization (both forwards and backwards).

Figure 6. JHAVE Sample User Interface

F. Research Contribution
Feature comparison of existing CS educational tools and
AP-ASD1 can be seen in Table I. AV represents AlgoViz, VA
represents VisuAlgo, OD represents OpenDSA, V represents
ViLLE, JH represents JHAVE, and AP represents AP-ASD1.
Question symbol (“?”) represents uncertainty where the
existence of that feature is greatly depend on its AV designer.
Figure 5. ViLLE Sample User Interface

ViLLE also has additional benefits such as language- TABLE I

FEATURE COMPARISON OF EXISTING CS EDUCATIONAL TOOLS AND AP-ASD1
independency, comparing execution of two programming
languages, pop-up questions, and breakpoints [18]. Language- Feature AV VA OD V JH AP
independency let instructor to utilize ViLLE in many Algorithm and
programming languages by defining its equivalence with Java Data Structure 1
× × × × × √
syntax. Comparing execution of two programming language is course-material
compability
visualized as two parallel code editor with different highlight
Consistent UI √ × √ √ √ √
mark but points to similar semantic steps. This feature is Consistent
sometimes needed when students are required to know √ × × √ × √
terminologies

23
Jurnal Teknik Informatika dan Sistem Informasi e-ISSN : 2443-2229
Volume 2 Nomor 1 April 2015

Feature AV VA OD V JH AP 1. All instructions and descriptions in AP-ASD1 is

Python algorithm represented in Indonesian language to overcome
× ? × × × √
tracking language barrier. Most AP-ASD1 users are Indonesian
Detailed data student whose native language is Indonesian.
structure √ ? √ × ? √
2. Data structure terminologies are synchronized with
explanation
No-internet access
course materials to avoid confusion through various
× × × √ × √ terminologies. As we know, several terms may refer to
dependency
Data structure the same thing (e.g. node and vertex).
√ √ √ × √ √ 3. Data structures are visualized and animated through
visualization
Since AP-ASD1 is developed following course materials graphical representation to improve student
and not vice versa, this educational tool is guaranteed to fit in understanding.
our needs. As we know, it is quite difficult to find and integrate 4. AP-ASD1 is featured with dynamic algorithm tracking to
suitable data structure educational tools in a course [1]. show how the algorithm works. Variable states and
Although AlgoViz has access to various AV websites, it cannot instruction description for each execution are also shown
be simply integrated in course materials since each AV to clarify its execution sequences.
websites has different UI and terminologies. Inconsistent UI 5. Detailed data structure materials are embedded in AP-
and terminologies may lower student understanding since they ASD1 as an additional feature to help students recall
need to adapt on each AV website. AP-ASD1 is quite similar to course materials.
VisuAlgo except that it has two additional features which are 6. AP-ASD1 require no internet access since internet access
fully synchronized with ASD 1 course materials. They are in Indonesia is still limited and relatively slow.
synchronized Python algorithm tracking and detailed data 7. AP-ASD1 is developed as desktop-based application to
structure description. Synchronized Python algorithm tracking yield consistent UI and functionality. Web-based
is utilized for easy adaptation with algorithm language application may not work properly since it depends on
(Python) whereas synchronized detailed data structure browsers as its interpreter (especially on minor
description is required to assist students while learning. browsers).
OpenDSA may fulfill our requirements but it requires 8. AP-ASD1 have consistent UI between modules for ease
internet access which is not suitable in Indonesia. Internet of use.
access in Indonesia is still relatively slow and its coverage is Since AP-ASD1 aims to improve student understanding
limited. To overcome this impediment, AP-ASD1 is developed about basic data structure in ASD 1 course, AP-ASD1 modules
as standalone application which does not rely on internet are based on ASD 1 course materials which correlation can be
connection. Furthermore, since OpenDSA is a web based seen in Table II. All data-structure-related course materials
application which has browser-dependent UI, OpenDSA may except array are implemented. Array is excluded since it is
yield inconsistent output in several minor browsers (this UI only revisited in ASD 1 for learning abstract data type (in our
problem is also a reason why AP-ASD1 is built as desktop curriculum, array is also introduced in basic programming
application). Although both ViLLE and AP-ASD1 do not rely course which must be taken before ASD 1). Several minor data
on internet access, ViLLE only handles algorithm tracking and structures are also excluded such as queue in naive real world
does not integrate data structure visualization. JHAVE also array implementation, queue in moving head array
have similar impediment with other internet-based application implementation, and circular linked list. These data structure
to fit in our case which is internet access requirement. are excluded since they are not efficient and seldom used in
In this research, an Indonesian-language desktop-based data real programming tasks.
structure educational tool named AP-ASD1 has been
developed. It is fully synchronized with ASD 1 course TABLE II
materials in Maranatha Christian University which guarantees THE CORRELATION BETWEEN ASD 1 COURSE MATERIALS AND AP-ASD1
the fulfillment of our course needs. Several main features such MODULES
as data structure visualization, flexible input, algorithm Course Material AP-ASD1 Module
tracking, instruction log, detailed data structure description, Introduction about data
and tutorial are also embedded. Furthermore, all instructions -
structure
and descriptions in AP-ASD1 are represented in Indonesian Array : Revisited -
language to overcome language barrier. Stack (array) Stack in array implementation
Queue in circular array
Queue (array)
III. ANALYSIS, DESIGN, AND IMPLEMENTATION implementation
Standard linked list Standard linked list
A. Feature Analysis Stack in linked list
Based on our course needs and implementation Stack and queue in linked implementation
environments, AP-ASD1 is built with these following features: list implementation Queue in linked list
implementation

24
e-ISSN : 2443-2229 Jurnal Teknik Informatika dan Sistem Informasi
Volume 2 Nomor 1 April 2016

Course Material AP-ASD1 Module B. Implementation

Priority queue in linked list
Priority queue The main window of AP-ASD1 can be seen in Figure 7
implementation
List that record head and tail
whereas its view when visualizing an operation of data
Linked list variations structure can be seen in Figure 8. It consists of several
Double-pointer linked list
Recursion - components which are module selection, current module bar,
Advance Sorting - module operation panel, visualization panel, algorithm panel,
instruction log, and operation history. They are represented in
Figure 7 as A to G respectively.

Figure 7 AP-ASD1 Main Window

Figure 8. AP-ASD1 Main Window when Visualizing Insert Last on Standard Linked List

25
Jurnal Teknik Informatika dan Sistem Informasi e-ISSN : 2443-2229
Volume 2 Nomor 1 April 2015

Module selection panel which can be seen in Figure 9 User may instruct current data structure to do some
enables user to select course modules. To simplify module operations by utilizing module operation panel. The
selection, modules are categorized based on its data example of module operation panel can be seen in Figure
structure name and grouped using tree view. User can 11. User can choose any operation by clicking selected
expand or shrink each menu by clicking it. Current module button and give several input needed in given textfields.
bar consists of several information and setting about the Standard textfields are used as input mechanism to keep
current module. Beside showing current course title, this bar AP-ASD1 as simple as possible which let user prepare all
is also featured with tracking mode checkbox, next and prev the input before executing an operation. Each operation
button for algorithm tracking, and detail button. Tracking affects visualization panel, algorithm panel, instruction log,
mode checkbox is checked if user want to see algorithm and operation history.
tracking and its algorithm tracking can be controlled
through next and prev buttons. Detail button let user access
detailed data structure material of the current module which
example view can be seen in Figure 10. Each module is
described based on course materials and featured with
relevant graphics.

Figure 9. Module Selection Panel

Figure 11. The Example of Module Operation Panel: Standard Linked List

The example of data structure visualization on

visualization panel can be seen in Figure 12. All graphical
representations are based on course materials to maintain
consistency between AP-ASD1 and course materials.
Before animation of data structure operation occurs, step by
step of algorithm tracking is presented in algorithm panel.
Current line is highlighted and all of its variables are
recorded in variable log. The example of algorithm panel
can be seen in Figure 13 whereas its instruction log can be
seen in Figure 14. User can go forward and backward for
each instruction to enable user check operation flow based
on algorithm given and instruction log. The movement of
current instruction in operation flow is controlled using
keyboard key (enter and backspace) or current module bar’s
control buttons. Instruction log stores not only variables but
also descriptive information about each instruction
Figure 10. Detailed Data Structure Material Panel Example: Queue in execution. All instruction execution log is recorded in
Linked List Implementation instruction log as a list to enable user see variable changes
between instructions. Animation and algorithm tracking are

26
e-ISSN : 2443-2229 Jurnal Teknik Informatika dan Sistem Informasi
Volume 2 Nomor 1 April 2016

automatically skipped if user have already unchecked

C. Dynamic Algorithm Tracking Implementation
tracking mode checkbox in current module bar. Each
operation instructed by user are recorded in history which Since algorithm tracking is generated based on operation
example can be seen in Figure 15. History panel is expected flow and data structure state, it is quite tricky to enable user
to help user remember which operations have been executed to move forward and backward through each instruction
to yield certain state of data structure (User can see the state during the execution of an operation. However, this
of data structure in data structure visualization panel). mechanism can be implemented using pre-calculated list
approach. Algorithm is translated to “embedded”
development code which stores states for each instruction
execution in a list. Therefore, algorithm tracking can be
conducted by traversing each element in the generated list.
Selected algorithm can be translated to “Embedded”
development code by following several steps described in
Figure 12. The Example of Data Structure Visualization: Double-Pointer Figure 16. Each line in selected algorithm is translated to
Linked List
target source code with one-to-one line equivalence where
line i in algorithm is equivalent with line i in target source
code. Log storage initialization instruction is embedded at
the beginning of target source code whereas logger
instruction is embedded at the end of each target source
code’s line. Log records all useful information such as data
structure state, variable state, line of code, and natural
language description about that line. In our case, algorithm
is written in Python since Python is both algorithmic and
implementation language in ASD 1 course. It is translated
Figure 13. The Example of Algorithm Panel: Delete Last on List that
Record Head and Tail
to C# because C# is AP-ASD1 development programming
language.

Figure 14. The Example of Instruction Log: Delete Last on List that
Record Head and Tail

Figure 16. Translation Steps from Algorithm to “Embedded” Development

Code

Before algorithm tracking starts, selected algorithm

which had been translated into “embedded” source code is
executed and its log is stored as a list. The movement
between each instruction is implemented as a traversal
between elements in list. As mentioned before, log consists
of several information such as data structure state, variable
state, natural language description, and line of code.
Variable state and natural language description are stored
and shown as a list in instruction log panel whereas line of
code is used to determine which line is highlighted in
algorithm panel. Data structure state is used to modify
Figure 15. The Example Operation History: Standard Linked List

27
Jurnal Teknik Informatika dan Sistem Informasi e-ISSN : 2443-2229
Volume 2 Nomor 1 April 2015

current data structure state in visualization panel and access, desktop platform for consistent UI and functionality,
memory. and consistent UI for ease of use).

IV. EVALUATION
TABLE III
The feasibility of AP-ASD1 is evaluated based on two STANDARD EFFECTIVENESS MEASUREMENT QUESTION
factors which are functionality correctness and survey.
Question Measurement
Functionality correctness is measured using black-box Question
ID Objective
testing whereas survey is conducted by distributing A1 Ease of use How easy can you use AP-ASD1?
questionnaires on ASD 1 students which have used AP- A2 Intuitive UI How intuitive is the UI of AP-ASD1?
ASD1 in the class. UI and How consistent are all UI
A3 functionality components and functionalities
A. Black-box Testing consistency between modules in AP-ASD1?
Black-box testing is conducted to validate functionality User How convenient is AP-ASD1 in
A4
correctness of AP-ASD1 features. A feature is considered Convenience terms of use?
correctly functioned if and only if that feature produces Declarative How declarative is application
A5
similar result with its expected result. Based on our tutorial tutorial given in AP-ASD1?
evaluation, All AP-ASD1 features are correctly functioned How good is AP-ASD1 in sync with
Course material
A6 data-structure-related ASD 1 course
and yield expected results. Validated AP-ASD1 features are synchronization
materials?
categorized as follows: How helpful is AP-ASD1 to learn
1. Module change through module selection It also A7 Learning impact basic data structure, especially in
includes content consistency in current module bar, ASD 1 course?
module operation panel, visualization panel,
instruction log, and operation history. Survey are given to students in ASD 1 class for short odd
2. Data structure state and visualization (including semester of academic year 2015/2016. There are 15 students
animation sequence) for each operation. of 2015 which take ASD 1 course for the first time. They
3. The flow of dynamic algorithm tracking which are instructed to utilize AP-ASD1 as a supplementary tool
involves algorithm panel and instruction log. to understand basic data structure during ASD 1 course.
4. Miscellaneous form components which are not When students fill up the survey, they are instructed for not
evaluated in other categories. writing their identity on survey page. This mechanism is
B. Survey conducted to let they measure the impact of AP-ASD1
objectively. All questions and instructions in survey are
Survey aims to measure AP-ASD1 subjective translated in Indonesian language due to language problem
effectiveness from the user perspective. It is conducted by (most student only understand their native language which
asking ASD 1 students to answer several questions based on is Indonesian language). Survey was given at the end of
their experience toward AP-ASD1. These questions are semester when all materials have been taught.
divided into two parts which are standard effectiveness
measurement questions and feature-impact measurement TABLE IV
questions. Each question in both parts are marked with FEATURE-IMPACT MEASUREMENT QUESTION
unique ID to be easily referred in other sections. Students Question Feature Question
can answer each question with a number ranged from 0 to 5 ID
inclusively where 0 means this objective is not achieved at Indonesian-
all and 5 means it is completely achieved. language How good do you understand the
Standard effectiveness measurement questions can be B1 instruction and semantic of all instructions and
seen in Table III. All questions given in Table III are description in descriptions given in AP-ASD1?
generated based on general measurement objectives which AP-ASD1
Course-
is used to measure AP-ASD1 in general. Beside general How similar data structure
synchronized
aspects, several major features are also evaluated to validate B2 terminologies used in AP-ASD1 with
data structure
its impact through feature-impact measurement questions. course material?
terminologies
Feature-impact measurement questions which are shown at How helpful is data structure
Data structure
Table IV are generated based on AP-ASD1 major features B3 visualization to understand certain
visualization
in one-to-one correlation. For clarity, major features are data structure?
features which described explicitly in analysis section Dynamic How helpful is dynamic algorithm
(Indonesian-language instruction and description in AP- B4 algorithm tracking to understand the algorithm
ASD1, course-synchronized data structure terminologies, tracking of data structure operation?
Detailed data
data structure visualization, dynamic algorithm tracking, How declarative is detailed data
B5 structure
detailed data structure materials, no dependence to internet materials
structure material in AP-ASD1?

28
e-ISSN : 2443-2229 Jurnal Teknik Informatika dan Sistem Informasi
Volume 2 Nomor 1 April 2016

Question Feature Question TABLE V

ID SURVEY STATISTICS
No dependence How adaptive is AP-ASD1 in
Question Survey Statistic
B6 to Internet different signal level of Internet
access connection? ID 0 1 2 3 4 5 Average Average (%)
Desktop A1 2 7 6 4,267 85,333
platform for How big the impact of desktop A2 1 2 10 2 3,867 77,333
B7 consistent UI platform for consistent UI and
and functionality in AP-ASD1? A3 3 9 3 4,000 80,000
functionality A4 8 6 4,429 88,571
Consistent UI How big the impact of consistent UI A5 3 6 6 4,200 84,000
B8
for ease of use for “ease of use” aspect?
A6 2 5 8 4,400 88,000
The statistic of our survey can be seen in Table V which A7 1 1 4 9 4,400 88,000
are considered as a good result since most objectives are B1 3 8 4 4,067 81,333
rated 4 or more (nearly completely achieved). Average B2 1 1 7 6 4,200 84,000
values are resulted from averaging all scores for selected B3 3 7 5 4,133 82,667
question whereas mean average is resulted from averaging B4 6 9 4,600 92,000
all average values. Although A4 is an exceptional case since
B5 1 11 3 4,133 82,667
a student did not answer it on his/her survey, its average
value still can be calculated based on remaining responders. B6 1 2 1 11 4,333 86,667
In Table V, lowest average value is red-marked and its B7 3 7 5 4,133 82,667
highest one is blue-marked. A2 has the lowest objective rate B8 4 6 5 4,067 81,333
since several students found the UI of AP-ASD1 is less Mean Average of Standard
intuitive. They expect more detailed explanation in tool tip 4.223 84.463
Effectiveness Survey
and algorithmic information. Furthermore, dynamic Mean Average of Feature Impact
4.208 84.167
algorithm tracking is the most helpful feature since B4 Survey
scores the highest among all survey questions. Based on our Mean Average in General 4,215 84,305
responders, we can conclude that most students who
experience difficulty when understanding how certain
operation works can be aided by algorithm tracking in AP- V. CONCLUSIONS
ASD1. In our survey, a student misinterprets B6 question Based on our research, several conclusions can be stated
which guide him/her to rate 0 on that question. This student which are:
considers B6 question as an unrelated one since this 1. AP-ASD1 is quite effective as a supportive tool for
application does not require internet connection. learning basic data structure (especially in ASD 1
AP-ASD1 meets eligibility standard of a published course) since learning impact aspect is rated quite
application since it scores 84.463% on standard high (4.4 of 5)
effectiveness survey (question A1-A7). Furthermore, all 2. All major features which are based on ASD 1 course
major features which are based on ASD 1 course needs and needs and implementation environments has been
implementation environments has been successfully successfully integrated since survey result of feature-
integrated since it scores 84.167% on feature-impact survey impact measurement achieves 84.167%. These
(question B1-B8). Since question A7 yield 4.4 of 5, it can feature-based aspects are Indonesian-language
be concluded that AP-ASD1 is quite effective as a instruction and description in AP-ASD1, course-
supportive tool for learning basic data structure, especially synchronized data structure terminologies, data
in ASD 1 course. structure visualization, dynamic algorithm tracking,
detailed data structure materials, no dependence to
internet access, desktop platform for consistent UI
and functionality, and consistent UI for ease of use.
3. AP-ASD1 meets eligibility standard of a published
application since it scores 84.463% on standard
effectiveness survey. Standard effectiveness survey
involves ease of use, intuitive UI, UI and
functionality consistency, user convenience,
declarative tutorial, course material synchronization,
and learning impact.

29
Jurnal Teknik Informatika dan Sistem Informasi e-ISSN : 2443-2229
Volume 2 Nomor 1 April 2015

4. AP-ASD1, an Indonesian-language desktop-based [4] C. A. Shaffer, M. L. Cooper, A. J. D. Alon, M. Akbar, M. Stewart,

educational tool for basic data structure course has S. Ponce and S. H. Edwards, "Algorithm Visualization: The State of
the Field," ACM Transactions on Computing Education (TOCE),
been successfully developed in C# platform. vol. 10, no. 3, 2010.
5. All features on AP-ASD1 are correctly functioned [5] E. Fouh, M. Akbar and C. A. Shaffer, "The role of visualization in
since it yields expected results. This statement is computer science education," Computers in the Schools:
concluded based on black-box testing result which Interdisciplinary Journal of Practice, Theory, and Applied
validates module change through module selection, Research, vol. 29, no. 1-2, pp. 95-117, 2012.
data structure state and visualization for each [6] "AlgoViz.org: The Algorithm Visualization Portal," [Online].
operation, flow of dynamic algorithm tracking, and Available: http://algoviz.org/. [Accessed 7 12 2015].
miscellaneous form components. [7] S. Halim, "VisuAlgo," [Online]. Available: http://visualgo.net/.
[Accessed 12 5 2015].

VI. FUTURE WORK [8] "OpenDSA," [Online]. Available: http://algoviz.org/OpenDSA/.

[Accessed 5 12 2015].
In next research, we will integrate dynamic algorithm [9] "Data Structures and Algorithm Visualization Wiki," Virginia Tech,
typing in AP-ASD1 which let user write his/her algorithm 2006. [Online]. Available: http://algoviz.cs.vt.edu. [Accessed 5 12
as an operation on certain data structure. User can modify 2015].
algorithm given in the course and see how his/her modified [10] "Drupal," 2010. [Online]. Available: http://drupal.org,.
algorithm works. This feature is expected to improve [11] C. A. Shaffer, M. Akbar, A. J. D. Alon, M. Stewart and S. H.
student understanding based on two facts which are: Edwards, "Getting Algorithm Visualizations into the Classroom," in
Proceedings of the 42nd ACM technical symposium on Computer
1. Several students are low-paced which require lecturer science education.
to show how the algorithm works in more detailed [12] E. T. Y. Ling, Teaching Algorithms with Web-based Technologies,
implementation. Singapore: B.Comp. Dissertation, Department of Computer Science,
2. Several students are curious with the implementation School of Computing, National University of Singapore, 2014.
of their logic and how unexpected result is produced [13] C. Shaffer, V. Karavirta, A. Korhonen and T. Naps, "OpenDSA:
based on their logic. Beginning a community hypertextbook project," in The Eleventh
Besides dynamic algorithm typing, log filter will be also Koli Calling International Conference on Computing Education
Research, Finland, 2011.
embedded since several students are quite overwhelmed
[14] C. Shaffer, T. Naps and E. Fouh, "Truly interactive textbooks for
with complete information at instruction log section. They computer science education," in The Sixth Program Visualization
used to try to understand how algorithm works by only Workshop, Germany, 2011.
focusing on several less understandable parts. [15] S. Hall, E. Fouh, D. Breakiron, M. Elshehaly and C. Shaffer,
"Education innovation for data structures and algorithms courses,"
in ASEE Annual Conference, Atlanta, 2013.
REFERENCES [16] E. Fouh, V. Karavirta, D. A. Breakiron, S. Hamouda, S. Hall, T. L.
[1] C. A. Shaffer and A. J. D. Alon, "SIGCSE 2010 AlgoViz Survey Naps and C. A. Shaffer, "Design and architecture of an interactive
Results," March 2010. [Online]. Available: eTextbook–The OpenDSA system," Science of Computer
http://algoviz.org/news/2010-03-25-sigcse-2010-algoviz-survey- Programming, vol. 88, pp. 22-40, 2014.
results. [17] V. Karavirta and C. A. Shaffer, "JSAV: the JavaScript algorithm
[2] S. Halim, Z. C. Koh, V. B. H. Loh and F. Halim, "Learning visualization library," in The 18th ACM conference on Innovation
Algorithms with Unified and Interactive Web-Based Visualization," and technology in computer science education, New York, 2013.
Olympiads in Informatics, vol. 6, pp. 53-68, 2012. [18] T. Rajala, M.-J. Laakso, E. Kaila and T. Salakoski, "Effectiveness of
[3] T. L. Naps, G. Rößling, V. Almstrum, W. Dann, R. Fleischer, C. Program Visualization: A case study with the ViLLE Tool," Journal
Hundhausen, A. Korhonen, L. Malmi, M. McNally, S. Rodger and J. of Information Technology Education: Innovation in Practice, vol.
A. Velázquez-Iturbide, "Exploring the role of visualization and 7, 2008.
engagement in computer science education," in ITiCSE-WGR '02 [19] T. L. Naps, "JHAVE: Supporting algorithm visualization," IEEE on
Working group reports from ITiCSE on Innovation and technology Computer Graphics and Applications, vol. 25, no. 5, pp. 49-55,
in computer science education, New York, 2002. 2005.

30