Percentage Calculator [Archive] - Dynamic Drive Forums

View Full Version : 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:

<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.lussier/qualitatorPNG.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:

250 251

<!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.