Continuous
IOS Documentation
by Will Moss
updated 10/01/06
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:
|
width
| <applet
code="slider.class" ... width=?? ...> |
| |
Specifies the width of the
applet in pixels.
Values:
|
height
| <applet
code="slider.class" ... height=??> |
| |
Specifies the height of the
applet in pixels.
Values:
|
| 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:
|
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:
|
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:
|
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. |
|