Interactive Embedded Examples: A Demonstration Michael Bruce-Lockhart Memorial University, Faculty of Engineering, MUN St.John's, NL, Canada A1B 3X5 (709) 737-8937 Theodore S. Norvell Memorial University, Faculty of Engineering, MUN St.John's, NL, Canada A1B 3X5 (709) 737-8962 mpbl@engr.mun.ca ABSTRACT A demonstration of the integration of a program animation tool into a set of web based notes used by instructors for lecturing and students for studying. Standard, conventionally prepared C++ and Java examples are dynamically incorporated into the class notes and can be interactively run in the animation tool directly from within the notes. theo@engr.mun.ca The Teaching Machine (TM) includes fairly comprehensive (albeit incomplete) C++ and Java compilers. However the code is interpreted by a model machine. The word "machine" is used deliberately, for while the TM abstracts aspects of the computer (particularly the reading and writing of data to memory) it also abstracts aspects of memory management (stack, heap and static store are all shown separately) and the compiler (expression analysis, variable declaration and automatic type conversion). The machine is explicitly designed to help students visualize and build a mental model of computing similar to the one we believe experienced programmers hold. Specific demonstrations will include: For beginning students: an animation of an expression that will integrate name lookup, fetch, precedence and implicit type conversion. For beginning students: an animation of pass-by-value and pass-by-reference. For more advanced students: an animation that examines automatic invocation of copy constructors during pass-by-value and the effects of deep vs. shallow copies. For data structures students: an animation of a linked list algorithm. For either beginning students or students of algorithms: an animation of various kinds of sorts. Each demonstration will be integrated into a page of the kind of notes from which we lecture and which our students use to recreate at home what they have seen in class. At least one of the demonstrations will show the automatic inclusion (via an extra button on the example container) of a video of the interactive animation recreating the classroom experience for students unable to attend in person. Categories and Subject Descriptors K.3.2 [Computer and Information Science Education]: Computer-Science Education—object-oriented programming, data structures, algorithms. General Terms Algorithms, Languages. Keywords Education, program animation, the Teaching Machine, visualization, mental model, programming, algorithms, data structures. 1. Extended Abstract In this demonstration, we will show how we embed interactive examples in our on-line notes for our first three computer programming courses. Notes are prepared in a standard HTML editor augmented by a set of authoring scripts, collectively known as WebWriter++, designed to help rapid inclusion and animation of standard programming examples. Examples are prepared by instructors using a standard C++ or Java environment (both languages are supported). Simple annotations can be embedded in comments to control what portions of the source code appear in the notes. Different portions of the same example may be selected, allowing a complex example to be discussed in pieces. Examples are lexically analyzed and dynamically written directly into the notes, minus the annotations. Tokens, such as keywords and comments are marked with HTML tags, their appearance controlled by a standard CSS2 style sheet, allowing instructors to match the look of examples in the students own program editors. The HTML example container is provided with one or more buttons, the primary one of which launches the animation, done by a separate tool, a large Java Applet referred to as the Teaching Machine [1]. Copyright is held by the author/owner(s). ITiCSE'06, June 26–28, 2006, Bologna, Italy. ACM 1-59593-055-8/06/0006. 2.

/lp/association-for-computing-machinery/interactive-embedded-examples-a-demonstration-soJDfb609c