Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

415 lines (374 sloc) 18.386 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 1</title>
<script src="../khan-exercise.js"></script>
<style type="text/css">
.missingStatement {
width: 30px;
text-transform: uppercase;
}
.missingReason {
width: 150px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">[-4,2]</var>
<var id="B">[4,2]</var>
<var id="C">[0,0]</var>
<var id="D">[-4,-2]</var>
<var id="E">[4,-2]</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="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="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="CD">new Seg("C","D")</var>
<var id="DC">CD</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="SEGS">[AB,BA,AC,CA,AD,DA,AE,EA,BC,CB,BD,DB,CD,DC,CE,EC,DE,ED]</var>
<var id="ang1">new Ang("D","A","C", null)</var>
<var id="ang2">new Ang("C","A","B", null)</var>
<var id="ang3">new Ang("C","B","A", null)</var>
<var id="ang4">new Ang("C","B","E", null)</var>
<var id="ang5">new Ang("A","C","B", null)</var>
<var id="ang6">new Ang("A","C","D", null)</var>
<var id="ang7">new Ang("B","C","E", null)</var>
<var id="ang8">new Ang("D","C","E", null)</var>
<var id="ang9">new Ang("A","D","C", null)</var>
<var id="ang10">new Ang("C","D","E", null)</var>
<var id="ang11">new Ang("C","E","D", null)</var>
<var id="ang12">new Ang("C","E","B", null)</var>
<var id="ANGS">[ang1, ang2, ang3, ang4, ang5, ang6, ang7, ang8, ang9, ang10, ang11, ang12]</var>
<var id="SUPPLEMENTARY_ANGS">[addAngs(ang5, ang6), addAngs(ang6, ang8), addAngs(ang8, ang7), addAngs(ang7, ang5)]</var>
<var id="ALTERNATE_INTERIOR_ANGS">[[ang1, ang12], [ang2, ang11], [ang10, ang3], [ang9, ang4]]</var>
<var id="ABC">new Triang([AB, BC, CA], [ang3, ang5, ang2])</var>
<var id="BCE">new Triang([BC, CE, EB], [ang7, ang12, ang4])</var>
<var id="ECD">new Triang([EC, CD, DE], [ang8, ang10, ang11])</var>
<var id="DCA">new Triang([DC, CA, AD], [ang6, ang1, ang9])</var>
<var id="ABE">new Triang([AB, BE, EA], [addAngs(ang3, ang4), ang12, ang2])</var>
<var id="ADE">new Triang([AD, DE, EA], [addAngs(ang9, ang10), ang11, ang1])</var>
<var id="BED">new Triang([BE, ED, DB], [addAngs(ang12, ang11), ang10, ang4])</var>
<var id="BAD">new Triang([BA, AD, DB], [addAngs(ang2, ang1), ang9, ang3])</var>
<var id="TRIANGLES">[ABC, BCE, ECD, DCA, ABE, ADE, BED, BAD]</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="FILL_BLANKS_STUFF">outputFillBlanksProof()</var>
<var id="FILL_BLANKS_PROOF">FILL_BLANKS_STUFF[0]</var>
<var id="FILL_BLANKS_NUM">FILL_BLANKS_STUFF[1]</var>
</div>
<div class="problem">
<p class="question"> <code> \overline{AB} </code> is parallel to <code> \overline{DE} </code>, and <code> \overline{AD} </code> is parallel to <code> \overline{BE} </code>. Figure 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", [-4, 4]);
graph.congruency.addPoint("B", [3, 4]);
graph.congruency.addPoint("C", [0, 0]);
graph.congruency.addPoint("D", [-3, -4]);
graph.congruency.addPoint("E", [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: "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: "B",
end: "E",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "E",
end: "D",
clickable: true,
maxState: 3
});
graph.congruency.addLine({
start: "C",
end: "E",
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.addAngle("DAC", { maxState: 3 });
graph.congruency.addAngle("CAB", { maxState: 3 });
graph.congruency.addAngle("ABC", { maxState: 3 });
graph.congruency.addAngle("CBE", { maxState: 3 });
graph.congruency.addAngle("BEC", { maxState: 3 });
graph.congruency.addAngle("CED", { maxState: 3 });
graph.congruency.addAngle("EDC", { maxState: 3 });
graph.congruency.addAngle("CDA", { maxState: 3 });
for(var angle in graph.congruency.angles){
graph.congruency.angles[angle].setSelectedStyle({
stroke: "black",
"stroke-width": 3
});
}
graph.congruency.addLabel("A", "left");
graph.congruency.addLabel("B", "right");
graph.congruency.addLabel("C", "right");
graph.congruency.addLabel("D", "left");
graph.congruency.addLabel("E", "right");
var hintsLeft = FILL_BLANKS_NUM*2;
$(".missingStatement").keyup(function(){
if(checkFillBlanksStatement($(this).parent()[0].id)){
FILL_BLANKS_NUM--;
if(hintsLeft &gt; FILL_BLANKS_NUM*2){
var stepsLeft = FILL_BLANKS_NUM*2 + " step" + (FILL_BLANKS_NUM === 1 ? "" : "s") + " left";
$("#hint").val("I'd like a hint (" + stepsLeft + ")");
giveAway = false;
hintsLeft = FILL_BLANKS_NUM*2;
if(hintsLeft === 0){
$("#hint").attr("disabled", true);
}
}
}
});
$(".missingReason").change(function(){
if(checkFillBlanksReason($(this), this.id)){
FILL_BLANKS_NUM--;
if(hintsLeft &gt; FILL_BLANKS_NUM*2){
var stepsLeft = FILL_BLANKS_NUM*2 + " step" + (FILL_BLANKS_NUM === 1 ? "" : "s") + " left";
$("#hint").val("I'd like a hint (" + stepsLeft + ")");
giveAway = false;
hintsLeft = FILL_BLANKS_NUM*2;
if(hintsLeft === 0){
$("#hint").attr("disabled", true);
}
}
}
});
var giveAway = false;
$("#hint").click(function(){
if(hintsLeft &gt; 0){
hintsLeft--;
if(!giveAway){
var stepsLeft = hintsLeft + " step" + (FILL_BLANKS_NUM === 1 ? "" : "s") + " left";
$(this).val("I'd like a hint (" + stepsLeft + ")");
$(this).attr("disabled", false);
$(".actualHints").append("&lt;p&gt;"+getFillBlanksHint(false)+"&lt;/p&gt;");
_.each($(".actualHints code"), function(tag){ $.tmpl.type.code()(tag); });
giveAway = true;
}
else{
var stepsLeft = hintsLeft + " step" + (FILL_BLANKS_NUM === 1 ? "" : "s") + " left";
$(this).val("I'd like a hint (" + stepsLeft + ")");
$(this).attr("disabled", false);
$(".actualHints").append("&lt;p&gt;"+getFillBlanksHint(true)+"&lt;/p&gt;");
_.each($(".actualHints code"), function(tag){ $.tmpl.type.code()(tag); });
giveAway = false;
}
if(hintsLeft === 0){
$("#hint").attr("disabled", true);
}
}
});
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
});
});
});
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 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.bind("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.bind("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="problems">
<div>
<div class="question">
</div>
<div class="statements"> <var> FILL_BLANKS_PROOF </var>
</div>
<div class="actualHints">
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Fill in the blanks in this proof that <var> FINISHED </var>.
</div>
<div class="guess">[outputKnownProof()]</div>
<div class="validator-function">
return FILL_BLANKS_NUM==0;
</div>
<div class="show-guess">
</div>
</div>
<div class="hints">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.