<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function setSelected(obj,hiddenParamId) {
var mySpans = obj.parentNode.getElementsByTagName("td");
for (var t=0,spn; spn=mySpans[t]; t++) {
spn.style.border = "4px white solid";
spn.style.background = "#eee";
spn.style.color = "black"
}
obj.style.border = "4px green solid";
obj.style.background = "white";
obj.style.color = "green";
document.getElementById(hiddenParamId).value = obj.childNodes[0].id;
}</script>
<style>
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.8em;
}
table {
width:50%;
}
td {
width:150px;
vertical-align:top;
padding:12px;
border:4px white solid;
text-align: center;
-moz-border-radius:18px;
-webkit-border-radius:18px;
}
tr {
background-color:#eee;
}
</style>
<title>Daily Check-In</title>
</head>
<body>
<form>
<table align="center" id="myImgs">
<tr>
<td colspan="5"><h3>Today, my overall ENERGY is:</h3></td>
</tr>
<tr>
<input type="hidden" id="energy" name="energy">
<td id="01" onclick="setSelected(this,'energy')"><img src="images/batt-01.png"><br />
Very Low</td>
<td id="02" onclick="setSelected(this,'energy')"><img src="images/batt-02.png"><br />
Somewhat Low</td>
<td id="03" onclick="setSelected(this,'energy')"><img src="images/batt-03.png"><br />
Average</td>
<td id="04" onclick="setSelected(this,'energy')"><img src="images/batt-04.png"><br />
Somewhat High</td>
<td id="05" onclick="setSelected(this,'energy')"><img src="images/batt-05.png"><br />
Very High</td>
</tr>
<tr>
<td colspan="5"><h3>Today, my overall MOOD is:</h3></td>
</tr>
<tr>
<input type="hidden" id="mood" name="mood">
<td id="01" onclick="setSelected(this,'mood')"><img src="images/mood-01.png"><br />
Very Sad</td>
<td id="02" onclick="setSelected(this,'mood')"><img src="images/mood-02.png"><br />
Somewhat Sad</td>
<td id="03" onclick="setSelected(this,'mood')"><img src="images/mood-03.png"><br />
Average</td>
<td id="04" onclick="setSelected(this,'mood')"><img src="images/mood-04.png"><br />
Somewhat Happy</td>
<td id="05" onclick="setSelected(this,'mood','myImgs')"><img src="images/mood-05.png"><br />
Very Happy</td>
</tr>
<tr>
<td colspan="5"><input name="submit" type="button" value="SUBMIT" /></td>
</tr>
</table>
</form>
</body>
</html>
|