simple13

Author: karlvr

src/simple13.html

@@ -0,0 +1,75 @@
+---
+layout: base.html
+title: Simple HTML - Programs and puzzles
+---
+<section class="side-by-side">
+	<canvas class="game right" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+	<div>
+	<article>
+		<h1>Programs and puzzles</h1>
+
+<p>
+	Here and on the next few pages, there are
+	programs to try and puzzles to solve.
+	They all involve BASIC commands
+	covered in this book.
+</p>
+
+<h2>Words and spaces</h2>
+
+<p>
+	Try this program. It makes
+	the computer display words
+	next to each other on the screen.
+</p>
+<pre>
+10 CLS
+20 PRINT "RED";"ROSE"
+30 PRINT "BLACK";"COAL"
+40 PRINT "WHITE" ;"SNOW"
+</pre>
+<p>
+See if you can change the
+<code class="command">PRINT</code> lines to make spaces
+between the words, as shown in #2 below.
+</p>
+<p>
+	<center><img src="{{ base_uri }}/img/usborne/simple-basic/img/13puzzle1.png"></center>
+</p>
+<p>
+Can you change the <code class="command">PRINT</code>
+lines again so the computer
+arranges the words in two
+columns like in #3?
+</p>
+
+<h2>Star lines</h2>
+<p>
+	Run this program to make
+	your computer display a
+	line of stars at the side
+	of the screen.
+</p>
+<pre>
+10 CLS
+20 FOR K=1 TO 10
+30 PRINT TAB(3);"*"
+40 NEXT K 
+</pre>
+
+<p>
+	By changing the number
+	after <code>TAB</code>, can you put the
+	stars in the middle of the screen?
+</p>
+<p>
+Can you change the program
+again to make a line of stars
+across the screen, like this?
+</p>
+<p>
+	<center><img src="{{ base_uri }}/img/usborne/simple-basic/img/13puzzle2.png"></center>
+</p>
+	</article>
+	</div>
+</section>