{"version":3,"sources":["webpack:///./src/components/mathematics/Math6thGrade/demoMean/Lesson.vue?5c7e","webpack:///./src/components/mathematics/Math6thGrade/demoMean/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoMean/Boxes.js","webpack:///src/components/mathematics/Math6thGrade/demoMean/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoMean/Lesson.vue?2bad","webpack:///./src/components/mathematics/Math6thGrade/demoMean/Lesson.vue?a060"],"names":["ref","attrs","staticClass","_v","_vm","_self","staticRenderFns","Boxes","box1","brd1","JXG","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","visible","grid","showCopyright","showNavigation","pan","enabled","zoom","suspendUpdate","options","strokeWidth","layer","board","minimizeReflow","point","showInfobox","line","highlight","image","text","makeResponsive","placeLogo","placeTitle","placeMiddleText","placeText","width","num_height","rectLeft","rectRight","crectLeft","crectRight","rectLeftVisibility","rectRightVisibility","crectLeftVisibility","crectRightVisibility","textLeft","textRight","_loop","y","v1","v2","rectyLeft","create","opacity","fixed","rectyRight","crectyLeft","textyLeft","setAttribute","crectyRight","textyRight","on","changeLeftRectColorxy","changeRightRectColorxy","push","mass1","mass2","num1","num2","massLeft","massRight","current_visibility1","current_visibility2","i","txt1","toFixed","color","txt2","valueOf","unsuspendUpdate","name","created","_this","$store","commit","title","newTopics","img","action","goto","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"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","file":"js/chunk-18689db1.54cfea5d.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=561595d7&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Ratios\\n  \")]),_vm._m(0),_c('h3',{ref:\"types\"},[_vm._v(\"\\n    Notation to Express Ratios\\n  \")]),_vm._m(1),_c('br'),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Playing with Ratios\\n  \")]),_c('br'),_c('p',[_vm._v(\"\\n    You are given two weighing scales: a red scale and a blue scale. The red scale can only carry red bricks while the blue scale can only carry blue bricks.\\n    Each red block weighs 3 kg while each blue block weighs 4 kg. Your can add or remove bricks by tapping on the empty squares over each scale.\\n    The MagicGraph shows the ratio of red bricks to blue bricks as you add or remove bricks.\\n  \")]),_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('p',[_vm._v(\"\\n    In mathematics, a ratio is used to compare two objects or quantities — such as counts, sizes, or weights of objects. Suppose you're comparing two objects.\\n    Then, a ratio of \"),_c('i',[_vm._v(\"m:n\")]),_vm._v(\" means that there are \"),_c('i',[_vm._v(\"m\")]),_vm._v(\" counts of object 1 for every \"),_c('i',[_vm._v(\"n\")]),_vm._v(\" counts of object 2.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Let's take an example. Imagine you are in a class of 40 students out of which 30 are boys and 10 are girls.\\n    Then the boys to girls ratio in the class would be 3:1 — basically telling us that there three times more boys in the class than girls.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Let's take another example. Imagine you were given a bruit basket.\\n    You find that the basket contains 6 apples, 4 oranges, and 8 peaches. So, what is the ratio of apples to oranges in the basket?\\n    That answer is 3:2 — telling us that there are 3 apples for every 2 oranges in the basket.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('ul',{staticClass:\"a\"},[_c('li',[_c('h5',[_vm._v(\" Using a Colon\")]),_vm._v(\" The most common way to express a ratio is using a colon.\\n      For example — in the first example above, the ratio of boys to girls, using a colon, can be expressed as 1:3\\n    \")]),_c('li',[_c('h5',[_vm._v(\" As a Fraction \")]),_vm._v(\" A ratio can also be expressed as a fraction. For example — a ratio of 1:3 can also be expressed as 1/3.\\n    \")]),_c('li',[_c('h5',[_vm._v(\" Using '\"),_c('i',[_vm._v(\" is to \")]),_vm._v(\"' \")]),_vm._v(\" Sometimes ratios are also expressed in words using '\"),_c('i',[_vm._v(\"is to\")]),_vm._v(\"'. For example, a ratio of 1:3 can also be expressed as '1 \"),_c('i',[_vm._v(\"is to\")]),_vm._v(\" 3'.\\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    placeArc,\r\n    placeLogo\r\n} from '../edliy_utils-fractions';\r\nconst Boxes = {\r\n    //JXG.Options.line.highlight=false;\r\n    box1: function () {\r\n    //Create the Board\r\n    var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-6, 16, 14, -4],\r\n        keepaspectratio: true, axis:false, ticks:{visible:true},\r\n        grid:true, showCopyright:false, showNavigation:false,\r\n        pan:{enabled:false}, zoom:{enabled:false}});\r\n\r\n    brd1.suspendUpdate();\r\n    // Layering\r\n    brd1.options.axis.strokeWidth=0;\r\n    brd1.options.layer['image']=15;\r\n    brd1.options.layer['text']=16;\r\n    brd1.options.layer['line']=16;\r\n    brd1.options.layer['point']=17;\r\n    brd1.options.layer['glider']=17;\r\n    brd1.options.layer['angle']=18;\r\n    brd1.options.board.minimizeReflow = 'none';\r\n    brd1.options.point.showInfobox =false;\r\n    brd1.options.line.highlight=false;\r\n    brd1.options.image.highlight=false;\r\n    brd1.options.text.highlight=false;\r\n//    brd1.options.text.display='internal';\r\n    //Make the board responsive\r\n    makeResponsive(brd1);\r\n    // Placing Logo\r\n    placeLogo(brd1);\r\n    //Placing Title\r\n    placeTitle(brd1, 'Playing with Ratios', '(Click on a empty box to fill it with a brick)');\r\n    placeMiddleText(brd1,  4, 13, 'Fill the empty racks such that the two scales weigh the same');\r\n    placeText(brd1,  8.5, 9.5, 18, 'Ratio of RED bricks to BLUE bricks');\r\n    placeText(brd1,  8.5, 7.5, 18, 'Each RED brick weighs 3 kg');\r\n    placeText(brd1,  8.5, 6.5, 18, 'Each BLUE brick weighs 4 kg');\r\n    placeText(brd1,  8.5, 5.5, 18, 'Ratio of RED scale to BLUE scale readings');\r\n    //dragMe(brd1, 5, 5);\r\n    //var stone=placeLine(brd1, [-2,0], [3,5], 10, 'grey');\r\n  //  placeImage(brd1, '/assets/purpleSquare.svg',-8, 6, 2);\r\n  //  placeMiddleText(brd1, -7, 7, '3 kg');\r\n    //placeMiddleText(brd1, -7, 4, 'The racks on the left can only be filled with red squares');\r\n  //  placeImage(brd1, '/assets/orangeSquare.svg', 6, 6, 2);\r\n  //  placeMiddleText(brd1, 4, 4, 'The racks on the right can only be filled with blue squares');\r\n  //  placeMiddleText(brd1, 7, 7, '4 kg');\r\n    //Titles and subtitle\r\n    //var title = brd1.create('text', [12, 22, '<b> Center of Mass <b>'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(28*brd1.canvasWidth/500.)}},);\r\n    //brd1.create('image', ['/assets/crosshair.svg', [7, 11], [1,1]], {visible: true, fixed:true});\r\n    //var rectImg = brd1.create('image', ['/assets/orangeSquare.svg', [20,16], [2,2]], {visible: true, fixed:true});\r\n    //var massKg = brd1.create('text', [21, 17, '1 kg'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    //FIRST\r\n    var width=2;\r\n    var num_height=5;\r\n    var num_width=2;\r\n    var rectLeft=[];\r\n    var rectRight=[];\r\n    var crectLeft=[];\r\n    var crectRight=[];\r\n    var rectLeftVisibility=[];\r\n    var rectRightVisibility=[];\r\n    var crectLeftVisibility=[];\r\n    var crectRightVisibility=[];\r\n    var textLeft=[];\r\n    var textRight=[];\r\n    var cmx=0,cmy=0;\r\n\r\n    for (let y=0; y< num_height; y++)\r\n        {\r\n            let v1 = true;\r\n            let v2 = false;\r\n            let rectyLeft = brd1.create('image', ['/assets/whiteSquare.svg', [-2*width, y*width], [2.01,2.01]], {visible: v1, opacity:0.25, fixed:true});\r\n            let rectyRight = brd1.create('image', ['/assets/whiteSquare.svg', [width, y*width], [2.01,2.01]], {visible: v1, opacity:0.25, fixed:true});\r\n            let crectyLeft = brd1.create('image', ['/assets/purpleSquare.svg', [-2*width, y*width], [2.01,2.01]], {visible: v2, fixed:true});\r\n            let textyLeft = placeMiddleText(brd1, -2*width+0.5*width, y*width+0.5*width, '3 kg');\r\n            textyLeft.setAttribute({visible:v2});\r\n            let crectyRight = brd1.create('image', ['/assets/orangeSquare.svg', [width, y*width], [2.01,2.01]], {visible: v2, fixed:true});\r\n            let textyRight = placeMiddleText(brd1, width+0.5*width, y*width+0.5*width, '4 kg');\r\n            textyRight.setAttribute({visible:v2});\r\n            rectyLeft.on('up', function(){changeLeftRectColorxy(y); });\r\n            crectyLeft.on('up', function(){changeLeftRectColorxy(y); });\r\n            rectyRight.on('up', function(){changeRightRectColorxy(y); });\r\n            crectyRight.on('up', function(){changeRightRectColorxy(y); });\r\n            rectLeft.push(rectyLeft);\r\n            rectRight.push(rectyRight);\r\n            crectLeft.push(crectyLeft);\r\n            crectRight.push(crectyRight);\r\n            textLeft.push(textyLeft);\r\n            textRight.push(textyRight);\r\n            rectLeftVisibility.push(v1);\r\n            crectLeftVisibility.push(v2);\r\n            rectRightVisibility.push(v1);\r\n            crectRightVisibility.push(v2);\r\n        }\r\n\r\n    /*var j=0;\r\n    var array =[7.5, 5.5, 6.5, 4.5];\r\n    var darray=[8, 6, 7, 5];\r\n    var shu =brd1.create('image', ['/assets/shuffle.svg', [-2, -3.83], [4.0, 4.0]], {visible:true, fixed:true, opacity:1});\r\n    hoverMe(brd1, shu, 'Tap to Shuffle', 5, -15);\r\n    shu.on('down', function(){if(j<3){return j=j+1}else{return j=0}});\r\n    //brd1.create('image', ['/assets/triangle.svg', [()=>array[j], -1], [1.0, 1.0]], {visible:true, fixed:true, opacity:1});\r\n    var perm =[];\r\n    */\r\n    var mass1=0, mass2=0, num1=0, num2=0;\r\n    var massLeft=3;\r\n    var massRight=4;\r\n////////////////////////////////////////////////////////////////\r\n//brd1.create('image', ['/assets/triangle.svg', [7, 12], [1.0, 1.0]], {visible:true, fixed:true, opacity:1});\r\n////////////////////////////////////////////////////////////////////////////////////\r\n    function changeLeftRectColorxy(y)\r\n    {\r\n\r\n        let current_visibility1 = rectLeftVisibility[y];\r\n        let current_visibility2 = crectLeftVisibility[y];\r\n\r\n        if (current_visibility1==true && current_visibility2==false)\r\n        {\r\n            current_visibility1=false;\r\n            current_visibility2=true;\r\n\r\n        }\r\n        else{\r\n            current_visibility1=true;\r\n            current_visibility2=false;\r\n        }\r\n\r\n        rectLeft[y].setAttribute({visible: current_visibility1});\r\n        crectLeft[y].setAttribute({visible: current_visibility2});\r\n        textLeft[y].setAttribute({visible: current_visibility2});\r\n        rectLeftVisibility[y]=current_visibility1;\r\n        crectLeftVisibility[y]=current_visibility2;\r\n        mass1 = 0;\r\n        num1 = 0;\r\n        for (let i=0;i< num_height;i++)\r\n             {\r\n                 if (crectLeftVisibility[i]==true)\r\n                 {\r\n                    mass1+=massLeft;\r\n                    num1+=1;\r\n                 }\r\n             }\r\n     }\r\n\r\n     function changeRightRectColorxy(y)\r\n     {\r\n\r\n         let current_visibility1 = rectRightVisibility[y];\r\n         let current_visibility2 = crectRightVisibility[y];\r\n\r\n         if (current_visibility1==true && current_visibility2==false)\r\n         {\r\n             current_visibility1=false;\r\n             current_visibility2=true;\r\n\r\n         }\r\n         else{\r\n             current_visibility1=true;\r\n             current_visibility2=false;\r\n         }\r\n\r\n         rectRight[y].setAttribute({visible: current_visibility1});\r\n         crectRight[y].setAttribute({visible: current_visibility2});\r\n         textRight[y].setAttribute({visible: current_visibility2});\r\n         rectRightVisibility[y]=current_visibility1;\r\n         crectRightVisibility[y]=current_visibility2;\r\n         mass2 = 0;\r\n         num2 = 0;\r\n         for (let i=0;i< num_height;i++)\r\n              {\r\n                  if (crectRightVisibility[i]==true)\r\n                  {\r\n                     mass2+=massRight;\r\n                     num2+=1;\r\n                  }\r\n              }\r\n      }\r\n    var txt1=placeMiddleText(brd1, -3, -2.3, function(){return '' + (mass1).toFixed(0) + ' kg'});\r\n    txt1.setAttribute({color:'white'});\r\n    var txt2=placeMiddleText(brd1, 3, -2.3, function(){return '' + (mass2).toFixed(0) + ' kg'});\r\n    txt2.setAttribute({color:'white'});\r\n    brd1.create('image', ['/assets/red-scale.svg', [-5, -3.83], [4.0, 4.0]], {visible:true, fixed:true, opacity:1});\r\n    brd1.create('image', ['/assets/blue-scale.svg', [1, -3.83], [4.0, 4.0]], {visible:true, fixed:true, opacity:1});\r\n    placeMiddleText(brd1,  8.5, 8.5, function(){return ''+ num1.valueOf() + ' : ' + num2.valueOf()});\r\n    placeMiddleText(brd1,  8.5, 4.5, function(){return ''+ mass1.valueOf() + ' : ' + mass2.valueOf()});\r\n   //brd1.create('text', [0, -2, function(){return '' + (mass1+mass2).toFixed(2)}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n\r\n  /*  var cgxtxt = brd1.create('text', [1.5, 18, 'X_c_m = '],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    var cgxtxt2 = brd1.create('text', [4, 18.5, ' &sum; m_i x_i '],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'bottom', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    brd1.create('segment',[[3., 18],[5., 18]],{strokeWidth:2, strokeColor:'black', fixed:true});\r\n    var cgxtxt3 = brd1.create('text', [4, 17.5, '&sum;m_i'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n\r\n    var cgytxt = brd1.create('text', [1.5, 15, 'Y_c_m = '],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    var cgytxt2 = brd1.create('text', [4, 15.5, ' &sum; m_i y_i'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'bottom', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    brd1.create('segment',[[3., 15],[5., 15]],{strokeWidth:2, strokeColor:'black', fixed:true});\r\n    var cgytxt3 = brd1.create('text', [4, 14.5, '&sum;m_i'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n\r\n    var ok1 = brd1.create('image', ['/assets/check.svg', [10, 17.5], [1 , 1]], {visible: false, fixed: true});\r\n    var ok2 = brd1.create('image', ['/assets/check.svg', [10, 14.5], [1 , 1]], {visible: false, fixed: true});\r\n    var wrong1 = brd1.create('image', ['/assets/cross.svg', [10, 17.5], [1 , 1]], {visible: false, fixed: true});\r\n    var wrong2 = brd1.create('image', ['/assets/cross.svg', [10, 14.5], [1 , 1]], {visible: false, fixed: true});\r\n\r\n    var pointCM = brd1.create('image', ['/assets/crosshair.svg', [function(){return (masss*cmx0 + mass2*cmx)/(mass2+masss)- 0.5}  ,function(){return (masss*cmy0 + mass2*cmy)/(mass2+masss)- 0.5}], [1,1]], {visible: true, fixed:true});\r\n    var cgx = brd1.create('text', [7, 18, function(){return ' = ' + (mass).toFixed(2)}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    var cgy = brd1.create('text', [7, 15, function(){return ' = ' + ((masss*cmy0 + mass2*cmy)/(mass2+masss)).toFixed(2)}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n    brd1.create('text', [8.5, 11.5, function(){return '= Center of Mass =' + '('+ ((masss*cmx0 + mass2*cmx)/(mass2+masss)).toFixed(2) +','+ ((masss*cmy0 + mass2*cmy)/(mass2+masss)).toFixed(2) +')' }],{visible: true, fixed: true, anchorX: 'left', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(18*brd1.canvasWidth/800.)}},);\r\n    brd1.create('image', ['/assets/check.svg', [12, 15.75], [2 , 2]], {visible: function(){return darray[j]==((masss*cmx0 + mass2*cmx)/(mass2+masss)).toFixed(2)}, fixed: true});\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      Ratios\r\n    </h3>\r\n    <p>\r\n      In mathematics, a ratio is used to compare two objects or quantities &mdash; such as counts, sizes, or weights of objects. Suppose you're comparing two objects.\r\n      Then, a ratio of <i>m:n</i> means that there are <i>m</i> counts of object 1 for every <i>n</i> counts of object 2.\r\n      <br><br>\r\n      Let's take an example. Imagine you are in a class of 40 students out of which 30 are boys and 10 are girls.\r\n      Then the boys to girls ratio in the class would be 3:1 &mdash; basically telling us that there three times more boys in the class than girls.\r\n      <br> <br>\r\n      Let's take another example. Imagine you were given a bruit basket.\r\n      You find that the basket contains 6 apples, 4 oranges, and 8 peaches. So, what is the ratio of apples to oranges in the basket?\r\n      That answer is 3:2 &mdash; telling us that there are 3 apples for every 2 oranges in the basket.\r\n    </p>\r\n    <h3 ref=\"types\">\r\n      Notation to Express Ratios\r\n    </h3>\r\n    <ul class=\"a\">\r\n      <li>\n        <h5> Using a Colon</h5> The most common way to express a ratio is using a colon.\r\n        For example &mdash; in the first example above, the ratio of boys to girls, using a colon, can be expressed as 1:3\n      </li>\r\n      <li>\n        <h5> As a Fraction </h5> A ratio can also be expressed as a fraction. For example &mdash; a ratio of 1:3 can also be expressed as 1/3.\r\n      </li>\r\n      <li>\n        <h5> Using '<i> is to </i>' </h5> Sometimes ratios are also expressed in words using '<i>is to</i>'. For example, a ratio of 1:3 can also be expressed as '1 <i>is to</i> 3'.\r\n      </li>\r\n    </ul>\r\n    <br>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Playing with Ratios\r\n    </h3>\r\n    <br>\r\n    <p>\n      You are given two weighing scales: a red scale and a blue scale. The red scale can only carry red bricks while the blue scale can only carry blue bricks.\r\n      Each red block weighs 3 kg while each blue block weighs 4 kg. Your can add or remove bricks by tapping on the empty squares over each scale.\r\n      The MagicGraph shows the ratio of red bricks to blue bricks as you add or remove bricks.\n    </p>\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: 'Ratio',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Ratios of Numbers ';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'Geometric Tools', 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    let newshowhome = false;\r\n    this.$store.commit('navigation/toggleshowhome', newshowhome);\r\n    let newMath =true;\r\n    this.$store.commit('navigation/replaceMath', newMath);\r\n    let newLeftArrow =true;\r\n    this.$store.commit('navigation/replaceLeftArrow', newLeftArrow);\r\n    let newModule=true;\r\n    this.$store.commit('navigation/replaceModule', newModule);\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: 'Ratio of Numbers',\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=561595d7&\"\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=561595d7&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":""}