Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Maths game

  1. #1
    New Coder
    Join Date
    Oct 2003
    Location
    UK
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Maths game

    Hi,

    Have a look at this maths game I made. It tests you on adding, subtracting, multiplying and dividing and has three different levels.

    Note-you must save the code below as mathsgamefinal.htm for the reset button to work.

    Code:
    <html> 
    
    
    
    <head> 
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <meta http-equiv="Content-Language" content="en-gb">
    
    <title></title> 
    
    </head> 
    
    
    
    <body bgcolor="#FF0000">
    
    
    
    <script type="text/javascript"> 
    
    
    
    function next1(){
    
    var outof=document.getElementById('outof').value;
    
    if(document.getElementById('next').value=="Next" && document.getElementById('type').value=="a"){document.getElementById('next').value='Enter'; add(); document.getElementById('answer').value='answer';}
    else if(document.getElementById('next').value=="Next" && document.getElementById('type').value=="m"){document.getElementById('next').value='Enter'; times(); document.getElementById('answer').value='answer';}
    else if(document.getElementById('next').value=="Next" && document.getElementById('type').value=="t"){document.getElementById('next').value='Enter'; minus(); document.getElementById('answer').value='answer';}
    else if(document.getElementById('next').value=="Next" && document.getElementById('type').value=="d"){document.getElementById('next').value='Enter'; divide(); document.getElementById('answer').value='answer';}
    
     else if(document.getElementById('next').value=="Enter"  && document.getElementById('answer').value==(cr)){ document.getElementById('question').value='Correct'; document.getElementById('next').value='Next'; document.getElementById('outof').value=parseInt(document.getElementById('outof').value)+1; document.getElementById('score').value=parseInt(document.getElementById('score').value)+1; pc();}
    
     else{ document.getElementById('question').value='Wrong. Answer= '+cr; document.getElementById('next').value='Next'; document.getElementById('outof').value=parseInt(document.getElementById('outof').value)+1; pc();}
    
    document.getElementById('answer').select();
    }
    
    
    
    function add(){
    ea1=(Math.floor(Math.random() * (1 - 10)) + 10); 
    ea2=(Math.floor(Math.random() * (1 - 10)) + 10); 
    ma1=(Math.floor(Math.random() * (21 - 49)) + 49); 
    ma2=(Math.floor(Math.random() * (21 - 49)) + 49); 
    ha1=(Math.floor(Math.random() * (111 - 299)) + 299); 
    ha2=(Math.floor(Math.random() * (111 - 299)) + 299); 
    
    if(document.getElementById('level').value=="e"){document.getElementById('question').value=ea1+' plus '+ea2; cr=ea1+ea2}
    if(document.getElementById('level').value=="m"){document.getElementById('question').value=ma1+' plus '+ma2; cr=ma1+ma2}
    if(document.getElementById('level').value=="h"){document.getElementById('question').value=ha1+' plus '+ha2; cr=ha1+ha2}
    }
    function times(){
    em1=(Math.floor(Math.random() * (2 - 10)) + 10); 
    em2=(Math.floor(Math.random() * (2 - 10)) + 10); 
    mm1=(Math.floor(Math.random() * (11 - 19)) + 19); 
    mm2=(Math.floor(Math.random() * (6 - 12)) + 12); 
    hm1=(Math.floor(Math.random() * (21 - 29)) + 29); 
    hm2=(Math.floor(Math.random() * (21 - 29)) + 29); 
    
    if(document.getElementById('level').value=="e"){document.getElementById('question').value=em1+' times '+em2; cr=em1*em2}
    if(document.getElementById('level').value=="m"){document.getElementById('question').value=mm1+' times '+mm2; cr=mm1*mm2}
    if(document.getElementById('level').value=="h"){document.getElementById('question').value=hm1+' times '+hm2; cr=hm1*hm2}
    
    
    }
    
    function minus(){
    et1=(Math.floor(Math.random() * (10 - 20)) + 20); 
    et2=(Math.floor(Math.random() * (1 - 10)) + 10); 
    mt1=(Math.floor(Math.random() * (50 - 99)) + 99); 
    mt2=(Math.floor(Math.random() * (20 - 50)) + 50); 
    ht1=(Math.floor(Math.random() * (350 - 1000)) + 1000); 
    ht2=(Math.floor(Math.random() * (350 - 1000)) + 1000); 
    
    if(document.getElementById('level').value=="e"){document.getElementById('question').value=et1+' minus '+et2; cr=et1-et2}
    if(document.getElementById('level').value=="m"){document.getElementById('question').value=mt1+' minus '+mt2; cr=mt1-mt2}
    if(document.getElementById('level').value=="h"){document.getElementById('question').value=ht1+' minus '+ht2; cr=ht1-ht2}
    
    
    }
    function divide(){
    ed1=(Math.floor(Math.random() * (2 - 10)) + 10); 
    ed2=(Math.floor(Math.random() * (2 - 10)) + 10); 
    md1=(Math.floor(Math.random() * (11 - 19)) + 19); 
    md2=(Math.floor(Math.random() * (11 - 19)) + 19); 
    hd1=(Math.floor(Math.random() * (21 - 29)) + 29); 
    hd2=(Math.floor(Math.random() * (21 - 29)) + 29); 
    ed3=ed1*ed2; 
    md3=md1*md2; 
    hd3=hd1*hd2; 
    
    if(document.getElementById('level').value=="e"){document.getElementById('question').value=ed3+' divided by '+ed2; cr=ed1}
    if(document.getElementById('level').value=="m"){document.getElementById('question').value=md3+' divided by '+md2; cr=md1}
    if(document.getElementById('level').value=="h"){document.getElementById('question').value=hd3+' divided by '+hd2; cr=hd1}
    }
    
    
    function answerreset(){
    if(document.getElementById('answer').value=="answer"){document.getElementById('answer').value='';}
    }
    
    function pc(){
    document.getElementById('scorepercent').value=document.getElementById('score').value/document.getElementById('outof').value*100;
    document.getElementById('scorepercent').value=Math.round(document.getElementById('scorepercent').value);
    }
    </script>  
    
    <table border="0" width="198" height="180" bordercolor="#000000" style="background-color: #FFFF00; border-style: solid">
    
      <tr>
    
        <td height="33" width="99" colspan="2">
    
         <p align="center">
    
         <select size="1" name="type" id='type'>
    
          <option value="a" selected>Add</option>
    
          <option value="t">Take away</option>
    
          <option value="m">Multiply</option>
    
          <option value="d">Divide</option>
    
         </select></p>
    
        </td>
    
        <td height="36" width="99" colspan="2">
    
             <p align="center">
    
             <select size="1" name="level" id=level>
    
            <option value="e" selected>Easy</option>
    
            <option value="m">Medium</option>
    
            <option value="h">Hard</option>
    
            </select></p>
    
        </td>
    
      </tr>
    
      <tr>
    
        <td height="36" width="198" colspan="4">
    
                  <p align="left">
    
                  <input type="button" name="T1" id='question' value="Click next to begin" style="background-color: #FFFF00; border: 0 solid #FFFF00">
    
                  </p>
    
          </td>
    
      </tr>
    
      <tr>
    
        <td height="33" width="66">
    
          <p align="center"><input type="text" name="answer" size="6" id='answer' onclick=answerreset()></td>
    
        <td height="36" width="66" colspan="2">
    
          <p align="center"><button onclick='next1()' id='next'>Next</button></td>
    
        <td height="33" width="66">
    
          <p align="center"><button onclick='window.location="mathsgamefinal.htm"'>Reset</button></td>
    
      </tr>
    
      <tr>
    
        <td height="36" width="66">
    
          <p align="center">Score %:</td>
    
        <td height="33" width="66" colspan="2">
    
          <p align="center">Score Marks:</td>
    
        <td height="33" width="66">
    
          <p align="center">Out of:</td>
    
      </tr>
    
      <tr>
    
        <td height="33" width="66">
    
          <p align="center"><input type="button" name="T1" size="3" id=scorepercent value="0"></td>
    
        <td height="33" width="66" colspan="2">
    
          <p align="center"><input type="button" name="score" size="3" id=score value="0"></td>
    
        <td height="36" width="66">
    
          <p align="center"><input type="button" name="outof" size="3" id=outof value="0"></td>
    
      </tr>
    </table>
    </body> 
    </html>
    Any feedback would be much apprieciated,

    Neil

  • #2
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Pretty good, though you should attach a doctype to it and validate it at the W3C site:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    It should come up with three errors:

    Code:
    Line 112, column 37: there is no attribute "HEIGHT" (explain...). 
      <table border="0" width="198" height="180" bordercolor="#000000" style="backgrou
                                           ^
    Line 112, column 55: there is no attribute "BORDERCOLOR" (explain...). 
      ...width="198" height="180" bordercolor="#000000" style="background-color: #FFFF
                                              ^
    Line 170, column 97: an attribute value must be a literal unless it contains only name characters (explain...). 
      ...e="6" id='answer' onclick=answerreset()></td>
    You can just replace the height and bordercolor with some CSS and for the onclick I think it wants this; onclick="answerreset();".

    One last point, your Next/Enter button changes size when the text inside it changes, and this changes the width of the table slightly each time, why not fix the width like this:

    <p align="center"><button onclick='next1()' id='next' style="width:???px;">Next</button></td>

    Other than that, it's a pretty nifty maths game.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts

    Re: Maths game

    Originally posted by neil9999
    Note-you must save the code below as mathsgamefinal.htm for the reset button to work.
    you can make the reset button as:

    <input type="reset" value="Reset" />

    or if you really want to use <button> tag:

    <button onclick="this.form.reset()">Reset</button>
    or
    <button onclick="location.reload()">Reset</button>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or you can go

    <button type="reset">Reset</button>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New Coder
    Join Date
    Oct 2003
    Location
    UK
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for all your help. I'm going to make it so when you click the reset button it says 'are you sure?', the 'next'/'enter' button changes to 'yes' and the reset button changes to 'no', so I'll probably have a new function with this.form.reset() somewhere in it.

    Thanks again,

    Neil

  • #6
    New Coder
    Join Date
    Oct 2003
    Location
    UK
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh yeah, also it will test you on powers and percentages and things. I'll post the script again when I've done that.

    Thanks,

    Neil

  • #7
    New Coder
    Join Date
    Aug 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one great script - usefull for schools!
    Ryan Jones(sciguyryan)
    Visit us and chat at our forums - the Kidscript Forums


  •  

    Posting Permissions

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