RWM_foil_activity

foil.html

<div class="standoutbox standoutbox-sm text-center">
    <!--  Original: https://www.onemathematicalcat.org/algebra_book/online_problems/foil_1x.htm (2021) -->
    <!-- Modified: 2021 John Azinheira, Saylor Academy -->
    <!--  the &nbsp; are needed to give give a little space when you jump to the exercises -->
    <div class="card-body">
            <h4 class="card-title">Practice Questions</h4>
            <br>
        <p>
            Answers must be written in the most conventional way:<br> $$x^{2}$$ term first, $$x$$ term next, constant term last.<br>
            <br> For example, type 'x^2' for $$x^2$$.<br>
        </p>

        <form name="theform" id="theform" _lpchecked="1" class="card-body">

            <!-- initial content is in variable "clickOnNewProblem" in "auxiliary.js";
                 loaded at beginning of JavaScript section below -->

            <div id="newProbWrapper" class="card-body mx-auto py-3">

                <div id="clickOnNewProb">
                </div>

                <div id="newProbButtonDiv" class="pb-3">
                    <input type="button" id="newProbButton" name="newProbButton" class="btn btn-primary" value="New Problem" onclick="newprobs();">
                </div>

                <div id="newProbDivInst">
                    <!-- if none, set display: none; -->
                    Simplify the equation below:
                </div>

                <!-- initial content is in variable "probInstructionsTypeInAns" in "auxiliary.js";
                     loaded at beginning of JavaScript section below -->
                <div id="newProbDiv" class="card pt-3" style="min-height: 80px;">
                </div>

            </div>


            <!-- initial content is in variable "typeInAnsInstructions" in "auxiliary.js";
                 loaded at beginning of JavaScript section below -->
            <div id="typeAnsWrapper" class="pb-3">
                <div id="typeAnsDivInst">
                </div>

                <div id="typeAnsDiv">
                    <!--<input type="text" id="ansInput" name="ansInput" onkeydown="if ((event.keyCode!==9)&&(event.keyCode!==13))  { ; } else { document.theform.chkAnsButton.focus(); return false; }">-->
                    <input type="text" id="ansInput" name="ansInput">
                </div>
            </div>


            <div id="chkAnsButtonDiv" class="py-1">
                <input type="button" id="chkAnsButton" name="chkAnsButton" class="btn btn-primary" value="Check" onclick="check();">
            </div>

            <div id="chkAnsInputDiv">
                <!--<input type="text" id="chkAnsInput" name="chkAnsInput">-->
                <div id="chkAnsInput" name="chkAnsInput" class="my-1"></div>
            </div>

        </form>
    </div>
</div>

        <!-- SUMMARY OF ASSESSMENT ITEMS
        SKILL, SKILL TIMED: Simplify expressions like (x-2)(x+3)
        -->


        <script type="text/javascript">
            // insert before each math entry in WORKSHEET only (NOT online web exercise)
            var preview = "";
            var clickOnNewProblem = "";
            var probInstructionsTypeInAns = "";
            var typeInAnsInstructions = "";
            // All form instructions are written here
            document.getElementById('clickOnNewProb').innerHTML = clickOnNewProblem;
            document.getElementById('newProbDiv').innerHTML = probInstructionsTypeInAns;
            document.getElementById('typeAnsDivInst').innerHTML = typeInAnsInstructions;

            var endstring = "";


            // initialize global variables
            var numcorrect = 0;
            var begin = new Date();
            var totalnum = 0;
            var timerstarted = 0;
            var i = 0;
            var gi = 0;
            var start = 0;
            var beginflag = 0; // initialize flag
            var answer = 0;
            var correct = 0;

            // start with a problem generated on page load
            newprobs();

            function rand(a, b) {
                // randomly selects an integer between integers  a  and  b
                var c = Math.floor((b + 1 - a) * Math.random() + a);
                return c;
            }

            function randn(a, b) {
                // randomly selects a NONZERO integer between integers  a  and  b
                // returns the nonzero integer
                var c;
                do {
                    c = Math.floor((b + 1 - a) * Math.random() + a);
                }
                while (c == 0);
                return c;
            }


            function operation(n) {
                // creates an expression of form (x+k1)(x+k2) where  k1 and k2 are nonzero, and between  -n  and  n
                var k1, k2, exp, mcf, lcf, ans;
                // ansstrnospaces is a global variable
                k1 = randn(-n, n);
                k2 = randn(-n, n);
                exp = "(x";
                if (k1 < 0) {
                    exp = exp + " - " + Math.abs(k1);
                } else {
                    exp = exp + " + " + k1;
                }
                exp = exp + ")(x";
                if (k2 < 0) {
                    exp = exp + " - " + Math.abs(k2);
                } else {
                    exp = exp + " + " + k2;
                }
                exp = exp + ")";
                // compute answer
                mcf = k1 + k2;
                lcf = k1 * k2;
                ans = "x^2";
                if (mcf == 1) {
                    ans = ans + " + " + "x";
                } else if (mcf == -1) {
                    ans = ans + " - " + "x";
                } else if (mcf < 0) {
                    ans = ans + " - " + Math.abs(mcf) + "x";
                } else if (mcf > 0) {
                    ans = ans + " + " + mcf + "x";
                }
                // if mcf==0, there is no change yet; no middle term!
                if (lcf < 0) {
                    ans = ans + " - " + Math.abs(lcf);
                } else {
                    ans = ans + " + " + lcf;
                }
                ansstrnospaces = ans.replace(/\s+/g, "");
                exp = preview + "$" + "$" + exp + "$" + "$";
                return exp;
            }


            function newprobs() {
                var string, x1, correct, chscoeff, chsnumt, matrix;
                totalnum++;
                gi = 0; // set a global variable that is incremented each time "check" is clicked
                string = operation(10);
                document.getElementById('ansInput').value = ""; // clear the answer input field
                document.getElementById('chkAnsInput').innerHTML = ""; // clear the check answer field
                document.getElementById('newProbDiv').innerHTML = string; // write new problem
                MathJax.Hub.Typeset('newProbDiv'); // process math
                i = 0;
                document.getElementById('ansInput').focus();
            }

            function check() {
                gi++;
                if ((gi >= 2) && (i != 1)) {
                    document.getElementById('chkAnsInput').innerHTML = "Please go on to another problem.";
                    document.getElementById('newProbButton').focus(); // give focus to "new problem" button
                    return;
                }
                var x1 = document.getElementById('ansInput').value;
                // replace spaces with nothing; somehow, it gets a trailing space in reading it from the form!
                x1 = x1.replace(/\s+/g, "");
                if (x1 == ansstrnospaces) {
                    correct = 1;
                } else {
                    correct = 0;
                }
                if (correct == 1) {
                    if (i == 1) {
                        i++;
                    } // prevents 1st wrong, 2nd right, keep incrementing correct counter
                    document.getElementById('chkAnsInput').innerHTML = "Correct!";
                    numcorrect++;
                    document.getElementById('newProbButton').focus(); // give focus to "new problem" button
                } else {
                    i = i + 1;
                    if (i == 2) {
                        document.getElementById('chkAnsInput').innerHTML = "Sorry. The correct answer is " + "$" + "$" + ansstrnospaces.replace(/x\^2/g, "x^2") + "$" + "$";
                        MathJax.Hub.Typeset('chkAnsInput'); // process math
                        document.getElementById('newProbButton').focus(); // give focus to "new problem" button
                    } else {
                        document.getElementById('chkAnsInput').innerHTML = "Sorry. Please try again.";
                        document.getElementById('ansInput').select();
                    }
                }
            }


            function roundone(num) {
                var rounded = Math.round(num * 10) / 10;
                return rounded;
            }

            function createprob(n) {
                // creates an expression of form (x+k1)(x+k2) where  k1 and k2 are nonzero, and between  -n  and  n
                var k1, k2, exp, mcf, lcf, ans;
                // ansstrnospaces is a global variable
                k1 = randn(-n, n);
                k2 = randn(-n, n);
                exp = "(x";
                if (k1 < 0) {
                    exp = exp + " - " + Math.abs(k1);
                } else {
                    exp = exp + " + " + k1;
                }
                exp = exp + ")(x";
                if (k2 < 0) {
                    exp = exp + " - " + Math.abs(k2);
                } else {
                    exp = exp + " + " + k2;
                }
                exp = exp + ")";
                // compute answer
                mcf = k1 + k2;
                lcf = k1 * k2;
                ans = "x^2";
                if (mcf == 1) {
                    ans = ans + " + " + "x";
                } else if (mcf == -1) {
                    ans = ans + " - " + "x";
                } else if (mcf < 0) {
                    ans = ans + " - " + Math.abs(mcf) + "x";
                } else if (mcf > 0) {
                    ans = ans + " + " + mcf + "x";
                }
                // if mcf==0, there is no change yet; no middle term!
                if (lcf < 0) {
                    ans = ans + " - " + Math.abs(lcf);
                } else {
                    ans = ans + " + " + lcf;
                }
                ansstrnospaces = ans.replace(/\s+/g, "");
                exp = preview + "$" + "$" + exp + "$" + "$";
                ansstrnospaces = preview + "$" + "$" + ansstrnospaces + "$" + "$";
                answerm[k] = ansstrnospaces;
                k = k + 1;
                return exp;
            }

        </script>