Added chapter 4 and modified the content generation to hide the drawing area from the skulpt templates if no drawing is needed. The textarea now fills the entire width of the content area.

Author: dmccreary

.vscode/settings.json

@@ -25,6 +25,7 @@
         "randint",
         "readlines",
         "setheading",
+        "skulkt",
         "Skulpt",
         "Spyder",
         "startswith",

CONTENT-GENERATION-GUIDELINES.md

@@ -100,12 +100,27 @@ Keep programs short enough that students can read the whole thing at a glance:
 - **Mid-course labs (Chapters 6–18):** 8–20 lines of Python
 - **Advanced labs (Chapters 19+):** no strict limit, but prefer several short focused labs over one long one
 
-### When Not to Use Turtle Graphics
+### When to Use Each Lab Type
 
-From Chapter 19 onward, turtle is used selectively for visualization projects.
-Pure language concepts (string methods, dictionaries, error handling, etc.) may use
-text-output Skulpt labs that write to the `<pre id="output">` element instead of drawing
-on the canvas. The same HTML block structure applies — just omit turtle-specific code.
+There are two Skulpt lab layouts. Choose based on whether the program uses turtle graphics:
+
+| Situation | Lab type | HTML class |
+|-----------|----------|------------|
+| Program uses `import turtle` or any turtle command | **Drawing lab** | *(no extra class — default)* |
+| Program uses only `print()`, variables, loops, functions, etc. | **Text-only lab** | `class="skulpt-text-only"` |
+
+**Drawing labs** (Chapters 1–18 turtle lessons) show a 400 × 400 px canvas to the right of the
+code editor where the turtle draws.
+
+**Text-only labs** hide the canvas panel entirely; the code editor stretches to fill the full
+content width. Use these for any program that produces only text output — `print()` calls,
+variable values, string results, etc. This layout is the default from Chapter 19 onward, and
+can also appear in earlier chapters for the rare non-turtle concept (e.g., a `print()`-only
+variable lesson).
+
+Never put a text-only lab in a lesson that also needs the canvas, and never put a drawing
+lab in a lesson whose programs do not call any turtle commands — the empty canvas just
+wastes space and confuses students.
 
 ---
 
@@ -452,14 +467,24 @@ then run it to check!
 
 ### Skulpt HTML Block
 
-Every Skulpt lab uses this exact HTML block. The CDN scripts load Skulpt;
-`skulpt.js` (via `extra_javascript`) and `skulpt.css` (via `extra_css`)
-provide the shared functions and styles.
+There are two lab templates. Pick based on whether the program uses turtle graphics
+(see [When to Use Each Lab Type](#when-to-use-each-lab-type)).
+
+The CDN `<script>` tags must appear **once per page**, before the first lab block.
+`skulpt.js` (via `extra_javascript`) and `skulpt.css` (via `extra_css`) provide the
+shared runtime and styles — do not add inline `<style>` or `<script>` tags.
 
 ```html
 <script src="https://skulpt.org/js/skulpt.min.js"></script>
 <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
+```
 
+#### Drawing Lab (turtle programs)
+
+Use when the program calls `import turtle` or any turtle command.
+The canvas appears to the right of the code editor.
+
+```html
 <div id="skulpt-lab">
   <div id="editor-container">
     <textarea id="code" spellcheck="false">PYTHON CODE HERE
@@ -476,18 +501,45 @@ provide the shared functions and styles.
 </div>
 ```
 
-**Rules:**
+#### Text-Only Lab (print/variables/logic — no turtle)
+
+Use when the program produces only text output. Add `class="skulpt-text-only"` to
+the outer div. The canvas container is hidden by CSS; the editor fills the full
+content width. The `turtle-target` div must still be present so `runSkulpt()` can
+initialise without errors — it just isn't visible.
+
+```html
+<div id="skulpt-lab" class="skulpt-text-only">
+  <div id="editor-container">
+    <textarea id="code" spellcheck="false">PYTHON CODE HERE
+</textarea>
+    <div id="button-row">
+      <button id="run-btn" onclick="runSkulpt()">&#9654; Run</button>
+      <button id="reset-btn" onclick="resetSkulpt()">&#8635; Reset</button>
+    </div>
+    <pre id="output"></pre>
+  </div>
+  <div id="canvas-container">
+    <div id="turtle-target"></div>
+  </div>
+</div>
+```
+
+#### Rules that apply to both templates
+
 - The Python code inside `<textarea>` must match the Sample Code block exactly
-- Do not add inline `<style>` or `<script>` tags — all CSS/JS is centralized
-- The first lab on a page uses the plain IDs above — `skulpt.js` depends on them
-- **Do not set a `height` or `rows` attribute on the `<textarea>`** — `skulpt.js` counts the lines of code on page load and sets the textarea height automatically so all code is visible without scrolling
+- **Do not set a `height` or `rows` attribute on the `<textarea>`** — `skulpt.js` auto-sizes it on page load so all code is visible without scrolling
+- The first lab on a page uses the plain IDs above; `skulpt.js` depends on them
 
-**Multiple labs on one page (Learning Checks, etc.):**
+#### Multiple labs on one page (Learning Checks, etc.)
 
-Every lab after the first must use a `-2`, `-3`, … suffix on every ID, and pass
-the matching suffix to the button `onclick` handlers:
+Every lab after the first must use a `-2`, `-3`, … suffix on **every** ID, and pass
+the matching suffix to the button `onclick` handlers. The `skulpt-text-only` class
+applies to multiple labs independently — a page may have a drawing lab first and a
+text-only lab second, or vice versa.
 
 ```html
+<!-- Second drawing lab -->
 <div id="skulpt-lab-2">
   <div id="editor-container-2">
     <textarea id="code-2" spellcheck="false">PYTHON CODE HERE
@@ -502,9 +554,24 @@ the matching suffix to the button `onclick` handlers:
     <div id="turtle-target-2"></div>
   </div>
 </div>
+
+<!-- Second text-only lab -->
+<div id="skulpt-lab-2" class="skulpt-text-only">
+  <div id="editor-container-2">
+    <textarea id="code-2" spellcheck="false">PYTHON CODE HERE
+</textarea>
+    <div id="button-row-2">
+      <button id="run-btn-2" onclick="runSkulpt('-2')">&#9654; Run</button>
+      <button id="reset-btn-2" onclick="resetSkulpt('-2')">&#8635; Reset</button>
+    </div>
+    <pre id="output-2"></pre>
+  </div>
+  <div id="canvas-container-2">
+    <div id="turtle-target-2"></div>
+  </div>
+</div>
 ```
 
-The `skulpt.js` and `skulpt.css` files both support the `-2` / `-3` suffix pattern.
 Do not add the `<script>` CDN tags a second time — one copy per page is enough.
 
 ---

docs/chapters/01-welcome-to-python/index.md

@@ -116,7 +116,7 @@ Edit the code below and click **Run** to see the result right on this page. No a
 <script src="https://skulpt.org/js/skulpt.min.js"></script>
 <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
 
-<div id="skulpt-lab">
+<div id="skulpt-lab" class="skulpt-text-only">
   <div id="editor-container">
     <textarea id="code" spellcheck="false">print("Hello, world!")
 print("My name is Monty.")

docs/chapters/02-python-code-structure/index.md

@@ -68,7 +68,7 @@ print(haiku)
 <script src="https://skulpt.org/js/skulpt.min.js"></script>
 <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
 
-<div id="skulpt-lab">
+<div id="skulpt-lab" class="skulpt-text-only">
   <div id="editor-container">
     <textarea id="code" spellcheck="false">haiku = """An old silent pond.
 A frog jumps into the pond.

docs/chapters/03-variables-and-numbers/index.md

@@ -83,7 +83,7 @@ No account needed — everything runs in your browser.
 <script src="https://skulpt.org/js/skulpt.min.js"></script>
 <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
 
-<div id="skulpt-lab">
+<div id="skulpt-lab" class="skulpt-text-only">
   <div id="editor-container">
     <textarea id="code" spellcheck="false">score = 10
 lives = 3
@@ -149,6 +149,7 @@ The table below shows common naming mistakes and their snake_case fixes:
 | `myscore` | Words run together — hard to read | `my_score` |
 | `MyScore` | Capital letters belong to a different naming style | `my_score` |
 | `my score` | Spaces are not allowed in variable names | `my_score` |
+| `my-score` | Python reads the dash as **subtraction** — `my - score` — not a name! | `my_score` |
 | `x` | Too vague — what does `x` mean? | `player_score` |
 | `s` | Single letters give no information | `lives_remaining` |
 
@@ -165,7 +166,7 @@ When that happens, a good name is the difference between code you can read and c
 
 !!! mascot-warning "Naming Pitfalls!"
     ![Monty warning](../../img/mascot/warning.png){ class="mascot-admonition-img" }
-    Three traps beginners fall into: (1) single-letter names like `x` or `n` that tell you nothing, (2) capital letters that break the snake_case style Python expects, and (3) accidentally naming a variable after a Python keyword. If Python gives you a `SyntaxError` the moment you assign a value, check whether your variable name is a keyword like `print` or `list`!
+    Watch out for the dash! If you write `my-score` instead of `my_score`, Python reads the dash as a minus sign and thinks you are subtracting a variable called `score` from a variable called `my`. Use an **underscore** (`_`), never a dash (`-`), to join words in a name. Other common traps: single-letter names like `x` that tell you nothing, capital letters that break snake_case, and accidentally using a Python keyword as your variable name.
 
 ## Integers: Whole Numbers
 
@@ -246,7 +247,7 @@ print(score)
 
 ## Try It Now — Reassignment
 
-<div id="skulpt-lab-2">
+<div id="skulpt-lab-2" class="skulpt-text-only">
   <div id="editor-container-2">
     <textarea id="code-2" spellcheck="false">score = 10
 print(score)
@@ -340,7 +341,7 @@ You will learn much more about classes later in the course.
     ![Monty thinking](../../img/mascot/thinking.png){ class="mascot-admonition-img" }
     The program below creates two variables — `player_score` and `bonus_points`. It prints `player_score` just fine, but something is missing: `bonus_points` never gets printed. Add **one line** so the output shows both numbers, one on each line.
 
-<div id="skulpt-lab-3">
+<div id="skulpt-lab-3" class="skulpt-text-only">
   <div id="editor-container-3">
     <textarea id="code-3" spellcheck="false">player_score = 42
 bonus_points = 10