<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[The Osmosian Order of Plain English Programmers Welcomes You]]></provider_name><provider_url><![CDATA[http://osmosianplainenglishprogramming.blog]]></provider_url><author_name><![CDATA[gerryrzeppa]]></author_name><author_url><![CDATA[https://osmosianplainenglishprogramming.blog/author/gerryrzeppa/]]></author_url><title><![CDATA[Teaching Kids to&nbsp;Program]]></title><type><![CDATA[link]]></type><html><![CDATA[<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
<div class="entry-content">
<p>We take a different approach to teaching kids how to program here at the Osmosian Order of Plain English Programmers.</p>
<p><strong>The Interface</strong></p>
<p>The first thing we do is remove all unnecessary and distracting clutter. This, for example, is what our full-screen Integrated Development Environment (IDE) looks like:</p>
<p><img loading="lazy" class="alignnone size-full wp-image-312413" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/interface-1.jpg" alt="" width="768" height="614" /></p>
<p>Alphabetical menus and a status message field at the top, work area in the middle, and tabs at the bottom. No window borders, no widgets, no icons, no tool bars, and no palettes. We thus encourage the student to focus on the content in the foreground, not the background (which we leave in the background where it belongs). Whoops! Almost forgot. No scroll bars. Ever. The right mouse button is used to shove content around — horizontally, vertically, and/or diagonally — and an Incremental Find facility is used to “leap” in large files (ala the late, great Jef Raskin). The Home, End, Page Up, Page Down and Arrow keys are also used, intuitively, to change the focus as necessary.</p>
<p>The file system is exposed to the programmer using full path names. This is the only view the programmer is given: there are no icons, and no alternate views in “open” and “save as” dialog boxes (because we don’t use or need dialog boxes). The students are thus introduced to the exact syntax that they will need to reference files in their programs, and they only have to maintain a single mental image of the file system in their budding brains.</p>
<p>Our student’s applications are also clutter-free. When they clear the screen, it is erased to black, top-to-bottom and side-to-side. Their applications are real, native programs, with access to the whole screen (and computer), so their dreams can come to life <em>exactly </em>as they imagined them. No sandboxes.</p>
<p><strong>The Language</strong></p>
<p>The second difference in our approach is that we program in natural, English-language sentences. Our “keywords” are articles (like <em>a</em>, <em>an</em>, <em>the</em> and <em>some</em>), and prepositions (like <em>in</em>, <em>of</em> and <em>with, </em>etc) rather than obscure words like CONST and EVAL and INSTANCEOF (which, technically, aren’t real words at all).</p>
<p>We also make a point of concentrating on <em>semantics </em>(WHAT is being said) rather than <em>syntax</em> (HOW it is being said). Routines in Plain English typically have multiple headers so they can be called in various ways. This routine, for example…</p>
<p><span style="color:#00ccff;">To erase the screen;</span><br />
<span style="color:#00ccff;"> To blank out the screen;</span><br />
<span style="color:#00ccff;"> To wipe off the screen;</span><br />
<span style="color:#00ccff;"> To clear the screen:</span><br />
<span style="color:#00ccff;"> Unmask everything.</span><br />
<span style="color:#00ccff;"> Draw the screen&#8217;s box with the black color and the black color.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span><br />
<span style="color:#00ccff;"> Put the screen&#8217;s box into the context&#8217;s box.</span></p>
<p>…can be called four different ways:</p>
<p><span style="color:#00ccff;">Erase the screen.</span><br />
<span style="color:#00ccff;"> Blank out the screen.</span><br />
<span style="color:#00ccff;"> Wipe off the screen.</span><br />
<span style="color:#00ccff;"> Clear the screen.</span></p>
<p>The skilled teacher, familiar with the way his students normally speak, typically provides pre-coded libraries of commonly used routines with headers in the “local dialect.” Students are also encouraged to teach the compiler to speak (and think) as they do, by adding headers to existing libraries, and by developing libraries of their own.</p>
<p><strong>The Depth</strong></p>
<p>The third difference in our approach is that we we use the same interface and language for both novices and experts alike. This <em>is </em>a system for kids, but it isn’t <em>just </em>a system for kids. We used this very interface and language ourselves to <em>conveniently </em>and <em>efficiently </em>create the whole shebang: uncluttered desktop, simplified file manager, elegant text editor, handy hexadecimal dumper, native-code-generating compiler/linker, and wysiwyg page layout facility for documentation and other creative writing and drawing tasks. So when the student is ready to dig deeper, he can simply dig. He doesn’t have to invest in a new shovel or find another plot of land. It’s all in one place, from “Hello, World!” to the machine code.</p>
<p><strong>Hello World!</strong></p>
<p>Speaking of “Hello, World!”, this is a version we often use to illustrate the fundamental concepts of sequence, conditional statements, and looping. This is what we tell the students to type in:</p>
<p><span style="color:#00ccff;">To run:</span><br />
<span style="color:#00ccff;"> Start up.</span><br />
<span style="color:#00ccff;"> Clear the screen.</span><br />
<span style="color:#00ccff;"> Use medium letters. Use the fat pen.</span><br />
<span style="color:#00ccff;"> Pick a really dark color.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Start in the center of the screen.</span><br />
<span style="color:#00ccff;"> Turn left 1/32 of the way.</span><br />
<span style="color:#00ccff;"> Turn right. Move 2 inches. Turn left.</span><br />
<span style="color:#00ccff;"> Write &#8220;HELLO WORLD&#8221;.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span><br />
<span style="color:#00ccff;"> Lighten the current color about 20 percent.</span><br />
<span style="color:#00ccff;"> Add 1 to a count. If the count is 32, break.</span><br />
<span style="color:#00ccff;"> Repeat.</span><br />
<span style="color:#00ccff;"> Wait for the escape key.</span><br />
<span style="color:#00ccff;"> Shut down.</span></p>
<p>And this is what they see on the screen when they run their programs (using the Run command, which is conveniently and intuitively located under the “R” menu):</p>
<p><img loading="lazy" class="alignnone size-large wp-image-312445" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/hello-world-1024x819.jpg" alt="" width="665" height="532" /></p>
<p><strong>Desert Landscapes</strong></p>
<p>Programming is a textual, left-brain kind of activity. But students learn best when both sides of their brains are engaged. So most of our introductory exercises produce inspiring, graphical outputs to enliven both hemispheres and the corpus callosum that connects them. Here’s another sample program:</p>
<p><span style="color:#00ccff;">To run:</span><br />
<span style="color:#00ccff;"> Start up.</span><br />
<span style="color:#00ccff;"> Draw a desert landscape.</span><br />
<span style="color:#00ccff;"> Wait for the escape key.</span><br />
<span style="color:#00ccff;"> Shut down.</span></p>
<p><span style="color:#00ccff;">To draw a desert landscape:</span><br />
<span style="color:#00ccff;"> Clear the screen.</span><br />
<span style="color:#00ccff;"> Draw the sky.</span><br />
<span style="color:#00ccff;"> Draw the sun.</span><br />
<span style="color:#00ccff;"> Draw the birds.</span><br />
<span style="color:#00ccff;"> Draw the sand.</span></p>
<p><span style="color:#00ccff;">To draw the sky:</span><br />
<span style="color:#00ccff;"> Use the lightest sky blue pen.</span><br />
<span style="color:#00ccff;"> Imagine a line across the middle of the screen&#8217;s box.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Draw the line.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span><br />
<span style="color:#00ccff;"> Darken the current color about 3 percent.</span><br />
<span style="color:#00ccff;"> Move the line up 1 pixel.</span><br />
<span style="color:#00ccff;"> If the line is above the screen&#8217;s box&#8217;s top, break.</span><br />
<span style="color:#00ccff;"> Repeat.</span></p>
<p><span style="color:#00ccff;">To draw the sun:</span><br />
<span style="color:#00ccff;"> Pick a spot anywhere in the top middle 1/4 of the screen&#8217;s box.</span><br />
<span style="color:#00ccff;"> Make a dot between 1/4 inch and 1 inch wide.</span><br />
<span style="color:#00ccff;"> Center the dot on the spot.</span><br />
<span style="color:#00ccff;"> Draw the dot with the lightest yellow color.</span></p>
<p><span style="color:#00ccff;">To draw the birds:</span><br />
<span style="color:#00ccff;"> Pick a spot in the screen&#8217;s box about 1 inch above the middle.</span><br />
<span style="color:#00ccff;"> Use the black pen.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Move to the spot.</span><br />
<span style="color:#00ccff;"> Face east.</span><br />
<span style="color:#00ccff;"> Pick a width between 1/8 inch and 1/4 inch.</span><br />
<span style="color:#00ccff;"> Draw a quarter circle given the width.</span><br />
<span style="color:#00ccff;"> Turn around.</span><br />
<span style="color:#00ccff;"> Draw another quarter circle given the width.</span><br />
<span style="color:#00ccff;"> Move the spot about 1/2 inch in any direction.</span><br />
<span style="color:#00ccff;"> Add 1 to a count. If the count is 3, break.</span><br />
<span style="color:#00ccff;"> Repeat.</span></p>
<p><span style="color:#00ccff;">To draw the sand:</span><br />
<span style="color:#00ccff;"> Use the lightest orange pen.</span><br />
<span style="color:#00ccff;"> Imagine a line across the middle of the screen&#8217;s box.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Draw the line.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span><br />
<span style="color:#00ccff;"> Darken the current color about 3 percent.</span><br />
<span style="color:#00ccff;"> Move the line down 1 pixel.</span><br />
<span style="color:#00ccff;"> If the line is below the screen&#8217;s box&#8217;s bottom, break.</span><br />
<span style="color:#00ccff;"> Repeat.</span></p>
<p>Note the seamless integration of vector graphics and turtle graphics. Here’s the kind of artwork that program produces:</p>
<p><img loading="lazy" class="alignnone size-large wp-image-312515" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/desert-landscape-1024x819.jpg" alt="" width="665" height="532" /></p>
<p><strong>Optical Illusions</strong></p>
<p>Optical illusions are always fun and inspiring. This is one of my personal favorites:</p>
<p><span style="color:#00ccff;">To run:</span><br />
<span style="color:#00ccff;"> Start up.</span><br />
<span style="color:#00ccff;"> Draw the crooked line illusion.</span><br />
<span style="color:#00ccff;"> Wait for the escape key.</span><br />
<span style="color:#00ccff;"> Shut down.</span></p>
<p><span style="color:#00ccff;">To draw the crooked line illusion:</span><br />
<span style="color:#00ccff;"> Clear the screen.</span><br />
<span style="color:#00ccff;"> Use the fat pen.</span><br />
<span style="color:#00ccff;"> Imagine a big box 4 inches smaller than the screen&#8217;s box.</span><br />
<span style="color:#00ccff;"> Imagine a line across the top of the big box.</span><br />
<span style="color:#00ccff;"> Imagine a small box 1/2 inch by 1/2 inch.</span><br />
<span style="color:#00ccff;"> Move the small box to the top left corner of the big box.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Draw and fill the small box with the white color.</span><br />
<span style="color:#00ccff;"> Move the small box right 1 inch.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span><br />
<span style="color:#00ccff;"> If the small box is still in the big box, repeat.</span><br />
<span style="color:#00ccff;"> Move the small box close to the left side of the big box.</span><br />
<span style="color:#00ccff;"> Draw the line with the red color.</span><br />
<span style="color:#00ccff;"> Move the line down 1/2 inch.</span><br />
<span style="color:#00ccff;"> Move the small box down 1/2 inch.</span><br />
<span style="color:#00ccff;"> If the small box is still in the big box, repeat.</span><br />
<span style="color:#00ccff;"> Draw the line with the red color.</span><br />
<span style="color:#00ccff;"> Use medium letters.</span><br />
<span style="color:#00ccff;"> Write &#8220;THE RED LINES ARE ALL STRAIGHT AND PARALLEL.&#8221;</span><br />
<span style="color:#00ccff;"> with the gold pen at the bottom of the screen&#8217;s box.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span></p>
<p>You’re going to need a ruler to check out this result:</p>
<p><img loading="lazy" class="alignnone size-large wp-image-312548" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/illusion-3-1024x819.jpg" alt="" width="665" height="532" /></p>
<p><strong>Conclusion</strong></p>
<p>It is our belief that the programmer of the future will program his machines much as we “program” an Amazon Echo or an Apple Siri or a Google Home or a Microsoft Cortana today. When, for example, my wife says:</p>
<p><span style="color:#00ccff;">&#8220;Echo, set a timer for 12 minutes. Then play a song by the Beatles.&#8221;</span></p>
<p>She’s writing and executing a short program, in English. Now if the devices listed above were themselves programmed in English, well, then we’d really be on the right track. Our Plain English prototype is evidence of the feasibility of such an approach. After all, if we can conveniently write a complete and efficient Compiler and IDE in English, why not an automated assistant? This is the 21st century, last I checked. Why shouldn’t both users <em>and </em>programmers be speaking to our machines in the same language we use to speak to each other?</p>
</div>
]]></html><thumbnail_url><![CDATA[https://i1.wp.com/cdncontribute.geeksforgeeks.org/wp-content/uploads/interface-1.jpg?fit=440%2C330&ssl=1]]></thumbnail_url><thumbnail_width><![CDATA[413]]></thumbnail_width><thumbnail_height><![CDATA[330]]></thumbnail_height></oembed>