{"version":3,"sources":["webpack:///./src/components/mathematics/percentage/Lesson.vue?d271","webpack:///./src/components/mathematics/percentage/Lesson.vue","webpack:///./src/components/mathematics/percentage/Boxes.js","webpack:///src/components/mathematics/percentage/Lesson.vue","webpack:///./src/components/mathematics/percentage/Lesson.vue?cc35","webpack:///./src/components/mathematics/percentage/Lesson.vue?63b8"],"names":["ref","attrs","staticClass","_v","render","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","i","NumList","analytics","placeShuffle","setLabel","label","setAttribute","alignX","offset","CssStyle","fontSize","on","this","erase","placeTest","placeMiddleText","width","num_height","num_width","rects","rects2","rectsVisibility","rectsVisibility2","mass2","_loop","x","rectx","rectx2","vx","vx2","_loop2","y","v","v2","rect","create","opacity","fixed","rect2","changeRectColorxy","push","current_visibility","current_visibility2","massrect","mass","clearVisibility","length","rght","wrng","unsuspendUpdate","name","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-66b3efa0.92183bfe.js","sourcesContent":["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=4f337f38&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n Percentage\\n \")]),_vm._m(0),_c('h3',{ref:\"intro\"},[_vm._v(\"\\n Finding Percentage\\n \")]),_c('p',[_vm._v(\"\\n To calculate the percentage of x out of y, use the following formula:\\n $$ \\\\% \\\\text{ value} = \\\\frac{x}{y} \\\\times 100$$\\n \")]),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n MagicGraph | Percentage to Numbers\\n \")]),_c('p',[_vm._v(\"\\n Shown in the MagicGraph is a collection of 50 empty boxes. Tap on a box to select/deselect it.\\n Selected box is shown in red.\\n The goal is to select boxes that make up the given percentage of the total collection.\\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('p',[_vm._v(\"\\n Percent is often used to express the number of things in a group relative to total size of the group.\\n \"),_c('br'),_c('br'),_vm._v(\"\\n For example, consider a class of 60 of students that has 45 girls and 15 boys.\\n \"),_c('br'),_c('br'),_vm._v(\" How can we express the numbers of girls relative to total number of students in the class?\\n One can use percentage. Percent essently means \"),_c('i',[_vm._v(\" out of 100\")]),_vm._v(\".\\n Essentially we ask — if 45 girls out of 60 students, then how many girls out of 100 students?\\n \"),_c('br'),_c('br'),_vm._v(\"\\n We can find the answer by solving the following equation:\\n $$\\\\frac{45}{60} = \\\\frac{x}{100}$$\\n Upon moving \\\\(100\\\\) to the left hand side of the equation, we obtain the value of \\\\(x\\\\) as\\n $$x = \\\\frac{45}{60} \\\\times 100 = 75$$\\n Thus, we can say 75% of the students in the class are girls.\\n \"),_c('br'),_c('br')])\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} from '../../../common/edliy_utils-fractions';\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: [-14, 16, 14, -12],\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\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 placeTitle(brd1, 'Percentage to Numbers', '(Select boxes that make up the given percentage of all boxes)');\r\n var i=0;\r\n var NumList = [20, 40, 60, 80, 100];\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 = placeTest(brd1);\r\n erase.setLabel('Tap to Test Your Answer')\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 placeMiddleText(brd1, 0, 12, ()=>'Percentage = ' + NumList[i] + '%');\r\n //dragMe(brd1, 5, 5);\r\n //var stone=placeLine(brd1, [-2,0], [3,5], 10, 'grey');\r\n //\r\n // placeText(brd1, 5, 10, 'Location of CM is shown by crosshair');\r\n //Titles and subtitle\r\n //var title = brd1.create('text', [12, 22, ' Center of Mass '],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(28*brd1.canvasWidth/500.)}},);\r\n // brd1.create('image', ['/assets/crosshair.svg', [7, 11], [1,1]], {visible: true, fixed:true});\r\n //var rectImg = brd1.create('image', ['/assets/orangeSquare.svg', [20,16], [2,2]], {visible: true, fixed:true});\r\n //var massKg = brd1.create('text', [21, 17, '1 kg'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(16*brd1.canvasWidth/500.)}},);\r\n //FIRST\r\n var width=2;\r\n var num_height=5;\r\n var num_width=5;\r\n var rects=[];\r\n var rects2=[];\r\n var rectsVisibility=[];\r\n var rectsVisibility2=[];\r\n var mass2=0; var mass=0;\r\n var cmx=0,cmy=0;\r\n for (let x=0; x\r\n
\r\n

\n Percentage\n

\r\n

\n Percent is often used to express the number of things in a group relative to total size of the group.\r\n

\r\n For example, consider a class of 60 of students that has 45 girls and 15 boys.\r\n

How can we express the numbers of girls relative to total number of students in the class?\r\n One can use percentage. Percent essently means out of 100.\r\n Essentially we ask — if 45 girls out of 60 students, then how many girls out of 100 students?\r\n

\r\n We can find the answer by solving the following equation:\r\n $$\\frac{45}{60} = \\frac{x}{100}$$\r\n Upon moving \\(100\\) to the left hand side of the equation, we obtain the value of \\(x\\) as\r\n $$x = \\frac{45}{60} \\times 100 = 75$$\r\n Thus, we can say 75% of the students in the class are girls.\r\n

\r\n

\r\n

\r\n Finding Percentage\r\n

\r\n

\n To calculate the percentage of x out of y, use the following formula:\r\n $$ \\% \\text{ value} = \\frac{x}{y} \\times 100$$\r\n

\r\n

\n MagicGraph | Percentage to Numbers\n

\r\n

\n Shown in the MagicGraph is a collection of 50 empty boxes. Tap on a box to select/deselect it.\r\n Selected box is shown in red.\r\n The goal is to select boxes that make up the given percentage of the total collection.\r\n

\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\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=4f337f38&\"\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=4f337f38&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":""}