SRec and VAST: Visualizing Software with a Student-Centered Aim.

— This paper reviews software visualization focused on the educational environment. Software visualization is a very wide study field, so we have focused on two areas: recursion visualization and parsers’ visualization. The paper contains a retrospective about what has been made on it, what lacks we have found and the solution provided by the authors: SRec and VAST, two software tools trying to make a significant difference between them and the software made before.


I. INTRODUCTION
OFTWARE visualizations tools are used in different context in order to improve and make easier the students learning process. Many different kinds of tools can be used to improve student learning process and motivation. For example, social networks have a large impact in student motivation and communication [45]. However, the results obtained are not always positive, so there exist different variables, which can reduce the educational impact. Nowadays, introducing multimedia techniques can improve the learning process [48].
In this work we present two different software visualization tools to display different aspects as can be recursion and parser analyzed process. However, the development and evaluation methodology used in both cases is similar: student centered. This means that all functionalities have been included, improved or removed according the evaluations results.
The rest of the paper is structured as follow. In section II we describe the most important related work in software visualization for recursion and parser generation. In section 3 we describe SRec system. VAST is described in section 4. In section 5 the evaluation process for SRec and VAST is described. Finally in section 6 we set the conclusions and future works.

II. RELATED WORKS
This section contains an introduction to software visualization and a review about how recursion and parsers are visualized by several already-made software tools, finding out lacks and shortages, and proposing a new software tool for those cases, SRec and VAST.

A. Software visualization
Software visualization is a technical tool for representing in an electronic, animated and interactive way. Most part of these representations tries to make easier the software comprehension.
The educational environment focused on computer science is one of the contexts where more software representations are used, but currently is not massive. Teachers are reluctant to adopt software and new ways to teach; they feel losing the control of the class when they use new software. Lack of evidences about visualization effectiveness is an important factor to explain why software visualization is not used in most classes.
In order to fix it, software for visualizations is created, taking usability recommendations and exhaustive analyses about what both teachers and students need.

B. Recursion visualization
Recursion visualization comprises the process of representing graphically the recursion, providing animation and interaction features. Recursion is a process or software function that requires its own service once or several times to find a solution. Every time the function is called by itself, the size of the problem is smaller, letting it to reach the base case, when the problem can be solved in an easy and direct way.
Recursion is a hard concept to be learned, help students to learn it through recursion visualization has been the main goal of a lot of software. These software applications usually use animations for describing step by step how recursion achieves to solve a problem. Student interaction is very important to make easier learning tasks [22] like algorithm analysis or debugging.
Recursion can be taught using different conceptual models. A conceptual model provides a singular representation for a concept, system or event, and must be complete, coherent and precise. For recursion, there are some conceptual models widely accepted and used for teaching recursion [19] [42]. The most abstract one is the inductive model, defined as a mathematical formula where the base case is directly identified. Metaphors are very used because they make easy the identification of concepts with daily life (Russian dolls [14] or mirrors [41]).
Going deeper in computer science education, there are several conceptual models used at the classrooms. Trace is one of them; every recursive call and its results are textually represented in a properly indented way. For multiple recursions the tree model is recommended, since it shows in a very clear way the nodes dependence. The animation runs over the tree in deep mode. We can find two kinds of trees: recursion tree (every node contains input parameters) or activation tree (every node contains input parameters and output result).
The third model shows a control stack where student can see a node for every unfinished call and the chronological order of callings. Copy-model broadens the control stack model, adding the source code into the visualization and/or the local variables in different windows or panels, properly stacked.

C. Software for recursion visualization
Within the functional paradigm, we can find applications like Kiel [11], RainbowScheme [21] and WinHIPE [29]. Kiel shows the execution of first-order logic programs through a syntax-structure tree, providing several functionalities for controlling the execution.
RainbowScheme allows students to see semantic content representations of programs coded using Scheme language. Students can see recursion tree and the stack status. The code is colored in order to identify the parts of the code shown in those visual representations. The program can be executed step by step.
WinHIPE is an IDE where user can see an expression evaluation as a process of rewriting. Expressions are displayed in a visual format through lists and trees. WinHIPE provides a set of configuration options for making a more understandable format. The steps sequence can be played entirely or partially, in automatic or manual ways.
ETV shows a copy of the code by every recursive sentence is executed. In every copy the current line is marked, that helps to follow the execution sentence by sentence. Jeliot provides a recursion tree and a copy-model view, similar to ETV, for Java-coded programs. It allows students to see which recursive calls are unfinished.
EROSI uses the copy model to show recursion. User can see the passive flow and the active flow, how data are transmitted and the output of the calls. The programs list is prefixed.
Function Visualizer works with Java-coded programs, showing step by step how the program is executed and opening a new window for every function call, so it is very easy for students to know which calls have not finished yet.
Recursion Animator requires recursive Pascal code to work. It uses the copy model, opening a new window for every called function. User can navigate forwards and backwards for repeating some parts of the execution.
SimRecur window contains several views like recursion tree, copy-model representation, stack and information about input parameters. Most used conceptual models are copy-model and recursion tree as is shown in Table . Both of them are capable of showing how recursive programs are executed step by step and show the whole story of the execution. However, most programs chose only one or two models, so they offer a limited vision of recursion.
The previous programs work with animations, it is essential to make a representation for recursion. User can see step by step or in an automatic way how data are transmitted or calculated. However, just a few programs allow users to go backwards in order to repeat parts of the visualization.
Besides, interaction possibilities were not widely exploited by them. Sometimes ask for more information, move the animation to a determined point, or mark nodes may be interesting actions impossible to do with this programs. As we said, interaction makes easier learning tasks [22], so this is a gap that must be filled in order to improve how recursion can be shown and taught in educative environments.

D. Parsers visualization
Parser visualization is another example of software visualization. There exists some new methodologies as for example ART [33], TML [25] and HAS [39] used to teach language processors/compilers courses. Besides, these alternatives consider the use of visualizations/animations tools with the aim of improving students learning [20]. These visualizations tools can be classified in two different groups. On one hand we have those with a theatrical aim, so their functionalities and characteristics indicate that they can be only used in a studying environment. On the other hand, we have other tools with a practical aim, so the visualizations/animations generated are oriented to improve parser development. One of the most representative tools in the theatrical group could be JFLAP [32] because it allows visualize/animate FDAs used in lexical analysis within compilation process. Other tools in this group could be THOTH [17] or BURGRAM [16]. In the second group we have those tools, which main characteristics are that they allow visualizing parsers generation and generating analyzers for a specific language. However, within this group we have distinguished three subgroups of tools, so although they have a practical motivation, visualizations generated are oriented for different types of users. The first subgroup contains those tools which do not generate parsers but have a strict relationship with a specific language being able to display its behavior. Some examples could be: ICOMP [24], VisiClang [30], APA [33] and Tree Viewer [35]. In the second subgroup it could be those tools, which can generate parsers but their visualizations/animations are oriented for advance users. One example of these tools could be VCOCO [31]. Finally, in the third subgroup it could be those tools, which are able to generate both animations and parsers but any user can use their visualizations. Some examples of these tools could be LISA [27], VisualYacc [F128], ANTLRworks [12], Jaccie [23] and GYacc [25].
In Table is shown a summary of these tools analyzing their main characteristics.
Analyzing Table we can see that all those tools, which can generate a parser, depends on an own notation or sometimes use a specific generation tool. This way of work makes difficult to use any of these tools with an educational aim because the visualizations are dependent of a generation tool.
As there do not exist any system, which implement all fundamental characteristics (algorithm, syntax tree, etc) for parser visualization, if we want to display a new dimension, it would be necessary to change both generation and visualization tools. From the students point of view it means to learn how to use two different tools with different characteristics: syntax, parser's build process, understanding output messages (for example LR shift-reduce conflict). From the teacher point of view it means to get familiar with the new environment. As we can guess, this way of working may prevent teacher to use these tools in their lessons [28].
There exist other two aspects to take into account according to the described tools: educational evaluation and availability. Referring to the educational use of these tools, there do not exist empirical data, which analyze the impact on the students learning process. Another aspect is the availability, so it is often difficult to get one on these tools.

III. SREC. ¿VISUALIZING RECURSION?
SRec [36][37] [38] is a software application developed in order to provide animated and interactive visualizations about recursive Java-coded programs. SRec is aimed to help both students and teachers in algorithms courses. This software provides the visualizations generated in an automatic way, it means that users only provide the class and the method they want to run and the input parameters they want to use. SRec compiles the class, runs the program, saves the needed internal data and creates the visual representation of the views in a few seconds. After that, users can go step by step through the recursive execution (SRec does not advance sentence by sentence but opening or closing recursive calls at a time). Users can go forwards or backwards in an automatic or manual mode. Users can go step by step or skip all the steps until closing the current active node (the active node is the last opened recursive call so far).
SRec offers through its window, shown in Fig. 4, four different views at the same time. One of them (at the left) shows the source code of the Java class loaded by the users, where they can modify it, save it and recompile it again in order to add, delete, change or correct one or several sentences. The second view (located under the code view) is the compiler view, where users can see if the changes they wrote are right or generate some compilations errors.
When users create a visualization, two views are opened. These views show two different representations of the program at the same time and these representations can be changed through the tabs they contain. Every tab let see a different representation or conceptual model. SRec offers three conceptual models for recursive programs. Users can access to the recursion tree through the "Tree" tab, where input parameters are shown in nodes, and activation tree (see Fig. 5), where every node contains input parameters and result values. This tree view contains a thumbnail representation of the whole tree, very useful for handling very big trees. The stack view shows the unfinished calls and the dependence between them, it just contains a subset of the tree view nodes. The trace view contains a text line for every step the visualization has advanced so far. They are indented according to the depth level and the color is different for openings and closings operations. SRec provides two additional conceptual models for divideand-conquer algorithms. These algorithms usually act on a data structure, dividing it in order to make a directly solvable problem. SRec supports arrays and matrixes, so it can represent them in an "extended" tree, where a small representation of the data structure is added to every node. Besides, two additional tabs are activated for showing a chronological view and a structure view. The chronological view (see Fig. 6) shows all the statuses of the structure along the execution in a chronological order. At the left, input values are shown; at the right, returned values are displayed. User can see how the algorithm is working step by step on the different zones of the structure. The structure view (see Figure 7) always shows the current status of the structure, adding lines for arrays or boxes for matrixes below the structure for marking the affected areas by every unfinished call of the program. These views darken the areas affected by finished recursive calls and the areas not affected by any already open call. The format of visualization is configurable. Colors for input parameters and output values in nodes, how source code is colored, location and separation of nodes in views, edges shape… can be configured by the user. This feature is important in order to adequate the visualization to different environments (monitor, projector, big or small screens, strong or weak illumination…).
SRec allows save on disk the current visualization. SRec can open it in another work session in a very fast way, just choosing the saved file. The visualization will be restored at the same point, with the same data, and the same format. This is a very useful functionality for teachers; they can load in a few seconds a lot of previously saved examples created by themselves.

IV. GENERAL VISUALIZATION MODEL AND VAST
Once we have analyzed the general limitations of the parser's visualization generation tools, we plan to create a system with the following objectives:

1) Independence from the parser generation tool.
Building an independent visualization tool would make easier to use it in educational context.
2) Display all fundamental structures. It should be possible to display fundamental structures. New views should be added without effort.
3) Review of the educational impact. The generated animations should improve or make easier the students learning process. 4) Availability. This tool should be easy to download. 5) Syntax error recovery. Generated animations should display how the parser recovers from a syntax error.
Once analyzed the visualizations built by the generation tools of the compilation process, we present the design of a generic model to visualize/animate the compilation process. The main objective of this model is to set the base to develop a generic tool in order to solve the limitations found. The generic model can be divided in different independent submodels with certain functionalities.
In Fig. 8 we show a general scheme of this model. As we can see there exist four submodels: submodel of language processing, submodel of visualization, submodel of animation and submodel of interaction. The generalization process, usually needs a module to interpret the intermeddle actions. For example a generalization process for cartography visualization needs a module to interpret the information [46]. Submodel of language processing. The objective of this submodel is to achieve the independence between the generation tools and the visualization tools. In this situation it is necessary to analyze the actions performed by the parsers during the execution in order to generate an intermeddle representation. Due to this intermeddle representation; it is necessary to insert extra information in the user's specifications. As result, this model should perform two different tasks: 1) Annotation process: modifications to get information during the parser's execution. This is usually performed in educational visualizations. The software platform does not determine if the annotation process is necessary or not. For example, to use the augmented reality it is needed to include new information in the real time image [47].
As we have said in previous sections, as there exist different generation tools and different types of parsers, it is necessary to consider two different levels of independence. The first level has to be with working with different generation tools. The second level means that the model should be able to interpret the actions performed by the parsers.
Submodel of visualization. Using an annotated parser, its execution allows to obtain an intermeddle representation containing the visual representation. The task of this submodel is to interpret this representation and build its visual representation. In the compilation process we can highlight some internals structures as the syntax tree, parser stack, etc. Due to this, the syntax tree is the main visualization built by this submodel. Besides, other structures as the input stream, the stack, grammar and the actions performed are displayed. All these views should be synchronized. One important characteristic of this model is the expandability, so it should be easy to add the visualization of a new structure.
Submodel of animation. Its main task is to animate the static visualizations generated by the submodel of visualization. As one of the most important structures is the syntax tree, the main task of this submodel is to animate its building process keeping the synchronization between all views. The animation process should distinguish between LR and LL parser because the syntax tree and the stack have different behaviors. For a LR parser when it detects a terminal node it is added into the stack. If it detects a non terminal node, it performs a reduction deleting nodes from the stack. When working with a LL parser, if a terminal node is detected, it is removed from the stack. For a non terminal node, a derivation is performed, which means that the rule's consequent is inserted into the stack.
Submodel of interaction. This submodel is responsible of the interaction with the user. In order to this, we can distinguish two functionalities: make easier the animations creation and allow working with the generated visualizations.

VAST. Visualizer of the Syntax Tree
VAST is the result of implementing the generic model of visualization and each submodel. In Fig. 9 we can see VAST's main window. The syntax tree is the main visualization. On the right we have the input stream and the parser grammar. In the bottom we have the parser's stack; the log for action performed (only used during the animation process) and a global view to navigate throw the syntax tree.

V. USABILITY-EDUCATIONAL EVALUATIONS
SRec and VAST have been subjected to several evaluations about usability and educational effectiveness. Next we summarize the processes and the obtained results.

A. Usability evaluation process for SRec
SRec has been evaluated five times about usability. The main principles used to develop SRec were: easy installation, easy learning to use it, and efficiency approach when user is working. The basic schema of each evaluation session was: -Teacher demonstration: the teacher shows to students how to create visualization from a source code for a few minutes. -Familiarization tasks: students do some light tasks in order to get a first contact with SRec. -Didactical exercise: one exercise must be done for the course using SRec. These exercises asked for analyzes, debugging, design or creation of an algorithm. -Questionnaire: a questionnaire was provided to students in order they to fill it with their opinion about SRec.
The fourth session was made using two days (taking data from both of them) and the last session took three classes (we took data only from the last day). ¡Error! No se encuentra el origen de la referencia. contains the marks for several general questions about SRec (the minimum value was 1 and the maximum value was 5). According to the ¡Error! No se encuentra el origen de la referencia., marks were growing up while the same functionality was improved (working in a more stable way and with a better interface), so marks were growing up from session 1 to session 2.
After that, new functionalities and possibilities were added, making harder how to learn to use SRec, and the asked tasks were more difficult too, so marks were lightly going down.  Visualization generation process 4.20 Chronological view 3.86 Structure view 3.63 Menu structure 4.00 Window elements interaction (panels, scrolling…) 3.55 The questionnaires gave some additional data through open questions. The suggestions made by students were changing in the different evaluation sessions, due to SRec was adding some previous suggestions and adding new functionalities. Some of them partially changed the way how SRec must be used and it could provoke some new issues and the lowering of the marks.
In the fifth evaluation, 30% of students did not provide any functional suggestion for SRec and only a third part of students would delete some functionality of SRec. When the questionnaire asked for the hardest parts to be learnt, 18.4% answered saying that SRec was easy to use (positive answers), and 49% did not answered the question; just 32.7% talked about dark aspects of SRec. 20.4% of students spontaneously used SRec to study or to make activities for the course, as they say in the questionnaire.

B. VAST evaluation process
In case of VAST, once analysed different visualization tools we realized that none of them was evaluated in an educational way. As there do not exist empirical results, maybe those tools are used without adapting to students' needs. From the educational point of view, they could have a negative impact in students' learning process.
According to VAST, we divided the implementation process in different stages. Once finishing one stage we planned different evaluations of the generic model. Due to this, the evaluation process has been iterative, allowing adapting the functionalities to students needs. Two different types of evaluations have been executed: interactive-usability [ [3].
The interactive-usability evaluations had a double intention: evaluator observation and students opinion. The evaluator's observation evaluations allowed to study and annote how students used the tool and detect the main problems. The opinion evaluations were focus on asking students about the experience when using the tools. Educational evaluations have allowed observing the impact on student's learning process when using these tools. Due to this, we designed pre and post knowledge tests according to Bloom's taxonomy. The methodology used is similar in all evaluations.
Although we have distinguished three different types of evaluations, they have been performed at the same time. This means that one educational evaluation consists of observations, usability tests and knowledge tests. For the usability and educational impact evaluations, students have been divided in different groups (control and treatment) [13] randomly. Groups were balanced using a knowledge pretest.
The first evaluation of VAST was focus on observing how students worked with the tool and the problems they had. In the second evaluation we compared VAST and ANTLRworks, obtaining results in favour ANTLRworks according to usability. In this case we got significant statistical differences in educational impact (synthesis level in Bloom's taxonomy) in favour VAST. From these results we planned a global integration in VAST in order to improve its usability. Once finished the development we performed another usability evaluation. This process continued during all the development process.

VI. CONCLUSIONS AND FUTURE WORKS
This paper contains a review about software visualization aimed to students. They are not massively used in the classrooms and some causes were explained. Software visualization can be divided in several areas, and two of them were exposed in detail here: recursive programs and parsers.
For recursive programs, the most used conceptual models were commented and the most relevant software for recursion visualizations was briefly reviewed. The lack of strong interaction features was one of the main conclusions joined to the limited vision of recursion given by most of the existing software. There, SRec marks a difference with its interaction features and its wide range of visualizations for recursion. SRec is totally functional; it allows improve teachers' job, and students mostly like it. However, some ways to improve it have been discovered. The main future works are: -Educational effectiveness evaluations for testing whether SRec really helps students to learn how recursion works. -Interface simplification for making a more agile SRec. -Predictive mode for SRec, allowing students to fill empty nodes with their expected values to check if they understood the algorithm they are visualizing. -Enlarging the supported algorithm-design techniques in order to show specific views for them (dynamic programming, for example). -Study several data taken from the fifth evaluation session about students' usage in order to figure out how students work with SRec. This may make possible create students profiles and adapt SRec to them. About parsers' visualization, this paper reviews some new methodologies focused on processors and compilers teaching. There are several software tools, catalogued into two main categories: tools with a theatrical aim for educational context and other software oriented to parsers development.
This second group contains three categories. The first one is for software aimed only to visualize how a parser behaves, not to generate it. The second one contains software that can generate parsers and their visualizations are oriented to advanced users. The last category is for software able to generate both animations and parsers to a wide target of users.
The main drawback for these software tools is that they depend on a generation tool, so it is difficult to use them in an educational environment, so students have to use two different tools to understand the whole process and teachers may be reluctant to use these tools for their classes. Here is where VAST changes the paradigm.
The development process with VAST has not finished. We plan to finish the integration of syntax error recovery visualization. As described in bibliography, the syntax error recovery is usually known as a "black art" [1]. From the students' point of view, it is one of the most difficult parts to understand in parser construction. So, if a system can display this process, maybe students can learn it easily.