// Numbas version: exam_results_page_options {"name": "JSXGraph diagram", "extensions": ["jsxgraph"], "custom_part_types": [], "resources": [], "navigation": {"allowregen": true, "showfrontpage": false, "preventleave": false}, "question_groups": [{"pickingStrategy": "all-ordered", "questions": [{"parts": [{"extendBaseMarkingAlgorithm": true, "gaps": [{"checkVariableNames": false, "variableReplacementStrategy": "originalfirst", "answer": "{a}x+{b}", "showFeedbackIcon": true, "answerSimplification": "all", "scripts": {}, "failureRate": 1, "vsetRange": [0, 1], "valuegenerators": [{"name": "x", "value": ""}], "checkingAccuracy": 0.001, "useCustomName": false, "showPreview": true, "extendBaseMarkingAlgorithm": true, "type": "jme", "customName": "", "vsetRangePoints": 5, "customMarkingAlgorithm": "", "unitTests": [], "marks": 1, "showCorrectAnswer": true, "checkingType": "absdiff", "variableReplacements": []}], "sortAnswers": false, "prompt": "

Write the equation of the line in the diagram. The line described by your equation will also be drawn on the diagram.

\n

$y=\\;$[[0]]

", "type": "gapfill", "variableReplacementStrategy": "originalfirst", "customName": "", "showCorrectAnswer": true, "customMarkingAlgorithm": "", "unitTests": [], "scripts": {}, "marks": 0, "showFeedbackIcon": true, "useCustomName": false, "variableReplacements": []}], "variable_groups": [{"variables": ["xlimits", "ylimits", "xmax", "xmin", "ymin", "ymax"], "name": "Graph"}], "metadata": {"licence": "Creative Commons Attribution 4.0 International", "description": "

There are copious comments in the definition of the function eqnline about the voodoo needed to have a JSXGraph diagram interact with the input box for a part.

First Method.

\n

You are given that the line goes through $(0,\\var{b})$ and $(-1,\\var{b-a})$ and the equation of the line is of the form $y=ax+b$

\n

Hence:

\n

1) At $x=0$ we have $y=\\var{b}$, and this gives $\\var{b}=a \\times 0 +b =b$ on putting $x=0$ into $y=ax+b$.

\n

So $b=\\var{b}$.

\n

2) At $x=-1$ we have $y=\\var{b-a}$, and this gives $\\var{b-a}=a \\times (-1) +b =\\simplify[all,!collectNumbers]{-a+{b}}$ on putting $x=-1$ into $y=ax+b$.

\n

On rearranging we obtain $a=\\simplify[all,!collectNumbers]{{b}-{b-a}}=\\var{a}$.

\n

So $a=\\var{a}$.

\n

So the equation of the line is $\\simplify{y={a}*x+{b}}$.

\n

Second Method.

\n

The equation $y=ax+b$ tells us that the graph crosses the $y$-axis (when $x=0$) at $y=b$.

\n

So looking at the graph we immediately see that $b=\\var{b}$.

\n

$a$ is the gradient of the line and is given by the change from $(-1,\\var{b-a})$ to $(0,\\var{b})$:

\n

\$a=\\frac{\\text{Change in y}}{\\text{Change in x}}=\\frac{\\simplify[all,!collectNumbers]{({b-a}-{b})}}{-1-0}=\\var{a}\$

\n\n", "rulesets": {}, "ungrouped_variables": ["x2", "b", "a", "y2", "p0", "pos", "p1", "p2"], "preamble": {"js": "", "css": ""}, "functions": {"eqnline": {"type": "html", "language": "javascript", "parameters": [["a", "number"], ["b", "number"], ["x2", "number"], ["y2", "number"], ["pos", "matrix"], ["xlimits", "vector"], ["ylimits", "vector"]], "definition": "// This function creates the board and sets it up, then returns an\n// HTML div tag containing the board.\n \n// The line is described by the equation \n// y = a*x + b\n\n// This function takes as its parameters the coefficients a and b,\n// and the coordinates (x2,y2) of a point on the line.\n\n// First, make the JSXGraph board.\n// The function provided by the JSXGraph extension wraps the board up in \n// a div tag so that it's easier to embed in the page.\nvar div = Numbas.extensions.jsxgraph.makeBoard('400px','400px',\n{boundingBox: [xlimits[0],ylimits[1],xlimits[1],ylimits[0]],\n axis: false,\n showNavigation: false,\n grid: true\n});\n \n// div.board is the object created by JSXGraph, which you use to \n// manipulate elements\nvar board = div.board; \n\n// create the x-axis.\nvar xaxis = board.create('line',[[0,0],[1,0]], { strokeColor: 'black', fixed: true});\nvar xticks = board.create('ticks',[xaxis,1],{\n drawLabels: true,\n label: {offset: [-4, -10]},\n minorTicks: 0\n});\n\n// create the y-axis\nvar yaxis = board.create('line',[[0,0],[0,1]], { strokeColor: 'black', fixed: true });\nvar yticks = board.create('ticks',[yaxis,10],{\ndrawLabels: true,\nlabel: {offset: [-20, 0]},\nminorTicks: 0\n});\n\n// create the static line based on the coefficients a and b\n//var line1 = board.create('line',[[0,1],[1,2]],{fixed:true, strokeWidth: 1});\nvar line1 = board.create('line',[pos[1],[1,2]],{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});\n\n//var line2 = board.create('line',[[0,1],[1,2]],{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});\n\n//board.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);\nvar ppp = Numbas.jme.unwrapValue(scope.variables.p2);\nvar pp = Numbas.jme.unwrapValue(scope.variables.p1);\nvar p = Numbas.jme.unwrapValue(scope.variables.p0);\n\nvar f = function(x) {\n if(x<0)\n return -1;\n if(x>=1 && x <2)\n return p*x + pp;\n if(x>=2)\n return 2;\n}\n\nboard.create('functiongraph',[f,1,4]);\n\n//graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);\n\n\nboard.update();\n\n\n// mark the two given points - one on the y-axis, and one at (x2,y2)\nvar p1 = board.create('point',[0,b],{fixed:true, size:3, name: 'P_1', face: 'cross'});\nvar p2 = board.create('point',[x2,y2],{fixed:true, size:3, name: 'P_2', face: 'cross'});\n\n// Now we can do the clever stuff with the student's answer!\n// We'll add a curve to the board which is a plot of a function we provide.\n// That function will parse the student's input and evaluate it.\n\n// The variable studentExpression will store the parsed version of\n// the student's expression.\nvar studentExpression;\n\n// This function evaluates the student's expression at a given point t.\nfunction makestudentline(x){\n // Create a JME scope with the variable x set to the given value.\n var nscope = new Numbas.jme.Scope([\nNumbas.jme.builtinScope,\n{variables: {x: new Numbas.jme.types.TNum(x)}}\n ]);\n \n // If the student's input has been parsed, evaluate it\n if(studentExpression) {\ntry {\n var val = Numbas.jme.evaluate(studentExpression,nscope).value;\n return val;\n}\ncatch(e) {\n // If there was an error evaluating the student's expression\n // (wrong variables, or some other weirdness)\n // throw an error\n throw(e)\n}\n }\n // Otherwise, if the student's expression hasn't been parsed\n // (they haven't written anything, or they wrote bad syntax)\n // return 0\n else {\nreturn 0;\n }\n}\nvar studentline = board.create('functiongraph', \n [makestudentline,-13,13],\n {strokeColor:'black', strokeWidth: 3, visible: false}\n );\n\n// This is where some voodoo happens.\n// Because the HTML for the question is inserted into the page after the function eqnline\n// is called, we need to wait until the 'question-html-attached' event is fired\n// to do the interaction with the student input box.\n// So:\n\n// When the question is inserted into the page\n$('body').on('question-html-attached',function(e,question,qd) {\n \n // Create a Knockout.js observable\n ko.computed(function(){\n// Get the student's input string from part 0, gap 0.\nvar studentString = question.parts[0].gaps[0].display.studentAnswer();\n\n// Try to parse it as a JME expression\ntry {\n studentExpression = Numbas.jme.compile(studentString,scope);\n \n // If the student didn't write anything, compile returns null\n if(studentExpression === null)\nthrow(new Error('no expression'));\n \n // If everything worked, show the line and update it\n // (this calls makestudentline on a few points)\n studentline.showElement();\n studentline.updateCurve();\n}\ncatch(e) {\n // If something went wrong, hide the curve\n studentExpression = null;\n studentline.hideElement();\n}\n\nboard.update();\n });\n}); \n\nreturn div;"}}, "tags": [], "extensions": ["jsxgraph"], "variables": {"ymax": {"description": "", "group": "Graph", "templateType": "anything", "name": "ymax", "definition": "30"}, "y2": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "y2", "definition": "x2*a+b"}, "a": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "a", "definition": "random(-4..4 except 0)"}, "b": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "b", "definition": "random(-6..6 except [0,a])"}, "p1": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "p1", "definition": "2"}, "ylimits": {"description": "", "group": "Graph", "templateType": "anything", "name": "ylimits", "definition": "vector(ymin,ymax)"}, "pos": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "pos", "definition": "matrix([1,0],[1,4])"}, "ymin": {"description": "", "group": "Graph", "templateType": "anything", "name": "ymin", "definition": "-30"}, "xmax": {"description": "", "group": "Graph", "templateType": "anything", "name": "xmax", "definition": "6"}, "xlimits": {"description": "", "group": "Graph", "templateType": "anything", "name": "xlimits", "definition": "vector(xmin,xmax)"}, "p2": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "p2", "definition": "0"}, "p0": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "p0", "definition": "5"}, "x2": {"description": "", "group": "Ungrouped variables", "templateType": "anything", "name": "x2", "definition": "random(-3..3 except -1..1)"}, "xmin": {"description": "", "group": "Graph", "templateType": "anything", "name": "xmin", "definition": "-1"}}, "statement": " {eqnline(a,b,x2,y2,pos,xlimits,ylimits)} \n \n \n \n \n \n \n \n \n \n \n \n The above graph shows a line which has an equation of the form$y=ax+b$, where$a$and$b$are integers. \n You are given two points on the line,$(0,\\var{b})$and$(\\var{x2},\\var{y2})\$, as indicated on the diagram.

", "variablesTest": {"maxRuns": 100, "condition": ""}, "name": "JSXGraph diagram", "type": "question", "contributors": [{"name": "Christian Lawson-Perfect", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/7/"}, {"name": "Lars Hansson", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/774/"}]}]}], "contributors": [{"name": "Christian Lawson-Perfect", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/7/"}, {"name": "Lars Hansson", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/774/"}]}