Percentage Calculator

**julmado** · 02-09-2006, 07:46 PM

I'm working on a page to calculate how many points one gets for completing certain tasks.

Simple text/radio/textbox format

ex:

Assure you can help Y ( ) N ( ) [ ] -worth 75%
One Face One Voice Y ( ) N ( ) [ ] -worth 25%

Total: [ ]

here is the code I have to date:

Code:

  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="98%" id="AutoNumber1" height="49">
    <tr>
      <td width="64%" align="left" height="37">
      <blockquote>
        <blockquote>
          <p><font face="Verdana">  <strong>Assure you can 
help</strong></font></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="37">
      <p align="center"><font face="Webdings" size="6" color="#00FF00">a</font>
      <font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" name="3" value="y"></font></b></font><font face="Wingdings" size="6" color="#CCCCCC"> </font><font face="Webdings" size="5" color="#FF0000">r</font><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" name="3" value="n"></font></b></font></td>
      <td width="34%" height="37">
      <p align="center"><input type="text" name="T1" size="2"></td>
    </tr>
    <tr>
      <td width="64%" align="left" height="1">
      <blockquote>
        <blockquote>
          <p><b><font face="Verdana">Fulfill the Customer's Needs</font></b></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="1">
      <p align="center"><font face="Webdings" size="6" color="#00FF00">a</font>
      <font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" name="4" value="y"></font></b></font><font face="Wingdings" size="6" color="#CCCCCC"> </font><font face="Webdings" size="5" color="#FF0000">r</font><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" name="4" value="n"></font></b></font></td>
      <td width="34%" height="1">
      <p align="center"><input type="text" name="T1" size="2"></td>
    </tr>
    <tr>
      <td width="64%" align="left" height="1">
      <blockquote>
        <blockquote>
          <p><b><font face="Verdana">Total:</font></b></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="1">
      <p align="center"></td>
      <td width="34%" height="1">
      <p align="center"><input type="text" name="T1" size="2"></td>
    </tr>
  </table>

And the url: http://www3.sympatico.ca/julien.lussier/qualitator.htm

Page doesn't look good in Opera (just discovered Opera doesn't like webdings).

Any little push (or shove) in the right direction would be much appreciated, many thanks..!

**Twey** · 02-09-2006, 08:08 PM

Page doesn't look good in Opera (just discovered Opera doesn't like webdings).

Ouch! Don't use non-standard fonts for things that don't make sense in others!
I don't quite get what you're attempting to do with this. First you said "points," but then you gave an example of "25%?" You want to give a percentage of a total amount of points? Or you want to start with a set number of points then deduct from those points using a percentage system?

**julmado** · 02-09-2006, 09:43 PM

Thank you for the reply, Twey.

I see now how imprecise my first sentence is.

The end result would be that, for each task accomplished (radio button on yes), a certain percentage is added in the the textbox (and so to the total).

It's killing me that Opera doesn't display Dings, I've used it for years and always touted its strict compliance to web standards.

Used PNG's instead of fonts and now it looks better in Opera that IE for some reason..

http://www3.sympatico.ca/julien.luss...litatorPNG.htm

**jscheuer1** · 02-10-2006, 05:25 AM

Your markup is overly complex, as a result, my script probably is too. Really though, this sort of thing should be done server side unless cheating isn't an issue and client side javascript enabled is highly likely. Your images would look better with transparent backgrounds, that way they will blend in on all browsers:

Attachment 250 Attachment 251

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color:#ffffff;
background-color:#454545;
}
input {
text-align:right;
}
</style>
<script type="text/javascript">
function totPcent(){
var pcent=0,
pvals=document.getElementsByTagName('input');
for (var i_tem = 0; i_tem < pvals.length; i_tem++){
if (pvals[i_tem].type=='radio'&&pvals[i_tem].name.indexOf('pval')>-1&&pvals[i_tem].checked){
document.getElementsByName(pvals[i_tem].name+'T')[0].value=pvals[i_tem].value+'%'
pcent+=Math.abs(pvals[i_tem].value)
}
else if (pvals[i_tem].name=='tot')
var total=pvals[i_tem]
}
total.value=pcent+'%'
}

</script>
</head>
<body>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="98%" id="AutoNumber1" height="49">
    <tr>
      <td width="64%" align="left" height="37">
      <blockquote>
        <blockquote>
          <p><font face="Verdana">  <strong>Assure you can 
help</strong></font></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="37">
      <p align="center"><img src="y.gif">
      <font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" onclick="totPcent();" name="pval1" value="75"></font></b></font> <img src="n.gif" style="position:relative;top:2px;padding-left:3ex;"><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" onclick="totPcent();" name="pval1" value="0"></font></b></font></td>
      <td width="34%" height="37">
      <p align="center"><input type="text" readonly name="pval1T" size="2"></td>
    </tr>
    <tr>
      <td width="64%" align="left" height="1">
      <blockquote>
        <blockquote>
          <p><b><font face="Verdana">Fulfill the Customer's Needs</font></b></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="1">
      <p align="center"><img src="y.gif">
      <font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" onclick="totPcent();" name="pval2" value="25"></font></b></font> <img src="n.gif" style="position:relative;top:2px;padding-left:3ex;"><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" onclick="totPcent();" name="pval2" value="0"></font></b></font></td>
      <td width="34%" height="1">
      <p align="center"><input type="text" readonly name="pval2T" size="2"></td>
    </tr>
    <tr>
      <td width="64%" align="left" height="1">
      <blockquote>
        <blockquote>
          <p><b><font face="Verdana">Total:</font></b></p>
        </blockquote>
      </blockquote>
      </td>
      <td width="36%" height="1">
      <p align="center"></td>
      <td width="34%" height="1">
      <p align="center"><script type="text/javascript">
document.write('<input type="text" readonly name="tot" size="'+(window.opera? 3 : 2)+'">')
</script></td>
    </tr>
  </table>
</body>
</html>

**julmado** · 02-10-2006, 05:54 PM

Absolutely perfect.

I can't thank you enough jscheuer1, this is precisely what I wanted to do.

Just change the "value" variables and voila.

Just for the sake of curiosity, how much time did it take to type up such a script?

I should really crack open a JS book some time.

Once again, many thanks and respect.

**jscheuer1** · 02-10-2006, 06:04 PM

The script was the easy part. I would like to repeat that this should be done server side (something I'm not much up on) unless, it is OK if folks cheat (they would only be cheating themselves, that sort of thing) and you can be reasonably sure folks will have javascript enabled - like telling them it is required for the link to this 'self evaluation' form.

Thread: Percentage Calculator

Thread Tools

Search Thread

Percentage Calculator

Bookmarks

Bookmarks

Posting Permissions