-
Notifications
You must be signed in to change notification settings - Fork 0
/
calc.html
188 lines (167 loc) · 6.05 KB
/
calc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<style>
table, th, td {
padding: 4px;
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<script src="js/polydiv.js"> </script>
<script src="js/polyparse.js"> </script>
<script>
PolyGrid.useGlyphQuestion = true;
function displayQuestion(divisionResult){
return latexRemoteImage(divisionResult.latexShowQuestion());
};
function displayAnswer(divisionResult) {
let htmlString = "<button type='button' class='btn btn-info '";
htmlString += " data-toggle='collapse' data-target='#answer'>";
htmlString += "Show Answer</button>";
htmlString += "<div id='answer' class='collapse ' >";
htmlString += "<br>";
htmlString += divisionResult.htmlLatexGrid();
htmlString += "<br>";
htmlString += latexRemoteImage(divisionResult.latexShowQuestion());
htmlString += "<br> " + latexRemoteImage("=" + divisionResult.latexShowSolution());
htmlString += "<button type='button' class='btn btn-info '";
htmlString += " data-toggle='collapse' data-target='#full'>";
htmlString += "Show Additional Steps</button>";
htmlString += "<div id='full' class='collapse ' >";
htmlString += "<br>";
htmlString += "<div>" + divisionResult.htmlLatexHistory() + "</div>";
htmlString += "<br>";
htmlString += "So we finally have:";
htmlString += latexRemoteImage(divisionResult.latexShowQuestion());
htmlString += "<br> " + latexRemoteImage("=" + divisionResult.latexShowSolution());
htmlString += " </div>";
htmlString += " </div>";
return htmlString;
};
function div(numerator,denominator ){
return new Rational(numerator,denominator);
};
function handleClick(event) {
let numerator = $('#numInput').val();
let denominator = $('#denInput').val();
console.log("" + numerator + "/" + denominator);
let pnum = new Parser(numerator);
let pden = new Parser(denominator);
pnum.parse();
pden.parse();
//check for errors
let errorMessage = "<p> Please follow the suggestions above for formatting your polynomials."
if (pnum.hasError()) {
$("#latexHolder").html("<p><div>The calculator is having trouble parsing the dividend: " +pnum.showStack() + errorMessage+ "</div>");
return;
}
if (pden.hasError()) {
$("#latexHolder").html("<p><div>The calculator is having trouble parsing the divisor: " +pden.showStack() + errorMessage +"<div>");
return;
}
//validate polynomials
if (pnum.result.degree() < pden.result.degree()) {
$("#latexHolder").html("<p><div>The calculator can only divide polynomials where the divisor has a degree less than or equal to that of the dividend.</div>");
return;
}
let divisionResult = div(pnum.result,pden.result).simplify();
console.log(divisionResult);
$("#latexHolder").html(displayQuestion(divisionResult));
if (pden.result.equals(Poly.zero())) {
MathJax.Hub.Typeset();
$("#latexHolder").append("<p><div>The calculator does like dividing by zero. " +
"Please follow the instructions above for providing a polynomial in the divisor.</div");
return;
}
$("#latexHolder").append(displayAnswer(divisionResult));
$("#latexHolder").append("<hr>");
//event.currentTarget.remove();
MathJax.Hub.Typeset();
};
$(document).ready(function(){
$(".nextButton").on("click", function(event){
handleClick(event);
});
});
</script>
<body>
<nav class="navbar navbar-default" style="margin-bottom:0px">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="..">
<img src="imgs/github_badge1.png" style="max-width:100%;max-height:100%" >
</a>
<p class="navbar-text navbar-right">
<a href=".." class="navbar-link">dmackinnon1.github.io</a>
</p>
</div>
</div>
</nav>
<div class="container-fluid">
<div class='row'>
<div class='col-sm-1'>
</div>
<div class='col-sm-10'>
<div class="page-header">
<h1>Polynomial Division using the Grid Method
<div class="btn-group btn-group-md " role="group">
<a class="btn btn-primary" href="./calc.html">Calculator</a>
<a class="btn btn-default" href=".">Examples</a>
<a class="btn btn-default" href="./practice">Practice</a>
</div>
</h1>
</div>
<div>
Most students learn how to divide polynomials using the long division method, a process very similar to long division for numbers.
A less widely known method is the grid or tabular method, described
<a href="http://www.mathrecreation.com/2009/03/dividing-polynomials-grid-method.html">here</a> and
<a href="http://www.mathrecreation.com/2015/09/more-polynomial-grid-division.html">here</a>.
</div>
<div>
<br>
<p>
Use this page to experiment with dividing polynomials using the grid method.
Your input should be two polynomials - the dividend (numerator) and the divisor (denominator). Once you have provided the polynomials, click the <b>calculate</b> button to obtain the result.
<p>
This is not a very sophisticated calculator. Please provide single variable, fully expanded polynomials using the "standard" notation, using the hat (^) symbol to indicate exponents.
<p>
For example, 3x^2-x+1 is an example of a well-formed polynomial. Also, please use "x" as the variable name in all calculations.
</div>
<div>
<p>To see a set of randomly generated examples, click on the <b>Examples</b> button above.
</div>
<br>
<br>
<div>
dividend (numerator): <input id="numInput" type="string"/>
</div>
<p>
<div>
divisor (denominator): <input id="denInput" type="string"/>
</div>
<hr>
<button id="latexButton" class="nextButton btn btn-default"">calculate</button>
<br>
<div id="latexHolder" style="text-align=center"></div>
<br>
<div id="bottomElement">
<br>
<br>
</div>
<div class='col-sm-1'>
</div>
</div>
</body>
</html>