in integrating animations into introductory computer science courses with large .... However, due to the high degree of con- figurability, these effects are more ...
Experiences in Using Animations in Introductory Computer Science Lectures ¨ Guido Roßling and Bernd Freisleben Department of Electrical Engineering and Computer Science University of Siegen ¨ Holderlinstr. 3, D-57068 Siegen, Germany roessling, freisleb @informatik.uni-siegen.de
Abstract Algorithm animation has received much interest over the last few years. In this paper, we discuss the experiences gained in integrating animations into introductory computer science courses with large audiences of more than 200 students. After providing a short introduction to the animation tool we developed, we describe why and how we used animations in our lectures and present some example animations. 1 Introduction Over the last few years, many educators have shown interest in employing software tools to improve their courses - a trend that is also reflected by the number of papers published in SIGCSE proceedings and bulletins. The main focus of such tools is algorithm and data structure animation. These core fields of computer science consist of highly dynamic structures that are often hard to illustrate in a “static” way using slides or blackboards. Using dynamic visualizations for these processes is therefore promising for both pedagogical and motivational reasons. A wide variety of animations is freely available on the World Wide Web. Some of the animations are stand-alone programs, while most others use an underlying animation tool. Most animation tools currently generate their animations either by API calls [8] or using a special scripting language [4, 10]. Based on their programming background, instructors can thus choose the mostsuitable tool for their teaching demands. However, instructors with little or no knowledge in programming may find it difficult to employ any of the tools mentioned above, and prefer to
have some means of visual editing. Thus, depending on the animation content and programming expertise, different ways of generating animations are required [7]. The animation tool A NIMAL we developed offers several approaches for animation generation and thus gives teachers great flexibility in producing animations. In this paper, we discuss our experiences in using A NIMAL-generated animations in introductory computer science lectures with a large audience of more than 200 students. The paper is organized as follows. In section 2, we describe our approach of integrating animations into lectures, including an introduction to the tool used and sample animations. Section 3 describes our experiences gained and lessons learned. In section 4, we present conclusions and outline our plans for further work. 2 Our Approach of Animation Integration 2.1
General Approach
The experience reports of other teachers [2, 3, 9] encouraged us to use animations in our own course. However, we had to change several aspects due to the special circumstances of our course. The Introduction to Computer Science courses in Siegen take place in the first two semesters. Therefore, several of our students do not have any programming experience, and some even completely lack computer experience. The lecture has a large audience of up to 260 students of diverse majors. Apart from computer science students, the course is also mandatory for students of electrical engineering, mathematics or physics (if majoring in computer science) and social sciences. Thus, finding a way to illustrate the topics that would be accessible to all students was challenging. The size of the course also meant that we were limited to teacher-based animations on our laptop projected by a beamer; thus, students could not pick their own pace. The teacher presenting the animations had to step through them manually, explaining difficult aspects of the underly-
ing topic. Our course was based on using slides for illustrating the topics. Animations for several topics were initially shown one after the other after the whole session’s material was presented on slide. This had the benefit of giving the students a visual feedback of the lecture’s main contents before the end of each lecture. However, the advantage was quickly annulled once the number of animations per lecture grew. For example, after viewing three animations covering searching algorithms, students had problems in keeping the algorithms apart. We therefore decided to show animations of a given topic directly after finishing the relevant slides. This was most effective, especially when some of the slide contents was integrated in the animation. To improve the students’ understanding, we also provided additional comments for the individual steps of the animation. 2.2
Animation Design
We generally wanted to keep our animations visually elegant yet simple, to improve students’ focusing on the content instead of spectacular visual effects. The animations were also intended to be understandable as stand-alone units, given a certain basic understanding of the topics presented. Therefore, we consistently integrated code of algorithms presented in our animations and used code highlighting to indicate the current command. This also cut down on the time invested for presenting the source code itself on slides, as the students could literally see the effect of the commands. We also wanted the chance to substitute actual source code by pseudo code or a verbal description of the individual steps. Thus, even comparatively long algorithms could be presented in a single window without scrolling. Animations were usually introduced with some text notes before starting the actual algorithm. This served both to emphasize the context of the algorithm and its basic idea something that might otherwise easily be lost in the source code. This is mostly the case for algorithms with a comparatively simple basic approach but somewhat long code. For example, some steps in graph algorithms like shortest path (Dijkstra) and minimum spanning tree (Kruskal) can be easily stated; however, the source code may confuse some students. The current element of read or write operations was highlighted; furthermore, we used array and list pointers to mark the current position of iterations. For algorithms like Quicksort, students found it very helpful that elements and the respective commands were highlighted during comparison and swapping.
However, one has to be careful in choosing colors, as some of the colors that seem to be clearly readable on a monitor proved to be less so at the back of the classroom. Most current animation tools are implemented in Java for maximum platform independence. However, while Java allows using any installed font, this drastically cuts down on the platform independence. Only three font families are fully supported by Java - Serif, SansSerif, Monospaced. Substituting these with specific fonts like Helvetica can lead to display problems if the chosen font is not installed on the client computer. The same is true for scaling fonts, which may cause Java to substitute letters by scaled bitmaps. Therefore, we restricted fonts to the standard fonts and font sizes. Example screenshots of our animations are available on the World-Wide Web [5]. 2.3
The Animation Tool A NIMAL
Among the tools we evaluated for animation generation are the commonly used JSamba [10], JAWAA [4] and the more recent tools AlgAE [11] and Jeliot [1]. Unfortunately, none of these tools satisfied all our demands. JSamba and JAWAA currently do not allow for easy source code highlighting. AlgAE [11] and Jeliot [1] support syntax highlighting very well, but demand Java source code as input. As we wanted to be able to illustrate content in pseudo code or verbally, these tools could not be considered for use throughout the lecture. In order to overcome these weaknesses, we designed a new animation tool called A NIMAL, an acronym for “A New Interactive Modeler for Animations in Lectures”. A NIMAL is written completely in Java and uses Java’s Swing library. We tried to keep A NIMAL as easy to use as possible. Animations can be generated and edited visually on a drawing pane, requiring no programming experience. Animations may also be generated using a built-in scripting language or animation API. A NIMAL currently offers the graphic primitives point, polygon/polyline, text, list element and arc. The components can be configured to generate more specific elements, like transforming arcs into ellipses, circles or circle elements. Object placement uses drag and drop and shows the outline of the object by a rubber band drawing algorithm. Users generally needed at most a few minutes before they could start generation objects and animations. Animations consist of animation steps containing an arbitrary number of animation effects. To guarantee consistent behavior and support undo operations, each object can only be used in a single animation effect per step. A NI MAL provides show/hide, move, rotate, change color animation effects. All effects can be given an offset and duration, measured either in milliseconds or internal time units called “ticks”, and can operate on an arbitrary number of objects.
JPEG images of the current animation step can be saved at any time.
ments and the introduction of two labeled pointers.
At first glance, the feature list of A NIMAL may not seem very impressive. However, due to the high degree of configurability, these effects are more than sufficient to generate interesting animations easily. By avoiding swamping the user with options, the tool also remains usable by laypersons with little computer experience. A more detailed description of our animation tool can be found in [6]. Our animation web page [5] currently contains 47 animations complete with screen shots and descriptions. Due to the fact that the complete course in Siegen is held in German, the pages were originally provided in German. We are working on a translation of the animation descriptions to English. A NIMAL itself is completely held in English. A NIMAL can be freely obtained at http://www. informatik.uni-siegen.de/˜inf/Software/ Animal/index.html. 2.4
A Typical Animation: Quicksort
Quicksort is one of the most popular animation topics. While it plays a central role in algorithms, many beginning students encounter difficulties in trying to understand it properly. For our animation, we used the standard sorting example of many popular books: ’AS ORTING E XAMPLE’.
While searching for the first replacement candidate - in our example, the character “S” - the pointer smoothly moves to the right while source and element highlighting are updated. We use a different highlight color to indicate that this element is now “set”. After locating the first replacement candidate, the same procedure is applied to the second candidate. In the example, this is the last “A” of the input array. The next step tests whether the two pointers overlap and, if that is not the case, swaps the selected elements. The swap is performed by a smooth elliptic glide of the selected elements. The loop then continues with determining the next candidates until both pointers are equal. Next, we check whether the pivot and the current element must be swapped and perform the swap, again as a smooth elliptic gliding exchange. The “pivot” pointer accompanies the element during the swap. Figure 1 shows the state of the animation at the end of this step, with the swap instruction highlighted. The inserted pivot element is then set in red to mark it as “fixed”. During the following recursions, the currently inactive interval(s) are set in grey to indicate their irrelevance to the current process. 2.5
A Somewhat Atypical Animation: Verification
One topic that is often not connected with animations at all proved to benefit a great deal from using animations: verification using Hoare’s calculus. Manually edited animations could be used very well for showing what effect assignments have on the conditions and how this reflects on precondition determination.
The animation starts with showing the complete array as well as the Java source code.
After some introduction into the topic, we concentrated on the verification of assignments. In the animation, we highlighted the assigned variable in red and its assigned value in blue. We also marked the free occurrences of the variable in the postcondition in red and then showed how they are replaced by the assigned value, highlighted in blue, in the precondition. At the same time, we provided a textual explanation that used the same color highlighting scheme. The same approach was then used for compounds where we included pointers to show that the adjusted conditions progress from the bottom to the top line of code.
In the next step, the pivot element is chosen. In our case, this is the last element of the current sort interval. Both the element and the corresponding code line are highlighted. Additionally, a pointer labeled “pivot” is added to the array display.
For if statements, we first verified both the “then” and “else” part. We then highlighted the combined precondition using the relevant preconditions. We combined these preconditions with the if condition, and then motivated why they should be separated by a logical “or”.
In the following steps, the pointers i and j for the left and right replacement candidates are initialized. This again includes highlighting both code and corresponding array ele-
The same basic approach was used for loop constructs, where we developed the individual conditions to be proved after the loop end, at the end and the beginning of the loop
Figure 1: Quicksort animation example
body, and before loop entry. We also highlighted the determined invariant in the relevant code parts. Figure 2 shows part of the verification for a while loop.
One important but often overlooked point is the memory allocated for Java. Some users may be unfamiliar with the fact that Java has a lower and upper bound on RAM allocatable by the Java Virtual Machine. If these bounds are tight, the garbage collector runs often, slowing down the presentation. In some cases, execution may be interrupted by OutOfMemoryExceptions, independent of the amount of memory installed in the computer. Luckily, the bounds can be set with the -ms and -mx options of the Java interpreter; users should experiment with different settings to find the optimum for their purposes. Showing animations without embedded source code quickly led us to recognize that source code should be included whenever possible, and in whatever form. Students had problems in keeping track what had already been done and what remained to be done. This was particularly true when we dealt with recursive algorithms or data structures, where students quickly lost sight of which interval of arrays was still under work. This problem can be alleviated by including source code - whether Java or pseudo code is less significant.
Figure 2: Verification animation example Students in Siegen normally consider verification a “stuffy, dreary” topic not properly understood by up to 90%. However, the normally very unpopular verification part of the exam was tackled by most of the participating students with roughly 75% receiving more than 50% of the allotted points. 3 Experiences and Lessons Learned After we finished developing A NIMAL, we started generating the animations necessary for the course. One of A NI MAL ’s main strengths is its visual editing, enabling users to start developing their design from scratch without having to decide on the exact presentation beforehand. We asked some of our teaching assistants to contribute animations, most of which were of good quality and could be used directly in our lectures. In general, our students were very enthusiastic about our animations, with 85% grading the general idea of using animations with an ’A’. More than 90% judged our direct integration of animations into the lecture as “good” or “very good”. The animations also showed the expected effect of increased student motivation already described by other authors [2]. We also noticed that students used the time between animation steps to discuss the expected effect of the next step. By giving students access to the animation tool, we enabled them to generate their own animations and replay our animations. However, we also found several pitfalls in using animations. Most of these are not specific to A NIMAL, but rather concern all Java-based animation tools.
It also proved to be very helpful to “shade out” elements not visible or used in the current iteration. Colors can thus be easily used to guide the students’ focus; however, one should bear in mind that the number of usable colors can be limited by the projecting equipment. Furthermore, colors should have crisp contrast, thus allowing even color-blind people to distinguish them by the brightness differences. Due to the comparatively large number of red-green color deficiency of up to 7% in men, one should be careful not to use these colors to highlight differences. Similar to many other animation or presentation tools, A N IMAL offers linking individual steps after a given delay. While the temptation to create a running slideshow can become great, it is a good idea to reserve time for questions or comments. In our experience, the slideshow feature is often not the optimal choice for teaching, where one often expects or even hopes for questions. We configured our animations so that timing was used for a collection of steps only if they contained an indivisible action that had to be spread among several steps, or they were a simple repetition of aspects shown before. Thus, the last steps of searching or sorting animations often ran without interruption after the general principle was understood. It should also be stressed that it is very easy to miscalculate the time needed for a presentation, especially if questions are encouraged and the animations are commented live. A test run before an audience of colleagues or assistants should therefore be made. Slower computers may have problems performing all requested actions within the given time frame, especially when doing several complex animations at the same time. This may lead to delays or skipped animation steps. Therefore, using absolute timing in milliseconds may have adverse effects and has since been substituted by
internal time units in our animations. When asked about the way we should best integrate animations in our lectures, 58% of our students voted for presenting all animations immediately after presenting the corresponding topic aspects. The other students were evenly divided between using a mixture of slides and animation steps, presenting each algorithm step directly, and showing the animations before the slides, possibly substituting some slides entirely. Our experiences with using animations for topics like verification indicate that the audience may benefit from animations even in “atypical” animation areas. However, many tools do not easily allow for generating animations of such topics. 4 Conclusions and Further Work In this paper, we have presented our experiences in using animations in lectures. The animation tool A NIMAL has not only raised the students’ motivation and helped in understanding standard algorithms and data structures, but can also be used for atypical animation areas such as verification. This area of computer science is often regarded as difficult by students. By focusing on the verification process itself and its piecewise development, our animations resulted in increased student participation. The feedback by our students encouraged us to integrate animations in our course even more tightly. Our experiences and user feedback show that A NIMAL is easy to use and flexible enough for topics outside computer science. We plan to extend our animation program to directly support the other scripting languages used by JAWAA [4] and Tango/Samba [9]. Using the scripting language or animation API, animations can be generated on demand during the lectures to address specific questions of the audience. To simplify this process, we are working on developing an animation generation tool that allows users to easily embed animation generation API calls in their algorithms. References [1] Haajanen, J., Pesonius, M., Sutinen, E., Tarhio, J., Ter¨asvirta, T., and Vanninen, P. Animation of User Algorithms on the Web. IEEE Symposium on Visual Languages (1997), 360–367. [2] Rodger, S. An Interactive Lecture Approach to Teaching Computer Science. SIGCSE 1995 Proceedings (1995), 278–282. [3] Rodger, S. Integrating Animations into Courses. ACM SIGCSE/SIGCUE Conference on Integrating Technology in Computer Science Education, Barcelona, Spain (1996), 72–74.
[4] Rodger, S. JAWAA and Other Resources, 1997. Available at http://www.cs.duke.edu/˜rodger/ tools/tools.html. [5] R¨oßling, G. Collection of A NIMAL Animations, 1999. Available at http://www.informatik.unisiegen.de/cgi-bin/roesslin/ animations.pm. [6] R¨oßling, G., and Freisleben, B. A NIMAL: A New Interactive Modeler for Animations in Lectures. SIGCSE 2000 Proceedings (2000). to appear. [7] R¨oßling, G., and Freisleben, B. Approaches for Generating Animations for Lectures. Proceedings of the 11th Society for Information Technology and Teacher Education Conference (2000). To appear. [8] Silicon Graphics. JAL Algorithm Animation, 1998. Available at http://reality.sgi.com/ austern/java/demo/demo.html. [9] Stasko, J. Using Student-built Algorithm Animations as Learning Aids. SIGCSE Session Proceedings (February 1997). [10] Stasko, J. Samba Algorithm Animation System, 1998. Available at http://www.cc.gatech. edu/gvu/softviz/algoanim/samba.html. [11] Zeil, S. J. AlgAE: Algorithm Animation Engine v2.0, 1999. Available at http://www.cs.odu.edu/ ˜zeil/algae.html.
