{"version":3,"sources":["webpack:///./src/components/mathematics/Math9thGrade/coord/Lesson-3/Lesson.vue","webpack:///./src/components/mathematics/Math9thGrade/coord/Lesson-3/Boxes.js","webpack:///src/components/mathematics/Math9thGrade/coord/Lesson-3/Lesson.vue","webpack:///./src/components/mathematics/Math9thGrade/coord/Lesson-3/Lesson.vue?18e9","webpack:///./src/components/mathematics/Math9thGrade/coord/Lesson-3/Lesson.vue?1c58"],"names":["staticClass","class","_vm","$vuetify","_c","staticStyle","ref","attrs","staticRenderFns","render","Boxes","box1","JXG","Options","board","minimizeReflow","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","visible","grid","showCopyright","showNavigation","pan","enabled","zoom","point","showInfoBox","highlight","image","text","fixed","curve","cssDefaultStyle","options","layer","makeResponsive","placeTitle","placeLogo","analytics","placeEraseLeft","erase","placeStat","x","placeBoldLeftText","placeInput","y","pts","create","Value","name","size","canvasHeight","fillColor","strokeColor","strokeWidth","snapToGrid","placeLabel","i","xAxis","X","Y","dash","placeText","toFixed","setAttribute","color","yAxis","rotate","on","toggle","clearInputFields","console","log","withLabel","label","position","fontSize","cssStyle","created","_this","$store","commit","title","newTopics","img","action","goto","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"mJAA4D,EAAU,W,IAAiBA,OAAgCC,EAAK,EAAC,S,OAAC,WAAiBC,MAAIC,C,YAA4B,oB,MAAmD,CAAgD,8CAAIC,kBAAS,6BAACJ,cAAY,sBAAoB,Y,CAAQ,S,YAAuD,qB,MAAkC,CAA+C,0CAAII,SAAU,6BAACC,WAAY,kCAAuB,WAAE,YAAS,CAAmCC,cAAQ,W,CAAc,8BAAa,SAAM,SAAG,YAAQ,CAA8hDD,aAAY,UAAoB,ihDAAG,YAAU,CAACL,aAAY,UAA4B,S,YAAuD,qB,MAAkC,CAA+C,0CAAII,SAAU,6BAACC,WAAY,kCAAuB,WAAE,YAAS,CAAqFA,cAAY,WAAoB,0FAAG,YAAUH,CAA2CG,aAAY,UAAoB,gDAAG,YAAQ,CAA0LA,aAAY,UAAoB,8LAAG,YAAUH,CAAwCG,aAAY,UAAoB,6CAAG,YAAQ,CAAqUL,aAAY,UAA6HA,yMAAY,sHAAiB,YAAQ,gBAAwDK,mGAAY,O,YAAC,kBAAmB,4DAAG,YAAI,CAA+BE,aAAM,UAAoB,oBAAE,MAAK,CAAOP,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CAAYO,GAAM,eAAoB,UAAE,MAAK,CAAMP,iBAAY,KAAyEA,QAAW,CAAgB,YAAQ,oBAA+DA,2CAAY,OAAe,YAAQ,gBACh5H,mEACGQ,4BAEJ,EAASC,gEAAuB,Q,iBCmC1BC,EAAQ,CACZC,KAAM,WACNC,IAAIC,QAAQC,MAAMC,eAAiB,OACnC,IAAIC,EAAOJ,IAAIK,SAASC,UAAU,UAAU,CAACC,YAAa,EAAE,GAAI,GAAI,IAAK,IAAKC,iBAAiB,EAAMC,MAAK,EAAOC,MAAM,CAACC,SAAQ,GAChIC,MAAK,EAAMC,eAAc,EAAOC,gBAAe,EAC/CC,IAAI,CAACC,SAAQ,GAAQC,KAAK,CAACD,SAAQ,KAErChB,IAAIC,QAAQC,MAAMC,eAAiB,OACnCH,IAAIC,QAAQiB,MAAMC,aAAY,EAC9BnB,IAAIC,QAAQiB,MAAME,WAAU,EAC5BpB,IAAIC,QAAQoB,MAAMD,WAAU,EAC5BpB,IAAIC,QAAQqB,KAAKF,WAAU,EAC3BpB,IAAIC,QAAQqB,KAAKC,OAAM,EACvBvB,IAAIC,QAAQuB,MAAMJ,WAAU,EAC5BpB,IAAIC,QAAQqB,KAAKG,gBAAgB,qBAEjCrB,EAAKsB,QAAQC,MAAM,SAAU,GAC7BvB,EAAKsB,QAAQC,MAAM,UAAW,GAC9BvB,EAAKsB,QAAQC,MAAM,SAAU,GAC7BvB,EAAKsB,QAAQC,MAAM,UAAW,GAC9BvB,EAAKsB,QAAQC,MAAM,QAAS,GAC5BvB,EAAKsB,QAAQC,MAAM,SAAU,GAE7BC,eAAexB,GACfyB,eAAWzB,EAAM,4BAA6B,wCAC9C0B,eAAU1B,GAEV,IAAI2B,EAAWC,eAAe5B,GAM1B6B,EAAOC,eAAU9B,GAQjB+B,GAFIC,eAAkBhC,GAAO,EAAG,IAAK,OAElCiC,eAAWjC,GAAO,EAAG,IAAK,KAI7BkC,GAFIF,eAAkBhC,GAAO,EAAG,IAAK,SAElCiC,eAAWjC,GAAO,EAAG,IAAK,KAE7BmC,EAAMnC,EAAKoC,OAAO,QAAS,CAAC,kBAAI,EAAGL,EAAEM,SAAS,kBAAI,EAAGH,EAAEG,UAAU,CAACC,KAAK,GAAItB,WAAU,EAAOuB,KAAK,WAAW,OAAO,EAAEvC,EAAKwC,aAAa,KAAMC,UAAU,SAAUC,YAAY,QAASC,YAAY,EAAGpC,SAAQ,EAAMqC,YAAW,IAClOC,eAAW7C,EAAMmC,EAAK,UAAW,GAAI,IACrC,IAAIW,EAAE,EASFC,GARM/C,EAAKoC,OAAO,UAAW,CAAC,CAAC,kBAAID,EAAIa,KAAK,kBAAIb,EAAIc,MAAM,CAAC,EAAG,kBAAId,EAAIc,OAAM,CAAC1C,SAAQ,EAAM2C,KAAK,EAAGP,YAAY,EAAGD,YAAY,UACxH1C,EAAKoC,OAAO,UAAW,CAAC,CAAC,kBAAID,EAAIa,KAAK,kBAAIb,EAAIc,MAAM,CAAC,kBAAId,EAAIa,KAAK,IAAI,CAACzC,SAAQ,EAAM2C,KAAK,EAAGP,YAAY,EAAGD,YAAY,UAOvHS,eAAUnD,GAAM,kBAAImC,EAAIa,IAAI,KAAG,kBAAIb,EAAIc,IAAI,KAAK,IAAI,iBAAI,OAAQd,EAAIa,IAAKI,QAAQ,OAC5FL,EAAMM,aAAa,CAACC,MAAM,MAAO/C,QAAQ,kBAAO,GAAHuC,KAC7C,IAAIS,EAAOJ,eAAUnD,GAAM,kBAAImC,EAAIa,IAAI,MAAK,kBAAIb,EAAIc,IAAI,IAAG,IAAI,iBAAI,OAAQd,EAAIc,IAAKG,QAAQ,MAC5FG,EAAMF,aAAa,CAACG,OAAO,GAAIF,MAAM,MAAO/C,QAAQ,kBAAO,GAAHuC,KAExDjB,EAAM4B,GAAG,QAAQ,WAAWX,EAAEY,eAAOZ,MACrCnB,EAAU8B,GAAG,QAAQ,WAAWX,EAAE,EAAEa,eAAiB3D,MACrD4D,QAAQC,IAAIf,GAEZ9C,EAAKoC,OAAO,OAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAACpB,WAAU,EAAO0B,YAAY,OAAQC,YAAY,EAAGL,KAAK,GAAIwB,WAAU,EAAMC,MAAM,CAACC,SAAS,MAAMC,SAAS,WAAW,OAAO,GAAGjE,EAAKwC,aAAa,KAAM0B,SAAS,wBAErMlE,EAAKoC,OAAO,OAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAACpB,WAAU,EAAO0B,YAAY,OAAQC,YAAY,EAAGL,KAAK,GAAIwB,WAAU,EAAMC,MAAM,CAACC,SAAS,MAAOC,SAAS,WAAW,OAAO,GAAGjE,EAAKwC,aAAa,KAAM0B,SAAS,0BAGvLxE,ICzCA,GACf4C,KAAA,mBACA6B,QAAA,eAAAC,EAAA,KACA,KAAAC,OAAAC,OAAA,yBAEA,IAAAC,EAAA,uCACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GACA,IAAAC,EAAA,CACA,CAAAD,MAAA,iBAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,QACA,CAAAJ,MAAA,aAAAE,IAAA,oBAAAC,OAAA,kBAAAN,EAAAO,KAAA,gBAEA,KAAAN,OAAAC,OAAA,2BAAAE,GACA,KAAAH,OAAAC,OAAA,gCACA,KAAAD,OAAAC,OAAA,6BACA,KAAAD,OAAAC,OAAA,kCACA,KAAAD,OAAAC,OAAA,+BACA,KAAAD,OAAAC,OAAA,gCAEAM,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACApF,EAAAC,QAEAqF,SAAA,WACA,OAAAT,MAAA,sBACAU,cAAA,gBACAC,KAAA,EAAA5C,KAAA,WAAA6C,QAAA,uCACA,CAAA7C,KAAA,cAAA6C,QAAA,sCCjG4Y,I,YCOxYC,EAAY,eACd,EACA,EACA5F,GACA,EACA,KACA,KACA,MAIa,aAAA4F,E","file":"js/chunk-2d2384c4.526fb207.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{staticClass:\"font-weight-light\",class:{'pa-5 headline': _vm.$vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': _vm.$vuetify.breakpoint.mdOnly, 'pa-1 body-2': _vm.$vuetify.breakpoint.smAndDown}},[_c('div',{staticClass:\"font-weight-medium\",class:{'display-1': _vm.$vuetify.breakpoint.lgAndUp,'headline': _vm.$vuetify.breakpoint.mdOnly, 'subheading': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticStyle:{\"font-family\":\"Oswald\"}},[_vm._v(\"Coordinate System\")])]),_c('div',{ref:\"ia\",staticStyle:{\"margin-top\":\"20px\"}}),_vm._v(\"\\n\\n    The goal of a coordinate system is a means of specifying the position of an object.\\n    For example, imagine a billiards table, and consider a ball on this table.\\n    Now, if someone asks you to specify the location of the ball, how would you do this?\"),_c('br'),_c('br'),_vm._v(\"\\n    You could say — the ball is located in the lower half of the table.\\n    Or, it is near the left edge of the board.\\n    Or, the ball is located at the lower left corner of the table.\\n    None of these statements describe the position of the ball precisely. \"),_c('br'),_c('br'),_vm._v(\"\\n    Now, if you say — the ball is 18 inches away from the left edge, it gives\\n    a better idea of the location of the ball but\\n    still does not fix the position of the ball. However, if you say the ball\\n    is located at 18 inches from the left edge and 12 inches from the bottom edge, it completely\\n    specifies the location of the ball on the table.\"),_c('br'),_c('br'),_vm._v(\" You may have noticed that the ball on the table can be located\\n    by specifying its distances from two perpendicular lines — the left edge of the table, and the bottom edge of the paper.\\n    This notion forms the basis of coordinate geometry.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    The position of any object lying in a plane\\n    can be represented by its distance from two perpendicular axes (lines). These axes are called coordinate axes, and the distances from these two axes used in specifying the location of\\n    the object are called its coordinates.\\n    \"),_c('br'),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('div',{staticClass:\"font-weight-medium\",class:{'display-1': _vm.$vuetify.breakpoint.lgAndUp,'headline': _vm.$vuetify.breakpoint.mdOnly, 'subheading': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticStyle:{\"font-family\":\"Oswald\"}},[_vm._v(\"Learn Interactively | Coordinates of a Point on the Cartesian Plane\")])]),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('h5',[_vm._v(\" Session Objectives \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n    This MagicGraph offers a visual+interactive illustration that helps students\\n    assess their understanding of coordinates of a point on the Cartesian plane.\\n\\n    \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\" Getting Started \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n    The MagicGraph shows a point named P. Your goal is to find the x and y coordinates\\n    of this point.\\n\\n    Enter your answers for the x and y coordinates in the blue boxes labeled as \"),_c('b',[_vm._v(\"x\")]),_vm._v(\" and \"),_c('b',[_vm._v(\"y\")]),_vm._v(\", respectively.\\n    Once done, simply tap on the \"),_c('i',{staticClass:\"tester ma-1\"}),_vm._v(\" icon to check your answer.\\n    To practice with a new point position, simply tap on the \"),_c('i',{staticClass:\"shuffler ma-1\"}),_vm._v(\" icon to shuffle the point position.\\n  \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('div',{staticClass:\"edliy-box-about\",attrs:{\"id\":\"jxgbox1\"}})]),_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('h5',{staticClass:\"edliy-text-about\"},[_vm._v(\"\\n        Navigation Tip: Tap on \"),_c('i',{staticClass:\"stater ma-1\"}),_vm._v(\" icon see x and y coordinates of the point. Tap on \"),_c('i',{staticClass:\"eraser ma-1\"}),_vm._v(\" icon to clear your response and start over.\\n      \")])])],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","// Import the edliy_utils\r\nimport {\r\n    makeResponsive,\r\n    placeTitle,\r\n    placeImage,\r\n    placeInput,\r\n    placeSlider,\r\n    hoverMe,\r\n    placeRec,\r\n    hiddenPt,\r\n    fixedPt,\r\n    clearInputFields,\r\n    dragMe,\r\n    placeArrow,\r\n    placeGravity,\r\n    placeMiddleText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeRightText,\r\n    placeSliderSwitch,\r\n    placeCircle,\r\n    placeLogo,\r\n    placeShuffle,\r\n    placeTest,\r\n    placeUndo,\r\n    placeRedo,\r\n    placeBoldText,\r\n    placeBoldLeftText,\r\n    placeEraseLeft,\r\n    placeStat,\r\n    placeLabel,\r\n    placeTapeHori,\r\n    placeTapeVert,\r\n    toggle,\r\n    placeText\r\n} from '../../Utils';\r\nconst Boxes = {\r\n  box1: function () {\r\n  JXG.Options.board.minimizeReflow = 'none';\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-10, 10, 10, -10], keepaspectratio: true, axis:false, ticks:{visible:false},\r\n  grid:true, showCopyright:false, showNavigation:false,\r\n  pan:{enabled:false}, zoom:{enabled:false}});\r\n///////////////////////////////OPTIONS/////////////////////////////\r\nJXG.Options.board.minimizeReflow = 'none';\r\nJXG.Options.point.showInfoBox=false;\r\nJXG.Options.point.highlight=false;\r\nJXG.Options.image.highlight=false;\r\nJXG.Options.text.highlight=false;\r\nJXG.Options.text.fixed=true;\r\nJXG.Options.curve.highlight=false;\r\nJXG.Options.text.cssDefaultStyle='fontFamily:Oswald;'\r\n////////////////////////////////LAYERING////////////////////////////////\r\nbrd1.options.layer['image'] =12;\r\nbrd1.options.layer['circle'] =13;\r\nbrd1.options.layer['chart'] =14;\r\nbrd1.options.layer['sector'] =15;\r\nbrd1.options.layer['line'] =15;\r\nbrd1.options.layer['point'] =20;\r\n//////////////////////////////////////////////////////////////\r\nmakeResponsive(brd1);\r\nplaceTitle(brd1, 'Point on Coordinate Plane', 'Enter X & Y Coordinates of the Point');\r\nplaceLogo(brd1);\r\n///////////////////////////////////BUTTONS//////////////////////\r\nvar analytics =placeEraseLeft(brd1);\r\n//analytics.setLabel('To to Erase and Start Over')\r\n//analytics.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n//analytics.on('over', function () {this.label.setAttribute({visible:true});});\r\n//analytics.on('out', function () {this.label.setAttribute({visible:false});});\r\n/////////////////////////////////////////////////////////////////////////////////////\r\nvar erase =placeStat(brd1);\r\n//erase.setLabel('Tap to See Data & Parameters')\r\n//erase.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n//erase.on('over', function () {this.label.setAttribute({visible:true});});\r\n//erase.on('out', function () {this.label.setAttribute({visible:false});});\r\n///////////////////////////////////////////////////////////////////////////\r\nvar xt =placeBoldLeftText(brd1, -9, 6.5, 'x =');\r\n//y.setAttribute({color:'red'});\r\nvar x =placeInput(brd1, -8, 6.5, \"\");\r\n//m.setAttribute({cssStyle:'color:red'});\r\nvar yt =placeBoldLeftText(brd1, -5, 6.5, ' y = ');\r\n//  x.setAttribute({color:'red'});\r\nvar y =placeInput(brd1, -4, 6.5, \"\");\r\n///////////////////////////////////////////////////////////////////////////////////////\r\nvar pts = brd1.create('point', [()=>1.*x.Value(), ()=>1.*y.Value()], {name:'', highlight:false, size:function(){return 4*brd1.canvasHeight/800}, fillColor:'orange', strokeColor:'black', strokeWidth:2, visible:true, snapToGrid:true});\r\nplaceLabel(brd1, pts, 'P(x, y)', 15, 15);\r\nvar i=0;\r\nvar xcord=brd1.create('segment', [[()=>pts.X(), ()=>pts.Y()], [0, ()=>pts.Y()]],{visible:true, dash:1, strokeWidth:2, strokeColor:'black'});\r\nvar ycord=brd1.create('segment', [[()=>pts.X(), ()=>pts.Y()], [()=>pts.X(), 0]],{visible:true, dash:1, strokeWidth:2, strokeColor:'black'});\r\n////////////////\r\n//var side3 = placeTapeHori(brd1, [0.0,0.0],[()=>pts.X(), 0.0],'');\r\n//side3.setAttribute({visible:()=>i==1, point1:{visible:false},point2:{visible:false},  strokeWidth:1, strokeColor:'grey', label:{visible:()=>i==2, color:'blue'}});\r\n//var side2 = placeTapeVert(brd1, [0.0, 0.0], [0.0, ()=>pts.Y()],'');\r\n//side2.setAttribute({visible:()=>i==1, point1:{visible:false},point2:{visible:false}, strokeWidth:1, strokeColor:'grey', label:{rotate:90, visible:()=>i==2, color:'blue'}});\r\n///////////////////////////////////////////////////////\r\nvar xAxis =placeText(brd1, ()=>pts.X()/2, ()=>pts.Y()+0.5, 16, ()=>'x = '+(pts.X()).toFixed(2));\r\nxAxis.setAttribute({color:'red', visible:()=>i==1});\r\nvar yAxis =placeText(brd1, ()=>pts.X()+0.5, ()=>pts.Y()/2, 16, ()=>'y = '+(pts.Y()).toFixed(2));\r\nyAxis.setAttribute({rotate:90, color:'red', visible:()=>i==1,});\r\n////////////////////////////////////////////////\r\nerase.on('down', function(){i=toggle(i)});\r\nanalytics.on('down', function(){i=0;clearInputFields(brd1)});\r\nconsole.log(i);\r\n//\r\nbrd1.create('axis', [[0,0],[0,4]],{highlight:false, strokeColor:'grey', strokeWidth:2, name:'', withLabel:true, label:{position:'urt',fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'}});\r\n//\r\nbrd1.create('axis', [[0,0],[4,0]],{highlight:false, strokeColor:'grey', strokeWidth:2, name:'', withLabel:true, label:{position:'lrt', fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'}});\r\n    },\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <div\r\n      class=\" font-weight-light\"\r\n      :class=\"{'pa-5 headline': $vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': $vuetify.breakpoint.mdOnly, 'pa-1 body-2': $vuetify.breakpoint.smAndDown}\"\n    >\r\n      <div class=\"font-weight-medium\"\r\n           :class=\"{'display-1': $vuetify.breakpoint.lgAndUp,'headline': $vuetify.breakpoint.mdOnly, 'subheading': $vuetify.breakpoint.smAndDown}\"\r\n      >\r\n        <span style=\"font-family:Oswald\">Coordinate System</span>\r\n      </div>\r\n      <div ref=\"ia\" style=\"margin-top: 20px\" />\r\n\r\n      The goal of a coordinate system is a means of specifying the position of an object.\r\n      For example, imagine a billiards table, and consider a ball on this table.\r\n      Now, if someone asks you to specify the location of the ball, how would you do this?<br><br>\r\n      You could say &mdash; the ball is located in the lower half of the table.\r\n      Or, it is near the left edge of the board.\r\n      Or, the ball is located at the lower left corner of the table.\r\n      None of these statements describe the position of the ball precisely. <br> <br>\r\n      Now, if you say &mdash; the ball is 18 inches away from the left edge, it gives\r\n      a better idea of the location of the ball but\r\n      still does not fix the position of the ball. However, if you say the ball\r\n      is located at 18 inches from the left edge and 12 inches from the bottom edge, it completely\r\n      specifies the location of the ball on the table.<br><br> You may have noticed that the ball on the table can be located\r\n      by specifying its distances from two perpendicular lines &mdash; the left edge of the table, and the bottom edge of the paper.\r\n      This notion forms the basis of coordinate geometry.\r\n      <br> <br>\r\n      The position of any object lying in a plane\r\n      can be represented by its distance from two perpendicular axes (lines). These axes are called coordinate axes, and the distances from these two axes used in specifying the location of\r\n      the object are called its coordinates.\r\n      <br>\r\n      <div style=\"margin-top: 10px\" />\r\n      </v-layout>\r\n      <div class=\"font-weight-medium\"\r\n           :class=\"{'display-1': $vuetify.breakpoint.lgAndUp,'headline': $vuetify.breakpoint.mdOnly, 'subheading': $vuetify.breakpoint.smAndDown}\"\r\n      >\r\n        <span style=\"font-family:Oswald\">Learn Interactively | Coordinates of a Point on the Cartesian Plane</span>\r\n      </div>\r\n      <div style=\"margin-top: 20px\" />\r\n      <h5> Session Objectives </h5>\r\n      <div style=\"margin-top: 10px\" />\r\n      This MagicGraph offers a visual+interactive illustration that helps students\r\n      assess their understanding of coordinates of a point on the Cartesian plane.\r\n\r\n      <div style=\"margin-top: 10px\" />\r\n      <h5> Getting Started </h5>\r\n      <div style=\"margin-top: 10px\" />\r\n      The MagicGraph shows a point named P. Your goal is to find the x and y coordinates\r\n      of this point.\r\n\r\n      Enter your answers for the x and y coordinates in the blue boxes labeled as <b>x</b> and <b>y</b>, respectively.\r\n      Once done, simply tap on the <i class=\"tester ma-1\" /> icon to check your answer.\r\n      To practice with a new point position, simply tap on the <i class=\"shuffler ma-1\" /> icon to shuffle the point position.\r\n    </div>\r\n    <div style=\"margin-top: 10px\" />\r\n    <v-responsive>\r\n      <v-layout justify-center>\r\n        <div id=\"jxgbox1\" class=\"edliy-box-about\" />\r\n      </v-layout>\r\n      <v-layout justify-center>\r\n        <h5 class=\"edliy-text-about\">\n          Navigation Tip: Tap on <i class=\"stater ma-1\" /> icon see x and y coordinates of the point. Tap on <i class=\"eraser ma-1\" /> icon to clear your response and start over.\n        </h5>\r\n      </v-layout>\r\n    </v-responsive>\r\n  </div>\r\n</template>\r\n<script>\r\nimport Boxes from './Boxes.js'\r\nexport default {\r\n  name: 'CoordinateSystem',\r\n  created () {\r\n    this.$store.commit('navigation/resetState');\r\n    // Store mutations\r\n    let title = 'Plotting a Point on Coordinate Plane';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'Square Formula', img:'/assets/number-1.svg', action: () => this.goto('ia')},\r\n      {title: 'MagicGraph',img:'/assets/touch.svg', action: () => this.goto('playgraph')},\r\n    ];\r\n    this.$store.commit('navigation/replaceTopics', newTopics);\r\n    this.$store.commit('navigation/toggleshowhome', false);\r\n    this.$store.commit('navigation/replaceMath', true);\r\n    this.$store.commit('navigation/replaceLeftArrow', true);\r\n    this.$store.commit('navigation/replaceModule', true);\r\n    this.$store.commit('navigation/replaceSample', true);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    Boxes.box1();\r\n  },\r\n  metaInfo() {\r\n  return{ title: 'Coordinate Geometry',\r\n          titleTemplate: '%s | Lesson 3',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {name: 'description', content: 'Balancing a chemical equation.'}\r\n                ]\r\n        }\r\n   },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Lesson.vue?vue&type=template&id=14f7be51&\"\nimport script from \"./Lesson.vue?vue&type=script&lang=js&\"\nexport * from \"./Lesson.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}