{"version":3,"sources":["webpack:///./node_modules/core-js/modules/es6.math.sign.js","webpack:///./src/components/mathematics/vectors/cartesian/Lesson.vue?cc4c","webpack:///./node_modules/core-js/modules/_math-sign.js","webpack:///./src/components/mathematics/vectors/cartesian/Lesson.vue","webpack:///./src/components/mathematics/vectors/cartesian/Boxes.js","webpack:///src/components/mathematics/vectors/cartesian/Lesson.vue","webpack:///./src/components/mathematics/vectors/cartesian/Lesson.vue?0ae6","webpack:///./src/components/mathematics/vectors/cartesian/Lesson.vue?f016"],"names":["$export","S","sign","module","exports","Math","x","ref","_vm","attrs","_c","_v","staticClass","staticRenderFns","_self","this","Boxes","box1","brd1","JXG","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","visible","grid","showCopyright","showNavigation","pan","enabled","zoom","resize","resizeContainer","containerObj","clientWidth","clientHeight","fullUpdate","window","onresize","options","layer","placeTitle","create","CssStyle","fontSize","round","canvasWidth","placeLogo","girl","opacity","fixed","i","PtA","name","size","face","strokeColor","fillColor","label","offset","PtB","trace","j","boat","X","Y","snapToGrid","moveA","moveB","moveC","dash","strokeWidth","toFixed","a","runb","moveTo","runc","runa","random","cos","PI","sin","on","created","_this","$store","commit","title","newTopics","img","action","goto","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"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","file":"js/chunk-1337ea5e.6f7b2a9b.js","sourcesContent":["// 20.2.2.28 Math.sign(x)\nvar $export = require('./_export');\n\n$export($export.S, 'Math', { sign: require('./_math-sign') });\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=630fb842&prod&lang=scss&\"","// 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","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"ia\"},[_vm._v(\"\\n    Vectors and Scalars\\n  \")]),_vm._m(0),_c('br'),_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('v-img',{attrs:{\"contain\":\"\",\"src\":\"/assets/ally.png\",\"max-height\":\"650px\",\"max-width\":\"650px\"}})],1),_c('br'),_c('h3',{ref:\"rep\"},[_vm._v(\"\\n    Expressing a Vector\\n  \")]),_c('p',[_vm._v(\"\\n    Graphically, a vector is represented by an arrow pointing in the direction of the vector. The length of the arrow is equal to the magnitude of the vector. Mathematically, a vector can be expressed in two ways: (a) Through its magnitude and direction, and (b) through its components along the axes of a Cartesian system with origin at the tail of the vector.\\n  \")]),_c('h3',{ref:\"com\"},[_vm._v(\"\\n    Component Form of a Vector\\n  \")]),_vm._m(1),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Component Form of a Vector\\n  \")]),_vm._m(2),_vm._m(3),_c('p',[_vm._v(\" You can repeat the above steps any number of times to keep playing. \")]),_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    To understand vectors, we first need to understand scalars.\\n    A scalar is an entity that requires only magnitude for its description. For example,  when you weigh an object, you need only one number (e.g., 5 kg, 10 kg, etc.) to describe the object's mass.  That is because mass is a scalar. The same is true for the length of an object, too. The length of an object requires only one number to describe.\\n    \"),_c('br'),_vm._v(\"\\n    Now, a vector is an entity that has both a magnitude and a direction. For example,  imagine kicking a ball in the game of soccer. To locate where the ball lands, we need to know both — how far you kicked and in which direction.  That's because the position of the object is a vector.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    The most common way to express a vector is by its components along the axes of a Cartesian coordinate system with the origin located at the tail of the vector. To explain it further, let's get back to the example of the soccer player and soccer ball. Let's assume that the ball is initially located at a point with coordinates P=(0,0). Ally kicks the ball, and the ball lands at a point with coordinates Q=(a, b).  The ball's location can be described by a vector \"),_c('b',[_vm._v(\"r\")]),_vm._v(\" that connects the ball's initial position P to its final position Q.\\n    Now, Ally decides to get the ball back. To reach the ball, Ally first walks a distance 'a' along the x-axis, and then distance 'b' along the y-axis.  Thus, Ally has decomposed the vector \"),_c('b',[_vm._v(\"r\")]),_vm._v(\" into its components along the x and y axes. Therefore, one can write:\\n    $$\\\\mathbf r = a \\\\hat{x} + b \\\\hat{y}$$\\n    Expressing a vector by its components is called the component form of the vector.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\" Ally is our star soccer player, and she is ready to kick. Our goal is calculate the component form of the location vector \"),_c('b',[_vm._v(\"r\")]),_vm._v(\" of the final location of the soccer ball. Follow the steps below: \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('ul',{staticStyle:{\"list-style-type\":\"square\"}},[_c('li',[_c('h5',[_vm._v(\"Step 1\")]),_vm._v(\" Tap Ally on the shoulders to get started.  \")]),_c('br'),_c('li',[_c('h5',[_vm._v(\"Step 2\")]),_vm._v(\"\\n      Hover over the soccer ball to show its coordinates.\\n    \")]),_c('br'),_c('li',[_c('h5',[_vm._v(\"Step 3\")]),_vm._v(\"Tap on the soccer ball to calculate the x and y-components and to reveal the component form of its location vector. \")])])\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} from '../../../../common/edliy_utils-fractions';\r\nconst Boxes = {\r\n  box1: function () {\r\n            var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-10, 10, 10, -10],keepaspectratio: true, axis:true, ticks:{visible:false}, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n\t\t\tvar resize = function () {\r\n            brd1.resizeContainer(brd1.containerObj.clientWidth, brd1.containerObj.clientHeight, true);\r\n            brd1.fullUpdate();\r\n            };\r\n            window.onresize = resize;\r\n\t\t\tbrd1.options.layer['image'] =1;\r\n\t\t\tbrd1.options.layer['line'] =12;\r\n      placeTitle(brd1, 'Cartesian Form of a Vector', '');\r\n\t\t\t//brd1.create('text', [-8.5, 9., '<b>  <b>'],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(18*brd1.canvasWidth/500.)}});\r\n\t\t\tbrd1.create('text', [9, 0.35, '<i>x&#770;</i>'],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}});\r\n\t\t\tbrd1.create('text', [0.25, 9,  '<i>y&#770;</i>'],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}});\r\n      placeLogo(brd1);\r\n\t\t\tvar girl= brd1.create('image', ['/assets/pirate.svg', [-1., -0.15],[3, 3]], {opacity:1, fixed:true});\r\n\t\t\tvar i=0;\r\n\t\t\tvar PtO =brd1.create('point', [5,0], {name:'', size:0});\r\n\t\t\tvar PtA =brd1.create('point', [0, 0],{name:'', face:'circle',size:0, strokeColor:'black', fillColor:'yellow', fixed:true, label:{CssStyle:'fontFamily:Oswald',offset:[5,-10], fontSize:function(){return Math.round(10*brd1.canvasWidth/500.)}}});\r\n\t\t\t//var PtB =brd1.create('point', [function(){return boat.X()+0.5;}, function(){return boat.Y();}],{name:'B', face:'circle',size:0, strokeColor:'black', fillColor:'yellow', fixed:false, label:{CssStyle:'fontFamily:Oswald', offset:[5,-10],fontSize:function(){return Math.round(10*brd1.canvasWidth/500.)}}});\r\n\t\t\tvar PtB =brd1.create('point', [0.,0.],{name:'', face:'circle',size:1, strokeColor:'black', fillColor:'black', fixed:false, trace:false});\r\n\t\t\t//var a=brd1.create('angle', [PtO, PtA, PtB],{name:function(){return '&alpha; ='+ (JXG.Math.Geometry.angle(PtA, PtO, PtB)*180/Math.PI).toFixed(2)+'^o'},visible:true, radius:1,label:{CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(10*brd1.canvasWidth/500.)}}});\r\n\t\t\tvar j=0;\r\n\t\t\tvar boat = brd1.create('image', ['/assets/ship.svg', [function(){return PtB.X()-0.25;}, function(){return PtB.Y()-0.25;}],[0.5, 0.5]], {opacity:1,snapToGrid:false});\r\n\t\t\tvar moveA= brd1.create('point', [0,0],{name:'', face:'circle',size:0, strokeColor:'black', fillColor:'yellow'});\r\n\t\t\tvar moveB= brd1.create('point', [0,0],{name:'', face:'circle',size:0, strokeColor:'black', fillColor:'yellow'});\r\n\t\t\tvar moveC= brd1.create('point', [0,0],{name:'', face:'circle',size:0, strokeColor:'black', fillColor:'yellow'});\r\n\t\t\tbrd1.create('arrow', [moveC, moveA], {strokeColor:'blue', dash:1});\r\n\t\t\tbrd1.create('arrow', [[0,0], moveB], {strokeColor:'blue', dash:1});\r\n\t\t\tbrd1.create('arrow', [PtA, PtB], {visible:true, strokeColor:'red', strokeWidth:3});\r\n\t\t\tbrd1.create('text', [function(){return PtB.X()*0.5;}, 0.65, function(){return ''+(PtB.X()).toFixed(2)}],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(10*brd1.canvasWidth/500.)}, visible:function(){if(j==0){return false}else{return true}}});\r\n//\r\n\t\t\t//\r\n\t\t\tbrd1.create('text', [function(){return PtB.X()*0.5-0.5*Math.sign(PtB.X());}, function(){return PtB.Y()*0.5+0.5;}, '<b>r </b>'],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(12*brd1.canvasWidth/500.)},visible:function(){if(i==0){return false}else{return true}}});\r\n\t\t\t//\r\n\t\t\tbrd1.create('text', [function(){return PtB.X()+0.25}, function(){return PtB.Y()*0.5;},function(){return ''+(PtB.Y()).toFixed(2)}],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(10*brd1.canvasWidth/500.)},visible:function(){if(j==0){return false}else{return true}}});\r\n//\r\n\t\t\tbrd1.create('text', [-6.5,7.5, function(){return '<b>r</b>&#773; = ('+ (PtB.X()).toFixed(2)+') <i>x&#770;</i> + (' + (PtB.Y()).toFixed(2) +') <i>y&#770;</i>'}],{CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}, fixed:true,visible:function(){if(j==0){return false}else{return true}}});\r\n//[]\r\n\t\t\t//brd1.create('image', ['/assets/piratee.svg', [-0.0, -1.3],[2, 2]], {opacity:1, fixed:true, visible:function(){if(PtB.X()<0){return true} else{return false}}});\r\n//\r\n      var a =0;\r\n\t\t\tvar runb =function(){moveB.moveTo([PtB.X(), 0.0], 500)}\r\n\t\t\tvar runc =function(){moveA.moveTo([PtB.X(), PtB.Y()], 500)}\r\n      var runa =function(){a=Math.random(); PtB.moveTo([(4+4*a)*Math.cos(2*Math.PI*a), (4+4*a)*Math.sin(2*Math.PI*a)], 400)}\r\n\t\t\t//var runa =function(){PtB.moveTo([4*(1-2*Math.random()), 4*(1-2*Math.random())], 400)}\r\n\t\t\tboat.on('down', function(){j=1; moveC.moveTo([PtB.X(),0]); moveA.moveTo([PtB.X(), 0]); moveB.moveTo([0,0]);runb();runc();});\r\n\t\t\tgirl.on('down',function(){i=1; j=0; PtB.moveTo([0.0, 0.0]);runa(); moveB.moveTo([0,0]); moveA.moveTo([PtB.X(),0]); moveC.moveTo([PtB.X(),0])});\r\n    },\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"ia\">\n      Vectors and Scalars\n    </h3>\r\n    <p>\n      To understand vectors, we first need to understand scalars.\r\n      A scalar is an entity that requires only magnitude for its description. For example,  when you weigh an object, you need only one number (e.g., 5 kg, 10 kg, etc.) to describe the object's mass.  That is because mass is a scalar. The same is true for the length of an object, too. The length of an object requires only one number to describe.\r\n      <br>\r\n      Now, a vector is an entity that has both a magnitude and a direction. For example,  imagine kicking a ball in the game of soccer. To locate where the ball lands, we need to know both &mdash; how far you kicked and in which direction.  That's because the position of the object is a vector.\r\n    </p>\r\n    <br>\r\n    <v-layout justify-center>\n      <v-img contain\n             src=\"/assets/ally.png\"\n             max-height=\"650px\"\n             max-width=\"650px\"\n      />\n    </v-layout>\r\n    <br>\r\n    <h3 ref=\"rep\">\n      Expressing a Vector\n    </h3>\r\n    <p>\n      Graphically, a vector is represented by an arrow pointing in the direction of the vector. The length of the arrow is equal to the magnitude of the vector. Mathematically, a vector can be expressed in two ways: (a) Through its magnitude and direction, and (b) through its components along the axes of a Cartesian system with origin at the tail of the vector.\r\n    </p>\r\n    <h3 ref=\"com\">\n      Component Form of a Vector\n    </h3>\r\n    <p>\n      The most common way to express a vector is by its components along the axes of a Cartesian coordinate system with the origin located at the tail of the vector. To explain it further, let's get back to the example of the soccer player and soccer ball. Let's assume that the ball is initially located at a point with coordinates P=(0,0). Ally kicks the ball, and the ball lands at a point with coordinates Q=(a, b).  The ball's location can be described by a vector <b>r</b> that connects the ball's initial position P to its final position Q.\r\n      Now, Ally decides to get the ball back. To reach the ball, Ally first walks a distance 'a' along the x-axis, and then distance 'b' along the y-axis.  Thus, Ally has decomposed the vector <b>r</b> into its components along the x and y axes. Therefore, one can write:\r\n      $$\\mathbf r = a \\hat{x} + b \\hat{y}$$\r\n      Expressing a vector by its components is called the component form of the vector.\r\n    </p>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Component Form of a Vector\n    </h3>\r\n    <p> Ally is our star soccer player, and she is ready to kick. Our goal is calculate the component form of the location vector <b>r</b> of the final location of the soccer ball. Follow the steps below: </p>\r\n    <ul style=\"list-style-type: square;\">\r\n      <li><h5>Step 1</h5> Tap Ally on the shoulders to get started.  </li> <br>\r\n      <li>\n        <h5>Step 2</h5>\r\n        Hover over the soccer ball to show its coordinates.\n      </li> <br>\r\n      <li> <h5>Step 3</h5>Tap on the soccer ball to calculate the x and y-components and to reveal the component form of its location vector. </li>\r\n    </ul>\r\n    <p> You can repeat the above steps any number of times to keep playing. </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: 'Resistors',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Component Form of a Vector';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'Vectors vs. Scalars', img:'/assets/number-1.svg', action: () => this.goto('ia')},\r\n      {title: 'Expressing a Vector', img:'/assets/number-2.svg', action: () => this.goto('rep')},\r\n      {title: 'Component Form of a Vector', img:'/assets/number-3.svg', action: () => this.goto('com')},\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: 'Cartesian Components of a Vector',\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=630fb842&\"\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=630fb842&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":""}