{"version":3,"sources":["webpack:///./src/components/coding/ForLoop.vue","webpack:///./src/components/coding/Boxes.js","webpack:///src/components/coding/ForLoop.vue","webpack:///./src/components/coding/ForLoop.vue?4f96","webpack:///./src/components/coding/ForLoop.vue?75d7","webpack:///./node_modules/@babel/runtime/helpers/esm/createClass.js","webpack:///./src/components/coding/ForLoop.vue?5030","webpack:///./node_modules/@babel/runtime/helpers/esm/classCallCheck.js"],"names":["attrs","_c","_vm","next","staticStyle","staticRenderFns","render","ForLoopExample","_classCallCheck","this","i","reset","_createClass","key","value","singleStep","currentStep","step","warpToStep","setPC","sourceLine","sources","sourceDisplay","document","getElementById","variableDisplay","flowchartDisplay","modifiedSources","length","isVisible","innerHTML","join","image","undefined","emitCode","text","color","arguments","colorTag","emitNormalText","newLine","String","ForLoopExampleFactory","run","f","name","data","created","_this","title","$store","commit","newTopics","img","action","goto","newshowhome","newPhys","mounted","MathJax","Hub","Queue","methods","previous","metaInfo","titleTemplate","meta","content","component","_defineProperties","target","props","descriptor","enumerable","configurable","writable","Object","defineProperty","Constructor","protoProps","staticProps","prototype","instance","TypeError"],"mappings":"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","file":"js/chunk-9f438cac.3fe6bca9.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('h3',{ref:\"ia\"},[_vm._v(\"\\n      For Loop\\n    \")]),_vm._m(0),_vm._m(1),_vm._m(2),_vm._m(3),_vm._m(4),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\",\"align-center\":\"\",\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{attrs:{\"xs6\":\"\",\"sm6\":\"\",\"md6\":\"\",\"lg6\":\"\",\"xl6\":\"\"}},[_c('v-btn',{attrs:{\"large\":\"\",\"depressed\":\"\"},on:{\"click\":_vm.previous}},[_c('v-img',{attrs:{\"src\":\"/assets/undo.svg\",\"aspect-ratio\":\"1\",\"contain\":\"\"}})],1),_c('v-btn',{attrs:{\"large\":\"\",\"depressed\":\"\"},on:{\"click\":_vm.next}},[_c('v-img',{attrs:{\"src\":\"/assets/redo.svg\",\"aspect-ratio\":\"1\",\"contain\":\"\"}})],1),_c('h5',[_vm._v(\"Source Code\")]),_c('div',{attrs:{\"id\":\"source-display\"}}),_c('br'),_c('h5',[_vm._v(\"Code State Monitor\")]),_c('div',{attrs:{\"id\":\"variables\"}}),_c('br')],1),_c('v-flex',{attrs:{\"xs6\":\"\",\"sm6\":\"\",\"md6\":\"\",\"lg6\":\"\",\"xl6\":\"\",\"justify-center\":\"\"}},[_c('div',{staticStyle:{},attrs:{\"id\":\"flowchart\"}})])],1)],1)],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n      The \"),_c('b',[_vm._v(\"for\")]),_vm._v(\" loop is a common construct in programming. It is used to\\n      repeat an action a certain number of times.\\n    \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n      In this MagicGraph, we will use a \"),_c('b',[_vm._v(\"for\")]),_vm._v(\" loop to draw the path of a\\n      turtle across a grid.\\n    \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n      The syntax of the \"),_c('b',[_vm._v(\"for\")]),_vm._v(\" loop varies based on the language. Examples of\\n      for loops from Python, C and others are shown below. The examples print out\\n      the numbers 0-9 (inclusive).\\n    \")])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n      Python3:\\n      \"),_c('pre',[_vm._v(\"for i in range(0, 10):\\n    print(i)\\n      \")])])\n},function (){var _vm=this,_c=_vm._self._c;return _c('p',[_vm._v(\"\\n      C:\\n      \"),_c('pre',[_vm._v(\"for (int i = 0; i < 10; ++i) {\\n    printf(\\\"%d\\\\n\\\", i);\\n}\\n      \")])])\n}]\n\nexport { render, staticRenderFns }","const labelStyle = {\r\n    fontSize: 18,\r\n    cssStyle: 'fontFamily:Oswald;',\r\n}\r\n\r\nclass EdliyGraph {\r\n    constructor(name, style) {\r\n        const defaultStyle = {\r\n            keepaspectratio: true,\r\n            axis:false,\r\n            ticks:true,\r\n            grid:true,\r\n            showCopyright:false,\r\n            showNavigation:false,\r\n            pan: {enabled:false},\r\n        }\r\n\r\n        let mergedStyle = defaultStyle;\r\n        for (key in style) {\r\n            mergedStyle[key] = style[key];\r\n        }\r\n\r\n        this.board = JXG.JSXGraph.initBoard(name, mergedStyle);\r\n        this.turtle = undefined;\r\n    }\r\n\r\n    point(coords, ...args) {\r\n    }\r\n\r\n    turtle(startCoords) {\r\n        this.turtle = this.board.create('turtle',\r\n                                        startCoords,\r\n                                        {\r\n                                            strokeOpacity: 1,\r\n                                        });\r\n    }\r\n}\r\n\r\nclass Parser {\r\n    constructor(text) {\r\n        this.text = text;\r\n    }\r\n\r\n    parse() {\r\n        const KnownTokens = {\r\n            COMMENT: '#',\r\n            FOR: 'for',\r\n            ITERATOR: 'iterator',\r\n        }\r\n\r\n        // Expect something like:\r\n        // for (<Symbol> = <Lower>; <Symbol> < <Upper>; <Symbol>++) {\r\n        //     <Function>(<Symbol>);\r\n        //     \r\n        // }\r\n\r\n        let index = 0;\r\n        var expect = function(fixedText, at) {\r\n            if (at >= this.text.length ||\r\n                (at + fixedText.length) >= this.text.length) {\r\n                return false;\r\n            }\r\n\r\n            return substring(this.text, at, fixedText.length) == fixedText;\r\n        }\r\n\r\n        var advance = function(fixedText) {\r\n            index += fixedText.length;\r\n        }\r\n\r\n\r\n    }\r\n\r\n    is_valid() {\r\n        return false;\r\n    }\r\n}\r\n\r\nclass ForLoopExample {\r\n    // constructor(turtle) {\r\n        // this.turtle = turtle;\r\n    constructor() {\r\n        //this.resetPosition = [turtle.X(), turtle.Y()];\r\n        this.i = 0;\r\n        this.reset();\r\n    }\r\n\r\n    next() {\r\n        this.singleStep();\r\n    }\r\n\r\n    previous() {\r\n        const currentStep = this.step;\r\n        if (currentStep > 0) {\r\n            this.warpToStep(currentStep - 1);\r\n        }\r\n    }\r\n\r\n    singleStep() {\r\n        switch (this.step) {\r\n            case 0:\r\n                this.setPC(1);\r\n                break;\r\n            case 1:\r\n                this.setPC(4);\r\n                break;\r\n            case 2:\r\n                // this.turtle.forward(1);\r\n                this.setPC(2);\r\n                break;\r\n            case 3:\r\n                this.i = 1;\r\n                this.setPC(1);\r\n                break;\r\n            case 4:\r\n                this.setPC(4);\r\n                break;\r\n            case 5:\r\n                // this.turtle.forward(1);\r\n                this.setPC(2);\r\n                break;\r\n            case 6:\r\n                this.i = 2;\r\n                this.setPC(1);\r\n                break;\r\n            case 7:\r\n                this.setPC(4);\r\n                break;\r\n            case 8:\r\n                // this.turtle.forward(1);\r\n                this.setPC(2);\r\n                break;\r\n            case 9:\r\n                this.i = 3;\r\n                this.setPC(1);\r\n                break;\r\n            case 10:\r\n                this.setPC(5);\r\n                break;\r\n            case 11:\r\n                this.setPC(6);\r\n                break;\r\n/*\r\n            case 0:\r\n                this.turtle.forward(1);\r\n                this.setPC(1);\r\n                break;\r\n            case 1:\r\n                this.turtle.forward(1);\r\n                this.setPC(1);\r\n                break;\r\n            case 2:\r\n                this.turtle.forward(1);\r\n                this.setPC(3);\r\n                break;\r\n            case 3:\r\n                this.turtle.right(90);\r\n                this.setPC(4);\r\n                break;\r\n            case 4:\r\n                this.turtle.setPenColor('blue');\r\n                this.setPC(5);\r\n                break;\r\n            case 5:\r\n                this.turtle.forward(1);\r\n                this.setPC(6);\r\n                break;\r\n            case 6:\r\n                this.turtle.forward(1);\r\n                this.setPC(6);\r\n                break;\r\n            case 7:\r\n                this.turtle.forward(1);\r\n                this.setPC(6);\r\n                break;\r\n            case 8:\r\n                this.turtle.forward(1);\r\n                this.setPC(7);\r\n                break;\r\n*/\r\n            default:\r\n                return;\r\n        }\r\n        this.step++;\r\n    }\r\n\r\n    warpToStep(step) {\r\n        this.reset();\r\n        while (this.step < step) {\r\n            this.singleStep();\r\n        }\r\n    }\r\n\r\n    reset() {\r\n        // this.turtle.clearScreen();\r\n        // this.turtle.setPenColor('red');\r\n        // this.turtle.setPenSize(9);\r\n        this.step = 0;\r\n        this.i = 0;\r\n        this.setPC(0);\r\n    }\r\n\r\n    setPC(sourceLine) {\r\n        const sources = [\r\n            \"for (i = 0;\",\r\n            \"     i < 3;\",\r\n            \"     i++)\",\r\n            \"{\",\r\n            \"  forward(1);\",\r\n            \"}\",\r\n            \"// end\",\r\n            // \"turnClockwise(90);\",\r\n            // \"color('blue');\",\r\n            // \"for (i = 0; i < 4; ++i) {\",\r\n            // \"  forward(1);\",\r\n            // \"}\",\r\n        ];\r\n\r\n        let sourceDisplay = document.getElementById('source-display');\r\n        let variableDisplay = document.getElementById('variables');\r\n        let flowchartDisplay = document.getElementById('flowchart');\r\n        let modifiedSources = sources;\r\n        for (let i = 0; i < sources.length; ++i) {\r\n            const isVisible = (i == sourceLine);\r\n            modifiedSources[i] = \"<img style='height: 1.5em; vertical-align:middle; \" + (!isVisible?(\" visibility:hidden\"):\"\") + \"' src='/assets/pointing.svg' />\" + modifiedSources[i];\r\n        }\r\n/*\r\n        if (0 <= sourceLine && sourceLine < sources.length) {\r\n            modifiedSources[sourceLine] = \"<img style='height: 1em' src='assets/pixel-perfect-right-arrow-pc.svg' />\" + modifiedSources[sourceLine];\r\n        }\r\n*/\r\n        sourceDisplay.innerHTML = \"<span style='white-space: pre; font-family: monospace;'>\"+modifiedSources.join('\\n')+\"</span>\";\r\n\r\n        let image = undefined;\r\n        if (sourceLine == 0) {\r\n            image = \"flowchart-output/begin.svg\";\r\n        } else if (sourceLine == 1) {\r\n            image = \"flowchart-output/test.svg\";\r\n        } else if (sourceLine == 2) {\r\n            image = \"flowchart-output/increment.svg\";\r\n        } else if (sourceLine == 4) {\r\n            image = \"flowchart-output/loop-body.svg\";\r\n        } else if (sourceLine == 6) {\r\n            image = \"flowchart-output/end.svg\";\r\n        }\r\n\r\n        if (image) {\r\n            flowchartDisplay.innerHTML = \"<img src = \\\"assets/\" + image + \"\\\" />\";\r\n        }\r\n\r\n        const emitCode = function (text, color = undefined) {\r\n            let colorTag = \"\";\r\n\r\n            if (color) {\r\n                colorTag = \"color: \" + color + \";\";\r\n            }\r\n\r\n            return \"<span style='\" + colorTag +\r\n                   \"white-space: pre; font-family: monospace;'>\" + text +\r\n                   \"</span>\";\r\n        }\r\n\r\n        const emitNormalText = function (text) {\r\n            return \"<span>\" + text + \"</span>\";\r\n        }\r\n\r\n        const newLine = \"<br>\";\r\n\r\n        variableDisplay.innerHTML = emitCode(\"i\") +\r\n                                    emitNormalText(\" is now \") +\r\n                                    emitCode(String(this.i));\r\n        if (sourceLine == 1) {\r\n            variableDisplay.innerHTML += newLine +\r\n                                         emitNormalText(\"Is \") +\r\n                                         emitCode(\"i < 3\") +\r\n                                         emitNormalText(\"? \")\r\n            if (this.i < 3) {\r\n                variableDisplay.innerHTML += emitCode(\"True\", \"green\") +\r\n                                             newLine +\r\n                                             emitNormalText(\"Loop body will run.\");\r\n            } else {\r\n                variableDisplay.innerHTML += emitCode(\"False\", \"red\") +\r\n                                             newLine +\r\n                                             emitNormalText(\"Loop will end.\");\r\n            }\r\n        }\r\n        if (sourceLine == 6) {\r\n            variableDisplay.innerHTML += newLine +\r\n                                         emitNormalText(\"Loop has finished.\");\r\n        }\r\n    }\r\n}\r\n\r\nconst ForLoopExampleFactory = {\r\n    run: function() {\r\n        let f = new ForLoopExample();\r\n        return f;\r\n    }\r\n}\r\n\r\nclass FlowChart {\r\n    constructor(nodes, edges, marker) {\r\n        this.nodes = nodes;\r\n        this.edges = edges;\r\n        this.marker = marker;\r\n        this.reset();\r\n    }\r\n\r\n    update() {\r\n     \r\n    }\r\n\r\n    reset() {\r\n    }\r\n}\r\n\r\nconst Boxes = {\r\n    box1: function () {\r\n      JXG.Options.board.minimizeReflow = 'none';\r\n      JXG.Options.layer['line'] =8;\r\n      JXG.Options.layer['point'] =14;\r\n      var brd2 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-6, 4, 5, -5],keepaspectratio: true, axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}});\r\n      brd2.suspendUpdate();\r\n//congruent triangle//\r\n      var t = brd2.create('turtle',[-6, -1], {strokeOpacity:1});\r\n      let example = new ForLoopExample(brd2.create('turtle',\r\n                                                   [-3, 0], \r\n                                                   {strokeOpacity:1}));\r\n      t.setPenSize(9);\r\n      //t.setPos(0,3);\r\n      t.setPenColor('purple');\r\n      t.right(90);\r\n      var alpha=0;\r\n      //var beta =0;\r\n      //var gamma=0;\r\n      var a =brd2.create('point', [-6, -1],{name:'Head', size:5, fillColor:'white', strokeColor:'black', fixed:true, label:{fontSize:18, offset:[-50, 0], cssStyle:'fontFamily:Oswald;'}});\r\n      var b =brd2.create('point', [0.6,-1.25],{fixed:true, name:'Tail', size:5, fillColor:'white', strokeColor:'black', label:{fontSize:18, cssStyle:'fontFamily:Oswald;'},visible:function(){if(alpha < 94){return false} else {return true}}});\r\n      //var tf = brd2.create('transform', [function(){return a.Y()-3+1}, function(){return a.Y()-3+1}], {type: 'scale'});\r\n      var run = function() {\r\n        if (alpha < 5) {  // stop after two rounds\r\n          t.forward(.6);\r\n          alpha += 1;\r\n          t.setPenColor('purple');\r\n        }\r\n        if ( alpha>=5 & alpha < 10) {  // stop after two rounds\r\n          t.forward(0.2);\r\n          t.left(8);\r\n          alpha += 1;\r\n          t.setPenColor('purple');\r\n        }\r\n        if ( alpha>=10 & alpha < 32) {  // stop after two rounds\r\n          t.forward(0.15);\r\n          t.right(12);\r\n          alpha += 1;\r\n          t.setPenColor('orange');\r\n        }\r\n        if ( alpha>=32 & alpha < 50) {  // stop after two rounds\r\n          t.forward(0.1)\r\n          alpha += 1;\r\n          t.setPenColor('red');\r\n        }\r\n        if ( alpha>=50 & alpha < 61) {  // stop after two rounds\r\n          t.forward(0.145);\r\n          t.left(12);\r\n          alpha += 1;\r\n          t.setPenColor('green');\r\n        }\r\n        if ( alpha==61) {\r\n          t.forward(0.09);\r\n          t.left(0);\r\n          alpha += 1;\r\n          t.setPenColor('purple');\r\n        }\r\n        if ( alpha>=62 & alpha < 71) {  // stop after two rounds\r\n          t.forward(0.15);\r\n          t.left(12.4);\r\n          alpha += 1;\r\n          t.setPenColor('green');\r\n        }\r\n        if ( alpha>=71 & alpha < 85) {  // stop after two rounds\r\n          t.forward(0.198);\r\n          t.right(1.4)\r\n          alpha += 1;\r\n          t.setPenColor('blue');\r\n        }\r\n        if (alpha ==85) {  // stop after two rounds\r\n          t.forward(0.08);\r\n          t.right(0)\r\n          alpha += 1;\r\n          t.setPenColor('orange');\r\n        }\r\n        if (alpha>=86 & alpha < 90) {  // stop after two rounds\r\n          t.forward(0.15);\r\n          alpha += 1;\r\n          t.pd();\r\n          t.setPenColor('blue');\r\n        }\r\n        if (alpha>=90 & alpha < 95) {  // stop after two rounds\r\n          t.forward(0.15);\r\n          alpha += 1;\r\n          t.setPenColor('blue');\r\n        }\r\n\t\tif(alpha <95){\r\n        setTimeout(run, 260);\r\n\t\t}\r\n      }\r\n      // let zz = brd2.create('input', [-1, -1, 's', 'label']);\r\n\r\n    let magicGraph = document.querySelector(\"#jxgbox1\");\r\n    let inputFields = magicGraph.querySelectorAll(\"input\");\r\n\r\n    var onEachPress = function(event) { res(); }\r\n\r\n    inputFields.forEach(function(field) {\r\n      field.addEventListener('change', onEachPress);\r\n    });\r\n\r\n      var hat =brd2.create('point', [-6.75, 4.], {visible:false});\r\n      var sailor = brd2.create('image',['/assets/sailor.svg', [-7.25, 3.], [1.5, 1.5]], {fixed:true});\r\n      var spe = brd2.create('image',['/assets/speaker.svg', [-6.8, 1.7], [0.75, 0.75]], {fixed:true, visible:function(){if(alpha > 0 && alpha < 17 || alpha > 20 && alpha < 40 || alpha >=45 && alpha < 60 || alpha >=64 && alpha <= 80 || alpha >80 && alpha<90 || alpha >92){return true } else {return false}}});\r\n      //var rope = brd2.create('image',['assets/fiber.svg', [-4.25, 3.], [0.5, 0.5]], {attractors:[hat],attractorDistance:1,  snatchDistance:2.});\r\n      //var sail = function(){if(rope.X()-hat.X()<=0.0001 && rope.Y()-hat.Y()<=0.0001){return run();}};\r\n      sailor.on('down', function(){t.clearScreen();t.setPos(-6, -1); t.right(90);alpha=0; t.setPenColor('purple'); t.init(-6,-1, 0);run();});\r\n      // brd2.create('text', [-5.6, 3.75, 'Tap on sailor Hank to start !'],{cssStyle:'fontFamily:Oswald;',fontSize:function(){return Math.round(18*brd2.canvasWidth/500.)}, parse:true,fixed:true});\r\n      //rope.on('down', function(){ct();});\r\n      //sailor.on('up', function(){ct();});\r\n      //sailor.on('up', function(){ct();});\r\n      //brd2.create('text', [-7, 2.5, function(){return sail()}]);\r\n\r\n      let prevArrow = brd2.create('image', ['/assets/pixel-perfect-left-arrow.svg',  [-5, -3], [1.0, 1.0]], {fixed:true, highlightFillOpacity:0.1});\r\n      // prevArrow.on('down', function(){});\r\n      prevArrow.on('up', function() { example.previous() });\r\n      let nextArrow = brd2.create('image', ['/assets/pixel-perfect-right-arrow.svg', [-3, -3], [1.0, 1.0]], {fixed:true, highlightFillColor:'#0000BB'});\r\n      nextArrow.on('up', function() { example.next() });\r\n\r\n      brd2.unsuspendUpdate();\r\n\t},\r\n}\r\n\r\n// export default Boxes;\r\nexport default ForLoopExampleFactory;\r\n","<template>\r\n  <div>\r\n    <h3 ref=\"ia\">\r\n      For Loop\r\n    </h3>\r\n    <p>\r\n      The <b>for</b> loop is a common construct in programming. It is used to\r\n      repeat an action a certain number of times.\r\n    </p>\r\n    <p>\r\n      In this MagicGraph, we will use a <b>for</b> loop to draw the path of a\r\n      turtle across a grid.\r\n    </p>\r\n    <p>\r\n      The syntax of the <b>for</b> loop varies based on the language. Examples of\r\n      for loops from Python, C and others are shown below. The examples print out\r\n      the numbers 0-9 (inclusive).\r\n    </p>\r\n    <p>\r\n      Python3:\r\n      <pre>\r\nfor i in range(0, 10):\r\n    print(i)\r\n      </pre>\r\n    </p>\r\n    <p>\r\n      C:\r\n      <pre>\r\nfor (int i = 0; i < 10; ++i) {\r\n    printf(\"%d\\n\", i);\r\n}\r\n      </pre>\r\n    </p>\r\n    <v-responsive>\r\n      <v-layout\r\n        justify-center\r\n        align-center\r\n        row\r\n        wrap\r\n      >\r\n        <v-flex\r\n          xs6\r\n          sm6\r\n          md6\r\n          lg6\r\n          xl6\r\n        >\r\n          <v-btn\r\n            large\r\n            depressed\r\n            @click=\"previous\"\n          >\r\n            <v-img\r\n              src=\"/assets/undo.svg\"\r\n              aspect-ratio=\"1\"\r\n              contain\r\n            />\r\n          </v-btn>\r\n          <v-btn\r\n            large\r\n            depressed\r\n            @click=\"next\"\n          >\r\n            <v-img\r\n              src=\"/assets/redo.svg\"\r\n              aspect-ratio=\"1\"\r\n              contain\r\n            />\r\n          </v-btn>\r\n          <h5>Source Code</h5>\r\n          <div\r\n            id=\"source-display\"\r\n          />\r\n          <br>\r\n          <h5>Code State Monitor</h5>\r\n          <div\r\n            id=\"variables\"\r\n          />\r\n          <br>\r\n        </v-flex>\r\n        <v-flex\r\n          xs6\r\n          sm6\r\n          md6\r\n          lg6\r\n          xl6\r\n          justify-center\r\n        >\r\n          <div\r\n            id=\"flowchart\"\r\n            style=\"justify-center\"\r\n          />\r\n        </v-flex>\r\n      </v-layout>\r\n    </v-responsive>\r\n  </div>\r\n</template>\r\n<script>\r\n// import Boxes from './Boxes.js'\r\nimport ForLoopExampleFactory from './Boxes.js'\r\nexport default {\r\n  name: 'ForLoop',\r\n  data() {\r\n    return {\r\n      ForLoopExample: undefined,\r\n    }\r\n  },\r\n  created: function () {\r\n    // Store mutations\r\n    let title = 'For Loop';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'For Loop', img:'/assets/number-1.svg', action: () => this.goto('ia')},\r\n      {title: 'MagicGraph: Programming a For Loop', 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 newPhys =true;\r\n    this.$store.commit('navigation/replacePhys', newPhys);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    // Boxes.box1();\r\n    this.ForLoopExample = ForLoopExampleFactory.run();\r\n  },\r\n  methods: {\r\n    next: function () {\r\n      this.ForLoopExample.next();\r\n    },\r\n    previous: function () {\r\n      this.ForLoopExample.previous();\r\n    },\r\n  },\r\n  metaInfo() {\r\n  return{ title: 'For Loop',\r\n          titleTemplate: '%s - Learn interactively',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {name: 'description', content: 'Learn the basic structure of a For Loop.'}\r\n                ]\r\n        }\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</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!./ForLoop.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!./ForLoop.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ForLoop.vue?vue&type=template&id=00a4b63e&\"\nimport script from \"./ForLoop.vue?vue&type=script&lang=js&\"\nexport * from \"./ForLoop.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ForLoop.vue?vue&type=style&index=0&id=00a4b63e&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","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);\n  }\n}\nexport default function _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  Object.defineProperty(Constructor, \"prototype\", {\n    writable: false\n  });\n  return Constructor;\n}","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!./ForLoop.vue?vue&type=style&index=0&id=00a4b63e&prod&lang=scss&\"","export default function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}"],"sourceRoot":""}