Introducing live graphics gems to educational material

Transcription

1 Introducing live graphics gems to educational material Johannes Görke, Frank Hanisch, Wolfgang Straíer WSI/GRIS University of Tübingen, Sand 14, Tübingen, Germany Thiruvarangan Ramaraj CS525 Graphics & Scientific Visualization Spring 2007 Presentation II Date: April 16 th :10 15:00

2 Introduction: This paper aims in addressing an obstacle in building the online community in computer graphics (CG) education that is achieving a critical mass of quality material. They propose a novel repository service introducing live graphics gems (Graphics Educational Material Source) to the material. The repository is given two services, server-side compiling and source-code versioning. They present a prototype implementation with free software. Repository material now evolves on the fly. The approach provides a granular source control to embrace also materials that authors would not publish as open source. We describe both the technical content management and educational setups for live graphics gems. Didactics: Live graphics gems merge (1) a visual or interactivity and (2) real source code with (3) theory. It is an extension of the classic textbook with program listings approach by replacing passive listings with interactive editors. The key idea behind a textbook with program listings is to enrich the high-quality explanation of an algorithm with an implementation. This is true especially for CG-related domains, where many users tackle with getting pseudo code description actually to work. Research papers leave out easy programming code, i.e. the practical details a user must face. Textbooks and online journals therefore provide additional Web pages with discussion boards and user annotations, and many other, unofficial boards for source code discussions exist. Yet, they represent out-of context materials, neither interlinked with the original work nor approved by its author. With live graphics gems, source implementations become part of the material. 1. Visuals and interactivities can be closely interlinked with their surroundings by scripting. In the figure below, they have replaced the traditional didactics, a theorem-proof-example sequence, with a visual proof by an interactive illustration. Further more they provide proper XML-based markup for the text and mathematical equations (MathML). Parts of the theorem and formula have small scripting instructions attached that target the visual. Users can select active parts to rearrange the visual and illustrate the described concepts graphically.

3 2. In this the material includes real source code. Materials are presented like before, as textbook with program listings, but users can manipulate the program listing, and so the interactivity, at place. Authors must markup source code, which is similar to using other content markup. Normally, only parts of the sources will be included into a teaching material; parts that are useful for some educational or technical reason. Further code can be shown on demand. The figure below shows live graphics gems feature real source code. The repository compiles and versions user modifications server-side, which allows users for discussing custom developments and sharing, evolved materials by means of the Web browser.

4 3. Live graphics gems can represent pure visuals. As above, the user works with the visuals source, performs some cognitive actions, and recreates the visual. It is not required to present the visual as software an alternative approach would compile the target server-side, convert it to the desired publishing format, and update the module. Let us consider, for example, an SVG-based visual. We could let the user modify the object of interest in the XML source, compile the full source server-side, and then feed it back to the browser s SVG plug-in. Alternatively the server could convert the compilation to an image format, and include it in the material instead of the SVG content. The latter approach has advantages in cases when it is required to hide sources, in exercises or tests.

5 Implementation Details: Content markup: In this project, they chose an XML schema that can be simply transformed to the DocBook definition, which permits us to use the manifold DocBook transformations to, e.g. Web pages, PDF, slides, and RTF (Word). They have included transformations to HTML, PDF, SVG, other formats can be derived adopting one of the available transformation style sheets. In the above figure they show how they define an XML markup for educational material with live graphics gems. They specify material with an interaction and its source code. The authors are supported with syntax highlighting, tag completion, and markup validation. The code element references the method to be given to the user with a Java signature; the method s source is then presented in a Web-based source editor.

6 Content management: On the Server-side, they required a content management system to provide with means for communitysupport and publishing workflows. They created their repository on top of Lenya which is an open-source content management system based on XML/XSL techniques and Java. It provided a working framework based on and focus repository support for live graphics gems. Lenya brings with user management with authorization and authentication, authoring support by several built-in text editors, workflows, document versioning, multiple languages, categorization, scheduling, layout templates, and search facilities. Server-side compiling: The compilation process is implemented server-side. Every time a user interacts with the source code element and executes it, he triggers an event in the server-side compiling workflow. The corresponding workflow action determines the sequence of updating source code, compiling the interaction target, managing compiling errors, and generating the new material page with the new material version, this can be best seen in the figure2. The action first creates a new version of the source file with regard to the user s identity. Source code versioning: Their solution commits each source code modification into Subversion. When entering a source code for the first time, the server copies the original source files into a newly created directory named by the user s login name. Modified source passages are included on the fly. The user has to adapt all Java source files to this new path, as the Java package name reflects the physical directory structure. After compiling the source files, the new version is checked back into Subversion. Each user gets an own Subversion branch, a copy of the initial material sources, which then enters version control. Subversion handles identical files in these branch versions efficiently. Note that we check also the user s network address before committing a new source; users that have logged in with the same username on different machines (typical to programming in small groups) must then first obtain a lock for executing the change.

7 Online source editor: Some would accept modifying source code online when opposed to a plain text form. They wanted users to modify even if they only have a browser with JavaScript at their disposal. The repository users are supported with syntax highlighting and automatic indenting while editing sources. Webbased editors like Helene ( may help here. Helene is a free online text editor written in JavaScript. It integrates JavaScript programs into a Web page to perform syntax highlighting and indenting for standard text fields in HTML forms. Helene supports PHP and JavaScript languages, but extending its style sheets and JavaScript methods for the Java language was straightforward. Showcase: Excellent educational online materials exist, for example MathWorld ( with comprehensive illustrations. Together with the interactivities and Exploratories, they are instrumental in our own classroom and in student s self-studies. For instance look at the figure below, they consider one of these modules, a Web page teaching the discrete Fourier transformation. At a first glance, the material looks like a textbook with program listings, with one exception: an execute button. In fact, the material is dynamic. Users may interact with the illustration, i.e. they may directly manipulate the samples and the sampling rate in spatial and frequency domain. The program listing, here the core DFT algorithm, can be modified. Pressing the execute button sends the user input to the repository, which in turn sticks the sources together, checks in a new version, compiles the interactivity, and updates the Web page. Compiler messages are printed below the program listing.

8

9 Server-side compiling turns the textbook with program listings into dynamic material. The above material teaches signal processing. Samples and sampling rate are directly manipulative in spatial and frequency domain. Users may modify the implementation of the discrete Fourier transformation at place. As the source is organized, compiled, and versioned server-side, material evolves on the fly. Conclusion: The main goal was to provide ways for activating the CG community to collect and share educational materials References: Heckbert PS, editor. Graphics gems IV, vol. 4. Boston, MA, USA: AP Professional; Live graphics gems as a way to raise repositories for computer graphics education, Johannes Görke, Frank Hanisch, Wolfgang Straíer WSI/GRIS University of Tübingen, Sand 14, Tübingen, Germany