{"version":3,"sources":["webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter/Boxes.js","webpack:///src/components/mathematics/Math6thGrade/demoPerimeter/Lesson.vue","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter/Lesson.vue?e79f","webpack:///./src/components/mathematics/Math6thGrade/demoPerimeter/Lesson.vue?1b3a"],"names":["ref","attrs","staticClass","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","suspendUpdate","create","radius","placeSlider","setAttribute","unitLabel","snapWidth","go","placePlay","placePause","setLabel","label","visible","alignX","offset","CssStyle","fontSize","on","this","placeMiddleText","segment1","Value","Math","PI","strokeColor","ptCenter","face","name","canvasHeight","cssStyle","pt1","X","Y","size","fillColor","strokeWidth","fillOpacity","angle1","moveTo","pt3","sin","cos","ptArrow1","ptArrow2","ptArrow3","highlightStrokeWidth","lastArrow","type","highlightSize","touchLastPoint","firstArrow","toFixed","anchorX","anchorY","round","canvasWidth","ptArrow4","unsuspendUpdate","created","$store","commit","title","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","meta","content","vmid","component"],"mappings":"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","file":"js/chunk-2d0b5df2.dae7cbe2.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Circumference of a Circle\\n  \")]),_c('p',[_vm._v(\"\\n    The circumference of a circle is defined as the distance along the periphery of the circle.\\n    Imagine you have to walk along the periphery of the circle until you get back to the same point.\\n    Then the distance travelled is equal to the circumference of the circle.\\n  \")]),_c('h3',{ref:\"types\"},[_vm._v(\"\\n    Circumference and Radius of a Circle\\n  \")]),_c('p',[_vm._v(\"\\n    There is a straightforward relation between the circumference \\\\(L\\\\) of a circle and its radius \\\\(R\\\\):\\n    $$L = 2 \\\\pi R$$\\n  \")]),_c('p',[_vm._v(\"\\n    This relation suggests that the circumference of a circle is directly proportional to its radius.\\n    In other words — the larger the radius of a circle, the larger the circumference.\\n  \")]),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Measuring the Circumference of a Circle\\n  \")]),_c('p',[_vm._v(\" Imagine you are given a circle as shown in the MagicGraph below. \")]),_vm._m(0),_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(\" Mark a point on the periphery of this circle where it touches the floor. In the MagicGraph below, this point is shown by a bright red dot. \")]),_c('li',[_vm._v(\" Note the location of the bright red dot on the floor. Let's label this location as 'A'. \")]),_c('li',[_vm._v(\" Next, roll this circle on the floor along a straight line until the bright red dot touches the floor again. \")]),_c('li',[_vm._v(\"\\n      Note the location of the bright red dot on the floor. Let's label this location as 'B'. Then, the circumference of the circle is distance AB.\\n    \")])])\n}]\n\nexport { render, staticRenderFns }","// Import the edliy_utils\r\nimport {\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    placeRightText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeMiddleText,\r\n    placeSliderSwitch,\r\n    placeLogo,\r\n    placePlay,\r\n    placePause\r\n} from '../Utils';\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: [-7, 17, 20, -10],keepaspectratio: true, axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n  makeResponsive(brd1);\r\n  brd1.options.layer['image'] =14;\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, 'Circumference of a Circle', '');\r\n  placeLogo(brd1);\r\n  //brd1.create('axis', [[-1, 0], [1, 0]], {strokeWidth: 2, strokeColor: 'red'});\r\n  brd1.suspendUpdate();\r\n  brd1.options.layer['image'] =14;\r\n  brd1.create('axis', [[0.0, 0.0], [5.0, 0.0]]);\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  var go = placePlay(brd1);\r\n  placePause(brd1, 'left');\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 Play.');\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      Circumference of a Circle\r\n    </h3>\r\n    <p>\r\n      The circumference of a circle is defined as the distance along the periphery of the circle.\r\n      Imagine you have to walk along the periphery of the circle until you get back to the same point.\r\n      Then the distance travelled is equal to the circumference of the circle.\r\n    </p>\r\n    <h3 ref=\"types\">\r\n      Circumference and Radius of a Circle\r\n    </h3>\r\n    <p>\n      There is a straightforward relation between the circumference \\(L\\) of a circle and its radius \\(R\\):\r\n      $$L = 2 \\pi R$$\r\n    </p>\r\n    <p>\n      This relation suggests that the circumference of a circle is directly proportional to its radius.\r\n      In other words &mdash; the larger the radius of a circle, the larger the circumference.\r\n    </p>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Measuring the Circumference of a Circle\r\n    </h3>\r\n    <p> Imagine you are given a circle as shown in the MagicGraph below. </p>\r\n    <ul class=\"a\">\r\n      <li> Mark a point on the periphery of this circle where it touches the floor. In the MagicGraph below, this point is shown by a bright red dot. </li>\r\n      <li> Note the location of the bright red dot on the floor. Let's label this location as 'A'. </li>\r\n      <li> Next, roll this circle on the floor along a straight line until the bright red dot touches the floor again. </li>\r\n      <li>\n        Note the location of the bright red dot on the floor. Let's label this location as 'B'. Then, the circumference of the circle is distance AB.\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: 'Circumference',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Circumference of a Circle';\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: 'Integers', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Integers on a Number Line', 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    */\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: 'Circumference of a Circle',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {vmid:'description', name: 'description', content: 'Learn interactively about Thales Theorem'}\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=d6a510be&\"\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":""}