## Purpose

Permits code to be imported directly from a source file into the web page. This means that the code can be checked by running it through a compiler. The code is displayed in a special div (`class = "code"`) so that its appearance can be controlled within the style sheets.

## Syntax colouring

The code will be automatically coloured for syntax. Currently the following classes are implemented:

- codeComment
- codeKeyword
- codeConstant

The appearance of each of these classes is controlled by the stylesheets and can easily be varied by an instructor to match the programming editor being used by students to write their own code.

## Selections

It is often convenient to break up a piece of sample code into different sections to focus the discussion. For instance it is common to discuss first the implementation of a function then to focus on how its called. Rather than create separate TM code examples it is much more convenient to have a single source file and to show only those selections it is desirable to focus on.

WebWriter accomplishes this by pedagogical markup—that is by marking up the code using a simple markup language embedded in comments. The markup is automatically removed by both WebWriter and the Teaching Machine so that students never see it.

Selections are basically marked with letters and may be disjoint.

## Available Functions

insertCode(relativeURL, buttonSet, className, configurationFile, WWSelection, TMSelection)

### Arguments

relativeURL
  a string giving the name & location of the code file to be loaded, relative to the page invoking the fuction.
buttonSet
  a boolean. If true, a teaching machine link buttonSet is placed within the example. See next function for how to define a buttonSet
className
  a string giving the name of the class for the HTML <div> that will hold the code. The author may argue the appearance of the code using the cascading style sheet used for pages.
configurationFile
  a string giving the path of the configuration file (relative to the site root) which is passed to the TMApplet.readRemoteConfiguration routine. Authors may have as many configuration files as they want.
Optional Arguments
  WWSelection
    a string denoting which pieces of the code will be displayed in the TMContainer on the webPage, for example `"A"` would mean display all sections marked with an `"A".` See entry under padagogical markup for specific markup details. If set to `"all"` ( or left out) all code is displayed.
  TMSelection
    a string denoting which pieces of the code will be displayed in the Teaching Machine itself, when it is invoked; for example `"A"` would mean display all sections marked with an `"A".` See entry under padagogical markup for specific markup details. If set to `"all"` ( or left out) all code is displayed.
Return
  Nothing is returned

Action

The example code is downloaded from the source file, syntax coloured and pedagogically marked up, then written dynamically in HTML into the document at the point of invocation. If a buttonSet is called for it is added in.

setButtons(run, video, edit, videoR, guidedR)

### Arguments

run
  a bool. true if a button is desired for invoking the teaching machine.
video
  a bool. true if a button to invoke a video is wanted.
edit
  a bool. true if a button to invoke editing on the example is wanted.
videoR
  a string. The name of the video file. Only needed if video is true.
guidedR
  a string. Currently unused. May be omitted.
Optional Arguments
  No extra arguments are recognized.
Return
  Nothing is returned

Action

The `buttonSet` is updated as directed.

Comment

WebWriter only maintains a single button set so it must be set every time buttons are to be used by `insertCode`.

### InsertCode Snippet

This is a block snippet, set up for the generic case of an example with run, video and edit buttons (`true` entries in `setButtons`).

    <script language="JavaScript">
    setButtons(true, true, true,"tm_introduction.avi","");
    insertCode("first_program.cpp", true, "code", "default.cfg");
    </script>

## Examples

The standard code snippet was inserted below, then edited to change the program to `complex_print.cpp` and to display only the code in the selections marked `"A`". (Since no video was available the second argument in `setButtons` was turned to `false` and the avi string was nulled out.)

Here is the exact same piece of code, now displaying the selection marked `"M"`.

Here's the code snippet for an example that includes a video. The extension for the video is `htm` because the actual video is a shockwave animation (produced by macromedia's Captivate tool) encapsulated its own html page.

      <script language="JavaScript">
    setButtons(true, true, true,"quadratic.htm","");
    insertCode("quadratic.cpp", true, "code", "default.cfg", "A");
      </script>

And here is the actual example.