// Numbas version: exam_results_page_options
{"name": "Ben's copy of 3 point triangle", "extensions": ["jsxgraph"], "custom_part_types": [], "resources": [], "navigation": {"allowregen": true, "showfrontpage": false, "preventleave": false, "typeendtoleave": false}, "question_groups": [{"pickingStrategy": "all-ordered", "questions": [{"variable_groups": [{"name": "Unnamed group", "variables": []}], "metadata": {"description": "<p>Draws a triangle based on 3 input points. Calculates length, area, perimeter, heights and internal angles</p>", "licence": "Creative Commons Attribution 4.0 International"}, "advice": "<p>(i) To find $f(\\var{x1})$, you start at&nbsp;$\\var{x1}$ on the $x$-axis, go up or down until you reach the blue line, and then look at the $y$-coordinate. This $y$-coordinate is the answer. &nbsp;In this question, after going up/down from $\\var{x1}$, we reach the $y$-coordinate $\\var{y1}$, so the answer is $f(\\var{x1})=\\var{y1}$.</p>\n<p>(ii) There are two options. The first option (which is not efficient) is trial-and-error: pick some random&nbsp;value of $x$ and determine $f(x)$. If $f(x) =&nbsp;\\var{y2}$, then your pick is the answer. &nbsp;If not, then try a different value of $x$, hopefully getting closer and closer each time. &nbsp; The second (and better) option is to 'work backwards' - we know what $f(x)$ should be, which means we know what the $y$-coordinate should be. &nbsp;So start at $\\var{y2}$ on the $y$-axis, go left or right until you reach the blue line, and look at the $x$-coordinate. In this question, after going left/right from $\\var{y2}$, we reach the $x$-coordinate $\\var{x2}$, so this is the answer. &nbsp;You can check this is correct: what is $f(\\var{x2})$? It is $\\var{y2}$, as we wanted!</p>\n<p>(iii) The $y$-intercept is the height at which the blue line touches the $y$-axis. &nbsp;In this question, the blue line crosses the $y$-axis at a height of $\\var{c}$, so the answer is $\\var{c}$.</p>\n<p>(iv) To calculate the gradient, you choose&nbsp;two points which lie on the line, and calculate the change in height divided by the change in $x$. &nbsp;It does not matter which two points you choose, but to make it easier, you should pick points whose coordinates are easy to read. &nbsp;In this question, two points which are on the line are $(\\var{x1},&nbsp;\\var{y1})$ and $(\\var{x2},\\var{y2})$. &nbsp;Then the change of height is $\\var{y2} -&nbsp;\\var{y1}$ and the change in $x$ is $\\var{x2} - \\var{x1}$. &nbsp;Dividing gives the answer $\\var{m}$, which is the number we want.</p>\n<p>(v) The equation of a line can be written as $y = mx + c$. &nbsp;$m$ is the gradient and $c$ is the $y$-intercept. &nbsp;But we have calculated these two quantities in the previous two questions: the $y$-intercept was $\\var{c}$ and the gradient was $\\var{m}$. Replacing $m$ and $c$ with these numbers gives the equation $y=&nbsp;\\var{m}x +&nbsp;\\var{c}$, which is the answer.</p>\n<p>(vi) This question is asking&nbsp;<strong>exactly</strong> the same thing as the question in (ii), but is phrased differently. This is because the&nbsp;definition&nbsp;of $f^{-1}$ is that it is the function which un-does what $f$ does. &nbsp;For example, we know that $f(\\var{x1})=\\var{y1}$ - therefore, automatically, $f^{-1}(\\var{y1})$ has to be $\\var{x1}$. &nbsp;Re-worded, $f$ maps $\\var{x1}$ to $\\var{y1}$, so because $f^{-1}$ un-does this, it means $f^{-1}$ maps $\\var{y1}$ back to $\\var{x1}$. &nbsp; Back to the question at hand, it asked what $f^{-1}(\\var{y2})$ is. &nbsp;By definition, this means we want to know what value of $x$ is needed to get $f(x) = \\var{y2}$, which is exactly what was asked in (ii).&nbsp;</p>", "name": "Ben's copy of 3 point triangle", "tags": [], "parts": [{"showFeedbackIcon": true, "showCorrectAnswer": true, "prompt": "<p>{plotgraph(x1,x2,y1,y2,units)}</p>\n<p>All units are in <span data-jme-visible=\"units=1\">mm</span><span data-jme-visible=\"units=2\">cm</span><span data-jme-visible=\"units=3\">m</span><span data-jme-visible=\"units=4\">km</span></p>", "variableReplacements": [], "marks": 0, "scripts": {"mark": {"order": "instead", "script": "// This functions plots two dimensioned lines \n// Max and min x and y values for the axis.\nvar x_min = 0;\nvar x_max = 50;\nvar y_min = 0;\nvar y_max = 50;\n//TODO check whether these are necessary for larger graphs\nvar offset = 1;\nvar scale = 1;\nvar scaleOffset = offset*scale;\n\n//Browser compatibility\nJXG.Options.text.display = 'internal';\n//Use MathJax for LaTeX display\nJXG.Options.text.useMathJax = true;\n\n// Make the JSXGraph board.\nvar div = Numbas.extensions.jsxgraph.makeBoard(\n  '400px',\n  '400px',\n {\n   boundingBox: [x_min,y_max,x_max,y_min],\n   axis: false,\n }\n);\n\n// div.board is the object created by JSXGraph, which you use to \n// manipulate elements\nvar board = div.board; \n\n//Draw three points\nvar A = board.create('point', [5, 5], \n  {size:0, fixed:true,\n   label:{offset: [-10,-10]}});\nvar B = board.create('point', [x1, y1],\n  {size:2, fixed:false, face:'+',\n  label:{offset: [0,10]}});\nvar C = board.create('point', [x2, y2],\n  {size:2, fixed:false, face:'+',\n  label:{offset: [10,0]}});\n\n//Draw a line between them\nvar AB = board.create('line',[A,B],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\nvar BC = board.create('line',[B,C],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\nvar AC = board.create('line',[A,C],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\n\n//Draw angle and label\nvar ABC = board.create('nonreflexangle', [A,B,C], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar ABCLabel = ABC.label.setText(function () {\n  var angle = 180.0 * ABC.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nABCLabel.setAttribute({anchorX:'middle'});\n\nvar BCA = board.create('nonreflexangle', [B,C,A], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar BCALabel = BCA.label.setText(function () {\n  var angle = 180.0 * BCA.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nBCALabel.setAttribute({anchorX:'middle'});\n\nvar CAB = board.create('nonreflexangle', [C,A,B], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar CABLabel = CAB.label.setText(function () {\n  var angle = 180.0 * CAB.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nCABLabel.setAttribute({anchorX:'middle'});\n\n//Dummy text for testing variables\ntempText = board.create('text',[25,45,\n                                function () {return 'ABC = ' +(180.0*ABC.Value()/Math.PI).toFixed(2)+ \"\\u00B0\"}]);\n\n\n//Calculate midpoint\n//TODO Check whether these are useful or not\nvar midABx = (A.X() + B.X())/2;\nvar midABy = (A.Y() + B.Y())/2;\nvar midBCx = (B.X() + C.X())/2;\nvar midBCy = (B.Y() + C.Y())/2;\n\n//Set up dimension labels to be properly aligned\ntextAB = board.create('text', \n [function () {return (A.X() + B.X())/2},\n  function () {return ((A.Y() + B.Y())/2)+scaleOffset},\n  function () {return +A.Dist(B).toFixed(1) + ' ' +units}],\n  {fontSize:15, anchorX:'middle'});\n\ntextBC = board.create('text', \n [function () {return (B.X() + C.X())/2},\n  function () {return ((B.Y() + C.Y())/2)+scaleOffset},\n  function () {return +B.Dist(C).toFixed(1) + ''}],\n  {fontSize:15, anchorX:'middle'});\n\ntextAC = board.create('text', \n [function () {return (A.X() + C.X())/2},\n  function () {return ((A.Y() + C.Y())/2)+scaleOffset},\n  function () {return +A.Dist(C).toFixed(1) + ''}],\n  {fontSize:15, anchorX:'middle'});\n\nvar tABRot = board.create('transform', \n [function () {return AB.getAngle()},                        \n  function () {return (A.X() + B.X())/2}, \n  function () {return (A.Y() + B.Y())/2}],\n  {type:'rotate'});\n\nvar tBCRot = board.create('transform', \n [function () {return BC.getAngle()},                        \n  function () {return (B.X() + C.X())/2}, \n  function () {return (B.Y() + C.Y())/2}],\n  {type:'rotate'});\n\nvar tACRot = board.create('transform', \n [function () {return AC.getAngle()},                        \n  function () {return (A.X() + C.X())/2}, \n  function () {return (A.Y() + C.Y())/2}],\n  {type:'rotate'});\n\n//Perform text rotations and update\ntABRot.bindTo(textAB);\ntBCRot.bindTo(textBC); \ntACRot.bindTo(textAC);\nboard.update();\n\nreturn div;"}}, "variableReplacementStrategy": "originalfirst", "type": "gapfill"}], "variablesTest": {"condition": "", "maxRuns": 100}, "rulesets": {}, "ungrouped_variables": ["x1", "x2", "y1", "y2", "unitList", "units"], "preamble": {"js": "", "css": ""}, "functions": {"plotgraph": {"definition": "// This functions plots two dimensioned lines \n// Max and min x and y values for the axis.\nvar x_min = 0;\nvar x_max = 50;\nvar y_min = 0;\nvar y_max = 50;\n//TODO check whether these are necessary for larger graphs\nvar offset = 1;\nvar scale = 1;\nvar scaleOffset = offset*scale;\n\n//Browser compatibility\nJXG.Options.text.display = 'internal';\n//Use MathJax for LaTeX display\nJXG.Options.text.useMathJax = true;\n\n// Make the JSXGraph board.\nvar div = Numbas.extensions.jsxgraph.makeBoard(\n  '400px',\n  '400px',\n {\n   boundingBox: [x_min,y_max,x_max,y_min],\n   axis: false,\n }\n);\n\n// div.board is the object created by JSXGraph, which you use to \n// manipulate elements\nvar board = div.board; \n\n//Draw three points\nvar A = board.create('point', [5, 5], \n  {size:0, fixed:true,\n   label:{offset: [-10,-10]}});\nvar B = board.create('point', [x1, y1],\n  {size:2, fixed:false, face:'+',\n  label:{offset: [0,10]}});\nvar C = board.create('point', [x2, y2],\n  {size:2, fixed:false, face:'+',\n  label:{offset: [10,0]}});\n\n//Draw a line between them\nvar AB = board.create('line',[A,B],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\nvar BC = board.create('line',[B,C],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\nvar AC = board.create('line',[A,C],{fixed:false, straightFirst:false, straightLast:false, strokeWidth: 1});\n\n//Draw angle and label\nvar ABC = board.create('nonreflexangle', [A,B,C], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar ABCLabel = ABC.label.setText(function () {\n  var angle = 180.0 * ABC.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nABCLabel.setAttribute({anchorX:'middle'});\n\nvar BCA = board.create('nonreflexangle', [B,C,A], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar BCALabel = BCA.label.setText(function () {\n  var angle = 180.0 * BCA.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nBCALabel.setAttribute({anchorX:'middle'});\n\nvar CAB = board.create('nonreflexangle', [C,A,B], {type:'sector', orthoType:'square', orthoSensitivity:0.4, radius:2});\nvar CABLabel = CAB.label.setText(function () {\n  var angle = 180.0 * CAB.Value() / Math.PI;\n  if ((angle > 90.4) || (angle < 89.6)) {\n     return ''+angle.toFixed(1);\n  } else {\n     return '';\n  }\n});\nCABLabel.setAttribute({anchorX:'middle'});\n\n//Dummy text for testing variables\ntempText = board.create('text',[25,45,\n                                function () {return 'ABC = ' +(180.0*ABC.Value()/Math.PI).toFixed(2)+ \"\\u00B0\"}]);\n\n\n//Calculate midpoint\n//TODO Check whether these are useful or not\nvar midABx = (A.X() + B.X())/2;\nvar midABy = (A.Y() + B.Y())/2;\nvar midBCx = (B.X() + C.X())/2;\nvar midBCy = (B.Y() + C.Y())/2;\n\n//Set up dimension labels to be properly aligned\ntextAB = board.create('text', \n [function () {return (A.X() + B.X())/2},\n  function () {return ((A.Y() + B.Y())/2)+scaleOffset},\n  function () {return +A.Dist(B).toFixed(1) + ' ' +units}],\n  {fontSize:15, anchorX:'middle'});\n\ntextBC = board.create('text', \n [function () {return (B.X() + C.X())/2},\n  function () {return ((B.Y() + C.Y())/2)+scaleOffset},\n  function () {return +B.Dist(C).toFixed(1) + ''}],\n  {fontSize:15, anchorX:'middle'});\n\ntextAC = board.create('text', \n [function () {return (A.X() + C.X())/2},\n  function () {return ((A.Y() + C.Y())/2)+scaleOffset},\n  function () {return +A.Dist(C).toFixed(1) + ''}],\n  {fontSize:15, anchorX:'middle'});\n\nvar tABRot = board.create('transform', \n [function () {return AB.getAngle()},                        \n  function () {return (A.X() + B.X())/2}, \n  function () {return (A.Y() + B.Y())/2}],\n  {type:'rotate'});\n\nvar tBCRot = board.create('transform', \n [function () {return BC.getAngle()},                        \n  function () {return (B.X() + C.X())/2}, \n  function () {return (B.Y() + C.Y())/2}],\n  {type:'rotate'});\n\nvar tACRot = board.create('transform', \n [function () {return AC.getAngle()},                        \n  function () {return (A.X() + C.X())/2}, \n  function () {return (A.Y() + C.Y())/2}],\n  {type:'rotate'});\n\n//Perform text rotations and update\ntABRot.bindTo(textAB);\ntBCRot.bindTo(textBC); \ntACRot.bindTo(textAC);\nboard.update();\n\nreturn div;", "parameters": [["x1", "number"], ["x2", "number"], ["y1", "number"], ["y2", "number"], ["units", "number"]], "type": "html", "language": "javascript"}}, "extensions": ["jsxgraph"], "variables": {"y1": {"description": "", "definition": "random(20..45)", "name": "y1", "group": "Ungrouped variables", "templateType": "anything"}, "y2": {"description": "", "definition": "random(0..45 except y1)", "name": "y2", "group": "Ungrouped variables", "templateType": "anything"}, "units": {"description": "", "definition": "random(1..4)", "name": "units", "group": "Ungrouped variables", "templateType": "anything"}, "x2": {"description": "", "definition": "random(25..45 except x1)", "name": "x2", "group": "Ungrouped variables", "templateType": "anything"}, "unitList": {"description": "<p>Units that&nbsp;are to be used for the question.</p>", "definition": "[ \"mm\", \"cm\", \"m\", \"km\" ]", "name": "unitList", "group": "Ungrouped variables", "templateType": "list of strings"}, "x1": {"description": "", "definition": "random(5..20)", "name": "x1", "group": "Ungrouped variables", "templateType": "anything"}}, "statement": "<p>Referring to the&nbsp;line below.</p>", "type": "question", "contributors": [{"name": "Ben Brawn", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/605/"}]}]}], "contributors": [{"name": "Ben Brawn", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/605/"}]}