How do I add (sum) individual radio buttons?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • AshTech
    New Member
    • Dec 2011
    • 5
    #1

    How do I add (sum) individual radio buttons?

    I have programmed an online assessment which can calculate the total score and display it as a percentage. However, each of the questions pertain to different categories and I would like to be able to calculate and show the results for the different categories. Example: I need to sum radio buttons 1, 9, 17, 25 & 33 for the "career" category and display the result in the "career" category text field in the results box at the bottom of the page. I have 8 categories and don't want to put all the questions for each category together because the person taking the assessment will figure out how it's calculated and might manipulate it to get a higher score. I have googled so many alternatives and they only show adding(sum) radio buttons consecutively. Please can someone help me with the code for this as I have no clue and have spent 2 days trying to figure it out. My code so far is as follows:

    Code:
    <!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" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
function total(frm) {
  var tot=0;
  for(var i=0; i<frm.elements.length; i++) {
    if(frm.elements[i].type=="checkbox" || frm.elements[i].type=="radio") {
      if(frm.elements[i].checked) tot+=Number(frm.elements[i].value);
    }
  }
  document.getElementById("totalDiv").firstChild.data=tot*4/8+"%";
}
</script>

<form action="nextpage" method="post" id="theForm">

<div align="center">
<center>
<table bordercolor="#00659c" cellspacing="0" width="814" border="1" frame="box">
<tr>
<td align="center" bgcolor="#00659c" colspan="6"><b><font color="#ffffff" size="3">Quality of Life Assessment</font></b></td>
</tr>

<tr>
<td align="center" width="461"><font size="3">Section 1</font></td> 
<td align="center" width="66"><b><font size="2">Strongly Agree</font></b></td>
<td align="center" width="66"><b><font size="2">Agree</font></b></td>
<td align="center" width="64"><b><font size="2">Neutral</font></b></td> 
<td align="center" width="67"><b><font size="2">Disagree</font></b></td> 
<td align="center" width="64"><b><font size="2">Strongly Disagree</font></b></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">1. My career allows me to be true to myself</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="5" name="radio1" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="4" name="radio1" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="3" name="radio1" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="radio1" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="radio1" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">2. I spend enough quality time with my loved ones</font></div></td> 
<td align="center"><input tabindex="2" type="radio" value="5" name="radio2" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="4" name="radio2" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="3" name="radio2" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="2" name="radio2" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="1" name="radio2" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">3. I take action on financial opportunities which come my way</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="5" name="radio3" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="4" name="radio3" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="3" name="radio3" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="radio3" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="radio3" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">4. I feed my enquiring mind</font></div></td> 
<td align="center"><input tabindex="4" type="radio" value="5" name="radio4" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="4" name="radio4" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="3" name="radio4" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="2" name="radio4" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="1" name="radio4" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">5. I take time to recharge</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="5" name="radio5" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="4" name="radio5" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="3" name="radio5" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="2" name="radio5" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="1" name="radio5" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">6. I engage meaningfully with others</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio6" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio6" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio6" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio6" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio6" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">7. I take time for self reflection</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio7" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio7" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio7" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio7" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio7" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">8. I assess my health status annually</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio8" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio8" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio8" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio8" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio8" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">9. I constantly innovate how I work</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio9" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio9" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio9" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio9" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio9" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">10. My home is a true reflection of my values and needs</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio10" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio10" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio10" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio10" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio10" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="center" bgcolor="#00659c" width="461"><font size="3"></font></td> 
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="67">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td>
</tr>
<tr>
<td align="center" width="461"><font size="3">Section 2</font></td> 
<td align="center" width="66"><b><font size="2">Strongly Agree</font></b></td>
<td align="center" width="66"><b><font size="2">Agree</font></b></td>
<td align="center" width="64"><b><font size="2">Neutral</font></b></td> 
<td align="center" width="67"><b><font size="2">Disagree</font></b></td> 
<td align="center" width="64"><b><font size="2">Strongly Disagree</font></b></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">11. I have multiple passive income streams</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="5" name="radio11" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="4" name="radio11" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="3" name="radio11" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="radio11" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="radio11" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">12. I am committed to my goals</font></div></td> 
<td align="center"><input tabindex="2" type="radio" value="5" name="radio12" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="4" name="radio12" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="3" name="radio12" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="2" name="radio12" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="1" name="radio12" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">13. I live passionately</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="5" name="radio13" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="4" name="radio13" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="3" name="radio13" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="radio13" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="radio13" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">14. I am comfortable with my uniqueness</font></div></td> 
<td align="center"><input tabindex="4" type="radio" value="5" name="radio14" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="4" name="radio14" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="3" name="radio14" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="2" name="radio14" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="1" name="radio14" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">15. I find answers within myself</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="5" name="radio15" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="4" name="radio15" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="3" name="radio15" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="2" name="radio15" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="1" name="radio15" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">16. I feel inspired and energetic</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio16" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio16" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio16" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio16" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio16" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">17. I have a clear vision for my life</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio17" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio17" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio17" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio17" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio17" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">18. I am patient with those around me</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio18" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio18" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio18" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio18" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio18" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">19. I am responsible with my money</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio19" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio19" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio19" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio19" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio19" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">20. I change what no longer serves me</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio20" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio20" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio20" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio20" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio20" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="center" bgcolor="#00659c" width="461"><font size="3"></font></td> 
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="67">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td>
</tr>
<tr>
<td align="center" width="461"><font size="3">Section 3</font></td> 
<td align="center" width="66"><b><font size="2">Strongly Agree</font></b></td>
<td align="center" width="66"><b><font size="2">Agree</font></b></td>
<td align="center" width="64"><b><font size="2">Neutral</font></b></td> 
<td align="center" width="67"><b><font size="2">Disagree</font></b></td> 
<td align="center" width="64"><b><font size="2">Strongly Disagree</font></b></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">21. I am able to laugh often</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="5" name="radio21" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="4" name="radio21" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="3" name="radio21" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="radio21" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="radio21" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">22. I am mindful of my impact on those around me</font></div></td> 
<td align="center"><input tabindex="2" type="radio" value="5" name="radio22" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="4" name="radio22" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="3" name="radio22" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="2" name="radio22" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="1" name="radio22" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">23. I feel connected to Spirit</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="5" name="radio23" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="4" name="radio23" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="3" name="radio23" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="radio23" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="radio23" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">24. I exercise regularly</font></div></td> 
<td align="center"><input tabindex="4" type="radio" value="5" name="radio24" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="4" name="radio24" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="3" name="radio24" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="2" name="radio24" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="1" name="radio24" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">25. I get recognised for my contribution for my work</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="5" name="radio25" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="4" name="radio25" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="3" name="radio25" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="2" name="radio25" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="1" name="radio25" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">26. I give willingly of myself</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio26" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio26" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio26" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio26" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio26" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">27. I spend less than I earn</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio27" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio27" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio27" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio27" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio27" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">28. I constantly challenge my assumptions</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio28" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio28" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio28" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio28" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio28" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">29. I experience joy in my life</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio29" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio29" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio29" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio29" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio29" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">30. I am able to forgive and forget</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio30" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio30" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio30" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio30" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio30" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="center" bgcolor="#00659c" width="461"><font size="3"></font></td> 
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="67">&nbsp;</td> 
<td align="center" bgcolor="#00659c" width="64">&nbsp;</td>
</tr>
<tr>
<td align="center" width="461"><font size="3">Section 4</font></td> 
<td align="center" width="66"><b><font size="2">Strongly Agree</font></b></td>
<td align="center" width="66"><b><font size="2">Agree</font></b></td>
<td align="center" width="64"><b><font size="2">Neutral</font></b></td> 
<td align="center" width="67"><b><font size="2">Disagree</font></b></td> 
<td align="center" width="64"><b><font size="2">Strongly Disagree</font></b></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">31. My spirit, mind and body are aligned</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="5" name="radio31" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="4" name="radio31" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="3" name="radio31" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="radio31" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="radio31" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">32. I am comfortable with my self image</font></div></td> 
<td align="center"><input tabindex="2" type="radio" value="5" name="radio32" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="4" name="radio32" onclick="total(this.form);"></td>
<td align="center"><input tabindex="2" type="radio" value="3" name="radio32" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="2" name="radio32" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="2" type="radio" value="1" name="radio32" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">33. I consistently use my strengths in my work</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="5" name="radio33" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="4" name="radio33" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="3" name="radio33" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="radio33" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="radio33" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">34. I set and communicate clear boundaries</font></div></td> 
<td align="center"><input tabindex="4" type="radio" value="5" name="radio34" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="4" name="radio34" onclick="total(this.form);"></td>
<td align="center"><input tabindex="4" type="radio" value="3" name="radio34" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="2" name="radio34" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="4" type="radio" value="1" name="radio34" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">35. I deserve abundance &amp; prosperity</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="5" name="radio35" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="4" name="radio35" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="3" name="radio35" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="2" name="radio35" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="1" name="radio35" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">36. I consistently apply what I learn</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio36" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio36" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio36" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio36" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio36" onclick="total(this.form);"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">37. I take regular holiday breaks</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio37" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio37" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio37" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio37" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio37" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">38. I focus on what I have in common with others</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio38" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio38" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio38" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio38" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio38" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">9. I am involved in community service</font></div></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="5" name="radio39" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="4" name="radio39" onclick="total(this.form);"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="3" name="radio39" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="2" name="radio39" onclick="total(this.form);"></td> 
<td align="center" bgcolor="#DDE4FA"><input tabindex="7" type="radio" value="1" name="radio39" onclick="total(this.form);"></td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">40. I follow a healthy lifestyle</font></div></td> 
<td align="center"><input tabindex="6" type="radio" value="5" name="radio40" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="4" name="radio40" onclick="total(this.form);"></td>
<td align="center"><input tabindex="6" type="radio" value="3" name="radio40" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="2" name="radio40" onclick="total(this.form);"></td> 
<td align="center"><input tabindex="6" type="radio" value="1" name="radio40" onclick="total(this.form);"></td>
</tr>
<tr>
  <td align="center" bgcolor="#00659c" width="461"><font size="3"></font></td> 
  <td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
  <td align="center" bgcolor="#00659c" width="66">&nbsp;</td>
  <td align="center" bgcolor="#00659c" width="64">&nbsp;</td> 
  <td align="center" bgcolor="#00659c" width="67">&nbsp;</td> 
  <td align="center" bgcolor="#00659c" width="64">&nbsp;</td>
</tr>
</table>
<p><input id="results" type="button" value="Get my results!" onclick="location.href=location.href + '#results'"></p>

<p><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<table bordercolor="#00659c" cellspacing="0" width="512" border="1" frame="box">
  <tr>
<td align="center" bgcolor="#00659c" colspan="2"><b><font color="#ffffff" size="3"><a name="results" id="results"></a>Quality of Life Assessment Results</font></b></td>
</tr>

<tr>
<td align="center" width="433"><font size="3">Category</font></td> 
<td align="center" width="69"><b><font size="2">Result %</font></b></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">1. Career</font></div></td> 
<td align="center" bgcolor="#DDE4FA">&nbsp;</td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">2. Home &amp; Family</font></div></td> 
<td align="center">&nbsp;</td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">3. Money</font></div></td> 
<td align="center" bgcolor="#DDE4FA">&nbsp;</td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">4. Personal Development</font></div></td> 
<td align="center">&nbsp;</td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">5. Recreation</font></div></td> 
<td align="center" bgcolor="#DDE4FA">&nbsp;</td>
</tr>

<tr>
<td align="right"><div align="left"><font size="3">6. Relationships &amp; Communication</font></div></td> 
<td align="center">&nbsp;</td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">7. Spirit</font></div></td> 
<td align="center" bgcolor="#DDE4FA">&nbsp;</td>
</tr>
<tr>
<td align="right"><div align="left"><font size="3">8. Wellness</font></div></td> 
<td align="center">&nbsp;</td>
</tr>
<tr>
  <td align="right" bgcolor="#DDE4FA">Your score is</td>
  <td colspan="5" align="center" bgcolor="#DDE4FA"><div id="totalDiv">Dynamic total requires Javascript</div>
  <script type="text/javascript">total(document.getElementById("theForm"));</script></td>
</tr>
</table>
</center>
</div>
<div id="totalDiv"></div>
<script type="text/javascript">total(document.getElementById("theForm"));</script>
<div></div>
</form>
</body>
</html>
    Tags: None
    • AshTech
      New Member
      • Dec 2011
      • 5
      #2
      Since posting this question I have figured out that I have to change radio groups to be identified per category, then insert hidden fields to identify gategories, then add them to a var named as per the different castegories and then val. a total for all catgories to be added to results table. What I still need to know is how do I get the total results per category to display in the results table at the bottom of the page.

        Comment

        • Dormilich
          Recognized Expert Expert
          • Aug 2008
          • 8694
          #3
          I have 8 categories and don't want to put all the questions for each category together because the person taking the assessment will figure out how it's calculated and might manipulate it to get a higher score.
          even then, looking at the source code long enough would gain you that information to manipulate the results.
          if you want to make sure that no manipulation is possible, make the calculation server-side.

          note that tables should not be used for layout. they unnecessarily clutter your HTML. and are hard to maintain.

          besides that, what prevents you from giving a common class name for each category and fetch the checked radios from that.

          e.g. giving every <tr> the category’s class name you can do
          Code:
          // doesn’t work in old browsers …
// get all checked radios under the career category
var career = {
    items: document.querySelectorAll(".career input:checked"),
    count: 5, // number of questions under career
    sum: 0,
    score: function() {
        for (var l = career.items.length; l--;) {
            career.sum += Number(career.items[l].value);
        }
        return career.sum / career.count;
    }
};
alert(career.score());





          just playing around a bit:
          Code:
          function Category(name) 
{
    this.items = document.querySelectorAll("." + name + " input:checked");
    this.count = this.items.length;
}

Category.prototype.score = function() 
{
    var l, val;
    this.sum = 0;
    for (l = this.items.length; l--;) {
        val = this.items[l].value;
        if (isFinite(val)) {
            this.sum += parseFloat(val);
        }
    }
    return this.sum / this.count;
}
          Code:
          var career = new Category("career");
career.count = 5; // number of career questions
var score = career.score();
          Last edited by Dormilich; Dec 21 '11, 04:56 PM.

            Comment

            Previous template Next
            Working...