exercises/adding_and_subtracting_fractions.html

<!DOCTYPE html>
<html data-require="math math-format">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Adding and subtracting fractions</title>
    <script src="../khan-exercise.js"></script>
</head>
<body>
    <div class="exercise">
    <div class="vars" data-ensure="D1 !== D2">
        <var id="N1">randRangeNonZero( -9, 9 )</var>
        <var id="N2">randRangeNonZero( -9, 9 )</var>
        <var id="D1">randRangeExclude( 2, 9, [ N1, -N1 ] )</var>
        <var id="D2">randRangeExclude( 2, 9, [ N2, -N2 ] )</var>
        <var id="LCM">getLCM( D1, D2 )</var>
        <var id="F1">LCM / D1</var>
        <var id="F2">LCM / D2</var>
    </div>

    <div class="problems">
        <div>
            <div class="question">
                <p><code><var>fraction( N1, D1 )</var> + <var>fraction( N2, D2 )</var> = {?}</code></p>
            </div>
            <div class="solution" data-type="rational"><var>N1 / D1 + N2 / D2</var></div>
        </div>
    </div>

    <div class="hints">
        <p>First, we need to find a common denominator. The least common multiple of <code><var>D1</var></code> and <code><var>D2</var></code> is the smallest possible common denominator.</p>
        <p><code>\lcm(<var>D1</var>, <var>D2</var>) = <var>LCM</var></code></p>
        <p>Now, we need to change both fractions to have a denominator of <code><var>LCM</var></code>.</p>
        <p><code>\begin{align*}<var>fraction( N1, D1 )</var>\cdot <var>fraction( F1, F1 )</var> &= <var>fraction( N1 * F1, LCM )</var>\\
        <var>fraction( N2, D2 )</var>\cdot <var>fraction( F2, F2 )</var> &= <var>fraction( N2 * F2, LCM )</var>\end{align*}</code></p>
        <div>
            <p>So, the problem becomes:</p>
            <p><code><var>fraction( N1 * F1, LCM )</var> + <var>fraction( N2 * F2, LCM )</var> = {?}</code></p>
        </div>
        <div>
            <p><var>N2 &gt; 0 ? "Add" : "Subtract"</var> the numerators.</p>
            <p><code><var>fraction( F1 * N1 + F2 * N2, LCM)</var></code></p>
        </div>
        <div data-if="getGCD( F1 * N1 + F2 * N2, LCM ) !== 1">
            <p>Simplify.</p>
            <p><code><var>fractionReduce( F1 * N1 + F2 * N2, LCM )</var></code></p>
        </div>
    </div>
    </div>
</body>
</html>