// Numbas version: exam_results_page_options
{"name": "General graph drawing Annimation example ", "extensions": ["jsxgraph"], "custom_part_types": [], "resources": [], "navigation": {"allowregen": true, "showfrontpage": false, "preventleave": false, "typeendtoleave": false}, "question_groups": [{"pickingStrategy": "all-ordered", "questions": [{"functions": {"eqnline": {"definition": "// This function creates the board and sets it up, then returns an\n// HTML div tag containing the board.\n\n//Put in your values of x here\n\nvar x_min = -2;\nvar x_max = 2;\nvar y_min = -2;\nvar y_max = 2;\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.\n\nvar div = Numbas.extensions.jsxgraph.makeBoard('600px','600px',\n {boundingBox: [x_min,y_max,x_max,y_min],                                           \n axis: false,\n showNavigation: true,\n grid: true\n});\n\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// create the x-axis.\nvar xaxis = board.create('line',[[0,0],[1,0]], { strokeColor: 'black', fixed: true});\nvar xticks = board.create('ticks',[xaxis,2],{\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,2],{\ndrawLabels: true,\nlabel: {offset: [-20, 0]},\nminorTicks: 0\n});\n\nvar p = board.create('point',[0,1],{face:'o', size:5, strokeColor:'red', fillOpacity:0.3, strokeOpacity: 0.3});\nboard.create('arrow',[[0,0],p],{strokeWidth:5, strokeOpacity:0.7, strokeColor:'blue'});\nvar i = -1;\n//setInterval(function(){p.moveTo([Math.sin(i*Math.PI*2/12),Math.cos(i*Math.PI*2/12)],800); i++; },1000);\nsetInterval(function(){p.moveTo([Math.sin(i*Math.PI*2/12),Math.cos(i*Math.PI*2/12)],800); i++; },1000);\n\n // PUT YOUR FUNCTION HERE\n\n//board.create('functiongraph',[function(x){ return Math.exp(x);},x_min,x_max]);\n//board.create('functiongraph',[function(x){ return Math.log(x);},x_min,x_max]);\n//board.create('functiongraph',[function(x){ return (x);},x_min,x_max]);\n\n\n//board.create('functiongraph',[function(x){ return (x-a)*(x-b);},-8,8]);\n//board.create('functiongraph',[function(x){ return (x-a)*(x-b)+v;},-8,8],{ strokeColor: 'red'});\n\n//board.create('functiongraph',[function(x){ return x*x;},-8,8]);\n//board.create('functiongraph',[function(x){ return x*x+v;},-8,8],{ strokeColor: 'red'});\n//board.create('functiongraph',[function(x){ return x*x-(v+1);},-8,8],{ strokeColor: 'black'});\n\n\n//board.create('functiongraph',[function(x){ return x*x;},-8,8]);\n//board.create('functiongraph',[function(x){ return (x-v)*(x-v);},-8,8],{ strokeColor: 'red'});\n//board.create('functiongraph',[function(x){ return (x+v+1)*(x+v+1);},-8,8],{ strokeColor: 'black'});\n\n//board.create('functiongraph',[function(x){ return x*x;},-8,8]);\n//board.create('functiongraph',[function(x){ return v*(x)*(x);},-8,8],{ strokeColor: 'red'});\n//board.create('functiongraph',[function(x){ return (1/v)*(x)*(x);},-8,8],{ strokeColor: 'black'});\n\n//board.create('functiongraph',[function(x){ return (x)*(x)+v;},-8,8]);\n//board.create('functiongraph',[function(x){ return -((x)*(x)+v);},-8,8],{ strokeColor: 'red'});\n//board.create('functiongraph',[function(x){ return -(x)*(x);},-8,8],{ strokeColor: 'black'});\n\n// sin (x) in degrees\n//board.create('functiongraph',[function(x){ return Math.sin(x*(Math.PI/180));},-360,360]);\n//board.create('functiongraph',[function(x){ return Math.sin(x*(Math.PI/180))+v;},-360,360],{ strokeColor: 'red'});\n//board.create('functiongraph',[function(x){ return Math.sin(x*(Math.PI/180))-(v+1);},-360,360],{ strokeColor: 'black'});\n//Change axis range from -360 tp +360  y from -8 to +8 \n\n\n\n\nreturn div;", "type": "html", "language": "javascript", "parameters": [["a", "number"], ["b", "number"], ["x2", "number"], ["y2", "number"], ["v", "number"]]}}, "ungrouped_variables": ["a", "x2", "b", "y2", "c", "v"], "name": "General graph drawing Annimation example ", "tags": [], "preamble": {"css": "", "js": ""}, "advice": "<p>We know that the graph crosses the $x$-axis at both $(\\var{a},0)$ and $(\\var{b},0)$. Since this is a quadratic, we know our equations has two roots, and by the previous observation, they are at $\\var{a}$ and $\\var{b}$. Hence we can write our equation as $\\simplify{y=(x-{a})(x-{b})}$ which simplifies to $\\simplify{y=x^2-({a}+{b})x+({a}*{b})}$.</p>\n<p></p>\n<p>To find the coefficients of the turning point of the quadratic, we&nbsp;know the x-coordinate of the turning point will correspond to the solution to $dy/dx=0$. So we get $\\simplify{2x-({a}+{b})}=0$ hence $\\simplify{x=({a}+{b})/2}$. We substitute this value of x back into the equation of the quadratic to find the corresponding y-coordinate.</p>", "rulesets": {}, "parts": [{"prompt": "<p>Write the equation of the line red line.</p>\n<p>$g(x)=\\;$[[0]]</p>", "variableReplacements": [], "variableReplacementStrategy": "originalfirst", "gaps": [{"vsetrangepoints": 5, "expectedvariablenames": [], "checkingaccuracy": 0.001, "vsetrange": [0, 1], "showpreview": true, "variableReplacements": [], "variableReplacementStrategy": "originalfirst", "showCorrectAnswer": true, "answersimplification": "all", "scripts": {}, "answer": "-(x^2+{v})", "marks": 1, "checkvariablenames": false, "checkingtype": "absdiff", "type": "jme"}], "showCorrectAnswer": true, "scripts": {}, "marks": 0, "type": "gapfill"}], "extensions": ["jsxgraph"], "statement": "<p>{eqnline(a,b,x2,y2,v)}</p>\n<p>The Blue graph shows a&nbsp;graph&nbsp;of a quadratic equation,&nbsp;$f(x)=e^x$</p>\n<p>The Blue graph has been transformed onto the red graph $g(x)$, type in the new function definition:</p>\n<p>e.g &nbsp; $g(x)=A*f(B*x\\pm C)$</p>\n<p>$\\simplify g(x)= -(x^2+\\var{v})$ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>\n<p>$g(x)=-f(x)$ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>", "variable_groups": [], "variablesTest": {"maxRuns": 100, "condition": ""}, "variables": {"a": {"definition": "random(-4..4 except 0)", "templateType": "anything", "group": "Ungrouped variables", "name": "a", "description": ""}, "c": {"definition": "a*b", "templateType": "anything", "group": "Ungrouped variables", "name": "c", "description": ""}, "b": {"definition": "random(-5..5 except [0,a,-a])", "templateType": "anything", "group": "Ungrouped variables", "name": "b", "description": ""}, "v": {"definition": "random(2..4)", "templateType": "anything", "group": "Ungrouped variables", "name": "v", "description": ""}, "x2": {"definition": "random(-3..3 except -1..1)", "templateType": "anything", "group": "Ungrouped variables", "name": "x2", "description": ""}, "y2": {"definition": "x2*a+b", "templateType": "anything", "group": "Ungrouped variables", "name": "y2", "description": ""}}, "metadata": {"description": "<p>Given th original formula the student enters the transformed formula</p>", "licence": "Creative Commons Attribution 4.0 International"}, "type": "question", "showQuestionGroupNames": false, "question_groups": [{"name": "", "pickingStrategy": "all-ordered", "pickQuestions": 0, "questions": []}], "contributors": [{"name": "steve kilgallon", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/268/"}]}]}], "contributors": [{"name": "steve kilgallon", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/268/"}]}