{"version":3,"sources":["webpack:///./src/components/mathematics/data/SubtopicMenu.vue","webpack:///./src/components/mathematics/SubTopics.vue","webpack:///src/components/mathematics/SubTopics.vue","webpack:///./src/components/mathematics/SubTopics.vue?7802","webpack:///./src/components/mathematics/SubTopics.vue?0fc9","webpack:///src/components/mathematics/data/SubtopicMenu.vue","webpack:///./src/components/mathematics/data/SubtopicMenu.vue?d954","webpack:///./src/components/mathematics/data/SubtopicMenu.vue?765a","webpack:///./src/components/mathematics/SubTopics.vue?954a","webpack:///./src/components/mathematics/data/SubtopicMenu.vue?b8ca"],"names":["class","_vm","$vuetify","staticStyle","attrs","_c","staticClass","_defineProperty","key","path","staticRenderFns","scopedSlots","fn","_ref","hover","img","props","headline","type","String","default","required","description","component","name","components","SubtopicCard","data","playerOptions","preload","ratio","topics","created","_this","$store","commit","newTopics","title","action","$router","push","newshowhome","newMath","newLeftArrow","newModule","metaInfo","titleTemplate","meta","content"],"mappings":"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","file":"js/chunk-a3ff77a4.decce02f.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{staticClass:\"font-weight-medium\",class:{'display-1': _vm.$vuetify.breakpoint.lgAndUp,'headline': _vm.$vuetify.breakpoint.mdOnly, 'subheading': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticStyle:{\"font-family\":\"Oswald\"}},[_vm._v(\" Introduction\")])]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('v-layout',{attrs:{\"align-center\":\"\",\"justify-center\":\"\",\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{staticClass:\"font-weight-light\",class:{'headline': _vm.$vuetify.breakpoint.lgAndUp,'body-2': _vm.$vuetify.breakpoint.mdOnly, 'body-2': _vm.$vuetify.breakpoint.smAndDown},attrs:{\"xs12\":\"\",\"sm8\":\"\",\"md8\":\"\",\"lg8\":\"\",\"xl8\":\"\"}},[_c('span',{staticClass:\"subhead\"},[_vm._v(\"S\")]),_vm._v(\"howing or presenting data in a graphical or pictorial form is called data visualization.\\n      Presenting data in a graphical form is useful as it helps us see the information contained in the data, make comparisons, and identify patterns or trends.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_vm._v(\"\\n      There are several ways to represent data graphically. In this module, we will discuss three most commonly used ways\\n      of representing data.\\n      \"),_c('br'),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('h5',[_vm._v(\"◉ Pictograph (Pictogram)\")]),_vm._v(\"\\n      A pictograph (also known as a pictogram) is a visualization method where the data is represented using pictures or images.\\n      You will learn more about pictographs in Lesson 3 of this module.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\"◉ Bar Chart (or a Bar Graph) \")]),_vm._v(\"\\n      A bar chart (also known as a bar graph) is a visualization method where the data is\\n      represented using bars of different heights.\\n      A bar chart is commonly used to represent the grouping of data into separate groups or categories,\\n      such as days of the week, months of the year, age groups, height groups. You will learn more about bar charts in Lesson 1 of this module.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\"◉ Pie Chart \")]),_vm._v(\"\\n      A pie chart is a visualization technique where the data is represented using a circular diagram that resembles a pie.\\n      Each sector (known as a 'slice') of the circle (known as a 'pie') represents a sample of the data.\\n      The size of the slice is proportional to the size of the sample relative to whole.\\n      You will learn more about pie charts in Lesson 2 of this module.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('div',{staticClass:\"font-weight-medium\",class:{'display-1': _vm.$vuetify.breakpoint.lgAndUp,'headline': _vm.$vuetify.breakpoint.mdOnly, 'subheading': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticStyle:{\"font-family\":\"Oswald\"}},[_vm._v(\" Outline\")])]),_vm._v(\"\\n      This chapter on visualizing data consists of three lessons. Each lesson comes with a visually interactive MagicGraph that offers students a uniquely engaging and effective learning experience.\\n      \"),_c('h5',[_vm._v(\" Lesson 1 \")]),_vm._v(\"\\n      In this lesson, you will learn how to read and create bar charts.\\n      \"),_c('h5',[_vm._v(\" Lesson 2 \")]),_vm._v(\"\\n      In this lesson, you will learn how to read and create pie charts.\\n      \"),_c('h5',[_vm._v(\" Lesson 3 \")]),_vm._v(\"\\n      In this lesson, you will learn how to read and create pictographs.\\n      \"),_c('br'),_c('br')]),_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\",\"md4\":\"\",\"lg4\":\"\",\"xl4\":\"\"}},[_c('h5',{staticStyle:{\"text-align\":\"center\"}},[_vm._v(\"\\n        Graphical presentation of the data, such as the pie chart shown below, can help us easily interpret data, make comparisons, and identify patterns.\\n      \")]),_c('br'),_c('v-img',{staticClass:\"mx-auto\",attrs:{\"padding\":\"10px\",\"max-height\":\"500px\",\"max-width\":\"500px\",\"src\":\"/assets/PieChart.png\",\"contain\":\"\"}})],1)],1),_c('div',{staticClass:\"font-weight-medium\",class:{'display-1': _vm.$vuetify.breakpoint.lgAndUp,'headline': _vm.$vuetify.breakpoint.mdOnly, 'subheading': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticStyle:{\"font-family\":\"Oswald\"}},[_vm._v(\" Let's get started\")])]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('div',{staticClass:\"font-weight-light\",class:{'headline': _vm.$vuetify.breakpoint.lgAndUp,'body-2': _vm.$vuetify.breakpoint.mdOnly, 'body-2': _vm.$vuetify.breakpoint.smAndDown}},[_c('span',{staticClass:\"subhead\"},[_vm._v(\"E\")]),_vm._v(\"xplore our comprehensive library of interactive lessons on visualizing data.\\n  \")]),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('v-container',{attrs:{\"grid-list-xl\":\"\",\"text-xs-center\":\"\"}},[_c('v-layout',{attrs:{\"align-center\":\"\",\"justify-center\":\"\",\"row\":\"\"}},_vm._l((_vm.topics),function(topic){return _c('v-flex',{key:topic.key,attrs:{\"xs12\":\"\",\"sm12\":\"\",\"md12\":\"\",\"lg12\":\"\",\"xl12\":\"\"}},[_c('subtopic-card',{attrs:{\"headline\":topic.headline,\"description\":topic.description,\"img\":topic.img,\"path\":topic.path}})],1)}),1)],1),_c('br'),_c('br'),_c('br')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('router-link',{attrs:{\"to\":_vm.path}},[_c('v-container',{staticStyle:{\"padding\":\"0px\"},attrs:{\"grid-list-xs\":\"\",\"fluid\":\"\"}},[_c('v-layout',{staticClass:\"px-1\",attrs:{\"align-center\":\"\",\"justify-center\":\"\",\"row\":\"\"}},[_c('v-hover',{scopedSlots:_vm._u([{key:\"default\",fn:function({ hover }){return [_c('v-card',{staticClass:\"rounded-card\",attrs:{\"elevation\":hover ? 9:2,\"max-width\":\"400px\",\"align\":\"center\",\"justify\":\"center\"}},[_c('h2',{staticClass:\"font-weight-medium mt-3 text-center\",staticStyle:{\"color\":\"black\"}},[_vm._v(\"\\n            \"+_vm._s(_vm.headline)+\"\\n          \")]),_c('v-divider',{staticClass:\"mt-3\",staticStyle:{\"color\":\"black\"}}),_c('v-img',{staticClass:\"mt-2 mb-2 mx-3\",attrs:{\"src\":_vm.img,\"contain\":\"\"}}),_c('br')],1)]}}])})],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <router-link :to=\"path\">\r\n    <v-container style=\"padding:0px\" grid-list-xs fluid>\r\n      <v-layout\r\n        align-center\r\n        justify-center\r\n        row\r\n        class=\"px-1\"\n      >\r\n        <v-hover v-slot:default=\"{ hover }\">\r\n          <v-card class=\"rounded-card\"\r\n                  :elevation=\"hover ? 9:2\"\r\n                  max-width=\"400px\"\r\n                  align=\"center\"\r\n                  justify=\"center\"\r\n          >\r\n            <h2 style=\"color:black;\" class=\" font-weight-medium mt-3 text-center\">\n              {{ headline }}\n            </h2>\r\n            <v-divider style=\"color:black;\" class=\"mt-3\" />\r\n            <v-img\r\n              class=\"mt-2 mb-2 mx-3\"\r\n              :src=\"img\"\r\n              contain\n            />\r\n            <br>\r\n          </v-card>\r\n        </v-hover>\r\n      </v-layout>\r\n    </v-container>\r\n  </router-link>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\r\n    headline: {\r\n      type: String,\r\n      default: '',\r\n      required: true\r\n    },\r\n    description: {\r\n      type: String,\r\n      default: '',\r\n      required: false\r\n    },\r\n    img: {\r\n      type: String,\r\n      default: '',\r\n      required: false\r\n    },\r\n    path: {\r\n      type: String,\r\n      default: '',\r\n      required: true\r\n    },\r\n  }\r\n}\r\n</script>\r\n<style scoped lang=\"scss\">\r\n@import '@/styles/screen-sizes.scss';\r\n.rounded-card {\r\n  margin-top:auto;\r\n  margin-bottom:auto;\r\n  @include respond-to(less-smallest-screens) {height:52vw; width:30vw; border-radius: 4.5px; }\r\n  @include respond-to(smallest-screens) { height:40vw; width:28vw; border-radius: 4.5px; }\r\n  @include respond-to(small-screens) { height:44vw; width:29vw;border-radius: 5.5px;}\r\n  @include respond-to(medium-screens) { height:42vw; width:28vw;border-radius: 6.5px;}\r\n  @include respond-to(large-screens) { height: 32vw; width:22vw;border-radius: 7.5px;}\r\n  @include respond-to(largest-screens) { height:auto; width:15vw; border-radius: 8.5px;}\r\n}\r\n.thumbnail {\r\n  display: inline-block;\r\n  max-width: 100%; /* only this one important */\r\n  margin-bottom: 1rem;\r\n  border: solid 4px #fefefe;\r\n  border-radius: 3px;\r\n  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);\r\n  line-height: 0; }\r\n.imgC{\r\n  justify:center;\r\n  align:center;\r\n  position:relative;\r\n  @include respond-to(less-smallest-screens) {height:60px; top:5px;}\r\n  @include respond-to(smallest-screens) {height:60px;top:6.5px;}\r\n  @include respond-to(small-screens) {height:70px;top:10px;}\r\n  @include respond-to(medium-screens) {height:80px;top:12px;}\r\n  @include respond-to(large-screens) {height: 140px;top:12px;}\r\n  @include respond-to(largest-screens) {height:150px;top:15px;}\r\n  padding-bottom:20px;\r\n  padding-top:30px;\r\n  }\r\n.subjects{\r\n  text-decoration: none;\r\n  font-family: Oswald;\r\n  display: inline-block;\r\n  text-align:center;\r\n  position:relative;\r\n  @include respond-to(less-smallest-screens) {font-size:2vw;padding-top:15px}\r\n  @include respond-to(smallest-screens) {font-size:2vw;padding-top:15px}\r\n  @include respond-to(small-screens) {font-size:3vw;padding-top:20px;}\r\n  @include respond-to(medium-screens) {font-size:2.0vw;padding-top:15px;}\r\n  @include respond-to(large-screens) {font-size:2.0vw;padding-top:15px;}\r\n  @include respond-to(largest-screens) {font-size:2.0vw; padding-top:20px;}\r\n  }\r\na {\r\n  text-decoration: none !important;\r\n}\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!./SubTopics.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!./SubTopics.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SubTopics.vue?vue&type=template&id=dd633ab8&scoped=true&\"\nimport script from \"./SubTopics.vue?vue&type=script&lang=js&\"\nexport * from \"./SubTopics.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SubTopics.vue?vue&type=style&index=0&id=dd633ab8&prod&scoped=true&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  \"dd633ab8\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div>\r\n    <div class=\"font-weight-medium\"\r\n         :class=\"{'display-1': $vuetify.breakpoint.lgAndUp,'headline': $vuetify.breakpoint.mdOnly, 'subheading': $vuetify.breakpoint.smAndDown}\"\r\n    >\r\n      <span style=\"font-family:Oswald\"> Introduction</span>\r\n    </div>\r\n    <div style=\"margin-top: 10px\" />\r\n    <v-layout align-center\n              justify-center\n              row\n              wrap\n    >\r\n      <v-flex xs12\n              sm8\n              md8\n              lg8\n              xl8\n              class=\"font-weight-light\"\r\n              :class=\"{'headline': $vuetify.breakpoint.lgAndUp,'body-2': $vuetify.breakpoint.mdOnly, 'body-2': $vuetify.breakpoint.smAndDown}\"\r\n      >\r\n        <span class=\"subhead\">S</span>howing or presenting data in a graphical or pictorial form is called data visualization.\r\n        Presenting data in a graphical form is useful as it helps us see the information contained in the data, make comparisons, and identify patterns or trends.\r\n        <div style=\"margin-top: 20px\" />\r\n        There are several ways to represent data graphically. In this module, we will discuss three most commonly used ways\r\n        of representing data.\r\n        <br>\r\n        <div style=\"margin-top: 20px\" />\r\n        <h5>&#9673; Pictograph (Pictogram)</h5>\r\n        A pictograph (also known as a pictogram) is a visualization method where the data is represented using pictures or images.\r\n        You will learn more about pictographs in Lesson 3 of this module.\r\n        <div style=\"margin-top: 10px\" />\r\n        <h5>&#9673; Bar Chart (or a Bar Graph) </h5>\r\n        A bar chart (also known as a bar graph) is a visualization method where the data is\r\n        represented using bars of different heights.\r\n        A bar chart is commonly used to represent the grouping of data into separate groups or categories,\r\n        such as days of the week, months of the year, age groups, height groups. You will learn more about bar charts in Lesson 1 of this module.\r\n        <div style=\"margin-top: 10px\" />\r\n        <h5>&#9673; Pie Chart </h5>\r\n        A pie chart is a visualization technique where the data is represented using a circular diagram that resembles a pie.\r\n        Each sector (known as a 'slice') of the circle (known as a 'pie') represents a sample of the data.\r\n        The size of the slice is proportional to the size of the sample relative to whole.\r\n        You will learn more about pie charts in Lesson 2 of this module.\r\n        <div style=\"margin-top: 20px\" />\r\n        <div class=\"font-weight-medium\"\r\n             :class=\"{'display-1': $vuetify.breakpoint.lgAndUp,'headline': $vuetify.breakpoint.mdOnly, 'subheading': $vuetify.breakpoint.smAndDown}\"\r\n        >\r\n          <span style=\"font-family:Oswald\"> Outline</span>\r\n        </div>\r\n        This chapter on visualizing data consists of three lessons. Each lesson comes with a visually interactive MagicGraph that offers students a uniquely engaging and effective learning experience.\r\n        <h5> Lesson 1 </h5>\r\n        In this lesson, you will learn how to read and create bar charts.\r\n        <h5> Lesson 2 </h5>\r\n        In this lesson, you will learn how to read and create pie charts.\r\n        <h5> Lesson 3 </h5>\r\n        In this lesson, you will learn how to read and create pictographs.\r\n        <br><br>\r\n      </v-flex>\r\n      <v-flex xs12\n              sm4\n              md4\n              lg4\n              xl4\n      >\r\n        <h5 style=\"text-align:center\">\n          Graphical presentation of the data, such as the pie chart shown below, can help us easily interpret data, make comparisons, and identify patterns.\n        </h5>\r\n        <br>\r\n        <v-img class=\"mx-auto\"\r\n               padding=\"10px\"\r\n               max-height=\"500px\"\r\n               max-width=\"500px\"\r\n               src=\"/assets/PieChart.png\"\r\n               contain\r\n        />\r\n      </v-flex>\r\n    </v-layout>\r\n    <div class=\"font-weight-medium\"\r\n         :class=\"{'display-1': $vuetify.breakpoint.lgAndUp,'headline': $vuetify.breakpoint.mdOnly, 'subheading': $vuetify.breakpoint.smAndDown}\"\r\n    >\r\n      <span style=\"font-family:Oswald\"> Let's get started</span>\r\n    </div>\r\n    <div style=\"margin-top: 10px\" />\r\n    <div class=\"font-weight-light\"\r\n         :class=\"{'headline': $vuetify.breakpoint.lgAndUp,'body-2': $vuetify.breakpoint.mdOnly, 'body-2': $vuetify.breakpoint.smAndDown}\"\r\n    >\r\n      <span class=\"subhead\">E</span>xplore our comprehensive library of interactive lessons on visualizing data.\r\n    </div>\r\n    <div style=\"margin-top: 20px\" />\r\n    <v-container grid-list-xl text-xs-center>\r\n      <v-layout\r\n        align-center\r\n        justify-center\r\n        row\r\n      >\r\n        <v-flex v-for=\"topic in topics\"\r\n                :key=\"topic.key\"\r\n                xs12\r\n                sm12\r\n                md12\r\n                lg12\r\n                xl12\r\n        >\r\n          <subtopic-card\r\n            :headline=\"topic.headline\"\r\n            :description=\"topic.description\"\r\n            :img=\"topic.img\"\r\n            :path=\"topic.path\"\r\n          />\r\n        </v-flex>\r\n      </v-layout>\r\n    </v-container>\r\n    <br>\r\n    <br>\r\n    <br>\r\n  </div>\r\n</template>\r\n<script>\r\nimport SubtopicCard from '../SubTopics.vue'\r\nexport default {\r\n    name: 'Vectors',\r\n    components: {\r\n    SubtopicCard\r\n    },\r\n    data () {\r\n      return {\r\n        playerOptions: {\r\n        preload:'auto',\r\n        ratio: '16:9'\r\n        },\r\n      topics: [\r\n      {\r\n        headline: \"Bar Charts\",\r\n        description: \"Learn to read and create bar charts\",\r\n        img:\"/assets/bar-chart.svg\",\r\n        path: \"/mathematics/bar\"\r\n      },\r\n      { headline: \"Pie Charts\",\r\n        description: \"Learn to read and create pie charts\",\r\n        img: \"/assets/pie-chart.svg\",\r\n        path: \"/mathematics/pie\"\r\n      },\r\n      { headline: \"Pictographs\",\r\n        description: \"Learn to read and create pictographs\",\r\n        img: \"/assets/pictogram.svg\",\r\n        path: \"/mathematics/pic\"\r\n      },\r\n//      {\r\n//        headline: \"Pythagorean Theorem\", description: \"Most basic type of electric circuit in which a resistor and a capacitor are connected in series. \",\r\n//          img: \"/assets/wdice-4.svg\", path: \"/mathematics/triangles/pythagorean\"\r\n//    }\r\n      ]\r\n    }\r\n  },\r\n    created () {\r\n      this.$store.commit('navigation/resetState');\r\n      this.$store.commit('navigation/changeTitle', 'Visualizing Data');\r\n      this.$store.commit('navigation/changeMenu', 'Visualizing Data');\r\n      let newTopics = [\r\n        {title: 'Bar Charts', img:'/assets/wdice-1.svg', action: () => this.$router.push({path: '/mathematics/bar'})},\r\n        {title: 'Pie Charts', img:'/assets/wdice-2.svg', action: () => this.$router.push({path: '/mathematics/pie'})},\r\n        {title: 'Pictographs',img:'/assets/wdice-3.svg', action: () => this.$router.push({path: '/mathematics/pic'})},\r\n      //  {title: 'Pythagorean Theorem', img:'/assets/wdice-4.svg', action: () => this.$router.push({path: '/mathematics/triangles/pythagorean'})},\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       metaInfo() {\r\n       return{ title: 'Data Visualization',\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 scoped lang=\"scss\">\r\n@import 'src/styles/subtopic-menu.scss';\r\n.subhead {\r\ncolor: #903;\r\nfloat: left;\r\nfont-family: Georgia;\r\nfont-size: 75px;\r\nline-height: 60px;\r\npadding-top: 4px;\r\npadding-right: 8px;}\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!./SubtopicMenu.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!./SubtopicMenu.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SubtopicMenu.vue?vue&type=template&id=263a0bcc&scoped=true&\"\nimport script from \"./SubtopicMenu.vue?vue&type=script&lang=js&\"\nexport * from \"./SubtopicMenu.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SubtopicMenu.vue?vue&type=style&index=0&id=263a0bcc&prod&scoped=true&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  \"263a0bcc\",\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!./SubTopics.vue?vue&type=style&index=0&id=dd633ab8&prod&scoped=true&lang=scss&\"","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!./SubtopicMenu.vue?vue&type=style&index=0&id=263a0bcc&prod&scoped=true&lang=scss&\""],"sourceRoot":""}