Menu
Hi all!
I am working off of a code that was handed to me from another person – it is a scale response display that allows me to collect data from users (I want to use it for psychology research). It bascially does exactly what I need it to, but it only seems to work in IE. Frankly, the code was a bit of a mess too. I cleaned it up a bit, but still can’t figure out how it might be made more cross-browser compatible. So, my two questions are: 1) can this code be improved so that it works in other browsers, and if so, how? 2) is there a better way for me to get this same effect? I searched the web for other examples like this but found none.
thanks!
[code=html]
<HTML>
<HEAD>
<STYLE>
TD.dollarvalue
{
FONT-SIZE: 12px;
WIDTH: 10px;
CURSOR: hand;
COLOR: blue;
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
TEXT-DECORATION: underline
}
TD.fulldollarvalue
{
FONT-SIZE: 12px;
WIDTH: 20px;
CURSOR: hand;
TEXT-ALIGN: center;
COLOR: blue;
FONT-FAMILY: Arial;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
TEXT-DECORATION: underline
}
TD.tenfulldollarvalue
{
FONT-SIZE: 12px;
WIDTH: 25px;
CURSOR: hand;
TEXT-ALIGN: center;
COLOR: blue;
FONT-FAMILY: Arial;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
TEXT-DECORATION: underline
}
</STYLE>
<script language=”JavaScript”>
<!–begin>
function ChangeCell(dollarvalue)
{
if (dollarvalue == 0)
{
cellspan = 2;
}
else
{
cellspan = (dollarvalue/0.25)+2;
}
window.additionalinstructions.style.visibility = “visible”;
window.buycell.colSpan = cellspan;
window.holdcell.bgColor = “black”;
window.buycell.bgColor = “navy”;
window.holdcell.colSpan = 43-cellspan;
}
// end –>
</script>
</HEAD>
<BODY link=’blue’ vlink=’blue’>
<FORM name=”form1″>
<TABLE border=0>
<tr>
<td>
<center>
<h3> On the scale below, please click a value to indicate the minimum sure thing that you would accept to forego the opportunity to earn the bonus.
<p>
<span id=additionalinstructions style=’visibility:hidden’>
<font size=3>
If the price is in the ‘Go for Bonus’ Zone, you will go for the bonus option at this and lower values.<br>
If the price is in the ‘Take the Sure Thing’Zone, you will accept this amount of money or higher rather than go for the bonus.
</span>
</td>
</tr>
</TABLE>
<TABLE align=’center’ border=0 cellspacing=0 cellpadding=0>
<td>
<TABLE width=620 border=0 cellspacing=0 cellpadding=0>
<tr><td width=75 align=right></font>
[– </td>
<td class=”fulldollarvalue” onclick=”ChangeCell(0); document.form1.price1.value=’$0′;”>$0</td>
<td class=dollarvalue onclick=”ChangeCell(0.25); document.form1.price1.value=’$0.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(0.50); document.form1.price1.value=’$0.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(0.75); document.form1.price1.value=’$0.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(1); document.form1.price1.value=’$1.00′;”>$1</td>
<td class=dollarvalue onclick=”ChangeCell(1.25); document.form1.price1.value=’$1.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(1.50); document.form1.price1.value=’$1.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(1.75); document.form1.price1.value=’$1.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(2); document.form1.price1.value=’$2.00′;”>$2</td>
<td class=dollarvalue onclick=”ChangeCell(2.25); document.form1.price1.value=’$2.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(2.50); document.form1.price1.value=’$2.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(2.75); document.form1.price1.value=’$2.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(3); document.form1.price1.value=’$3.00′;”>$3</td>
<td class=dollarvalue onclick=”ChangeCell(3.25); document.form1.price1.value=’$3.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(3.50); document.form1.price1.value=’$3.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(3.75); document.form1.price1.value=’$3.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(4); document.form1.price1.value=’$4.00′;”>$4</td>
<td class=dollarvalue onclick=”ChangeCell(4.25); document.form1.price1.value=’$4.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(4.50); document.form1.price1.value=’$4.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(4.75); document.form1.price1.value=’$4.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(5); document.form1.price1.value=’$5.00′;”>$5</td>
<td class=dollarvalue onclick=”ChangeCell(5.25); document.form1.price1.value=’$5.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(5.50); document.form1.price1.value=’$5.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(5.75); document.form1.price1.value=’$5.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(6); document.form1.price1.value=’$6.00′;”>$6</td>
<td class=dollarvalue onclick=”ChangeCell(6.25); document.form1.price1.value=’$6.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(6.50); document.form1.price1.value=’$6.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(6.75); document.form1.price1.value=’$6.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(7); document.form1.price1.value=’$7.00′;”>$7</td>
<td class=dollarvalue onclick=”ChangeCell(7.25); document.form1.price1.value=’$7.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(7.50); document.form1.price1.value=’$7.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(7.75); document.form1.price1.value=’$7.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(8); document.form1.price1.value=’$8.00′;”>$8</td>
<td class=dollarvalue onclick=”ChangeCell(8.25); document.form1.price1.value=’$8.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(8.50); document.form1.price1.value=’$8.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(8.75); document.form1.price1.value=’$8.75′;”>+</td>
<td class=fulldollarvalue onclick=”ChangeCell(9); document.form1.price1.value=’$9.00′;”>$9</td>
<td class=dollarvalue onclick=”ChangeCell(9.25); document.form1.price1.value=’$9.25′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(9.50); document.form1.price1.value=’$9.50′;”>+</td>
<td class=dollarvalue onclick=”ChangeCell(9.75); document.form1.price1.value=’$9.75′;”>+</td>
<td class=tenfulldollarvalue onclick=”ChangeCell(10); document.form1.price1.value=’$10.00′;”>$10</td>
<td width=75>–]
</td></tr><tr>
<td colspan=1 id=buycell name=buycell align=center>
<font color=white type=arial>Go For Bonus</td>
<td colspan=42 id=holdcell name=holdcell align=center>
<font color=white type=arial>Take the Sure Thing</td></tr>
</TABLE>
</td>
</tr>
<tr>
<td colspan=3 align=center><center>(Click to change your price)</center><center>
<P>
Your Price: <INPUT TYPE=”text” NAME=”price1″ id=”price1″ STYLE=”font-family: Verdana; font-weight: bold; font-size: 12px; color: #000000; background-color: #CCFFFF;” size=”5″ maxlength=”5″>
</td>
</tr>
</TABLE>
<br>
</FORM>
</center>
</BODY>
</HTML>