{
    "componentChunkName": "component---src-components-post-js",
    "path": "/blog/2014/02/26/learnable-programming-in-thailand",
    "result": {"data":{"mdx":{"id":"6a294535-1f75-57fc-a3fa-5561f11ba6d1","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Learnable Programming in Thailand\",\n  \"date\": \"2014-02-26T00:00:00.000Z\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"figure\", {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"597px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ab9d5a4167ef87d125d640d67eca1477/44a94/LPiT_title_image1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"102.28571428571429%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC9ElEQVQ4y62S7U8TWRSH5w/eyH7QbBSyShYMsLiKsFREI+7KFqwsbhu0UgrUlraApa/TmZZ23to702Eqnbf7NsayGcrGNfpBEp+cL+ckT+49v3sZQsjZ5en3+xhjZiD3+/1LmB/7n8nU8zpAFet8s87WGyx/XOUaPNc4rtYbLNfguEatWhdrDU1uQeh+Opl6nt0zK4mt/fWHqZfjL9evLoR/nHo1+nMkcG05NDTz6sZo7M5PG6Hh8Lt7O9WlHXYj0ZHkjwPZMk3hMNOMB8VMoJSbjOVHg8XJB5WnE5no9bXMrYfl+d/4f24f5Wd4PsApS2V1LSduZ087OqGUUSVRSceVvWfC4ex+bjxS/OVZZfb3wsrYdmz4r+xEgH08Vd6cLhzM8MU5VnhU1p4XwWZO4+sQIabdbLQycTn1h5CbzebHI6WxP9n5ufzq2HZ8eDk7Fag+mS5vTRfP5WrzUUVbLYE3OZWruRAyXV0X0gk5uSIdBo7yk9HSWLByb6ESnEjGRkL7txfZxbtc9NdCYa7OBjh5qdJZKylbB7okY0L8tDuiUIquFSL3D6I3I2+GFmJDk4nx4c0nV5bDP9zdHbmZnr0aj47slO5kjxf3ai8S4lGJEp+LpzI0rXKw9y4RSe6ubiaC4eSLv99uhHZ3Vl6nVtdT4VAq9nw3v5GppY5AU/Q87+zsDCHEfIcf9v/5eX2t+VK2LItS6nneh8vgeZ4v25blui7GGF4G13X9wLon709O9G63izF2XddxHPdrIIQgHBSEEJ3PINMWAJBVQRTbACAEKaWEUEwIxpgQggkm9ANBumWkrG76VEv19LRpZHp60u4pjGPZp4bZkltNQeh0NMMwFElSAZBkqQ2ApoK2ouhaWxF5DTRlqebYXYx60DEcx2QopbZtAQBUVTVNEyPsGCfIcRBGCGGKsdM1kO0gyyYuxIj0P6VNGMMwLNMyez7Ix78uwhj9x0U7KH9zjGHnvZbsnbYYCAd7+uBvgBBKsO1aCiHOv4MNJV28GnA8AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"The Choc editor with my Thai annotations added\",\n    \"title\": \"The Choc editor with my Thai annotations added\",\n    \"src\": \"/static/ab9d5a4167ef87d125d640d67eca1477/44a94/LPiT_title_image1.png\",\n    \"srcSet\": [\"/static/ab9d5a4167ef87d125d640d67eca1477/f73d0/LPiT_title_image1.png 175w\", \"/static/ab9d5a4167ef87d125d640d67eca1477/b4640/LPiT_title_image1.png 350w\", \"/static/ab9d5a4167ef87d125d640d67eca1477/44a94/LPiT_title_image1.png 597w\"],\n    \"sizes\": \"(max-width: 597px) 100vw, 597px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"The Choc editor with my Thai annotations added\"), \"\\n  \"), mdx(\"p\", null, \"Over the past year, I\\u2019ve been fortunate enough to have a rather interesting and fun job: teaching C to 11th grade students in Thailand. It was also during this time period that I came across Bret Victor\\u2019s article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://worrydream.com/LearnableProgramming\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Learnable Programming\")), \". I found Victor\\u2019s approach to visualizing systems very useful for teaching students whose native language wasn\\u2019t English.\"), mdx(\"h2\", {\n    \"id\": \"how-i-got-here\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#how-i-got-here\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"How I got here\"), mdx(\"p\", null, \"My university has a relationship with a couple of Thai private schools. Every year they send a few dozen graduates to Thailand to teach English for a year. After being invited back for a second year, I realized that there was an 11th grade programming course available, and asked if I could be placed there instead of an English reading/math/science course.\"), mdx(\"p\", null, \"My new co-teacher had been teaching the class for a couple years already. She was also the coach for the school\\u2019s Robotics team (as well as the school\\u2019s sysadmin), and thus wasn\\u2019t available to teach for much of the first couple months. This left me in charge of creating lesson plans.\"), mdx(\"h2\", {\n    \"id\": \"teaching-c-as-a-foreign-language\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#teaching-c-as-a-foreign-language\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Teaching C as a Foreign Language\"), mdx(\"p\", null, \"I had two big big problems when making lesson plans. One was that the curriculum\\u2019s language was C (a topic for another day). The other was that I had to teach in English.\"), mdx(\"p\", null, \"Programming is hard enough when learned in one\\u2019s native language. Although my students had been learning English since 1st grade, it still took effort to parse what I was saying. It\\u2019s unfair to expect students to gain an intuition about programming while being hampered by both foreign language lessons and a programming language with unintuitive syntax.\"), mdx(\"p\", null, \"What I needed was a way for my students to understand my lessons, even if they didn\\u2019t understand me. I began looking for ways to visualize the ideas in my lessons.\"), mdx(\"p\", null, \"My first attempts at doing this involved making a reference website with example programs and animations showing their execution. These were helpful for some students, but they were a crude solution compared to the tools I began using in my second semester.\"), mdx(\"h2\", {\n    \"id\": \"fresh-air\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#fresh-air\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Fresh Air\"), mdx(\"p\", null, \"At the end of the first semester, fullstack.io released \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://fullstack.io/choc\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Choc\"), \", a browser-based coding environment based on Bret Victor\\u2019s \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://worrydream.com/LearnableProgramming\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Learnable Programming\")), \". Choc\\u2019s goal is to help programmers understand what their code is doing. It achieves this by using interactive numbers, inline annotations, timelines and the ability to \\\"scrub through\\\" the execution of a piece of code.\"), mdx(\"p\", null, \"This was my first time hearing about the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Learnable Programming\"), \" article, and I saw an immediate connection between the problems I was having reaching my students, and the ideas Bret Victor was discussing. If you haven\\u2019t read the article, I\\u2019d advise you to at least read the introduction before going forward. This article turned my brain upside down.\"), mdx(\"p\", null, \"However, now I had a new problem: Many of the tools being built around this philosophy were written for Javascript. The school\\u2019s curriculum was based on C.\"), mdx(\"p\", null, \"After some talks with my co-teacher (and a demo of Choc running with Thai annotations) we decided to compromise: I would start by teaching a few weeks of Javascript in order to make use of these tools. I would cover basic control structures like if-else, loops and functions (things that look syntactically similar in C). After that we would transition to C, teach about types, and move on from there.\"), mdx(\"p\", null, \"Around this time I also found \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://jsdares.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"jsdares\"), \", a series of coding challenges whose environment was similarly inspired. jsdares also has many of Choc\\u2019s visualization features, but also takes cues from Seymour Papert\\u2019s work with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.youtube.com/watch?v=BTd3N5Oj2jk\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"the LOGO Turtle\"), \". Students learn to program by using simple commands to guide a robot. They can reason about how the robot should move by thinking about how they would move. This allows them to solve problems using reasoning skills they already have.\"), mdx(\"p\", null, \"I used the first track of dares on jsdares\\u2019 homepage as the basis for my first lesson (while I was getting Choc set up). I would give each dare a short introduction, and then have my students tell me what to do next. We would work through the dares on the projector as a class, although many students went ahead and solved the problems on their own.\"), mdx(\"p\", null, \"The difference from my previous lessons was staggering. Students were \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"volunteering\"), \" to answer questions. When they made mistakes, the live feedback made it clear \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"why\"), \" something was an error. Rather than popping up a cryptic error message, the environment simply showed what was happening, making it easier to tell where things went off the rails.\"), mdx(\"figure\", {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"700px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e4dbb8af7b38692cfd80a4c04689808b/4c487/LPiT_jsdares_image.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.28571428571429%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAACRklEQVQoz2WQbU/TUBTH94lGHzOZiSRuzG6ltVa3Ptzb0m6jMdGYQDKBFYbICxOj+wAaiL4hKiwxgkaImS8kymKIkoHs3nZkPAzmtzBlOI3+ck7yf3F+Jzkn5Iw4AOqizEs3hGsZQcoIV9N8WpE0VRmSkipIg2E1KEsxbTWXy1mWZZ+Rz+dDzogjKxLIK6V7pamSW5qdnpu7P1q8M1Iwx0bH4ldiiaF4ghvskUgkBgYGRFF0HCdkW9n8Lbuy9uKg1dpv7vu+3znp1HY+v/tWWXmzSrBh+lKY7ifI31AUFQ6HeZ4PZMMw3KLb9JuehxFCO7s7CDUwwift06VXS8wFMnKZZC/SDM10YVmWIIhzGUJjYmLC95uHrSOMMUb4sHWEMGq3T1Zer5IUyURohqV7MAxDEEQqlQpuBgC4Rffrdm299hYj78vWRhAauI63Hz19QJEUTdF/05NzuVxI1/XipFutrS9+XPCx/2FzbbE672F/s75ReHz7H7MnJ5PJbDYbyIW7hb0fe639A4ywj5pBwF6n/XP55TJFUV3jf9m27ZCmaePj4wij09POrlevbr0/PjquN77XGp8qlUr3vecrzmBZliTJcxlCaNt2uVx+tvB8rjyTdbX5JwszD6duzg5PT02zLBuN9kej0Ugk0tvS19fHcZxlWSHTNGVZjsVi8cF4KskLvMhxXCqZEnlREARFVQAAQNdVVb1+hizLkiRlMhnDMIJvQxg0hBBAoAMdGoZumJph6nBY0WBaBWlV1wA0jT8EwwD8ApVMMIlAV9n8AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"This was one of my favorites, each class solved it in a different way.\",\n    \"title\": \"This was one of my favorites, each class solved it in a different way.\",\n    \"src\": \"/static/e4dbb8af7b38692cfd80a4c04689808b/f847a/LPiT_jsdares_image.png\",\n    \"srcSet\": [\"/static/e4dbb8af7b38692cfd80a4c04689808b/f73d0/LPiT_jsdares_image.png 175w\", \"/static/e4dbb8af7b38692cfd80a4c04689808b/b4640/LPiT_jsdares_image.png 350w\", \"/static/e4dbb8af7b38692cfd80a4c04689808b/f847a/LPiT_jsdares_image.png 700w\", \"/static/e4dbb8af7b38692cfd80a4c04689808b/a94c1/LPiT_jsdares_image.png 1050w\", \"/static/e4dbb8af7b38692cfd80a4c04689808b/4c487/LPiT_jsdares_image.png 1280w\"],\n    \"sizes\": \"(max-width: 700px) 100vw, 700px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"This was one of my favorites, each class solved it in a different way.\"), \"\\n  \"), mdx(\"p\", null, \"jsdares also gets points for having a really well thought out learning curve. The first time I ran through the challenges I thought that there were too many \\\"easy\\\" ones in the beginning. The classroom proved me wrong: each dare builds on the one before it, and concepts are introduced and used in a really well thought out pattern.\"), mdx(\"p\", null, \"When we got around to composing functions, the students not only understood function syntax, but also \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"why we use functions\"), \". Many students rushed ahead, finishing the challenges and doing the challenges I didn\\u2019t get around to teaching. When we finished, they played around with the Breakout clone on the front page, changing the size of the bat and the blocks to make the game look how they wanted (one kid even got the bat to move underneath the ball so that the game played itself).\"), mdx(\"p\", null, \"The next week I had set up Choc \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://sg-study-c.appspot.com/choc\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"on my website\"), \" and localized the annotations to Thai to make them more helpful. My first lesson involved teaching steps of abstraction, using an example I pretty much ripped straight out of Victor\\u2019s article:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"I\\u2019d give them a house made of many parts, and tell them to move it around.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"I\\u2019d have them use variables to make it easier to move the house as a single unit.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"I had them abstract the code into a function so they could make more than one house.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"I had them use a loop to make 10 houses in a row.\")), mdx(\"p\", null, \"Once again I found that the students were more inclined to tinker with the code I gave them. They completed the lesson just fine, but when I came around to look at their work, many of them had houses with huge roofs and pink windows. These were the kinds of kids who would normally play flash games while I was teaching; I consider this variety of goofing off to be a significant improvement.\"), mdx(\"figure\", {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"700px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/829c9c169c36a99d980cc8a6cd75710e/4c487/LPiT_choc_image.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.28571428571429%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAABo0lEQVQoz3WSvW4VMRCF70tS09DxAFCkQRShgYoGRTS8AFEqBKJDSDQ0hO4SFJG7P97xv9f2eHZttOuwl0jwVbY0R3NmzuxijCGE+IcQAhGllJTSUilrrRACEcu/2AGA4BwAuBBCSOAghAghIGJKhIhEVP7DzjmHiN6HrfPoKtY55ZwLIWzV88pRPPTAGBsGboypmrUnIgbE0XuPiNM04UrOpeRCK4i441xyoYCBlEZbb6z3AYnyPJdcSsSUUiql5EVXPn//+Onbh9qWiHbAriT85N1e8murG6sbo35RHFKEMDKrW8TF9vsvF2cXL06fP33y7OQoHro9sB+i2wu41urG6IPVhzC2i9gPRrcYYynl9as3jx8+OrS8vWmqi7UzV10PUmrJpdbOjdG5YF2YpqUmIlXbo7VD07w8P728+lqnWMRrTIOSQnFujB5vcXVPwfsqLqWAdg/u3T9/+66ufRG3bSuEiDHO8zzdZZ7nGOOWM00TNI137jhz13UAUIvSXYioXkvOeUu4vnPOS1QDY33fM8ZuL8PauG5oo1qovojo7+9vKdeqh6hb6P0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Choc’s annotations were way better at explaining execution than I was.\",\n    \"title\": \"Choc’s annotations were way better at explaining execution than I was.\",\n    \"src\": \"/static/829c9c169c36a99d980cc8a6cd75710e/f847a/LPiT_choc_image.png\",\n    \"srcSet\": [\"/static/829c9c169c36a99d980cc8a6cd75710e/f73d0/LPiT_choc_image.png 175w\", \"/static/829c9c169c36a99d980cc8a6cd75710e/b4640/LPiT_choc_image.png 350w\", \"/static/829c9c169c36a99d980cc8a6cd75710e/f847a/LPiT_choc_image.png 700w\", \"/static/829c9c169c36a99d980cc8a6cd75710e/a94c1/LPiT_choc_image.png 1050w\", \"/static/829c9c169c36a99d980cc8a6cd75710e/4c487/LPiT_choc_image.png 1280w\"],\n    \"sizes\": \"(max-width: 700px) 100vw, 700px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Choc\\u2019s annotations were way better at explaining execution than I was.\"), \"\\n  \"), mdx(\"h2\", {\n    \"id\": \"the-console-problem\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#the-console-problem\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"The console problem\"), mdx(\"p\", null, \"I did one more lesson each with jsdares and Choc. In these lessons, I tried using a pseudo-terminal to get my students used to the idea of writing to a console. While these lessons were still effective, I\\u2019ve come to realize that the console has serious limitations for teaching.\"), mdx(\"p\", null, \"We generally use the console for teaching algorithms, like this one:\"), mdx(\"p\", null, \"\\\"Input a list of numbers, output the maximum of the numbers.\\\"\"), mdx(\"p\", null, \"This idea can be hard to represent visually, so we generally go for the more \\\"pure\\\" symbolic approach: dealing with the numbers themselves with no distractions.\"), mdx(\"p\", null, \"However, the console is actually ill-suited to showing state. In a drawing, we can see each item being drawn, piece by piece. In the example above, we don\\u2019t see the array being iterated. We can\\u2019t see the state of the array, the iterator value and the \\\"current max value\\\" at any point in time or across time. We only see the things we opt to print out.\"), mdx(\"figure\", {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"700px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7409f192b8f84b418e004d6880eabc1f/275e0/LPiT_inventing_image.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.857142857142854%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABsElEQVQoz43Qy47aMBQGYN7/IXgGNkFFChexYAGJ2MCgAJkohaCJh8SOE8f344owZUo7rfovvLD9nePjXrSL4ih+2W63200U7aNDvI+T/eF4Op3OXY6Hw273Eu+jNEm+p2maJMnrK8rzwWDQsxKKd/p2JbikUsq6aZW21oJzDuC2lkWZpikpqFUKjDFKKSmcc9PptAfGXVFVkIoQnOeIYGx0R50DCwDAOceECGEAnL3tOGvtB3bOtYQRUtGmQQjRmgohKKWci66CIwQnaVoRhjEti5o1EuAXLBt5ycq8JFl2PsZxjlBV1Q+MMUYISSFaxnjb6m6qT6yVLq4FQvlbnlPauOcYoxljShmtjFLGGHjCohXlO7lklyw75zmq6/ohoctNAFgL3cy/YS5JUdV1zXmrlL5/8gO7P/KEpZCMsLpsKKX3g//FYKFtuDHWuS/ugQOjjeSqFdr9LPSJjbGsatnNG/tVJJdN1V4x01p1Y1uttXNuPB73/va2f+TeeTab9dbr9Wq1CoIgDMP5fO553mg0Gg6Hvu9PJhPf9z3P+9ZlsViEYRgEwXK53Gw2/X7/B1bK3DR7c0/sAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Still from Bret Victor’s talk \\\"Inventing on Principle\\\"\",\n    \"title\": \"Still from Bret Victor’s talk \\\"Inventing on Principle\\\"\",\n    \"src\": \"/static/7409f192b8f84b418e004d6880eabc1f/f847a/LPiT_inventing_image.png\",\n    \"srcSet\": [\"/static/7409f192b8f84b418e004d6880eabc1f/f73d0/LPiT_inventing_image.png 175w\", \"/static/7409f192b8f84b418e004d6880eabc1f/b4640/LPiT_inventing_image.png 350w\", \"/static/7409f192b8f84b418e004d6880eabc1f/f847a/LPiT_inventing_image.png 700w\", \"/static/7409f192b8f84b418e004d6880eabc1f/275e0/LPiT_inventing_image.png 936w\"],\n    \"sizes\": \"(max-width: 700px) 100vw, 700px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Still from Bret Victor\\u2019s talk \\\"Inventing on Principle\\\"\"), \"\\n  \"), mdx(\"p\", null, \"Bret Victor\\u2019s \\\"Building Binary Search\\\" demo in his talk \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://vimeo.com/36579366\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Inventing on Principle\")), \" is a good example of showing state across time. Both of the tools I mentioned have methods of showing state in graphical contexts, I think this kind of feature could be developed for either of them fairly easily.\"), mdx(\"p\", null, \"I wish I could\\u2019ve had another few weeks to write a plugin and a new set of exercises, but the midterm was coming up fast and I had promised to at least do a \\\"Hello World\\\" program in C beforehand.\"), mdx(\"h2\", {\n    \"id\": \"back-to-normal\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#back-to-normal\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Back to normal\"), mdx(\"p\", null, \"The transition to C was admittedly rough. I overestimated the ability of my students to switch context so quickly, and paid for my hubris by having to review some of the topics I\\u2019d already taught. (It also didn\\u2019t help that the protests in Bangkok were starting around this time, and school was cancelled for a week and a half.)\"), mdx(\"p\", null, \"The mood in the classroom was different. Many more students were choosing to goof off on the internet, instead of learning the magical art of format string I/O. While I didn\\u2019t have any of the powerful tools from the first half of the semester, I did take some ideas from jsdares\\u2019 lesson planning. I had the students build many small programs each class instead of one big one, and had them use constructs (like loops, functions, etc.) before making them choose which one would be the right tool for the job.\"), mdx(\"h2\", {\n    \"id\": \"conclusion\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#conclusion\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Conclusion\"), mdx(\"p\", null, \"Although the second half of the semester was rough, I still stand by the tools that I used. During the weeks where I used these tools, I saw students display a kind of enthusiasm for programming that I hadn\\u2019t seen before and haven\\u2019t seen since.\"), mdx(\"p\", null, \"These tools are open source projects, and I\\u2019d like to see both of them succeed. I will now plug them mercilessly.\"), mdx(\"p\", null, \"For teachers who want a tool with minimal configuration and some example lesson plans, I recommend jsdares. The website has an account system, making it easy to assign work and track students\\u2019 progress. It was developed as part of a Master\\u2019s thesis on education, and the emphasis on practical teaching strategies shows.\"), mdx(\"p\", null, \"Choc takes a bit of setup, but is a lot more extensible. If you\\u2019re familiar with the modern JS ecosystem and can get it running on your website, you\\u2019ll find that you can hook Choc up to almost anything. The demo site let\\u2019s you use Choc to edit a running instance of the Minecraft clone VoxelJS. There is a world of untapped magic in hooking this thing up to D3.js. If you\\u2019re familiar with CodeMirror, you can also customize the editor to look however you want.\"), mdx(\"p\", null, \"This is an exciting time to be developing tools. Even though my current teaching post is coming to an end, I\\u2019ve realized that this is an area I\\u2019m going to be interested in for a long time.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Learnable Programming in Thailand","date":"2014-02-26T00:00:00.000Z"}}},"pageContext":{"id":"6a294535-1f75-57fc-a3fa-5561f11ba6d1"}},
    "staticQueryHashes": ["1831480344","3649515864"]}