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.
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.
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.
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.
The buttonSet
is updated as directed.
WebWriter only maintains a single button set so it must be set every time buttons
are to be used by insertCode
.
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>
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.