{"id":398,"date":"2026-09-09T20:24:30","date_gmt":"2026-09-09T20:24:30","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=398"},"modified":"2026-09-24T10:13:19","modified_gmt":"2026-09-24T10:13:19","slug":"yr3-term-1-1-2-internet-safety","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-2-internet-safety\/","title":{"rendered":"Yr3 Term 1.1.2 Play Like Share &amp; Introduction to Code.org"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 10px;\">\n\n  <p><strong>Welcome to Year 3 Computing \u2014 Lesson 2! \ud83c\udfac\ud83e\udd16<\/strong><\/p>\n  <p>Today we are diving into online safety with <strong>Play Like Share<\/strong> and taking our very first steps into coding on <strong>Code.org<\/strong>! We will learn how to handle tricky online situations, practice being kind digital citizens, and start controlling computers with code. Let&#8217;s get started!<\/p>\n\n  <p><strong>Step 1: Keyboard Warm-up \u2328\ufe0f (10 Mins)<\/strong><\/p>\n  <ul>\n    <li>Click here to warm up your fingers on our typing site: <a href=\"https:\/\/ndovu.org.uk\/type\/\" target=\"_blank\" rel=\"noopener\">Start Typing Practice on Ndovu<\/a>.<\/li>\n    <li>Practice typing key online safety and coding terms: <em>block, report, friend, trusted adult, algorithm, and code<\/em>. Focus on light, accurate keystrokes!<\/li>\n  <\/ul>\n\n  <p><strong>Step 2: Interactive Safety Studio \u2014 Play Like Share \ud83d\udee1\ufe0f (25 Mins)<\/strong><\/p>\n  <p>Watch Episode 1 of <em>Play Like Share<\/em> (&#8220;Block Him Right Good, Alfie&#8221;) below or visit <a href=\"https:\/\/www.thinkuknow.co.uk\/8_10\/watch\/\" target=\"_blank\" rel=\"noopener\">ThinkUKnow<\/a> with your teacher. Then complete the interactive module below!<\/p>\n\n  <!-- VIDEO EMBED -->\n  <div style=\"text-align: center; margin: 20px 0;\">\n    <iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/WpngtGyc_ec\" title=\"Play Like Share Episode 1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" style=\"border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 100%;\"><\/iframe>\n  <\/div>\n\n  <!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n  <div id=\"y3-l2-widget\" style=\"max-width: 850px; margin: 20px auto; font-family: Arial, sans-serif; border: 2px solid #ddd; border-radius: 10px; padding: 20px; background-color: #fcfcfc; box-shadow: 0 4px 8px rgba(0,0,0,0.05);\">\n\n    <!-- Progress Bar -->\n    <div style=\"width: 100%; background-color: #e0e0e0; border-radius: 5px; margin-bottom: 20px;\">\n      <div id=\"y3-l2-progress\" style=\"width: 25%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n    <\/div>\n\n    <!-- Slide 1: Video Comprehension Questions -->\n    <div class=\"y3-l2-slide\" id=\"y3-l2-slide-0\" style=\"display: block;\">\n      <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: Exploring Play Like Share (Episode 1)<\/h2>\n      <p>Answer the questions below based on what happened to Sam, Ellie, and Alfie in the video:<\/p>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">1. What problem did Alfie face when a gamer messaged him?<\/label>\n        <input type=\"text\" id=\"y3-q-alfie-problem\" placeholder=\"e.g., A gamer messaged him to play...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">2. What 3 smart actions did Alfie take when he felt uncomfortable?<\/label>\n        <input type=\"text\" id=\"y3-q-alfie-actions\" placeholder=\"e.g., Didn't reply, told a trusted adult...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 15px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">3. What happened when Selfie&#8217;s video was made public?<\/label>\n        <input type=\"text\" id=\"y3-q-selfie-video\" placeholder=\"e.g., Strangers wrote nasty comments...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"text-align: right;\">\n        <button type=\"button\" id=\"btn-next-0\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Being Kind Online<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 2: Being Kind Online -->\n    <div class=\"y3-l2-slide\" id=\"y3-l2-slide-1\" style=\"display: none;\">\n      <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Being Kind Online<\/h2>\n      <p>In the cartoon, <em>The Popcorn Wizards<\/em> posted a mean comment about Alfie, and Sam &#8216;liked&#8217; it. When we post online, we must always think about how our words make others feel!<\/p>\n      <p>Choose or write positive words to describe each character (Word Bank: <em>Talented, Supportive, Creative, Kind, Friendly, Brave, Helpful<\/em>):<\/p>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">Positive words for Ellie:<\/label>\n        <input type=\"text\" id=\"y3-words-ellie\" placeholder=\"e.g., Creative, talented...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">Positive words for Alfie:<\/label>\n        <input type=\"text\" id=\"y3-words-alfie\" placeholder=\"e.g., Brave, honest...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 15px;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">Positive words for Sam:<\/label>\n        <input type=\"text\" id=\"y3-words-sam\" placeholder=\"e.g., Musical...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n      <\/div>\n      <div style=\"text-align: right;\">\n        <button type=\"button\" id=\"btn-next-1\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Kindness Drawing<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 3: Drawing Kindness Poster -->\n    <div class=\"y3-l2-slide\" id=\"y3-l2-slide-2\" style=\"display: none;\">\n      <h2 style=\"margin-top:0; color: #0073aa;\">Step 3: Draw an Online Kindness Badge<\/h2>\n      <p>Use the enlarged canvas below to draw an online kindness badge or shield showing what to do if someone is unkind online (e.g., <strong>Block, Report, Tell a Trusted Adult<\/strong>):<\/p>\n      \n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n        \n        <!-- Toolbar -->\n        <div style=\"margin-bottom: 15px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n          <button type=\"button\" id=\"btn-tool-brush\" style=\"background-color: #0073aa; color: white; border: 2px solid #00507a; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;\">\ud83d\udd8c\ufe0f Brush<\/button>\n          <button type=\"button\" id=\"btn-tool-eraser\" style=\"background-color: #e0e0e0; color: #333; border: 2px solid #ccc; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;\">\ud83e\uddfc Eraser<\/button>\n          \n          <label style=\"font-size: 13px; margin-left: 10px; font-weight: bold;\">Color:<\/label>\n          <input type=\"color\" id=\"y3-l2-color\" value=\"#0073aa\" style=\"cursor: pointer;\">\n          \n          <label style=\"font-size: 13px; margin-left: 10px; font-weight: bold;\">Size:<\/label>\n          <input type=\"range\" id=\"y3-l2-size\" min=\"2\" max=\"30\" value=\"6\" style=\"cursor: pointer;\">\n          \n          <button type=\"button\" id=\"btn-clear-canvas\" style=\"background: #ff4c4c; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-left: 10px;\">\ud83d\uddd1\ufe0f Clear Canvas<\/button>\n        <\/div>\n\n        <!-- Doubled Canvas Size: 800x500 -->\n        <canvas id=\"y3-canvas-l2\" width=\"800\" height=\"500\" style=\"border: 2px dashed #0073aa; border-radius: 5px; background: #fafafa; cursor: crosshair; touch-action: none; width: 100%; max-width: 800px; box-sizing: border-box;\"><\/canvas>\n      <\/div>\n\n      <div style=\"text-align: right;\">\n        <button type=\"button\" id=\"btn-next-2\" style=\"background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Finish &amp; Download Report<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 4: Download Report -->\n    <div class=\"y3-l2-slide\" id=\"y3-l2-slide-3\" style=\"display: none; text-align: center;\">\n      <h2 style=\"margin-top:0; color: #0073aa;\">Online Safety Module Complete!<\/h2>\n      <p>Your answers and kindness artwork have been saved into a report. Download your file as an image and paste it into your personal student network folder.<\/p>\n      <button type=\"button\" id=\"btn-download\" style=\"background-color: #4CAF50; color: white; border: none; padding: 15px 25px; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: bold;\">\ud83d\udcbe Download Safety Poster (PNG)<\/button>\n    <\/div>\n  <\/div>\n\n  <p><strong>Step 3: Let&#8217;s Code! (15 Mins)<\/strong><\/p>\n  <p>Now that we know how to stay safe and kind online, let&#8217;s start coding! Click the blue buttons to build an algorithm that moves the chicken to the corn. Watch out for the fox!<\/p>\n  <div id=\"coding-game-container\" style=\"display: flex; flex-wrap: wrap; gap: 20px; border: 2px solid #ddd; border-radius: 10px; padding: 20px; background-color: #fcfcfc; box-shadow: 0 4px 8px rgba(0,0,0,0.05); margin: 20px 0;\">\n    <div>\n      <div id=\"game-board\" style=\"width: 300px; height: 300px; background-color: #8BC34A; position: relative; border: 4px solid #558b2f; border-radius: 8px; background-image: linear-gradient(#7cb342 2px, transparent 2px), linear-gradient(90deg, #7cb342 2px, transparent 2px); background-size: 60px 60px;\">\n        <div id=\"sprite-corn\" style=\"width: 60px; height: 60px; position: absolute; font-size: 40px; text-align: center; line-height: 60px; left: 240px; top: 180px;\">\ud83c\udf3d<\/div>\n        <div id=\"sprite-fox\" style=\"width: 60px; height: 60px; position: absolute; font-size: 40px; text-align: center; line-height: 60px; left: 120px; top: 120px;\">\ud83e\udd8a<\/div>\n        <div id=\"sprite-chicken\" style=\"width: 60px; height: 60px; position: absolute; left: 0px; top: 120px; z-index: 10; transition: left 0.3s ease, top 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 28px;\">\n          <span id=\"chicken-emoji\" style=\"display: inline-block; transform: scaleX(-1);\">\ud83d\udc14<\/span>\n          <span id=\"dir-arrow\" style=\"position: absolute; font-size: 20px; text-shadow: 1px 1px 2px white; z-index: 11; right: -5px; bottom: 0px; transition: transform 0.3s ease;\">\u27a1\ufe0f<\/span>\n        <\/div>\n      <\/div>\n      <p id=\"game-message\" style=\"font-weight: bold; font-size: 18px; color: #333; margin-top: 10px; height: 25px;\"><\/p>\n    <\/div>\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px;\">\n      <div style=\"background: #e6f2f8; padding: 15px; border-radius: 8px; border: 1px solid #b3d4e6;\">\n        <h4 style=\"margin-top: 0; color: #0073aa;\">1. Click to add commands:<\/h4>\n        <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\n          <button id=\"btn-move\" style=\"background: #0073aa; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold;\">Move Forward<\/button>\n          <button id=\"btn-left\" style=\"background: #0073aa; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold;\">Turn Left<\/button>\n          <button id=\"btn-right\" style=\"background: #0073aa; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold;\">Turn Right<\/button>\n        <\/div>\n      <\/div>\n      <div style=\"flex: 1; border: 2px dashed #ccc; border-radius: 8px; padding: 10px; background: #fff; display: flex; flex-direction: column;\">\n        <h4 style=\"margin-top: 0; color: #555;\">2. Your Algorithm:<\/h4>\n        <div id=\"algorithm-list\" style=\"display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; max-height: 150px;\"><\/div>\n        <button id=\"btn-clear\" style=\"background: #e53935; color: white; border: none; padding: 8px; border-radius: 5px; cursor: pointer; font-size: 12px; margin-top: 10px; align-self: flex-start;\">Clear All<\/button>\n      <\/div>\n      <div style=\"display: flex; gap: 10px;\">\n        <button id=\"btn-run\" style=\"background: #4CAF50; color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; flex: 1;\">Run Code<\/button>\n        <button id=\"btn-reset\" style=\"background: #ff9800; color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Reset<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <p><strong>Step 4: Log Off and Reflect \ud83d\udc4b (10 Mins)<\/strong><\/p>\n  <ul>\n    <li><strong>Exit Ticket:<\/strong> What three things should you do if an unknown person tries to chat with you online or makes you feel uncomfortable? (<em>Ignore\/Don&#8217;t reply, Block, Tell a trusted adult!<\/em>)<\/li>\n    <li>Log out securely from your PC and ensure your workstation is left clean and tidy!<\/li>\n  <\/ul>\n\n<\/div>\n<script>\n\/* <![CDATA[ *\/\ndocument.addEventListener('DOMContentLoaded', function() {\n  \n  \/\/ 1. STATE OBJECT\n  window.Y3Game = {\n    alfieProblem: \"\", alfieActions: \"\", selfieVideo: \"\",\n    wordsEllie: \"\", wordsAlfie: \"\", wordsSam: \"\", artworkImg: \"\",\n    isDrawing: false, currentTool: 'brush',\n    chicken: { x: 0, y: 2, facing: \"east\" },\n    goal: { x: 4, y: 3 }, fox: { x: 2, y: 2 },\n    userCommands: [], isRunning: false, executionQueue: []\n  };\n\n  \/\/ 2. CANVAS SETUP WITH ERASER &#038; RESPONSIVE SCALING\n  function y3SetupCanvas() {\n    var cvs = document.getElementById(\"y3-canvas-l2\");\n    if (!cvs) return;\n    var ctx = cvs.getContext(\"2d\");\n    \n    \/\/ Fill with canvas background color so eraser works correctly\n    ctx.fillStyle = '#fafafa';\n    ctx.fillRect(0, 0, cvs.width, cvs.height);\n\n    function getMousePos(e) {\n      var rect = cvs.getBoundingClientRect();\n      var scaleX = cvs.width \/ rect.width;\n      var scaleY = cvs.height \/ rect.height;\n      var clientX = e.touches ? e.touches[0].clientX : e.clientX;\n      var clientY = e.touches ? e.touches[0].clientY : e.clientY;\n      return {\n        x: (clientX - rect.left) * scaleX,\n        y: (clientY - rect.top) * scaleY,\n        scale: scaleX\n      };\n    }\n\n    function startDraw(e) {\n      window.Y3Game.isDrawing = true;\n      var pos = getMousePos(e);\n      ctx.beginPath();\n      ctx.moveTo(pos.x, pos.y);\n    }\n\n    function draw(e) {\n      if (!window.Y3Game.isDrawing) return;\n      var pos = getMousePos(e);\n      var colorEl = document.getElementById(\"y3-l2-color\");\n      var sizeEl = document.getElementById(\"y3-l2-size\");\n      \n      \/\/ Select color based on tool (eraser uses background color)\n      if (window.Y3Game.currentTool === 'eraser') {\n        ctx.strokeStyle = '#fafafa';\n      } else {\n        ctx.strokeStyle = colorEl ? colorEl.value : \"#0073aa\";\n      }\n      \n      var brushSize = sizeEl ? parseInt(sizeEl.value) : 6;\n      ctx.lineWidth = brushSize * (pos.scale > 1 ? pos.scale \/ 1.5 : 1);\n      ctx.lineCap = \"round\";\n      ctx.lineJoin = \"round\";\n      ctx.lineTo(pos.x, pos.y);\n      ctx.stroke();\n      ctx.beginPath();\n      ctx.moveTo(pos.x, pos.y);\n    }\n\n    function stopDraw() { window.Y3Game.isDrawing = false; ctx.beginPath(); }\n\n    cvs.onmousedown = startDraw;\n    cvs.onmousemove = draw;\n    cvs.onmouseup = stopDraw;\n    cvs.onmouseleave = stopDraw;\n    cvs.ontouchstart = function(e) { startDraw(e); e.preventDefault(); };\n    cvs.ontouchmove = function(e) { draw(e); e.preventDefault(); };\n    cvs.ontouchend = stopDraw;\n  }\n\n  \/\/ 3. GAME LOGIC\n  function y3UpdateSprite() {\n    var cEl = document.getElementById(\"sprite-chicken\");\n    var tEl = document.getElementById(\"chicken-emoji\");\n    var aEl = document.getElementById(\"dir-arrow\");\n    if (!cEl || !tEl || !aEl) return;\n    \n    var g = window.Y3Game;\n    cEl.style.left = (60 * g.chicken.x) + \"px\";\n    cEl.style.top = (60 * g.chicken.y) + \"px\";\n    \n    if (g.chicken.facing === \"east\") { aEl.style.transform = \"rotate(0deg)\"; tEl.style.transform = \"scaleX(-1)\"; }\n    else if (g.chicken.facing === \"west\") { aEl.style.transform = \"rotate(180deg)\"; tEl.style.transform = \"scaleX(1)\"; }\n    else if (g.chicken.facing === \"north\") { aEl.style.transform = \"rotate(-90deg)\"; tEl.style.transform = \"scaleX(-1)\";}\n    else if (g.chicken.facing === \"south\") { aEl.style.transform = \"rotate(90deg)\"; tEl.style.transform = \"scaleX(-1)\";}\n  }\n\n  function y3ExecuteNext() {\n    var g = window.Y3Game;\n    var msg = document.getElementById(\"game-message\");\n    \n    if (g.executionQueue.length === 0) {\n      g.isRunning = false;\n      if (g.chicken.x === g.goal.x && g.chicken.y === g.goal.y) {\n        if (msg) { msg.innerText = \"You reached the corn! Great job!\"; msg.style.color = \"#2e7d32\"; }\n      } else {\n        if (msg) { msg.innerText = \"Not quite there. Try changing your code!\"; msg.style.color = \"#d32f2f\"; }\n      }\n      return;\n    }\n    \n    var cmd = g.executionQueue.shift();\n    if (cmd === \"move\") {\n      var nx = g.chicken.x;\n      var ny = g.chicken.y;\n      if (g.chicken.facing === \"east\") nx++;\n      if (g.chicken.facing === \"west\") nx--;\n      if (g.chicken.facing === \"south\") ny++;\n      if (g.chicken.facing === \"north\") ny--;\n      \n      if (nx !== -1 && nx !== 5 && ny !== -1 && ny !== 5) {\n        g.chicken.x = nx;\n        g.chicken.y = ny;\n      } else {\n        if (msg) { msg.innerText = \"Oops! You hit the wall.\"; msg.style.color = \"#d32f2f\"; }\n        g.isRunning = false;\n        return;\n      }\n    } else if (cmd === \"left\") {\n      var leftTurns = { \"north\":\"west\", \"west\":\"south\", \"south\":\"east\", \"east\":\"north\" };\n      g.chicken.facing = leftTurns[g.chicken.facing];\n    } else if (cmd === \"right\") {\n      var rightTurns = { \"north\":\"east\", \"east\":\"south\", \"south\":\"west\", \"west\":\"north\" };\n      g.chicken.facing = rightTurns[g.chicken.facing];\n    }\n    \n    y3UpdateSprite();\n    \n    if (g.chicken.x === g.fox.x && g.chicken.y === g.fox.y) {\n      setTimeout(function() {\n        if (msg) { msg.innerText = \"Oh no! The fox got the chicken!\"; msg.style.color = \"#d32f2f\"; }\n        g.isRunning = false;\n      }, 300);\n      return;\n    }\n    \n    setTimeout(y3ExecuteNext, 500);\n  }\n\n  \/\/ 4. GLOBAL CLICK HANDLER\n  document.addEventListener(\"click\", function(e) {\n    var btn = e.target.closest(\"button\");\n    if (!btn) return;\n    var id = btn.id;\n    var g = window.Y3Game;\n    \n    \/\/ Slide Navigation\n    if (id === \"btn-next-0\") {\n      var a = document.getElementById(\"y3-q-alfie-problem\").value.trim();\n      var b = document.getElementById(\"y3-q-alfie-actions\").value.trim();\n      var c = document.getElementById(\"y3-q-selfie-video\").value.trim();\n      if (!a || !b || !c) { alert(\"Please answer all questions before continuing!\"); return; }\n      g.alfieProblem = a; g.alfieActions = b; g.selfieVideo = c;\n      document.getElementById(\"y3-l2-slide-0\").style.display = \"none\";\n      document.getElementById(\"y3-l2-slide-1\").style.display = \"block\";\n      document.getElementById(\"y3-l2-progress\").style.width = \"50%\";\n    } \n    else if (id === \"btn-next-1\") {\n      var ae = document.getElementById(\"y3-words-ellie\").value.trim();\n      var be = document.getElementById(\"y3-words-alfie\").value.trim();\n      var ce = document.getElementById(\"y3-words-sam\").value.trim();\n      if (!ae || !be || !ce) { alert(\"Please fill in positive words for all characters!\"); return; }\n      g.wordsEllie = ae; g.wordsAlfie = be; g.wordsSam = ce;\n      document.getElementById(\"y3-l2-slide-1\").style.display = \"none\";\n      document.getElementById(\"y3-l2-slide-2\").style.display = \"block\";\n      document.getElementById(\"y3-l2-progress\").style.width = \"75%\";\n      setTimeout(y3SetupCanvas, 100);\n    } \n    else if (id === \"btn-next-2\") {\n      document.getElementById(\"y3-l2-slide-2\").style.display = \"none\";\n      document.getElementById(\"y3-l2-slide-3\").style.display = \"block\";\n      document.getElementById(\"y3-l2-progress\").style.width = \"100%\";\n    } \n    \n    \/\/ Tools\n    else if (id === \"btn-tool-brush\") {\n      g.currentTool = 'brush';\n      btn.style.backgroundColor = '#0073aa'; btn.style.color = 'white';\n      var erBtn = document.getElementById('btn-tool-eraser');\n      if (erBtn) { erBtn.style.backgroundColor = '#e0e0e0'; erBtn.style.color = '#333'; }\n    }\n    else if (id === \"btn-tool-eraser\") {\n      g.currentTool = 'eraser';\n      btn.style.backgroundColor = '#0073aa'; btn.style.color = 'white';\n      var brBtn = document.getElementById('btn-tool-brush');\n      if (brBtn) { brBtn.style.backgroundColor = '#e0e0e0'; brBtn.style.color = '#333'; }\n    }\n    else if (id === \"btn-clear-canvas\") {\n      var cvs = document.getElementById(\"y3-canvas-l2\");\n      if (cvs && confirm('Are you sure you want to clear your artwork?')) {\n        var ctx = cvs.getContext(\"2d\");\n        ctx.fillStyle = '#fafafa';\n        ctx.fillRect(0, 0, cvs.width, cvs.height);\n      }\n    }\n    \n    \/\/ Download Single PNG\n    else if (id === \"btn-download\") {\n      var expCanvas = document.createElement('canvas');\n      expCanvas.width = 800;\n      expCanvas.height = 1500; \/\/ Tall enough to fit questions + image\n      var ctxExp = expCanvas.getContext('2d');\n\n      ctxExp.fillStyle = '#ffffff';\n      ctxExp.fillRect(0, 0, expCanvas.width, expCanvas.height);\n\n      function wrapText(context, text, x, y, maxWidth, lineHeight) {\n        var words = text.split(' ');\n        var line = '';\n        for (var n = 0; n !== words.length; n++) {\n          var testLine = line + words[n] + ' ';\n          var metrics = context.measureText(testLine);\n          if (metrics.width > maxWidth && n !== 0) {\n            context.fillText(line, x, y);\n            line = words[n] + ' ';\n            y += lineHeight;\n          } else {\n            line = testLine;\n          }\n        }\n        context.fillText(line, x, y);\n        return y + lineHeight;\n      }\n\n      var startY = 60;\n      \n      \/\/ Header\n      ctxExp.fillStyle = '#0073aa';\n      ctxExp.font = 'bold 32px Arial';\n      ctxExp.fillText('Year 3: Safety Report', 40, startY); startY += 60;\n\n      \/\/ Section 1\n      ctxExp.fillStyle = '#e65100';\n      ctxExp.font = 'bold 24px Arial';\n      ctxExp.fillText('Video Discussion', 40, startY); startY += 40;\n\n      ctxExp.fillStyle = '#333333';\n      ctxExp.font = 'bold 18px Arial';\n      ctxExp.fillText('Alfie\\'s Problem:', 40, startY); startY += 25;\n      ctxExp.font = 'normal 18px Arial';\n      startY = wrapText(ctxExp, g.alfieProblem || 'N\/A', 40, startY, 720, 24); startY += 20;\n\n      ctxExp.font = 'bold 18px Arial';\n      ctxExp.fillText('Alfie\\'s Safe Actions:', 40, startY); startY += 25;\n      ctxExp.font = 'normal 18px Arial';\n      startY = wrapText(ctxExp, g.alfieActions || 'N\/A', 40, startY, 720, 24); startY += 20;\n\n      ctxExp.font = 'bold 18px Arial';\n      ctxExp.fillText('Public Video Impact:', 40, startY); startY += 25;\n      ctxExp.font = 'normal 18px Arial';\n      startY = wrapText(ctxExp, g.selfieVideo || 'N\/A', 40, startY, 720, 24); startY += 40;\n\n      \/\/ Section 2\n      ctxExp.fillStyle = '#e65100';\n      ctxExp.font = 'bold 24px Arial';\n      ctxExp.fillText('Being Kind Online (Positive Words)', 40, startY); startY += 40;\n\n      ctxExp.fillStyle = '#333333';\n      ctxExp.font = 'normal 18px Arial';\n      ctxExp.fillText('Ellie: ' + (g.wordsEllie || 'N\/A'), 40, startY); startY += 30;\n      ctxExp.fillText('Alfie: ' + (g.wordsAlfie || 'N\/A'), 40, startY); startY += 30;\n      ctxExp.fillText('Sam: ' + (g.wordsSam || 'N\/A'), 40, startY); startY += 50;\n\n      \/\/ Section 3\n      ctxExp.fillStyle = '#e65100';\n      ctxExp.font = 'bold 24px Arial';\n      ctxExp.fillText('Online Kindness Badge', 40, startY); startY += 40;\n\n      var srcCvs = document.getElementById(\"y3-canvas-l2\");\n      if (srcCvs) {\n        ctxExp.drawImage(srcCvs, 40, startY, 720, 450); \/\/ Paste Canvas\n      }\n\n      var dataURL = expCanvas.toDataURL('image\/png');\n      var a = document.createElement('a');\n      a.href = dataURL;\n      a.download = 'Year3_Lesson2_Safety_Report.png';\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n      \n      alert(\"Safety Report downloaded! You can now paste this PNG directly into your Word Document.\");\n    } \n    \n    \/\/ --- GAME BUTTONS ---\n    var list = document.getElementById(\"algorithm-list\");\n    var msg = document.getElementById(\"game-message\");\n    \n    if (id === \"btn-move\") {\n      if (g.isRunning) return;\n      g.userCommands.push(\"move\");\n      if (list) {\n        var el = document.createElement(\"div\");\n        el.style.background = \"#0073aa\"; el.style.color = \"white\"; el.style.padding = \"8px 12px\"; el.style.marginBottom = \"5px\"; el.style.borderRadius = \"4px\"; el.style.fontWeight = \"bold\";\n        el.innerText = \"Move Forward\";\n        list.appendChild(el);\n      }\n    } \n    else if (id === \"btn-left\") {\n      if (g.isRunning) return;\n      g.userCommands.push(\"left\");\n      if (list) {\n        var e2 = document.createElement(\"div\");\n        e2.style.background = \"#0073aa\"; e2.style.color = \"white\"; e2.style.padding = \"8px 12px\"; e2.style.marginBottom = \"5px\"; e2.style.borderRadius = \"4px\"; e2.style.fontWeight = \"bold\";\n        e2.innerText = \"Turn Left\";\n        list.appendChild(e2);\n      }\n    } \n    else if (id === \"btn-right\") {\n      if (g.isRunning) return;\n      g.userCommands.push(\"right\");\n      if (list) {\n        var e3 = document.createElement(\"div\");\n        e3.style.background = \"#0073aa\"; e3.style.color = \"white\"; e3.style.padding = \"8px 12px\"; e3.style.marginBottom = \"5px\"; e3.style.borderRadius = \"4px\"; e3.style.fontWeight = \"bold\";\n        e3.innerText = \"Turn Right\";\n        list.appendChild(e3);\n      }\n    } \n    else if (id === \"btn-clear\") {\n      if (g.isRunning) return;\n      g.userCommands = [];\n      if (list) list.innerHTML = \"\";\n      g.chicken = { x: 0, y: 2, facing: \"east\" };\n      if (msg) msg.innerText = \"\";\n      y3UpdateSprite();\n    } \n    else if (id === \"btn-reset\") {\n      if (g.isRunning) return;\n      g.chicken = { x: 0, y: 2, facing: \"east\" };\n      if (msg) msg.innerText = \"\";\n      y3UpdateSprite();\n    } \n    else if (id === \"btn-run\") {\n      if (g.isRunning || g.userCommands.length === 0) return;\n      g.chicken = { x: 0, y: 2, facing: \"east\" };\n      if (msg) { msg.innerText = \"Running...\"; msg.style.color = \"#333\"; }\n      y3UpdateSprite();\n      g.executionQueue = g.userCommands.slice();\n      g.isRunning = true;\n      setTimeout(y3ExecuteNext, 300);\n    }\n  });\n\n  setTimeout(y3UpdateSprite, 1000);\n});\n\/* ]]> *\/\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Year 3 Computing \u2014 Lesson 2! \ud83c\udfac\ud83e\udd16 Today we are diving into online safety with Play Like Share and taking our very first&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-2-internet-safety\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.2 Play Like Share &amp; Introduction to Code.org<\/span><\/a><\/div>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-398","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":18,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/398\/revisions\/520"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}