WebWriter++: A Small Authoring Aid for Programming[1]
Michael Bruce-Lockhart, CERL, Memorial University
Abstract
The Teaching Machine is a powerful instrument for animating code for students learning programming. Originally developed for the classroom, it is nonetheless ideally suited for deployment on the web as part of a tutorial site or a full-fledged on-line course. Utilizing the web for teaching programming, with or without the Teaching Machine, requires considerable expertise in HTML and JavaScript. WebWriter++ is designed to address that problem. Consisting of a set of JavaScripts, it allows instructors without a great deal of web experience to focus on the development of content rather than the technical underpinnings of the web pages. It provides some general support, such as semi-automatic menu generation, as well as programming specific support, such as the automatic colour-staining of standard, compilable programming files for presentation on web pages, or the automatic invocation of the teaching machine on instructor generated examples.
Introduction
The world-wide web is often touted as an ideal medium for learning. However, it is by no means clear how best to utilize its undoubted advantages while simultaneously minimizing it's shortcomings. A short list of the advantages include its graphical and interactive capabilities and the low cost of distribution; the downside is very limited screen real estate, the ease of losing coherence, and the high cost of production.
Like it or not, our audience, even in the field of higher education, is increasingly conditioned to visual, graphical information, usually developed by professionals with large budgets. How is the average university professor or college instructor—or even high school instructor—to compete? Most of us (as will become apparent) have limited graphical skills and even less training. Yet even if we were all wonderful graphical designers or, slightly less optimistically, had access to a team of such designers, what exactly would we present and how? Most of our presentation techniques are based on our understanding of the printed page. Yet, for the web to reach its true potential, we must utilize its strengths instead of its weaknesses. At the top of its lists of strengths is its interactivity.
Our team at CERL is particularly interested how to teach programming. To that end we developed (and are still developing) the Teaching Machine[1,2] to let us animate code for students learning programming. While it was originally developed for use in the classroom we decided at the outset that it should be written in Java (rather than C++) to permit its easy integration into the world wide web. On the web it can be used for tutorial sites to back up traditional classroom based learning (the mode we use in MUN Engineering) or as the basis of a distance education course (which is in the process of being done by CONA).
The Teaching Machine is an abstraction of a computer that will visually process source code from a number of computer languages (we are particularly focused on C++ and Java). The abstraction is unique in that it combines elements of the underlying computer that will be used to run the code (static memory and stacks), the compiler that processes the code (the symbol table is shown explicitly), as well as higher level abstractions (the heap, an expression engine as well as representation of abstract data structures such as lists and trees). The closest thing currently available are the debuggers provided with current compilers but our abstraction goes considerably farther. We have found in the classroom that in addition to giving students a very specific model to focus on and manipulate, the Teaching Machine has also forced us to unify our previously rather ad hoc graphical notation.
Once we were successful in using the Teaching Machine in the classroom we turned our attention to building a web-based tutorial site. One of our objectives was to be able to turn the TM over to other instructors. While it is relatively straightforward to use in the classroom, integrating it into a web site took a little more work, specifically some knowledge of JavaScript. While JavaScript is certainly well within the abilities of any instructor competent to teach C++ or Java, that is not to say that such instructors would necessarily be willing to take time out of very busy schedules in able to learn it just so they could incorporate the TM. On top of that, we quickly discovered that, while the web has great potential for the effective delivery of tutorials—and ultimately entire courses—the production of pedagogical material for it is not easy. Compared to a book, the web is a highly non-linear medium. Moreover, as rich as it is, it's users are forced to view it via a very small window. The more one tries to take advantage of its unique capabilities, the more difficult this authoring becomes.
If we wanted our site to eventually be the work of multiple authors, with instructors from different courses lending their particular expertise, we needed to separate process from content. We needed a scaffolding and we needed tools. In short, an authoring system, albeit a small one. Then content writers would be allowed to concentrate on content.
Objectives
WebWriter++ would provide the following capabilities:
- should work with any simple HTML editor (even Notepad!)
- launch the TeachingMachine on an example at the press of a button
- launch a Teaching Machine video at the press of a button
- display code straight from a compiler, colour stained as in a commercial editor
- allow instructors to easily alter the colour staining to match their own integrated coding environment
- incorporate a dictionary of terms that could be activated by rolling over a highlighted term on a web page (similar to many help systems)
- require no knowledge of JavaScript
- other tools to mitigate the problem of limited screen real estate
- work across browsers and across systems
Results
By and large most of the objectives have been met. Figure 1 shows an image of a web page containing a sample of C++ code. The sample is a standard .cpp file as built in Visual C.
The sample has been inserted by calling the following JavaScript function:
insertCode(codeFile, tmButton, x, y, width, float)
A brief, online manual is provided for instructors. Here, a partial quote is lifted from the online manual defining the arguments for some of the above instruction:
codeFile: a string giving the name & location of the code file to be loaded, relative to the page invoking the fuction.
tmButton: a boolean. If true, a teaching machine link button is placed within the example. Pushing the button will invoke the teaching machine and pass the example in to it.
x (optional): a number giving, in pixels, the x position of the tmLink button. Ignored if tmButton is false but must be include if tmButton is true or the optional width argument is included.
etc.
Of course, the JavaScript call must be embedded in the HTML JavaScript tags. As of this writing there are about twenty-five instructions available. In addition to Code insertion, WebWriter++ supports the following:
Rollover pop-ups. Permit explanatory notes to pop-up when an area is rolled over, thus providing expansion without overly cluttering the screen.
Popup definitions. These are popups where the definition is taken from a standard, site-wide dictionary.
Slide shows. Small areas of HTML that appear as differently coloured slides. Buttons are available to advance or backup the slides, thus allowing information to be expanded upon without losing context.
Pedagogical markup. Special instructions have been developed which can be embedded in source code comments, allowing popups and scope colouring to be used from within an example. The special comments are stripped out before display and so are invisible to students.
Menu support. There is support built-in for automatic menus.
Browser Support
The one significant shortcoming of WebWriter++ is that, so far, Explorer 5 is the only browser supported. This is not because the author holds a brief for Microsoft. Indeed, we are acutely uncomfortable about being in this position. When WebWriter++ was first conceived, it was decided that the Document Object Model, as defined by the World Wide Web Consortium, was ideal for achieving its objectives. At the time Microsoft was the only major browser to support the DOM (albeit in its own quirky fashion). However, Netscape was loud in their declarations that they would provide a full, 100% compliant implementation.
Then AOL bought Netscape. Browser development was spun off into the open source movement. Still, Mozilla looked promising. It still does (although whether as Netscape or not, is another matter) Unhappily, Mozilla has only recently incorporated Live Connect, Sun's technology for connecting JavaScript to actual Java. Live Connect is needed for colour-staining as that requires parsing the source file on the fly, an operation too complex to contemplate in JavaScript itself. Indeed, we pirated the parser out of the TeachingMachine.
Mozilla (www.mozilla.org) is now saying that a stable version 1.0 release is about six months away. Once that is out, we should be able to tune WebWriter++ (which was designed to be as browser independent as possible) for it in fairly short order, probably in time for the commercial releases we expect shortly after the 1.0 release. At that point viable browsers should be available for all platforms and WebWriter++ should run on them.
References
Lifting the hood of the computer: Program animation with the Teaching Machine, Michael P. Bruce-Lockhart and Theodore S. Norvell, Canadian Conference on Electrical and Computer Engineering, May 2000
The Visible Computer: Teaching Programming with the "Teaching Machine", Michael P. Bruce-Lockhart and Theodore S. Norvell, Newfoundland Electrical and Computer Engineering Conference, Nov. 2000
[1] The author would like to acknowledge the support of this project by the Office of Learning Technologies, Canada Employment Insurance Commission, under contract # 20353.