{"version":3,"sources":["webpack:///./src/components/mathematics/Math6thGrade/demoTriangle/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoTriangle/Boxes.js","webpack:///src/components/mathematics/Math6thGrade/demoTriangle/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoTriangle/Lesson.vue?c4f0","webpack:///./src/components/mathematics/Math6thGrade/demoTriangle/Lesson.vue?24e6","webpack:///./src/components/mathematics/Math6thGrade/demoTriangle/Lesson.vue?33b9"],"names":["ref","attrs","staticClass","_v","_vm","_self","staticRenderFns","Boxes","box1","graph","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","polygon","makeResponsive","placeLogo","placeTitle","analytics","placeUndo","setLabel","label","setAttribute","alignX","offset","CssStyle","fontSize","on","this","erase","placeRedo","i","eggs","placeEggs","Pt0","drawPoint","setSize","labelIt","Pt1","Pt2","Pt3","X","Y","Horz","drawDash","Vert","shape","drawTriangle","fillOpacity","fillColor","borders","dash","strokeColor","tri2","sq","placeSq","line1","placeMiddleText","color","line2","placeLeftText","line3","unsuspendUpdate","name","created","$store","commit","title","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","meta","content","vmid","component"],"mappings":"qJAA4D,EAAU,W,IAAgBA,EAAI,KAAQ,EAAK,EAAI,S,OAAmE,iBAAQ,IAAK,SAAkEA,GAAI,8DAAK,IAAK,SAAiNC,GAAK,GAAC,0D,IAAC,MAAmB,yLAAE,MAAK,CAAOC,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CAC/jB,mBACyC,IAAC,IAAqB,EAAmBC,YAClF,IAAC,OAAY,EAAO,EAAC,MAAI,G,OAAIC,EAAG,IAACC,CAAK,EAAG,2SAAC,WAC1C,IAAC,OAAY,EAAO,EAAC,MAAI,G,OAAID,EAAG,IAACC,CAAK,EAAG,kRAAC,WAC1C,IAAC,OAAY,EAAO,EAAC,MAAI,G,OAAID,EAAG,IAACC,CAAK,EAAG,sJAAC,W,IAA+CH,OAA2B,EAAI,EAAI,S,OAAoDA,MAAY,8BAAe,YAAQ,gBAClN,wDAEF,YAAiBI,gB,gEC4CXC,EAAQ,CAEVC,KAAM,WAEN,IAAIC,EAAQC,IAAIC,SAASC,UAAU,UAAU,CAACC,YAAa,EAAE,EAAG,GAAI,IAAK,GACrEC,iBAAiB,EAAMC,MAAK,EAAOC,MAAM,CAACC,SAAQ,GAClDC,MAAK,EAAMC,eAAc,EAAOC,gBAAe,EAC/CC,IAAI,CAACC,SAAQ,GAAQC,KAAK,CAACD,SAAQ,KAEvCb,EAAMe,gBAENf,EAAMgB,QAAQV,KAAKW,YAAY,EAC/BjB,EAAMgB,QAAQE,MAAM,SAAS,GAC7BlB,EAAMgB,QAAQE,MAAM,QAAQ,GAC5BlB,EAAMgB,QAAQE,MAAM,QAAQ,GAC5BlB,EAAMgB,QAAQE,MAAM,SAAS,GAC7BlB,EAAMgB,QAAQE,MAAM,UAAU,GAC9BlB,EAAMgB,QAAQE,MAAM,SAAS,GAC7BlB,EAAMgB,QAAQG,MAAMC,eAAiB,OACrCpB,EAAMgB,QAAQK,MAAMC,aAAa,EACjCtB,EAAMgB,QAAQO,KAAKC,WAAU,EAC7BxB,EAAMgB,QAAQS,MAAMD,WAAU,EAC9BxB,EAAMgB,QAAQU,KAAKF,WAAU,EAC7BxB,EAAMgB,QAAQW,QAAQH,WAAU,EAGhCI,eAAe5B,GAEf6B,eAAU7B,GACV8B,eAAW9B,EAAO,qBAAsB,6CAExC,IAAI+B,EAAYC,eAAUhC,EAAO,QACjC+B,EAAUE,SAAS,8BACnBF,EAAUG,MAAMC,aAAa,CAAC3B,SAAQ,EAAO4B,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KACtHR,EAAUS,GAAG,QAAQ,WAAaC,KAAKP,MAAMC,aAAa,CAAC3B,SAAQ,OACnEuB,EAAUS,GAAG,OAAO,WAAaC,KAAKP,MAAMC,aAAa,CAAC3B,SAAQ,OAElE,IAAIkC,EAAQC,eAAU3C,GACtB0C,EAAMT,SAAS,0BACfS,EAAMR,MAAMC,aAAa,CAAC3B,SAAQ,EAAO4B,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KAClHG,EAAMF,GAAG,QAAQ,WAAaC,KAAKP,MAAMC,aAAa,CAAC3B,SAAQ,OAC/DkC,EAAMF,GAAG,OAAO,WAAaC,KAAKP,MAAMC,aAAa,CAAC3B,SAAQ,OAE9D,IAAIoC,EAAI,EACJC,EAAOC,eAAU9C,GACrB6C,EAAK,GAAGV,aAAa,CAAC3B,QAAQ,kBAAIoC,GAAG,KAErCC,EAAK,GAAGV,aAAa,CAAC3B,QAAQ,kBAAIoC,GAAG,KAErCC,EAAK,GAAGV,aAAa,CAAC3B,QAAQ,kBAAIoC,GAAG,KAGrC,IAAIG,EAAMC,eAAUhD,EAAO,IAAK,GAChCiD,eAAQjD,EAAO+C,EAAK,GACpBG,eAAQlD,EAAO+C,EAAK,KAGpB,IAAII,EAAMH,eAAUhD,EAAO,IAAK,GAChCiD,eAAQjD,EAAOmD,EAAK,GACpBD,eAAQlD,EAAOmD,EAAK,KAIpB,IAAIC,EAAMJ,eAAUhD,EAAO,IAAK,GAChCiD,eAAQjD,EAAOoD,EAAK,GACpBF,eAAQlD,EAAOoD,EAAK,KAGpB,IAAIC,EAAML,eAAUhD,GAAO,kBAAIoD,EAAIE,OAAK,kBAAIH,EAAII,OAChDN,eAAQjD,EAAOqD,EAAK,GACpBH,eAAQlD,EAAOqD,EAAK,KAGpBA,EAAIlB,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,KAChC,IAAIY,EAAOC,eAASzD,EAAOoD,EAAKC,GAEhCG,EAAKrB,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,KACjC,IAAIc,EAAOD,eAASzD,EAAOmD,EAAKE,GAEhCK,EAAKvB,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,KACjC,IAAIe,EAAQC,eAAa5D,EAAOmD,EAAKJ,EAAKK,GAE1CO,EAAMxB,aAAa,CAAC0B,YAAY,WAAW,OAAM,GAAHjB,EAAa,EAAe,IAAOkB,UAAU,OAAQC,QAAQ,CAACvD,SAAQ,EAAMwD,KAAK,EAAGC,YAAY,QAAShD,YAAY,KACnK,IAAIiD,EAAON,eAAa5D,EAAOmD,EAAKC,EAAKC,GAEzCa,EAAK/B,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,GAAGiB,YAAY,WAAW,OAAM,GAAHjB,EAAa,EAAe,IAAOkB,UAAU,MAAOC,QAAQ,CAACvD,SAAQ,EAAOyD,YAAY,QAAShD,YAAY,KAC3K,IAAIkD,EAAKC,eAAQpE,EAAO,CAAC,kBAAI+C,EAAIO,KAAK,kBAAIP,EAAIQ,MAAK,CAAC,kBAAIH,EAAIE,KAAK,kBAAIH,EAAII,MAAM,SAC/EY,EAAGhC,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,GAAGiB,YAAY,GAAKE,QAAQ,CAACvD,SAAQ,EAAOyD,YAAY,QAAShD,YAAY,KAoB5Gc,EAAUS,GAAG,QAAQ,WAChBI,EAAE,EAELA,GAAG,EAIDA,EAAE,KAGNF,EAAMF,GAAG,QAAQ,WACZI,EAAE,EAELA,GAAG,EAIDA,EAAE,KAGN,IAAIyB,EAAQC,eAAgBtE,EAAO,EAAG,KAAM,wBAC5CqE,EAAMlC,aAAa,CAACoC,MAAM,SAC1B,IAAIC,EAAQC,eAAczE,EAAO,EAAG,IAAK,0BACzCwE,EAAMrC,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,GAAG2B,MAAM,QAC3C,IAAIG,EAAQD,eAAczE,EAAO,EAAG,KAAK,iBAAI,kDAC7C0E,EAAMvC,aAAa,CAAC3B,QAAQ,kBAAIoC,EAAE,GAAG2B,MAAM,UAG3CvE,EAAM2E,oBAGK7E,IChJA,GACf8E,KAAA,eACAC,QAAA,WACA,KAAAC,OAAAC,OAAA,yBACA,IAAAC,EAAA,qBACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GAQA,IAAAC,GAAA,EACA,KAAAH,OAAAC,OAAA,4BAAAE,GACA,IAAAC,GAAA,EACA,KAAAJ,OAAAC,OAAA,yBAAAG,GACA,IAAAC,GAAA,EACA,KAAAL,OAAAC,OAAA,8BAAAI,GACA,IAAAC,GAAA,EACA,KAAAN,OAAAC,OAAA,2BAAAK,IAEAC,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACAzF,EAAAC,QAEA0F,SAAA,WACA,OAAAT,MAAA,qBAEAU,KAAA,EAAAd,KAAA,WAAAe,QAAA,uCACA,CAAAC,KAAA,cAAAhB,KAAA,cAAAe,QAAA,oDC7E6X,I,wBCQzXE,EAAY,eACd,EACA,EACAhG,GACA,EACA,KACA,KACA,MAIa,aAAAgG,E,6CCnBf,W","file":"js/chunk-292add16.23c830e2.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    What is a Triangle?\\n  \")]),_c('br'),_vm._m(0),_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Area of a Triangle\\n  \")]),_c('br'),_vm._m(1),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Area of a Triangle\\n  \")]),_c('br'),_c('h5',[_vm._v(\" Getting Started \")]),_vm._m(2),_c('h5',[_vm._v(\" Icons on the MagicGraph \")]),_vm._m(3),_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    A triangle is a shape that is obtained by connecting three points on the same plane with straight lines. \"),_c('br'),_c('br'),_vm._v(\"\\n\\n    The three points are called vertices of the triangle, and three straight lines\\n    connecting these points are called sides of the triangle.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    The area of a triangle is the span of the region enclosed between the three sides of the triangle.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    For a triangle with height \\\\(h\\\\) and base \\\\(b\\\\), the area is given by\\n    $$A = \\\\frac{1}{2} \\\\times b \\\\times h$$\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    This MagicGraph offers a visual-interactive illustration that explains why the area of a triangle is \\\\(bh/2\\\\).\\n    \"),_c('br'),_c('br')])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    Tap on \"),_c('i',{staticClass:\"redoer ma-1\"}),_vm._v(\" button  to go to the next step. Tap on \"),_c('i',{staticClass:\"undoer ma-1\"}),_vm._v(\" button to go to the previous step.\\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//placePoint(board, positionX, positionY, size, cols1, cols2)\r\n//placeDash(board, Pt1, Pt2, width, cols)\r\n  placeArc,\r\n  placeLogo,\r\n  placeErase,\r\n  placeShuffle,\r\n  placeTest,\r\n  placeSeg,\r\n  setConfig,\r\n  placeStat,\r\n  drawTriangle,\r\n  shuffle,\r\n  placeEraseLeft,\r\n  placeTapeHori,\r\n  placeTapeVert,\r\n  placeSq,\r\n  placeBoldText,\r\n  placeRedo,\r\n  placeUndo,\r\n  drawPoint,\r\n  drawTri,\r\n  setSize,\r\n  labelIt,\r\n  drawDash,\r\n  placeEggs\r\n} from '../Utils';\r\nconst Boxes = {\r\n    //JXG.Options.line.highlight=false;\r\n    box1: function () {\r\n    //Create the Board\r\n    var graph = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-5, 16, 15, -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    graph.suspendUpdate();\r\n    // Layering\r\n    graph.options.axis.strokeWidth=0;\r\n    graph.options.layer['image']=17;\r\n    graph.options.layer['text']=16;\r\n    graph.options.layer['line']=16;\r\n    graph.options.layer['point']=17;\r\n    graph.options.layer['glider']=17;\r\n    graph.options.layer['angle']=18;\r\n    graph.options.board.minimizeReflow = 'none';\r\n    graph.options.point.showInfobox =false;\r\n    graph.options.line.highlight=false;\r\n    graph.options.image.highlight=false;\r\n    graph.options.text.highlight=false;\r\n    graph.options.polygon.highlight=false;\r\n//    graph.options.text.display='internal';\r\n    //Make the board responsive\r\n    makeResponsive(graph);\r\n    // Creat titleStyle\r\n    placeLogo(graph);\r\n    placeTitle(graph, 'Area of a Triangle', '(Showing that area of a triangle is bh/2)');\r\n////////////////////////////////////////////////////////////////////////////////\r\n    var analytics = placeUndo(graph, 'left');\r\n    analytics.setLabel('Tap to Go to Previous Step');\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 = placeRedo(graph);\r\n    erase.setLabel('Tap to Go to Next Step')\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\n    var i = 0;\r\n    var eggs = placeEggs(graph);\r\n    eggs[0].setAttribute({visible:()=>i>=0});\r\n    ////////////////\r\n    eggs[1].setAttribute({visible:()=>i>=1});\r\n    ////////////////\r\n    eggs[2].setAttribute({visible:()=>i>=2});\r\n    /////////////////////////////////////////////////////////\r\n\r\n    var Pt0 = drawPoint(graph, 2.5, 0);\r\n    setSize(graph, Pt0, 3);\r\n    labelIt(graph, Pt0, 'B');\r\n    //placePoint(graph,  2.5, 0, 3, 'red', 'red');\r\n    //placeLabel(graph, Pt0, 'B',-15, -15);\r\n    var Pt1 = drawPoint(graph, 2.5, 6);\r\n    setSize(graph, Pt1, 3);\r\n    labelIt(graph, Pt1, 'A');\r\n    //placePoint(graph,  2.5, 6, 3, 'red', 'red');\r\n    //Pt1.moveTo([0, ()=>Pt1.Y()]);\r\n    //placeLabel(graph, Pt1, 'A', -15, 15);\r\n    var Pt2 = drawPoint(graph, 7.5, 0);\r\n    setSize(graph, Pt2, 3);\r\n    labelIt(graph, Pt2, 'C');\r\n    //placePoint(graph,  7.5, 0, 3, 'red', 'red');\r\n    //placeLabel(graph, Pt2, 'C', 15, -15);\r\n    var Pt3 = drawPoint(graph, ()=>Pt2.X(), ()=>Pt1.Y());\r\n    setSize(graph, Pt3, 3);\r\n    labelIt(graph, Pt3, 'D');\r\n    //placePoint(graph, ()=>Pt2.X(), ()=>Pt1.Y(), 3, 'red', 'red');\r\n    //placeLabel(graph, Pt3, 'D', 15, 15);\r\n    Pt3.setAttribute({visible:()=>i>0});\r\n    var Horz = drawDash(graph, Pt2, Pt3);\r\n    //placeDash(graph, [()=>Pt2.X(), 0.0], [()=>Pt2.X(), ()=>Pt1.Y()], 2, 'black');\r\n    Horz.setAttribute({visible:()=>i>0});\r\n    var Vert = drawDash(graph, Pt1, Pt3);\r\n    //placeDash(graph, [2.5, ()=>Pt1.Y()], [()=>Pt2.X(), ()=>Pt1.Y()], 2, 'black');\r\n    Vert.setAttribute({visible:()=>i>0});\r\n    var shape = drawTriangle(graph, Pt1, Pt0, Pt2);\r\n    //placeTri(graph, [()=>Pt1.X(), ()=>Pt1.Y()],[()=>Pt0.X(), ()=>Pt0.Y()], [()=>Pt2.X(), ()=>Pt2.Y()],'blue');\r\n    shape.setAttribute({fillOpacity:function(){if(i==2){return 0.}else{return 0.5}}, fillColor:'blue', borders:{visible:true, dash:1, strokeColor:'black', strokeWidth:2}});\r\n    var tri2 = drawTriangle(graph, Pt1, Pt2, Pt3);\r\n    //placeTri(graph,[()=>Pt1.X(), ()=>Pt1.Y()],[()=>Pt2.X(), ()=>Pt2.Y()], [()=>Pt2.X(), ()=>Pt1.Y()], 'red');\r\n    tri2.setAttribute({visible:()=>i>0, fillOpacity:function(){if(i==2){return 0.}else{return 0.5}}, fillColor:'red', borders:{visible:false, strokeColor:'black', strokeWidth:2}});\r\n    var sq = placeSq(graph, [()=>Pt0.X(), ()=>Pt0.Y()],[()=>Pt2.X(), ()=>Pt1.Y()], 'green');\r\n    sq.setAttribute({visible:()=>i>1, fillOpacity:0.5, borders:{visible:false, strokeColor:'black', strokeWidth:2}});\r\n    //placeLine(graph, [2., -2.], [7., -2.], 4, 'grey');\r\n  //  placeImage(graph,'/assets/substract.svg', 2.2, -4.5, 5, 0);\r\n    //var circOne = placeImage(graph,'/assets/fbd/circleWhite.svg',  2.0, -2.5, 0, 0);\r\n    //var circTwo = placeImage(graph,'/assets/fbd/circleWhite.svg',  4.5, -2.5, 0, 0);\r\n    //var circThree =placeImage(graph,'/assets/fbd/circleWhite.svg',  7.0, -2.5, 0, 0);\r\n  //  var circ =placeImage(graph,'/assets/fbd/circle.svg', 2.0, -2.5, 0, 0);\r\n    /*var one =placeImage(graph,'/assets/eggOne.svg', -1.6, 10.1, 0.8, 0);\r\n    one.setAttribute({opacity:1.0});\r\n    var two = placeImage(graph,'/assets/eggTwo.svg',-1.6, 9.1, 0.8, 0);\r\n    two.setAttribute({opacity:function(){if(i>0){return 1}else{return 0.}}});\r\n    var three =placeImage(graph,'/assets/eggThree.svg', -1.6, 8.1, 0.8, 0);\r\n    three.setAttribute({opacity:function(){if(i>1){return 1}else{return 0.}}});*/\r\n    //one.on('down', function(){circ.moveTo([2.0, -2.5], 100); i=0;});\r\n    //two.on('down', function(){circ.moveTo([4.5, -2.5], 100); i=1;});\r\n    //three.on('down', function(){circ.moveTo([7.0, -2.5], 100); i=2});\r\n    function movePt2(){\r\n    Pt2.moveTo([3+Math.round(4*Math.random()), 0],100);};\r\n    function movePt1(){\r\n    Pt1.moveTo([0.0, 3+Math.round(4*Math.random())],100);};\r\n    analytics.on('down', function(){\r\n      if(i>0)\r\n      {\r\n      i-=1;\r\n      }\r\n      else\r\n      {\r\n        i=0;\r\n      }\r\n    });\r\n    erase.on('down', function(){\r\n      if(i<2)\r\n      {\r\n      i+=1;\r\n      }\r\n      else\r\n      {\r\n        i=2;\r\n      }\r\n    })\r\n    var line1 = placeMiddleText(graph, 2, 10.5, 'Area of Triangle ABC');\r\n    line1.setAttribute({color:'blue'});\r\n    var line2 = placeLeftText(graph, 3, 9.5, '= Area of Triangle ACD');\r\n    line2.setAttribute({visible:()=>i>0, color:'red'});\r\n    var line3 = placeLeftText(graph, 5, 8.5, ()=>'= 1/2 x Area of Rectangle ABCD = ' + '1/2 x '+'b'+' x '+'h');\r\n    line3.setAttribute({visible:()=>i>1, color:'green'});\r\n\r\n///////////////////////////////////////////////////////////////////////\r\n    graph.unsuspendUpdate();\r\n                      },\r\n              }\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\r\n      What is a Triangle?\r\n    </h3>\r\n    <br>\r\n    <p>\r\n      A triangle is a shape that is obtained by connecting three points on the same plane with straight lines. <br><br>\r\n\r\n      The three points are called vertices of the triangle, and three straight lines\r\n      connecting these points are called sides of the triangle.\n    </p>\r\n    <h3 ref=\"intro\">\n      Area of a Triangle\n    </h3>\r\n    <br>\r\n    <p>\n      The area of a triangle is the span of the region enclosed between the three sides of the triangle.\r\n      <br> <br>\r\n      For a triangle with height \\(h\\) and base \\(b\\), the area is given by\r\n      $$A = \\frac{1}{2} \\times b \\times h$$\r\n    </p>\r\n\r\n    <h3 ref=\"pg\">\n      MagicGraph | Area of a Triangle\n    </h3>\r\n    <br>\r\n    <h5> Getting Started </h5>\r\n    <p>\n      This MagicGraph offers a visual-interactive illustration that explains why the area of a triangle is \\(bh/2\\).\r\n      <br><br>\n    </p>\r\n    <h5> Icons on the MagicGraph </h5>\r\n    <p>\r\n      Tap on <i class=\"redoer ma-1\" /> button  to go to the next step. Tap on <i class=\"undoer ma-1\" /> button to go to the previous step.\r\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: 'TriangleArea',\r\n  created () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Area of a Triangle';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    /*let newTopics = [\r\n      {title: 'Parallel Lines', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Transversal', img:'/assets/number-2.svg', action: () => this.goto('trans')},\r\n      {title: 'Pair of Angles', img:'/assets/number-3.svg', action: () => this.goto('angles')},\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: 'Area of a Triangle',\r\n        //  titleTemplate: '%s - Learn interactively',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {vmid:'description',name: 'description', content: 'Learn interactively about area of a triangle'}\r\n                ]\r\n        }\r\n   },\r\n}\r\n</script>\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</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=31b7c1cc&\"\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=31b7c1cc&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","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=31b7c1cc&prod&lang=scss&\""],"sourceRoot":""}