{"version":3,"sources":["webpack:///./src/components/mathematics/Math10thGrade/points/Lesson.vue?3754","webpack:///./src/components/mathematics/Math10thGrade/points/Lesson.vue","webpack:///./src/components/mathematics/Math10thGrade/points/Boxes.js","webpack:///src/components/mathematics/Math10thGrade/points/Lesson.vue","webpack:///./src/components/mathematics/Math10thGrade/points/Lesson.vue?f46c","webpack:///./src/components/mathematics/Math10thGrade/points/Lesson.vue?b8d8"],"names":["ref","attrs","staticClass","_c","_vm","_self","staticRenderFns","Boxes","box1","JXG","Options","board","minimizeReflow","point","showInfoBox","highlight","text","fixed","curve","circle","cssDefaultStyle","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","makeResponsive","options","layer","placeTitle","placeLogo","analytics","placeShuffle","setLabel","label","setAttribute","visible","alignX","offset","CssStyle","fontSize","on","this","erase","placeErase","suspendUpdate","name","placeMiddleText","color","des","p","q","i","j","Points","names","subtitle","x1","y1","x2","y2","valueOf","evt","mouseover","create","getUsrCoordsOfMouse","size","snapToGrid","placeLabel","X","Y","update","right1","placeImage","wrong1","right2","wrong2","dash","strokeColor","strokeWidth","removeObject","Math","round","random","unsuspendUpdate","created","_this","$store","commit","title","newTopics","img","action","goto","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"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","file":"js/chunk-6a2eea56.821ac36e.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=style&index=0&id=7e5f1b45&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Locating a Point on X-Y Plane\\n  \")]),_c('p',[_vm._v(\" Imagine you were given a point P with coordinates \\\\(a\\\\) and \\\\(b\\\\). To plot this point on Cartesian plane — \")]),_vm._m(0),_c('br'),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    Learn Interactively | Plot a Point on X-Y Plane\\n  \")]),_c('p',[_vm._v(\" Through this visually interactive module, students will learn to plot a point on Cartesian plane from its x-y coordinates. To plot a point P with coordinates \\\\(a\\\\) and \\\\(b\\\\) on Cartesian plane — \")]),_vm._m(1),_c('br'),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('div',{staticClass:\"edliy-box-about\",attrs:{\"id\":\"jxgbox1\"}})])],1)],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('ul',{staticClass:\"a\"},[_c('li',[_vm._v(\" Start at the origin (i.e. the point with coordinates (0, 0)). Then move \\\\(a\\\\) units along the x-axis. A positive sign for \\\\(a\\\\) would mean moving to the right of the origin while a negative sign of \\\\(a\\\\) would mean moving to the left of the origin. \")]),_c('li',[_vm._v(\"\\n      Starting from the previous step, now move \\\\(b\\\\) units along the y-axis. A positive sign for \\\\(b\\\\) would mean moving upward while a negative sign for \\\\(b\\\\) would mean moving downward.\\n    \")])])\n},function (){var _vm=this,_c=_vm._self._c;return _c('ul',{staticClass:\"a\"},[_c('li',[_vm._v(\" Start at the origin (i.e. the point with coordinates (0, 0)). Then move \\\\(a\\\\) units along the x-axis. A positive sign for \\\\(a\\\\) would mean moving to the right of the origin while a negative sign of \\\\(a\\\\) would mean moving to the left of the origin. \")]),_c('li',[_vm._v(\"\\n      Starting from the previous step, now move \\\\(b\\\\) units along the y-axis. A positive sign for \\\\(b\\\\) would mean moving upward while a negative sign for \\\\(b\\\\) would mean moving downward.\\n    \")])])\n}]\n\nexport { render, staticRenderFns }","import {\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    placeText,\r\n    placeMiddleText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeCircle,\r\n    placeAngle,\r\n    placeDash,\r\n    placeLabel,\r\n    placeRightText,\r\n    placeArc,\r\n    placeLogo,\r\n    placeBoldText,\r\n    placeShuffle,\r\n    placeErase\r\n} from '../../../../common/edliy_utils-geometric';\r\nconst Boxes = {\r\n  box1: function () {\r\n\tJXG.Options.board.minimizeReflow = 'none';\r\n  JXG.Options.point.showInfoBox=false;\r\n  JXG.Options.point.highlight=false;\r\n  JXG.Options.text.highlight=false;\r\n  JXG.Options.text.fixed=true;\r\n  JXG.Options.curve.highlight=false;\r\n  JXG.Options.circle.highlight=false;\r\n  JXG.Options.text.cssDefaultStyle='fontFamily:Oswald;'\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-10, 10, 10, -10],keepaspectratio: true, axis:true, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n  makeResponsive(brd1);\r\n  brd1.options.layer['image'] =15;\r\n  brd1.options.layer['point'] =20;\r\n  brd1.options.layer['line'] =10;\r\n//\tbrd1.create('text', [6, 11.5, 'Fraction'],{highlight:false, display:'internal', anchorX:'middle', anchorY:'middle', CssStyle:'fontFamily:Oswald;fontWeight:bold',fontSize:function(){return Math.round(32*brd1.canvasWidth/800.)}, fixed:true});\r\n  placeTitle(brd1, 'Plotting a Point on Coordinate Plane', '');\r\n  placeLogo(brd1);\r\n  var analytics = placeShuffle(brd1);\r\n  analytics.setLabel('Tap to shuffle coordinates')\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\n  var erase = placeErase(brd1);\r\n  //placeImage(brd1, '/assets/eraser.svg', -2.5, -9.25, 1.5, 0);\r\n  erase.setLabel('Tap to erase and start over')\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  //placeDash(board, Pt1, Pt2, width, cols)\r\n  //brd1.create('axis', [[-1, 0], [1, 0]], {strokeWidth: 2, strokeColor: 'red'});\r\n  brd1.suspendUpdate();\r\n  var name = placeMiddleText(brd1, 6.5, 14, '');\r\n  name.setAttribute({color:'green'});\r\n  var des = placeMiddleText(brd1, 6.5, 14, '');\r\n  des.setAttribute({color:'green'});\r\n  var i=0; var j=0;\r\n  var Points=[];\r\n  var names=['A', 'B'];\r\n  var subtitle=[];\r\n  var x1 = 3; var y1 = 4; var p; var q;\r\n  var x2 = -4; var y2 = -5;\r\n  subtitle[0] = placeMiddleText(brd1, 0, 8, ()=>'Plot a Point at ( '+ x1.valueOf() + ' , ' + y1.valueOf()+')');\r\n  subtitle[0].setAttribute({visible:()=>i==0});\r\n  subtitle[1] = placeMiddleText(brd1, 0, 8, ()=>'Next, Plot a Point at ( '+ x2.valueOf() + ' , '+ y2.valueOf() + ' )' );\r\n  subtitle[1].setAttribute({visible:()=>i==1});\r\n  subtitle[2] = placeMiddleText(brd1, 0, 8, ()=>'You got ' + j.valueOf() + ' out of 2 correct.');\r\n  subtitle[2].setAttribute({visible:()=>i>1});\r\n  brd1.on('up',\r\n            function (evt)\r\n            {\r\n            if(i<2 && !erase.mouseover && !analytics.mouseover)\r\n            {\r\n            Points[i] = brd1.create('point', brd1.getUsrCoordsOfMouse(evt), {name:'',size:4, snapToGrid:true});\r\n            placeLabel(brd1, Points[i], names[i], 0, 20);\r\n            i+=1;\r\n            }\r\n            if(i==1 && Points[0].X()==x1.valueOf() && Points[0].Y()==y1.valueOf() )\r\n            {\r\n              return j +=1;\r\n            }\r\n            if(i==2 && Points[1].X()==x2.valueOf() && Points[1].Y()==y2.valueOf() )\r\n            {\r\n              return j +=1;\r\n            }\r\n            brd1.update();\r\n            });\r\n            var right1 = placeImage(brd1, '/assets/check.svg', -10+0.5, -10+0.5, 1.,  0);\r\n            var wrong1 = placeImage(brd1, '/assets/cross.svg', -10+0.5, -10+0.5, 1.,  0);\r\n            right1.setAttribute({visible:()=>i>=1 && Points[0].X()==x1.valueOf()&& Points[0].Y()==y1.valueOf()});\r\n            wrong1.setAttribute({visible:()=>i>=1 && (Points[0].X()!=x1.valueOf() || Points[0].Y()!=y1.valueOf())});\r\n            var right2 = placeImage(brd1, '/assets/check.svg', -10+2, -10+0.5, 1.,  0);\r\n            var wrong2 = placeImage(brd1, '/assets/cross.svg', -10+2, -10+0.5, 1.,  0);\r\n            right2.setAttribute({visible:()=>i>=2 && Points[1].X()==x2.valueOf()&& Points[1].Y()==y2.valueOf()});\r\n            wrong2.setAttribute({visible:()=>i>=2 && (Points[1].X()!=x2.valueOf() || Points[1].Y()!=y2.valueOf())});\r\n  brd1.on('up', function()\r\n  {\r\n    if(i==1)\r\n    {\r\n    p =brd1.create('segment',[Points[0], [0.0, ()=>Points[0].Y()]] , {visible:true, name:'p', dash:1, strokeColor:'red', strokeWidth:1});\r\n    q =brd1.create('segment',[Points[0], [()=>Points[0].X(), ()=>0*Points[0].Y()]] , {visible:true,name:'q', dash:1, strokeColor:'red', strokeWidth:1});\r\n    }\r\n    if(i==2)\r\n    {\r\n    p =brd1.create('segment',[Points[1], [0.0, ()=>Points[1].Y()]] , {visible:true, name:'p', dash:1, strokeColor:'red', strokeWidth:1});\r\n    q =brd1.create('segment',[Points[1], [()=>Points[1].X(), ()=>0*Points[0].Y()]] , {visible:true,name:'q', dash:1, strokeColor:'red', strokeWidth:1});\r\n    }\r\n  }\r\n)\r\n erase.on('down', function()\r\n {\r\n  brd1.removeObject([Points, p, q]);\r\n  i=0;j=0;\r\n });\r\n erase.on('up', function()\r\n {\r\n  i=0;\r\n  var p;\r\n  var q;\r\n  var Points=[];\r\n });\r\n analytics.on('down', function()\r\n {\r\n   brd1.removeObject([Points, p, q]);\r\n   i=0;j=0;\r\n   x1 = 3+Math.round(3*Math.random());\r\n   y1 = 4+Math.round(3*Math.random());\r\n   ///////////////////////////\r\n   x2 = -4+Math.round(2*Math.random());\r\n   y2 = -5+Math.round(4*Math.random());\r\n});\r\n /*  function()\r\n  { if(!g)\r\n    {\r\n    g = brd1.create('line',[()=>Points[0], ()=>Points[1]] , {strokeColor:'red', strokeWidth:1});\r\n  }\r\n*/\r\n  /*var PointP = placePoint(brd1, 0, 5, 4, 'blue', 'blue');\r\n  PointP.setAttribute({trace:true});\r\n  var PointQ = placePoint(brd1, ()=>-PointP.X(), ()=>PointP.Y(), 4, 'blue', 'blue');\r\n  PointQ.setAttribute({trace:true});\r\n  var hand = brd1.create('image', ['/assets/hands.svg', [function(){return PointP.X()-0.6;}, function(){return PointP.Y()-0.65;}], [1.1,1.1]], {highlight:false, visible:false});\r\n  PointP.on('over', function(){hand.setAttribute({visible:true});});\r\n  PointP.on('out', function(){hand.setAttribute({visible:false});});\r\n  erase.on('down', function(){PointP.moveTo([0, 5]); PointP.setAttribute({trace:false}); PointQ.setAttribute({trace:false});  PointP.setAttribute({trace:true}); PointQ.setAttribute({trace:true}); });\r\n*/\r\n\r\n  /*\r\n  var sq = placeImage(brd1, '/assets/setSquare.svg', 4, 0, 4, 0);\r\n  sq.on('down', function(){name.setText('This is a Set Square.'); des.setText('A set square is used for drawing parallel and perpendicular lines.'); });\r\n  sq.on('out', function(){name.setText(''); des.setText('')}); */\r\n  //Title and subtitleplaceSlider(board, positionX, positionY, limit1, start, limit2, length, name)\r\n/*  var radius = placeSlider(brd1, 0, -5, 1, 1.5, 2.5, 5, '&nbsp; R(m)');\r\n  radius.setAttribute({unitLabel:'m'});\r\n  radius.setAttribute({snapWidth:0.5});\r\n\r\n\r\n\r\n  var go = placeImage(brd1, '/assets/go.svg', 10, -6, 2, 0);\r\n  go.setLabel('Tap to roll the circle.')\r\n  go.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n  go.on('over', function () {this.label.setAttribute({visible:true});});\r\n  go.on('out', function () {this.label.setAttribute({visible:false});});\r\n  placeMiddleText(brd1, 6.5, 9, 'Circumference = Distance between A and B');\r\n  placeMiddleText(brd1, 6.5, 13, 'L = 2πR');\r\n  placeMiddleText(brd1, 6.5, 11, 'Select a radius for the circle. Then hit Go.');\r\n  //var radius = brd1.create('slider',[[15,12],[20,12],[1,2.5,3]], {snapToGrid: false ,face:'circle', size:3, name:'r', strokeColor:'black', label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  var segment1 = brd1.create('segment', [[0,function(){return radius.Value()}], [function(){return 2*Math.PI*radius.Value()},function(){return radius.Value()}]], {fixed: true, strokeColor: 'black', visible:false});\r\n\r\n  var ptCenter = brd1.create('glider', [0,2, segment1],{face:'+' , name:'', label:{fontSize:function(){return 16*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  var pt1 =brd1.create('point', [function(){return ptCenter.X()},function(){return ptCenter.Y()-radius.Value()}], {fixed:false, visible:false, face:'circle', size:4, name:'B', label: {offset: [0,-20]}, strokeColor: 'black', fillColor: '#e1e1e1'});\r\n  brd1.create('point', [ptCenter.X(),ptCenter.Y()-radius.Value()], {fixed:false, visible:true, face:'circle', size:2, name:'A', label: {offset: [0,-20]}, strokeColor: 'red', fillColor: 'red'});\r\n  ///////////////////////////////////////////////////\r\n  var c1 = brd1.create('circle', [ptCenter, pt1], {strokeColor: 'black', strokeWidth:0.1, fillColor:'orange', fillOpacity:0.5});\r\n  ////////////////\r\n  go.on('down', function(){ptCenter.moveTo([2*Math.PI*radius.Value(), radius.Value()], 500)});\r\n\r\n  radius.on('drag', function(){ptCenter.moveTo([0, radius.Value()])});\r\n  //\r\n  function angle1(){\r\n      return  (2*Math.PI-ptCenter.X()/radius.Value() );\r\n  }\r\n//////////////////////////////////////////////////\r\n  var pt3 =brd1.create('point', [function(){return ptCenter.X()+radius.Value()*Math.sin(angle1())},function(){return ptCenter.Y()-radius.Value()*Math.cos(angle1())}],\r\n  {fixed:false, visible:true, face:'circle', size:2, name:'B', label: {offset: [0,-20], visible:function(){return ptCenter.X()>2*Math.PI*radius.Value()-0.1;}}, strokeColor: 'red', fillColor: 'red'});\r\n  //pt3.label.setAttribute({visible:true});\r\n  //placeArrow(brd1, [()=>ptCenter.X(), ()=>ptCenter.Y()], [()=>pt3.X(), ()=>pt3.Y()], 2, 'black');\r\n  //var txt1 = brd1.create('text', [3, -4,  function(){return 'ANGLE = ' + angle1()*180/Math.PI}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(12*brd1.canvasWidth/500.)}},);\r\n\r\n  var segment2 = brd1.create('segment', [[0,0], [function(){return pt1.X()},0]], {fixed: true, strokeColor: 'red', visible:true});\r\n\r\n  var arc1 = brd1.create('arc', [ptCenter, pt1, pt3], {strokeColor: 'red', strokeWidth: 2});\r\n\r\n\r\n  //Arrow\r\n  var ptArrow1 =brd1.create('point', [function(){return pt1.X()} ,-2], {fixed:true, visible:false, face:'circle', size:4, name:' ', label: {offset: [0,25]}, strokeColor: 'black', fillColor: '#e1e1e1'});\r\n  var ptArrow2 =brd1.create('point', [0 ,-2], {fixed:false, visible:false, face:'circle', size:4, name:' ', label: {offset: [0,25]}, strokeColor: 'black', fillColor: '#e1e1e1'});\r\n  var segment2 = brd1.create('segment', [ptArrow1, ptArrow2], {fixed: true, strokeColor: 'black', visible:true, strokeWidth:1,\r\n                                                                                                                  highlightStrokeWidth: 2,\r\n                                                                                                                  lastArrow: {type: 2, size: 8, highlightSize: 6},\r\n                                                                                                                  touchLastPoint: false,\r\n                                                                                                                  firstArrow: {type: 2, size: 8}\r\n                                                                                                                  });\r\n\r\n  var txtPer = brd1.create('text', [function(){return pt1.X()/2}, -1.5,  function(){return ''+pt1.X().toFixed(2)+' m'}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(12*brd1.canvasWidth/500.)}},);\r\n\r\n\r\n  var ptArrow3 =brd1.create('point', [-5,0], {fixed:true, visible:false, face:'circle', size:4, name:' ', label: {offset: [0,25]}, strokeColor: 'black', fillColor: '#e1e1e1'});\r\n  var ptArrow4 =brd1.create('point', [-5, function(){return radius.Value()}], {fixed:false, visible:false, face:'circle', size:4, name:' ', label: {offset: [0,25]}, strokeColor: 'black', fillColor: '#e1e1e1'});\r\n  var segment3 = brd1.create('segment', [ptArrow3, ptArrow4], {fixed: true, strokeColor: 'black', visible:true, strokeWidth:1,\r\n                                                                                                                  highlightStrokeWidth: 2,\r\n                                                                                                                  lastArrow: {type: 2, size: 8, highlightSize: 6},\r\n                                                                                                                  touchLastPoint: false,\r\n                                                                                                                  firstArrow: {type: 2, size: 8}\r\n                                                                                                                  });\r\n\r\n  var txtRad = brd1.create('text', [-4, function(){return radius.Value()/2},  function(){return radius.Value().toFixed(2)}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(12*brd1.canvasWidth/500.)}},);\r\n\r\n*/\r\n\r\n  brd1.unsuspendUpdate();\r\n},\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\r\n      Locating a Point on X-Y Plane\r\n    </h3>\r\n    <p> Imagine you were given a point P with coordinates \\(a\\) and \\(b\\). To plot this point on Cartesian plane &mdash; </p>\r\n    <ul class=\"a\">\r\n      <li> Start at the origin (i.e. the point with coordinates (0, 0)). Then move \\(a\\) units along the x-axis. A positive sign for \\(a\\) would mean moving to the right of the origin while a negative sign of \\(a\\) would mean moving to the left of the origin. </li>\r\n      <li>\n        Starting from the previous step, now move \\(b\\) units along the y-axis. A positive sign for \\(b\\) would mean moving upward while a negative sign for \\(b\\) would mean moving downward.\r\n      </li>\r\n    </ul>\r\n    <br>\r\n    <h3 ref=\"pg\">\n      Learn Interactively | Plot a Point on X-Y Plane\r\n    </h3>\r\n    <p> Through this visually interactive module, students will learn to plot a point on Cartesian plane from its x-y coordinates. To plot a point P with coordinates \\(a\\) and \\(b\\) on Cartesian plane &mdash; </p>\r\n    <ul class=\"a\">\r\n      <li> Start at the origin (i.e. the point with coordinates (0, 0)). Then move \\(a\\) units along the x-axis. A positive sign for \\(a\\) would mean moving to the right of the origin while a negative sign of \\(a\\) would mean moving to the left of the origin. </li>\r\n      <li>\n        Starting from the previous step, now move \\(b\\) units along the y-axis. A positive sign for \\(b\\) would mean moving upward while a negative sign for \\(b\\) would mean moving downward.\r\n      </li>\r\n    </ul>\r\n    <br>\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-responsive>\r\n  </div>\r\n</template>\r\n<script>\r\nimport Boxes from './Boxes.js'\r\nexport default {\r\n  name: 'Tools',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Draw a Point on Cartesian Plane';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'What is Symmetry?', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Common Geometric Tools', img:'/assets/number-2.svg', action: () => this.goto('types')},\r\n      {title: 'MagicGraph',img:'/assets/touch.svg', action: () => this.goto('pg')},\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: 'Draw a Line',\r\n          titleTemplate: '%s - Learn interactively',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {name: 'description', content: 'Learn interactively about Thales Theorem'}\r\n                ]\r\n        }\r\n   },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import 'src/styles/edliy-box.scss';\r\n@import 'src/styles/subtopic-menu.scss';\r\n@import 'src/styles/edliy-box-about.scss';\r\n@import 'src/styles/screen-sizes.scss';\r\n.icn{\r\ncolor: var(--v-red-base);;\r\n}\r\n</style>\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=7e5f1b45&\"\nimport script from \"./Lesson.vue?vue&type=script&lang=js&\"\nexport * from \"./Lesson.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Lesson.vue?vue&type=style&index=0&id=7e5f1b45&prod&lang=scss&\"\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":""}