exercises/herons_formula.html

<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Heron's formula</title>
    <script src="../khan-exercise.js"></script>
</head>
<body>
    <div class="exercise">
        <div class="vars">
        </div>

        <div class="problems">
            <div id="simple">
                <div class="vars">
                    <var id="ANGLES">randomTriangleAngles.triangle()</var>
                    <var id="SIDES"></var>
                    <var id="S"></var>
                    <var id="ANS"></var>
                    <var id="AREA">randRange( 3, 7 ) + random()</var>
                    <var id="AREA_SHOW">AREA * AREA</var>
                </div>
                <div class="problem">
                    What is the area of this triangle? ( Round to two decimal places )
                </div>
                <div class="question">
                    <div class="graphie">
                        init({
                            range: [ [-1, 12 ], [ -7, 2.5 ] ]
                        })
                        var trA = new Triangle( [ 3, -3 ], ANGLES ,AREA, {} );
                        trA.boxOut( [ [ [ -10,  2.3 ], [ 10, 2.3 ] ] ] , [ 0, -0.7 ] );
                        trA.boxOut( [ [ [  -1,  -10 ], [ -1, 10 ] ] ] , [ 0.7, 0 ] );
                        trA.boxOut( [ [ [  11.5,  -10 ], [ 11.5, 10 ] ] ] , [ -0.7, 0 ] );
                        trA.draw();
                        trA.labels = { "sides" : trA.niceSideLengths };
                        trA.drawLabels();
                        SIDES = trA.niceSideLengths;
                        S = ( ( SIDES[ 0 ] + SIDES[ 1 ] + SIDES[ 2 ] ) / 2 ).toFixed( 2 );
                        ANS = sqrt(S *( S -SIDES[ 0 ] ) * ( S - SIDES[ 1 ] ) * ( S - SIDES[ 2 ] ) ).toFixed( 2 );
                        $( "#ans" ).html( ANS ) ;
                    </div>
                </div>
                <div class="solution"><div id="ans"></div></div>
                <div class="hints">
                    <p>We know all sides of this triangle, so we can use Heron's formula to calculate the area.</p>
                    <p>Heron's formula states that the area of a triangle <code>A=\sqrt{s(s-a)(s-b)(s-c)}</code></p>
                    <p><code>s = \dfrac{ a + b + c }{ 2 }</code></p>
                    <p><code>s = \dfrac{ <var>SIDES[ 0 ]</var> + <var>SIDES[ 1 ]</var> + <var>SIDES[ 2 ]</var> }{ 2 }</code></p>
                    <p><code>s = \dfrac{ <var>( SIDES[ 0 ] + SIDES[ 1 ] + SIDES[ 2 ] ).toFixed( 1 )</var> }{ 2 }</code></p>
                    <p><code>s =  <var>S</var></code></p>
                    <p><code>A = \sqrt{ <var>S</var> \cdot ( <var>S</var> - <var>SIDES[ 0 ]</var> )  \cdot ( <var>S</var> - <var>SIDES[ 1 ]</var> ) \cdot ( <var>S</var> - <var>SIDES[ 2 ]</var> ) }</code></p>
                    <p><code>A = \sqrt{ <var>S</var> \cdot  <var>( S - SIDES[ 0 ] ).toFixed( 2 )</var>   \cdot <var>( S - SIDES[ 1 ] ).toFixed( 2 )</var> \cdot <var>( S - SIDES[ 2 ] ).toFixed( 2 )</var>  }</code></p>
                     <p><code>A = <var>ANS</var></code></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>