diff --git a/_notebooks/2023-09-22-dogsprite.ipynb b/_notebooks/2023-09-22-dogsprite.ipynb
index dfeecfe..9404327 100644
--- a/_notebooks/2023-09-22-dogsprite.ipynb
+++ b/_notebooks/2023-09-22-dogsprite.ipynb
@@ -20,13 +20,18 @@
    "metadata": {},
    "source": [
     "\n",
-    "\n",
+    "<html>\n",
+    "<head>\n",
+    "    <style>\n",
+    "        /* Add any necessary CSS styles here */\n",
+    "    </style>\n",
+    "</head>\n",
     "<body>\n",
     "    <div>\n",
-    "        <canvas id=\"spriteContainer\"> <!-- Within the base div is a canvas. An HTML canvas is used only for graphics. It allows the user to access some basic functions related to the image created on the canvas (including animation) -->\n",
-    "            <img id=\"dogSprite\" src=\"{{site.baseurl}}/images/dogSprite.png\">  \n",
+    "        <canvas id=\"spriteContainer\">\n",
+    "            <img id=\"dogSprite\" src=\"{{site.baseurl}}/images/dogSprite.png\">\n",
     "        </canvas>\n",
-    "        <div id=\"controls\"> <!--basic radio buttons which can be used to check whether each individual animaiton works -->\n",
+    "        <div id=\"controls\">\n",
     "            <input type=\"radio\" name=\"animation\" id=\"idle\" checked>\n",
     "            <label for=\"idle\">Idle</label><br>\n",
     "            <input type=\"radio\" name=\"animation\" id=\"barking\">\n",
@@ -35,107 +40,105 @@
     "            <label for=\"walking\">Walking</label><br>\n",
     "        </div>\n",
     "    </div>\n",
-    "</body>\n",
-    "\n",
-    "<script>\n",
-    "    // start on page load\n",
-    "    window.addEventListener('load', function () {\n",
-    "        const canvas = document.getElementById('spriteContainer');\n",
-    "        const ctx = canvas.getContext('2d');\n",
-    "        const SPRITE_WIDTH = 160;  // matches sprite pixel width\n",
-    "        const SPRITE_HEIGHT = 144; // matches sprite pixel height\n",
-    "        const SCALE_FACTOR = 2;  // control size of sprite on canvas\n",
-    "        const FRAME_LIMIT = 48;  // number of frames per row, this code assume each row is same\n",
-    "        // const FRAME_RATE = 15;  // not used\n",
-    "\n",
-    "        canvas.width = SPRITE_WIDTH * SCALE_FACTOR;\n",
-    "        canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;\n",
-    "\n",
-    "        class Dog {\n",
-    "            constructor() {\n",
-    "                this.image = document.getElementById(\"dogSprite\");\n",
-    "                this.spriteWidth = SPRITE_WIDTH;\n",
-    "                this.spriteHeight = SPRITE_HEIGHT;\n",
-    "                this.width = this.spriteWidth;\n",
-    "                this.height = this.spriteHeight;\n",
-    "                this.x = 0;\n",
-    "                this.y = 0;\n",
-    "                this.scale = SCALE_FACTOR;\n",
-    "                this.minFrame = 0;\n",
-    "                this.maxFrame = FRAME_LIMIT;\n",
-    "                this.frameX = 0;\n",
-    "                this.frameY = 0;\n",
-    "            }\n",
-    "\n",
-    "            // draw dog object\n",
-    "            draw(context) {\n",
-    "                context.drawImage(\n",
-    "                    this.image,\n",
-    "                    this.frameX * this.spriteWidth,\n",
-    "                    this.frameY * this.spriteHeight,\n",
-    "                    this.spriteWidth,\n",
-    "                    this.spriteHeight,\n",
-    "                    this.x,\n",
-    "                    this.y,\n",
-    "                    this.width * this.scale,\n",
-    "                    this.height * this.scale\n",
-    "                );\n",
-    "            }\n",
-    "\n",
-    "            // update frameX of object\n",
-    "            update() {\n",
-    "                if (this.frameX < this.maxFrame) {\n",
-    "                    this.frameX++;\n",
-    "                } else {\n",
+    "    <script>\n",
+    "        window.addEventListener('load', function () {\n",
+    "            const canvas = document.getElementById('spriteContainer');\n",
+    "            const ctx = canvas.getContext('2d');\n",
+    "            const SPRITE_WIDTH = 160;\n",
+    "            const SPRITE_HEIGHT = 144;\n",
+    "            const SCALE_FACTOR = 2;\n",
+    "            const FRAME_LIMIT = 48;\n",
+    "            canvas.width = SPRITE_WIDTH * SCALE_FACTOR;\n",
+    "            canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;\n",
+    "            class Dog {\n",
+    "                constructor() {\n",
+    "                    this.image = document.getElementById(\"dogSprite\");\n",
+    "                    this.spriteWidth = SPRITE_WIDTH;\n",
+    "                    this.spriteHeight = SPRITE_HEIGHT;\n",
+    "                    this.width = this.spriteWidth;\n",
+    "                    this.height = this.spriteHeight;\n",
+    "                    this.x = 0;\n",
+    "                    this.y = 0;\n",
+    "                    this.scale = SCALE_FACTOR;\n",
+    "                    this.minFrame = 0;\n",
+    "                    this.maxFrame = FRAME_LIMIT;\n",
     "                    this.frameX = 0;\n",
+    "                    this.frameY = 0;\n",
+    "                }\n",
+    "                draw(context) {\n",
+    "                    context.drawImage(\n",
+    "                        this.image,\n",
+    "                        this.frameX * this.spriteWidth,\n",
+    "                        this.frameY * this.spriteHeight,\n",
+    "                        this.spriteWidth,\n",
+    "                        this.spriteHeight,\n",
+    "                        this.x,\n",
+    "                        this.y,\n",
+    "                        this.width * this.scale,\n",
+    "                        this.height * this.scale\n",
+    "                    );\n",
+    "                }\n",
+    "                update() {\n",
+    "                    if (this.frameX < this.maxFrame) {\n",
+    "                        this.frameX++;\n",
+    "                    } else {\n",
+    "                        this.frameX = 0;\n",
+    "                    }\n",
     "                }\n",
     "            }\n",
-    "        }\n",
-    "\n",
-    "        // dog object\n",
-    "        const dog = new Dog();\n",
-    "\n",
-    "        // update frameY of dog object, action from idle, bark, walk radio control\n",
-    "        const controls = document.getElementById('controls');\n",
-    "        controls.addEventListener('click', function (event) {\n",
-    "            if (event.target.tagName === 'INPUT') {\n",
-    "                const selectedAnimation = event.target.id;\n",
-    "                switch (selectedAnimation) {\n",
-    "                    case 'idle':\n",
-    "                        dog.frameY = 0;\n",
-    "                        break;\n",
-    "                    case 'barking':\n",
-    "                        dog.frameY = 1;\n",
-    "                        break;\n",
-    "                    case 'walking':\n",
-    "                        dog.frameY = 2;\n",
-    "                        break;\n",
-    "                    default:\n",
-    "                        break;\n",
+    "            const dog = new Dog();\n",
+    "            const controls = document.getElementById('controls');\n",
+    "            controls.addEventListener('click', function (event) {\n",
+    "                if (event.target.tagName === 'INPUT') {\n",
+    "                    const selectedAnimation = event.target.id;\n",
+    "                    switch (selectedAnimation) {\n",
+    "                        case 'idle':\n",
+    "                            dog.frameY = 0;\n",
+    "                            break;\n",
+    "                        case 'barking':\n",
+    "                            dog.frameY = 1;\n",
+    "                            break;\n",
+    "                        case 'walking':\n",
+    "                            dog.frameY = 2;\n",
+    "                            break;\n",
+    "                        default:\n",
+    "                            break;\n",
+    "                    }\n",
+    "                }\n",
+    "            });\n",
+    "            const keys = {};\n",
+    "            document.addEventListener('keydown', (event) => {\n",
+    "                keys[event.key] = true;\n",
+    "            });\n",
+    "            document.addEventListener('keyup', (event) => {\n",
+    "                keys[event.key] = false;\n",
+    "            });\n",
+    "            function handleMovement() {\n",
+    "                if (keys['w']) {\n",
+    "                    dog.y -= 5;\n",
+    "                }\n",
+    "                if (keys['s']) {\n",
+    "                    dog.y += 5;\n",
     "                }\n",
+    "                if (keys['a']) {\n",
+    "                    dog.x -= 5;\n",
+    "                }\n",
+    "                if (keys['d']) {\n",
+    "                    dog.x += 5;\n",
+    "                }\n",
+    "            }\n",
+    "            function animate() {\n",
+    "                ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
+    "                dog.draw(ctx);\n",
+    "                dog.update();\n",
+    "                handleMovement();\n",
+    "                requestAnimationFrame(animate);\n",
     "            }\n",
+    "            animate();\n",
     "        });\n",
-    "\n",
-    "        // Animation recursive control function\n",
-    "        function animate() {\n",
-    "            // Clears the canvas to remove the previous frame.\n",
-    "            ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
-    "\n",
-    "            // Draws the current frame of the sprite.\n",
-    "            dog.draw(ctx);\n",
-    "\n",
-    "            // Updates the `frameX` property to prepare for the next frame in the sprite sheet.\n",
-    "            dog.update();\n",
-    "\n",
-    "            // Uses `requestAnimationFrame` to synchronize the animation loop with the display's refresh rate,\n",
-    "            // ensuring smooth visuals.\n",
-    "            requestAnimationFrame(animate);\n",
-    "        }\n",
-    "\n",
-    "        // run 1st animate\n",
-    "        animate();\n",
-    "    });\n",
-    "</script>"
+    "    </script>\n",
+    "</body>\n",
+    "</html>"
    ]
   }
  ],
