Continuous IOS Documentation

by Will Moss
updated 10/01/06


| ABOUT the Continuous IOS | JAVA TEST | See the DEMO | See EXAMPLES | DOCUMENTATION | DOWNLOAD | CODE |

Usage

This applet can be placed anywhere within the a standard HTML form using the following code:

<applet code="slider.class" codebase="." name="ios1" width=300 height=100>
<param name="??" value="??">
...

</applet>
<input type="hidden" name="ios1_dist">
<input type="hidden" name="ios1_overlap">

The codebase, name, width and height parameters within the <applet> tag must be configured, and are explained below in the required parameters section.
Multiple parameters may be placed within the <applet> tag to customize the applet to the specific application it is being used for. The syntax for each parameter and an explanation of the possible values and results is explained below in the optional parameters section.

The two hidden form tags are the form fields that the distance and overlap values will be stored in when the submit button is pressed. The names must be unique names for each instance of the applet in a given form--just like all other form elements within a form.

The following JavaSript function must also be included in the HTML document:

function getValue(f) {
f.ios1_dist.value = document.ios1.getDistance();
f.ios1_overlap.value = document.ios1.getOverlapArea();
..
return true;
}

If there is not already a JavaScript section in the HTML document, the code above should be placed within <script language="JavaScript"> and </script> tags. Although there are a number of possible locations in the HTML document to place this code, I recommend placing it after the <html> tag and before the <head> tag. The values for the name of the slider and the names of the hidden fields must be updated to match the values used when inserting the applet into the HTML document. For example, if the applet is named ios_missing (using the name tag within the <applet> tag) and the hidden fields are named missing_dist and missing_overlap, then in the above example, ios1 would be changed to ios_missing, ios1_dist would be changed to missing_dist and ios_overlap would become missing_overlap. If there are multiple applets in one form, the function must be extended to include all the applets. To do this, the two lines within the function (beginning with f.) must be copied below the current lines and the values updated for the second applet. For example, if another applet was added to the page called ios2, the function would contain four lines, the first two as seen above and the last two identical two the lines above with ios1 replaced by ios2.

The final modification to the form must be made in the form tag, shown below:

<form ... METHOD=POST onSubmit="getValue(this)">

If the onSubmit parameter does not already exist in the form tag, it should be added as it is shown above. If, however, the onSubmit parameter already exist, getValue(this) should be added before everything else in the current onSubmit and followed by a semicolon. For example, if the form already contained a function checkForm(this), then the onSubmit would look like: onSubmit="getValue(this); return checkForm(this)"

Required Applet Parameters

codebase
<applet ... codebase="??" ...>

  Specifies the location of the applet. If the applet (slider.class) is located in the same directory as the webpage then the value should be ".", if it is located elsewhere, it should contain the path to that location. For example, if the applet is located at http://www.haverford.edu/psych/ble/continuous_ios/slider.class then you would put http://www.haverford.edu/psych/ble/continuous_ios/ for the codebase.

Values:
  Can be any url linking to the applet


name
<applet ... name="??"...>

  Specifies the name of the applet. This will be used by the JavaScript function to get the data from the applet and store it in the hidden fields. Each instance of the applet within a form must have a unique name.

Values:
  Can be any string


width
<applet code="slider.class" ... width=?? ...>

  Specifies the width of the applet in pixels.

Values:
  Can be any integer value


height
<applet code="slider.class" ... height=??>

  Specifies the height of the applet in pixels.

Values:
  Can be any integer value

Optional Applet Parameters

radius
<param name="radius" value="??">

  Specifies the radius of the two circles in pixels. If not set the circle will default to a radius of one half the height (filling the whole height of the applet).

Values:
  Can be any integer value


x1
<param name="x1" value="??">

  Specifies the location of the center of the left circle in pixels relative to the left edge of the applet. If not used the circle will default to a location just to the left of the right circle.

Values:
  Can be any integer value between 0 and x2.


x2
<param name="x2" value="??">

  Specifies the location of the center of the right circle in pixels realtive to the left edge of the applet. If not used the circle will default to a location just to the left of the right edge of the applet.

Values:
  Can be any integer value between 0 and the width of the applet less the radius.


label1
<param name="label1" value="??">

  Specifies the label placed on the left circle. It will be placed as close to the top of the circle as possible while still fitting it inside the circle. If not used, the label will default to "Self".

Values:
  Can be any string


label2
<param name="label2" value="??">

  Specifies the label placed on the right circle. It will be placed as close to the bottom of the circle as possible while still fitting it inside the circle. If not used, the label will default to "Other".

Values:
  Can be any string


color1
<param name="color1" value="??">

  Specifies the color of the left circle. If not used, the color will default to green.

Values:
  The color parameter can take two forms:
1) #XXXXXX where XXXXXX represents a 6-digit Hex RGB string (like an HTML color tags)
2) A string containing the color of the object. Valid strings are: black, blue, cyan, darkgray, green, lightgray, magenta, orange, pink, red, white, or yellow


color2
<param name="color2" value="??">

  Specifies the color of the right circle. If not used, the color will default to light gray.

Values:
  The color parameter can take two forms:
1) #XXXXXX where XXXXXX represents a 6-digit Hex RGB string (like in color tags for HTML)
2) A string containing the color of the object. Valid strings are: black, blue, cyan, darkgray, green, lightgray, magenta, orange, pink, red, white, or yellow


bgcolor
<param name="bgcolor" value="??">

  Specifies the background color of the applet. If not used, the color will default to white.

Values:
  The color parameter can take two forms:
1) #XXXXXX where XXXXXX represents a 6-digit Hex RGB string (like in color tags for HTML)
2) A string containing the color of the object. Valid strings are: black, blue, cyan, darkgray, green, lightgray, magenta, orange, pink, red, white, or yellow


textcolor
<param name="textcolor" value="??">

  Specifies the color of the labels for the circles. If not used, the color will default to black.

Values:
  The color parameter can take two forms:
1) #XXXXXX where XXXXXX represents a 6-digit Hex RGB string (like in color tags for HTML)
2) A string containing the color of the object. Valid strings are: black, blue, cyan, darkgray, green, lightgray, magenta, orange, pink, red, white, or yellow


fontname
<param name="fontname" value="??">

  Specifies the name of the font that the labels will be displayed in. The default is SansSerif.

Values:
  The font name can be one of the following names: Dialog, DialogInput, Monospaced, Serif, or SansSerif.


fontsize
<param name="overlapformat" value="??">

  Specifies the size of the font that the labels will be displayed in. The default is 10.

Values:
  The size is measured in point (like Microsoft word or other word processors). It can be any integer, however, be careful not to make the font so large that the label cannot fit within the confines of the circle.


reverse
<param name="reverse" value="??">

  Specifies whether the left circle is allowed to move backwards from its starting position, or only towards the other circle. If not used, the circle will default to moving in both directions.

Values:
  True - The circle can move both toward and away from the other circle
False - The circle can only move towards the other circle


distanceformat
<param name="distanceformat" value="??">

  Specifies the format that the distance between the centers of the circles will be output in. The default is "##0.0"

Values:
  The format is a string consisting of up to four characters: "#", "0", ".", and "%". "#" represents zero or more numbers that are displayed only if their value is significant (i.e. "0000011" passed to "#" will give back "11" since the leading zeros are not significant. "0" represents a single digit that is displayed regardless (i.e. 5 passed to "0.0" will give back "5.0" since the output requires the final zero). "." specifies the location of the decimal place in the number. "%" turns the number into a percentage by multiplying it by 100 and add a % to the end (i.e. "0.55 " passed to "#0%" will give back "55%").


overlapformat
<param name="overlapformat" value="??">

  Specifies the format that the overlap between the centers of the circles will be output in. The default is "#00.0"

Values:
  The format is a string consisting of up to four characters: "#", "0", ".", and "%". "#" represents zero or more numbers that are displayed only if their value is significant (i.e. "0000011" passed to "#" will give back "11" since the leading zeros are not significant. "0" represents a single digit that is displayed regardless (i.e. 5 passed to "0.0" will give back "5.0" since the output requires the final zero). "." specifies the location of the decimal place in the number. "%" turns the number into a percentage by multiplying it by 100 and add a % to the end (i.e. "0.55 " passed to "#0%" will give back "55%").


wraplabels
<param name="wraplabels" value="??">

  Specifies whether the text given for the labels will wrap onto multiple lines if necessary. The default is false.

Values:
 

auto - The applet inserts new lines automatically between words, attempting to create the most efficient display for the label.
manual - The applet creates a new line every when it sees the "<br>" tag. For example, the text "Significant<br>Other" would be displayed on two lines.