Results 1 to 6 of 6

Thread: Percentage Calculator

  1. #1
    Join Date
    Sep 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Percentage Calculator

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

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Sep 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by julmado; 02-09-2006 at 09:00 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 02-10-2006 at 06:16 AM. Reason: upgrade images
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •