{"version":3,"sources":["webpack:///./src/components/mathematics/Math9thGrade/demoSurfaceArea/Lesson.vue","webpack:///./src/components/mathematics/Math9thGrade/demoSurfaceArea/Boxes.js","webpack:///src/components/mathematics/Math9thGrade/demoSurfaceArea/Lesson.vue","webpack:///./src/components/mathematics/Math9thGrade/demoSurfaceArea/Lesson.vue?3b14","webpack:///./src/components/mathematics/Math9thGrade/demoSurfaceArea/Lesson.vue?37a8"],"names":["ref","attrs","staticClass","_v","_vm","_self","staticRenderFns","Boxes","box1","brd1","createSpace","suspendUpdate","options","axis","strokeWidth","layer","board","minimizeReflow","point","showInfobox","line","highlight","image","text","polygon","makeResponsive","placeLogo","placeTitle","analytics","placeEraseLeft","setLabel","label","setAttribute","visible","alignX","offset","CssStyle","fontSize","on","this","erase","placeTest","rght","placeImage","wrng","x1","y1","face","checkColorFront","m","delX","i","j","k","txt2","placeBoldText","writeHTMLText","create","hasInnerPoints","withLines","vertices","fixed","borders","strokeColor","fillColor","fillOpacity","txtm","Trects","width","num_width","x","rectx","y","Trect","txt","push","clearVisibility","forEach","item","im","imm","unsuspendUpdate","name","created","$store","commit","title","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","meta","vmid","content","component"],"mappings":"qJAA4D,EAAU,W,IAAgBA,EAAI,KAAQ,EAAK,EAAI,S,OAAyD,iBAAK,IAAK,SAAoOC,GAAK,GAAC,kD,IAAC,MAAmB,4MAAE,MAAK,CAAOC,iBAAY,K,CAAyB,QAAK,CAAS,8BAAG,MAAM,CACrf,mBACyC,IAAC,IAAqB,EAAmBC,YAClF,IAAC,OAAY,EAAO,EAAC,MAAI,G,OAAIC,EAAG,IAACC,CAAK,EAAG,6sCAAC,WAC1C,IAAC,OAAY,EAAO,EAAC,MAAI,G,OAAID,EAAG,IAACC,CAAK,EAAG,+mBAAC,W,IAAuDH,OAA2B,EAAI,EAAI,S,OAAiEA,MAAY,sCAAe,YAAQ,gBACvO,qEAEF,YAAiBI,gB,iFCsCXC,EAAQ,CAEVC,KAAM,WAEN,IAAIC,EAAOC,gBAAa,EAAG,IAAK,EAAG,GACnCD,EAAKE,gBAELF,EAAKG,QAAQC,KAAKC,YAAY,EAC9BL,EAAKG,QAAQG,MAAM,SAAS,GAC5BN,EAAKG,QAAQG,MAAM,QAAQ,GAC3BN,EAAKG,QAAQG,MAAM,QAAQ,GAC3BN,EAAKG,QAAQG,MAAM,SAAS,GAC5BN,EAAKG,QAAQG,MAAM,UAAU,GAE7BN,EAAKG,QAAQI,MAAMC,eAAiB,OACpCR,EAAKG,QAAQM,MAAMC,aAAa,EAChCV,EAAKG,QAAQQ,KAAKC,WAAU,EAC5BZ,EAAKG,QAAQU,MAAMD,WAAU,EAC7BZ,EAAKG,QAAQW,KAAKF,WAAU,EAC5BZ,EAAKG,QAAQY,QAAQH,WAAU,EAG/BI,eAAehB,GAEfiB,eAAUjB,GACVkB,eAAWlB,EAAM,yBAA0B,gDAE3C,IAAImB,EAAYC,eAAepB,GAC/BmB,EAAUE,SAAS,6BACnBF,EAAUG,MAAMC,aAAa,CAACC,SAAQ,EAAOC,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KACtHT,EAAUU,GAAG,QAAQ,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OACnEL,EAAUU,GAAG,OAAO,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAElE,IAAIO,EAAQC,eAAUhC,GACtB+B,EAAMV,SAAS,2BACfU,EAAMT,MAAMC,aAAa,CAACC,SAAQ,EAAOC,OAAO,SAAUC,OAAO,CAAC,GAAI,IAAKC,SAAS,oBAAqBC,SAAS,KAClHG,EAAMF,GAAG,QAAQ,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAC/DO,EAAMF,GAAG,OAAO,WAAaC,KAAKR,MAAMC,aAAa,CAACC,SAAQ,OAE9D,IAAIS,EAAOC,eAAWlC,EAAM,oBAAqB,EAAG,EAAG,EAAK,GACxDmC,EAAOD,eAAWlC,EAAM,oBAAqB,EAAG,EAAG,EAAK,GAC5DiC,EAAKV,aAAa,CAACC,SAAQ,IAC3BW,EAAKZ,aAAa,CAACC,SAAQ,IAI3B,IAAIY,GAAM,EACNC,EAAK,EAELC,EAAK,GAET,SAASC,IACG,GAALC,GACCP,EAAKV,aAAa,CAACC,SAAS,IAC5BW,EAAKZ,aAAa,CAACC,SAAQ,MAG3BW,EAAKZ,aAAa,CAACC,SAAQ,IAC3BS,EAAKV,aAAa,CAACC,SAAQ,KAOnCO,EAAMF,GAAG,QAAQ,WAAWU,OAE5B,IAAME,EAAK,KAAUC,EAAE,EAAOC,EAAE,EAAOC,EAAE,EAAOJ,EAAE,EAE9CK,GADOC,eAAc9C,EAAM,EAAG,KAAK,kBAAOwC,EAAE,8BACrCO,eAAc/C,EAAM,EAAG,KAAK,iBAAI,qBAAsB,GAAG,EAAEwC,GAAI,iBAC1EK,EAAKtB,aAAa,CAACC,SAAQ,IAI3Bc,EAAK,GAAItC,EAAKgD,OAAO,iBAAkB,CAAC,CAACZ,EAAGK,EAAMJ,EAAGI,GAAO,CAACL,EAAG,EAAEK,EAAMJ,EAAGI,GAAO,GAAI,CAACQ,eAAe,kBAAO,GAAHP,GAAS,GAAHC,GAAS,GAAHC,GAAOM,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,QAAQ,kBAAO,GAAHkB,GAAS,GAAHE,GAAMU,YAAY,QAASjD,YAAY,GAAIkD,UAAU,OAAQC,YAAY,MACvRlB,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAASgB,GAAG,EAAGF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAElMc,EAAK,GAAKtC,EAAKgD,OAAO,UAAW,CAAC,CAACZ,EAAIC,GAAK,CAACD,EAAG,EAAGC,GAAK,CAACD,EAAG,EAAEK,EAAMJ,EAAGI,GAAO,CAACL,EAAGK,EAAMJ,EAAGI,IAAQ,CAACQ,eAAe,kBAAO,GAAHP,GAAS,GAAHC,GAAS,GAAHC,GAAMM,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,QAAQ,kBAAO,GAAHkB,GAAMY,YAAY,QAASjD,YAAY,GAAIkD,UAAU,OAAQC,YAAY,MAC7RlB,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAC7HgB,GAAG,EACHF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAEtDc,EAAK,GAAKtC,EAAKgD,OAAO,UAAW,CAAC,CAACZ,EAAIC,GAAK,CAACD,EAAGK,EAAMJ,EAAGI,GAAO,CAACL,EAAGK,EAAMJ,EAAG,EAAEI,GAAO,CAACL,EAAIC,EAAG,IAAK,CAACY,eAAe,kBAAO,GAAHP,GAAS,GAAHC,GAAS,GAAHC,GAAKM,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,QAAQ,kBAAO,GAAHkB,GAAS,GAAHC,GAAMW,YAAY,QAASjD,YAAY,GAAIkD,UAAU,OAAQC,YAAY,MAClSlB,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAC7HgB,GAAG,EACHF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAEtDc,EAAK,GAAKtC,EAAKgD,OAAO,UAAW,CAAC,CAACZ,EAAG,EAAGC,GAAK,CAACD,EAAG,EAAEK,EAAMJ,EAAGI,GAAO,CAACL,EAAG,EAAEK,EAAMJ,EAAG,EAAEI,GAAO,CAACL,EAAG,EAAGC,EAAG,IAAM,CAACY,gBAAe,EAAKC,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAACC,YAAa,QAASjD,YAAY,GAAIkD,UAAW,QAASC,YAAY,IACtQlB,EAAK,GAAGT,GAAG,QAAQ,WAAWe,EAAE,KAChCN,EAAK,GAAGT,GAAG,OAAO,WAAWe,EAAE,KAC/BN,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAAQoB,EAAE,EAAGJ,GAAG,EAAGF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAEtMc,EAAK,GAAKtC,EAAKgD,OAAO,UAAW,CAAC,CAACZ,EAAIC,EAAG,GAAI,CAACD,EAAG,EAAGC,EAAG,GAAI,CAACD,EAAG,EAAEK,EAAMJ,EAAG,EAAEI,GAAO,CAACL,EAAGK,EAAMJ,EAAG,EAAEI,IAAQ,CAACQ,gBAAe,EAAMC,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,SAAQ,EAAM8B,YAAa,QAASjD,YAAa,GAAIkD,UAAW,QAASC,YAAY,IACrRlB,EAAK,GAAGT,GAAG,QAAQ,WAAWc,EAAE,KAChCL,EAAK,GAAGT,GAAG,OAAO,WAAWc,EAAE,KAC/BL,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAAQmB,EAAE,EAAGH,GAAG,EAAGF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAEtMc,EAAK,GAAItC,EAAKgD,OAAO,iBAAkB,CAAC,CAACZ,EAAIC,GAAK,CAACD,EAAG,EAAGC,GAAK,GAAI,CAACY,gBAAe,EAAMC,WAAU,EAAMC,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,SAAQ,EAAM8B,YAAa,QAASjD,YAAa,GAAIkD,UAAW,QAASC,YAAY,IAC5OlB,EAAK,GAAGT,GAAG,QAAQ,WAAWa,EAAE,KAChCJ,EAAK,GAAGT,GAAG,OAAO,WAAWa,EAAE,KAC/BJ,EAAK,GAAGT,GAAG,QAAQ,WAAW4B,EAAK,GAAGlC,aAAa,CAACC,SAAQ,IAAOkC,EAAO,GAAG,GAAGnC,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,KAAQkB,EAAE,EACvIF,GAAI,EAAGF,EAAK,GAAGf,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,QAM7D,IAJD,IAAImC,EAAM,EACNC,EAAU,EACVF,EAAO,GACPD,EAAK,GACCI,EAAE,EAAGA,EAAE,EAAGA,IACnB,CAEA,IADA,IAAIC,EAAM,GACDC,EAAE,EAAGA,EAAE,EAAGA,IACnB,CACI,IAEIC,EAAQhE,EAAKgD,OAAO,iBAAkB,CAAC,CAACa,EAAEF,EAAM,EAAGC,EAAUD,EAAM,EAAGI,EAAEJ,EAAM,GAAI,CAACE,EAAEF,EAAM,EAAGC,EAAUD,EAAM,EAAGI,EAAEJ,EAAM,GAAI,GAAI,CAACV,gBAAe,EAAMzB,SAAQ,EAAO2B,SAAS,CAAC3B,SAAQ,EAAO4B,OAAM,GAAOC,QAAQ,CAAC7B,SAAQ,EAAO8B,YAAY,OAAQjD,YAAY,GAAIkD,UAAW,QAASC,YAAY,MACxSS,EAAMlB,eAAc/C,EAAM6D,EAAEF,GAAOC,EAAU,IAAKD,EAAM,GAAII,EAAE,IAAKJ,EAAM,EAAG,OAChFM,EAAI1C,aAAa,CAACC,SAAQ,IAC1BsC,EAAMI,KAAKF,GACXP,EAAKS,KAAKD,GAEdP,EAAOQ,KAAKJ,GAGd,SAASK,IACL7B,EAAK8B,SAAQ,SAACC,EAAMC,GAClBD,EAAK9C,aAAa,CAACC,SAAQ,EAAM6B,QAAQ,CAAC7B,SAAQ,QAEpDiC,EAAKW,SAAQ,SAACC,EAAMC,GAClBD,EAAK9C,aAAa,CAACC,SAAQ,OAE7BkC,EAAOU,SAAQ,SAACC,EAAME,GACpBF,EAAKD,SAAQ,SAACG,GAAOA,EAAIhD,aAAa,CAACC,SAAQ,EAAO6B,QAAQ,CAAC7B,SAAQ,WAEzES,EAAKV,aAAa,CAACC,SAAQ,IAC3BW,EAAKZ,aAAa,CAACC,SAAQ,IAC7BL,EAAUU,GAAG,QAAQ,WAAWa,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEJ,EAAE,EAC5C2B,OAGFnE,EAAKwE,oBAGM1E,ICvIA,GACf2E,KAAA,eACAC,QAAA,WACA,KAAAC,OAAAC,OAAA,yBACA,IAAAC,EAAA,yBACA,KAAAF,OAAAC,OAAA,yBAAAC,GACA,KAAAF,OAAAC,OAAA,wBAAAC,GASA,IAAAC,GAAA,EACA,KAAAH,OAAAC,OAAA,4BAAAE,GACA,IAAAC,GAAA,EACA,KAAAJ,OAAAC,OAAA,yBAAAG,GACA,IAAAC,GAAA,EACA,KAAAL,OAAAC,OAAA,8BAAAI,GACA,IAAAC,GAAA,EACA,KAAAN,OAAAC,OAAA,2BAAAK,IAEAC,QAAA,WACAC,QAAAC,IAAAC,MAAA,WAAAF,QAAAC,MACAtF,EAAAC,QAEAuF,SAAA,WACA,OAAAT,MAAA,yBAEAU,KAAA,CACA,CAAAC,KAAA,cAAAf,KAAA,cAAAgB,QAAA,mECpF6X,I,YCOzXC,EAAY,eACd,EACA,EACA7F,GACA,EACA,KACA,KACA,MAIa,aAAA6F,E","file":"js/chunk-2d0a4b7b.0c58b6d8.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"intro\"},[_vm._v(\"\\n    Views of 3D Shapes\\n  \")]),_vm._m(0),_c('h3',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Front, Top & Side Views of a 3D Shape\\n  \")]),_c('br'),_c('h5',[_vm._v(\" Getting Started \")]),_vm._m(1),_c('h5',[_vm._v(\" Icons on the MagicGraph \")]),_vm._m(2),_c('br'),_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('p',[_vm._v(\"\\n    Three dimensional (or 3D) objects look differently when seen from different directions or angles.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    One can draw a two dimensional (or 2D) figure of a 3D object as it is seen from a given direction. Such a figure is called a\\n    \"),_c('i',[_vm._v(\"view \")]),_vm._v(\" or a \"),_c('i',[_vm._v(\" projection\")]),_vm._v(\".\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    In a 2D view of a 3D object, one can see only those features that are visible from that particular direction. Thus, a single 2D view\\n    is generally not sufficient to describe all the features of a 3D object. \"),_c('br'),_c('br'),_vm._v(\"\\n\\n    However, by a combination of multiple different views, one can fully describe a 3D object. \"),_c('br'),_c('br'),_vm._v(\"\\n\\n    Three commonly used views to describe a 3D object are:\\n    \"),_c('ul',[_c('li',[_c('h5',[_vm._v(\" Front View: \")]),_vm._v(\"The 2D view of a 3D object as seen from the front is called its front view. \")]),_c('li',[_c('h5',[_vm._v(\" Side  View: \")]),_vm._v(\" The 2D view of a 3D object as seen from the side (can be left or right) is called its side view.\")]),_c('li',[_c('h5',[_vm._v(\"  Top View \")]),_vm._v(\" The 2D view of a 3D object as seen from the top is called its top view. \")])])])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    In this MagicGraph, you will be drawing the front, top and side views of the given 3D object.\\n    On the top row, you will see the 3D object that you will be creating these views of. \"),_c('br'),_c('br'),_vm._v(\"\\n    On the bottom row, you are given three stacks of empty squares labeled as \"),_c('i',[_vm._v(\"Front\")]),_vm._v(\", \"),_c('i',[_vm._v(\"Top\")]),_vm._v(\" and \"),_c('i',[_vm._v(\"Side\")]),_vm._v(\".\\n    By selectively filling the squares in these stacks, you can create all the three views.\\n    \"),_c('br'),_c('br'),_vm._v(\"\\n    Simply tap on an empty square to fill it. Tapping on a filled square will empty it.\\n  \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n    You can tap on \"),_c('i',{staticClass:\"tester ma-1\"}),_vm._v(\" icon  to check your answer. You can tap on the\\n    \"),_c('i',{staticClass:\"eraser ma-1\"}),_vm._v(\" icon to erase and start over.\\n  \")])\n}]\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  placeMiddleText,\r\n  placeLine,\r\n  placePoint,\r\n  placeGlider,\r\n  placeRuler,\r\n  placeLeftText,\r\n  placeCircle,\r\n  placeAngle,\r\n  placeDash,\r\n  placeLabel,\r\n  placeRightText,\r\n//placePoint(board, positionX, positionY, size, cols1, cols2)\r\n//placeDash(board, Pt1, Pt2, width, cols)\r\n  placeArc,\r\n  placeLogo,\r\n  placeErase,\r\n  placeShuffle,\r\n  placeTest,\r\n  placeSeg,\r\n  setConfig,\r\n  placeStat,\r\n  placeTri,\r\n  shuffle,\r\n  placeEraseLeft,\r\n  placeEraseRight,\r\n  createSpace,\r\n  placeStartOver,\r\n  writeHTMLText,\r\n  placeBoldText\r\n} from '../Utils';\r\nconst Boxes = {\r\n    //JXG.Options.line.highlight=false;\r\n    box1: function () {\r\n    //Create the Board\r\n    var brd1 = createSpace(-3, 10, -4, 9);\r\n    brd1.suspendUpdate();\r\n    // Layering\r\n    brd1.options.axis.strokeWidth=0;\r\n    brd1.options.layer['image']=15;\r\n    brd1.options.layer['text']=16;\r\n    brd1.options.layer['line']=18;\r\n    brd1.options.layer['point']=17;\r\n    brd1.options.layer['glider']=17;\r\n  //  brd1.options.layer['polygon']=17;\r\n    brd1.options.board.minimizeReflow = 'none';\r\n    brd1.options.point.showInfobox =false;\r\n    brd1.options.line.highlight=false;\r\n    brd1.options.image.highlight=false;\r\n    brd1.options.text.highlight=false;\r\n    brd1.options.polygon.highlight=false;\r\n//    brd1.options.text.display='internal';\r\n    //Make the board responsive\r\n    makeResponsive(brd1);\r\n    // Creat titleStyle\r\n    placeLogo(brd1);\r\n    placeTitle(brd1, 'Surface Area of a Cube', '(Tap on the facets of the cube to unfold it)');\r\n/////////////////////\r\n    var analytics = placeEraseLeft(brd1);\r\n    analytics.setLabel('Tap to Erase & Start Over')\r\n    analytics.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n    analytics.on('over', function () {this.label.setAttribute({visible:true});});\r\n    analytics.on('out', function () {this.label.setAttribute({visible:false});});\r\n    ////////////////////////////////////////////////////\r\n    var erase = placeTest(brd1);\r\n    erase.setLabel('Tap to Test Your Answer')\r\n    erase.label.setAttribute({visible:false, alignX:'middle', offset:[0, -15], CssStyle:'fontFamily:Oswald', fontSize:12});\r\n    erase.on('over', function () {this.label.setAttribute({visible:true});});\r\n    erase.on('out', function () {this.label.setAttribute({visible:false});});\r\n/////////////////////////////////////////////////////////////////////////////\r\n    var rght = placeImage(brd1, '/assets/check.svg', 8, 6, 1.,  0);\r\n    var wrng = placeImage(brd1, '/assets/cross.svg', 8, 6, 1.,  0);\r\n    rght.setAttribute({visible:false});\r\n    wrng.setAttribute({visible:false});\r\n  //  placeMiddleText(brd1, 0, 12, ()=>'Given Number =' + NumList[i]);\r\n    /////////////////////////////////////////////////////////\r\n    //3D Shape\r\n    var x1 = -2;\r\n    var y1 = 0.;\r\n    var shape=[];\r\n    var face=[];\r\n    ////////////////////////////////////////////////////////////////////////////\r\n    function checkColorFront(){\r\n        if(m == 0){\r\n            rght.setAttribute({visible: true});\r\n            wrng.setAttribute({visible:false});\r\n        }\r\n        else{\r\n            wrng.setAttribute({visible:true});\r\n            rght.setAttribute({visible:false});\r\n        }\r\n    }\r\n    var eraseit =function(){\r\n      wrng.setAttribute({visible:false});\r\n      rght.setAttribute({visible:false});\r\n    }\r\n    erase.on('down', function(){checkColorFront();});\r\n///////////////////////////////////////////\r\n    const delX=1.15; var i=0; var j=0; var k=0; var m=6;\r\n    var txt1 = placeBoldText(brd1, 0, 6.5, ()=>''+m+' facets left to unfold !');\r\n    var txt2 = writeHTMLText(brd1, 6, 6.5, ()=>'<b>Surface area = '+ 1*(6-m) +' a^2 ?</b>');\r\n    txt2.setAttribute({visible:true});;\r\n  //  var txt5 = placeMiddleText(brd1, x1+1.5, y1+2+0.5, '2');\r\n  //  var txt6 = placeMiddleText(brd1, x1+2.5, y1+1+0.5, '3');\r\n    //back\r\n    face[5]= brd1.create('regularpolygon', [[x1+delX, y1+delX], [x1+3+delX, y1+delX], 4], {hasInnerPoints:()=>i==0&&j==0&&k==0,  withLines:true, vertices:{visible:false, fixed:true}, borders:{visible:()=>i==0||k==0, strokeColor:'black', strokeWidth:2}, fillColor:'grey', fillOpacity:0.25});\r\n    face[5].on('down', function(){txtm[7].setAttribute({visible:true}),Trects[1][3].setAttribute({visible:true, borders:{visible:true}}); m-=1; face[5].setAttribute({visible:false, borders:{visible:false}});});\r\n// bottom\r\n    face[4] = brd1.create('polygon', [[x1, y1], [x1+3, y1], [x1+3+delX, y1+delX], [x1+delX, y1+delX]], {hasInnerPoints:()=>i==0&&j==0&&k==0, withLines:true, vertices:{visible:false, fixed:true}, borders:{visible:()=>i==0, strokeColor:'black', strokeWidth:2}, fillColor:'grey', fillOpacity:0.25});\r\n    face[4].on('down', function(){txtm[4].setAttribute({visible:true}),Trects[1][0].setAttribute({visible:true, borders:{visible:true}});\r\n    m-=1;\r\n    face[4].setAttribute({visible:false, borders:{visible:false}});});\r\n// side\r\n    face[3] = brd1.create('polygon', [[x1, y1], [x1+delX, y1+delX], [x1+delX, y1+3+delX], [x1, y1+3]], {hasInnerPoints:()=>i==0&&j==0&&k==0,withLines:true, vertices:{visible:false, fixed:true}, borders:{visible:()=>i==0||j==0, strokeColor:'black', strokeWidth:2}, fillColor:'grey', fillOpacity:0.25});\r\n    face[3].on('down', function(){txtm[1].setAttribute({visible:true}),Trects[0][1].setAttribute({visible:true, borders:{visible:true}});\r\n    m-=1;\r\n    face[3].setAttribute({visible:false, borders:{visible:false}});});\r\n//top\r\n    face[2] = brd1.create('polygon', [[x1+3, y1], [x1+3+delX, y1+delX], [x1+3+delX, y1+3+delX], [x1+3, y1+3] ], {hasInnerPoints:true,withLines:true, vertices:{visible:false, fixed:true}, borders:{strokeColor: 'black', strokeWidth:2}, fillColor: 'white', fillOpacity:1.0});\r\n    face[2].on('over', function(){k=1});\r\n    face[2].on('out', function(){k=0});\r\n    face[2].on('down', function(){txtm[9].setAttribute({visible:true}),Trects[2][1].setAttribute({visible:true, borders:{visible:true}});k=0; m-=1; face[2].setAttribute({visible:false, borders:{visible:false}});});\r\n//side\r\n    face[1] = brd1.create('polygon', [[x1, y1+3], [x1+3, y1+3], [x1+3+delX, y1+3+delX], [x1+delX, y1+3+delX]], {hasInnerPoints:true, withLines:true, vertices:{visible:false, fixed:true}, borders:{visible:true, strokeColor: 'black', strokeWidth: 2}, fillColor: 'white', fillOpacity:1.0});\r\n    face[1].on('over', function(){j=1});\r\n    face[1].on('out', function(){j=0});\r\n    face[1].on('down', function(){txtm[6].setAttribute({visible:true}),Trects[1][2].setAttribute({visible:true, borders:{visible:true}});j=0; m-=1; face[1].setAttribute({visible:false, borders:{visible:false}});});\r\n//front\r\n    face[0]= brd1.create('regularpolygon', [[x1, y1], [x1+3, y1], 4], {hasInnerPoints:true, withLines:true, vertices:{visible:false, fixed:true}, borders:{visible:true, strokeColor: 'black', strokeWidth: 2}, fillColor: 'white', fillOpacity:1.0});\r\n    face[0].on('over', function(){i=1});\r\n    face[0].on('out', function(){i=0});\r\n    face[0].on('down', function(){txtm[5].setAttribute({visible:true}),Trects[1][1].setAttribute({visible:true, borders:{visible:true}});i=0;\r\n    m -=1; face[0].setAttribute({visible:false, borders:{visible:false}});});\r\n// face\r\n   var width=2;\r\n   var num_width=2;\r\n   var Trects=[];\r\n   var txtm=[];\r\n    for (let x=0; x<3; x++)\r\n    {\r\n    let rectx=[];\r\n    for (let y=0; y<4; y++)\r\n    {\r\n        let v = true;\r\n        let v2 = false;\r\n        var Trect = brd1.create('regularpolygon', [[x*width-1.*num_width*width+7, y*width-2], [x*width-1.*num_width*width+9, y*width-2], 4], {hasInnerPoints:true, visible:false, vertices:{visible:false, fixed:true}, borders:{visible:false, strokeColor:'grey', strokeWidth:1}, fillColor: 'green', fillOpacity:0.75});\r\n        var txt = writeHTMLText(brd1, x*width-(num_width-0.5)*width+7, (y+0.5)*width-2, 'a^2');\r\n        txt.setAttribute({visible:false});\r\n        rectx.push(Trect);\r\n        txtm.push(txt);\r\n    }\r\n    Trects.push(rectx);\r\n}\r\n//////////////////////////////////////////////////////////////////////\r\n  function clearVisibility(){\r\n      face.forEach((item, im) => {\r\n        item.setAttribute({visible:true, borders:{visible:true}});\r\n      });\r\n      txtm.forEach((item, im) => {\r\n        item.setAttribute({visible:false});\r\n      });\r\n      Trects.forEach((item, imm) => {\r\n        item.forEach((imm)=>{imm.setAttribute({visible:false, borders:{visible:false}})});\r\n      });\r\n      rght.setAttribute({visible:false});\r\n      wrng.setAttribute({visible:false});}\r\n    analytics.on('down', function(){i=0;j=0;k=0;m=6;\r\n      clearVisibility();\r\n    });\r\n///////////////////////////////////////////////////////////////////////\r\n    brd1.unsuspendUpdate();\r\n                      },\r\n              }\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"intro\">\n      Views of 3D Shapes\n    </h3>\r\n    <p>\n      Three dimensional (or 3D) objects look differently when seen from different directions or angles.\r\n      <br> <br>\r\n      One can draw a two dimensional (or 2D) figure of a 3D object as it is seen from a given direction. Such a figure is called a\r\n      <i>view </i> or a <i> projection</i>.\r\n      <br> <br>\r\n      In a 2D view of a 3D object, one can see only those features that are visible from that particular direction. Thus, a single 2D view\r\n      is generally not sufficient to describe all the features of a 3D object. <br><br>\r\n\r\n      However, by a combination of multiple different views, one can fully describe a 3D object. <br> <br>\r\n\r\n      Three commonly used views to describe a 3D object are:\r\n      <ul>\r\n        <li> <h5> Front View: </h5>The 2D view of a 3D object as seen from the front is called its front view. </li>\r\n        <li> <h5> Side  View: </h5> The 2D view of a 3D object as seen from the side (can be left or right) is called its side view.</li>\r\n        <li> <h5>  Top View </h5> The 2D view of a 3D object as seen from the top is called its top view. </li>\r\n      </ul>\r\n    </p>\r\n\r\n    <h3 ref=\"pg\">\n      MagicGraph | Front, Top & Side Views of a 3D Shape\n    </h3>\r\n    <br>\r\n    <h5> Getting Started </h5>\r\n    <p>\n      In this MagicGraph, you will be drawing the front, top and side views of the given 3D object.\r\n      On the top row, you will see the 3D object that you will be creating these views of. <br><br>\r\n      On the bottom row, you are given three stacks of empty squares labeled as <i>Front</i>, <i>Top</i> and <i>Side</i>.\r\n      By selectively filling the squares in these stacks, you can create all the three views.\r\n      <br><br>\r\n      Simply tap on an empty square to fill it. Tapping on a filled square will empty it.\r\n    </p>\r\n    <h5> Icons on the MagicGraph </h5>\r\n    <p>\r\n      You can tap on <i class=\"tester ma-1\" /> icon  to check your answer. You can tap on the\r\n      <i class=\"eraser ma-1\" /> icon to erase and start over.\r\n    </p>\r\n    <br>\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: 'ThreeDShapes',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Surface Area of a Cube';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n  /*  let newTopics = [\r\n      {title: 'Parallel Lines', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Transversal', img:'/assets/number-2.svg', action: () => this.goto('trans')},\r\n      {title: 'Pair of Angles', img:'/assets/number-3.svg', action: () => this.goto('angles')},\r\n      {title: 'MagicGraph',img:'/assets/touch.svg', action: () => this.goto('pg')},\r\n    ];\r\n    this.$store.commit('navigation/replaceTopics', newTopics);\r\n   */\r\n    let newshowhome = false;\r\n    this.$store.commit('navigation/toggleshowhome', newshowhome);\r\n    let newMath =true;\r\n    this.$store.commit('navigation/replaceMath', newMath);\r\n    let newLeftArrow =true;\r\n    this.$store.commit('navigation/replaceLeftArrow', newLeftArrow);\r\n    let newModule=true;\r\n    this.$store.commit('navigation/replaceModule', newModule);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    Boxes.box1();\r\n  },\r\n  metaInfo() {\r\n  return{ title: 'Surface Area of a Cube',\r\n      //    titleTemplate: '%s - Learn interactively',\r\n          meta: [\r\n                  {vmid:'description', name: 'description', content: 'Learn interactively how to find the surface area of a cube.'}\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=81de6048&\"\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":""}