{"version":3,"sources":["webpack:///./src/components/chemistry/ionicbond/IonicBond.vue?d81d","webpack:///./src/components/chemistry/ionicbond/IonicBond.vue","webpack:///./src/components/chemistry/ionicbond/Boxes.js","webpack:///src/components/chemistry/ionicbond/IonicBond.vue","webpack:///./src/components/chemistry/ionicbond/IonicBond.vue?df15","webpack:///./src/components/chemistry/ionicbond/IonicBond.vue?9656"],"names":["ref","attrs","staticClass","staticStyle","_c","Boxes","box1","brd1","JXG","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","options","circle","highlight","text","image","point","showInfobox","resize","resizeContainer","containerObj","clientWidth","clientHeight","fullUpdate","window","onresize","layer","create","fixed","fontSize","canvasHeight","cssStyle","rotate","k1","on","moveTo","Math","max","X","Y","i","a","strokeColor","fillColor","strokeWidth","pt","size","name","trace","color","visible","dash","pt1","pt1a","pt3","path","glid","face","opacity","startAnimation","components","data","style","layout","created","_this","$store","commit","title","newTopics","img","action","goto","newshowhome","newChem","mounted","MathJax","Hub","Queue","component","staticRenderFns"],"mappings":"2IAAA,W,qECA4D,EAAU,W,IAAgBA,EAAI,KAAM,EAAK,EAAI,S,OAA8b,iBAAO,IAAK,OAAwQA,GAAI,ybAAK,IAAK,QAAsmBC,GAAK,GAAC,8P,IAAC,MAAmB,ilBAAE,MAAK,CAAOC,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CAClhD,mBACyC,IAAC,IAAqB,EAAe,Y,IAACC,O,EAAa,W,OAA0B,QAAE,YAAWC,CAClI,6B,i3BCHIC,EAAQ,CACZC,KAAM,WACF,IAAIC,EAAOC,IAAIC,SAASC,UAAU,UAAU,CAACC,YAAa,EAAE,EAAG,GAAI,GAAG,IAAIC,iBAAgB,EACvFC,MAAK,EAAOC,OAAM,EAAMC,MAAK,EAAMC,eAAc,EAAOC,gBAAe,EAAMC,IAAI,CAACC,SAAQ,GAAQC,KAAK,CAACD,SAAQ,KAChHZ,EAAKc,QAAQC,OAAOC,WAAU,EAC9BhB,EAAKc,QAAQG,KAAKD,WAAU,EAC5BhB,EAAKc,QAAQI,MAAMF,WAAU,EAC7BhB,EAAKc,QAAQK,MAAMC,aAAY,EAClC,IAAIC,EAAS,WACTrB,EAAKsB,gBAAgBtB,EAAKuB,aAAaC,YAAaxB,EAAKuB,aAAaE,cAAc,GACpFzB,EAAK0B,cAETC,OAAOC,SAAWP,EAClBrB,EAAKc,QAAQe,MAAM,SAAS,GACjC7B,EAAKc,QAAQe,MAAM,SAAS,GAC5B7B,EAAK8B,OAAO,OAAQ,CAAC,EAAG,KAAM,qBAAsB,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,uBAChIlC,EAAK8B,OAAO,OAAQ,CAAC,EAAG,GAAI,8CAA+C,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,uBACvJlC,EAAK8B,OAAO,QAAS,CAAC,mBAAoB,EAAE,KAAM,GAAG,CAAC,EAAE,IAAI,CAACC,OAAM,EAAMI,QAAQ,KACjF,IAAIC,EAAKpC,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,OAAU,GAAG,CAAC,EAAE,IAAI,CAACC,OAAM,EAAOI,OAAO,GAAInB,WAAU,IAC5GhB,EAAKqC,GAAG,QAAQ,WAAWD,EAAGE,OAAO,CAACC,KAAKC,IAAIJ,EAAGK,IAAK,MAAOL,EAAGM,SACjE1C,EAAK8B,OAAO,OAAQ,CAAC,WAAW,OAAOM,EAAGK,IAAI,GAAG,WAAW,OAAOL,EAAGM,IAAI,KAAQ,WAAY,CAACX,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,uBAC1KlC,EAAK8B,OAAO,QAAS,CAAC,kBAAmB,EAAE,GAAI,GAAG,CAAC,EAAE,IAAI,CAACC,OAAM,IAChE/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAE,GAAK,MAAM,CAAC,GAAI,KAAM,CAACC,OAAM,IAC1E/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAE,IAAM,MAAM,CAAC,GAAI,KAAM,CAACC,OAAM,IAC3E/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAE,GAAK,MAAM,CAAC,GAAI,KAAM,CAACC,OAAM,IAC1E/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAE,IAAM,MAAM,CAAC,GAAI,KAAM,CAACC,OAAM,IAC3E/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,KAAM,IAAK,CAAC,GAAI,KAAM,CAACC,OAAM,IACzE/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAE,MAAO,IAAK,CAAC,GAAI,KAAM,CAACC,OAAM,IAC3E/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,KAAW,MAAU,CAAC,GAAI,KAAM,CAACC,OAAM,IACnF/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAC,KAAW,MAAU,CAAC,GAAI,KAAM,CAACC,OAAM,IACnF/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,EAAC,MAAY,KAAK,IAAK,CAAC,GAAI,KAAM,CAACC,OAAM,IACpF/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,MAAY,KAAK,IAAK,CAAC,GAAI,KAAM,CAACC,OAAM,IAEpF,IAAIY,EAAE,EACNP,EAAGC,GAAG,QAAQ,WAAW,GAAGD,EAAGK,KAAK,KAAM,OAAOE,EAAE,KACnDP,EAAGC,GAAG,MAAM,WAAiB,GAAHM,GAAMP,EAAGE,OAAO,CAAC,MAAO,GAAI,QACtD,IAAIM,EAAG,WAAW,OAAOR,EAAGK,IAAI,MACvBzC,EAAK8B,OAAO,SAAU,CAAC,CAAC,WAAW,OAAOc,KAAK,GAAG,CAAC,WAAW,OAAOA,IAAI,GAAI,IAAI,CAACb,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,IAC3J/C,EAAK8B,OAAO,SAAU,CAAC,CAAC,WAAW,OAAOc,KAAK,GAAG,CAAC,WAAW,OAAOA,IAAI,GAAI,IAAI,CAACb,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,IAClJ/C,EAAK8B,OAAO,SAAU,CAAC,CAAC,WAAW,OAAOc,KAAK,GAAG,CAAC,WAAW,OAAOA,IAAI,GAAI,IAAI,CAACb,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,IACjJ,IAAIC,EAAKhD,EAAK8B,OAAO,QAAS,CAAC,KAAM,MAAO,CAACmB,KAAK,EAAGC,KAAK,GAAIC,OAAM,EAAOJ,YAAY,GAAKK,MAAM,UAKnGpD,EAAK8B,OAAO,SAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAG,IAAI,CAACuB,SAAQ,EAAKtB,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,EAAGO,KAAK,WAAW,OAAM,GAAHX,EAAa,EAAc,KAEpK3C,EAAK8B,OAAO,SAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAG,IAAI,CAACC,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,IACtG/C,EAAK8B,OAAO,SAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAG,IAAI,CAACC,OAAM,EAAMc,YAAY,QAASC,UAAU,QAASC,YAAY,IACrG,IAAIQ,EAAMvD,EAAK8B,OAAO,QAAS,CAAC,KAAK,MAAM,CAACuB,SAAQ,IAChDG,EAAOxD,EAAK8B,OAAO,QAAS,CAAC,WAAW,MAAO,GAAIc,KAAO,KAAK,CAACS,SAAQ,IAIzEI,GAHOzD,EAAK8B,OAAO,QAAS,CAAC,WAAW,MAAO,GAAIc,MAAQ,GAAG,CAACS,SAAQ,IAChErD,EAAK8B,OAAO,QAAS,CAAC,WAAW,MAAO,GAAIc,KAAO,GAAG,CAACS,SAAQ,IAC/DrD,EAAK8B,OAAO,QAAS,CAAC,WAAW,MAAO,GAAIc,KAAO,GAAG,CAACS,SAAQ,IAChErD,EAAK8B,OAAO,QAAS,CAAC,WAAW,OAAOc,IAAI,KAAK,IAAM,KAAK,IAAK,CAACS,SAAQ,KAC/EK,EAAM1D,EAAK8B,OAAO,SAAU,CAACyB,EAAKC,EAAMC,GAAK,CAACH,KAAK,EAAGP,YAAY,EAAGF,YAAY,MAAMQ,QAAQ,WAAW,OAAM,GAAHV,KAC7GgB,EAAK3D,EAAK8B,OAAO,SAAU,CAAC,KAAM,KAAM4B,GAAM,CAACR,KAAK,GAAIU,KAAK,IAAKX,KAAK,IAC3EjD,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,KAAK,IAAM,MAAU,CAAC,GAAI,KAAM,CAACC,OAAM,EACjF8B,QAAQ,WAAW,OAAM,GAAHlB,EAAa,EAAe,OAKpDP,EAAGC,GAAG,QAAQ,WACJ,GAAHM,GACFgB,EAAKG,eAAe,EAAG,GAAI,MAIzB9D,EAAK8B,OAAO,QAAS,CAAC,kBAAmB,CAAC,WAAW,OAAOc,IAAI,IAAK,GAAG,CAAC,EAAE,IAAI,CAACb,OAAM,IAM9F/B,EAAK8B,OAAO,QAAS,CAAC,mBAAoB,CAAC,IAAK,IAAI,CAAC,EAAE,IAAI,CAACC,OAAM,IAClE/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,IAAM,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAO,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IAClG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,IAAM,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAO,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IACjG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,MAAO,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,OAAQ,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IACjG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,KAAO,MAAU,CAAC,GAAI,KAAM,CAACb,OAAM,IAC1G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,IAAM,MAAU,CAAC,GAAI,KAAM,CAACb,OAAM,IACzG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,KAAO,KAAK,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IAC1G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,MAAQ,KAAK,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IAC3G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,KAAO,MAAU,CAAC,GAAI,KAAM,CAACb,OAAM,IAC1G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,MAAO,MAAW,CAAC,GAAI,KAAM,CAACb,OAAM,IAC3G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAK,MAAO,MAAW,CAAC,GAAI,KAAM,CAACb,OAAM,IAC3G/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,IAAM,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,KAAO,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,IACjG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,MAAO,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,MAAO,IAAK,CAAC,GAAI,KAAM,CAACb,OAAM,IAChG/B,EAAK8B,OAAO,QAAS,CAAC,oBAAqB,CAAC,WAAW,OAAOc,IAAI,MAAO,MAAM,CAAC,GAAI,KAAM,CAACb,OAAM,EAAMsB,QAAQ,WAAW,OAAM,GAAHV,KAG7HP,EAAGC,GAAG,MAAM,WAAkB,GAAHM,GAAMK,EAAGV,OAAO,CAACM,IAAI,KAAK,GAAK,UAM1D5C,EAAK8B,OAAO,OAAQ,EAAE,IAAK,EAAG,eAAgB,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAsBmB,QAAQ,WAAW,OAAM,GAAHV,KAEtK3C,EAAK8B,OAAO,OAAQ,EAAE,KAAM,EAAG,WAAW,MAAO,gBAAkBa,IAAK,CAACZ,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,uBAEpJlC,EAAK8B,OAAO,OAAQ,EAAE,IAAK,EAAG,cAAe,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAsBmB,QAAQ,WAAW,OAAM,GAAHV,KAErK3C,EAAK8B,OAAO,OAAQ,CAAC,WAAW,OAAOc,IAAI,KAAM,EAAG,iBAAkB,CAACb,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAqBmB,QAAS,WAAW,OAAM,GAAHV,KAE9L3C,EAAK8B,OAAO,OAAQ,CAAC,WAAW,OAAOc,IAAI,KAAM,EAAG,eAAgB,CAACb,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAqBmB,QAAS,WAAW,OAAM,GAAHV,KAE5L3C,EAAK8B,OAAO,OAAQ,CAAC,WAAW,OAAOc,IAAI,MAAO,EAAG,WAAW,MAAO,iBAAmB,EAAED,IAAK,CAACZ,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,uBAE7KlC,EAAK8B,OAAO,OAAQ,CAAC,IAAK,KAAM,eAAgB,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAqBmB,QAAS,WAAW,OAAM,GAAHV,KACxK3C,EAAK8B,OAAO,OAAQ,CAAC,MAAO,IAAK,YAAa,CAACC,OAAM,EAAMC,SAAS,WAAW,OAAO,GAAGhC,EAAKiC,aAAa,KAAMC,SAAS,qBAAqBmB,QAAS,WAAW,OAAM,GAAHV,OAGvJ7C,IC/EA,GACfoD,KAAA,aACAa,WAAA,GAEAC,KAAA,WACA,OACAC,MAAA,CAAAC,OAAA,kBAGAC,QAAA,eAAAC,EAAA,KACA,KAAAC,OAAAC,OAAA,yBACA,IAAAC,EAAA,aACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GACA,IAAAC,EAAA,CACA,CAAAD,MAAA,2BAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,SACA,CAAAJ,MAAA,0BAAAE,IAAA,uBAAAC,OAAA,kBAAAN,EAAAO,KAAA,QACA,CAAAJ,MAAA,6BAAAE,IAAA,oBAAAC,OAAA,kBAAAN,EAAAO,KAAA,SAEA,KAAAN,OAAAC,OAAA,2BAAAE,GACA,IAAAI,GAAA,EACA,KAAAP,OAAAC,OAAA,4BAAAM,GACA,IAAAC,GAAA,EACA,KAAAR,OAAAC,OAAA,yBAAAO,IAEAC,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACAlF,EAAAC,SClEiX,I,wBCQ7WmF,EAAY,eACd,EACA,EACAC,GACA,EACA,KACA,KACA,MAIa,aAAAD,E","file":"js/chunk-7dd9ecb4.46b4e7ce.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!./IonicBond.vue?vue&type=style&index=0&id=302ef2c2&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"def\"},[_vm._v(\"\\n    Bonds\\n  \")]),_c('p',[_vm._v(\"Everything thing that you see, touch, and feel around you is made of atoms — the indivisible and indestructible building blocks of nature. Have you ever wondered what keeps these atoms together in the matter? The atoms in the matter are held together by an invisible force called a chemical bond. You can think of a chemical bond as an invisible, sticky 'glue' that keeps the atoms together.\")]),_c('h3',{ref:\"rvsp\"},[_vm._v(\"\\n    Types of Chemical Bonds\\n  \")]),_c('p',[_vm._v(\"There are two most basic types of chemical bonds — ionic bonds and covalent bonds. The nature of a chemical bond really depends on the chemical properties of the atoms being bonded.\")]),_vm._m(0),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph: Formation of an Ionic Bond\\n  \")]),_c('p',[_vm._v(\"Through this magicGraph, you will learn how an ionic bond is formed.\")]),_c('h5',[_vm._v(\"To Get Started\")]),_c('p',[_vm._v(\"\\n    You're given isolated Sodium (Na) and Chlorine (Cl) atoms.\\n    Drag the Cl atom towards the Na atom. Once the two atoms reach a close enough proximity, a complete transfer of the valence shell electron from Na atom to Cl atom takes place. This leads to the formation of an ionic bond between Na and Cl, and the creation of NaCl molecule — also known as common salt.\\n  \")]),_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',{staticStyle:{\"list-style-type\":\"square\"}},[_c('li',[_c('h5',[_vm._v(\"Ionic Bonds\")]),_vm._v(\"\\n      These bonds are formed through a complete transfer of electrons from one atom to another atom. For such transfer to occur, the atoms must have very different electronegativities. For example - the chemical bonds keeping Sodium (or Na) and Chlorine (or Cl) atoms together in common salt (NaCl) are ionic bonds. $$Na + Cl \\\\rightarrow NaCl $$ Such types of bonds are often formed between a metal and non-metal.\\n    \")]),_c('li',[_c('h5',[_vm._v(\"Covalent Bonds\")]),_vm._v(\"\\n      These bonds are formed by the sharing of electrons between two or more atoms. Such types of bonds are often formed between atoms having similar electronegativities.\\n    \")]),_vm._v(\"\\n    For example — the chemical bonds keeping the Carbon (C) and Hydrogen (H) atoms together in \\\\(CH_4\\\\) are covalent in nature. $$C + 2H_2 \\\\rightarrow CH_4$$\\n  \")])\n}]\n\nexport { render, staticRenderFns }","const Boxes = {\r\n  box1: function () {\r\n      var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-7, 15, 1,-15],keepaspectratio:true,\r\n         axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false,pan:{enabled:false}, zoom:{enabled:false}});\r\n         brd1.options.circle.highlight=false;\r\n         brd1.options.text.highlight=false;\r\n         brd1.options.image.highlight=false;\r\n         brd1.options.point.showInfobox=false;\r\n      var resize = function () {\r\n          brd1.resizeContainer(brd1.containerObj.clientWidth, brd1.containerObj.clientHeight, true);\r\n          brd1.fullUpdate();\r\n          };\r\n      window.onresize = resize;\r\n      brd1.options.layer['image']=10;\r\n\tbrd1.options.layer['point']=12;\r\n\tbrd1.create('text', [5, 12.5, '<b>Ionic Bond</b>'], {fixed:true, fontSize:function(){return 32*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n\tbrd1.create('text', [0, 11, 'Push Cl atom towards Na atom to form bond!'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n\tbrd1.create('image', ['/assets/left.svg', [-7.3, -6],[6,6]],{fixed:true, rotate:-10});\r\n\tvar k1 = brd1.create('image', ['/assets/right.svg', [22-2.85, -6],[6,6]],{fixed:false, rotate:10, highlight:true});\r\n\tbrd1.on('move', function(){k1.moveTo([Math.max(k1.X(), 14.5), k1.Y()]);});\r\n\tbrd1.create('text', [function(){return k1.X()+1},function(){return k1.Y()-0.25} , 'Drag me'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n\tbrd1.create('image', ['/assets/Nan.svg', [-1, -1],[2,2]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-0.3, 1.65],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-0.3, -2.25],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-0.3, 2.65],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-0.3, -3.25],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [2.6, -0.3],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-3.25, -0.3],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [2.12-0.35, 2.12-0.3],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-2.12-0.3, 2.12-0.3],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [-2.12-0.3, -2.12-0.2],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [2.12-0.35, -2.12-0.2],[0.6,0.6]],{fixed:true});\r\n//\tbrd1.create('text', [-0.4, 0.1, '<b>Na</b>'], {fixed:true, fontSize:function(){return 24*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n\tvar i=0; var j=0;\r\n\tk1.on('drag', function(){if(k1.X()<=14.5){return i=1}});\r\n\tk1.on('up', function(){if(i==1){k1.moveTo([14.5, -6], 100)}});\r\n\tvar a =function(){return k1.X()-3.25};\r\n\tvar c1 = brd1.create('circle', [[function(){return a()},0],[function(){return a()+4}, 0]],{fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4});\r\n\tbrd1.create('circle', [[function(){return a()},0],[function(){return a()+3}, 0]],{fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4});\r\n\tbrd1.create('circle', [[function(){return a()},0],[function(){return a()+2}, 0]],{fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4});\r\n  var pt = brd1.create('point', [2.82, 2.82], {size:0, name:'', trace:false, strokeWidth:0.5, color:'black'});\r\n//\r\n//\tbrd1.create('image', ['/assets/minus.svg', [function(){return pt.X()-0.35}, 2.82-0.3],[0.6,0.6]],{fixed:true});\r\n//\r\n\r\n\tbrd1.create('circle', [[0,0],[4, 0]],{visible:true,fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4, dash:function(){if(i==0){return 0}else{return 2}}});\r\n//\r\n\tbrd1.create('circle', [[0,0],[3, 0]],{fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4});\r\n\tbrd1.create('circle', [[0,0],[2, 0]],{fixed:true, strokeColor:'black', fillColor:'white', strokeWidth:4});\r\n  var pt1 = brd1.create('point', [2.82,2.82],{visible:false});\r\n  var pt1a = brd1.create('point', [function(){return 0.5*a();}, 4.5],{visible:false});\r\n\tvar pt2a = brd1.create('point', [function(){return 0.5*a();}, -3],{visible:false});\r\n\tvar pt2b = brd1.create('point', [function(){return 0.5*a();}, 3],{visible:false});\r\n\tvar pt2c = brd1.create('point', [function(){return 0.5*a();}, 0],{visible:false});\r\n\tvar pt3 = brd1.create('point', [function(){return a()-2.94+0.3}, 2.78+0.3],{visible:false});\r\n  var path =brd1.create('spline', [pt1, pt1a, pt3],{dash:1, strokeWidth:1, strokeColor:'red',visible:function(){if(i==1){return true}else{return false}}});\r\n  var glid=brd1.create('glider', [2.82, 2.82, path],{name:'', face:'>', size:1});\r\n  brd1.create('image', ['/assets/minus.svg', [2.82-0.35, 2.82-0.3],[0.6,0.6]],{fixed:true,\r\n    opacity:function(){if(i==0){return 1} else{return 0.35}}});\r\n  /*brd1.create('image', ['/assets/minus.svg', [function(){return 0.25*a();}, 4.02-0.3],[0.6,0.6]],{fixed:true,\r\n      opacity:function(){if(i==0){return 0} else{return 0.35}}});\r\n      brd1.create('image', ['/assets/minus.svg', [function(){return 0.75*a();}, 4.02-0.3],[0.6,0.6]],{fixed:true,\r\n        opacity:function(){if(i==0){return 0} else{return 0.35}}});*/\r\n  k1.on('drag', function(){\r\n      if(i==1)\r\n      {glid.startAnimation(1, 25, 1)}\r\n    });\r\n  //  k1.on('up', function(){glid.stopAnimation()});\r\n  //glid.stopAnimation();\r\n\tvar cl =brd1.create('image', ['/assets/Cln.svg', [function(){return a()-1}, -1],[2,2]],{fixed:true});\r\n\t//brd1.create('spline', [pt1, pt2a, pt3],{dash:1, strokeWidth:1, strokeColor:'red',visible:function(){if(i==1){return true}else{return false}}});\r\n\t//brd1.create('spline', [pt1, pt2b, pt3],{dash:1, strokeWidth:1, strokeColor:'red',visible:function(){if(i==1){return true}else{return false}}});\r\n\t//brd1.create('spline', [pt1, pt2c, pt3],{dash:1, strokeWidth:1, strokeColor:'red',visible: function(){if(i==1){return true}else{return false}}});\r\n//\tbrd1.create('spline', [[-1,-1], [function(){return 0.5*a()}, -1],[function(){return a()}, -1]],{dash:1, strokeWidth:1});\r\n//\tbrd1.create('spline', [[-1,-1], [function(){return 0.5*a()-1}, 0],[function(){return a()-1}, -1]],{dash:1, strokeWidth:1});\r\n\tbrd1.create('image', ['/assets/chat.svg', [15, -14],[8,6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, 1.65],[0.6,0.6]],{fixed:true});\r\n\tbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, -2.25],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, 2.65],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, -3.25],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+2.6}, -0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-3.25}, -0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+2.12-0.35}, 2.12-0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-2.12-0.3}, 2.12-0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-2.12-0.3}, -2.12-0.2],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+2.12-0.35}, -2.12-0.2],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+2.82-0.35}, 2.82-0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+2.82-0.35}, -2.82-0.2],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-2.82-0.35}, -2.82-0.2],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, 3.65],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-0.3}, -4.25],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()+3.6}, -0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-4.3}, -0.3],[0.6,0.6]],{fixed:true});\r\nbrd1.create('image', ['/assets/minus.svg', [function(){return a()-2.94}, 2.78],[0.6,0.6]],{fixed:true, visible:function(){if(i==1){return true} else{return false}}});\r\n//brd1.create('text', [function(){return a()-0.4}, 0.1, '<b>17 p +17 n</b>'], {fixed:true, fontSize:function(){return 12*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\nk1.on('up', function(){ if(i==1){pt.moveTo([a()-2.82-0.1, 2.79])}});\r\n//\r\n//brd1.create('image', ['/assets/exchange.svg', [function(){return 0.5*(k1.X()-5.5)}, -1.5],[2.5,2]],{fixed:true, visible:function(){if(i==1){return true}else{return false}}});\r\n\r\n//brd1.create('image', ['/assets/step.svg', [function(){return 0.5*(k1.X()-9.5)}, 2.],[6,4]],{fixed:true, rotate:5, visible:function(){if(i==1){return true}else{return false}}});\r\n\r\nbrd1.create('text', [-1.5, 6, 'Na: 2, 8, 1'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;', visible:function(){if(i==0){return true}else{return false}}});\r\n//\r\nbrd1.create('text', [-1.5, -5, function(){return 'Net Charge = ' + i}], {fixed:true, fontSize:function(){return 22*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\nbrd1.create('text', [-1.5, 6, 'Na^+: 2, 8'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;', visible:function(){if(i==1){return true}else{return false}}});\r\n//\r\nbrd1.create('text', [function(){return a()-1.5}, 6, 'Cl^-: 2, 8, 8'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;',visible: function(){if(i==1){return true}else{return false}}});\r\n//\r\nbrd1.create('text', [function(){return a()-1.5}, 6, 'Cl: 2, 8, 7'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;',visible: function(){if(i==0){return true}else{return false}}});\r\n//\r\nbrd1.create('text', [function(){return a()-1.5}, -5, function(){return 'Net Charge = ' + -1*i}], {fixed:true, fontSize:function(){return 22*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;'});\r\n//\r\nbrd1.create('text', [17, -10.5, 'Not Bonded!'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;',visible: function(){if(i==0){return true}else{return false}}});\r\nbrd1.create('text', [17.5, -9.5, ' Bonded!'], {fixed:true, fontSize:function(){return 25*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald;',visible: function(){if(i==1){return true}else{return false}}});\r\n  },\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"def\">\n      Bonds\n    </h3>\r\n    <p>Everything thing that you see, touch, and feel around you is made of atoms &mdash; the indivisible and indestructible building blocks of nature. Have you ever wondered what keeps these atoms together in the matter? The atoms in the matter are held together by an invisible force called a chemical bond. You can think of a chemical bond as an invisible, sticky 'glue' that keeps the atoms together.</p>\r\n    <h3 ref=\"rvsp\">\n      Types of Chemical Bonds\n    </h3>\r\n    <p>There are two most basic types of chemical bonds &mdash; ionic bonds and covalent bonds. The nature of a chemical bond really depends on the chemical properties of the atoms being bonded.</p>\r\n    <ul style=\"list-style-type: square;\">\r\n      <li>\r\n        <h5>Ionic Bonds</h5>\r\n        These bonds are formed through a complete transfer of electrons from one atom to another atom. For such transfer to occur, the atoms must have very different electronegativities. For example - the chemical bonds keeping Sodium (or Na) and Chlorine (or Cl) atoms together in common salt (NaCl) are ionic bonds. $$Na + Cl \\rightarrow NaCl $$ Such types of bonds are often formed between a metal and non-metal.\n      </li>\r\n      <li>\r\n        <h5>Covalent Bonds</h5>\r\n        These bonds are formed by the sharing of electrons between two or more atoms. Such types of bonds are often formed between atoms having similar electronegativities.\n      </li>\r\n      For example &mdash; the chemical bonds keeping the Carbon (C) and Hydrogen (H) atoms together in \\(CH_4\\) are covalent in nature. $$C + 2H_2 \\rightarrow CH_4$$\n    </ul>\r\n    <h3 ref=\"pg\">\n      MagicGraph: Formation of an Ionic Bond\n    </h3>\r\n    <p>Through this magicGraph, you will learn how an ionic bond is formed.</p>\r\n    <h5>To Get Started</h5>\r\n    <p>\n      You're given isolated Sodium (Na) and Chlorine (Cl) atoms.\r\n      Drag the Cl atom towards the Na atom. Once the two atoms reach a close enough proximity, a complete transfer of the valence shell electron from Na atom to Cl atom takes place. This leads to the formation of an ionic bond between Na and Cl, and the creation of NaCl molecule &mdash; also known as common salt.\n    </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: 'IonicBonds',\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 = 'Ionic Bond';\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 Bond?',img:'/assets/number-1.svg', action: () => this.goto('def')},\r\n      {title: 'Types of Chemical Bonds', img:'/assets/number-2.svg', action: () => this.goto('pg')},\r\n      {title: 'Formation of an Ionic Bond', 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 newChem =true;\r\n    this.$store.commit('navigation/replaceChem', newChem);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    Boxes.box1();\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n@import 'src/styles/edliy-box.scss';\r\n@import 'src/styles/subtopic-menu.scss';\r\n@import 'src/styles/edliy-box-about.scss';\r\n@import 'src/styles/screen-sizes.scss';\r\n.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!./IonicBond.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!./IonicBond.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./IonicBond.vue?vue&type=template&id=302ef2c2&\"\nimport script from \"./IonicBond.vue?vue&type=script&lang=js&\"\nexport * from \"./IonicBond.vue?vue&type=script&lang=js&\"\nimport style0 from \"./IonicBond.vue?vue&type=style&index=0&id=302ef2c2&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"],"sourceRoot":""}