Skip to main content

Javascript math worksheet generator

 Leaving everything behind, I have come to HTML and Javascript. :). Anyways I wrote a code to generate a simple worksheet using Javascript. Here is the complete HTML+javascript.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 
<style type="text/css">
  .box{
      margin-top: 50px;
      float:left;
      width:25%;
      padding: 10px;
      margin: 10px;
      font-size: 18px;
      background-color: #ccc;
      box-shadow :2px 2px #eeeeee;
      text-align: center;
</style>
<script type="text/javascript">
   function showQuestion() {
        var typeSel = document.getElementById("type").value
        var typeVal="??"
        switch(typeSel) {
          case  "Addition":typeVal = " + ";break
           case "Subtraction":typeVal = " - ";break      	
          case  "Multiplication":typeVal = " * ";break
          case  "Division":typeVal = " &#47 ";break;
        }
        var str = "";
        var inputrange = document.getElementById("range")
        var range = inputrange.value
        for(i=1;i<10;i++){ 
        var n1 = Math.floor(Math.random()*range);
        var n2 = Math.floor(Math.random()*range);
        if(n1<n2){
           t1 = n1;n1 = n2;n2 = t1         
        }
        str = str+n1 +typeVal+n2+"=<br><br>" ;
        }
        var qnBox = document.getElementById('qn1');
        qnBox.innerHTML =str;
        str = ""
         for(i=1;i<10;i++){ 
        var n1 = Math.floor(Math.random()*range);
        var n2 = Math.floor(Math.random()*range);
          if(n1<n2){
           t1 = n1;n1 = n2;n2 = t1         
        }
        str = str+n1 +typeVal+n2+"=<br><br>" ;
        }
          qnBox = document.getElementById('qn2');
        qnBox.innerHTML =str;
         str = ""
         for(i=1;i<10;i++){ 
        var n1 = Math.floor(Math.random()*range);
        var n2 = Math.floor(Math.random()*range);
          if(n1<n2){
           t1 = n1;n1 = n2;n2 = t1         
        }
        str = str+n1 +typeVal+n2+"=<br><br>" ;
        }
          qnBox = document.getElementById('qn3');
        qnBox.innerHTML =str;
        hideElements()
        
         
   }
 
   function hideElements(){
        var qnFormat = document.getElementById("qnFormat")
        qnFormat.style.visibility ='hidden'
        
   }
</script>
</head>
<body>
<div id = "qnFormat">
<p  >
    Max.Number:<input   id="range">
    Type: <select id="type">
			<option value="Addition">Addition</option>
			<option value="Subtraction">Subtraction</option>
			<option value="Multiplication">Multiplication</option>
			<option value="Division">Division</option>    
    </select>
    <button name="start" type="button" onclick="showQuestion()">Create worksheet</button>
    </p></div>
     <div class = "box" id="qn1"></div>
     <div class = "box" id="qn2"></div>
     <div class = "box" id="qn3"></div>
   
</body>
</html>

 Things you can improve

  • UI - of course
  • In Division - make sure the two numbers are related.  
  • Zero avoidance - if either number is 0, add a random value to it.
  • Format it so that numbers are placed one below the other, easier to work out on the sheet. May be with a line after the sum
  • Add name and date at the top
  • Add answer button for each sum and onclick of that button display answer. 
 
 

Comments

Post a Comment