Maths Homework Generator

October 10, 2017

In this challenge we have created a client-side script using HTML, CSS and JavaScript to help a Maths teacher create homework worksheets for their class.

Our HTML page uses a web form, for the teacher to select various options based on the Maths skills they want to cover and the desired level of difficulty.

The JavaScript code attached to the “Create Worksheet” button is retrieving the user inputs from the various drop down lists. It then uses these to generate list of arithmetic equations and display these on the HTML page

HTML

<!-- Maths Homework Generator by 101Computing.net - www.101computing.net/maths-homework-generator -->
<div class="no-print"> 
Type of equations: <select id=typeOfEquations>
  <option value=1>Addition, 2 operands</option>
  <option value=2>Subtraction, 2 operands</option>
  <option value=3>Multiplication, 2 operands</option>
  <option value=4>Division, 2 operands</option>
  <option value=5 selected>+ - x / , 2 operands</option>
</select><br/>
Number of digits per operand:<select id=numberOfDigits>
  <option value=1>1 digit</option>
  <option value=2>2 digits</option>
 <option value=3>3 digits</option>
  <option value=4>4 digits</option>
  <option value=5>5 digits</option>
  <option value=6>6 digits</option> 
</select><br/>  
Number of equation: <select id=numberOfEquations>
  <option value=5>5 equations</option>
  <option value=10 selected>10 equations</option>
  <option value=15>15 equations</option>
  <option value=20>20 equations</option>
  </select></br>

<input type=button value="Create Worksheet" onclick="JavaScript: generateEquations();">
<input type=button value="Print Worksheet" onclick="JavaScrit:window.print();">
</div>
<div id=title></div>
<div id=worksheet>
</div> 

CSS

#worksheet { 
}
.no-print {
  background-color: #CCCCCC;
  font-family: trebuchet ms;
  line-height: 1.5;
}
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

#title {
  font-size: 20pt;
  font-family: Times New Roman;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  border-bottom: #000000 solid 1px;
  margin-bottom: 10px;
}


.equation {
  font-size: 20pt;
  font-family: Times New Roman;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: #CCCCCC dashed 1px;
}


.number {
  color: red;
} 

JS

function getDropDownListValue(name) {
  var list = document.getElementById(name);
  return list.options[list.selectedIndex].value;
}

function generateEquations(){
  var typeOfEquations = getDropDownListValue("typeOfEquations");
  var numberOfEquations = getDropDownListValue("numberOfEquations");
  var numberOfDigits = getDropDownListValue("numberOfDigits");

  var operand1, operand2, operator, equation, operators;
  switch(typeOfEquations) {
    case '1':
        operators=['+'];
        document.getElementById('title').innerHTML='Additions';
        break;
    case '2':
        operators=['-'];
        document.getElementById('title').innerHTML='Subtractions';  
        break;
    case '3':
        document.getElementById('title').innerHTML='Multiplications';
        operators=['x'];
        break;
    case '4':
        document.getElementById('title').innerHTML='Divisions';
        operators=['/'];
        break;      
    case '5':
        document.getElementById('title').innerHTML='Arithmetic Calculations';
        operators=['+','-','x','/']
        break;
   }

  document.getElementById('worksheet').innerHTML = '';
  
  for (i = 1; i <= parseInt(numberOfEquations); i++) {
    operand1 = Math.floor((Math.random() * (Math.pow(10,numberOfDigits)+1)));
    operand2 = Math.floor((Math.random() * (Math.pow(10,numberOfDigits)+1)));
    operator = operators[Math.floor(Math.random() * operators.length)];

    equation = String(operand1) + ' ' + operator + ' ' + String(operand2) + ' =';

    document.getElementById('worksheet').innerHTML =  document.getElementById('worksheet').innerHTML + '<div class=equation><span class=number>' +String(i) + ')&nbsp;&nbsp;&nbsp;</span>' + equation + '</div>';
  }
}

Edit on Copepen

Your Task

Reverse engineer this JavaScript code to understand how it works. For instance can you identify:

• The purpose of the getDropDownListValue() function defined on lines 1 to 4?

• The purpose of lines 7 to 49?

• The purpose of the switch case on lines 12 to 33?

• The purpose of the for loop on line 37?

• The purpose of lines 38, 39 and 40?

• The purpose of line 42?

• The purpose of line 44?

Challenge #1: 2 or 3 operands per equation?

Now that you understand how this code works, complete it in order for the Maths teacher to be able to chose the number of operands per equations. For instance, if the Maths teacher chooses two operands it will generate equations such as “2+7”. If the teacher chooses three operands, an example of equation could be “2+4-7”.

Challenge #2: Find the missing operand

Change the code to generate equations with a missing operand. For instance: “2 + ??? = 9”

Challenge #3: Linear Equations

Change the code to generate linear equations. For instance: “3x + 2 = 11”

Challenge #4: Quadratic Equations

Change the code to generate quadratic equations. For instance: “4x2 + 5x + 2 = 0″

Reference : https://www.101computing.net/maths-homework-generator/