{"version":3,"sources":["webpack:///./src/components/mathematics/fractions/Lesson.vue","webpack:///./src/components/mathematics/fractions/Boxes.js","webpack:///src/components/mathematics/fractions/Lesson.vue","webpack:///./src/components/mathematics/fractions/Lesson.vue?841d","webpack:///./src/components/mathematics/fractions/Lesson.vue?0dee","webpack:///./src/components/mathematics/fractions/Lesson.vue?ed70"],"names":["ref","attrs","staticClass","staticRenderFns","Boxes","box1","JXG","Options","board","minimizeReflow","point","showInfoBox","highlight","text","fixed","curve","cssDefaultStyle","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","makeResponsive","options","layer","placeLogo","placeTitle","num","placeInput","den","hoverMe","placeLine","placeText","dataArr","Value","i","placeImage","create","_defineProperty","highlightOnSector","highlightStrokeColor","highlightBySize","fillOpacity","strokeWidth","chartStyle","center","colorArray","highlightColorArray","label","display","CssStyle","fontSize","Math","round","canvasWidth","strokeColor","radius","reload","opacity","setLabel","setAttribute","visible","offset","on","this","sect","ini","removeObject","fun","cos","PI","max","sin","dash","magicGraph","document","querySelector","inputFields","querySelectorAll","onEachPress","event","forEach","field","addEventListener","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-616bb6ce.c80306c6.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Fraction\\n  \")]),_c('p',[_vm._v(\"\\n    A fraction is used to represent a part or portion of a whole object. A fraction is sometimes also called a fractional number.\\n    Take this example: imagine you bought a 6-slice pizza. Then 1/2 of that pizza would be 3 out of the 6 slices of the pizza.\\n  \")]),_c('h3',{ref:\"types\"},[_vm._v(\"\\n    Types of Fractions\\n  \")]),_vm._m(0),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Understanding Fractional Numbers\\n  \")]),_c('p',[_vm._v(\" In this MagicGraph, you will learn about fractions by example of slices of a pizza.\")]),_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(\" Proper Fraction \")])]),_c('p',[_vm._v(\"\\n      A proper fraction represents a portion or a part of a whole object. In a proper fraction, the denominator is greater than the numerator.\\n      An example of proper fraction would be 3/4 — which represents 3 slices of a 4-slice object.\\n    \")]),_c('li',[_c('h5',[_vm._v(\" Improper Fraction \")])]),_c('p',[_vm._v(\"\\n      An improper fraction is a sum of a whole number and a proper fraction. In an improper fraction, the numerator is greater than the denominator.\\n      An example of improper fraction would be \\\\(\\\\frac{5}{4}\\\\) — which represents 1 whole pizza plus 1 slice of a 4-slice pizza.\\n    \")]),_c('li',[_c('h5',[_vm._v(\" Mixed Fraction \")])]),_c('p',[_vm._v(\"\\n      When an improper fraction is represented as a combination of a whole number and a proper fraction then it is called a mixed fraction.\\n      An example of mixed fraction would be \\\\(1\\\\frac{1}{4}\\\\) — which is same as \\\\(\\\\frac{5}{4}\\\\).\\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    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeSliderSwitch,\r\n    placeLogo\r\n} from '../../../common/edliy_utils-circle';\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.text.cssDefaultStyle='fontFamily:Oswald;'\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [0, 10, 10, 0],keepaspectratio: true, axis:true, 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  brd1.options.layer['chart'] =14;\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  placeLogo(brd1);\r\n  placeTitle(brd1, 'Fractions', 'Enter the Numerator and Denominator in Input Fields');\r\n  var type1 = 2;\r\n  var type2 = 3;\r\n  var type3 = 4\r\n  var type4 = 1\r\n  var type5 = 2;\r\n  var c1=0, c2=0, c3=0, c4=0, c5=0;\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 charts=[];\r\n  var i=0;\r\nplaceImage(brd1, '/assets/pizza.svg', 1, 2, 4,0);\r\nvar charts =brd1.create('chart', [dataArr], {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\r\nvar reload = brd1.create('image', ['/assets/shuffle.svg', [10.25,8.4],[1.2, 1.2]], {opacity:1, fixed:true});\r\n  reload.setLabel('Tap to Shuffle')\r\n  reload.label.setAttribute({visible:false, 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  //\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 fun = function(){\r\n for(i=0; i<den.Value(); i++)\r\n {\r\n   sect[i] =brd1.create('segment', [[3,4], [3+2*Math.cos((i+1)*2*Math.PI/Math.max(den.Value(),1)), 4+2*Math.sin((i+1)*2*Math.PI/Math.max(den.Value(), 1))]],\r\n   {strokeColor:'black', strokeWidth:1, dash:2});\r\n }\r\n }\r\n ini(); fun();\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},\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\r\n      Fraction\r\n    </h3>\r\n    <p>\r\n      A fraction is used to represent a part or portion of a whole object. A fraction is sometimes also called a fractional number.\r\n      Take this example: imagine you bought a 6-slice pizza. Then 1/2 of that pizza would be 3 out of the 6 slices of the pizza.\r\n    </p>\r\n    <h3 ref=\"types\">\r\n      Types of Fractions\r\n    </h3>\r\n    <ul class=\"a\">\r\n      <li> <h5> Proper Fraction </h5> </li>\r\n      <p>\n        A proper fraction represents a portion or a part of a whole object. In a proper fraction, the denominator is greater than the numerator.\r\n        An example of proper fraction would be 3/4 &mdash; which represents 3 slices of a 4-slice object.\r\n      </p>\r\n      <li> <h5> Improper Fraction </h5> </li>\r\n      <p>\n        An improper fraction is a sum of a whole number and a proper fraction. In an improper fraction, the numerator is greater than the denominator.\r\n        An example of improper fraction would be \\(\\frac{5}{4}\\) &mdash; which represents 1 whole pizza plus 1 slice of a 4-slice pizza.\r\n      </p>\r\n      <li> <h5> Mixed Fraction </h5> </li>\r\n      <p>\n        When an improper fraction is represented as a combination of a whole number and a proper fraction then it is called a mixed fraction.\r\n        An example of mixed fraction would be \\(1\\frac{1}{4}\\) &mdash; which is same as \\(\\frac{5}{4}\\).\r\n      </p>\r\n    </ul>\r\n    <h3 ref=\"pg\">\n      MagicGraph | Understanding Fractional Numbers\r\n    </h3>\r\n    <p> In this MagicGraph, you will learn about fractions by example of slices of a pizza.</p>\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: 'Fractions',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Fractions';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'Fractions', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Types of Fractions', 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: 'Fractions',\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=d877208c&\"\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=d877208c&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=d877208c&prod&lang=scss&\""],"sourceRoot":""}