{"version":3,"sources":["webpack:///./src/components/mathematics/Math7thGrade/area/Lesson.vue","webpack:///./src/components/mathematics/Math7thGrade/area/Boxes.js","webpack:///src/components/mathematics/Math7thGrade/area/Lesson.vue","webpack:///./src/components/mathematics/Math7thGrade/area/Lesson.vue?b46c","webpack:///./src/components/mathematics/Math7thGrade/area/Lesson.vue?236b","webpack:///./src/components/mathematics/Math7thGrade/area/Lesson.vue?4292"],"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","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","Pt1","placePoint","Pt2","shape","placeSq","X","Y","fillOpacity","borders","strokeColor","width","num_height","num_width","rectxy","rectsVisibility","create","x","rectx","v","vx","y","rect","opacity","fixed","push","showWidth","valueOf","hideWidth","showHeight","hideHeight","plusWidth","placeImage","minusWidth","plusHeight","minusHeight","placeBoldText","placeText","rght","movePt2","moveTo","Math","round","random","clearVisibility","unsuspendUpdate","name","created","_created","_asyncToGenerator","regeneratorRuntime","mark","_callee","title","newTopics","newshowhome","newMath","newLeftArrow","newModule","_this","wrap","_context","prev","next","$store","dispatch","commit","img","action","goto","stop","apply","arguments","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"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","file":"js/chunk-4527d198.0a54bb95.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Area\\n  \")]),_vm._m(0),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Area of Geometric Shapes\\n  \")]),_c('br'),_c('h5',[_vm._v(\" Getting Started \")]),_vm._m(1),_c('h5',[_vm._v(\" Icons on the MagicGraph \")]),_vm._m(2),_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    Three dimensional (or 3D) objects look differently when seen from different directions or angles.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    One can draw a two dimensional (or 2D) figure of a 3D object as it is seen from a given direction. Such a figure is called a\\n    \"),_c('i',[_vm._v(\"view \")]),_vm._v(\" or a \"),_c('i',[_vm._v(\" projection\")]),_vm._v(\".\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    In a 2D view of a 3D object, one can see only those features that are visible from that particular direction. Thus, a single 2D view\\n    is generally not sufficient to describe all the features of a 3D object. \"),_c('br'),_c('br'),_vm._v(\"\\n\\n    However, by a combination of multiple different views, one can fully describe a 3D object. \"),_c('br'),_c('br'),_vm._v(\"\\n\\n    Three commonly used views to describe a 3D object are:\\n    \"),_c('ul',[_c('li',[_c('h5',[_vm._v(\" Front View: \")]),_vm._v(\"The 2D view of a 3D object as seen from the front is called its front view. \")]),_c('li',[_c('h5',[_vm._v(\" Side  View: \")]),_vm._v(\" The 2D view of a 3D object as seen from the side (can be left or right) is called its side view.\")]),_c('li',[_c('h5',[_vm._v(\"  Top View \")]),_vm._v(\" The 2D view of a 3D object as seen from the top is called its top view. \")])])])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    In this MagicGraph, you will be drawing the front, top and side views of the given 3D object.\\n    On the top row, you will see the 3D object that you will be creating these views of. \"),_c('br'),_c('br'),_vm._v(\"\\n    On the bottom row, you are given three stacks of empty squares labeled as \"),_c('i',[_vm._v(\"Front\")]),_vm._v(\", \"),_c('i',[_vm._v(\"Top\")]),_vm._v(\" and \"),_c('i',[_vm._v(\"Side\")]),_vm._v(\".\\n    By selectively filling the squares in these stacks, you can create all the three views.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Simply tap on an empty square to fill it. Tapping on a filled square will empty it.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    You can tap on \"),_c('i',{staticClass:\"tester ma-1\"}),_vm._v(\" icon  to check your answer. 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  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  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: [-10, 12, 10, -8],\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    // 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'] =10;\r\n    brd1.options.layer['point'] =3;\r\n//\r\n    makeResponsive(brd1);\r\n    // Creat titleStyle\r\n    placeLogo(brd1);\r\n    placeTitle(brd1, 'Area of a Rectangle', '(Fill the rectangle with unit squares)');\r\n/////////////////////\r\n    var analytics = placeShuffle(brd1);\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    /////////////////////////////////////////////////////////\r\n    var Pt1 = placePoint(brd1, -3, -3, 0, 'red', 'black');\r\n    var Pt2 = placePoint(brd1,  3, 3, 0, 'red', 'black');\r\n    var shape =placeSq(brd1, [()=>Pt1.X(), ()=>Pt1.Y()],[()=>Pt2.X(), ()=>Pt2.Y()],'white');\r\n    shape.setAttribute({fillOpacity:0.7, borders:{visible:true, strokeColor:'black', strokeWidth:4}});\r\n  //  var side1 = placeTapeHori(brd1, [()=>Pt1.X(), ()=>Pt1.Y()], [()=>Pt2.X(), ()=>Pt1.Y()],'');\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, [()=>Pt2.X(), ()=>Pt2.Y()], [()=>Pt1.X(), ()=>Pt2.Y()],'');\r\n  //  side3.setAttribute({highlight:true, point1:{visible:false},point2:{visible:false},  strokeWidth:4, strokeColor:'grey', label:{visible:true, color:'blue'}});\r\n//////////////////////////////////////////////////////\r\n  //  var side2 = placeTapeVert(brd1, [()=>Pt2.X(), ()=>Pt1.Y()], [()=>Pt2.X(), ()=>Pt2.Y()],'');\r\n  //  side2.setAttribute({highlight:true, fillOpacity:0.4,  point1:{visible:false},point2:{visible:false}, strokeWidth:4, strokeColor:'grey', label:{visible:true, color:'blue'}});\r\n/////////////////////////////////////////////////////////////////////////////////////\r\n  //  var side4 = placeTapeVert(brd1, [()=>Pt1.X(), ()=>Pt2.Y()], [()=>Pt1.X(), ()=>Pt1.Y()],'');\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 width=1;\r\nvar num_height=1;\r\n//()=>Math.abs(Pt2.Y()-Pt1.Y());\r\nvar num_width=1;\r\n//()=>Math.abs(Pt2.X()-Pt1.X());\r\nvar rectxy=[];\r\nvar rectsVisibility=[];\r\nvar create = function(){\r\nfor (let x=0; x<12; x++)\r\n{   let rectx =[];\r\n    let v =false;\r\n    let vx =[];\r\n    for (let y=0; y<12; y++)\r\n    {\r\n      var rect = brd1.create('image', ['/assets/purpleSquare.svg', [-3.+x*width, -3.+y*width], [1.0,1.0]], {visible:false, opacity:0.5, fixed:true});\r\n      rectx.push(rect);\r\n      vx.push(v);\r\n    }\r\n    rectxy.push(rectx);\r\n    rectsVisibility.push(vx);\r\n}\r\nrectxy[0][0].setAttribute({visible:true});\r\n}\r\ncreate();\r\n//////////////////////////////////////////Change Color ///////////////////////////////////////\r\nfunction showWidth()\r\n{\r\n  for (let y=0; y<num_height.valueOf(); y++)\r\n    {\r\n      rectxy[num_width][y].setAttribute({visible:true});\r\n    }\r\n}\r\n//////////////////////////////////////////////////////////\r\nfunction hideWidth(){\r\n  for (let x=0; x<=num_height.valueOf(); x++)\r\n  {\r\n      rectxy[num_width][x].setAttribute({visible:false});\r\n  }\r\n}\r\n/////////////////////////////////////////////////////WIDTH CHANGE ////////////////////////////\r\nfunction showHeight()\r\n{\r\n    for (let x=0; x<num_width.valueOf(); x++)\r\n    {\r\n      rectxy[x][num_height].setAttribute({visible:true});\r\n    }\r\n}\r\n//////////////////////////////////////////////////////////\r\nfunction hideHeight(){\r\n  for (let x=0; x<=num_width.valueOf(); x++)\r\n  {\r\n      rectxy[x][num_height].setAttribute({visible:false});\r\n  }\r\n}\r\n/////////////////////////////////////////////////////////\r\nvar plusWidth = placeImage(brd1, '/assets/plus.svg', 0.5, -5, 1, 0);\r\nvar minusWidth = placeImage(brd1, '/assets/minuss.svg', -1.5, -5, 1, 0);\r\nplusWidth.on('down', function(){showWidth();num_width +=1; })\r\nminusWidth.on('down', function(){if(num_width>1){num_width-=1;}else{num_width=1}; hideWidth();})\r\n//////////////////////////////////////////////////// HEIGHT CHANGE ////////////////////////////\r\nvar plusHeight = placeImage(brd1, '/assets/plus.svg', -5, 0.5, 1, 0);\r\nvar minusHeight = placeImage(brd1, '/assets/minuss.svg', -5, -1.5, 1, 0);\r\nplusHeight.on('down', function(){showHeight();num_height +=1;})\r\nminusHeight.on('down', function(){if(num_height>1){num_height-=1;}else{num_height=1}; hideHeight();})\r\n/////////////////////////////////////////////////////\r\nplaceBoldText(brd1, 0., -4.5, ()=>num_width.valueOf());\r\nplaceBoldText(brd1, -4.5, 0, ()=>num_height.valueOf());\r\n////////////////////////////////////////////////////\r\n\r\nplaceText(brd1, 0, 8.5, 24 , function(){return 'Area = '+ num_width*num_height + ' ?'});\r\n\r\nplaceText(brd1, 0, 7.25, 24 , function(){return 'Number of Unit Square ='+ num_width.valueOf()+ ' x '+ num_height.valueOf() + ' = '+ num_width*num_height});\r\n//placeText(brd1, 0, 6.5, 32, function(){return Pt2.X()});\r\nvar rght = placeImage(brd1, '/assets/checkmark.svg', 1.5, 8, 1.,  0);\r\nrght.setAttribute({visible:()=>num_width==Pt2.X()-Pt1.X() && num_height == Pt2.Y()-Pt1.Y()});\r\n    ////////////////////////////////////////////////////////////////////////////\r\n    function movePt2(){\r\n    Pt2.moveTo([3+Math.round(4*Math.random()), 3+Math.round(4*Math.random())],100);\r\n    }\r\n\r\n//    erase.on('down', function(){checkColorFront();checkColorTop(); checkColorSide();})\r\n\r\n    function clearVisibility(){\r\n      for (let x=0; x<12; x++)\r\n           {\r\n             for (let y=0; y<12; y++){\r\n             rectxy[x][y].setAttribute({visible:false});\r\n           }\r\n            }\r\n            rectxy[0][0].setAttribute({visible:true});\r\n          }\r\n    analytics.on('down', function(){\r\n      clearVisibility();\r\n      num_width=1;\r\n      num_height=1;\r\n      movePt2();\r\n    });\r\n   erase.on('down', function(){clearVisibility(); num_width=1; num_height=1;Pt2.moveTo([3,3], 100)});\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      Area\n    </h3>\r\n    <p>\n      Three dimensional (or 3D) objects look differently when seen from different directions or angles.\r\n      <br> <br>\r\n      One can draw a two dimensional (or 2D) figure of a 3D object as it is seen from a given direction. Such a figure is called a\r\n      <i>view </i> or a <i> projection</i>.\r\n      <br> <br>\r\n      In a 2D view of a 3D object, one can see only those features that are visible from that particular direction. Thus, a single 2D view\r\n      is generally not sufficient to describe all the features of a 3D object. <br><br>\r\n\r\n      However, by a combination of multiple different views, one can fully describe a 3D object. <br> <br>\r\n\r\n      Three commonly used views to describe a 3D object are:\r\n      <ul>\r\n        <li> <h5> Front View: </h5>The 2D view of a 3D object as seen from the front is called its front view. </li>\r\n        <li> <h5> Side  View: </h5> The 2D view of a 3D object as seen from the side (can be left or right) is called its side view.</li>\r\n        <li> <h5>  Top View </h5> The 2D view of a 3D object as seen from the top is called its top view. </li>\r\n      </ul>\r\n    </p>\r\n\r\n    <h3 ref=\"pg\">\n      MagicGraph | Area of Geometric Shapes\n    </h3>\r\n    <br>\r\n    <h5> Getting Started </h5>\r\n    <p>\n      In this MagicGraph, you will be drawing the front, top and side views of the given 3D object.\r\n      On the top row, you will see the 3D object that you will be creating these views of. <br><br>\r\n      On the bottom row, you are given three stacks of empty squares labeled as <i>Front</i>, <i>Top</i> and <i>Side</i>.\r\n      By selectively filling the squares in these stacks, you can create all the three views.\r\n      <br><br>\r\n      Simply tap on an empty square to fill it. Tapping on a filled square will empty it.\r\n    </p>\r\n    <h5> Icons on the MagicGraph </h5>\r\n    <p>\r\n      You can tap on <i class=\"tester ma-1\" /> icon  to check your answer. 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: 'SquareArea',\r\n  async created () {\r\n    await this.$store.dispatch('navigation/getData');\r\n    let title = 'Area of Geometric Shapes';\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',\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}\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=766f44e0&\"\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=766f44e0&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=766f44e0&prod&lang=scss&\""],"sourceRoot":""}