{"version":3,"sources":["webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter2/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter2/Boxes.js","webpack:///src/components/mathematics/Math6thGrade/demoPerimeter2/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter2/Lesson.vue?3b97","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter2/Lesson.vue?207e"],"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","analytics","placeShuffle","setLabel","label","setAttribute","alignX","offset","CssStyle","fontSize","on","this","erase","placeErase","rght","placeImage","Pt1","drawPoint","Pt2","Pt3","Pt4","shape","placeSq","X","Y","fillOpacity","console","log","side1","placeTapeHori","point1","point2","strokeColor","color","side3","side2","placeTapeVert","side4","i","j","k","l","findSum","toFixed","firstText","secondText","thirdText","fourthText","plusOne","plusTwo","plusThree","movePt2","x","Math","round","random","y","moveTo","clearVisibility","placeText","unsuspendUpdate","name","created","$store","commit","title","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","meta","content","component"],"mappings":"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","file":"js/chunk-2d0ea0b9.39362227.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 Perimeter of a Geometric Shape?\\n  \")]),_c('p',[_vm._v(\"\\n    Perimeter of a geometric shape is the length of the boundary curve.\\n    Imagine you have to walk along the border of a rectangle or a square until you get back to the same point.\\n    Then the distance travelled is equal to the perimeter of the rectangle or the square.\\n  \")]),_c('h3',{ref:\"formula\"},[_vm._v(\"\\n    Perimeter of a Rectangle\\n  \")]),_c('p',[_vm._v(\"\\n    Perimeter \\\\(R\\\\) of a rectangle with length \\\\(L\\\\) and width \\\\(W\\\\) is given as:\\n    $$ R = 2(L+W)$$\\n  \")]),_c('h3',{ref:\"formula\"},[_vm._v(\"\\n    Perimeter of a Square\\n  \")]),_c('p',[_vm._v(\"\\n    In a square, the length is the same as the width, i.e., \\\\(l =w\\\\).\\n    Thus, substituting \\\\(L =W\\\\) in the expression for the perimeter of a rectangle, we can obtain the expression for the perimeter of a square:\\n    $$ S = 2(L+L) = 4L$$\\n  \")]),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Perimeter of Geometric Shapes\\n  \")]),_c('br'),_c('h5',[_vm._v(\" Getting Started \")]),_vm._m(0),_c('h5',[_vm._v(\" Icons on the MagicGraph \")]),_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('p',[_vm._v(\"\\n    In this MagicGraph, you will learn about how to find the perimeter of a rectangular shape.\\n    Shown in the MagicGraph is a rectangular shape with its sides shown in grey.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Simply tap on a side to pick it. Once picked, the color of the side turns bright blue, and its length is added to the peripheral length.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    You can tap on \"),_c('i',{staticClass:\"shuffler ma-1\"}),_vm._v(\" icon  to shuffle and generate a new shape. You can tap on the\\n    \"),_c('i',{staticClass:\"eraser ma-1\"}),_vm._v(\" icon to erase and start over.\\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  drawPoint,\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  placeTri,\r\n  shuffle,\r\n  placeEraseLeft,\r\n  placeTapeHori,\r\n  placeTapeVert,\r\n  placeSq,\r\n  placeBoldText\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 brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-9, 12, 9, -6],\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    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.layer['image'] =2;\r\n    brd1.options.layer['point'] =3;\r\n//    brd1.options.text.display='internal';\r\n    //Make the board responsive\r\n    makeResponsive(brd1);\r\n    // Creat titleStyle\r\n    placeLogo(brd1);\r\n    //\r\n    placeTitle(brd1, 'Perimeter of a Rectangle', '(Tap on a side to select it. Continue until all sides are selected)');\r\n    //\r\n    var analytics = placeShuffle(brd1, 'left');\r\n    analytics.setLabel('Tap to Shuffle');\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    erase.setLabel('Tap to Erase & Restart')\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 rght = placeImage(brd1, '/assets/checkmark.svg', 3.5, 6., 1.,  0);\r\n  //  placeMiddleText(brd1, 0, 12, ()=>'Given Number =' + NumList[i]);\r\n    /////////////////////////////////////////////////////////\r\n    var Pt1 = drawPoint(brd1, -3, -3);\r\n    Pt1.setAttribute({visible:false});\r\n    //\r\n    var Pt2 = drawPoint(brd1,  3,  -3);\r\n    Pt2.setAttribute({visible:false});\r\n    //\r\n    var Pt3 = drawPoint(brd1,  -3,  3);\r\n    Pt3.setAttribute({visible:false});\r\n    var Pt4 = drawPoint(brd1,  3,  3);\r\n    Pt4.setAttribute({visible:false});\r\n    ////////\r\n    var shape =placeSq(brd1, [()=>Pt1.X(), ()=>Pt1.Y()],[()=>Pt4.X(), ()=>Pt4.Y()],'green');\r\n    shape.setAttribute({fillOpacity:0.5});\r\n    console.log('dsd');\r\n    var side1 = placeTapeHori(brd1, Pt1, Pt2,'');\r\n    side1.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false}, strokeWidth:4, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n ////////////////////////////////////////\r\n    var side3 = placeTapeHori(brd1, Pt3, Pt4,'');\r\n    side3.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false},  strokeWidth:4, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n//////////////////////////////////////////////////////\r\n    var side2 = placeTapeVert(brd1, Pt1, Pt3,'');\r\n    side2.setAttribute({highlight:true, fillOpacity:0.4,  point1:{visible:false},point2:{visible:false}, strokeWidth:4, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n/////////////////////////////////////////////////////////////////////////////////////\r\n    var side4 = placeTapeVert(brd1, Pt2, Pt4,'');\r\n    side4.setAttribute({highlight:true, fillOpacity:0.4,  point1:{visible:false},point2:{visible:false},  strokeWidth:4, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n//////////////////////////////////////////////////action///////////////////\r\nvar i=0, j=0, k=0, l=0;\r\nrght.setAttribute({visible:()=>i+j+k+l==4});\r\nside1.on('down', function(){i=1; side1.setAttribute({strokeColor:'blue', label:{visible:true}})});\r\nside2.on('down', function(){j=1; side2.setAttribute({strokeColor:'blue', label:{visible:true}})});\r\nside3.on('down', function(){k=1; side3.setAttribute({strokeColor:'blue', label:{visible:true}})});\r\nside4.on('down', function(){l=1; side4.setAttribute({strokeColor:'blue', label:{visible:true}})});\r\nvar findSum = function(){return (i*(Pt2.X()-Pt1.X())+ j*(Pt2.Y()-Pt1.Y())+ k*(Pt2.X()-Pt1.X())+l*(Pt2.Y()-Pt1.Y())).toFixed(0)};\r\nvar firstText =  function(){if(i==1){return (Pt2.X()-Pt1.X()).toFixed(0)} else{return ''}}\r\nvar secondText = function(){if(j==1){return (Pt2.Y()-Pt3.Y()).toFixed(0)}else{return ''}}\r\nvar thirdText =  function(){if(k==1){return (Pt4.X()-Pt3.X()).toFixed(0)} else{return ''}}\r\nvar fourthText = function(){if(l==1){return (Pt4.Y()-Pt1.Y()).toFixed(0)} else{return ''}}\r\nvar plusOne = function(){if(i==1 && j==1 || i==1 && k==1 || i==1 && l==1){return ' + '}else{return ''}}\r\nvar plusTwo  = function(){if(j==1 && k==1 || j==1 && l ==1){return ' + '}else{return ''}}\r\nvar plusThree = function(){if(k==1 && l==1){return ' + '}else{return ''}}\r\nplaceText(brd1, 0, 8.5, 32 , 'Perimeter = ?');\r\nplaceText(brd1, 0, 6.5, 32, function(){return  ''+firstText() +plusOne()+ secondText()+ plusTwo()+ thirdText() +plusThree()+ fourthText() + ' = '+ findSum()});\r\n\r\n    ////////////////////////////////////////////////////////////////////////////\r\n    function movePt2(){\r\n      let x = 3+Math.round(4*Math.random());\r\n      let y = 3+Math.round(4*Math.random());\r\n      Pt4.moveTo([x, y],100);\r\n      Pt2.moveTo([x, -3],100);\r\n      Pt3.moveTo([-3, y],100);\r\n    }\r\n\r\n//    erase.on('down', function(){checkColorFront();checkColorTop(); checkColorSide();})\r\n\r\n    function clearVisibility(){\r\n      //rght.setAttribute({visible:false});\r\n      //wrng.setAttribute({visible:false});\r\n      i=0; j=0; k=0; l=0;\r\n      side1.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false}, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n      side2.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false}, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n      side3.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false}, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n      side4.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false}, strokeColor:'grey', label:{visible:false, color:'blue'}});\r\n      }\r\n    analytics.on('down', function(){\r\n      clearVisibility();\r\n      movePt2();\r\n    });\r\n   erase.on('down', function(){clearVisibility();\r\n     Pt4.moveTo([3,3], 100);\r\n     Pt2.moveTo([3,-3], 100);\r\n     Pt3.moveTo([-3,3], 100);\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\">\n      What is Perimeter of a Geometric Shape?\n    </h3>\r\n    <p>\n      Perimeter of a geometric shape is the length of the boundary curve.\r\n      Imagine you have to walk along the border of a rectangle or a square until you get back to the same point.\r\n      Then the distance travelled is equal to the perimeter of the rectangle or the square.\n    </p>\r\n    <h3 ref=\"formula\">\r\n      Perimeter of a Rectangle\r\n    </h3>\r\n    <p>\n      Perimeter \\(R\\) of a rectangle with length \\(L\\) and width \\(W\\) is given as:\r\n      $$ R = 2(L+W)$$\n    </p>\r\n    <h3 ref=\"formula\">\r\n      Perimeter of a Square\r\n    </h3>\r\n    <p>\n      In a square, the length is the same as the width, i.e., \\(l =w\\).\r\n      Thus, substituting \\(L =W\\) in the expression for the perimeter of a rectangle, we can obtain the expression for the perimeter of a square:\r\n      $$ S = 2(L+L) = 4L$$\n    </p>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Perimeter of Geometric Shapes\n    </h3>\r\n    <br>\r\n    <h5> Getting Started </h5>\r\n    <p>\n      In this MagicGraph, you will learn about how to find the perimeter of a rectangular shape.\r\n      Shown in the MagicGraph is a rectangular shape with its sides shown in grey.\r\n      <br><br>\r\n      Simply tap on a side to pick it. Once picked, the color of the side turns bright blue, and its length is added to the peripheral length.\r\n    </p>\r\n    <h5> Icons on the MagicGraph </h5>\r\n    <p>\r\n      You can tap on <i class=\"shuffler ma-1\" /> icon  to shuffle and generate a new shape. You can tap on the\r\n      <i class=\"eraser ma-1\" /> icon to erase and start over.\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: 'Perimeter',\r\n  created () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Perimeter of a Rectangle';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    /*\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    */\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          title: 'Perimeter',\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 how to draw a free body diagram'}\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=297baec2&\"\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":""}