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 CSS classes are implemented:

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 and tagging

Each character of the code is associated with a set of 0 or more "tags" (tags are just identifiers). (See pedagogical markup to learn how this association is created.) The selection parameters of insertCode are used to control which characters are displayed in webwriter and in the TM. See selection strings for details.

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 set of buttons (a "buttonSet") is placed above the example. See function setButtons 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. Use "" or null to get the default configuration file.
Optional Arguments
WWSelection
a string denoting which pieces of the code will be displayed in the TMContainer on the webPage. See selection strings for details.
TMSelection
a string denoting which pieces of the code will be displayed in the Teaching Machine itself, when it is invoked. See selection strings for details.
Return
Nothing is returned
Action

The example code is downloaded from the web server, 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.

Selection Strings
A selection string is a boolean expression that specifies which code is to be displayed. The boolean expressions contain tag names, parentheses, the boolean constantes "true" and "false", and boolean operators: &, |, and ~. Thus "(A|B)&C&~S" is a legitimate selection string specifying the display of sections of code which are asociated with either tag A or tag B, and also tag C, but not tag S.

The following should be noted

See pedagogical markup to learn how to tag your code examples using #T and #I.


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.tmcfg", "", "");
</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.~S", that is show code marked with an A and no S. Note that S is reserved for scripting. (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.~S".

Note that in both cases the TM was instructed to display all code except scripting calls.

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.~S", "~S");
</script>

And here is the actual example.