---
description: October 10, 2017
---

# Maths Homework Generator

![](https://3650666907-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M16IoaANYRvc0I-U9uw%2F-M249R1sNeIIGpYp-U-U%2F-M249Wj6SHLlGedVWF-v%2Fimage.png?alt=media\&token=adc5373b-8d41-4f81-8f41-45a0065535fa)

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

```markup
<!-- 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

```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

```javascript
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>';
  }
}

```

{% hint style="warning" %}
[Edit on Copepen](https://codepen.io/101Computing/pen/YrLXXB)
{% endhint %}

**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/](https://www.101computing.net/maths-homework-generator/)
