{"version":3,"sources":["webpack:///./src/components/mathematics/percentage2/Lesson.vue","webpack:///./src/components/mathematics/percentage2/Boxes.js","webpack:///src/components/mathematics/percentage2/Lesson.vue","webpack:///./src/components/mathematics/percentage2/Lesson.vue?ecda","webpack:///./src/components/mathematics/percentage2/Lesson.vue?1dda","webpack:///./src/components/mathematics/percentage2/Lesson.vue?43a0"],"names":["ref","attrs","staticClass","_v","render","staticRenderFns","Boxes","box1","JXG","Options","board","minimizeReflow","point","showInfoBox","highlight","image","text","fixed","curve","cssDefaultStyle","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","makeResponsive","options","layer","placeTitle","placeLogo","reload","placeShuffle","test","placeTest","lenArr","fracArr","placeImage","create","visible","fillOpacity","dash","strokeColor","strokeWidth","fillColor","highlightStrokeColor","k","right","wrong","setAttribute","setLabel","label","alignX","offset","CssStyle","fontSize","on","this","Inp","Value","ini","fun","placeBoldText","placeMiddleText","placeLeftText","placeLine","placeInput","sect","removeObject","status","_loop","i","Math","cos","PI","max","sin","center","radiusPoint","anglePoint","total","abs","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-3cba40d4.233f1d1c.js","sourcesContent":["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 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    placeMiddleText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeRightText,\r\n    placeSliderSwitch,\r\n    placeCircle,\r\n    placeLogo,\r\n    placeShuffle,\r\n    placeTest,\r\n    placeBoldText\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.image.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.text.cssDefaultStyle='fontFamily:Oswald;'\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-0.5, 11, 11.5, -1],keepaspectratio: true, axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n  //brd1.suspendUpdate();\r\n  makeResponsive(brd1);\r\n  brd1.options.layer['image'] =12;\r\n  brd1.options.layer['circle'] =13;\r\n  brd1.options.layer['chart'] =14;\r\n  brd1.options.layer['sector'] =15;\r\n  brd1.options.layer['line'] =15;\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, 'Number to Percentage', 'Find the Percentage of Leftover Pizza Slices');\r\n  placeLogo(brd1);\r\n  var reload = placeShuffle(brd1);\r\n  var test = placeTest(brd1);\r\n  //var num =placeInput(brd1, 8, 4.5, 1);\r\n  //var den=placeInput(brd1, 8, 3.5, 4);\r\n  //hoverMe(brd1, num, 'Numerator', 15, 40);\r\n  //hoverMe(brd1, den, 'Denominator', 15, -40);\r\n  //placeLine(brd1, [8, 4], [9,4], 4, 'black');\r\n  //placeText(brd1, 7, 4, 24, 'Fraction =')\r\n  //var dataArr=[()=>num.Value(), ()=>den.Value()-num.Value()];\r\n  var lenArr = [10, 4, 5, 12, 8];\r\n  var fracArr = [4, 3, 4, 3, 6];\r\n  //var charts=[];\r\n  placeImage(brd1, '/assets/pizza.svg', 0, 1, 6,0);//\r\n//var circ = placeCircle(brd1, [3, 4], [5.5,4], 'black');\r\n//circ.setAttribute({strokeWidth:2, strokeColor:'black'});\r\n  var charts =brd1.create('circle', [[3,4], [6, 4]], {visible:true,\r\n  fillOpacity:0.25, dash:1, strokeColor: 'black', strokeWidth:0, fillColor:'white', layer: 2, highlightStrokeColor: 'black'})\r\n//brd1.create('circle', [3,4], [5,4], {strokeColor:'black', dash:1, fillOpacity:0});\r\n/*var charts =brd1.create('chart', [dataArr], {visible:false, highlightOnSector:true, highlightStrokeColor:'black',\r\n         highlightBySize:true, fillOpacity:0.4, strokeWidth:0, chartStyle:'pie',center:[3,4], colorArray: ['yellow','#0F408D'],\r\n         highlightColorArray:['#FFFFFF','#F9DF82','#F7FA7B','#B0D990','#69BF8E'],\r\n    //     labels:[()=>'Bulldog: '+type1.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()),\r\n    //     ()=>'Doberman: '+ type2.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()),\r\n    //     ()=>'Greyhound: '+ type3.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()),\r\n    //     ()=>'Dalmatian: '+ type4.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()),\r\n    //     ()=>'Shar-Pei: '+ type5.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())],\r\n         label:{display:'internal',CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}}, strokeColor:'black', radius:2, strokeWidth:2});*/\r\n//charts.label.setAttribute({visible:false2, offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n  var k =0;\r\n  //var reload =brd1.create('image', ['/assets/shuffle.svg', [-2.25,3.4],[1.2, 1.2]], {opacity:1, fixed:true});\r\n  var right = placeImage(brd1, '/assets/check.svg', 10, 3, 1.,  0);\r\n  var wrong = placeImage(brd1, '/assets/cross.svg', 10, 3, 1.,  0);\r\n  right.setAttribute({visible:false});\r\n  wrong.setAttribute({visible:false});\r\n  test.setLabel('Tap to Test Your Answer')\r\n  test.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n  test.on('over', function () {this.label.setAttribute({visible:true});});\r\n  test.on('out', function () {this.label.setAttribute({visible:false});});\r\n  test.on('down', function(){\r\n    if(100-fracArr[k]*100/lenArr[k] == Inp.Value())\r\n    {right.setAttribute({visible:true});\r\n     wrong.setAttribute({visible:false})\r\n  }\r\n    else {\r\n    wrong.setAttribute({visible:true});\r\n    right.setAttribute({visible:false})\r\n  }\r\n  });\r\n  /////////////////////////////////////////////////////////////////////////////////////////////\r\n  reload.setLabel('Tap to Shuffle')\r\n  reload.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n  reload.on('over', function () {this.label.setAttribute({visible:true});});\r\n  reload.on('out', function () {this.label.setAttribute({visible:false});});\r\n  reload.on('down', function(){right.setAttribute({visible:false}); wrong.setAttribute({visible:false});\r\n  if(k<5){\r\n    k+=1;\r\n  }\r\n  else{k=0}\r\n  ini(); fun();\r\n});\r\n  //brd1.create('text', [4, 6.5, 'Select slices that make'],{display:'internal', alignX:'right'});\r\n  placeBoldText(brd1, 8., 7.5, 'Percentage Formula');\r\n  placeBoldText(brd1, 8., 4.5, 'Your Answer');\r\n  //placeMiddleText(brd1, 3.0, 7.5, ()=>fracArr[k]+'/'+lenArr[k]);\r\n  placeMiddleText(brd1, 8., 6.5, 'Leftover Slices');\r\n  placeLeftText(brd1, 6.25, 6, '%  = ');\r\n  placeLine(brd1, [7., 6], [9., 6], 2, 'black');\r\n  placeMiddleText(brd1, 8., 5.5, 'Total Slices');\r\n  placeLeftText(brd1, 9.25, 6., 'x 100');\r\n  var Inp =placeInput(brd1, 8.5, 3.5, \"\");\r\n  placeLeftText(brd1, 7., 3.5, '% Value =');\r\n  //ques.setText();\r\n  //placeMiddleText(brd1, 3.0, 0.5, 'Click on a Slice to Select/Deselect it');\r\n  /////////////////////////////////////////////////////////////////////////////////////////////\r\n  //brd1.create('text', [()=>6+2.75*Math.cos(0.5*type1*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>3+2.75*Math.sin(0.5*type1*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>'Bulldog ('+type1.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())+')'],{display:'internal',anchorX:'middle', fixed:true, CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}});\r\n  //brd1.create('text', [()=>6+2.75*Math.cos((type1+0.5*type2)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>3+2.75*Math.sin((type1+0.5*type2)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>'Doberman ('+type2.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()) +')' ],{display:'internal',anchorX:'middle', fixed:true, CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}});\r\n  //brd1.create('text', [()=>6+2.75*Math.cos((type1+type2+0.5*type3)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>3+2.75*Math.sin((type1+type2+0.5*type3)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>'Grehound ('+type3.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())+')'],{display:'internal',anchorX:'middle', fixed:true, CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}});\r\n  //brd1.create('text', [()=>6+2.75*Math.cos((type1+type2+type3+0.5*type4)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>3+2.75*Math.sin((type1+type2+type3+0.5*type4)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>'Dalmatian ('+type4.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())+')'],{display:'internal',anchorX:'middle', fixed:true, CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}});\r\n  //brd1.create('text', [()=>6+2.75*Math.cos((type1+type2+type3+type4+0.5*type5)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>3+2.75*Math.sin((type1+type2+type3+type4+0.5*type5)*2*Math.PI/(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf())), ()=>'Shar-Pie ('+type5.valueOf()+'/'+(type1.valueOf()+type2.valueOf()+type3.valueOf()+type4.valueOf()+type5.valueOf()) +')'],{display:'internal',anchorX:'middle', fixed:true, CssStyle:'fontFamily:Oswald', fontSize:function(){return Math.round(16*brd1.canvasWidth/800.)}});\r\n//\r\n/////////////////////\r\nvar sect=[];\r\nvar ini = function(){\r\nbrd1.removeObject(sect,true);\r\n}\r\n/////////////////\r\n var status =[];\r\n var fun = function(){\r\n for(let i=0; i<lenArr[k]; i++)\r\n {\r\n   sect[i] =brd1.create('sector', [[3,4],\r\n    [3+3*Math.cos((i+1)*2*Math.PI/Math.max(lenArr[k],1)), 4+3*Math.sin((i+1)*2*Math.PI/Math.max(lenArr[k], 1))],\r\n    [3+3*Math.cos((i+2)*2*Math.PI/Math.max(lenArr[k],1)), 4+3*Math.sin((i+2)*2*Math.PI/Math.max(lenArr[k], 1))]],\r\n   {strokeColor:'black', strokeWidth:1, fillColor:'OldLace', fillOpacity:function(){if(i<fracArr[k]){return 1}else{return 0}}});\r\n   status[i] = 0;\r\n   sect[i].setAttribute({dash:2, center:{visible:false}, radiusPoint:{visible:false}, anglePoint:{visible:false}});\r\n }\r\n};\r\n var test = function()\r\n { let total=0;\r\n   for(let i=0; i<lenArr[k]; i++)\r\n   {\r\n     total = total + Math.abs(Math.sin(status[i]*Math.PI/2));\r\n   }\r\n   return total;\r\n }\r\nfun();\r\n/*\r\nbrd1.on('up', function(evt)\r\n{\r\n  let coords = brd1.getMousePosition(evt);\r\n  for(let i=0; i<lenArr[k]; i++)\r\n  {\r\n    if(sect[i].hasPointSector(coords[0], coords[1])==true)\r\n    { status[i] +=1;\r\n      right.setAttribute({visible:false});\r\n      wrong.setAttribute({visible:false});\r\n      sect[i].setAttribute({fillOpacity:Math.abs(Math.sin(status[i]*Math.PI/2)), fillColor:'OldLace'});\r\n    }\r\n  }\r\n}\r\n);*/\r\n//brd1.create('text', [6, 6, function(){return coords[0]}]);\r\n //num.on('down', function(){i=0; ini();fun();brd1.update()});\r\n //den.on('down', function(){i=0; ini();fun();brd1.update()});\r\n /////////////////////////////////////////////////////\r\n /*let magicGraph = document.querySelector(\"#jxgbox1\");\r\n let inputFields = magicGraph.querySelectorAll(\"input\");\r\n var onEachPress = function(event) { i=0; ini(); sect=[]; fun();}\r\n    inputFields.forEach(function(field) {\r\n    field.addEventListener('input', onEachPress);});*/\r\n/*  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(2*Math.PI/(den.Value())), ()=>4+2*Math.sin(2*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});\r\n  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(4*Math.PI/(den.Value())), ()=>4+2*Math.sin(4*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});\r\n  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(6*Math.PI/(den.Value())), ()=>4+2*Math.sin(6*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});\r\n  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(8*Math.PI/(den.Value())), ()=>4+2*Math.sin(8*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});\r\n  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(10*Math.PI/(den.Value())), ()=>4+2*Math.sin(10*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});\r\n  brd1.create('segment', [[3,4], [()=>3+2*Math.cos(12*Math.PI/(den.Value())), ()=>4+2*Math.sin(12*Math.PI/(den.Value()))]],\r\n  {strokeColor:'black', strokeWidth:1, dash:2});*/\r\n//\r\n//reload.on('down', function(){ini();type1=Math.round(Math.random()*3)+1; type2=Math.round(Math.random()*4)+1; type3=Math.round(Math.random()*4)+1;type4=Math.round(Math.random()*2)+1;type5=Math.round(Math.random()*3)+1;\r\n//   i=1;j=1;k=1;l=1;m=1;});\r\n//brd1.unsuspendUpdate();\r\n},\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\n      Percentage\n    </h3>\r\n    <p>\n      Percent is often used to express the number of things in a group relative to total size of the group.\r\n      <br><br>\r\n      For example, consider a class of 60 of students that has 45 girls and 15 boys.\r\n      <br><br> 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 <i> out of 100</i>.\r\n      Essentially we ask &mdash; if 45 girls out of 60 students, then how many girls out of 100 students?\r\n      <br><br>\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      <br><br>\r\n    </p>\r\n    <h3 ref=\"intro\">\r\n      Finding Percentage\r\n    </h3>\r\n    <p>\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    </p>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Percentage to Numbers\n    </h3>\r\n    <p>\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    </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: 'Percentage2',\r\n   created () {\r\n  //  await this.$store.dispatch('navigation/getData');\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Numbers to Percentage';\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: 'Percentage',\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=7303ff5c&\"\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=7303ff5c&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=7303ff5c&prod&lang=scss&\""],"sourceRoot":""}