{"version":3,"sources":["webpack:///./src/views/SubTopics.vue?43e0","webpack:///./src/components/physics/springs/hooke/Boxes.js","webpack:///./src/components/physics/springs/SubtopicMenu.vue","webpack:///src/components/physics/springs/SubtopicMenu.vue","webpack:///./src/components/physics/springs/SubtopicMenu.vue?3d10","webpack:///./src/components/physics/springs/SubtopicMenu.vue?e264","webpack:///./src/views/SubTopics.vue","webpack:///src/views/SubTopics.vue","webpack:///./src/views/SubTopics.vue?bf9a","webpack:///./src/views/SubTopics.vue?89da"],"names":["Boxes","box1","brd","JXG","JSXGraph","initBoard","boundingbox","axis","keepaspectratio","showNavigation","showCopyright","zoom","enabled","pan","options","layer","point","highlight","curve","image","line","showInfobox","placeLogo","makeResponsive","placeTitle","create","name","fixed","anchorY","cssStyle","fontSize","canvasWidth","rotate","anchorX","k","placeSlider","setAttribute","snapWidth","unitLabel","vertices","visible","withLines","fillColor","placeGravity","hook","jk","Value","face","size","strokeColor","shadow","Pt1","Pt2","fung","x","Math","sin","PI","Y","trans","type","tape","strokeWidth","withLabel","placeTapeVert","point1","point2","unitsLabel","writeMiddleText","color","msg1","msg2","add","remove","on","alert","pts1","trace","pts","drawSegment","staticClass","class","$vuetify","breakpoint","lgAndUp","mdOnly","staticStyle","_vm","_c","attrs","_defineProperty","_v","_l","topics","key","staticRenderFns","components","SubtopicCard","data","headline","description","img","path","created","_this","$store","commit","newTopics","title","action","$router","push","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component","scopedSlots","fn","_ref","hover","props","String","default","required"],"mappings":"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","file":"js/chunk-26aad1a4.a9130bb9.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!./SubTopics.vue?vue&type=style&index=0&id=63f8118a&prod&scoped=true&lang=scss&\"","import {\r\n  makeResponsive,\r\n  //makeResponsive(brd1);\r\n  placeTitle,\r\n  //placeTitle(brd1,'title', 'subtitle');\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  //placeArrow(board, pt1, pt2, width, cols)\r\n  placeGravity,\r\n  placeText,\r\n  //placeText(board, positionX, positionY, message)\r\n  placeLine,\r\n  placePoint,\r\n  placeGlider,\r\n  placeRuler,\r\n  placeLeftText,\r\n  placeSliderSwitch,\r\n  placeBoldText,\r\n  //placeBoldText(brd6, -9, 1, 'Liquid');\r\n  placeDash,\r\n  // placeDash(board, [x1, y1], [x2, y2], width, cols)\r\n  placeRightText,\r\n  placeLabel,\r\n  placeLogo,\r\n  drawSegment,\r\n  writeMiddleText,\r\n  placeTapeVert,\r\n  drawPoint,\r\n  alert\r\n} from '../Utils';\r\nconst Boxes = {\r\n    box1: function () {\r\n//JXG.Options.layer['arrow'] =11;\r\n      var brd = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox:[-2.,6., 8.,-4], axis:false,\r\n        keepaspectratio:true, showNavigation:false, showCopyright:false, zoom:{enabled:false}, pan:{enabled:false}});\r\n        brd.options.layer['image'] =2;\r\n        brd.options.layer['point'] =5;\r\n        brd.options.layer['line'] =4;\r\n        brd.options.layer['curve'] =4;\r\n        brd.options.layer['axis'] =1;\r\n        brd.options.point.highlight=false;\r\n        brd.options.curve.highlight=false;\r\n        brd.options.image.highlight=false;\r\n        brd.options.line.highlight=false;\r\n        brd.options.point.showInfobox=false;\r\n        placeLogo(brd);\r\n        makeResponsive(brd);\r\n        placeTitle(brd, 'Hooke\\'s Experiment', '(Add weights to stretch the spring)');\r\n//AXIS\r\n      brd.create('axis', [[2, 0], [4, 0]],{name:'', fixed:true});\r\n      brd.create('axis', [[2, 0], [2, 4]],{name:'', fixed:true});\r\n      brd.create('text', [6.5, 0.1, 'Deflection(m)'],{anchorY:'bottom',cssStyle:'fontFamily:Oswald', fontSize:function(){return 22*brd.canvasWidth/800}, fixed:true});\r\n      brd.create('text', [1.8, 4.5, 'Force (kgf)'], {rotate:90, anchorX:'right',cssStyle:'fontFamily:Oswald', fontSize:function(){return 22*brd.canvasWidth/800}, fixed:true});\r\n//SLIDERS\r\n      var k= placeSlider(brd, 3, -1, 20, 28, 40, 2, '&nbsp; k');\r\n      k.setAttribute({snapWidth:1, unitLabel:' N/m'});\r\n//CEILING\r\n      var base =brd.create('polygon',[[-2, 2.5],[2,2.5],[2, 2.0],[-2,2.0]], {vertices:{visible:false}, withLines:false, fillColor:'black', fixed:true});\r\n//Gravity\r\n      placeGravity(brd, [-1, 0], [-1,-1], 'g');\r\n      var hook =brd.create('point', [0.0, ()=>-jk*9.8/k.Value()], {name:'', face:'circle', size:()=>2*brd.canvasWidth/800, fillColor:'red', strokeColor:'red', shadow:false, fixed:true});\r\n//\r\n      var Pt1 = brd.create('point', [1.0, 2.0], {name:'', face:'circle', size:0, fillColor:'white', strokeColor:'black', visible:false, fixed:true});\r\n//\r\n      var Pt2= brd.create('point', [1.0, ()=>-jk*9.8/k.Value()], {name:'', face:'circle', size:0, fillColor:'white', strokeColor:'black', visible:false, fixed:true});\r\n//\r\n      var fung =brd.create('functiongraph', [function(x){return 0.25*Math.sin(8*Math.PI*(x-2)/(2-hook.Y()))}, 2, function(){return hook.Y();}],{visible:false, strokeColor:'red'});\r\n//\r\n      var trans =brd.create('transform', [1.57, 0, 0], {type:'rotate', size:0});\r\n// SPRING\r\n      var spring = brd.create('curve', [fung, trans],{strokeColor:'black', strokeWidth:()=>5-4*(1-k.Value()/40), name:'Spring', withLabel:false, fixed:true});\r\n//tape\r\n      var tape=placeTapeVert(brd, Pt1, Pt2, 'd');\r\n      tape.setAttribute({point1:{face:'triangleup', size:4}, point2:{face:'triangledown', size:4}, unitsLabel:'m'});\r\n//\r\n      var jk =0;\r\n//\r\n      writeMiddleText(brd, 0, 2.75, ()=>jk+' kg').setAttribute({anchorY:'middle', color:'black'});\r\n//\r\n      var hinge =brd.create('point', [0.0, 2], {size:0, name:'', face:'circle', fillColor:'white', strokeWidth:2, strokeColor:'black', shadow:false, fixed:true});\r\n//\r\n      brd.create('image', ['/assets/hook.svg', [()=>-0.4*0.5, ()=>-0.3-jk*9.8/k.Value()], [0.4, 0.4]]);\r\n//\r\n      brd.create('image', ['/assets/1-kg.svg', [()=>-0.8*jk*0.5, ()=>-jk*0.88-jk*9.8/k.Value()], [()=>jk*0.8, ()=>(jk)*0.8]], {visible:()=>jk==1});\r\n//\r\n      brd.create('image', ['/assets/2-kg.svg', [()=>-0.5*jk*0.5, ()=>-jk*0.525-jk*9.8/k.Value()], [()=>jk*0.5, ()=>(jk)*0.5]], {visible:()=>jk==2});\r\n//\r\n      brd.create('image', ['/assets/3-kg.svg', [()=>-0.5*jk*0.5, ()=>-jk*0.485-jk*9.8/k.Value()], [()=>jk*0.5, ()=>(jk)*0.5]], {visible:()=>jk==3});\r\n//\r\n      brd.create('image', ['/assets/4-kg.svg', [()=>-0.5*jk*0.5, ()=>-jk*0.47-jk*9.8/k.Value()], [()=>jk*0.5, ()=>(jk)*0.5]], {visible:()=>jk==4});\r\n//\r\n/////////////////////////////////////////////////////////\r\n//////////////////\r\n// Buttons\r\n      var msg1 =writeMiddleText(brd, 0., 3.5, 'Max weight reached!');\r\n      msg1.setAttribute({color:'red', visible:false});\r\n      //\r\n      var msg2 =writeMiddleText(brd, 0., 3.5, 'No weights attached!');\r\n      msg2.setAttribute({color:'red', visible:false});\r\n      var add = brd.create('image', ['/assets/plus.svg', [-1., 2.5], [0.5, 0.5]],{fixed:true});\r\n      var remove = brd.create('image', ['/assets/minuss.svg', [0.5, 2.5], [0.5, 0.5]],{fixed:true});\r\n      add.on('down',function(){if(jk<4){jk+=1}else{jk=4; alert(brd, msg1);}});\r\n      remove.on('down',function(){if(jk>0){jk-=1;}else{jk=0; alert(brd, msg2);}});\r\n      //Plotting\r\n      var pts1 = brd.create('point', [2,  0],{name:'',fillColor:'blue',strokeColor:'blue', fixed:true, trace:false});\r\n      var pts = brd.create('point', [()=>2+jk*9.8/k.Value(), ()=>jk],{name:'',fixed:true, fillColor:'blue',strokeColor:'blue'});\r\n      //\r\n      var pts2 = brd.create('point', [()=>2+1*9.8/k.Value(), 1],{visible:()=>jk>=1, name:'',fixed:true, fillColor:'blue',strokeColor:'blue'});\r\n      //\r\n      var pts3 = brd.create('point', [()=>2+2*9.8/k.Value(), 2],{visible:()=>jk>=2, name:'',fixed:true, fillColor:'blue',strokeColor:'blue'});\r\n      //\r\n      var pts4 = brd.create('point', [()=>2+3*9.8/k.Value(), 3],{visible:()=>jk>=3, name:'',fixed:true, fillColor:'blue',strokeColor:'blue'});\r\n      //\r\n      var pts5 = brd.create('point', [()=>2+4*9.8/k.Value(), 4],{visible:()=>jk>=4, name:'', fixed:true, fillColor:'blue',strokeColor:'blue'});\r\n      drawSegment(brd, pts1, pts).setAttribute({strokeColor:'blue'});\r\n      },\r\n}\r\nexport default Boxes;\r\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{staticClass:\"font-weight-light\",class:{'pa-5 headline': _vm.$vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': _vm.$vuetify.breakpoint.mdOnly, 'pa-1 body-2': _vm.$vuetify.breakpoint.smAndDown}},[_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',{ref:\"ia\",staticStyle:{\"margin-top\":\"20px\"}}),_c('span',{staticClass:\"subhead\"},[_vm._v(\"A\")]),_vm._v(\" spring is a mechanical device that stores mechanical energy when it is compressed or stretched. When a force is applied to a spring, it deforms and the energy is stored in the spring. When the force is removed, the spring returns to its original shape and the stored energy is released.\"),_c('br'),_c('br'),_vm._v(\"\\n    Springs are typically made of metals and are used in in a variety of mechanical systems such as suspensions, mechanical clocks, and toys.\"),_c('br'),_c('br'),_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('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(\" Force in a Spring: Hooke's Law\")])]),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_vm._v(\"\\n\\n        You may have noticed that when a spring is subjected to an external force, it compresses or stretches, and its length changes. The deformation in the spring is related to the applied force.  This relationship is known as Hooke's law (named after british physicist Robert Hooke).\"),_c('br'),_c('br'),_vm._v(\"\\n        Hooke, while experimenting with springs, found that the force required to stretch or compress a spring is linearly proportional to the amount of extension or compression in the spring.\\n        Mathematically, Hooke's law can be expressed as:\\n        $$ F \\\\propto x $$\\n        where \\\\(x = l - l_0\\\\) is the extension or compression of the spring (equal to deformed length minus original length).\"),_c('br'),_c('br'),_vm._v(\"\\n        Expressed as an equality (by introducing a proportionality constant \\\\(k\\\\)):\\n        $$ F = k (l- l_0)$$\\n        where \\\\(F\\\\) is the force applied on the spring, \\\\(l\\\\) is the deformed length and \\\\(l_0\\\\) is the original length of spring. The constant \\\\(k\\\\) in the equation is known as spring constant, and is a measure of the stiffness of the spring.\\n      \")]),_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\",\"md4\":\"\",\"lg4\":\"\",\"xl4\":\"\"}},[_c('v-img',{staticClass:\"imgC\",attrs:{\"padding\":\"0px\",\"max-height\":\"500px\",\"max-width\":\"500px\",\"src\":\"/assets/Hooke.jpg\",\"contain\":\"\"}}),_c('br'),_c('h5',{staticStyle:{\"text-align\":\"center\"}},[_vm._v(\"\\n          English scientist and engineer Robert Hooke discovered the relationship between the deformation and forces in a spring.\\n        \")])],1)],1),_c('div',{ref:\"ib\",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(\" Lesson Plan\")])]),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('div',{staticClass:\"font-weight-light\",class:{'headline': _vm.$vuetify.breakpoint.lgAndUp,'body-2': _vm.$vuetify.breakpoint.mdOnly, 'body-2': _vm.$vuetify.breakpoint.smAndDown}},[_vm._v(\"\\n      This module on springs consists of three lessons. Each lesson comes with a visually interactive illustrations that offers students a uniquely engaging and effective learning experience.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\" Lesson 1 | Force & Energy in a Spring \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n      Learn about the force and stored energy in a spring.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\" Lesson 2 | System of Springs \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n      Learn to calculate the effective stiffness of a system of springs connected in series or parallel.\\n      \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\" Lesson 2 | Spring-Mass System \")]),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n      Learn about the oscillations of spring-mass systems.\\n    \")])],1),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('div',{staticClass:\"edliy-box-about\",attrs:{\"id\":\"jxgbox1\"}})]),_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('h5',{staticClass:\"edliy-text-about\"},[_vm._v(\"\\n        This is a visio-interactive demonstration of Hooke's experiment. Use \"),_c('i',{staticClass:\"plus ma-1\"}),_vm._v(\" button to add weights and \"),_c('i',{staticClass:\"minus ma-1\"}),_vm._v(\" button to remove weights.\\n        Observe how the deformation of the spring changes with applied load.\\n      \")])])],1),_c('div',{staticStyle:{\"margin-top\":\"20px\"}}),_c('div',{staticClass:\"font-weight-light\",class:{'pa-5 headline': _vm.$vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': _vm.$vuetify.breakpoint.mdOnly, 'pa-1 body-2': _vm.$vuetify.breakpoint.smAndDown}},[_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_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',{ref:\"ic\",staticStyle:{\"margin-top\":\"20px\"}}),_vm._v(\"\\n    Check out our library of meticulously crafted lessons on springs. These specially designed lessons use visuo-spatiality and interactivity to help students improve engagement and retain concepts.\\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,\"subheading\":topic.subheading,\"subsubheading\":topic.subsubheading,\"description\":topic.description,\"img\":topic.img,\"path\":topic.path}})],1)}),1)],1),_c('br'),_c('br'),_c('br')],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div\r\n      class=\" font-weight-light\"\r\n      :class=\"{'pa-5 headline': $vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': $vuetify.breakpoint.mdOnly, 'pa-1 body-2': $vuetify.breakpoint.smAndDown}\"\n    >\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 ref=\"ia\" style=\"margin-top: 20px\" />\r\n      <span class=\"subhead\">A</span> spring is a mechanical device that stores mechanical energy when it is compressed or stretched. When a force is applied to a spring, it deforms and the energy is stored in the spring. When the force is removed, the spring returns to its original shape and the stored energy is released.<br><br>\r\n      Springs are typically made of metals and are used in in a variety of mechanical systems such as suspensions, mechanical clocks, and toys.<br><br>\r\n      <div style=\"margin-top: 10px\" />\r\n      <v-layout align-center\r\n                justify-center\r\n                row\r\n                wrap\r\n      >\r\n        <v-flex xs12\r\n                sm8\r\n                md8\r\n                lg8\r\n                xl8\r\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          <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\"> Force in a Spring: Hooke's Law</span>\r\n          </div>\r\n          <div style=\"margin-top: 20px\" />\r\n\r\n          You may have noticed that when a spring is subjected to an external force, it compresses or stretches, and its length changes. The deformation in the spring is related to the applied force.  This relationship is known as Hooke's law (named after british physicist Robert Hooke).<br><br>\r\n          Hooke, while experimenting with springs, found that the force required to stretch or compress a spring is linearly proportional to the amount of extension or compression in the spring.\r\n          Mathematically, Hooke's law can be expressed as:\r\n          $$ F \\propto x $$\r\n          where \\(x = l - l_0\\) is the extension or compression of the spring (equal to deformed length minus original length).<br><br>\r\n          Expressed as an equality (by introducing a proportionality constant \\(k\\)):\r\n          $$ F = k (l- l_0)$$\r\n          where \\(F\\) is the force applied on the spring, \\(l\\) is the deformed length and \\(l_0\\) is the original length of spring. The constant \\(k\\) in the equation is known as spring constant, and is a measure of the stiffness of the spring.\r\n        </v-flex>\r\n        <v-flex xs12\r\n                sm4\r\n                md4\r\n                lg4\r\n                xl4\r\n        >\n          <v-img class=\"imgC\"\r\n                 padding=\"0px\"\r\n                 max-height=\"500px\"\r\n                 max-width=\"500px\"\r\n                 src=\"/assets/Hooke.jpg\"\r\n                 contain\r\n          />\r\n          <br>\r\n          <h5 style=\"text-align:center\">\r\n            English scientist and engineer Robert Hooke discovered the relationship between the deformation and forces in a spring.\r\n          </h5>\r\n        </v-flex>\r\n      </v-layout>\r\n      <div ref=\"ib\" 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\"> Lesson Plan</span>\r\n      </div>\r\n      <div style=\"margin-top: 20px\" />\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        This module on springs consists of three lessons. Each lesson comes with a visually interactive illustrations that offers students a uniquely engaging and effective learning experience.\r\n        <div style=\"margin-top: 10px\" />\r\n        <h5> Lesson 1 | Force & Energy in a Spring </h5>\r\n        <div style=\"margin-top: 10px\" />\r\n        Learn about the force and stored energy in a spring.\r\n        <div style=\"margin-top: 10px\" />\r\n        <h5> Lesson 2 | System of Springs </h5>\r\n        <div style=\"margin-top: 10px\" />\r\n        Learn to calculate the effective stiffness of a system of springs connected in series or parallel.\r\n        <div style=\"margin-top: 10px\" />\r\n        <h5> Lesson 2 | Spring-Mass System </h5>\r\n        <div style=\"margin-top: 10px\" />\r\n        Learn about the oscillations of spring-mass systems.\r\n      </div>\r\n    </div>\r\n    <div style=\"margin-top: 20px\" />\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-layout justify-center>\r\n        <h5 class=\"edliy-text-about\">\n          This is a visio-interactive demonstration of Hooke's experiment. Use <i class=\"plus ma-1\" /> button to add weights and <i class=\"minus ma-1\" /> button to remove weights.\r\n          Observe how the deformation of the spring changes with applied load.\n        </h5>\r\n      </v-layout>\r\n    </v-responsive>\r\n    <div style=\"margin-top: 20px\" />\r\n    <div\r\n      class=\" font-weight-light\"\r\n      :class=\"{'pa-5 headline': $vuetify.breakpoint.lgAndUp,'pa-2 subtitle-1': $vuetify.breakpoint.mdOnly, 'pa-1 body-2': $vuetify.breakpoint.smAndDown}\"\n    >\r\n      <div style=\"margin-top: 10px\" />\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 ref=\"ic\" style=\"margin-top: 20px\" />\r\n      Check out our library of meticulously crafted lessons on springs. These specially designed lessons use visuo-spatiality and interactivity to help students improve engagement and retain concepts.\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              :subheading=\"topic.subheading\"\r\n              :subsubheading=\"topic.subsubheading\"\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  </div>\r\n</template>\r\n<script>\r\nimport Boxes from './hooke/Boxes.js'\r\nimport SubtopicCard from '../../../views/SubTopics.vue'\r\nexport default {\r\n  components: {\r\n    SubtopicCard\r\n  },\r\n  data () {\r\n    return {\r\n      topics: [\r\n      {\r\n        headline: \"Lesson 1\",\r\n        description: \"\",\r\n        img:\"/assets/Physics-6th.svg\",\r\n        path: \"/physics/springs/energy\"\r\n      },\r\n      { headline: \"Lesson 2\",\r\n        description: \"\",\r\n        img: \"/assets/Physics-8th.svg\",\r\n        path: \"/physics/springs/sos\"\r\n      },\r\n      { headline: \"Lesson 3\",\r\n        description: \"\",\r\n        img: \"/assets/Physics-10th.svg\",\r\n        path: \"/physics/springs/springmass\"\r\n      },\r\n/*      {\r\n        headline: \"Spring-Mass System\",\r\n        description: \"Oscillations of a mass connected to a spring.\",\r\n        img: \"/assets/Physics-12th.svg\",\r\n        path: \"/physics/springs/springmass\"\r\n      }\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', 'Forces in Springs');\r\n    this.$store.commit('navigation/changeMenu', 'Forces in Springs');\r\n    let newTopics = [\r\n      {title: 'Hooke\\'s Law', img:'/assets/number-1.svg', action: () => this.$router.push({path: '/physics/springs/hooke'})},\r\n      {title: 'Elastic Energy', img:'/assets/number-2.svg', action: () => this.$router.push({path: '/physics/springs/hooke'})},\r\n      {title: 'System of Springs',img:'/assets/number-3.svg', action: () => this.$router.push({path: '/physics/springs/hooke'})},\r\n      {title: 'Spring-Mass System', img:'/assets/number-4.svg', action: () => this.$router.push({path: '/physics/springs/springmass'})},\r\n    ];\r\n    this.$store.commit('navigation/replaceTopics', newTopics);\r\n    this.$store.commit('navigation/toggleshowhome', false);\r\n    this.$store.commit('navigation/replacePhys', true);\r\n    this.$store.commit('navigation/replaceLeftArrow', true);\r\n    this.$store.commit('navigation/replaceSample', true);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    Boxes.box1();},\r\n  metaInfo() {\r\n    return{ title: 'Forces in Springs',\r\n            titleTemplate: '%s | Learn interactively',\r\n            meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                    {name: 'description', content: 'Balancing a chemical equation.'}\r\n                  ]\r\n          }\r\n     },\r\n}\r\n</script>\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=f945cdba&\"\nimport script from \"./SubtopicMenu.vue?vue&type=script&lang=js&\"\nexport * from \"./SubtopicMenu.vue?vue&type=script&lang=js&\"\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","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,\"height\":\"auto\",\"max-width\":\"400px\",\"align\":\"center\",\"justify\":\"center\",\"contain\":\"\"}},[_c('h3',{staticClass:\"font-weight-bold mt-3 text-center\",staticStyle:{\"color\":\"black\"}},[_vm._v(\"\\n            \"+_vm._s(_vm.headline)+\"\\n          \")]),_c('h4',{staticClass:\"font-weight-bold mt-2 text-center\",staticStyle:{\"color\":\"black\"}},[_vm._v(\"\\n            \"+_vm._s(_vm.description)+\"\\n          \")]),_c('v-divider',{staticClass:\"mt-3\",staticStyle:{\"color\":\"black\"}}),_c('v-img',{staticClass:\"mt-2 mb-2\",attrs:{\"src\":_vm.img,\"contain\":\"\"}})],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\"\r\n      >\r\n        <v-hover v-slot:default=\"{ hover }\">\r\n          <v-card class=\"rounded-card\"\r\n                  :elevation=\"hover ? 9:2\"\r\n                  height=\"auto\"\r\n                  max-width=\"400px\"\r\n                  align=\"center\"\r\n                  justify=\"center\"\r\n                  contain\r\n          >\r\n            <h3 style=\"color:black;\" class=\" font-weight-bold mt-3 text-center\">\r\n              {{ headline }}\r\n            </h3>\r\n            <h4 style=\"color:black;\" class=\" font-weight-bold mt-2 text-center\">\r\n              {{ description }}\r\n            </h4>\r\n            <v-divider style=\"color:black;\" class=\"mt-3\" />\r\n            <v-img\r\n              class=\"mt-2 mb-2\"\r\n              :src=\"img\"\r\n              contain\r\n            />\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=63f8118a&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=63f8118a&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  \"63f8118a\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}