{"version":3,"sources":["webpack:///./src/components/chemistry/bce/rusting/Lesson.vue","webpack:///./src/components/chemistry/bce/rusting/Boxes.js","webpack:///src/components/chemistry/bce/rusting/Lesson.vue","webpack:///./src/components/chemistry/bce/rusting/Lesson.vue?c384","webpack:///./src/components/chemistry/bce/rusting/Lesson.vue?4ad2"],"names":["staticClass","class","_vm","$vuetify","_c","staticStyle","ref","attrs","_v","staticRenderFns","render","Boxes","box1","brd1","JXG","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","options","image","highlight","placeLogo","makeResponsive","shuffle","placeShuffle","erase","placeErase","list1","list2","Cl","list","i","Cmethane","placeTitle","valueOf","create","cssStyle","fontSize","canvasHeight","fixed","parse","anchorX","Coxy","rotate","Ccotwo","Cwater","strokeColor","strokeWidth","anchorY","Value","opacity","visible","on","Math","floor","random","_step","magicGraph","containerObj","inputFields","querySelectorAll","_iterator","_createForOfIteratorHelper","s","n","done","inputField","value","err","e","f","_step2","_iterator2","name","components","data","style","layout","created","_this","$store","commit","title","newTopics","img","action","goto","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"mJAA4D,EAAU,W,IAAiBA,OAAgCC,EAAK,EAAC,S,OAAC,WAAiBC,MAAIC,C,YAA4B,oB,MAAmD,CAAgD,8CAAIC,kBAAS,6BAACJ,cAAY,sBAAoB,Y,CAAQ,S,YAAuD,qB,MAAkC,CAA+C,0CAAII,SAAU,6BAACC,WAAY,kCAAuB,WAAE,YAAS,CAA0CC,cAAQ,W,CAAc,qCAAa,SAAM,SAAG,YAAQ,CAA69BD,aAAY,UAAoB,q9BAAG,YAAU,CAACL,aAAY,UAA4B,S,YAAuD,qB,MAAkC,CAA+C,0CAAII,SAAU,6BAACE,WAAQ,kC,CAAc,UAAsB,IAAC,KAACC,YAAM,CAAC,cAAK,UAAO,MAAMC,CAA8EF,GAAI,Q,CAAkB,sEAAa,SAAM,SAAG,YAAUJ,CAAyCG,aAAY,UAAmB,8CAAG,YAAQ,CAAqfA,aAAY,SAAoB,qfAAG,YAAUH,CAAsCG,aAAY,UAAmB,2CAAG,YAAQ,CAAosBC,aAAQ,SAAc,gCAAa,wpBAAM,SAAG,YAAM,CAA+BC,aAAM,YAAoB,oBAAE,MAAK,CAAOP,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CAAgBO,GAAM,gBAAoB,aAAE,MAAK,CAAMP,iBAAY,KAAuEA,QAAW,CAAkB,YAAQ,oBAAqCA,yCAAY,OAAe,YAAQ,kBACpzH,yCACGS,4BAEJ,EAASC,8DAAuB,I,gnCCoChC,IAAMC,EAAQ,CACZC,KAAM,WACJ,IAAIC,EAAOC,IAAIC,SAASC,UAAU,UAAU,CAACC,YAAa,CAAC,EAAG,EAAG,IAAK,GACpEC,iBAAgB,EAAMC,MAAK,EAAOC,OAAM,EAAMC,MAAK,EAAMC,eAAc,EAAOC,gBAAe,EAAMC,IAAI,CAACC,SAAQ,GAAQC,KAAK,CAACD,SAAQ,KACxIZ,EAAKc,QAAQC,MAAMC,WAAU,EAC7BC,eAAUjB,GACVkB,eAAelB,GACf,IAAImB,EAASC,eAAapB,EAAK,QAC3BqB,EAAQC,eAAWtB,GACnBuB,EAAM,CAAC,KAAM,KAAM,KAAK,MACxBC,EAAM,CAAC,OAAQ,SAAU,SAAS,UACjCC,EAAI,CAAC,EAAG,EAAG,EAAG,GACfC,EAAK,CAAC,SAAU,UAAW,WAAW,YACtCC,EAAE,EAWFC,GAFOC,eAAW7B,GAAM,WAAW,MAAO,mBAAoB0B,EAAKC,EAAEG,aAAa,4DAEvE9B,EAAK+B,OAAO,QAAS,CAAC,EAAM,IAAK,IAAK,KAAM,CAACC,SAAS,iBAAkBC,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMC,OAAM,EAAKC,OAAM,KAE9JpC,EAAK+B,OAAO,OAAQ,CAAC,EAAK,IAAK,WAAW,MAAO,SAAWR,EAAMI,EAAEG,WAAW,OAAQ,CAACd,WAAU,EAAOqB,QAAQ,OAAQF,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEpM,IAAIM,EAAOtC,EAAK+B,OAAO,QAAS,CAAC,EAAG,IAAK,IAAK,KAAM,CAACC,SAAU,kBAAmBC,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMC,OAAM,EAAKC,OAAM,IAEzJpC,EAAK+B,OAAO,OAAQ,CAAC,EAAG,IAAK,cAAe,CAACf,WAAU,EAAOmB,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEzIhC,EAAK+B,OAAO,QAAQ,CAAC,qBAAsB,CAAC,KAAM,KAAM,CAAC,EAAI,IAAI,CAACQ,OAAO,GAAIvB,WAAU,EAAOmB,OAAM,IAEpG,IAAIK,EAASxC,EAAK+B,OAAO,QAAS,CAAC,EAAG,IAAK,IAAK,KAAM,CAACC,SAAU,kBAAmBC,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMC,OAAM,EAAKC,OAAM,IAE3JpC,EAAK+B,OAAO,OAAQ,CAAC,EAAG,IAAK,iBAAI,SAASP,EAAMG,EAAEG,WAAW,MAAM,CAACd,WAAU,EAAMmB,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAE/J,IAAIS,EAASzC,EAAK+B,OAAO,QAAS,CAAC,EAAG,IAAK,IAAK,KAAM,CAACC,SAAU,uBAAwBC,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMC,OAAM,EAAKC,OAAM,IAEhKpC,EAAK+B,OAAO,OAAQ,CAAC,GAAI,IAAK,cAAe,CAACf,WAAU,EAAMmB,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEzIhC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,EAAG,GAAI,CAAC,EAAG,IAAM,CAACf,WAAU,EAAM0B,YAAY,OAAQC,YAAY,EAAER,OAAM,IAEhGnC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,EAAG,MAAM,CAAC,EAAG,OAAQ,CAACf,WAAU,EAAM0B,YAAY,OAAQC,YAAY,EAAER,OAAM,IAEpGnC,EAAK+B,OAAO,OAAQ,CAAC,IAAK,IAAK,yBAA0B,CAACM,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEvLhC,EAAK+B,OAAO,OAAQ,CAAC,IAAK,IAAK,yBAA0B,CAACM,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEvLhC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,EAAG,GAAI,CAAC,EAAG,IAAM,CAACf,WAAU,EAAM0B,YAAY,OAAQC,YAAY,EAAER,OAAM,IAEhGnC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,EAAG,MAAM,CAAC,EAAG,OAAQ,CAACf,WAAU,EAAM0B,YAAY,OAAQC,YAAY,EAAGR,OAAM,IAErGnC,EAAK+B,OAAO,OAAQ,CAAC,IAAK,GAAK,WAAW,MAAqB,KAAlBH,EAASiB,QAAqB,cAActB,EAAMI,EAAEG,WAAyB,EAAEF,EAASiB,QAAU,aAAatB,EAAMI,EAAEG,aAAe,CAACO,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAU,uBAElThC,EAAK+B,OAAO,QAAS,CAAC,oBAAqB,CAAC,IAAK,IAAM,CAAC,GAAI,KAAM,CAACf,WAAU,EAAO8B,QAAQ,EAAGX,OAAM,EAAMY,QAAQ,WAAW,OAAO,EAAEP,EAAOK,UAAUlB,EAAEG,UAAU,GAAGF,EAASiB,SAAW,EAAEjB,EAASiB,QAAQ,KAE9M7C,EAAK+B,OAAO,OAAQ,CAAC,KAAM,GAAK,WAAW,MAAiB,KAAdO,EAAKO,QAAqB,gBAA8B,EAAEP,EAAKO,QAAU,iBAAmB,CAACR,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAExQhC,EAAK+B,OAAO,QAAS,CAAC,oBAAqB,CAAC,KAAM,IAAM,CAAC,GAAI,KAAM,CAACf,WAAU,EAAO8B,QAAQ,EAAGX,OAAM,EAAMY,QAAQ,WAAW,OAAO,EAAET,EAAKO,SAAW,EAAEL,EAAOK,SAAU,EAAEP,EAAKO,QAAQ,KAE1L7C,EAAK+B,OAAO,OAAQ,CAAC,KAAM,IAAK,WAAW,MAAiB,KAAdO,EAAKO,QAAqB,cAActB,EAAMI,EAAEG,WAA0B,EAAGQ,EAAKO,QAAU,gBAAkB,CAACR,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAE1RhC,EAAK+B,OAAO,QAAS,CAAC,oBAAqB,CAAC,KAAM,KAAM,CAAC,GAAI,KAAM,CAACf,WAAU,EAAO8B,QAAQ,EAAGX,OAAM,EAAMY,QAAQ,WAAW,OAAO,EAAEN,EAAOI,SAAW,EAAEP,EAAKO,WAEjK7C,EAAK+B,OAAO,OAAQ,CAAC,IAAK,GAAK,WAAW,MAAmB,KAAhBS,EAAOK,QAAqB,cAActB,EAAMI,EAAEG,WAAwB,EAAEU,EAAOK,QAAU,aAAatB,EAAMI,EAAEG,aAAe,CAACO,QAAQ,SAASrB,WAAU,EAAO4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAE7ShC,EAAK+B,OAAO,OAAQ,CAAC,KAAM,GAAK,WAAW,MAAmB,KAAhBS,EAAOK,QAAqB,gBAA6BpB,EAAGE,EAAEG,WAAWU,EAAOK,QAAS,iBAAmB,CAACR,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAST,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAExRhC,EAAK+B,OAAO,OAAQ,CAAC,KAAM,IAAK,WAAW,MAAmB,KAAhBU,EAAOI,QAAqB,eAA6B,EAAEJ,EAAOI,QAAU,gBAAkB,CAACR,QAAQ,SAASrB,WAAU,EAAM4B,QAAQ,SAAUT,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAE3QhC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,GAAI,GAAG,CAAC,GAAI,IAAK,CAACf,WAAU,EAAO0B,YAAY,OAAQC,YAAY,EAAGR,OAAM,IAElGnC,EAAK+B,OAAO,OAAQ,CAAC,CAAC,GAAI,MAAM,CAAC,GAAI,OAAQ,CAACf,WAAU,EAAO0B,YAAY,OAAQC,YAAY,EAAGR,OAAM,IAExGnC,EAAK+B,OAAO,OAAQ,CAAC,GAAI,IAAI,6BAA6B,CAACM,QAAQ,SAAUO,QAAQ,SAAU5B,WAAU,EAAMmB,OAAM,EAAMF,SAAS,WAAW,OAAO,GAAGjC,EAAKkC,aAAa,KAAMF,SAAS,uBAEhLhC,EAAK+B,OAAO,OAAQ,CAAC,GAAI,IAAK,WAAW,OAAG,EAAES,EAAOK,SAAU,EAAEjB,EAASiB,SAAW,EAAEP,EAAKO,SAAWpB,EAAGE,EAAEG,WAAWU,EAAOK,SAAW,EAAEJ,EAAOI,SAAW,EAAEP,EAAKO,QAAiB,+BAA6C,qCAAuC,CAACR,QAAQ,SAAUO,QAAQ,SAAU5B,WAAU,EAAMiB,SAAS,WAAW,OAAqB,GAAlBL,EAASiB,QAAmB,EAAe,GAAG7C,EAAKkC,aAAa,KAAOF,SAAS,qBAAsBG,OAAM,IAE3chB,EAAQ6B,GAAG,QAAQ,WAAW,OAAOrB,EAAEsB,KAAKC,MAAoB,EAAdD,KAAKE,aACvDhC,EAAQ6B,GAAG,QAAQ,WACjB,IAEsCI,EAFlCC,EAAarD,EAAKsD,aAClBC,EAAcF,EAAWG,iBAAiB,SAASC,EAAAC,EAC5BH,GAAW,IAAlC,IAAAE,EAAAE,MAAAP,EAAAK,EAAAG,KAAAC,MAAoC,KAA3BC,EAAUV,EAAAW,MACbD,EAAWC,MAAQ,KAAK,MAAAC,GAAAP,EAAAQ,EAAAD,GAAA,QAAAP,EAAAS,QAEpC7C,EAAM2B,GAAG,QAAQ,WACf,IAEsCmB,EAFlCd,EAAarD,EAAKsD,aAClBC,EAAcF,EAAWG,iBAAiB,SAASY,EAAAV,EAC5BH,GAAW,IAAlC,IAAAa,EAAAT,MAAAQ,EAAAC,EAAAR,KAAAC,MAAoC,KAA3BC,EAAUK,EAAAJ,MACbD,EAAWC,MAAQ,KAAK,MAAAC,GAAAI,EAAAH,EAAAD,GAAA,QAAAI,EAAAF,UAKzBpE,IChFA,GACfuE,KAAA,mBACAC,WAAA,GAEAC,KAAA,WACA,OACAC,MAAA,CAAAC,OAAA,kBAGAC,QAAA,eAAAC,EAAA,KACA,KAAAC,OAAAC,OAAA,yBACA,IAAAC,EAAA,yBACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GACA,IAAAC,EAAA,CACA,CAAAD,MAAA,+BAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,QACA,CAAAJ,MAAA,sCAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,QACA,CAAAJ,MAAA,gCAAAE,IAAA,oBAAAC,OAAA,kBAAAN,EAAAO,KAAA,SAEA,KAAAN,OAAAC,OAAA,2BAAAE,GACA,KAAAH,OAAAC,OAAA,gCACA,KAAAD,OAAAC,OAAA,6BACA,KAAAD,OAAAC,OAAA,kCACA,KAAAD,OAAAC,OAAA,+BACA,KAAAD,OAAAC,OAAA,gCAEAM,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACAvF,EAAAC,QAEAwF,SAAA,WACA,OAAAT,MAAA,yBACAU,cAAA,2BACAC,KAAA,EAAApB,KAAA,WAAAqB,QAAA,uCACA,CAAArB,KAAA,cAAAqB,QAAA,sCC1F6X,I,YCOzXC,EAAY,eACd,EACA,EACA/F,GACA,EACA,KACA,KACA,MAIa,aAAA+F,E","file":"js/chunk-2d221847.a9d8568d.js","sourcesContent":["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(\" Chlorination Reactions \")])]),_c('div',{ref:\"ia\",staticStyle:{\"margin-top\":\"10px\"}}),_vm._v(\"\\n    Chlorination reactions are chemical reactions in which a metal reacts with hydrochloric acid (\\\\(HCl\\\\)) to produce a metal chloride. The reaction also produces hydrogen gas (\\\\(H_2\\\\)) as a byproduct.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Let's consider the chlorination of a metal called Megnesium — the chemical symbol for which is \\\\(Mg\\\\).\\n    During chlorination of \\\\(Mg\\\\) (Megnesium), it reacts with \\\\(HCl\\\\) (Hydrochloric acid) and produces \\\\(MgCl_2\\\\) (Magnesium Chloride) and \\\\(H_2\\\\) (Hydrogen gas). \"),_c('br'),_c('br'),_vm._v(\" So, the chemical equation describing the chlorination of Magnesium looks something like this —\\n    $$ Mg + 2\\\\ HCl \\\\rightarrow   MgCl_2 +  H_2$$\\n    Is this chemical equation balanced or unbalanced? \"),_c('br'),_c('br'),_vm._v(\"\\n    This answer is balanced because masses of all the chemical elements involved in the reaction (i.e. \\\\(Mg\\\\), \\\\(Cl\\\\) and \\\\(H\\\\)) remain constant before and after the reaction.\\n    \"),_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',{ref:\"pg\",staticStyle:{\"font-family\":\"Oswald\"},attrs:{\"id\":\"mgk\"}},[_vm._v(\" Learn interactively : Balancing a Chlorination Reaction \")])]),_c('div',{ref:\"ib\",staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\"Session Objectives\")]),_c('div',{staticStyle:{\"margin-top\":\"5px\"}}),_vm._v(\"\\n    This visually interactive illustration is designed to help you learn how to balance a chemical equation describing chlorination of metals in a step-by-step fashion. \"),_c('br'),_c('br'),_vm._v(\"\\n    Shown below is a chemical equation that describes the chlorination of a metal.\\n    You will notice that the coefficients of the reactants and products in the equation are missing. The goal is determine the correct set of coefficients that will balance the chemical equation.\\n    \"),_c('div',{staticStyle:{\"margin-top\":\"10px\"}}),_c('h5',[_vm._v(\"Getting Started\")]),_c('div',{staticStyle:{\"margin-top\":\"5px\"}}),_vm._v(\"\\n    To get started — \"),_c('br'),_c('br'),_vm._v(\"\\n    1. Start with entering the coefficients for the reactants and the products in the chemical equation.\"),_c('br'),_c('br'),_vm._v(\"\\n    2. Once you have provided the coefficients, the MagicGraph automatically calculates the number of moles of each chemical element on the reactant side as well as on the product side. \"),_c('br'),_c('br'),_vm._v(\"\\n    3. The chemical equation is balanced if the mass of each chemical element before the reaction is same as the mass after the reaction.\"),_c('br'),_c('br'),_vm._v(\"\\n    4. You can adjust the coefficients to balance the mass of each chemical element before and after the reaction.\\n    \"),_c('div',{ref:\"ic\",staticStyle:{\"margin-top\":\"10px\"}})]),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('div',{staticClass:\"edliy-box-about\",attrs:{\"id\":\"jxgbox1\"}})])],1),_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('h5',{staticClass:\"edliy-text-about\"},[_vm._v(\"\\n      Navigation Tip: Tap on \"),_c('i',{staticClass:\"shuffler ma-1\"}),_vm._v(\" icon to shuffle. Tap on \"),_c('i',{staticClass:\"eraser ma-1\"}),_vm._v(\" icon to clear your response and start over.\\n    \")])])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import {\r\n    makeResponsive,\r\n    placeTitle,\r\n    placeImage,\r\n    placeInput,\r\n    placeSlider,\r\n    hoverMe,\r\n    placeRec,\r\n    hiddenPt,\r\n    fixedPt,\r\n    clearInputFields,\r\n    dragMe,\r\n    placeArrow,\r\n    placeGravity,\r\n    placeText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeRightText,\r\n    placeSliderSwitch,\r\n    placeDash,\r\n    placeCircle,\r\n    placeLogo,\r\n    placeShuffle,\r\n    placeErase,\r\n    placePlay,\r\n    placePause,\r\n    placeTest,\r\n    cycle,\r\n    writeMiddleText,\r\n    writeLeftText,\r\n    writeRightText,\r\n    writeMiddleHTML,\r\n    writeLeftHTML,\r\n    writeRightHTML,\r\n    placeGo,\r\n    placeStartOver\r\n} from '../../Utils.js';\r\nconst Boxes = {\r\n  box1: function(){\r\n    var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [0, 6, 12, -6],\r\n      keepaspectratio:true, axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false,pan:{enabled:false}, zoom:{enabled:false}});\r\n    brd1.options.image.highlight=false;\r\n    placeLogo(brd1);\r\n    makeResponsive(brd1);\r\n    var shuffle =placeShuffle(brd1,'left');\r\n    var erase = placeErase(brd1);\r\n    var list1=['Na', 'Ca', 'Al','Ti'];\r\n    var list2=['NaCl', 'CaCl_2', 'AlCl_3','TiCl_4'];\r\n    let  Cl =[1, 2, 3, 4];\r\n    var list=['Sodium', 'Calcium', 'Aluminum','Titanium'];\r\n    var i=0;\r\n//    shuffle.setLabel('&nbsp; &nbsp; Shuffle')\r\n//    shuffle.label.setAttribute({anchorX:'left', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:function(){return 12*brd1.canvasHeight/800}});\r\n  //  shuffle.on('over', function () {this.label.setAttribute({visible:true});});\r\n  //  shuffle.on('out', function () {this.label.setAttribute({visible:false});});\r\n    //erase.on('down', function(){clearInputFields(brd1)});\r\n//    erase.setLabel('&nbsp; &nbsp; Start Over')\r\n//    erase.label.setAttribute({anchorX:'left', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:function(){return 12*brd1.canvasHeight/800}});\r\n  //\r\n    let title =placeTitle(brd1, function(){return 'Chlorination of '+ list[i.valueOf()]}, \"(Enter the missing coefficients to balance the equation)\");\r\n//\r\n    var Cmethane = brd1.create('input', [1.00, 3.5, '?', ' '], {cssStyle:'width:8.3333%;', fontSize:function(){return 24*brd1.canvasHeight/800}, fixed:true,parse:true});\r\n//\r\n    brd1.create('text', [2.0, 3.5, function(){return '&nbsp;' + list1[i.valueOf()]+' +'}], {highlight:false, anchorX:'left', fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n    //////////////////////////////////////////\r\n    var Coxy = brd1.create('input', [3, 3.5, '?', ' '], {cssStyle: 'width:8.33333%;', fontSize:function(){return 24*brd1.canvasHeight/800}, fixed:true,parse:true});\r\n//\r\n    brd1.create('text', [4, 3.5, '&nbsp; HCl'], {highlight:false, fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('image',['/assets/random.svg', [5.75, 2.7], [1., 1]],{rotate:45, highlight:false, fixed:true});\r\n//\r\n    var Ccotwo = brd1.create('input', [7, 3.5, '?', ' '], {cssStyle: 'width:8.333333%', fontSize:function(){return 24*brd1.canvasHeight/800}, fixed:true,parse:true});\r\n//\r\n    brd1.create('text', [8, 3.5, ()=>'&nbsp;'+list2[i.valueOf()]+'+'], {highlight:false,fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    var Cwater = brd1.create('input', [9, 3.5, '?', ' '], {cssStyle: 'width:8.3333333333%;', fontSize:function(){return 24*brd1.canvasHeight/800}, fixed:true,parse:true});\r\n//\r\n    brd1.create('text', [10, 3.5, '&nbsp; H_2'], {highlight:false,fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('line', [[1, 2.],[5, 2.]], {highlight:false,strokeColor:'grey', strokeWidth:1,fixed:true});\r\n//\r\n    brd1.create('line', [[1, 2.05],[5, 2.05]], {highlight:false,strokeColor:'grey', strokeWidth:1,fixed:true});\r\n//\r\n    brd1.create('text', [2.5, 1.5, '<b> REACTANT SIDE</b>'], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('text', [8.5, 1.5, '<b> PRODUCT SIDE </b>'], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('line', [[1, 1.],[5, 1.]], {highlight:false,strokeColor:'grey', strokeWidth:1,fixed:true});\r\n//\r\n    brd1.create('line', [[1, 1.05],[5, 1.05]], {highlight:false,strokeColor:'grey', strokeWidth:1, fixed:true});\r\n// REACTION SIDE\r\n    brd1.create('text', [2.5, 0.5, function(){if(Cmethane.Value()=='?'){return '? Moles of '+list1[i.valueOf()]} else {return 1*Cmethane.Value() + ' Moles of '+list1[i.valueOf()]}}], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:\t'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('image', ['/assets/check.svg', [9.6, 0.1], [0.8,0.8]],{highlight:false, opacity:1, fixed:true, visible:function(){return 1*Ccotwo.Value()==(i.valueOf()+1)*Cmethane.Value() && 1*Cmethane.Value()>0} });\r\n//\r\n    brd1.create('text', [2.5, -0.5, function(){if(Coxy.Value()=='?'){return '? Moles of Cl'} else {return 1*Coxy.Value() + ' Moles of Cl'}}], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('image', ['/assets/check.svg', [9.6, -0.9], [0.8,0.8]],{highlight:false, opacity:1, fixed:true, visible:function(){return 1*Coxy.Value() == 1*Ccotwo.Value()&& 1*Coxy.Value()>0} });\r\n//\r\n    brd1.create('text', [2.5, -1.5, function(){if(Coxy.Value()=='?'){return '? Moles of '+list1[i.valueOf()]} else {return (1)*Coxy.Value() + ' Moles of H'}}], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('image', ['/assets/check.svg', [9.6, -1.9], [0.8,0.8]],{highlight:false, opacity:1, fixed:true, visible:function(){return 2*Cwater.Value() == 1*Coxy.Value()} });\r\n// PRODUCT SIDE\r\n    brd1.create('text', [8.5, 0.5, function(){if(Ccotwo.Value()=='?'){return '? Moles of '+list1[i.valueOf()]} else{return 1*Ccotwo.Value() + ' Moles of '+list1[i.valueOf()]}}], {anchorX:'middle',highlight:false, anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('text', [8.5, -0.5, function(){if(Ccotwo.Value()=='?'){return '? Moles of Cl'} else{return Cl[i.valueOf()]*Ccotwo.Value()+ ' Moles of Cl'}}], {anchorX:'middle',highlight:false,anchorY:'middle',fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('text', [8.5, -1.5, function(){if(Cwater.Value()=='?'){return '? Moles of H'} else{ return 2*Cwater.Value() + ' Moles of H'}}], {anchorX:'middle',highlight:false,anchorY:'middle', fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\n    brd1.create('line', [[1, -2],[5, -2]], {highlight:false, strokeColor:'grey', strokeWidth:1, fixed:true});\r\n//\r\n    brd1.create('line', [[1, -1.95],[5, -1.95]], {highlight:false, strokeColor:'grey', strokeWidth:1, fixed:true});\r\n    //\r\n    brd1.create('text', [6, -2.5,'Balanced or Not Balanced?'],{anchorX:'middle', anchorY:'middle', highlight:false,fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n    //\r\n    var res = brd1.create('text', [6, -3.5, function(){if(1*Ccotwo.Value()== 1*Cmethane.Value() && 1*Coxy.Value() == Cl[i.valueOf()]*Ccotwo.Value() && 2*Cwater.Value() == 1*Coxy.Value()) {return 'The Equation is Now Balanced'} else {return 'The Equation is Not Yet Balanced'}}], {anchorX:'middle', anchorY:'middle', highlight:false,fontSize:function(){if(Cmethane.Value()==0){return 0} else{return 24*brd1.canvasHeight/800}}, cssStyle:'fontFamily:Oswald;', fixed:true});\r\n    //\r\n    shuffle.on('down', function(){return i=Math.floor(Math.random()*4)});\r\n    shuffle.on('down', function(){\r\n      let magicGraph = brd1.containerObj;\r\n      let inputFields = magicGraph.querySelectorAll(\"input\");\r\n          for (let inputField of inputFields) {\r\n                inputField.value = \"?\";}\r\n    });\r\n    erase.on('down', function(){\r\n      let magicGraph = brd1.containerObj;\r\n      let inputFields = magicGraph.querySelectorAll(\"input\");\r\n          for (let inputField of inputFields) {\r\n                inputField.value = \"?\";}\r\n    });\r\n  //  brd1.unsuspendUpdate();\r\n  },\r\n}\r\nexport default Boxes;\r\n","<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\"> Chlorination Reactions </span>\r\n      </div>\r\n      <div ref=\"ia\" style=\"margin-top: 10px\" />\r\n      Chlorination reactions are chemical reactions in which a metal reacts with hydrochloric acid (\\(HCl\\)) to produce a metal chloride. The reaction also produces hydrogen gas (\\(H_2\\)) as a byproduct.\r\n      <br><br>\r\n      Let's consider the chlorination of a metal called Megnesium &mdash; the chemical symbol for which is \\(Mg\\).\r\n      During chlorination of \\(Mg\\) (Megnesium), it reacts with \\(HCl\\) (Hydrochloric acid) and produces \\(MgCl_2\\) (Magnesium Chloride) and \\(H_2\\) (Hydrogen gas). <br><br> So, the chemical equation describing the chlorination of Magnesium looks something like this &mdash;\r\n      $$ Mg + 2\\ HCl \\rightarrow   MgCl_2 +  H_2$$\r\n      Is this chemical equation balanced or unbalanced? <br><br>\r\n      This answer is balanced because masses of all the chemical elements involved in the reaction (i.e. \\(Mg\\), \\(Cl\\) and \\(H\\)) remain constant before and after the reaction.\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 id=\"mgk\" ref=\"pg\" style=\"font-family:Oswald\"> Learn interactively : Balancing a Chlorination Reaction </span>\r\n      </div>\r\n\r\n      <div ref=\"ib\" style=\"margin-top: 10px\" />\r\n      <h5>Session Objectives</h5>\r\n      <div style=\"margin-top: 5px\" />\r\n      This visually interactive illustration is designed to help you learn how to balance a chemical equation describing chlorination of metals in a step-by-step fashion. <br><br>\r\n      Shown below is a chemical equation that describes the chlorination of a metal.\r\n      You will notice that the coefficients of the reactants and products in the equation are missing. The goal is determine the correct set of coefficients that will balance the chemical equation.\r\n      <div style=\"margin-top: 10px\" />\r\n      <h5>Getting Started</h5>\r\n      <div style=\"margin-top: 5px\" />\r\n      To get started &mdash; <br><br>\r\n      1. Start with entering the coefficients for the reactants and the products in the chemical equation.</br><br>\r\n      2. Once you have provided the coefficients, the MagicGraph automatically calculates the number of moles of each chemical element on the reactant side as well as on the product side. <br><br>\r\n      3. The chemical equation is balanced if the mass of each chemical element before the reaction is same as the mass after the reaction.<br><br>\r\n      4. You can adjust the coefficients to balance the mass of each chemical element before and after the reaction.\r\n      <div ref=\"ic\" style=\"margin-top: 10px\" />\r\n    </div>\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    <v-layout justify-center>\r\n      <h5 class=\"edliy-text-about\">\n        Navigation Tip: Tap on <i class=\"shuffler ma-1\" /> icon to shuffle. Tap on <i class=\"eraser ma-1\" /> icon to clear your response and start over.\n      </h5>\r\n    </v-layout>\r\n  </div>\r\n</template>\r\n<script>\r\nimport Boxes from './Boxes.js'\r\nexport default {\r\n  name: 'BalancedEquation',\r\n  components: {\r\n  },\r\n  data () {\r\n    return {\r\n      style: {layout: \"margin: 10px\"},\r\n    }\r\n  },\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Chlorination of Metals';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'What is a Chemical Equation?',img:'/assets/number-1.svg', action: () => this.goto('ia')},\r\n      {title: 'Balanced versus unbalanced Equation',img:'/assets/number-3.svg', action: () => this.goto('ib')},\r\n      {title: 'Balancing a Chemical Equation', img:'/assets/touch.svg', action: () => this.goto('ic')},\r\n    ];\r\n    this.$store.commit('navigation/replaceTopics', newTopics);\r\n    this.$store.commit('navigation/toggleshowhome', false);\r\n    this.$store.commit('navigation/replaceChem', true);\r\n    this.$store.commit('navigation/replaceLeftArrow', true);\r\n    this.$store.commit('navigation/replaceModule', 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  },\r\n  metaInfo() {\r\n  return{ title: 'Chlorination of Metals',\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!./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=2bf93e7f&\"\nimport script from \"./Lesson.vue?vue&type=script&lang=js&\"\nexport * from \"./Lesson.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"],"sourceRoot":""}