Parallel Supercomputer Simulations for Education

`Integration of Information Age Networking and Parallel Supercomputer Simulations into University General Science and K-12 Curricula'.

Common style

JavaScript

All JavaScript should be enclosed in `JavaScript comments':

<SCRIPT LANGUAGE="JavaScript">
<!--
 ... JavaScript goes in here ...
<//-->
</SCRIPT>

Suitable code to determine the browser (and in this case set the variable rollovers depending on whether the browser supports rollovers) is:

browserName     = navigator.appName;
browserVersion  = parseInt(navigator.appVersion);
rollovers = 0;

if (browserName == "Netscape" ) {
  if (browserVersion >= 3) rollovers = 1;
} else {
  if (browserVersion >= 4) {
    rollovers = 1;
  }
}

then all rollover code can be enclosed within appropriate if statements. For example:

if (rollovers == 1) {
  document.images[name].src = "image/" + name + "_Current.gif";
}

Matt also came up with a much simplified structure for the rollover pages where each menu item is a separate image of which there are three versions. An example page is:

<html>
<head>
<TITLE>Crackling Noise</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="Advanced/Crackling.css">

<SCRIPT LANGUAGE="JavaScript">
<!--
browserName     = navigator.appName;
browserVersion  = parseInt(navigator.appVersion);
rollovers = 1;

if (browserName == "Netscape" ) {
  if(browserVersion < 3) rollovers = 0;
}
else {
  if(browserVersion < 4) 
  {
    rollovers = 0;
  }
}

function setImage(name) {
  if(rollovers == 1)
    document.images[name].src = "image/" + name + ".gif";
}

function setSelected(name) {
  if(rollovers == 1)
    document.images[name].src = "image/" + name + "_Selected.gif";
}

function setCurrent(name) {
  if(rollovers == 1)
    document.images[name].src = "image/" + name + "_Current.gif";
}
//-->
</Script>

</head>
<body background="image/back.gif"
bgcolor=#ffffff link="#330000" vlink="#666666" marginwidth=10>

<table border=0 cellpadding=0 cellspacing=0 width=500>
<tr>
<td  valign=top>
<a href="../index.html" onMouseover="setSelected('noise')"
onMouseOut="setImage('noise')"><img src="image/noise.gif" name="noise"  alt="SimS
cience Home"
width="451" height="151" border="0" align="left"></a>
</td></tr>
</table>

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top align=left>
<img src="image/noise_sub.gif" border=0 width=117 height=283></td>
<td>

<br><br>
<table width=450 cellpadding=2>
<tr><td valign=top>
<p>Many different processes from devastating earthquakes to crumpling pieces of p
aper
to magnetizing magnets produce crackling noise. Press one of the following links 
to
learn more about them.</p><br><br><br>


<a href="Beginning/SnapCracklePop/WhatIsCrackling.html">
<img src="image/icon_beginning.jpg" border=0 width=80 height=37></a>

<a href="Intermediate/SnapCracklePop/WhatIsCrackling.html">
<img src="image/icon_intermediate.jpg" border=0 width=80 height=37></a>

<a href="Advanced/SnapCracklePop/WhatIsCrackling.html">
<img src="image/icon_advanced.jpg" border=0 width=80 height=37></a>
<p>
</td></tr>
</table>
</td></tr>
</table>

<p>

<table border=0 cellpadding=0 cellspacing=0 width=141>
        <tr>
        <td  valign=top>            
        <a href="../index.html"><img src="image/SS_logo.jpg" border=0 width=126 h
eight=56 align="right"></a>
        </td></tr>
</table>

</body>
</html>

For complete examples look at the code for the Crackling module written by Matt Kuntz. I based the examples above on his code.

Glossary links

Style agreed at 3Nov97 meeting.

Glossary link are indicated with a (*) after the word or phrase. The link should open a new window called `glossary' if there isn't one already. Sample code for This Page (*) is:

<a href="index.html" target="glossary" 
   onclick='window.open("","glossary", 
   "scrollbars,toolbar,width=550,height=200");'>This Page (*)</a>

This opens a small window with a toolbar and scrollbar but nothing else.

Figure labels and attribution

Style agreed at 3Nov97 meeting.

Individual figure titles areplaced right aligned below the figure, with a second line for the attribution (this could be a link to more detailed copyright information if necessary):

                               ----------------------------------
                               |                                |
                               |                                |
                               |                                |
                               |            Figure              |
                               |                                |
                               |                                |
                               |                                |
                               ----------------------------------
The text is small:                           Such-and-such figure
<font size="-1">.                              from This_and_that

For example, the membranes module includes pictures from Cray where they gave a short line of text to use for the attribution:

Within the table, the code used for the label is:

<tr><td align="right">
<img src="http://simscience.org/membranes/images-perm/cray/cray1.gif" alt="[Picture of Cray1 supercomputer]">
</td></tr>
<tr><td align="right">
<font size="-1">
A Cray-1 supercomputer<br>
&copy; 1998 Cray Research/Silicon Graphics. Used with permission.
</font>
</td></tr>

Directory structure

Below is an outline of the SimScience directory structure:

  index.html                      -- root page for project
  about.html			  -- about the project page
  tips.html			  -- tips page
  help.html			  -- help page
  eval.html  			  -- evaluation notes page
  icons/                          -- icons images (buttons etc.)
  membranes/                      -- membranes module under here
  membranes/index.html	          -- root page of membranes module
  fluid/                          -- fluid dynamics module under here
  fluid/index.html                -- root page of fluid dynamics module
  cracks/                         -- cracks module under here
  cracks/index.html               -- root page of cracks module
  crackling/                      -- crackling module under here
  crackling/index.html            -- root page of crackling module

[ Up | Contacts ]

This page is maintained by Simeon Warner
Last updated 26 August 1998