www.TheTeachingMachine.org

webWriter++

Introductory Video

This is a seven minute introductory video showing what webWriter++ can do. It is suggested that the five minute introductory video to the Teaching Machine be viewed first.

Displaying Code

When we went to create our first web pages using the Teaching Machine, we quickly discovered that tools were needed to help instructors. One of the most difficult problems was displaying code properly.

when instructors focus on content they want the technology to just stay out of the way
Code displays just fine in the Teaching Machine but the TM is an interactive tool for students. Sometimes an instructor just wants to display code passively and discuss it in the text. A survey of the web as it existed at the time (about the year 2000) quickly showed that there was no very satisfactory solution out there. Since we had already solved the problem once with the TM it seemed only natural to graft that solution onto our web pages.

While we were at it it seemed reasonable to make the invocation of the Teaching Machine as easy as possible. In fact, when instructors focus on content they want the technology to just stay out of the way. Thus webWriter++ was born.

A Tool for Teachers

webWriter++ allows instructors to prepare either C++ or Java examples in the normal way, in their favourite development environment. By inserting a very short snippet of JavaScript, instructors can have their examples automatically sucked into their web page and displayed. The following features are noteworthy:

Color Staining
Keywords, comments and constants are marked and rendered specially. The rendering is controlled by a cascading style sheet and may be controlled by instructors and made to match the rendering of whatever programming environment their students use.
Segmenting
It is often desirable to split even moderate sized examples up into pieces for separate discussion. By adding a simple markup to examples, instructors can display them in different segments. thus allowing them to be discussed separately. All segment, however, come from the same file, for easy maintenance. As the markup is buried in comments, it does not affect compilation. It is also automatically stripped out before rendering on the web page or in the TM and so is invisible to students.
Rollover Markup
Other kinds of markups have also been added. For example, in discussing scope an instructor can create code which marks the scope of each variable as the mouse hovers over it.
Automatic TM invocation
Buttons can be easily included to invoke the Teaching Machine on the example or a video of the instructor running the TM on the example just as it was done in class.
Non-Destructive Editing
Students often ask, "What if I changed ... in the code?" An edit button can be included which allows an instructor in class (or the student later on at home) to change the code and reload it into the TM. The changes are dynamic and do not affect the underlying original code.

A Platform for Experimentation

Over its few years of existence WebWriter++ has become something of a platform for experimentation. At various times we have tried incorporating videos, slides and extra notes; we have used pages for tutoring, for lecturing and as an electronic textbook. In each case, support has been added to WebWriter++. Not all the experiments were successful and a number of experimental tools have been dropped. On the other hand tools that worked well have been expanded and refined. Some of the more notable—

Print Media Support
Students like to have printed notes. By incorporating print media stylesheets and doing a modicum of hand work, we are able to produce effective, good looking bound notes. Combining the notes with a CD containing the dynamic, Teaching Machine driven, web version creates an effective learning resource for students.
TOC Generation
Dynamic Table of Content generation that walks the teaching site, generating the Table of Contents on the fly.
Site Dictionary
A dictionary of special terms may be incorporated into the site. Terms may be marked on any web page such that hovering over them pops up the definition from the dictionary.
Hidden Notes
These can be turned on or off from the navigation bar or activated individually using a button.. They are typically used by an instructor when reviewing a lecture before it is given then turned off during the lecture. They can also be reactivated by students for self study.
Switchable Style Modes
The requirements for lecturing and studying are different. A button on the navigation bar allows mode switching, changing style sheets as well as whether the default for notes is shoing or hidden.

The WebWriter++ Manual

A manual for WebWriter++ is available. It can also be downloaded as a zip file.