{"version":3,"sources":["webpack:///./node_modules/core-js/modules/es6.math.sign.js","webpack:///./node_modules/core-js/modules/_math-sign.js","webpack:///./src/components/mathematics/complexNumber/Lesson.vue?4c10","webpack:///./src/components/mathematics/complexNumber/Lesson.vue","webpack:///./src/components/mathematics/complexNumber/Boxes.js","webpack:///src/components/mathematics/complexNumber/Lesson.vue","webpack:///./src/components/mathematics/complexNumber/Lesson.vue?17ec","webpack:///./src/components/mathematics/complexNumber/Lesson.vue?3d6e"],"names":["$export","S","sign","module","exports","Math","x","ref","attrs","staticClass","staticRenderFns","Boxes","box1","JXG","Options","board","minimizeReflow","point","showInfoBox","highlight","text","fixed","curve","circle","image","cssDefaultStyle","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","makeResponsive","placeTitle","placeLogo","analytics","placeImage","setLabel","label","setAttribute","visible","alignX","offset","CssStyle","fontSize","on","this","erase","suspendUpdate","name","placeMiddleText","color","des","options","layer","txt1","PtB","i","moveA","create","face","size","trace","strokeColor","fillColor","moveB","moveC","evt","mouseover","getUsrCoordsOfMouse","snapToGrid","update","runb","moveTo","X","runc","Y","strokeWidth","dash","toFixed","round","canvasWidth","unsuspendUpdate","created","_this","$store","commit","title","newTopics","img","action","goto","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"qGACA,IAAIA,EAAU,EAAQ,QAEtBA,EAAQA,EAAQC,EAAG,OAAQ,CAAEC,KAAM,EAAQ,W,8CCF3CC,EAAOC,QAAUC,KAAKH,MAAQ,SAAcI,GAE1C,OAAmB,IAAXA,GAAKA,IAAWA,GAAKA,EAAIA,EAAIA,EAAI,GAAK,EAAI,I,kCCHpD,W,qECA4D,EAAU,W,IAAgBC,EAAI,KAAQ,EAAK,EAAI,S,OAAiN,iBAAQ,IAAK,SAAoEA,GAAI,4MAAK,IAAK,SAA+TC,GAAK,GAAC,4D,IAAC,MAAmB,+SAAE,MAAK,CAAOC,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CAC7zB,mBACyC,IAAC,IAAqB,EAAe,Y,IAACA,OAAgB,EAAK,EAAI,MAAK,GAC5G,eAEF,YAAiBC,K,wnBC0BXC,EAAQ,CACZC,KAAM,WACPC,IAAIC,QAAQC,MAAMC,eAAiB,OAClCH,IAAIC,QAAQG,MAAMC,aAAY,EAC9BL,IAAIC,QAAQG,MAAME,WAAU,EAC5BN,IAAIC,QAAQM,KAAKD,WAAU,EAC3BN,IAAIC,QAAQM,KAAKC,OAAM,EACvBR,IAAIC,QAAQQ,MAAMH,WAAU,EAC5BN,IAAIC,QAAQS,OAAOJ,WAAU,EAC7BN,IAAIC,QAAQU,MAAML,WAAU,EAC5BN,IAAIC,QAAQM,KAAKK,gBAAgB,qBACjC,IAAIC,EAAOb,IAAIc,SAASC,UAAU,UAAU,CAACC,YAAa,EAAE,GAAI,GAAI,IAAK,GAAGC,iBAAiB,EAAMC,MAAK,EAAMC,OAAM,EAAMC,MAAK,EAAMC,eAAc,EAAOC,gBAAe,EAAOC,IAAI,CAACC,SAAQ,GAAQC,KAAK,CAACD,SAAQ,KACnNE,eAAeb,GAEfc,eAAWd,EAAM,kCAAmC,2CACpDe,eAAUf,GACV,IAAIgB,EAAWC,eAAWjB,EAAM,sBAAuB,KAAM,KAAM,IAAK,GACxEgB,EAAUE,SAAS,mBACnBF,EAAUG,MAAMC,aAAa,CAACC,SAAQ,EAAOC,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KACtHT,EAAUU,GAAG,QAAQ,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OACnEL,EAAUU,GAAG,OAAO,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAElE,IAAIO,EAAOX,eAAWjB,EAAM,oBAAqB,GAAI,KAAM,IAAK,GAChE4B,EAAMV,SAAS,kBACfU,EAAMT,MAAMC,aAAa,CAACC,SAAQ,EAAOC,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KAClHG,EAAMF,GAAG,QAAQ,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAC/DO,EAAMF,GAAG,OAAO,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAG9DrB,EAAK6B,gBACL,IAAIC,EAAOC,eAAgB/B,EAAM,IAAK,GAAI,IAC1C8B,EAAKV,aAAa,CAACY,MAAM,UACzB,IAAIC,EAAMF,eAAgB/B,EAAM,IAAK,GAAI,IACzCiC,EAAIb,aAAa,CAACY,MAAM,UACxBhC,EAAKkC,QAAQC,MAAM,SAAU,GAC7B,IACkBC,EACLC,EAFTC,EAAG,EAKHC,EAAOvC,EAAKwC,OAAO,QAAS,CAAC,EAAE,GAAG,CAACV,KAAK,GAAIW,KAAK,SAASC,KAAK,EAAGC,OAAM,EAAMC,YAAY,QAASC,UAAU,UAC7GC,EAAO9C,EAAKwC,OAAO,QAAS,CAAC,EAAE,GAAG,CAACV,KAAK,GAAIW,KAAK,SAASC,KAAK,EAAGC,OAAM,EAAMC,YAAY,MAAOC,UAAU,QAC3GE,EAAO/C,EAAKwC,OAAO,QAAS,CAAC,EAAE,GAAG,CAACV,KAAK,GAAIW,KAAK,SAASC,KAAK,EAAGC,OAAM,EAAMC,YAAY,QAASC,UAAU,WAEjH7C,EAAK0B,GAAG,MACE,SAAUsB,GAEPV,EAAE,IAAMV,EAAMqB,YAAcjC,EAAUiC,YAEzCZ,EAAMrC,EAAKwC,OAAO,QAASxC,EAAKkD,oBAAoBF,GAAM,CAAClB,KAAK,GAAIqB,YAAW,EAAMT,KAAK,KAE1FJ,GAAG,EACHtC,EAAKoD,YAIf,IAAIC,EAAM,WAAWP,EAAMQ,OAAO,CAACjB,EAAIkB,IAAK,GAAM,MAC9CC,EAAM,WAAWjB,EAAMe,OAAO,CAAC,EAAKjB,EAAIoB,KAAM,MAClDzD,EAAK0B,GAAG,MAAM,WAEN,GAAHY,IAEDtC,EAAKwC,OAAO,QAAQ,CAAC,CAAC,EAAE,GAAGH,GAAO,CAACP,KAAK,IAAKc,YAAY,QAASc,YAAY,IAC7E1D,EAAKwC,OAAO,UAAU,CAACH,EAAK,CAAC,kBAAIA,EAAIkB,KAAK,IAAM,CAACI,KAAK,EAAGtC,SAAQ,EAAOS,KAAK,IAAKc,YAAY,QAASc,YAAY,IACnH1D,EAAKwC,OAAO,UAAU,CAAC,CAAC,EAAE,kBAAIH,EAAIoB,MAAMpB,GAAO,CAACsB,KAAK,EAAGtC,SAAQ,EAAOS,KAAK,IAAKc,YAAY,QAASc,YAAY,IACrHtB,EAAOL,eAAgB/B,EAAM,EAAG,MAAM,WAAW,MAAO,OAAUqC,EAAIkB,IAAKK,QAAQ,GAAK,IAAOvB,EAAIoB,IAAKG,QAAQ,GAAK,OACrHxB,EAAKhB,aAAa,CAACC,SAAQ,EAAOW,MAAM,cAI3CJ,EAAMF,GAAG,QAAQ,WAEfU,EAAKhB,aAAa,CAACC,SAAQ,IAC3BrB,EAAKwC,OAAO,OAAQ,CAAC,WAAW,MAAe,GAARH,EAAIkB,IAAQ,GAAI5E,KAAKH,KAAK6D,EAAIkB,MAAQ,WAAW,MAAe,GAARlB,EAAIoB,IAAQ,IAAO,YAAY,CAACjC,SAAS,oBAAoBC,SAAS,WAAW,OAAO9C,KAAKkF,MAAM,GAAG7D,EAAK8D,YAAY,MAAOzC,QAAQ,WAAW,OAAM,GAAHiB,KACnPS,EAAM3B,aAAa,CAACuB,OAAM,IAC1BG,EAAM1B,aAAa,CAACuB,OAAM,IAC1BJ,EAAMnB,aAAa,CAACuB,OAAM,IAC1BI,EAAMO,OAAOjB,GACbE,EAAMe,OAAO,CAACjB,EAAIkB,IAAKlB,EAAIoB,MAC3BX,EAAMQ,OAAO,CAACjB,EAAIkB,IAAKlB,EAAIoB,MAC3BV,EAAM3B,aAAa,CAACuB,OAAM,IAC1BG,EAAM1B,aAAa,CAACuB,OAAM,IAC1BJ,EAAMnB,aAAa,CAACuB,OAAM,IAC1BU,IACAG,OAGFxC,EAAUU,GAAG,QAAQ,WAErBU,EAAKhB,aAAa,CAACC,SAAQ,OAE5BrB,EAAK+D,oBA2FU9E,ICxKA,GACf6C,KAAA,SACAkC,QAAA,eAAAC,EAAA,KACA,KAAAC,OAAAC,OAAA,yBACA,IAAAC,EAAA,oBACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GACA,IAAAC,EAAA,CACA,CAAAD,MAAA,oBAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,WACA,CAAAJ,MAAA,uBAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,WACA,CAAAJ,MAAA,aAAAE,IAAA,oBAAAC,OAAA,kBAAAN,EAAAO,KAAA,SAEA,KAAAN,OAAAC,OAAA,2BAAAE,GACA,IAAAI,GAAA,EACA,KAAAP,OAAAC,OAAA,4BAAAM,GACA,IAAAC,GAAA,EACA,KAAAR,OAAAC,OAAA,yBAAAO,GACA,IAAAC,GAAA,EACA,KAAAT,OAAAC,OAAA,8BAAAQ,GACA,IAAAC,GAAA,EACA,KAAAV,OAAAC,OAAA,2BAAAS,IAEAC,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACA9F,EAAAC,QAEA+F,SAAA,WACA,OAAAb,MAAA,gBACAc,cAAA,2BACAC,KAAA,EAAArD,KAAA,WAAAsD,QAAA,uCACA,CAAAtD,KAAA,cAAAsD,QAAA,gDC3E8W,I,wBCQ1WC,EAAY,eACd,EACA,EACArG,GACA,EACA,KACA,KACA,MAIa,aAAAqG,E","file":"js/chunk-996951ca.9f5e7367.js","sourcesContent":["// 20.2.2.28 Math.sign(x)\nvar $export = require('./_export');\n\n$export($export.S, 'Math', { sign: require('./_math-sign') });\n","// 20.2.2.28 Math.sign(x)\nmodule.exports = Math.sign || function sign(x) {\n  // eslint-disable-next-line no-self-compare\n  return (x = +x) == 0 || x != x ? x : x < 0 ? -1 : 1;\n};\n","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=6978c106&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Circle\\n  \")]),_c('p',[_vm._v(\"\\n    A circle is a planar shape obtained by connecting all the points on a plane that are at the same distance from a given point called the center.\\n  \")]),_c('h3',{ref:\"types\"},[_vm._v(\"\\n    Features of a Circle\\n  \")]),_vm._m(0),_c('br'),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Drawing a Circle\\n  \")]),_c('p',[_vm._v(\"\\n    This MagicGraph offers a visually interactive way to create a circle using two points. Select any two points on the graph. Point '1' is the center\\n    of the circle. Point '2' lies on the circle.\\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('ul',{staticClass:\"a\"},[_c('li',[_c('h5',[_vm._v(\" Radius \")]),_vm._v(\"\\n      The distance between any point on the circle and its center is called the radius of the circle. The radius is commonly denoted as \"),_c('i',[_vm._v(\"R\")]),_vm._v(\".\\n    \")]),_c('li',[_c('h5',[_vm._v(\" Circumference \")]),_vm._v(\"\\n      If you walk along the periphery of the circle, the distance traveled is called circumference of the circle. The circumference of a circle is related to its radius:\\n      $$L = 2\\\\pi R$$\\n    \")]),_c('li',[_c('h5',[_vm._v(\" Area \")]),_vm._v(\"\\n      The area of a circle is related to its radius as:\\n      $$A = \\\\pi R^2$$\\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    placeRightText,\r\n    placeCircle,\r\n    placeAngle,\r\n    placeDash,\r\n    placeLabel,\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} from '../../../common/edliy_utils-fractions';\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.image.highlight=false;\r\n  JXG.Options.text.cssDefaultStyle='fontFamily:Oswald;'\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-10, 15, 10, -5],keepaspectratio: true, axis:true, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n  makeResponsive(brd1);\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, 'Polar Form  of a Complex Number', '(Click to Pick a Point on Argand Plane)');\r\n  placeLogo(brd1);\r\n  var analytics =placeImage(brd1, '/assets/eraser.svg', -2.5, -4.25, 1.5, 0);\r\n  analytics.setLabel('Erase & Restart');\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 =placeImage(brd1, '/assets/graph.svg', 1, -4.25, 1.5, 0);\r\n  erase.setLabel('Cartesian Form')\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  //placeDash(board, Pt1, Pt2, width, cols)\r\n  //brd1.create('axis', [[-1, 0], [1, 0]], {strokeWidth: 2, strokeColor: 'red'});\r\n  brd1.suspendUpdate();\r\n  var name = placeMiddleText(brd1, 6.5, 14, '');\r\n  name.setAttribute({color:'green'});\r\n  var des = placeMiddleText(brd1, 6.5, 14, '');\r\n  des.setAttribute({color:'green'});\r\n  brd1.options.layer['image'] =14;\r\n  var i =0;\r\n  var g; var h; var txt1; var txt2; var txt3; var k;\r\n  var PtA; var PtB;\r\n  var names=['Z', 'Z', 'R', 'S'];\r\n  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n  var moveA= brd1.create('point', [0,0],{name:'', face:'circle',size:1, trace:true, strokeColor:'green', fillColor:'green'});\r\n  var moveB= brd1.create('point', [0,0],{name:'', face:'circle',size:1, trace:true, strokeColor:'red', fillColor:'red'});\r\n  var moveC= brd1.create('point', [0,0],{name:'', face:'circle',size:1, trace:true, strokeColor:'black', fillColor:'yellow'});\r\n  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n  brd1.on('up',\r\n            function (evt)\r\n            {\r\n            if(i<1 && !erase.mouseover && !analytics.mouseover)\r\n            {\r\n            PtB = brd1.create('point', brd1.getUsrCoordsOfMouse(evt), {name:'', snapToGrid:true, size:3});\r\n            }\r\n            i+=1;\r\n            brd1.update();\r\n          });\r\n  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n  //PtB = brd1.create('point', [2, 3], {name:'A', snapToGrid:true, size:3});\r\n  var runb =function(){moveB.moveTo([PtB.X(), 0.0], 500)}\r\n  var runc =function(){moveA.moveTo([0.0, PtB.Y()], 500)}\r\n  brd1.on('up', function()\r\n  {\r\n    if(i==1)\r\n    {\r\n    g=brd1.create('arrow',[[0,0],PtB] , {name:'g', strokeColor:'black', strokeWidth:3});\r\n    h= brd1.create('segment',[PtB, [()=>PtB.X(), 0]] , {dash:1, visible:false, name:'h', strokeColor:'black', strokeWidth:1});\r\n    k= brd1.create('segment',[[0,()=>PtB.Y()], PtB] , {dash:1, visible:false, name:'h', strokeColor:'black', strokeWidth:1});\r\n    txt1 = placeMiddleText(brd1, 0, 11.5, function(){return 'Z = ' + (PtB.X()).toFixed(2) + '+' + (PtB.Y()).toFixed(2) + 'i';});\r\n    txt1.setAttribute({visible:false, color:'black'});\r\n    }\r\n  }\r\n)\r\n erase.on('down', function()\r\n {\r\n   txt1.setAttribute({visible:true});\r\n   brd1.create('text', [function(){return PtB.X()*0.5-0.5*Math.sign(PtB.X());}, function(){return PtB.Y()*0.5+0.5;}, '<b>Z</b>'],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(22*brd1.canvasWidth/800.)},visible:function(){if(i==0){return false}else{return true}}});\r\n   moveC.setAttribute({trace:false});\r\n   moveB.setAttribute({trace:false});\r\n   moveA.setAttribute({trace:false});\r\n   moveC.moveTo(PtB);\r\n   moveA.moveTo([PtB.X(), PtB.Y()]);\r\n   moveB.moveTo([PtB.X(), PtB.Y()]);\r\n   moveC.setAttribute({trace:true});\r\n   moveB.setAttribute({trace:true});\r\n   moveA.setAttribute({trace:true});\r\n   runb();\r\n   runc();\r\n });\r\n\r\n analytics.on('down', function()\r\n {\r\n txt1.setAttribute({visible:true});\r\n});\r\nbrd1.unsuspendUpdate();\r\n /*  function()\r\n  { if(!g)\r\n    {\r\n    g = brd1.create('line',[()=>Points[0], ()=>Points[1]] , {strokeColor:'red', strokeWidth:1});\r\n  }\r\n*/\r\n  /*var PointP = placePoint(brd1, 0, 5, 4, 'blue', 'blue');\r\n  PointP.setAttribute({trace:true});\r\n  var PointQ = placePoint(brd1, ()=>-PointP.X(), ()=>PointP.Y(), 4, 'blue', 'blue');\r\n  PointQ.setAttribute({trace:true});\r\n  var hand = brd1.create('image', ['/assets/hands.svg', [function(){return PointP.X()-0.6;}, function(){return PointP.Y()-0.65;}], [1.1,1.1]], {highlight:false, visible:false});\r\n  PointP.on('over', function(){hand.setAttribute({visible:true});});\r\n  PointP.on('out', function(){hand.setAttribute({visible:false});});\r\n  erase.on('down', function(){PointP.moveTo([0, 5]); PointP.setAttribute({trace:false}); PointQ.setAttribute({trace:false});  PointP.setAttribute({trace:true}); PointQ.setAttribute({trace:true}); });\r\n*/\r\n\r\n  /*\r\n  var sq = placeImage(brd1, '/assets/setSquare.svg', 4, 0, 4, 0);\r\n  sq.on('down', function(){name.setText('This is a Set Square.'); des.setText('A set square is used for drawing parallel and perpendicular lines.'); });\r\n  sq.on('out', function(){name.setText(''); des.setText('')}); */\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\r\n\r\n\r\n  var go = placeImage(brd1, '/assets/go.svg', 10, -6, 2, 0);\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 Go.');\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}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\r\n      Circle\r\n    </h3>\r\n    <p>\r\n      A circle is a planar shape obtained by connecting all the points on a plane that are at the same distance from a given point called the center.\n    </p>\r\n    <h3 ref=\"types\">\r\n      Features of a Circle\r\n    </h3>\r\n    <ul class=\"a\">\r\n      <li>\n        <h5> Radius </h5>\r\n        The distance between any point on the circle and its center is called the radius of the circle. The radius is commonly denoted as <i>R</i>.\r\n      </li>\r\n      <li>\n        <h5> Circumference </h5>\r\n        If you walk along the periphery of the circle, the distance traveled is called circumference of the circle. The circumference of a circle is related to its radius:\r\n        $$L = 2\\pi R$$\r\n      </li>\r\n      <li>\n        <h5> Area </h5>\r\n        The area of a circle is related to its radius as:\r\n        $$A = \\pi R^2$$\r\n      </li>\r\n    </ul>\r\n    <br>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Drawing a Circle\r\n    </h3>\r\n    <p>\n      This MagicGraph offers a visually interactive way to create a circle using two points. Select any two points on the graph. Point '1' is the center\r\n      of the circle. Point '2' lies on the circle.\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: 'Circle',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Drawing a Circle ';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'What is a Circle?', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Features of a Circle', 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: 'Draw a Circle',\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=6978c106&\"\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=6978c106&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":""}