From d6f0a415bd67ff50f69aaeecf358d0df284e026e Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Sat, 11 Oct 2025 07:17:16 +1100
Subject: [PATCH 01/18] Add CodeActivity component (very WIP)  - embeds an SKO
 iFrame and sends the code between the <></> in  - added to a couple of pages
 as test/demo  - not sure about the name

---
 src/components/CodeActivity.astro             | 39 +++++++++++++++++++
 .../1-tour/01-01-read-name.mdx                | 24 ++++++++++++
 .../1-tour/02-02-drawing.mdx                  | 27 ++++++++++++-
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CodeActivity.astro

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
new file mode 100644
index 00000000..f7df4376
--- /dev/null
+++ b/src/components/CodeActivity.astro
@@ -0,0 +1,39 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import { Icon } from 'astro-icon'
+const { icon, title, projectName } = Astro.props;
+
+//const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
+const srcURL = "http://127.0.0.1:8000/";
+
+const codeSnippetID = `code-activity-${crypto.randomUUID()}`
+const iFrameID = `code-activity-${crypto.randomUUID()}`
+---
+<iframe id={iFrameID} src={srcURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
+<div style="display:none;" id={codeSnippetID}><slot /></div>
+
+<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID}>
+    let SKO = document.getElementById(document.currentScript.dataset.iframeid);
+    // TODO: This feels brittle...
+    let codeSnippet = document.getElementById(document.currentScript.dataset.codesnippetid).getElementsByClassName("copy")[0].getElementsByTagName("button")[0].dataset.code.replaceAll("","\n");
+
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'SplashKitOnlineListening') {
+            const message = {
+                eventType: 'InitializeProjectFromOutsideWorld',
+                files: [{ path: '/code/main.cpp', data: codeSnippet }]
+            };
+            SKO.contentWindow.postMessage(message, '*');
+        }
+    });
+</script>
+
+<style>
+    .ide-embed {
+        border:0;
+        width:100%;
+        height:500px !important; /* TODO: improve */
+        box-shadow: var(--sl-shadow-md);
+        border-radius: 0.6rem;
+    }
+</style>
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index f878e214..57e37e10 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -4,6 +4,7 @@ sidebar:
   label: " - Read the user's name"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
+import CodeActivity from './src/components/CodeActivity.astro'
 
 Best first step is to build something small, then we can grow the program our from that start. Let's just get the first two messages handled - reading the user's name and displaying it. So we want to see this at the end:
 
@@ -87,3 +88,26 @@ Hi Andrew.
     Notice how you have a sequence of instructions, and can use variables to store data. Try entering different names.
 
     :::
+
+<Accordion>
+  <AccordionItem header="Try it out!">
+    <CodeActivity title="Field Guide/Sequence and Data/Simple Calculator/Read name">
+    ```
+    #include "splashkit.h"
+
+    int main()
+    {
+        string name;
+        write("What is your name: ");
+        name = read_line();
+
+        write_line();
+        write_line("Hi " + name + ".");
+        write_line();
+
+        return 0;
+    }
+    ```
+    </CodeActivity>
+  </AccordionItem>
+</Accordion>
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index 04222889..e9ceb0d6 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -4,6 +4,7 @@ sidebar:
   label: " - Drawing Shapes"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
+import CodeActivity from './src/components/CodeActivity.astro'
 
 With the window appearing, the next step is to draw some shapes. To start, let's get the hill drawing.
 
@@ -86,4 +87,28 @@ The best way to plan this out is to sketch what you want and to try to figure ou
 
 For this program we are just wanting to draw some fixed shapes, so we can tolerate these hard-coded values for now.
 
-:::
\ No newline at end of file
+:::
+
+<Accordion>
+  <AccordionItem header="Try it out!">
+    <CodeActivity title="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
+    ```
+    #include "splashkit.h"
+
+    int main()
+    {
+        open_window("House Drawing by Andrew", 800, 600);
+
+        clear_screen(color_white());
+        fill_ellipse(color_bright_green(), 0, 400, 800, 400);
+
+        refresh_screen();
+
+        delay(5000);
+
+        return 0;
+    }
+    ```
+    </CodeActivity>
+  </AccordionItem>
+</Accordion>

From d5a76d0f2631500554cbde082e39c385efde1ecb Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:43:12 +1100
Subject: [PATCH 02/18] Compute SKO iFrame height dynamically

---
 src/components/CodeActivity.astro | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index f7df4376..8d0548d7 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,7 +1,7 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
 import { Icon } from 'astro-icon'
-const { icon, title, projectName } = Astro.props;
+const { projectName, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
 //const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
 const srcURL = "http://127.0.0.1:8000/";
@@ -17,6 +17,12 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
     // TODO: This feels brittle...
     let codeSnippet = document.getElementById(document.currentScript.dataset.codesnippetid).getElementsByClassName("copy")[0].getElementsByTagName("button")[0].dataset.code.replaceAll("","\n");
 
+    // Compute and set iFrame height
+    const line_height = 19.5; /* computed from the IDE page */
+    let approximateCodeHeight = line_height * (codeSnippet.split("\n").length + 1);
+    let finalIFrameHeight = Math.min(approximateCodeHeight, parseFloat(scriptData.maxcodeheight)) + parseFloat(scriptData.outputheight);
+    SKO.style.height = `${finalIFrameHeight}px`;
+
     window.addEventListener('message', function(event) {
         if (event.data.type === 'SplashKitOnlineListening') {
             const message = {
@@ -32,7 +38,6 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
     .ide-embed {
         border:0;
         width:100%;
-        height:500px !important; /* TODO: improve */
         box-shadow: var(--sl-shadow-md);
         border-radius: 0.6rem;
     }

From f34bfa1aa60b99d34ade741c537d17c7888c1fdb Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:50:29 +1100
Subject: [PATCH 03/18] Add support for 'block edit' mode for embedded SKO  -
 extracts editable blocks from the markdown  - easy to use, but perhaps
 brittle to changes in the generated page?

---
 src/components/CodeActivity.astro | 57 ++++++++++++++++++++++++++++---
 1 file changed, 52 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index 8d0548d7..181f5461 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,6 +1,5 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
-import { Icon } from 'astro-icon'
 const { projectName, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
 //const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
@@ -9,13 +8,49 @@ const srcURL = "http://127.0.0.1:8000/";
 const codeSnippetID = `code-activity-${crypto.randomUUID()}`
 const iFrameID = `code-activity-${crypto.randomUUID()}`
 ---
+
 <iframe id={iFrameID} src={srcURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
+
 <div style="display:none;" id={codeSnippetID}><slot /></div>
 
-<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID}>
-    let SKO = document.getElementById(document.currentScript.dataset.iframeid);
-    // TODO: This feels brittle...
-    let codeSnippet = document.getElementById(document.currentScript.dataset.codesnippetid).getElementsByClassName("copy")[0].getElementsByTagName("button")[0].dataset.code.replaceAll("","\n");
+<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID} data-maxcodeheight={maxCodeHeight} data-outputheight={outputHeight}>
+    let scriptData = document.currentScript.dataset;
+
+    let SKO = document.getElementById(scriptData.iframeid);
+
+    // Extract code snippet + editable blocks from the hidden markdown code block
+    // This feels brittle...
+    let codeSnippet = "";
+    let blocks = [];
+
+    // Where the lines of code exist (as child nodes)
+    let codeElements = document.getElementById(scriptData.codesnippetid).getElementsByTagName("code")[0];
+    let currentBlock = null;
+    let lineIndex = 0;
+
+    for (const line of codeElements.childNodes) {
+        // empty lines textContent returns \n, handle that here
+        if (line.textContent == "\n")
+            codeSnippet += "\n";
+        else
+            codeSnippet += line.textContent.replace("####","")+"\n"; // use #### to allow leading spaces
+        lineIndex += 1;
+
+        // handle detecting editable blocks
+        if (line.classList.contains("mark")) {
+            if (currentBlock == null) {
+                let name = window.getComputedStyle(line).getPropertyValue("--tmLabel").slice(1,-1);
+                currentBlock = {lineStart: lineIndex, name: name};
+                blocks.push(currentBlock);
+            }
+            currentBlock.lineEnd = lineIndex
+        }
+        else {
+            currentBlock= null;
+        }
+    }
+
+    codeSnippet = codeSnippet.slice(0,-1); // remove trailing \n
 
     // Compute and set iFrame height
     const line_height = 19.5; /* computed from the IDE page */
@@ -23,6 +58,7 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
     let finalIFrameHeight = Math.min(approximateCodeHeight, parseFloat(scriptData.maxcodeheight)) + parseFloat(scriptData.outputheight);
     SKO.style.height = `${finalIFrameHeight}px`;
 
+    // Initialize the window with the code + editable code blocks (if there are any)
     window.addEventListener('message', function(event) {
         if (event.data.type === 'SplashKitOnlineListening') {
             const message = {
@@ -30,6 +66,17 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
                 files: [{ path: '/code/main.cpp', data: codeSnippet }]
             };
             SKO.contentWindow.postMessage(message, '*');
+
+            if (blocks.length > 0){
+                const message = {
+                    eventType: 'EnterBlockEditMode',
+                    files: [{ path: '/code/main.cpp', blocks: blocks }],
+                    styles: ["highlight"],
+                };
+                SKO.contentWindow.postMessage(message, '*');
+            }
+
+
         }
     });
 </script>

From 76372117c2411640fcdfc1da79cd013624383c1d Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:51:17 +1100
Subject: [PATCH 04/18] Update example code activities with editable blocks

---
 .../1-sequence-and-data/1-tour/01-01-read-name.mdx       | 7 +++----
 .../1-sequence-and-data/1-tour/02-02-drawing.mdx         | 9 ++++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index 57e37e10..53e02207 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -92,7 +92,7 @@ Hi Andrew.
 <Accordion>
   <AccordionItem header="Try it out!">
     <CodeActivity title="Field Guide/Sequence and Data/Simple Calculator/Read name">
-    ```
+    ```c++ {"userCode":10-10}
     #include "splashkit.h"
 
     int main()
@@ -101,9 +101,8 @@ Hi Andrew.
         write("What is your name: ");
         name = read_line();
 
-        write_line();
-        write_line("Hi " + name + ".");
-        write_line();
+        // Try adding a write_line here, to print out the name
+        ####
 
         return 0;
     }
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index e9ceb0d6..7e470c9c 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -92,15 +92,18 @@ For this program we are just wanting to draw some fixed shapes, so we can tolera
 <Accordion>
   <AccordionItem header="Try it out!">
     <CodeActivity title="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
-    ```
+    ```c++ {8,11}
     #include "splashkit.h"
 
     int main()
     {
         open_window("House Drawing by Andrew", 800, 600);
 
-        clear_screen(color_white());
-        fill_ellipse(color_bright_green(), 0, 400, 800, 400);
+        // Try clearing the screen first
+        ####
+
+        // Then try drawing an ellipse!
+        ####
 
         refresh_screen();
 

From 84c53e8cf1eb5ca64eb6f518fb17a499dff38164 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:57:39 +1100
Subject: [PATCH 05/18] Embed CodeActivity inside an Accordion and load on open
  - 4s fade to mask load time - looks okay locally but may need adjusting

---
 src/components/CodeActivity.astro | 53 ++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index 181f5461..ea1966d5 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,6 +1,7 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
-const { projectName, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
+import { Accordion, AccordionItem } from 'accessible-astro-components'
+const { header, projectName, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
 //const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
 const srcURL = "http://127.0.0.1:8000/";
@@ -8,12 +9,14 @@ const srcURL = "http://127.0.0.1:8000/";
 const codeSnippetID = `code-activity-${crypto.randomUUID()}`
 const iFrameID = `code-activity-${crypto.randomUUID()}`
 ---
+<Accordion>
+  <AccordionItem header={header}>
 
-<iframe id={iFrameID} src={srcURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
+<iframe style="opacity: 0;" id={iFrameID} data-src={srcURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
 
 <div style="display:none;" id={codeSnippetID}><slot /></div>
 
-<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID} data-maxcodeheight={maxCodeHeight} data-outputheight={outputHeight}>
+<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID} data-maxcodeheight={maxCodeHeight} data-outputheight={outputHeight}, data-resources={resources}>
     let scriptData = document.currentScript.dataset;
 
     let SKO = document.getElementById(scriptData.iframeid);
@@ -58,27 +61,37 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
     let finalIFrameHeight = Math.min(approximateCodeHeight, parseFloat(scriptData.maxcodeheight)) + parseFloat(scriptData.outputheight);
     SKO.style.height = `${finalIFrameHeight}px`;
 
-    // Initialize the window with the code + editable code blocks (if there are any)
-    window.addEventListener('message', function(event) {
-        if (event.data.type === 'SplashKitOnlineListening') {
-            const message = {
-                eventType: 'InitializeProjectFromOutsideWorld',
-                files: [{ path: '/code/main.cpp', data: codeSnippet }]
-            };
-            SKO.contentWindow.postMessage(message, '*');
 
-            if (blocks.length > 0){
+    async function loadAndShowIDE(){
+        SKO.src = SKO.dataset.src;
+        SKO.style.opacity = "1";
+
+        // Initialize the window with the code + editable code blocks (if there are any)
+        window.addEventListener('message', function(event) {
+            if (event.data.type === 'SplashKitOnlineListening') {
                 const message = {
-                    eventType: 'EnterBlockEditMode',
-                    files: [{ path: '/code/main.cpp', blocks: blocks }],
-                    styles: ["highlight"],
+                    eventType: 'InitializeProjectFromOutsideWorld',
+                    files: [{ path: '/code/main.cpp', data: codeSnippet }],
                 };
                 SKO.contentWindow.postMessage(message, '*');
-            }
 
+                if (blocks.length > 0){
+                    const message = {
+                        eventType: 'EnterBlockEditMode',
+                        files: [{ path: '/code/main.cpp', blocks: blocks }],
+                        styles: ["highlight"],
+                    };
+                    SKO.contentWindow.postMessage(message, '*');
+                }
+            }
+        });
+    }
 
-        }
-    });
+    // find the Accordion's button...'
+    let button = document.currentScript.parentNode.parentElement.parentElement.parentElement.getElementsByTagName("button")[0];
+    button.addEventListener("click", function(){
+        loadAndShowIDE();
+    }, {once : true});
 </script>
 
 <style>
@@ -87,5 +100,9 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
         width:100%;
         box-shadow: var(--sl-shadow-md);
         border-radius: 0.6rem;
+        transition: opacity 4s;
     }
 </style>
+
+  </AccordionItem>
+</Accordion>

From cdf7d65aa92ae5670fc6973fb034f55d15db8ced Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:57:58 +1100
Subject: [PATCH 06/18] Update code activity examples

---
 .../1-sequence-and-data/1-tour/01-01-read-name.mdx           | 5 +----
 .../1-sequence-and-data/1-tour/02-02-drawing.mdx             | 4 ----
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index 53e02207..ee0b6371 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -89,8 +89,7 @@ Hi Andrew.
 
     :::
 
-<Accordion>
-  <AccordionItem header="Try it out!">
+
     <CodeActivity title="Field Guide/Sequence and Data/Simple Calculator/Read name">
     ```c++ {"userCode":10-10}
     #include "splashkit.h"
@@ -108,5 +107,3 @@ Hi Andrew.
     }
     ```
     </CodeActivity>
-  </AccordionItem>
-</Accordion>
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index 7e470c9c..f0d56531 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -89,8 +89,6 @@ For this program we are just wanting to draw some fixed shapes, so we can tolera
 
 :::
 
-<Accordion>
-  <AccordionItem header="Try it out!">
     <CodeActivity title="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
     ```c++ {8,11}
     #include "splashkit.h"
@@ -113,5 +111,3 @@ For this program we are just wanting to draw some fixed shapes, so we can tolera
     }
     ```
     </CodeActivity>
-  </AccordionItem>
-</Accordion>

From c996667959b987168b36ee5ed10d1e2f6108398e Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 03:58:26 +1100
Subject: [PATCH 07/18] Add support for code resources (via zip) in code
 activities

---
 src/components/CodeActivity.astro | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index ea1966d5..369d9070 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,7 +1,7 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-const { header, projectName, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
+const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
 //const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
 const srcURL = "http://127.0.0.1:8000/";
@@ -66,12 +66,18 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
         SKO.src = SKO.dataset.src;
         SKO.style.opacity = "1";
 
+        let resources = undefined;
+        if (scriptData.resources){
+            resources = [{data: await (await fetch(scriptData.resources)).arrayBuffer()}];
+        }
+
         // Initialize the window with the code + editable code blocks (if there are any)
         window.addEventListener('message', function(event) {
             if (event.data.type === 'SplashKitOnlineListening') {
                 const message = {
                     eventType: 'InitializeProjectFromOutsideWorld',
                     files: [{ path: '/code/main.cpp', data: codeSnippet }],
+                    zips: resources,
                 };
                 SKO.contentWindow.postMessage(message, '*');
 

From 69264d85f963115f01144d820b87de2d0d8440c1 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 04:00:11 +1100
Subject: [PATCH 08/18] Add example of code activity with resource
 (utilities.h/cpp)  - code has to be in 'code' directory in zip

---
 .../resources/code-activities/utilities.zip   | Bin 0 -> 868 bytes
 .../1-tour/01-03-design-perform-guess.mdx     |  28 ++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 public/resources/code-activities/utilities.zip

diff --git a/public/resources/code-activities/utilities.zip b/public/resources/code-activities/utilities.zip
new file mode 100644
index 0000000000000000000000000000000000000000..1534608efec069d1e42949d60952f8fbb1e25a74
GIT binary patch
literal 868
zcmWIWW@h1H009{>-)JxcO0Y7>FeK-vr0R!;a56AIKl?fZgi9;985mjq{byhR69GW&
zB0vosVC@d3W(*vR3=G?u7#M_L+Dl6^b23XZQ;YSI3kvX=)jKIZ@2~>TvHO;-?(sso
zuNY_Lrr+RI+ZAz8s+Hr+rw!lUH9IU$JN54ai~a5U>Ctaa?3;N*`NWBo4$i}I-W#I}
zBzn1i&9!(eae_}^hrP^=y=>oJ-n@J1K%bSO7mLlReQBnmz4zw2<sDt#P@?AF<C}W7
z$EN7ZwkcAZZm84=HtC2@)3aD`|Jv#aZzLq=h5gf>>^a#n<DG_1Rk82wa}SlanMC}W
zpwAZSa3JJ?qbl!olN=k_i|<oK&pr45e){c#%H*py{J(zB;h*sMnD5g?nHR2K{9OIC
zM)Zc%9u>PZRg3xAcZ;w7{?2AMrIW+`3FpP8mg)#Q*U3|Evpg}kvHr7V_1V7g)3Yvr
zp0$qw5vD>SzR{-w=CD@)L-;%p3t)z61~^28Prc3nVYJu@KIe1V+tW9ggZJZ?k31hs
zc>BIT2x8+(dA4*>N1<l=Gu7u)mMzh`Au?Sg_1V(fg;T|tHCrD|64BP~m|!X{-m)-Y
z%B&ee{E68Ptz2E7in+Z^*6uX=?4|I@!7ZyQOR$rxM8x5f<<F-AZf<E+Yyte!i?ZUp
z(xk+JK44^$W5$)NB%ldQfZ@L*hzU((tdK;8<^_mRxRMyeC}4_X_}^#`GYT!i5jGby
nn32t$3^X3>M1;A(KnI$NCBOr`S=m5dVg|yWKspqd5f~T%Ir%Hr

literal 0
HcmV?d00001

diff --git a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
index debfe281..a19b7707 100644
--- a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
+++ b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
@@ -4,6 +4,7 @@ sidebar:
   label: " - Perform Guess"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
+import CodeActivity from './src/components/CodeActivity.astro'
 
 Now that we have the different functions and procedure, we can now start to design the control flow for the Guess that Number program. For the Guess that Number program we can start by designing the control flow within the `Perform Guess` function. The specification of this is shown the table below. Think about the steps that need to be performed to achieve this. If you had been asked to do this what would you need to do?
 
@@ -184,7 +185,34 @@ int main()
 :::tip
 Remember you can use the `ctrl-c` key combination to generate a signal to kill the program if you get stuck in an infinite loop!
 :::
+    <CodeActivity header="Try it out!" title="Field Guide/Sequence and Data/Simple Calculator/Read name" resources="/resources/code-activities/utilities.zip">
+    ```c++ {"userCode":7-14}
+    #include "splashkit.h"
+    // access to read_integer, read_string, etc...
+    #include "utilities.h"
 
+    using std::to_string;
+
+    // code the start of perform guess here
+
+
+
+
+
+
+
+
+    int main()
+    {
+      while ( ! perform_guess(1, 37) )
+      {
+        write_line("Try again...");
+      }
+
+      return 0;
+    }
+    ```
+    </CodeActivity>
 <Accordion>
   <AccordionItem
     header="Perform guess with result"

From 919ce0d42f254829b436c961e35a876d56a936e5 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 04:22:26 +1100
Subject: [PATCH 09/18] Switch CodeActivity to using live SKO site (WhyPenguins
 for now)

---
 src/components/CodeActivity.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index 369d9070..dc248642 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -3,8 +3,8 @@ import type { Props } from "@astrojs/starlight/props";
 import { Accordion, AccordionItem } from 'accessible-astro-components'
 const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
-//const srcURL = "https://thoth-tech.github.io/SplashkitOnline";
-const srcURL = "http://127.0.0.1:8000/";
+const srcURL = "https://whypenguins.github.io/SplashkitOnline";
+//const srcURL = "http://127.0.0.1:8000/";
 
 const codeSnippetID = `code-activity-${crypto.randomUUID()}`
 const iFrameID = `code-activity-${crypto.randomUUID()}`

From 103bf72ab852bd5266db051134e113486c071637 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Mon, 13 Oct 2025 13:04:56 +1100
Subject: [PATCH 10/18] Fix CodeActivity component path + fields

---
 .../1-sequence-and-data/1-tour/01-01-read-name.mdx            | 4 ++--
 .../1-sequence-and-data/1-tour/02-02-drawing.mdx              | 4 ++--
 .../2-organising-code/1-tour/01-03-design-perform-guess.mdx   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index ee0b6371..698d1e75 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -4,7 +4,7 @@ sidebar:
   label: " - Read the user's name"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from './src/components/CodeActivity.astro'
+import CodeActivity from '/src/components/CodeActivity.astro'
 
 Best first step is to build something small, then we can grow the program our from that start. Let's just get the first two messages handled - reading the user's name and displaying it. So we want to see this at the end:
 
@@ -90,7 +90,7 @@ Hi Andrew.
     :::
 
 
-    <CodeActivity title="Field Guide/Sequence and Data/Simple Calculator/Read name">
+    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/Simple Calculator/Read name">
     ```c++ {"userCode":10-10}
     #include "splashkit.h"
 
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index f0d56531..caf33a8f 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -4,7 +4,7 @@ sidebar:
   label: " - Drawing Shapes"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from './src/components/CodeActivity.astro'
+import CodeActivity from '/src/components/CodeActivity.astro'
 
 With the window appearing, the next step is to draw some shapes. To start, let's get the hill drawing.
 
@@ -89,7 +89,7 @@ For this program we are just wanting to draw some fixed shapes, so we can tolera
 
 :::
 
-    <CodeActivity title="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
+    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
     ```c++ {8,11}
     #include "splashkit.h"
 
diff --git a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
index a19b7707..77a19b64 100644
--- a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
+++ b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
@@ -4,7 +4,7 @@ sidebar:
   label: " - Perform Guess"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from './src/components/CodeActivity.astro'
+import CodeActivity from '/src/components/CodeActivity.astro'
 
 Now that we have the different functions and procedure, we can now start to design the control flow for the Guess that Number program. For the Guess that Number program we can start by designing the control flow within the `Perform Guess` function. The specification of this is shown the table below. Think about the steps that need to be performed to achieve this. If you had been asked to do this what would you need to do?
 
@@ -185,7 +185,7 @@ int main()
 :::tip
 Remember you can use the `ctrl-c` key combination to generate a signal to kill the program if you get stuck in an infinite loop!
 :::
-    <CodeActivity header="Try it out!" title="Field Guide/Sequence and Data/Simple Calculator/Read name" resources="/resources/code-activities/utilities.zip">
+    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/Simple Calculator/Read name" resources="/resources/code-activities/utilities.zip">
     ```c++ {"userCode":7-14}
     #include "splashkit.h"
     // access to read_integer, read_string, etc...

From 1e7836ed945b593b9d094b8764540385e5b02dca Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:06:31 +1100
Subject: [PATCH 11/18] Add SplashKitOnlineURL constant

---
 src/components/CodeActivity.astro          | 5 ++---
 src/components/SplashKitOnlineConstants.ts | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SplashKitOnlineConstants.ts

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index dc248642..66a65964 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,10 +1,9 @@
 ---
+import { SplashKitOnlineURL } from '/src/components/SplashKitOnlineConstants'
 import type { Props } from "@astrojs/starlight/props";
 import { Accordion, AccordionItem } from 'accessible-astro-components'
 const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
-const srcURL = "https://whypenguins.github.io/SplashkitOnline";
-//const srcURL = "http://127.0.0.1:8000/";
 
 const codeSnippetID = `code-activity-${crypto.randomUUID()}`
 const iFrameID = `code-activity-${crypto.randomUUID()}`
@@ -12,7 +11,7 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
 <Accordion>
   <AccordionItem header={header}>
 
-<iframe style="opacity: 0;" id={iFrameID} data-src={srcURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
+<iframe style="opacity: 0;" id={iFrameID} data-src={SplashKitOnlineURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
 
 <div style="display:none;" id={codeSnippetID}><slot /></div>
 
diff --git a/src/components/SplashKitOnlineConstants.ts b/src/components/SplashKitOnlineConstants.ts
new file mode 100644
index 00000000..caa92c9e
--- /dev/null
+++ b/src/components/SplashKitOnlineConstants.ts
@@ -0,0 +1 @@
+export const SplashKitOnlineURL = "https://whypenguins.github.io/SplashkitOnline";

From 95ef2abeaafd3b5cece7210bdaebdee2437af016 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:06:44 +1100
Subject: [PATCH 12/18] Add hidden SplashKit Online IDE page

---
 src/content/docs/book/appendix/online-ide.mdx | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/content/docs/book/appendix/online-ide.mdx

diff --git a/src/content/docs/book/appendix/online-ide.mdx b/src/content/docs/book/appendix/online-ide.mdx
new file mode 100644
index 00000000..dab0c76f
--- /dev/null
+++ b/src/content/docs/book/appendix/online-ide.mdx
@@ -0,0 +1,28 @@
+---
+title: SplashKit Online IDE
+template: splash
+---
+import { SplashKitOnlineURL } from '/src/components/SplashKitOnlineConstants'
+
+<iframe id = "sko-embed" src={ SplashKitOnlineURL }/>
+<style>{`
+  #sko-embed {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - var(--sl-nav-height));
+
+    border: none;
+  }
+`}</style>
+<script>{`
+  let page_url = new URL(window.location.href);
+
+  // forward GET params to the iFrame
+  document.getElementById("sko-embed").src += page_url.search;
+
+  // then remove from current page (especially since the iFrame can't update them, just leads to confusion)
+  page_url.search = "";
+  window.history.replaceState(null, '', page_url.toString());
+`}</script>

From 4f39ea57da76e0a70744ef45e9ec160737f632da Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:34:52 +1100
Subject: [PATCH 13/18] Update CodeActivity to latest SKO parameters + add
 container

---
 src/components/CodeActivity.astro | 56 +++++++++++++++++++------------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index 66a65964..d29209ba 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -1,9 +1,10 @@
 ---
 import { SplashKitOnlineURL } from '/src/components/SplashKitOnlineConstants'
+
 import type { Props } from "@astrojs/starlight/props";
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
+const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
 
 const codeSnippetID = `code-activity-${crypto.randomUUID()}`
 const iFrameID = `code-activity-${crypto.randomUUID()}`
@@ -11,7 +12,9 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
 <Accordion>
   <AccordionItem header={header}>
 
-<iframe style="opacity: 0;" id={iFrameID} data-src={SplashKitOnlineURL+"?language=C++&useEmbeddedInterface=on&projectID="+projectName} class="ide-embed"/>
+<div class="ide-embed-container">
+    <iframe id={iFrameID} data-src={SplashKitOnlineURL+"?language=C++&defaultInitializeProject=off&cleanProject=on&useEmbeddedInterface=on&initializeProjectName=."+projectName} class="ide-embed"/>
+</div>
 
 <div style="display:none;" id={codeSnippetID}><slot /></div>
 
@@ -58,35 +61,39 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
     const line_height = 19.5; /* computed from the IDE page */
     let approximateCodeHeight = line_height * (codeSnippet.split("\n").length + 1);
     let finalIFrameHeight = Math.min(approximateCodeHeight, parseFloat(scriptData.maxcodeheight)) + parseFloat(scriptData.outputheight);
-    SKO.style.height = `${finalIFrameHeight}px`;
+    SKO.parentElement.style.height = `${finalIFrameHeight}px`;
 
 
     async function loadAndShowIDE(){
         SKO.src = SKO.dataset.src;
-        SKO.style.opacity = "1";
+        SKO.parentElement.style.opacity = "1";
 
         let resources = undefined;
         if (scriptData.resources){
             resources = [{data: await (await fetch(scriptData.resources)).arrayBuffer()}];
         }
 
+        function sendMessage(message){
+            SKO.contentWindow.postMessage(message, '*');
+        }
+
         // Initialize the window with the code + editable code blocks (if there are any)
         window.addEventListener('message', function(event) {
-            if (event.data.type === 'SplashKitOnlineListening') {
-                const message = {
-                    eventType: 'InitializeProjectFromOutsideWorld',
-                    files: [{ path: '/code/main.cpp', data: codeSnippet }],
-                    zips: resources,
-                };
-                SKO.contentWindow.postMessage(message, '*');
-
-                if (blocks.length > 0){
-                    const message = {
-                        eventType: 'EnterBlockEditMode',
-                        files: [{ path: '/code/main.cpp', blocks: blocks }],
-                        styles: ["highlight"],
-                    };
-                    SKO.contentWindow.postMessage(message, '*');
+            if (event.data.type === 'SplashKitOnline') {
+                if (event.data.event === 'Listening') {
+                    sendMessage({
+                        eventType: 'ImportFiles',
+                        files: [{ path: '/code/main.cpp', data: codeSnippet }],
+                        zips: resources,
+                    });
+
+                    if (blocks.length > 0){
+                        sendMessage({
+                            eventType: 'EnterBlockEditMode',
+                            files: [{ path: '/code/main.cpp', blocks: blocks }],
+                            styles: ["highlight"],
+                        });
+                    }
                 }
             }
         });
@@ -100,12 +107,17 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
 </script>
 
 <style>
+    .ide-embed-container {
+        opacity: 0; /*starts off hidden and fades in*/
+        transition: opacity 3s;
+        position: relative;
+    }
     .ide-embed {
-        border:0;
-        width:100%;
+        border: 0;
+        width: 100%;
+        height: 100% !important;
         box-shadow: var(--sl-shadow-md);
         border-radius: 0.6rem;
-        transition: opacity 4s;
     }
 </style>
 

From 040a886253017368e05b2b39b603986f0933df4b Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:11:44 +1100
Subject: [PATCH 14/18] Ignore messages from outside the iFrame  - Safety
 measure, especially once the iFrame starts sending    back data we put in
 links the user can click in the main page...

---
 src/components/CodeActivity.astro | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index d29209ba..446d7924 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -79,6 +79,9 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
 
         // Initialize the window with the code + editable code blocks (if there are any)
         window.addEventListener('message', function(event) {
+            if (event.source !== SKO.contentWindow)
+                return;
+
             if (event.data.type === 'SplashKitOnline') {
                 if (event.data.event === 'Listening') {
                     sendMessage({

From 713df634067932f02ac71ea7cccacc13d8d657db Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:16:10 +1100
Subject: [PATCH 15/18] Add "Open in full IDE" button

---
 src/components/CodeActivity.astro | 47 ++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/components/CodeActivity.astro b/src/components/CodeActivity.astro
index 446d7924..8e7a9a9f 100644
--- a/src/components/CodeActivity.astro
+++ b/src/components/CodeActivity.astro
@@ -2,6 +2,7 @@
 import { SplashKitOnlineURL } from '/src/components/SplashKitOnlineConstants'
 
 import type { Props } from "@astrojs/starlight/props";
+import { Icon } from '@astrojs/starlight/components';
 import { Accordion, AccordionItem } from 'accessible-astro-components'
 
 const { header, projectName, resources, maxCodeHeight = 600, outputHeight = 300} = Astro.props;
@@ -13,12 +14,15 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
   <AccordionItem header={header}>
 
 <div class="ide-embed-container">
+    <a class="open-in-ide-button" target="_blank" title="Open in full IDE">
+        <Icon name="external" color="inherit;" size="2rem" />
+    </a>
     <iframe id={iFrameID} data-src={SplashKitOnlineURL+"?language=C++&defaultInitializeProject=off&cleanProject=on&useEmbeddedInterface=on&initializeProjectName=."+projectName} class="ide-embed"/>
 </div>
 
 <div style="display:none;" id={codeSnippetID}><slot /></div>
 
-<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID} data-maxcodeheight={maxCodeHeight} data-outputheight={outputHeight}, data-resources={resources}>
+<script data-codesnippetid={codeSnippetID} data-iframeid={iFrameID} data-maxcodeheight={maxCodeHeight} data-outputheight={outputHeight}, data-resources={resources}, data-projectname={projectName}>
     let scriptData = document.currentScript.dataset;
 
     let SKO = document.getElementById(scriptData.iframeid);
@@ -98,6 +102,32 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
                         });
                     }
                 }
+                if (event.data.event === 'ProjectLoaded') {
+                    // fill "Open in full IDE" button with project ID
+                    let button = SKO.parentElement.getElementsByTagName("a")[0];
+                    button.href = "/book/appendix/online-ide/?project="+event.data.projectID;
+
+                    // By default we create hidden projects (prepending a `.` to the project name)
+                    // If the user wants to experiment further, we should make it a real project
+                    // and rename it so they can load it later on from the IDE
+                    button.addEventListener("click", function(){
+                        sendMessage({
+                            eventType: 'RenameProject',
+                            name: scriptData.projectname
+                        });
+
+                        sendMessage({
+                            eventType: 'ShowMessage',
+                            title: "Opened in IDE",
+                            message: "This project has been loaded in the full IDE.\nPlease reload the page to use the embedded version again.",
+                            block: true // ensure the user can't interact anymore
+                        });
+                    });
+                    // ensure they left click (opening from context menu can't be detected...)
+                    button.addEventListener("contextmenu", function(event){
+                        event.preventDefault();
+                    });
+                }
             }
         });
     }
@@ -122,6 +152,21 @@ const iFrameID = `code-activity-${crypto.randomUUID()}`
         box-shadow: var(--sl-shadow-md);
         border-radius: 0.6rem;
     }
+    .open-in-ide-button {
+        position: absolute;
+        top: 0.5em;
+        right: 0.5em;
+        border: none;
+        background: none !important;
+        --sl-icon-color: var(--sl-color-accent);
+        cursor: pointer;
+    }
+    .open-in-ide-button:hover {
+        --sl-icon-color: var(--sl-color-accent-high);
+    }
+    svg{
+        transition: color 0.3s;
+    }
 </style>
 
   </AccordionItem>

From df7398796204f6ea1a8b5591f9e522c8b54a3acd Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:16:28 +1100
Subject: [PATCH 16/18] Shorten the project names in the example pages

---
 .../1-sequence-and-data/1-tour/01-01-read-name.mdx        | 8 ++++----
 .../1-sequence-and-data/1-tour/02-02-drawing.mdx          | 2 +-
 .../1-tour/01-03-design-perform-guess.mdx                 | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index 698d1e75..74bcb22f 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -19,14 +19,14 @@ Hi Andrew.
     ```zsh
     # Move you your code projects folder
     cd ~/Documents/Code # or cd /c/Users/andrew/Documents/Code
-    
+
     # Create and move into a folder for the project
     mkdir TravelCalculator
     cd TravelCalculator
 
     # Create a blank dotnet project
     dotnet new console
-    
+
     # Add the SplashKit library
     dotnet add package splashkit
 
@@ -59,7 +59,7 @@ Hi Andrew.
 
 3. Add the code to create a `name` variable - then we can think about how we use this.
 4. Review the messages we want to output. To start we want to output the message `"What is your name: "`, read the text and user enters, then output a blank line and the greeting text `"Hi "` followed by the user's name.
-  
+
     Looking back at the [terminal methods](/book/part-1-instructions/1-sequence-and-data/0-panorama/6-terminal-method-to-use), we have methods to output text (`Write` and `WriteLine`), and read text from the user (`ReadLine`). Use these to display the prompt, and output the required messages.
 
     <Accordion>
@@ -90,7 +90,7 @@ Hi Andrew.
     :::
 
 
-    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/Simple Calculator/Read name">
+    <CodeActivity header="Try it out!" projectName="Sequence and Data/Simple Calculator/Read Name">
     ```c++ {"userCode":10-10}
     #include "splashkit.h"
 
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index caf33a8f..ddb2348e 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -89,7 +89,7 @@ For this program we are just wanting to draw some fixed shapes, so we can tolera
 
 :::
 
-    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/House Drawing/Drawing Shapes">
+    <CodeActivity header="Try it out!" projectName="Sequence and Data/House Drawing/Drawing Shapes">
     ```c++ {8,11}
     #include "splashkit.h"
 
diff --git a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
index 77a19b64..f55e60f7 100644
--- a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
+++ b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
@@ -185,7 +185,7 @@ int main()
 :::tip
 Remember you can use the `ctrl-c` key combination to generate a signal to kill the program if you get stuck in an infinite loop!
 :::
-    <CodeActivity header="Try it out!" projectName="Field Guide/Sequence and Data/Simple Calculator/Read name" resources="/resources/code-activities/utilities.zip">
+    <CodeActivity header="Try it out!" projectName="Organised Code/Structuring Code/Guess That Number/Perform Guess" resources="/resources/code-activities/utilities.zip">
     ```c++ {"userCode":7-14}
     #include "splashkit.h"
     // access to read_integer, read_string, etc...

From c6f88aaf0f7e118317f57b5a4449ab7fe5f01a27 Mon Sep 17 00:00:00 2001
From: Sean Boettger <sean@whypenguins.com>
Date: Tue, 21 Oct 2025 01:23:40 +1100
Subject: [PATCH 17/18] Reset/remove example usages

---
 .../resources/code-activities/utilities.zip   | Bin 868 -> 0 bytes
 .../1-tour/01-01-read-name.mdx                |  26 ++--------------
 .../1-tour/02-02-drawing.mdx                  |  26 +---------------
 .../1-tour/01-03-design-perform-guess.mdx     |  28 ------------------
 4 files changed, 4 insertions(+), 76 deletions(-)
 delete mode 100644 public/resources/code-activities/utilities.zip

diff --git a/public/resources/code-activities/utilities.zip b/public/resources/code-activities/utilities.zip
deleted file mode 100644
index 1534608efec069d1e42949d60952f8fbb1e25a74..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 868
zcmWIWW@h1H009{>-)JxcO0Y7>FeK-vr0R!;a56AIKl?fZgi9;985mjq{byhR69GW&
zB0vosVC@d3W(*vR3=G?u7#M_L+Dl6^b23XZQ;YSI3kvX=)jKIZ@2~>TvHO;-?(sso
zuNY_Lrr+RI+ZAz8s+Hr+rw!lUH9IU$JN54ai~a5U>Ctaa?3;N*`NWBo4$i}I-W#I}
zBzn1i&9!(eae_}^hrP^=y=>oJ-n@J1K%bSO7mLlReQBnmz4zw2<sDt#P@?AF<C}W7
z$EN7ZwkcAZZm84=HtC2@)3aD`|Jv#aZzLq=h5gf>>^a#n<DG_1Rk82wa}SlanMC}W
zpwAZSa3JJ?qbl!olN=k_i|<oK&pr45e){c#%H*py{J(zB;h*sMnD5g?nHR2K{9OIC
zM)Zc%9u>PZRg3xAcZ;w7{?2AMrIW+`3FpP8mg)#Q*U3|Evpg}kvHr7V_1V7g)3Yvr
zp0$qw5vD>SzR{-w=CD@)L-;%p3t)z61~^28Prc3nVYJu@KIe1V+tW9ggZJZ?k31hs
zc>BIT2x8+(dA4*>N1<l=Gu7u)mMzh`Au?Sg_1V(fg;T|tHCrD|64BP~m|!X{-m)-Y
z%B&ee{E68Ptz2E7in+Z^*6uX=?4|I@!7ZyQOR$rxM8x5f<<F-AZf<E+Yyte!i?ZUp
z(xk+JK44^$W5$)NB%ldQfZ@L*hzU((tdK;8<^_mRxRMyeC}4_X_}^#`GYT!i5jGby
nn32t$3^X3>M1;A(KnI$NCBOr`S=m5dVg|yWKspqd5f~T%Ir%Hr

diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
index 74bcb22f..f878e214 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/01-01-read-name.mdx
@@ -4,7 +4,6 @@ sidebar:
   label: " - Read the user's name"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from '/src/components/CodeActivity.astro'
 
 Best first step is to build something small, then we can grow the program our from that start. Let's just get the first two messages handled - reading the user's name and displaying it. So we want to see this at the end:
 
@@ -19,14 +18,14 @@ Hi Andrew.
     ```zsh
     # Move you your code projects folder
     cd ~/Documents/Code # or cd /c/Users/andrew/Documents/Code
-
+    
     # Create and move into a folder for the project
     mkdir TravelCalculator
     cd TravelCalculator
 
     # Create a blank dotnet project
     dotnet new console
-
+    
     # Add the SplashKit library
     dotnet add package splashkit
 
@@ -59,7 +58,7 @@ Hi Andrew.
 
 3. Add the code to create a `name` variable - then we can think about how we use this.
 4. Review the messages we want to output. To start we want to output the message `"What is your name: "`, read the text and user enters, then output a blank line and the greeting text `"Hi "` followed by the user's name.
-
+  
     Looking back at the [terminal methods](/book/part-1-instructions/1-sequence-and-data/0-panorama/6-terminal-method-to-use), we have methods to output text (`Write` and `WriteLine`), and read text from the user (`ReadLine`). Use these to display the prompt, and output the required messages.
 
     <Accordion>
@@ -88,22 +87,3 @@ Hi Andrew.
     Notice how you have a sequence of instructions, and can use variables to store data. Try entering different names.
 
     :::
-
-
-    <CodeActivity header="Try it out!" projectName="Sequence and Data/Simple Calculator/Read Name">
-    ```c++ {"userCode":10-10}
-    #include "splashkit.h"
-
-    int main()
-    {
-        string name;
-        write("What is your name: ");
-        name = read_line();
-
-        // Try adding a write_line here, to print out the name
-        ####
-
-        return 0;
-    }
-    ```
-    </CodeActivity>
diff --git a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
index ddb2348e..04222889 100644
--- a/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
+++ b/src/content/docs/book/part-1-instructions/1-sequence-and-data/1-tour/02-02-drawing.mdx
@@ -4,7 +4,6 @@ sidebar:
   label: " - Drawing Shapes"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from '/src/components/CodeActivity.astro'
 
 With the window appearing, the next step is to draw some shapes. To start, let's get the hill drawing.
 
@@ -87,27 +86,4 @@ The best way to plan this out is to sketch what you want and to try to figure ou
 
 For this program we are just wanting to draw some fixed shapes, so we can tolerate these hard-coded values for now.
 
-:::
-
-    <CodeActivity header="Try it out!" projectName="Sequence and Data/House Drawing/Drawing Shapes">
-    ```c++ {8,11}
-    #include "splashkit.h"
-
-    int main()
-    {
-        open_window("House Drawing by Andrew", 800, 600);
-
-        // Try clearing the screen first
-        ####
-
-        // Then try drawing an ellipse!
-        ####
-
-        refresh_screen();
-
-        delay(5000);
-
-        return 0;
-    }
-    ```
-    </CodeActivity>
+:::
\ No newline at end of file
diff --git a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
index f55e60f7..debfe281 100644
--- a/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
+++ b/src/content/docs/book/part-2-organised-code/2-organising-code/1-tour/01-03-design-perform-guess.mdx
@@ -4,7 +4,6 @@ sidebar:
   label: " - Perform Guess"
 ---
 import { Accordion, AccordionItem } from 'accessible-astro-components'
-import CodeActivity from '/src/components/CodeActivity.astro'
 
 Now that we have the different functions and procedure, we can now start to design the control flow for the Guess that Number program. For the Guess that Number program we can start by designing the control flow within the `Perform Guess` function. The specification of this is shown the table below. Think about the steps that need to be performed to achieve this. If you had been asked to do this what would you need to do?
 
@@ -185,34 +184,7 @@ int main()
 :::tip
 Remember you can use the `ctrl-c` key combination to generate a signal to kill the program if you get stuck in an infinite loop!
 :::
-    <CodeActivity header="Try it out!" projectName="Organised Code/Structuring Code/Guess That Number/Perform Guess" resources="/resources/code-activities/utilities.zip">
-    ```c++ {"userCode":7-14}
-    #include "splashkit.h"
-    // access to read_integer, read_string, etc...
-    #include "utilities.h"
 
-    using std::to_string;
-
-    // code the start of perform guess here
-
-
-
-
-
-
-
-
-    int main()
-    {
-      while ( ! perform_guess(1, 37) )
-      {
-        write_line("Try again...");
-      }
-
-      return 0;
-    }
-    ```
-    </CodeActivity>
 <Accordion>
   <AccordionItem
     header="Perform guess with result"

From 8dd7b8072eaae565eb7de82beddd2d366a5cb80f Mon Sep 17 00:00:00 2001
From: WhyPenguins <42032199+WhyPenguins@users.noreply.github.com>
Date: Tue, 21 Oct 2025 15:11:23 +1100
Subject: [PATCH 18/18] Reduce flicker on SKO load in online-ide page + fix
 positioning

---
 src/content/docs/book/appendix/online-ide.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/docs/book/appendix/online-ide.mdx b/src/content/docs/book/appendix/online-ide.mdx
index dab0c76f..d9ff5ff3 100644
--- a/src/content/docs/book/appendix/online-ide.mdx
+++ b/src/content/docs/book/appendix/online-ide.mdx
@@ -8,11 +8,13 @@ import { SplashKitOnlineURL } from '/src/components/SplashKitOnlineConstants'
 <style>{`
   #sko-embed {
     position: absolute;
-    bottom: 0;
     left: 0;
     width: 100%;
+    top: var(--sl-nav-height);
     height: calc(100vh - var(--sl-nav-height));
 
+    color-scheme: auto;
+    background-color: #1f1f1f;
     border: none;
   }
 `}</style>