\n\n" } ] }, "model": { "variables": { "pages": [ { "Name": "Var Table", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "numOfCards", "Value": "20", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cardX", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "cardY", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "initX", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "initY", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "cardVal", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "cardWidth", "Value": "1", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cardHeight", "Value": "1.3", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cardColor", "Value": "\"white\"", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "highlightColor", "Value": "\"#fff176\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "font", "Value": "\"normal normal 2vw\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "taskFont", "Value": "\"normal normal 1.3vw\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "dragThreshold", "Value": "0.7", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "whichGroup", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "whichCircle", "Value": "[]", "Type": "Object", "Dimension": "numOfCards", "Comment": "null", "Domain": "public" }, { "Name": "interact", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "curTask", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "task", "Value": "[]", "Type": "Object", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "instructionStr", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "ruleStr", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "Shape Var", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "shapeLength", "Value": "3", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shapePoints", "Value": "{}", "Type": "Object", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shapeColor", "Value": "{}", "Type": "Object", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "circleCoord", "Value": "{}", "Type": "Object", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "circleLength", "Value": "1.3", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "groupSpacing", "Value": "shapeLength * 2", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "groupArr", "Value": "[]", "Type": "Object", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "lookang", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "enabledposition", "Value": "\"ENABLED_NONE\"", "Type": "String", "Dimension": "[numOfCards]", "Comment": "null", "Domain": "public" }, { "Name": "visiblity", "Value": "false", "Type": "boolean", "Dimension": "[numOfCards]", "Comment": "null", "Domain": "public" }, { "Name": "escKeyPressed", "Value": "false", "Type": "boolean", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "answerHistory", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "isFirstTry", "Value": "true", "Type": "boolean", "Dimension": "[7]", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] } ] }, "initialization": { "pages": [ { "Name": "Init Page", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "// Initialising the cards\nvar curX = -cardWidth * 9 / 2;\n\nfor(var i = 1; i <= 20; i++){\n let idx = i - 1;\n cardVal[idx] = i;\n cardX[idx] = curX;\n if(i <= 10)\n cardY[idx] = cardHeight * 2;\n else\n cardY[idx] = cardHeight;\n \n initX[idx] = cardX[idx], initY[idx] = cardY[idx];\n \n curX += cardWidth;\n if(i == 10)\n curX = -cardWidth * 9 / 2;\n \n // whichGroup identifies which group the card is in currently. If the card is not in a group, whichGroup will be null\n whichGroup[idx] = null;\n // whichCricle identifies which circle the card is in currently. If the card is not in a cricle, whichCricle will be -1.\n whichCircle[idx] = -1;\n}\n\n \n \n\n" }, { "Name": "init Shape", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "// shapePoints is to define the points that we are going to use for the 2d polygons\nvar penRadius = triRadius = shapeLength / 2;\nshapePoints = {\n \"triangle\": [\n [0, triRadius * Math.sin(Math.PI / 3), -triRadius * Math.sin(Math.PI / 3), 0],\n [triRadius, -triRadius * Math.cos(Math.PI / 3), -triRadius * Math.cos(Math.PI / 3), triRadius]\n ],\n \"square\": [\n [-shapeLength / 2, shapeLength / 2, shapeLength / 2, -shapeLength / 2, -shapeLength / 2],\n [shapeLength / 2, shapeLength / 2, -shapeLength / 2, -shapeLength / 2, shapeLength / 2]\n ],\n \"pentagon\": [\n [0, penRadius * Math.cos(Math.PI / 10), penRadius * Math.sin(Math.PI / 5), -penRadius * Math.sin(Math.PI / 5), -penRadius * Math.cos(Math.PI / 10), 0],\n [penRadius, penRadius * Math.sin(Math.PI / 10), -penRadius * Math.cos(Math.PI / 5), -penRadius * Math.cos(Math.PI / 5), penRadius * Math.sin(Math.PI / 10), penRadius]\n ]\n};\n// circleCoord defines the coordinates of the circles relative to the center\npenRadius = shapeLength * 2/3;\ntriRadius = shapeLength * 1/2;\ncircleCoord = {\n \"triangle\": [\n [-triRadius * Math.sin(Math.PI / 3), triRadius * Math.sin(Math.PI / 3), 0],\n [triRadius * Math.cos(Math.PI / 3), triRadius * Math.cos(Math.PI / 3), -triRadius]\n ],\n \"square\": [\n [-shapeLength * 3/4, 0, shapeLength * 3/4, 0],\n [0, shapeLength * 3/4, 0, -shapeLength * 3/4]\n ],\n \"pentagon\": [\n [-penRadius * Math.sin(Math.PI / 5), penRadius * Math.sin(Math.PI / 5), penRadius * Math.sin(Math.PI * 2/5), 0, -penRadius * Math.sin(Math.PI * 2/5)],\n [penRadius * Math.cos(Math.PI / 5), penRadius * Math.cos(Math.PI / 5), -penRadius * Math.cos(Math.PI * 2/5), -penRadius, -penRadius * Math.cos(Math.PI * 2/5)]\n ]\n};\n// the color of the shapes \nshapeColor = {\n \"triangle\": \"yellow\",\n \"square\": \"lightblue\",\n \"pentagon\": \"red\"\n};\n" }, { "Name": "Init Task", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "if(curTask == undefined)\n curTask = 1;\n// defining the different tasks\ntask = [\n\n [\n \"Choose any 4 cards and place them in the triangle and circles.\",\n \"The number in the triangle must be the average of the three numbers in the circles surrounding the triangle.\",\n [\"triangle\"]\n ],\n [\n \"Choose any 9 cards and place them in the triangle, square and circles.\",\n \"(i) The number in the triangle must be the average of the three numbers in the circles surrounding the triangle.
Conclusion: \" + conclusion + \"
\";\n }\n return html;\n}\n\nfunction setThinkingHtml(html) {\n if (_view && _view.solverText) {\n _view.solverText.setProperty(\"Text\", html);\n }\n}\n\nfunction clearThinkingTimeouts() {\n for (var i = 0; i < thinkingTimeouts.length; i++) {\n window.clearTimeout(thinkingTimeouts[i]);\n }\n thinkingTimeouts = [];\n}\n\nfunction stopThinkingPlayback(resetPanel) {\n if (resetPanel === undefined) {\n resetPanel = true;\n }\n clearThinkingTimeouts();\n thinkingRunning = false;\n if (thinkingEnabledSnapshot.length === enabledposition.length) {\n enabledposition = thinkingEnabledSnapshot.slice();\n }\n thinkingEnabledSnapshot = [];\n if (resetPanel) {\n setThinkingHtml(getThinkingDefaultHtml());\n }\n _update();\n}\n\nfunction getCardIndexForValue(value) {\n for (var i = 0; i < cardVal.length; i++) {\n if (cardVal[i] === value) {\n return i;\n }\n }\n return -1;\n}\n\nfunction placeCardValueInGroup(value, groupIndex, slotIndex) {\n var cardIndex = getCardIndexForValue(value);\n if (cardIndex < 0 || !groupArr[groupIndex]) {\n return false;\n }\n if (whichGroup[cardIndex] != null) {\n whichGroup[cardIndex].val[whichCircle[cardIndex]] = -1;\n }\n var targetGroup = groupArr[groupIndex];\n cardX[cardIndex] = targetGroup.xPos[slotIndex];\n cardY[cardIndex] = targetGroup.yPos[slotIndex];\n targetGroup.val[slotIndex] = cardVal[cardIndex];\n whichGroup[cardIndex] = targetGroup;\n whichCircle[cardIndex] = slotIndex;\n cardColor[cardIndex] = \"#c5e1a5\";\n return true;\n}\n\nfunction startThinkingPlayback() {\n var script = thinkingScripts[curTask];\n if (!script) {\n setThinkingHtml(getThinkingDefaultHtml());\n return;\n }\n clearThinkingTimeouts();\n thinkingRunning = true;\n thinkingEnabledSnapshot = enabledposition.slice();\n for (var i = 0; i < enabledposition.length; i++) {\n enabledposition[i] = \"ENABLED_NONE\";\n }\n var items = [];\n var delay = 0;\n setThinkingHtml(renderThinkingPanel(script.title, script.lead, items, \"\"));\n _update();\n for (var stepIndex = 0; stepIndex < script.steps.length; stepIndex++) {\n (function(step, currentDelay) {\n thinkingTimeouts.push(window.setTimeout(function() {\n if (step.move) {\n placeCardValueInGroup(step.move.value, step.move.group, step.move.slot);\n }\n items.push(step.text);\n setThinkingHtml(renderThinkingPanel(script.title, script.lead, items, \"\"));\n _update();\n }, currentDelay));\n }(script.steps[stepIndex], delay + (script.steps[stepIndex].delay || 1400)));\n delay += (script.steps[stepIndex].delay || 1400);\n }\n thinkingTimeouts.push(window.setTimeout(function() {\n thinkingRunning = false;\n if (thinkingEnabledSnapshot.length === enabledposition.length) {\n enabledposition = thinkingEnabledSnapshot.slice();\n }\n setThinkingHtml(renderThinkingPanel(script.title, script.lead, items, script.finish));\n _update();\n }, delay + 300));\n}\n\nfunction showThinkingProcess() {\n stopThinkingPlayback(false);\n _reset();\n isFirstTry[curTask - 1] = false;\n if (typeof questionAppendHistory === \"function\") {\n questionAppendHistory(\"Q\" + curTask, \"Guided thinking viewed.\");\n }\n startThinkingPlayback();\n}" }, { "Name": "question", "Active": "true", "Internal": "false", "Type": "LIBRARY_EDITOR", "Comment": "", "Code": "function onAnswerCorrect() {\n const qn = `Q${curTask}`;\n const groupInfo = groupArr.map(formatGroup);\n\n startQuestion(qn);\n addQuestionHistory(`Valid answer${isFirstTry[curTask - 1] ? \" (First try)\" : \"\"}:\\n${groupInfo.join(\"\\n\")}\\n`);\n awardQuestionMarks(isFirstTry[curTask - 1] ? 2 : 1)\n endQuestion();\n}\nfunction onAnswerInvalid() {\n const qn = `Q${curTask}`;\n const groupInfo = groupArr.map(formatGroup);\n \n questionAppendHistory(qn, `Invalid answer:\\n${groupInfo.join(\"\\n\")}\\n`);\n}\nfunction onAnswerIncorrect() {\n const qn = `Q${curTask}`;\n isFirstTry[curTask - 1] = false;\n const groupInfo = groupArr.map(formatGroup);\n \n questionAppendHistory(qn, `Incorrect answer:\\n${groupInfo.join(\"\\n\")}\\n`);\n}\n\n/** @param {number} value */\nfunction formatSlot(value) {\n return value === -1 ? \"X\" : value.toString();\n}\n\nfunction formatGroup(group) {\n const results = [\"(\"];\n for (let i = 1; i < group.val.length; i++) {\n if (i > 1) results.push(\" \");\n results.push(formatSlot(group.val[i]));\n }\n results.push(`) Center: ${formatSlot(group.val[0])} `);\n switch (group.isValid()) {\n case -1:\n // do something if group.isValid() === -1\n results.push('\ud83e\udd14');\n break;\n case 0: \n // do something if group.isValid() === 0\n results.push('\u274c');\n break;\n case 1:\n // do something if group.isValid() === 1\n results.push('\u2705');\n }\n return results.join(\"\");\n}" }, { "Name": "questionLib", "Active": "true", "Internal": "false", "Type": "LIBRARY_EXTERNAL_EDITOR", "Comment": "", "Code": "" }, { "Name": "Lib Page", "Active": "true", "Internal": "false", "Type": "LIBRARY_EDITOR", "Comment": "", "Code": "// copy into custom function\ndocument.onkeydown = function(evt) {\n evt = evt || window.event;\n var isEscape = false;\n if (\"key\" in evt) {\n isEscape = (evt.key === \"Escape\" || evt.key === \"Esc\");\n } \n else {\n isEscape = (evt.keyCode === 27);\n }\n if (isEscape) {\n //alert(\"Escape\");\n //escKeyPressed = true\n escKeyPressed = !escKeyPressed; // Toggle escKeyPressed\n }\n \n} " } ] }, "elements": { "list": [] } }, "view": { "Tree": [ { "Name": "topPanel", "Type": "Panel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "btnContainer", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "CSS", "value": "{\n \"justify-content\": \"center\",\n \"align-items\": \"flex-start\",\n \"flex-wrap\": \"wrap\",\n \"gap\": \"8px\"\n}\n" }, { "name": "Display", "value": "\"flex\"" } ], "Children": [ { "Name": "taskText2", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"left\"" }, { "name": "Text", "value": "\"Instructions: \" +instructionStr" }, { "name": "Font", "value": "taskFont" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "label", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"Select Task: \"" }, { "name": "Font", "value": "font" } ] }, { "Name": "comboBox", "Type": "ComboBox", "Properties": [ { "name": "Options", "value": "[1, 2, 3, 4, 5, 6, 7]" }, { "name": "OnChange", "value": "stopThinkingPlayback(false);\nvar selected = _view.comboBox.getProperty(\"SelectedOptions\")[0];\ncurTask = parseInt(selected);\n_reset();\n" }, { "name": "Width", "value": "\"10%\"" }, { "name": "Font", "value": "font" } ] }, { "Name": "checkTask", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"\ud83e\udd14Check\"" }, { "name": "OnClick", "value": "checkTask();" }, { "name": "Width", "value": "\"10%\"" }, { "name": "Font", "value": "font" } ] }, { "Name": "reset", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"\u21bbReset\"" }, { "name": "OnClick", "value": "stopThinkingPlayback(false);\n_reset();\n" }, { "name": "Width", "value": "\"10%\"" }, { "name": "Font", "value": "font" } ] }, { "Name": "thinkingButton", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"Show Thinking\"" }, { "name": "OnClick", "value": "showThinkingProcess();" }, { "name": "Font", "value": "font" }, { "name": "Display", "value": "escKeyPressed?\"inline-block\":\"none\"" } ] }, { "Name": "taskText", "Type": "Label", "Properties": [ { "name": "CSS", "value": "{\n \"border\": \"2px solid black\"\n}\n" }, { "name": "TextAlign", "value": "\"left\"" }, { "name": "Text", "value": "\"Instructions:Task 4 has no solution. Suggest a reason why?
\nTask 5 has solutions that the final averages are 4 and 5 respectively, there are two possible solutions. Do you know both of them?
\nTask 6 can take to use final averages in the middle of the range of numbers, like 5 and 8 for example. There should be quite a few solutions here.
\nTask 7 has no solution.Suggest a reason why?
" }, { "name": "Display", "value": "escKeyPressed?\"inline-block\":\"none\"" } ], "Children": [] }, { "Name": "html2", "Type": "Panel", "Properties": [ { "name": "Html", "value": "Can you solve this average number game before the guided method appears?
\n\n\nThis 5-minute walkthrough shows students how to solve the\nAstoundingly Average Number Game slowly and clearly using\nsums, averages, and logical reasoning.\n
\n\nIn this lesson, students will learn how to:
\n\nBest for:
\n\n\nTry the simulation here:
\n\nhttps://iwant2study.org/lookangejss/math/ejss_model_astoundingly_average/\n\n
\nExplore more Mathematics interactive resources from\nOpen Source Physics @ Singapore:
\n\nhttps://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics\n\n