# Khan/khan-exercises

Add exercise "Views of a function"

Summary:
Add three problem types of converting functions between differnt forms:
graph to table
table to graph
equation to table

Test Plan: I tested in Chrome dev, but nothing fancy, so it should work

Reviewers: eater, mark, omar

Reviewed By: mark

Differential Revision: http://phabricator.khanacademy.org/D477
1 parent 4079c63 commit b7691c486316a5f44beddd131906459a990f0bf3 xymostech committed Aug 7, 2012
Showing with 515 additions and 0 deletions.
1. +515 −0 exercises/views_of_a_function.html
515 exercises/views_of_a_function.html
 @@ -0,0 +1,515 @@ + + + + + Views of a function + + + + + +
+
+ randRangeNonZero(-3, 3) + randRangeNonZero(-3, 3) + randRangeNonZero(-3, 3) + function(a) { + return (a === 1) ? "" : (a === -1) ? "-" : a; + } + [SIGNIFY(A), SIGNIFY(B), SIGNIFY(C)] + randFromArray([ + [function(x) { + return B * x + C; + }, BSHOW + " x + " + C], + [function(x) { + return B / 2 * x * x + A * x + C; + }, ((B === 2) ? "" : (B === -2) ? "-" : (B / 2)) + + " x^2 + " + ASHOW + " x + " + C], + [function(x) { + return B * sin(C * x / Math.PI) + A; + }, BSHOW + " \\sin\\left(" + CSHOW + " x / \\pi\\right) + " + A], + [function(x) { + return B * pow(Math.E, C * x / 3) + A; + }, BSHOW + "e^{" + + ((abs(C) === 3) ? SIGNIFY(C/3) + "x" : CSHOW + " x / 3") + + "} + " + A] + ]) + (function() { + var xs = chooseXValues(FUNC, 1); + if (xs.length >= 5) { + return sortNumbers(shuffle(xs, 5)); + } else { + xs = chooseXValues(FUNC, 2); + return sortNumbers(shuffle(xs, 5)); + } + })() +
+
+
+
+ 0.5 +
+

+ Create a table of values for the function in the graph below. + Use at least 5 different points. Enter the values in the table + as decimals. +

+
+
+ graphInit({ + range: 10, + scale: 20, + tickStep: 1, + labelStep: 1, + unityLabels: false, + labelFormat: function(s) { + return "\\small{" + s + "}"; + }, + axisArrows: "<->" + }); + + plot(FUNC, [-10, 10], { stroke: BLUE }); +
+
+
+
+ Enter your data in the table below. + +
xy
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ (function(){ + var guess = []; + $(".ttable tr").each(function() { + var input = []; +$(this).children().each(function() { + input.push($(this).children().val()); + }); + guess.push(input); + }); + return guess; + })() + + + var attempted = 0; + var correct = 0; + var xs = []; + + for (var i = 0; i < 8; ++i) { + if ($.trim(guess[i][0]) !== "" && + $.trim(guess[i][1]) !== "") { + attempted += 1; + + var x = parseFloat(guess[i][0]), + y = parseFloat(guess[i][1]); + + if (abs(FUNC(x) - y) < CORRECTOFFSET) { + correct += 1; + xs.push(x); + } + } + } + + if (attempted < 5) { + return "You must enter 5 or more points"; + } + + xs = KhanUtil.sortNumbers(xs); + var different = 1; + + for (var i = 0; i < correct - 1; ++i) { + if (xs[i + 1] - xs[i] >= 0.5) { + different += 1; + } + } + + return different === attempted; + + + + + You can look at function in many different ways, including a + graph and a table. Here, we have a function modeled in a + graph, and we want to store some information about it at a + couple points by modeling it as a table. + To represent it as a table, take any five points on the + graph, and list them in the table. + For example, we can look at the point with an + x-value of + EXAMPLES[0]. + + The y-value at this point is + round(2 * FUNC(EXAMPLES[0])) / 2, + which we find from the graph. + + line([EXAMPLES[0], -11], [EXAMPLES[0], 11], + { strokeWidth: 1, stroke: ORANGE }); + circle([EXAMPLES[0], FUNC(EXAMPLES[0])], 0.2, + { stroke: ORANGE, fill: ORANGE }); + + + + To record this in our table, put + EXAMPLES[0] in the x + column, and + round(2 * FUNC(EXAMPLES[0])) / 2 + in the y column. + + + We can do this with 4 other x-values, such as + EXAMPLES[1], + EXAMPLES[2], + EXAMPLES[3], + and EXAMPLES[4]. + + + We can find the y-values at these points + by finding them on the graph as well. + + for (var i = 1; i < 5; ++i) { + line([EXAMPLES[i], -11], [EXAMPLES[i], 11], + { strokeWidth: 1, stroke: ORANGE }); + circle([EXAMPLES[i], FUNC(EXAMPLES[i])], 0.2, + { stroke: ORANGE, fill: ORANGE }); + } + + + + From this, five points on the graph are: + + + (x, round(FUNC(x) * 2) / 2) + + + + + + + + Create a graph for the function that is modeled + below by plotting the points on the graph. + + + + + x + + y + + x+"\\hphantom{.0}" + + + roundToNearest(0.5, FUNC(x)).toFixed(1) + .replace(/\.0$/, "\\hphantom{.0}") + +
+ + + + + + + + +
+ graphInit({ + range: 10, + scale: 20, + tickStep: 1, + labelStep: 1, + unityLabels: false, + labelFormat: function(s) { + return "\\small{" + s + "}"; + }, + axisArrows: "<->" + }); + + addMouseLayer(); + + graph.points = []; + + var drawn = false; + + graph.graphFunc = function() { + if (!drawn) { + drawn = true; + var func = plot(FUNC, [-10, 10], + { stroke: ORANGE, opacity: 0.0 }); + func.animate({ opacity: 1.0 }, 800); + } + + _.invoke(graph.points, "toFront"); + }; + + graph.checkAnswer = function() { + var used = [false, false, false, false, false]; + + _.each(EXAMPLES, function(x) { + var y = roundToNearest(0.5, FUNC(x)); + var done = false; + _.each(graph.points, function(pt, i) { + if (!done) { + var coord = pt.coord; + if (coord[0] === x && + coord[1] === y) { + used[i] = true; + done = true; + } + } + }); + }); + + return _.all(used, _.identity); + }; + + graph.moved = false; + + graph.checkPoints = function() { + if (graph.checkAnswer()) { + graph.graphFunc(); + } + + graph.moved = true; + + return true; + }; + + for (var i = 0; i < 5; ++i) { + graph.points.push(addMovablePoint({ + coord: [2 * i - 4, 0], + snapX: 0.5, + snapY: 0.5, + onMoveEnd: graph.checkPoints + })); + } +
+ + +
+
+ Plot the points given in the table on the graph, + then check your answer. +
+
+ [ + graph.moved, + graph.checkAnswer(), + _.pluck(graph.points, "coord") + ] +
+
+ console.log(guess); + if (!guess[0]) { + return ""; + } else { + return guess[1]; + } +
+
+ _.each(graph.points, function(pt, i) { + pt.setCoord(guess[2][i]); + }); +
+
+
+

We can look at a function in many different ways, including + a table and a graph. Here, we have information about a + function at a few points, and we are trying to gain a more + general view of the function by plotting those points in a + graph.

+

+ To represent it as a graph, take all the points listed in + the table, and plot them on the graph.

+

For example, let's look at the point + + (EXAMPLES[0], + roundToNearest(0.5, FUNC(EXAMPLES[0]))) + . +

+
+

We need to move one of the points to this position to + represent plotting it on the graph.

+
+ var endpt = [EXAMPLES[0], + roundToNearest(0.5, FUNC(EXAMPLES[0]))]; + + line([-4, 0], endpt, { arrows: "->" }); + graph.points[0].moveTo(endpt[0], endpt[1]); + + graph.points[0].toFront(); +
+
+
+

Now, plot the remaining four points by placing the + remaining points on the given 'X's.

+
+ for (var i = 1; i < 5; ++i) { + var x = EXAMPLES[i]; + var y = roundToNearest(0.5, FUNC(x)); + + line([x - 0.5, y - 0.5], [x + 0.5, y + 0.5], { + stroke: PINK + }); + line([x + 0.5, y - 0.5], [x - 0.5, y + 0.5], { + stroke: PINK + }); + + _.invoke(graph.points, "toFront"); + } +
+
+
+ +
+
+ randFromArray([ + [function(x) { + return B * x + C; + }, BSHOW + " x + " + C], + [function(x) { + return B / 2 * x * x + A * x + C; + }, ((B === 2) ? "" : (B === -2) ? "-" : (B / 2)) + + " x^2 + " + ASHOW + " x + " + C] + ]) + (function() { + var xs = chooseXValues(FUNC, 1); + if (xs.length >= 5) { + return sortNumbers(shuffle(xs, 5)); + } else { + xs = chooseXValues(FUNC, 2); + return sortNumbers(shuffle(xs, 5)); + } + })() + 0.01 +
+

+ Create a table with at least five different points in it + created from the function. Enter the values in the table as + decimals. +

+

FUNCSHOW

+
+

You can look at a function in many different ways, + including an equation and a table. We have an equation, + and in order to see more clearly how the function acts at + few points, we are going to record information about it in + a table.

+

To represent it as a table, pick some x values + to plug into the equation, and record that x + and the result of plugging it into the equation + in the table.

+

For example, try plugging in + EXAMPLES[0] to the equation.

+

+ The result of f(EXAMPLES[0]) is + roundToNearest(0.1, FUNC(EXAMPLES[0])). + Record this in the table by putting + EXAMPLES[0] in the x + column, and + roundToNearest(0.1, FUNC(EXAMPLES[0])) + in the cooresponding y column. +

+

+ Now, choose four more x values to plug into + the equation. Let's try the numbers + EXAMPLES[1], + EXAMPLES[2], + EXAMPLES[3], + and EXAMPLES[4]. +

+
+

By plugging into the equation, we get:

+

+ f(x) = + roundToNearest(0.1, FUNC(x)) +

+
+
+
+ + + +