VIP, a Visual Interpreter for Learning Introductory Programming with C++

VIP, a Visual Interpreter for Learning Introductory Programming with C++ Antti T. Virtanen Tampere University of Technology Institute of Software Systems Tampere, Finland antti.virtanen@tut.fi Essi Lahtinen Tampere University of Technology Institute of Software Systems Tampere, Finland essi.lahtinen@tut.fi Hannu-Matti Järvinen Tampere University of Technology Institute of Software Systems Tampere, Finland hannumatti.jarvinen@tut.fi ABSTRACT Although C++ is widely used in teaching programming there are no open source visualization tools aimed for introductory programming courses. Since learning programming requires understanding of many abstract concepts, a good visualization tool would be very helpful. In this paper we present a visual interpreter (VIP) designed for learning introductory programming using C++. VIP is implemented in Java making it extensible and practically platform independent. We took much concern for making the tool as easy to use as possible for students and teachers. In this paper, we present the design goals, the key features, the technical implementation, the user interface, and usage of the tool. The design of VIP is modular and the compiler, interpreter, and visualization engine are independent from each other. VIP uses intermediate language presentation based on abstract syntax trees. While this is not the most efficient solution, it makes the interpreter easy to understand and offers much freedom for further development and extensions. Currently VIP can handle basic constructs of C++ but lacks object oriented programming features. The user interface is designed for the needs of novice students. The execution and state of the visualized program is shown in multiple ways and each evaluation of statements is examined in detail. VIP includes a simple code editor allowing students to experiment and try their own solutions as they see fit. Our main contribution is to provide the tool itself and the full source code free for non-commercial use. This makes VIP the first free visual C++ interpreter intended for learning introductory programming. Keywords Visualization, learning, programming, C++, Java, interpreter 1. INTRODUCTION Software visualization in computer science education has been under extensive research during the past two decades. A number of different tools and approaches have been developed and studied. Especially visualization of data structures and various algorithms have been succesful. It has been concluded that in order to be effective, visualization needs to engage the student interactively [15, 16]. The student should be required to answer questions and work on the subject instead of simply clicking through premade visualizations. Other pedagogical requirements stated for visualizations in [16] include a platform available for a large audience and reliability. Also the system should be general-purpose instead of too topic-specific to make it possible to use it during the whole course. The paper also stresses the importance of hypertext explanation of the visual display. It has also been commonly accepted that different courses and students need different approaches. The students in the introductory programming courses usually do not have any previous mental model of the concepts they need to learn: pointers, variables, loops, etc. The visualization should help forming the mental model [12]. Also providing approaches on different abstraction levels can deepen the cognitive development of the student [10]. There are plenty of visualizations on higher abstraction levels vailable for teaching data structures and algorithms but they are not of much use in introductory programming courses. VIP has been developed as a part of the international Codewitz project [1] that aims to create visualizations for teaching computer programming and provide these for free. 2. RELATED WORK Jeliot system is a family of visualization tools developed during the past ten years. The latest version, Jeliot 3, interprets Java programs and includes support for inheritance and other object oriented programming concepts [13]. The pedagogical approach in Jeliot 3 is similar to the one used in BlueJ programming environment [9]; the objects and classes are discussed in the very beginning. This approach to teaching introductory programming has been proved successful for both Jeliot and BlueJ [6]. Both Jeliot and BlueJ are currently undergoing serious development which makes them particularly interesting. During the Codewitz project [1] C++ and Java simulations based on Macromedia Flash were developed at the Tampere Polytechnic. While these simulations are easy to use, they have two major drawbacks: Creating new visualisations is difficult and the interaction is limited. These are common problems of visualization tools as noted by Van Haaster [6]. Visual C++ interpreter called Teaching Machine has been developed at Newfoundland Memorial University [3]. The Teaching Machine is intended for novice students and offers many different views to execution of C++ program. Unfortunately after its initial launch at 1998, the Teaching Machine has not been developed

much further. The major shortcomings of Teaching Machine are an unfriendly user interface and closed source code. 3. MOTIVATION Introductory programming courses are typically, and also at Tampere University of Technology, challenged by a number of problems. The student groups are very large and heterogenous. It is difficult to design the teaching so that it would be interesting and beneficial for everyone. Thus, the dropout rate on the courses is high. Usually, there are not enough of resources to guide the students individually and the students who have the biggest difficulties suffer most from the lack of guidance. They need to do a lot of independent work to keep up with the course but there are not many high quality materials available to support independent studying. C++ is not the best possible language for teaching introductory programming courses. Its syntax is cryptic, it lacks safety mechanisms, and the learning curve is very steep. Though these problems have been recognized, the teachers cannot choose the programming language freely [5]. This creates even more demand for high quality material. Regardless of the programming language, learning programming requires effort. Programming requires precise understanding of many abstract concepts, something many students are not accustomed to. Thus, many students have learning problems due to the nature of the subject. The Jeliot system was not suitable for our needs as we teach programming with C++. Jeliot 2000 visualizes Java programs and as stated by Myller [11] there are no plans to implement other languages, though in the latest version, Jeliot 3, the interpreter has been completely rewritten and object oriented programming concepts added [13]. None of the C++ visualization tools we found were perfectly satisfactory from our point of view. We needed a free web-based tool to support especially introductory programming courses. Even if the tool is intended for learning introductory programming concepts, the source code should be available to suit different universities better. By making our own visualization tool, we were able to use the same notations the students are presented during the lectures, which would have been impossible with closed source code tools. 4. VIP VISUALIZATION SYSTEM VIP is based on the experiences obtained from the development of concurrent program visualization tool Convit [8]. Experiences of Convit helped in designing the user interface as well as in making some implementation decisions. Also other tools aimed for introductory programming courses were studied to find common problems and solutions. 4.1 Goals As VIP was intended to suit the needs of our introductory programming courses the following requirements were set: 1. Easy for instructor to create new visualizations. 2. Easy to use and learn. 3. Good UI design. 4. Comprehensive explanation of the excecution steps of the program for student. 5. Code should be editable to allow students experiment freely with different approaches. 6. Programming language syntax should be a subset of C++. 7. Receiving Codewitz funding required VIP to be accessible from a web browser and the examples to be stand-alone (no server or other technical dependencies). The points 1-5 are considered common properties of good visualization tools by Myller [12], and ACM reports [14] and [15]. Especially the amount of work the instructor needs for creating new visualizations has been found crucial for making the visualization tool profitable. The tool was designed to visualize any given source code automatically without a need to specify explicitly how the language constructs should be visualized. This would make creating visualizations very straightforward, though we would lose some flexibility as each construct would look the same in all examples. Efficiency of the interpreter was not considered important as the tool does not need to support large programs and visualizations do not need to excecute too fast to be followed. This simplified the implementation significantly. At the moment, we are committed to teaching the course in C++ so any supporting tool using other programming language would needlessly confuse the students. Since developing a comprehensive C++ interpreter would have been a huge task, it was agreed that the programming language should be a strict subset of C++. Actually, as the complexity of C++ was considered a problem for students, the full version of the language was not even wanted. 4.2 C, The VIP programming language The VIP programming language was named C to hint it is a simple C++ dialect. To be precise, C is a subset of C++ and all valid C programs are also valid C++ programs. Currently C supports following C++ constructs: normal arithmetic statements for, do, if, while statements postfix ++ and operators (prefix versions are not supported) primitive C types, structs, pointers, references C++ vector and string types, cin and cout partly function calls and recursion. The main differences of C compared to ANSI C++: No support for classes, templates, union or exceptions. No support for overloading. C has strong typing and run-time checks for array boundaries. Since C is a subset of C++, all programs that can be visualized using VIP can also be compiled using a standard C++ compiler.

Instructions Standard output Sourcecode (current point of execution is shown here) State of the program (variables and function calls) Control buttons Expression evaluation Figure 1: The VIP user interface Figure 2: The VIP main screen 4.3 User interface The main window of VIP consists of the following parts: instructions for the student, the program source code, the state of the program, evaluation of the expressions presented in the program, the standard output of the program, and the control buttons (see Figure 1). A screen shot of VIP is shown in Figure 2. The source component includes the program source and shows the current point of execution with red color. Each step of evaluating a statement is a separate point of execution, and the user is able to see the actual evaluation of expressions rather than just the result or the line where the execution is. The evaluation component also shows detailed evaluation of arithmetic and comparison operators to help understanding of the operator precendence. It presents the values of the operands of each operation and the resulting value that can, for instance, be given as an operand for another operator and will thus not be shown in any other part of the user interface. It was observed that this kind of step-by-step evaluation was necessary for novice students. Similar improvement was made to Jeliot during its development and found useful [12]. The state of the program, variables and activation stack, is shown on the right side of the screen. It is always consistent with the source code and evaluation windows. The variables visible for each subroutine activation are separated with a line. Pointers and references are displayed as arrows pointing to the appropriate variable. Normal variables have boxed values. The color of the box indicates if a memory location reserved for a variable is written or read in the current execution point. The control buttons allow the student to choose whether to execute the program step by step so that it is easy to follow, or run the execution steps in sequence, only controlling the speed of excecution. There s also an undo function to step backwards and return program to its previous states. Stepping backwards affects only the state of the program, and possible print statements are not cancelled. The code editor is a simple editor that can be opened in a separate window from the control buttons. The editor is meant for making small modifications to the ready-made visualizations rather than writing completely new programs. 4.4 Comments and instructions In addition to the normal C++-comments, VIP recognizes special instructions for the student and for other control features. Ordinary comments are shown to the students as regular C++ comments in the source window. Additional instructions for the student and the control codes are not shown to the student. Since they are also written within the example program inside C++-comments, the code can be compiled using a standard C++-compiler. The instructions for student are shown in the instructions window only when the execution reaches the statement the instruction is related to. Hence, these instructions do not make the source code unnecessarily long, but allow the teacher explain the program behaviour in the same way he would do if explaining it personally. The instructions can contain any HTML content which is properly rendered by the instruction window. When opened in the code editor, the source code will be displayed to the student without the instructions. One unique feature of VIP is that the instructions may also set restrictions for displaying them during the execution. For example, a certain instruction could be shown when the execution reaches the statement for the first time. Another text would be shown instead, when the execution returns to that statement later. The different possibilities are presented in the 5 first lines of Table 1. This gives the teacher a nice way of pointing out different things as they would do in a normal classroom setting. For example, when executing a function call statement, the first time the program reaches that line, the teacher would probably want to explain how the parameter passing works. When the function call finishes and the execution comes back to the same line, it is not useful to explain the same things again, rather than concentrate on explaining passing of the return value of the function. The special instructions for even and odd numbers can be very practical for this

kind of situations. Teacher Sourcecode Compiler intermediate language (AST) Interpreter Table 1: The possible restrictions of the instructions /*@ comment */ A normal instruction shown every time the associated statement is executed. /*@number comment */ The instruction is shown on the number:th time the statement is executed. /*@n comment */ This can be used together with the previous: The instruction is shown on all times not specified by exact numbers the statement is executed. /*@o comment */ The instruction is shown on the odd number times when the statement is executed. /*@e comment */ The instruction is shown on the even number times when the statement is executed. /*@i */ The instruction is shown before the program starts running. Before VIP starts the program, it goes through all these instructions showing the line they are assosiated with. This feature can be used for example to instruction libraries, namespaces etc. since these lines will never be executed. /*@l */ Editing lock on. The lines after this comment until the lock off -comment cannot be edited in the code editor. The locked parts of the source code do not lose their other special instructions during diting. The code is editable as default. /*@u */ Editing lock off. The lines after this comment can be edited in the code editor. Interestingly, after we designed the feature to show different messages in the different executions of the same statement, Microsoft announced that quite a similar feature was planned for the next release of their Visual Studio programming environment [4]. Microsoft has named their feature tracepoint. The control instructions can also affect the behaviour of the VIP code editor. There are control instructions that enable locking the source code from being edited in the VIP code editor (the two last lines in Table 1). This way editing the code can be controlled by dividing the code into arbitrary number of blocks. For each block the editing can be enabled or disabled by the teacher. If the student edits the code in the VIP code editor, the special instructions written earlier naturally need to be removed, because they may not apply to the modified code and may thus cause confusion. The special control comments in non-editable parts of source code are left intact if the code is changed in the code editor. All the editable parts lose their special instructions and control codes, even if no changes are made to them in the editor. 5. IMPLEMENTATION Since it was required that the tool is accessible from a standard web browser, it was natural to implement VIP as a Java applet. As Java is portable, secure, and offers powerful standard library, it was considered better than other possibilities. VIP is not limited to web and can also run as a stand-alone application. Student Modified sourcecode UI Figure 3: The VIP structure Symboltable Profiler Minimal visualization for VIP can be created in less than ten minutes by writing a standard C++ source file and linking a web page to it. The new visualization is then immediately accessible by the students through the web page using any standard web browser. This allows instructors to concentrate on the actual content instead of having to deal with meaningless technical details. The VIP architecture presented roughly in Figure 3 consists of the following independent elements: compiler, interpreter, user interface, profiler, and logger. Any one of these main elements can be replaced with a new implementation without requiring changes to the others. 5.1 Compiler To make the compiler extensible, compiler generator CUP [7] and JFlex [2] were used to implement it. The compiler creates the intermediate code presentation for the interpreter and links each element of the source code to the intermediate code. 5.2 Interpreter engine A tree structure (AST) was selected for the intermediate code. AST interpreter is easy to implement and understand though it may not be very efficient. The interpreter was written specifically for VIP, since no suitable free C++ interpreter written in Java was found. The interpreter can be quite easily extended to add new features to the language if necessary. 5.3 Profiler To gather information for later quantitive analysis, VIP includes a profiler component. The profiler is simply a thread running in background sending detailed information about the user actions. A CGI program on the web server writes the information to a text file. VIP can be run as a stand-alone application, but the profiler cannot be used without a web server. Firewalls do not present a problem, since logging information is sent with the HTTP protocol. Basically, a line is generated in the log file for each user action (button click). Each entry contains user s IP address, timestamp, the action and the used example. This log can be easily analyzed and read by the teachers, though no ready-made analysis tools are available at the moment. 6. INTENDED USAGE OF THE TOOL

The most obvious way of using VIP is to create visualizations where the student will be shown how a certain program is executed. This way we can present new concepts to the student, and make the student recall old ones. Visual presentation can also be good for correcting earlier misconceptions of the student. The instruction comments can be used for a very detailed explanation if needed. Instead of only observing the visualization, the student can control it by giving the input of the visualized program and using the control buttons to change the speed of the visualization. The student can also be given a task to find sufficient input for the program for a certain outcome. The VIP code editor can be used to make the student participate even more in the visualization. In addition to visualization examples, we can also create visualization excercises. The student can be asked to commit changes to the code, for instance modify the operation of the program or correct errors from the program. In such modification excercises, the benefit of using visualization is that the student can visualize the original program to understand better how it works or why the correction is needed. After the modification, the student can, of course, visualize the modified program to see if the modification was correct. When creating the exercises, it can be beneficial to leave only desired parts of the code for the student to be edited. This allows easy creation of programming exercises where the teacher provides certain parts of the program and the student can only edit appropriate parts of the code. As an obvious example, editing could be restricted to certain function or inside a loop. 7. LESSONS LEARNT VIP has been used on an introductory programming course at Tampere University of Technology during semester 2004. The tool was presented to the students on a lecture, and it was advertised during the course. Due to large amount of students taking part in the course, it was not possible to instruct the students personally in using VIP. The instructor of the course provided some of the examples presented in the lecture material, and some additional examples were handled in the lectures as VIP visualizations to integrate VIP to the course. Using the tool was not compulsory, however. We presented a questionnaire about VIP for the students almost in the end of the course, so we did not reach the students who had the biggest difficulties with the course and dropped out early. Since using the tool was not obligatory, the questionnaire did not reveal much about the usefulnes of the tool, though alltogether the assesment of the students was positive. From the log created by the profiler component we were able to gather statistical information about the use of the tool. As expected, VIP examples have been mostly used in the beginning of the course (November 2004) but the Table 2 shows that the students have been using it in the end of the course, likely for revision of the concepts. The log also shows that students (or at least someone) have been using the tool after the course. During the course the usage has been in clear correlation with the course schedule and students have mostly used visualizations on subjects which have been lectured during that time. The project started in summer 2004. Original version was used and further developed during the introductory programming course held 2004-2005. During the course, a number of improvements and patches were done. Certain features were considered especially useful while the course also revealed some features that should be added or corrected. Consequently, the new features were listed and most of them have been implemented during the summer 2005. Mostly the tool does what it was intended to do. From the teacher s point of view, adding new examples is easy and does not require much special knowledge. In the future, one possible direction for development might be adding a more thorough C++ support with object oriented programming features. This would likely mean using a third party interpreter, since writing one is a big task. We intend to look into this possibility next. Table 2: VIP examples executed per month Month Executions November 2004 1551 December 2004 393 January 2005 421 February 2005 403 March 2005 273 April 2005 198 May 2005 144 June 2005 52 July 2005 58 August 2005 145 September 2005 303 October 2005 540 November 2005 3653 8. CONCLUSIONS The tool is still under development and there are plans to make a number of improvements to it. These improvements may widen the scope of VIP beyond the introductory programming courses. Despite of the coming improvements, we have satisfied the original goals of the project: creating new visualizations is easy, the tool has the required features and students are able to modify the source code and experiment quite freely. VIP is currently used in an introductory programming course at Tampere University of Technology and it is integrated to the course as additional material for independent learning. The code editor makes VIP very flexible for the student so many other types of excercises can be developed into VIP. While not yet able to achieve the level of BlueJ and Jeliot, at the moment VIP is the most suitable C++ visualization system designed for introductory programming courses we are aware of. 9. ACKNOWLEDGMENTS We would like to thank Minerva (Codewitz) project and Finnish Virtuaaliyliopisto (virtual university) for funding. 10. REFERENCES [1] Codewitz, International Project for Better Programming Skills. http://www.codewitz.net, November 2004. [2] JFlex, the Fast Scanner Generator for Java. http://jflex.de/, November 2004. [3] M. P. Bruce-Lockhart and T. S. Norvell. Lifting the Hood of the Computer: Program Animation with the Teaching Machine. Proceedings of the Canadian Electrical and Computer Engineering Conference 2000, pages 831 835, May 2000. [4] C. corner. New IDE Features in Visual Studio 2005. C Corner (www.c-sharpcorner.com), May 2005.

[5] A. Dingle and C. Zander. Assessing the Ripple Effect of CS1 Language Choice. Journal of Computing Sciences in Colleges archive, 16(2):85 93, January 2000. [6] K. V. Haaster and D. Hagan. Teaching and learning with BlueJ: an Evaluation of a Pedagogical Tool. Issues in Informing Science and Information Technology, 13(4), December 2003. [7] S. E. Hudson, F. Flannery, C. S. Ananian, D. Wang, and A. W. Appel. CUP, LALR Parser Generator for Java. http://www.cs.princeton.edu/ appel/modern/java/cup/, November 2004. [8] H.-M. Järvinen, M. Tiusanen, and A. T. Virtanen. Convit, a Tool for Learning Concurrent Programming. AACE E-Learn 2003, November 2003. [9] M. Kolling, B. Quig, A. Patterson, and J. Rosenberg. The BlueJ System and its Pedagogy. Journal of Computer Science Education, 13(4), December 2003. [10] E. Lahtinen and T. Ahoniemi. Visualizations to Support Programming on Different Levels of Cognitive Development. Proceedings of the Fifth Finnish/Baltic Sea Conference on Computer Science Education, November 2005. [11] R. B.-B. Levy, M. Ben-Ari, and P. A. Uronen. The Jeliot 2000 Program Animation System. Computers & Education, (40):1 15, 2003. [12] A. Moreno and N. Myller. Producing an Educationally Effective and Usable Tool for Learning: The Case of Jeliot Family. ACM Trans. Program. Lang. Syst., 15(5):795 825, November 2003. [13] A. Moreno, N. Myller, E. Sutinen, and M. Ben-Ari. Visualizing Programs with Jeliot 3. Proceedings of the International Working Conference on Advanced Visual Interfaces AVI 2004, May 2004. [14] T. Naps, G. Rössling, J. Anderson, S. Cooper, W. Dann, R. Fleischer, B. Koldehofe, A. Korhonen, M. Kuittinen, L. Malmi, C. Leska, M. McNally, J. Rantakokko, and R. Ross. Evaluating the Educational Impact of Algorithm Visualization. Report of the ITiCSE 2003 Working Group on evaluating the educational impact of algorithm visualization. ACM SIGCSE Bulletin, July 2003. [15] T. L. Naps, S. Rodger, J. A. Velazguez-Iturbide, G. Roessling, V. Almstrum, W. Dann, R. Fleischer, C. Hundhausen, A. Korhonen, L. Malmi, and M. McNally. Exploring the Role of Visualization and Engagement in Computer Science Education. ACM SIGCSE Bulletin, 35(2):131 152, 2003. [16] G. Rössling and T. L. Naps. A Testbed for Pedagogical Requirements in Algorithm Visualizations. SIGCSE Bulletin, vol. 34, no. 3 (2002), 2002.