// Numbas version: exam_results_page_options
{"name": "Update a non-interactive HTML tag based on a value from a JSXGraph diagram", "extensions": ["jsxgraph"], "custom_part_types": [], "resources": [], "navigation": {"allowregen": true, "showfrontpage": false, "preventleave": false, "typeendtoleave": false}, "question_groups": [{"pickingStrategy": "all-ordered", "questions": [{"variables": {"b": {"name": "b", "description": "", "definition": "random(-3..3)", "templateType": "anything", "group": "Ungrouped variables"}, "a": {"name": "a", "description": "", "definition": "random(-3..3)", "templateType": "anything", "group": "Ungrouped variables"}}, "type": "question", "statement": "", "name": "Update a non-interactive HTML tag based on a value from a JSXGraph diagram", "metadata": {"notes": "", "licence": "Creative Commons Attribution 4.0 International", "description": ""}, "variablesTest": {"maxRuns": 100, "condition": ""}, "parts": [{"scripts": {}, "type": "gapfill", "showCorrectAnswer": true, "gaps": [{"minValue": "a-0.1", "showPrecisionHint": false, "allowFractions": false, "scripts": {}, "showCorrectAnswer": true, "type": "numberentry", "correctAnswerFraction": false, "maxValue": "a+0.1", "marks": 1}, {"minValue": "b-0.1", "showPrecisionHint": false, "allowFractions": false, "scripts": {}, "showCorrectAnswer": true, "type": "numberentry", "correctAnswerFraction": false, "maxValue": "b+0.1", "marks": 1}], "prompt": "<p><em>This part demonstrates a binding between the properties of an element in the graph and values entered in the answer boxes.</em></p>\n<p>Place the dot at $(\\var{a},\\var{b})$. You can either drag the dot or enter coordinates in the box.</p>\n<p>{dragpoint()}</p>\n<p>X: [[0]], Y: [[1]]</p>\n<p><em>The following value is calculated based on the distance of the point from the origin. There's an HTML span tag with id \"distance\" after the colon.</em></p>\n<p>Distance from origin: <span id=\"distance\"></span></p>", "marks": 0}], "showQuestionGroupNames": false, "functions": {"dragpoint": {"type": "html", "definition": "// set up the board\nvar div = Numbas.extensions.jsxgraph.makeBoard('400px','400px',{boundingBox:[-10,10,10,-10],grid:false});\nvar board = div.board;\n\n// this function sets the text of the tag with id \"distance\"\n// it's called whenever the point is dragged or when one of the gaps is changed.\nfunction showDistance(x,y) {\n  var len = Math.sqrt(x*x+y*y);\n  len = Numbas.math.niceNumber(Numbas.math.precround(len,2));\n  $('#distance').text(len);\n}\n\nvar x = Numbas.jme.unwrapValue(scope.variables.a);\nvar y = Numbas.jme.unwrapValue(scope.variables.b);\n\nvar a = board.create('point',[x,y],'$A$');\na.on('drag',function(){\n  var x = Numbas.math.niceNumber(a.X());\n  var y = Numbas.math.niceNumber(a.Y());\n  Numbas.exam.currentQuestion.parts[0].gaps[0].display.studentAnswer(a.X());\n  Numbas.exam.currentQuestion.parts[0].gaps[1].display.studentAnswer(y);  \n  showDistance(x,y);\n});\n\nquestion.signals.on('HTMLAttached',function(e) {\n  ko.computed(function(){ \nvar x = parseFloat(question.parts[0].gaps[0].display.studentAnswer());\nvar y = parseFloat(question.parts[0].gaps[1].display.studentAnswer());\nif(!(isNaN(x) || isNaN(y)) && board.mode!=board.BOARD_MODE_DRAG) {\n  showDistance(x,y);\n  a.moveTo([x,y],100);\n}\n  });\n  a.triggerEventHandlers('drag');\n});\n\nreturn div;\n\n\n", "language": "javascript", "parameters": []}}, "tags": ["demo"], "variable_groups": [], "rulesets": {}, "ungrouped_variables": ["a", "b"], "preamble": {"css": "", "js": ""}, "advice": "", "question_groups": [{"name": "", "questions": [], "pickQuestions": 0, "pickingStrategy": "all-ordered"}], "contributors": [{"name": "Christian Lawson-Perfect", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/7/"}]}]}], "contributors": [{"name": "Christian Lawson-Perfect", "profile_url": "https://numbas.mathcentre.ac.uk/accounts/profile/7/"}]}