Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

732 lines (644 sloc) 36.539 kB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format interactive proofs congruency">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geometry Proofs 2</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<!-- <div id="bigTriangle">
<div class="vars">
<var id="A">[0,8]</var>
<var id="B">[-4,0]</var>
<var id="C">[4,0]</var>
<var id="D">[-8,-8]</var>
<var id="E">[8,-8]</var>
<var id="POINTS">["A","B","C","D","E"]</var>
<var id="AB">new Seg("A","B")</var>
<var id="BA">AB</var>
<var id="AC">new Seg("A","C")</var>
<var id="CA">AC</var>
<var id="BD">new Seg("B","D")</var>
<var id="DB">BD</var>
<var id="CE">new Seg("C","E")</var>
<var id="EC">CE</var>
<var id="DE">new Seg("D","E")</var>
<var id="ED">DE</var>
<var id="BC">new Seg("B","C")</var>
<var id="CB">BC</var>
<var id="CD">new Seg("C","D")</var>
<var id="DC">CD</var>
<var id="AD">new Seg("A","D")</var>
<var id="DA">AD</var>
<var id="AE">new Seg("A","E")</var>
<var id="EA">AE</var>
<var id="SEGS">[AB,BA,AC,CA,BD,DB,CE,EC,DE,ED,AD,DA,AE,EA,BC,CB,CD,DC]</var>
<var id="ang1">new Ang("B","A","C", null)</var>
<var id="ang2">new Ang("A","B","C", null)</var>
<var id="ang3">new Ang("A","C","B", null)</var>
<var id="ang4">new Ang("C","B","D", null)</var>
<var id="ang5">new Ang("B","C","D", null)</var>
<var id="ang6">new Ang("D","C","E", null)</var>
<var id="ang7">new Ang("B","D","C", null)</var>
<var id="ang8">new Ang("C","D","E", null)</var>
<var id="ang9">new Ang("C","E","D", null)</var>
<var id="ANGS">[ang1, ang2, ang3, ang4, ang5, ang6, ang7, ang8, ang9]</var>
<var id="SUPPLEMENTARY_ANGS">[addAngs(ang2, ang4), addAngs(ang3, addAngs(ang5, ang6))]</var>
<var id="ALTERNATE_INTERIOR_ANGS">[]</var>
<var id="PARALLEL_SEGS">[]</var>
<var id="BLACKLIST">[[ang6, ang7]]</var>
<var id="ADE">new Triang([AD, DE, EA], [addAngs(ang7, ang8), ang9, ang1])</var>
<var id="ABC">new Triang([BC, CA, AB], [ang3, ang1, ang2])</var>
<var id="BCD">new Triang([BC, CD, DB], [ang5, ang7, ang4])</var>
<var id="CDE">new Triang([EC, CD, DE], [ang6, ang8, ang9])</var>
<var id="TRIANGLES">[ADE, ABC, BCD, CDE]</var>
<var id="STATEMENTS">initProof(SEGS, ANGS, TRIANGLES, SUPPLEMENTARY_ANGS, ALTERNATE_INTERIOR_ANGS, BLACKLIST, 3, 0.1, "all")</var>
<var id="KNOWN">STATEMENTS[0]</var>
<var id="FINISHED">STATEMENTS[1]</var>
<var id="DOT_ATTRS">{ r: 0.2, fill: BLUE, stroke: "none" }</var>
<var id="IS_WRONG">KhanUtil.random() &lt; 0.7</var>
<var id="PROOF_STUFF">IS_WRONG ? outputBadProof() : outputFinishedProof()</var>
<var id="PROOF">PROOF_STUFF[0]</var>
<var id="WRONG_STATEMENT">PROOF_STUFF[1]</var>
<var id="RIGHT_STATEMENT">PROOF_STUFF[2]</var>
<var id="WRONG_BEFORE_RIGHT">KhanUtil.random() &lt; 0.5</var>
<var id="ANSWER">IS_WRONG ? WRONG_STATEMENT : "There's no wrong statement: this proof is fine."</var>
</div>
<div class="problem">
<p class="question">What's the first wrong statement in the proof below that <var>FINISHED</var><code> \; ?</code><br><br>
This figure is not drawn to scale.</p>
<div class="graphie" id="number-line">
init({
range: [[-5, 5], [-5, 5]],
scale: 40
});
addMouseLayer();
graph.congruency = addCongruency({ y1: -0.7, y2: 10.7 });
graph.congruency.addPoint("A", [0, 4]);
graph.congruency.addPoint("B", [-1.5, 1]);
graph.congruency.addPoint("C", [2, 0]);
graph.congruency.addPoint("D", [-4, -4]);
graph.congruency.addPoint("E", [4, -4]);
graph.congruency.addLine({
start: "D",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "B",
end: "C",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "B",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "B",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "C",
clickable: true,
maxState: 3
});
graph.congruency.addAngles("A", { maxState: 3 });
graph.congruency.addAngles("B", { maxState: 3 });
graph.congruency.addAngles("C", { maxState: 3 });
graph.congruency.addAngles("D", { maxState: 3 });
graph.congruency.addAngles("E", { maxState: 3 });
graph.congruency.addLine({
start: "A",
end: "E",
clickable: false,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "D",
clickable: false,
maxState: 3
});
graph.congruency.addLabel("A", "above");
graph.congruency.addLabel("B", "left");
graph.congruency.addLabel("C", "right");
graph.congruency.addLabel("D", "left");
graph.congruency.addLabel("E", "right");
for(var angle in graph.congruency.angles){
graph.congruency.angles[angle].setSelectedStyle({
stroke: "black",
"stroke-width": 3
});
}
for(var line in graph.congruency.lines){
for(var line2 in graph.congruency.lines){
$(function(){
var $statement = $("."+line+"-"+line2);
var firstLine = graph.congruency.lines[line];
var secondLine = graph.congruency.lines[line2];
if($statement.length &gt; 0){
$statement.bind("vmouseover", function(event) {
firstLine.setHighlighted({
stroke: ORANGE,
"stroke-width": 3
});
secondLine.setHighlighted({
stroke: BLUE,
"stroke-width": 3
});
$(this).bind("vmouseout", function(event) {
firstLine.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
secondLine.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
});
});
}
});
}
}
for(var angle in graph.congruency.angles){
for(var angle2 in graph.congruency.angles){
$(function(){
var $statement = $("."+angle+"-"+angle2);
var firstAngle = graph.congruency.angles[angle];
var secondAngle = graph.congruency.angles[angle2];
if($statement.length &gt; 0){
$statement.bind("vmouseover", function(event) {
var firstState = firstAngle.state;
var secondState = secondAngle.state;
var maxState = Math.max(firstState,secondState);
firstAngle.setHighlighted({
stroke: ORANGE,
"stroke-width": 3
});
secondAngle.setHighlighted({
stroke: BLUE,
"stroke-width": 3
});
firstAngle.setState(maxState &gt; 0 ? maxState : 1);
secondAngle.setState(maxState &gt; 0 ? maxState : 1);
$(this).bind("vmouseout", function(event) {
firstAngle.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
secondAngle.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
firstAngle.setState(firstState);
secondAngle.setState(secondState);
});
});
}
});
}
}
for(var i=0; i &lt; (TRIANGLES.length); i++){
for(var j=0; j &lt; (TRIANGLES.length); j++){
for(var k=0; k &lt; 3; k++){
$(function(){
var triangle = TRIANGLES[i];
var triangle2 = TRIANGLES[j];
var seg1_1 = triangle.segs[k].toString().substring(3,5);
var seg1_2 = triangle.segs[(k+1) % 3].toString().substring(3,5);
var seg1_3 = triangle.segs[(k+2) % 3].toString().substring(3,5);
var seg2_1 = triangle2.segs[k].toString().substring(3,5);
var seg2_2 = triangle2.segs[(k+1) % 3].toString().substring(3,5);
var seg2_3 = triangle2.segs[(k+2) % 3].toString().substring(3,5);
var triangleSegs = [seg1_1, seg1_2, seg1_3];
var triangle2Segs = [seg2_1, seg2_2, seg2_3];
var sharedSeg = [-1, -1];
for(var l=0; l &lt; 3; l++){
for(var m=0; m &lt; 3; m++){
if(triangleSegs[l] === triangle2Segs[m]){
sharedSeg = [l,m];
}
}
}
var $statement = $("."+seg1_1+"-"+seg1_2+"-"+seg1_3+"-"+seg2_1+"-"+seg2_2+"-"+seg2_3);
var line1_1 = graph.congruency.lines[seg1_1];
var line1_2 = graph.congruency.lines[seg1_2];
var line1_3 = graph.congruency.lines[seg1_3];
var line2_1 = graph.congruency.lines[seg2_1];
var line2_2 = graph.congruency.lines[seg2_2];
var line2_3 = graph.congruency.lines[seg2_3];
var triangleLines = [line1_1, line1_2, line1_3];
var triangle2Lines = [line2_1, line2_2, line2_3];
if($statement.length &gt; 0){
$statement.bind("vmouseover", function(event) {
for(var l=0; l &lt; 3; l++){
if(sharedSeg[0] != l){
triangleLines[l].setUnselectedStyle({
stroke: ORANGE,
"stroke-width": 3
});
}
else{
triangleLines[l].setUnselectedStyle({
stroke: "black",
"stroke-width": 3
});
}
}
for(var l=0; l &lt; 3; l++){
if(sharedSeg[1] != l){
triangle2Lines[l].setUnselectedStyle({
stroke: BLUE,
"stroke-width": 3
});
}
else{
triangle2Lines[l].setUnselectedStyle({
stroke: "black",
"stroke-width": 3
});
}
}
$(this).bind("vmouseout", function(event) {
line1_1.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
line1_2.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
line1_3.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
line2_1.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
line2_2.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
line2_3.setUnselectedStyle({
stroke: "black",
"stroke-width": 2
});
});
});
}
});
}
}
}
</div>
</div>
<div class="question">
<p><var>PROOF</var></p>
</div>
<div class="solution"><var>ANSWER</var></div>
<div data-if="WRONG_BEFORE_RIGHT" data-unwrap>
<ul class="choices" data-category="true">
<li><var>WRONG_STATEMENT</var></li>
<li><var>RIGHT_STATEMENT</var></li>
<li>There's no wrong statement: this proof is fine.</li>
</ul>
</div>
<div data-else data-unwrap>
<ul class="choices" data-category="true">
<li><var>RIGHT_STATEMENT</var></li>
<li><var>WRONG_STATEMENT</var></li>
<li>There's no wrong statement: this proof is fine.</li>
</ul>
</div>
<div class="hints">
<p>Try going through the proof yourself: write down the givens, and then see if they justify the next step <em>for the reason given.</em> Then do the same thing for the next step, and the next, until you run into something that you can't justify, or you finish the proof.</p>
<p data-if="IS_WRONG"><var>WRONG_STATEMENT</var> is the first wrong statement.</p>
<p data-else>There is no wrong statement in this proof.</p>
</div>
</div> -->
<div id="triforce">
<div class="vars">
<var id="AB">new Seg("A","B")</var>
<var id="BA">AB</var>
<var id="AC">new Seg("A","C")</var>
<var id="CA">AC</var>
<var id="AD">new Seg("A","D")</var>
<var id="DA">AD</var>
<var id="AF">new Seg("A","F")</var>
<var id="FA">AF</var>
<var id="BC">new Seg("B","C")</var>
<var id="CB">BC</var>
<var id="BD">new Seg("B","D")</var>
<var id="DB">BD</var>
<var id="BE">new Seg("B","E")</var>
<var id="EB">BE</var>
<var id="CE">new Seg("C","E")</var>
<var id="EC">CE</var>
<var id="CF">new Seg("C","F")</var>
<var id="FC">CF</var>
<var id="DE">new Seg("D","E")</var>
<var id="ED">DE</var>
<var id="DF">new Seg("D","F")</var>
<var id="FD">DF</var>
<var id="EF">new Seg("E","F")</var>
<var id="FE">EF</var>
<var id="SEGS">[AB,BA,AC,CA,AD,DA,AF,FA,BC,CB,BD,DB,BE,EB,CE,EC,CF,FC,DE,ED,DF,FD,EF,FE]</var>
<var id="ang1">new Ang("B","A","C")</var>
<var id="ang2">new Ang("A","B","C")</var>
<var id="ang3">new Ang("A","C","B")</var>
<var id="ang4">new Ang("D","B","E")</var>
<var id="ang5">new Ang("E","B","C")</var>
<var id="ang6">new Ang("B","C","E")</var>
<var id="ang7">new Ang("E","C","F")</var>
<var id="ang8">new Ang("B","D","E")</var>
<var id="ang9">new Ang("B","E","D")</var>
<var id="ang10">new Ang("B","E","C")</var>
<var id="ang11">new Ang("C","E","F")</var>
<var id="ang12">new Ang("C","F","E")</var>
<var id="ANGS">[ang1, ang2, ang3, ang4, ang5, ang6, ang7, ang8, ang9, ang10, ang11, ang12]</var>
<var id="SUPPLEMENTARY_ANGS">[addAngs(ang2, addAngs(ang5, ang4)), addAngs(ang3, addAngs(ang6, ang7)), addAngs(ang9, addAngs(ang10,ang11))]</var>
<var id="ALTERNATE_INTERIOR_ANGS">[[ang5, ang9], [ang6, ang11]]</var>
<var id="ABC">new Triang([AB, BC, CA], [ang2, ang3, ang1])</var>
<var id="BDE">new Triang([BD, DE, EB], [ang8, ang9, ang4])</var>
<var id="BCE">new Triang([BC, CE, EB], [ang6, ang10, ang5])</var>
<var id="CEF">new Triang([CE, EF, FC], [ang11, ang12, ang7])</var>
<var id="ADF">new Triang([AD, DF, FA], [ang8, ang12, ang1])</var>
<var id="TRIANGLES">[ABC, BDE, BCE, CEF]</var>
<var id="STATEMENTS">initProof(SEGS, ANGS, TRIANGLES, SUPPLEMENTARY_ANGS, ALTERNATE_INTERIOR_ANGS, 3, 0.25, "all")</var>
<var id="KNOWN">STATEMENTS[0]</var>
<var id="FINISHED">STATEMENTS[1]</var>
<var id="IS_WRONG">KhanUtil.random() &lt; 0.7</var>
<var id="PROOF_STUFF">IS_WRONG ? outputBadProof() : outputFinishedProof()</var>
<var id="PROOF">PROOF_STUFF[0]</var>
<var id="WRONG_STATEMENT">PROOF_STUFF[1]</var>
<var id="RIGHT_STATEMENT">PROOF_STUFF[2]</var>
<var id="WRONG_BEFORE_RIGHT">KhanUtil.random() &lt; 0.5</var>
<var id="ANSWER">IS_WRONG ? WRONG_STATEMENT : "There's no wrong statement: this proof is fine."</var>
</div>
<div class="problem">
<p class="question">What's the first wrong statement in the proof below that <var>FINISHED</var><code> \; ?</code></br></br>
<code> \overline{BC} </code> is parallel to <code> \overline{DF} </code>. This diagram is not drawn to scale.</p>
<div class="graphie">
init({
range: [[-5, 5], [-5, 5]],
scale: 40
});
addMouseLayer();
graph.congruency = addCongruency({ y1: -0.7, y2: 10.7 });
graph.congruency.addPoint("A", [0, 4]);
graph.congruency.addPoint("B", [-2, 0]);
graph.congruency.addPoint("C", [2, 0]);
graph.congruency.addPoint("D", [-4, -4]);
graph.congruency.addPoint("E", [0, -4]);
graph.congruency.addPoint("F", [4, -4]);
graph.congruency.addLine({
start: "A",
end: "B",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "C",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "A",
end: "F",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "B",
end: "C",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "B",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "B",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "F",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "D",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "D",
end: "F",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "E",
end: "F",
clickable: true,
maxState: 3
});
graph.congruency.addAngles("A", { maxState: 3 });
graph.congruency.addAngles("B", { maxState: 3 });
graph.congruency.addAngles("C", { maxState: 3 });
graph.congruency.addAngles("D", { maxState: 3 });
graph.congruency.addAngles("E", { maxState: 3 });
graph.congruency.addAngles("F", { maxState: 3 });
graph.congruency.addAngle("BAC", { maxState: 3 });
graph.congruency.addAngle("EDB", { maxState: 3 });
graph.congruency.addAngle("CFE", { maxState: 3 });
for(var angle in graph.congruency.angles){
graph.congruency.angles[angle].setSelectedStyle({
stroke: "black",
"stroke-width": 3
});
}
graph.congruency.addLabel("A", "above");
graph.congruency.addLabel("B", "left");
graph.congruency.addLabel("C", "right");
graph.congruency.addLabel("D", "below");
graph.congruency.addLabel("E", "below");
graph.congruency.addLabel("F", "below");
for(var angle in graph.congruency.angles){
graph.congruency.angles[angle].setSelectedStyle({
stroke: "black",
"stroke-width": 3
});
}
for(var line in graph.congruency.lines){
for(var line2 in graph.congruency.lines){
(function(){
var $statement = $("."+line+"-"+line2);
var firstLine = graph.congruency.lines[line];
var secondLine = graph.congruency.lines[line2];
if($statement.length &gt; 0){
$statement.live("vmouseover", function(event) {
firstLine.setHighlighted({
stroke: ORANGE,
"stroke-width": 3
});
secondLine.setHighlighted({
stroke: BLUE,
"stroke-width": 3
});
$(this).bind("vmouseout", function(event) {
firstLine.unsetHighlighted();
secondLine.unsetHighlighted();
});
});
}
})();
}
}
for(var angle in graph.congruency.angles){
for(var angle2 in graph.congruency.angles){
(function(){
var $statement = $("."+angle+"-"+angle2);
var firstAngle = graph.congruency.angles[angle];
var secondAngle = graph.congruency.angles[angle2];
if($statement.length &gt; 0){
$statement.live("vmouseover", function(event) {
var firstState = firstAngle.state;
var secondState = secondAngle.state;
var maxState = Math.max(firstState,secondState);
firstAngle.setHighlighted({
stroke: ORANGE,
"stroke-width": 3
});
secondAngle.setHighlighted({
stroke: BLUE,
"stroke-width": 3
});
firstAngle.setState(maxState &gt; 0 ? maxState : 1);
secondAngle.setState(maxState &gt; 0 ? maxState : 1);
$(this).bind("vmouseout", function(event) {
firstAngle.unsetHighlighted();
secondAngle.unsetHighlighted();
firstAngle.setState(firstState);
secondAngle.setState(secondState);
});
});
}
})();
}
}
for(var line in graph.congruency.lines){
(function(){
var $statements = $("."+line);
for(var i = 0; i&lt;$statements.length; i++){
var highlightLine = graph.congruency.lines[line];
var highlightDiv = $($statements[i]);
highlightDiv.live("vmouseover", function(event) {
highlightLine.setHighlighted({
stroke: ORANGE,
"stroke-width": 3
});
$(this).bind("vmouseout", function(event) {
highlightLine.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
});
});
}
})();
}
for(var line in graph.congruency.lines){
(function(){
var $statements = $("."+line + "2");
for(var i = 0; i&lt;$statements.length; i++){
var highlightLine = graph.congruency.lines[line];
var highlightDiv = $($statements[i]);
highlightDiv.live("vmouseover", function(event) {
highlightLine.setHighlighted({
stroke: BLUE,
"stroke-width": 3
});
$(this).bind("vmouseout", function(event) {
highlightLine.unsetHighlighted({
stroke: "black",
"stroke-width": 2
});
});
});
}
})();
}
</div>
</div>
<div class="question">
<p><var>PROOF</var></p>
</div>
<div class="solution"><var>ANSWER</var></div>
<div data-if="WRONG_BEFORE_RIGHT" data-unwrap>
<ul class="choices" data-category="true">
<li><var>WRONG_STATEMENT</var></li>
<li><var>RIGHT_STATEMENT</var></li>
<li>There's no wrong statement: this proof is fine.</li>
</ul>
</div>
<div data-else data-unwrap>
<ul class="choices" data-category="true">
<li><var>RIGHT_STATEMENT</var></li>
<li><var>WRONG_STATEMENT</var></li>
<li>There's no wrong statement: this proof is fine.</li>
</ul>
</div>
<div class="hints">
<p>Try going through the proof yourself: write down the givens, and then see if they justify the next step <em>for the reason given.</em> Then do the same thing for the next step, and the next, until you run into something that you can't justify, or you finish the proof.</p>
<p data-if="IS_WRONG"><var>WRONG_STATEMENT</var> is the first wrong statement.</p>
<p data-else>There is no wrong statement in this proof.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.