Results 1 to 6 of 6

Thread: Working out values of materials

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default Working out values of materials

    Hi,

    I'm working on a project for a class of 11 year old children where they make metal insects, anyway I wanted to create a page where children could work out how much their models would cost.

    I've done this before using Excel but wondered if there was a way of creating a webpage which allows someone to input data and then works out a specific value in this instance ús.

    The Excel document looks like this:

    Click image for larger version. 

Name:	excel.png 
Views:	157 
Size:	11.1 KB 
ID:	4884

    In Excel, Cell E2 has a value of =C2*D2*0.5 where 0.5 is the cost of the material, (this can be changed but C2 is the length of material and D2 is the amount they need) and so on...

    Cell E6 has a value of =SUM(E2:E5) which adds up all the other values to give the children their final cost.

    The problem is that our internal intranet pages doesn't like forms, I've tried to use them before but it doesn't like them.

    There is a way of getting round this which involves me setting up a page on the school website and linking the Intranet site to that.

    Is there a code similar in existence that will allow a child to work out the value of their model?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #mask { /* CSS for the background mask */
     position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    #form {
      position:fixed;
      visibility:hidden;
      z-Index:111;
      width:500px;
      height:190px;
      background-Color:#FFFFCC;
    }
    
    
    .table {
     border:solid black 1px;
    }
    
    .table INPUT {
      width:80px;
      border-Width:0px;
    }
    
    .table TD {
      width:80px;
      text-Align:center;
      border:solid black 1px;
    }
    
    .table TH {
      text-Align:center;
      border:solid black 1px;
      background-Color:#CCFFFF
    }
    
    .table .txt {
      width:150px;
    }
    
    .table .nu {
      width:20px;
      background-Color:#CCFFFF
    }
    
    .table .nu2 {
      width:80px;
    }
    
    .table .title {
      font-Weight:bold;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <input type="button" name="" value="Calculate" onmouseup="ShowForm('mask','form',true);" />
    <div id="form" >
    <form name="myform" >
     <table class="table">
      <tr>
       <th>&nbsp;</th>
       <th>A</th>
       <th>B</th>
       <th>C</th>
       <th>D</th>
       <th>E</th>
      </tr>
      <tr class="title" >
        <td class="nu" >1</td>
        <td class="nu2" >Item Nu.</td>
        <td class="txt" >Material</td>
        <td >Length</td>
        <td >Nu Rqud</td>
        <td >Cost</td>
      </tr>
      <tr>
        <td class="nu" >2</td>
        <td class="nu2" >1</td>
        <td class="txt" >13mm square</td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >3</td>
        <td class="nu2" >2</td>
        <td class="txt" >welding rod</td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >4</td>
        <td class="nu2" >3</td>
        <td class="txt" >brazing</td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >5</td>
        <td class="nu2" >4</td>
        <td class="txt" >paint</td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >6</td>
        <td class="nu2" colspan="4" >Cost</td>
         <td ><input name="cost" readonly /></td>
      </tr>
     </table>
    </form>
    </div>
    <div id="mask" title="Click to Close" onmouseup="ShowForm('mask','form',false);" ></div>
    E2 = C2*D2*0.5<br />
    Cell E6 has a value of =SUM(E2:E5)
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ShowForm(mid,fid,ud){
     var msk=document.getElementById(mid),frm=document.getElementById(fid);;
     frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
     frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
     frm.style.visibility=msk.style.visibility=ud?'visible':'hidden';
    }
    
    function calculate(ip){
     var frm=ip.form,ips=frm[ip.name],nu=0,z0=0;
     ip.value=ip.value.replace(/\D/g,'');
     ips[2].value='';
     if (ips[0].value&&ips[1].value){
      nu=ips[0].value*ips[1].value*0.5; // E2 = C2*D2*0.5
      ips[2].value=nu;
      InitForm.ary[ip.name.replace(/\D/g,'')*1]=nu;
     }
     for (nu=0;z0<InitForm.ary.length;z0++){
      if (typeof(InitForm.ary[z0])=='number'){
       nu+=InitForm.ary[z0];
      }
     }
     frm.cost.value=nu;
    }
    
    function InitForm(nme){
     var frm=document[nme],ips=frm.elements;
     InitForm.ary=[];
     for (var z0=0;z0<ips.length;z0++){
      ips[z0].onkeyup=function(){ calculate(this); }
     }
    }
    
    InitForm('myform');
    
    /*]]>*/
    </script></body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-18-2013)

  4. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    WOW!!!

    That is amazing but the other materials have different values.

    Welding Rod = 0.0004

    Brazing = 0.000155

    Paint = 0.5

    This is something I am going to develop in our subject area as to help improve children's grades they need to show evidence of costing a manufactured product so if you could show me how you add extra values for different cells that'd be great as I can then copy and modify the code for other products from the children.

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #mask { /* CSS for the background mask */
     position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    #form {
      position:fixed;
      visibility:hidden;
      z-Index:111;
      top:200px;
      width:500px;
      height:190px;
      background-Color:#FFFFCC;
    }
    
    
    .table {
     border:solid black 1px;
    }
    
    .table INPUT {
      width:80px;
      border-Width:0px;
    }
    
    .table TD {
      width:80px;
      text-Align:center;
      border:solid black 1px;
    }
    
    .table TH {
      text-Align:center;
      border:solid black 1px;
      background-Color:#CCFFFF
    }
    
    .table .txt {
      width:150px;
    }
    
    .table .nu {
      width:20px;
      background-Color:#CCFFFF
    }
    
    .table .nu2 {
      width:80px;
    }
    
    .table .title {
      font-Weight:bold;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <input type="button" name="" value="Calculate" onmouseup="ShowForm('mask','form',true);" />
    <div id="form" >
    <form name="myform" >
     <table class="table">
      <tr>
       <th>&nbsp;</th>
       <th>A</th>
       <th>B</th>
       <th>C</th>
       <th>D</th>
       <th>E</th>
      </tr>
      <tr class="title" >
        <td class="nu" >1</td>
        <td class="nu2" >Item Nu.</td>
        <td class="txt" >Material</td>
        <td >Length</td>
        <td >Nu Rqud</td>
        <td >Cost</td>
      </tr>
      <tr>
        <td class="nu" >2</td>
        <td class="nu2" >1</td>
        <td class="txt" >13mm square</td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >3</td>
        <td class="nu2" >2</td>
        <td class="txt" >welding rod</td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >4</td>
        <td class="nu2" >3</td>
        <td class="txt" >brazing</td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >5</td>
        <td class="nu2" >4</td>
        <td class="txt" >paint</td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >6</td>
        <td class="nu2" colspan="4" >Cost</td>
         <td ><input name="cost" readonly /></td>
      </tr>
     </table>
    </form>
    </div>
    <div id="mask" title="Click to Close" onmouseup="ShowForm('mask','form',false);" ></div>
    <br />
    13mm square = 0.5<br />
    
    Welding Rod = 0.0004<br />
    
    Brazing = 0.000155<br />
    
    Paint = 0.5<br />
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ShowForm(mid,fid,ud){
     var msk=document.getElementById(mid),frm=document.getElementById(fid);;
     frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
     frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
     frm.style.visibility=msk.style.visibility=ud?'visible':'hidden';
    }
    
    function calculate(ip){
     var frm=ip.form,ips=frm[ip.name],ary=InitForm.ary[ip.name.replace(/\D/g,'')*1],nu=0,z0=0;
     ip.value=ip.value.replace(/\D/g,'');
     ips[2].value='';
     if (ips[0].value&&ips[1].value){
      nu=ips[0].value*ips[1].value*ary[0]; // E2 = C2*D2*0.5
      ips[2].value=nu;
      ary[1]=nu;
     }
     for (nu=0;z0<InitForm.ary.length;z0++){
      if (typeof(InitForm.ary[z0][1])=='number'){
       nu+=InitForm.ary[z0][1];
      }
     }
     frm.cost.value=nu;
    }
    
    function InitForm(nme,ary){
     var frm=document[nme],ips=frm.elements;
     InitForm.ary=ary;
     for (var z0=0;z0<ips.length;z0++){
      ips[z0].onkeyup=function(){ calculate(this); }
     }
    }
    
    InitForm('myform',[[.5],[0.0004],[0.000155],[.5]]);
    
    /*]]>*/
    </script></body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #5
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    Yeah that's great but how do I 'unmask' it?

    I really appreciate your time and effort but is there a way of removing the 'calculate' option and just having the table as it is?

    Again many thanks.

    J

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
    function ShowForm(mid,fid,ud){
     var msk=document.getElementById(mid),frm=document.getElementById(fid);;
     frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
     frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
     frm.style.visibility=ud?'visible':'hidden';
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-23-2013)

Similar Threads

  1. Resolved Array Values/Other Values
    By bluewalrus in forum JavaScript
    Replies: 8
    Last Post: 12-12-2010, 11:59 PM
  2. Replies: 6
    Last Post: 08-22-2008, 06:41 PM
  3. Replies: 1
    Last Post: 07-14-2008, 11:57 PM
  4. Replies: 3
    Last Post: 05-27-2008, 05:36 PM
  5. Associating Materials with table
    By boogyman in forum MySQL and other databases
    Replies: 1
    Last Post: 03-02-2007, 02:33 PM

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
  •