Permalink
Fetching contributors…
Cannot retrieve contributors at this time
152 lines (127 sloc) 5.27 KB
<!DOCTYPE html>
<html data-require="math graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area of a circle</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script type="text/javascript">
var R_COLOR = "purple";
var D_COLOR = "green";
var C_COLOR = "blue";
var K_COLOR = "red";
function initCircle( R ) {
var graph = KhanUtil.currentGraph;
graph.init({
range: [ [-1.1, 1.1], [-1.1, 1.1] ],
scale: 100
});
graph.circle( [0, 0], 1, { "fill-opacity": 0 } );
}
function drawRadius( R ) {
var graph = KhanUtil.currentGraph;
graph.line( [0, 0], [1, 0], { "fill": "none", "stroke": R_COLOR } );
graph.label( [1/2, 0], "\\color{" + R_COLOR + "}{r = " + R + "}", "below" );
}
function drawDiameter( R ) {
var graph = KhanUtil.currentGraph;
graph.line( [-1, 0], [1, 0], { "stroke": D_COLOR } );
graph.label( [0, 0], "\\color{" + D_COLOR + "}{d = " + 2 * R + "}", "above" );
}
function drawCircumference( R ) {
var graph = KhanUtil.currentGraph;
graph.circle( [0, 0], 1, { "stroke": C_COLOR } );
graph.label( [0, -1], "\\color{" + C_COLOR + "}{c = " + 2 * R + "\\pi}", "below" );
}
function drawArea( R ) {
var graph = KhanUtil.currentGraph;
var c = graph.circle( [0, 0], 1, { "fill": "#ffcccc", "stroke-width": 0 } );
$(c.node).insertBefore($(graph.raphael.canvas).find("ellipse")[0]);
graph.label( [0, 0.5], "\\color{" + K_COLOR + "}{K = " + R*R + "\\pi}", "above" );
}
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="circle-r-to-K">
<div class="vars">
<var id="R">randRange(1, 8)</var>
</div>
<div class="question">
<p>Suppose the radius of a circle is <code>\color{<var>R_COLOR</var>}{<var>R</var>}</code>. What is its area?</p>
</div>
<div class="solution" data-forms="integer, proper, improper, mixed, decimal, pi"><var>PI * R * R</var></div>
<div class="hints" data-apply="prependContents">
<div class="graphie" id="circle">
initCircle( R );
drawRadius( R );
</div>
</div>
</div>
<div id="circle-d-to-K">
<div class="vars">
<var id="R">randRange(1, 8)</var>
</div>
<div class="question">
<p>Suppose the diameter of a circle is <code>\color{<var>D_COLOR</var>}{<var>2 * R</var>}</code>. What is its area?</p>
</div>
<div class="solution" data-forms="integer, proper, improper, mixed, decimal, pi"><var>PI * R * R</var></div>
<div class="hints" data-apply="prependContents">
<div class="graphie" id="circle">
initCircle( R );
drawDiameter( R );
</div>
<div>
<p>First, find the radius:</p>
<p><code>
\begin{align}
r &amp;= \dfrac d2 \\
r &amp;= \dfrac{\color{<var>D_COLOR</var>}{<var>2 * R</var>}}{2} \\
r &amp;= \color{<var>R_COLOR</var>}{<var>R</var>}
\end{align}
</code></p>
</div>
</div>
</div>
<div id="circle-c-to-K">
<div class="vars">
<var id="R">randRange(1, 8)</var>
</div>
<div class="question">
<p>Suppose the circumference of a circle is <code>\color{<var>C_COLOR</var>}{<var>2 * R</var>\pi}</code>. What is its area?</p>
</div>
<div class="solution" data-forms="integer, proper, improper, mixed, decimal, pi"><var>PI * R * R</var></div>
<div class="hints" data-apply="prependContents">
<div class="graphie" id="circle">
initCircle( R );
drawCircumference( R );
</div>
<div>
<p>First, find the radius:</p>
<p><code>
\begin{align}
r &amp;= \dfrac{c}{2\pi} \\
r &amp;= \dfrac{\color{<var>C_COLOR</var>}{<var>2 * R</var>\pi}}{2} \\
r &amp;= \color{<var>R_COLOR</var>}{<var>R</var>}
\end{align}
</code></p>
</div>
</div>
</div>
</div>
<div class="hints">
<div>
<p>The equation for the area of a circle is:</p>
<p><code>K = \pi r^2</code></p>
</div>
<p><code>K = \pi \cdot \color{<var>R_COLOR</var>}{<var>R</var>}^2</code></p>
<div>
<p><code>K = \color{<var>K_COLOR</var>}{<var>R * R</var>\pi}</code></p>
<div class="graphie" data-update="circle">
drawArea( R );
</div>
</div>
</div>
</div>
</body>
</html>