{"id":405,"date":"2026-09-09T20:36:11","date_gmt":"2026-09-09T20:36:11","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=405"},"modified":"2026-09-24T10:04:36","modified_gmt":"2026-09-24T10:04:36","slug":"yr3-term-1-1-3-whats-okay-to-share","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-3-whats-okay-to-share\/","title":{"rendered":"Yr3 Term 1.1.3 Whats okay to share?"},"content":{"rendered":"\n<p><strong>Welcome to Year 3 Computing \u2014 Lesson 3! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\ud83d\udd12<\/strong><\/p>\n<p>Today we are continuing our online safety journey with <strong>Play Like Share (Episode 2)<\/strong> and taking on <strong>Level 2<\/strong> of our coding maze! We will learn about protecting our passwords, understanding our digital footprint, and programming a sequence of turns.<\/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 today&#8217;s online safety words: <em>private, public, personal, password, share, and avatar<\/em>. Focus on light, accurate keystrokes!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Safety Studio \u2014 Play Like Share Ep 2 \ud83d\udee1\ufe0f (25 Mins)<\/strong><\/p>\n<p>Watch Episode 2 of <em>Play Like Share<\/em> below. See what happens when Sam makes a mistake with his password and photos!<\/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\/E7sDLmi8Txw\" title=\"Play Like Share Episode 2\" 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-l3-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-l3-progress\" style=\"width: 20%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Video Questions -->\n  <div class=\"y3-l3-slide\" id=\"y3-l3-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: Play Like Share (Episode 2)<\/h2>\n    <p>Answer the questions below based on what happened in the video:<\/p>\n    \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. Why was Ellie upset about the baby photo being shared?<\/label>\n      <input type=\"text\" id=\"y3-q1-video\" placeholder=\"e.g., She only wanted...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n    <\/div>\n    \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. How did the Popcorn Wizards post mean things using Sam&#8217;s account?<\/label>\n      <input type=\"text\" id=\"y3-q2-video\" placeholder=\"e.g., They saw...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n    <\/div>\n    \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. Why is it dangerous to make a personal photo &#8220;Public&#8221;?<\/label>\n      <input type=\"text\" id=\"y3-q3-video\" placeholder=\"e.g., Strangers can...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n    <\/div>\n    \n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-l3-next-0\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Next: Safe or Unsafe? \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Safe vs Unsafe Sorting -->\n  <div class=\"y3-l3-slide\" id=\"y3-l3-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Safe or Unsafe?<\/h2>\n    <p>Look at the types of information below. Use the drop-down menus to decide if it is <strong>Safe to Share<\/strong> or <strong>Unsafe (Private)<\/strong>.<\/p>\n    \n    <div style=\"display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px;\">\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;\">\n        <span style=\"font-weight: bold; font-size: 14px;\">\ud83c\udfe0 Your Home Address<\/span>\n        <select id=\"y3-sort-1\" style=\"padding: 8px; border-radius: 5px; border: 1px solid #0073aa; font-weight: bold; cursor: pointer;\">\n          <option value=\"\">&#8212; Choose &#8212;<\/option><option value=\"Unsafe\">Unsafe (Private)<\/option><option value=\"Safe\">Safe to Share<\/option>\n        <\/select>\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;\">\n        <span style=\"font-weight: bold; font-size: 14px;\">\ud83c\udfae Your Favorite Video Game<\/span>\n        <select id=\"y3-sort-2\" style=\"padding: 8px; border-radius: 5px; border: 1px solid #0073aa; font-weight: bold; cursor: pointer;\">\n          <option value=\"\">&#8212; Choose &#8212;<\/option><option value=\"Unsafe\">Unsafe (Private)<\/option><option value=\"Safe\">Safe to Share<\/option>\n        <\/select>\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;\">\n        <span style=\"font-weight: bold; font-size: 14px;\">\ud83c\udfeb A Photo in your School Uniform<\/span>\n        <select id=\"y3-sort-3\" style=\"padding: 8px; border-radius: 5px; border: 1px solid #0073aa; font-weight: bold; cursor: pointer;\">\n          <option value=\"\">&#8212; Choose &#8212;<\/option><option value=\"Unsafe\">Unsafe (Private)<\/option><option value=\"Safe\">Safe to Share<\/option>\n        <\/select>\n      <\/div>\n      <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;\">\n        <span style=\"font-weight: bold; font-size: 14px;\">\ud83d\udc36 Your Pet&#8217;s Name<\/span>\n        <select id=\"y3-sort-4\" style=\"padding: 8px; border-radius: 5px; border: 1px solid #0073aa; font-weight: bold; cursor: pointer;\">\n          <option value=\"\">&#8212; Choose &#8212;<\/option><option value=\"Unsafe\">Unsafe (Private)<\/option><option value=\"Safe\">Safe to Share<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-l3-next-1\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Next: Tricky Situations \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Tricky Scenario -->\n  <div class=\"y3-l3-slide\" id=\"y3-l3-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #e65100;\">Step 3: Tricky Online Situations<\/h2>\n    <p>Sometimes people online might try to trick you into sharing personal information. Read the scenario below and explain what you would do.<\/p>\n    \n    <div style=\"background: #fff3e0; border-left: 5px solid #ff9800; padding: 15px; margin-bottom: 20px; border-radius: 5px;\">\n      <p style=\"margin: 0; font-size: 15px;\"><strong>Scenario:<\/strong> You are playing Roblox and someone sends you a message saying: <em>&#8220;Hey! I can send you 10,000 free Robux! Just tell me your password and what city you live in so I can send the gift.&#8221;<\/em><\/p>\n    <\/div>\n\n    <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 14px;\">What are the 2 smart things you should do next?<\/label>\n    <textarea id=\"y3-l3-scenario-answer\" rows=\"3\" placeholder=\"e.g., I would never share my password! I would block them and tell my teacher or parent...\" style=\"width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 14px; margin-bottom: 20px;\"><\/textarea>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-l3-next-2\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Next: Avatar Studio \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 4: Drawing Safe Avatar -->\n  <div class=\"y3-l3-slide\" id=\"y3-l3-slide-3\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 4: Safe Gamer Avatar Studio \ud83c\udfa8<\/h2>\n    <p>Using a real photo of your face online is unsafe. Instead, gamers use <strong>Avatars<\/strong> (cartoons or drawings) to represent themselves!<\/p>\n    <p>Use the canvas below to draw your own cool, creative Gamer Avatar that keeps your real identity a secret!<\/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 with Eraser -->\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-l3-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-l3-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-l3-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-l3-size\" min=\"2\" max=\"30\" value=\"6\" style=\"cursor: pointer;\">\n        \n        <button type=\"button\" id=\"btn-l3-clear\" 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<\/button>\n      <\/div>\n\n      <!-- Canvas -->\n      <canvas id=\"y3-l3-canvas\" 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; box-shadow: 0 4px 10px rgba(0,0,0,0.1);\"><\/canvas>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-l3-next-3\" style=\"background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Finish &amp; Download Portfolio \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 5: Download Report -->\n  <div class=\"y3-l3-slide\" id=\"y3-l3-slide-4\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #4CAF50;\">Privacy Mission Complete! \ud83c\udfc6<\/h2>\n    <p>Great job! You have sorted safe and unsafe information, handled a tricky scenario, and drawn your secure avatar.<\/p>\n    <p>Click the button below to download your complete portfolio as an image. You can paste this straight into your Word Document!<\/p>\n    <button type=\"button\" id=\"btn-l3-download\" style=\"background-color: #4CAF50; color: white; border: none; padding: 15px 25px; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: bold; margin-top: 10px;\">\ud83d\udcbe Download Privacy Portfolio Image<\/button>\n  <\/div>\n<\/div>\n\n<p><strong>Step 3: Let&#8217;s Code! Level 2 \ud83d\ude80 (15 Mins)<\/strong><\/p>\n<p>In Level 2, the foxes have blocked the path! You can no longer just move straight forward. You must program the chicken to <strong>Turn Left<\/strong> and <strong>Turn Right<\/strong> to navigate around the foxes and reach the corn!<\/p>\n\n<div id=\"y3-l3-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    <!-- Game Board -->\n    <div id=\"y3-l3-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      <!-- Corn at (4,2) -->\n      <div id=\"y3-l3-sprite-corn\" style=\"width: 60px; height: 60px; position: absolute; font-size: 40px; text-align: center; line-height: 60px; left: 240px; top: 120px;\">\ud83c\udf3d<\/div>\n      \n      <!-- Fox Wall at x=2 -->\n      <div class=\"y3-l3-sprite-fox\" style=\"width: 60px; height: 60px; position: absolute; font-size: 40px; text-align: center; line-height: 60px; left: 120px; top: 60px;\">\ud83e\udd8a<\/div>\n      <div class=\"y3-l3-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 class=\"y3-l3-sprite-fox\" style=\"width: 60px; height: 60px; position: absolute; font-size: 40px; text-align: center; line-height: 60px; left: 120px; top: 180px;\">\ud83e\udd8a<\/div>\n      \n      <!-- Chicken starts at (0,2) -->\n      <div id=\"y3-l3-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=\"y3-l3-chicken-emoji\" style=\"display: inline-block; transform: scaleX(-1);\">\ud83d\udc14<\/span>\n        <span id=\"y3-l3-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=\"y3-l3-game-message\" style=\"font-weight: bold; font-size: 18px; color: #333; margin-top: 10px; height: 25px;\"><\/p>\n  <\/div>\n  \n  <!-- Coding Panel -->\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 type=\"button\" id=\"y3-l3-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 type=\"button\" id=\"y3-l3-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 type=\"button\" id=\"y3-l3-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=\"y3-l3-algorithm-list\" style=\"display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; max-height: 150px;\"><\/div>\n      <button type=\"button\" id=\"y3-l3-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 type=\"button\" id=\"y3-l3-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 type=\"button\" id=\"y3-l3-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 (5 Mins)<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> If you wouldn&#8217;t want your Grandma to see it, or if you wouldn&#8217;t put it on a giant billboard outside school&#8230; should you share it online?<\/li>\n  <li>Log out securely from your PC and ensure your workstation is left clean and tidy!<\/li>\n<\/ul>\n<script>\n\/* <![CDATA[ *\/\n(function() {\n  document.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ --- 1. STATE OBJECT ---\n    var State = {\n      q1: \"\", q2: \"\", q3: \"\",\n      ans1: \"\", ans2: \"\", ans3: \"\", ans4: \"\",\n      scenarioText: \"\",\n      artworkImg: \"\",\n      isDrawing: false, currentTool: \"brush\",\n      \/\/ Game State\n      chicken: { x: 0, y: 2, facing: \"east\" },\n      goal: { x: 4, y: 2 },\n      foxes: [{x: 2, y: 1}, {x: 2, y: 2}, {x: 2, y: 3}],\n      userCommands: [], isRunning: false, executionQueue: []\n    };\n\n    \/\/ Helper to safely bind click events\n    function bindClick(id, handler) {\n      var el = document.getElementById(id);\n      if (el) el.addEventListener('click', handler);\n    }\n\n    \/\/ --- 2. SLIDE VALIDATION &#038; NAVIGATION ---\n    bindClick(\"btn-l3-next-0\", function() {\n      var q1 = document.getElementById(\"y3-q1-video\").value.trim();\n      var q2 = document.getElementById(\"y3-q2-video\").value.trim();\n      var q3 = document.getElementById(\"y3-q3-video\").value.trim();\n      if (!q1 || !q2 || !q3) { alert(\"Please answer all questions before continuing!\"); return; }\n      \n      State.q1 = q1; State.q2 = q2; State.q3 = q3;\n      document.getElementById(\"y3-l3-slide-0\").style.display = \"none\";\n      document.getElementById(\"y3-l3-slide-1\").style.display = \"block\";\n      document.getElementById(\"y3-l3-progress\").style.width = \"40%\";\n    });\n\n    bindClick(\"btn-l3-next-1\", function() {\n      var s1 = document.getElementById(\"y3-sort-1\").value;\n      var s2 = document.getElementById(\"y3-sort-2\").value;\n      var s3 = document.getElementById(\"y3-sort-3\").value;\n      var s4 = document.getElementById(\"y3-sort-4\").value;\n      if (!s1 || !s2 || !s3 || !s4) { alert(\"Please select Safe or Unsafe for all 4 items!\"); return; }\n      \n      State.ans1 = s1; State.ans2 = s2; State.ans3 = s3; State.ans4 = s4;\n      document.getElementById(\"y3-l3-slide-1\").style.display = \"none\";\n      document.getElementById(\"y3-l3-slide-2\").style.display = \"block\";\n      document.getElementById(\"y3-l3-progress\").style.width = \"60%\";\n    });\n\n    bindClick(\"btn-l3-next-2\", function() {\n      var txt = document.getElementById(\"y3-l3-scenario-answer\").value.trim();\n      if (!txt) { alert(\"Please explain what you would do in this scenario!\"); return; }\n      \n      State.scenarioText = txt;\n      document.getElementById(\"y3-l3-slide-2\").style.display = \"none\";\n      document.getElementById(\"y3-l3-slide-3\").style.display = \"block\";\n      document.getElementById(\"y3-l3-progress\").style.width = \"80%\";\n      setTimeout(setupCanvas, 100);\n    });\n\n    bindClick(\"btn-l3-next-3\", function() {\n      var cvs = document.getElementById(\"y3-l3-canvas\");\n      State.artworkImg = cvs ? cvs.toDataURL() : \"\";\n      \n      document.getElementById(\"y3-l3-slide-3\").style.display = \"none\";\n      document.getElementById(\"y3-l3-slide-4\").style.display = \"block\";\n      document.getElementById(\"y3-l3-progress\").style.width = \"100%\";\n    });\n\n    \/\/ --- 3. CANVAS LOGIC ---\n    function setupCanvas() {\n      var cvs = document.getElementById(\"y3-l3-canvas\");\n      if (!cvs) return;\n      var ctx = cvs.getContext(\"2d\");\n      \n      ctx.fillStyle = '#fafafa';\n      ctx.fillRect(0, 0, cvs.width, cvs.height);\n\n      function getMousePos(evt) {\n        var rect = cvs.getBoundingClientRect();\n        var scaleX = cvs.width \/ rect.width;\n        var scaleY = cvs.height \/ rect.height;\n        var cx = evt.touches ? evt.touches[0].clientX : evt.clientX;\n        var cy = evt.touches ? evt.touches[0].clientY : evt.clientY;\n        return { x: (cx - rect.left) * scaleX, y: (cy - rect.top) * scaleY, scaleX: scaleX };\n      }\n\n      function startDraw(e) {\n        State.isDrawing = true;\n        var p = getMousePos(e);\n        ctx.beginPath();\n        ctx.moveTo(p.x, p.y);\n      }\n      \n      function draw(e) {\n        if (!State.isDrawing) return;\n        var p = getMousePos(e);\n        var col = document.getElementById(\"y3-l3-color\");\n        var siz = document.getElementById(\"y3-l3-size\");\n        \n        ctx.strokeStyle = (State.currentTool === \"eraser\") ? '#fafafa' : (col ? col.value : \"#0073aa\");\n        var bs = siz ? parseInt(siz.value) : 6;\n        ctx.lineWidth = bs * (p.scaleX > 1 ? p.scaleX \/ 1.5 : 1);\n        ctx.lineCap = \"round\";\n        ctx.lineJoin = \"round\";\n        ctx.lineTo(p.x, p.y);\n        ctx.stroke();\n        ctx.beginPath();\n        ctx.moveTo(p.x, p.y);\n      }\n      \n      function stopDraw() { State.isDrawing = false; ctx.beginPath(); }\n\n      cvs.onmousedown = startDraw; cvs.onmousemove = draw; cvs.onmouseup = stopDraw; cvs.onmouseleave = stopDraw;\n      cvs.ontouchstart = function(e) { e.preventDefault(); startDraw(e); };\n      cvs.ontouchmove = function(e) { e.preventDefault(); draw(e); };\n      cvs.ontouchend = stopDraw;\n    }\n\n    bindClick(\"btn-l3-tool-brush\", function() {\n      State.currentTool = \"brush\";\n      document.getElementById(\"btn-l3-tool-brush\").style.backgroundColor = \"#0073aa\";\n      document.getElementById(\"btn-l3-tool-brush\").style.color = \"white\";\n      document.getElementById(\"btn-l3-tool-eraser\").style.backgroundColor = \"#e0e0e0\";\n      document.getElementById(\"btn-l3-tool-eraser\").style.color = \"#333\";\n    });\n\n    bindClick(\"btn-l3-tool-eraser\", function() {\n      State.currentTool = \"eraser\";\n      document.getElementById(\"btn-l3-tool-eraser\").style.backgroundColor = \"#0073aa\";\n      document.getElementById(\"btn-l3-tool-eraser\").style.color = \"white\";\n      document.getElementById(\"btn-l3-tool-brush\").style.backgroundColor = \"#e0e0e0\";\n      document.getElementById(\"btn-l3-tool-brush\").style.color = \"#333\";\n    });\n\n    bindClick(\"btn-l3-clear\", function() {\n      var cvs = document.getElementById(\"y3-l3-canvas\");\n      if (cvs && confirm(\"Clear your drawing?\")) {\n        cvs.getContext(\"2d\").fillRect(0, 0, cvs.width, cvs.height);\n      }\n    });\n\n    \/\/ --- 4. EXPORT TO PNG ---\n    bindClick(\"btn-l3-download\", function() {\n      var expCanvas = document.createElement('canvas');\n      expCanvas.width = 800; expCanvas.height = 1800;\n      var ctxExp = expCanvas.getContext('2d');\n\n      ctxExp.fillStyle = '#ffffff'; ctxExp.fillRect(0, 0, 800, 1800);\n\n      function wrapText(context, text, x, y, maxWidth, lineHeight) {\n        var words = text.split(' '); 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); line = words[n] + ' '; y += lineHeight;\n          } else { line = testLine; }\n        }\n        context.fillText(line, x, y); return y + lineHeight;\n      }\n\n      var startY = 60;\n      ctxExp.fillStyle = '#0073aa'; ctxExp.font = 'bold 32px Arial'; ctxExp.fillText('Year 3: Digital Privacy Portfolio', 40, startY); startY += 80;\n\n      ctxExp.fillStyle = '#e65100'; ctxExp.font = 'bold 24px Arial'; ctxExp.fillText('Part A: Play Like Share', 40, startY); startY += 45;\n      ctxExp.fillStyle = '#333333'; ctxExp.font = 'bold 18px Arial'; ctxExp.fillText('Q1: Why was Ellie upset?', 40, startY); startY += 30;\n      ctxExp.font = 'normal 18px Arial'; startY = wrapText(ctxExp, State.q1, 40, startY, 720, 26); startY += 20;\n      ctxExp.font = 'bold 18px Arial'; ctxExp.fillText('Q2: How did they use Sam\\'s account?', 40, startY); startY += 30;\n      ctxExp.font = 'normal 18px Arial'; startY = wrapText(ctxExp, State.q2, 40, startY, 720, 26); startY += 20;\n      ctxExp.font = 'bold 18px Arial'; ctxExp.fillText('Q3: Why is a Public photo dangerous?', 40, startY); startY += 30;\n      ctxExp.font = 'normal 18px Arial'; startY = wrapText(ctxExp, State.q3, 40, startY, 720, 26); startY += 40;\n\n      ctxExp.fillStyle = '#e65100'; ctxExp.font = 'bold 24px Arial'; ctxExp.fillText('Part B: Safe or Unsafe?', 40, startY); startY += 45;\n      ctxExp.font = 'bold 18px Arial';\n      ctxExp.fillStyle = '#333333'; ctxExp.fillText('Home Address:', 40, startY); ctxExp.fillStyle = State.ans1 === 'Safe' ? '#2e7d32' : '#c62828'; ctxExp.fillText(State.ans1, 250, startY); startY += 35;\n      ctxExp.fillStyle = '#333333'; ctxExp.fillText('Favorite Game:', 40, startY); ctxExp.fillStyle = State.ans2 === 'Safe' ? '#2e7d32' : '#c62828'; ctxExp.fillText(State.ans2, 250, startY); startY += 35;\n      ctxExp.fillStyle = '#333333'; ctxExp.fillText('School Uniform:', 40, startY); ctxExp.fillStyle = State.ans3 === 'Safe' ? '#2e7d32' : '#c62828'; ctxExp.fillText(State.ans3, 250, startY); startY += 35;\n      ctxExp.fillStyle = '#333333'; ctxExp.fillText('Pet\\'s Name:', 40, startY); ctxExp.fillStyle = State.ans4 === 'Safe' ? '#2e7d32' : '#c62828'; ctxExp.fillText(State.ans4, 250, startY); startY += 50;\n\n      ctxExp.fillStyle = '#e65100'; ctxExp.font = 'bold 24px Arial'; ctxExp.fillText('Part C: Tricky Scenario', 40, startY); startY += 45;\n      ctxExp.fillStyle = '#333333'; ctxExp.font = 'normal 18px Arial'; startY = wrapText(ctxExp, State.scenarioText, 40, startY, 720, 26); startY += 50;\n\n      ctxExp.fillStyle = '#e65100'; ctxExp.font = 'bold 24px Arial'; ctxExp.fillText('Part D: Safe Gamer Avatar', 40, startY); startY += 45;\n      var srcCvs = document.getElementById(\"y3-l3-canvas\");\n      if (srcCvs) ctxExp.drawImage(srcCvs, 40, startY, 720, 450); \n\n      var a = document.createElement('a');\n      a.href = expCanvas.toDataURL('image\/png');\n      a.download = 'Year3_Lesson3_Portfolio.png';\n      document.body.appendChild(a); a.click(); document.body.removeChild(a);\n    });\n\n    \/\/ --- 5. LEVEL 2 GAME LOGIC ---\n    function updateSprite() {\n      var cEl = document.getElementById(\"y3-l3-sprite-chicken\");\n      var tEl = document.getElementById(\"y3-l3-chicken-emoji\");\n      var aEl = document.getElementById(\"y3-l3-dir-arrow\");\n      if (!cEl || !tEl || !aEl) return;\n      \n      cEl.style.left = (60 * State.chicken.x) + \"px\";\n      cEl.style.top = (60 * State.chicken.y) + \"px\";\n      \n      if (State.chicken.facing === \"east\") { aEl.style.transform = \"rotate(0deg)\"; tEl.style.transform = \"scaleX(-1)\"; }\n      else if (State.chicken.facing === \"west\") { aEl.style.transform = \"rotate(180deg)\"; tEl.style.transform = \"scaleX(1)\"; }\n      else if (State.chicken.facing === \"north\") { aEl.style.transform = \"rotate(-90deg)\"; tEl.style.transform = \"scaleX(-1)\";}\n      else if (State.chicken.facing === \"south\") { aEl.style.transform = \"rotate(90deg)\"; tEl.style.transform = \"scaleX(-1)\";}\n    }\n\n    function executeNext() {\n      var msg = document.getElementById(\"y3-l3-game-message\");\n      if (State.executionQueue.length === 0) {\n        State.isRunning = false;\n        if (State.chicken.x === State.goal.x && State.chicken.y === State.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 = State.executionQueue.shift();\n      if (cmd === \"move\") {\n        var nx = State.chicken.x; var ny = State.chicken.y;\n        if (State.chicken.facing === \"east\") nx++;\n        if (State.chicken.facing === \"west\") nx--;\n        if (State.chicken.facing === \"south\") ny++;\n        if (State.chicken.facing === \"north\") ny--;\n        \n        if (nx !== -1 && nx !== 5 && ny !== -1 && ny !== 5) {\n          State.chicken.x = nx; State.chicken.y = ny;\n        } else {\n          if (msg) { msg.innerText = \"Oops! You hit the wall.\"; msg.style.color = \"#d32f2f\"; }\n          State.isRunning = false; return;\n        }\n      } else if (cmd === \"left\") {\n        var lT = { \"north\":\"west\", \"west\":\"south\", \"south\":\"east\", \"east\":\"north\" };\n        State.chicken.facing = lT[State.chicken.facing];\n      } else if (cmd === \"right\") {\n        var rT = { \"north\":\"east\", \"east\":\"south\", \"south\":\"west\", \"west\":\"north\" };\n        State.chicken.facing = rT[State.chicken.facing];\n      }\n      \n      updateSprite();\n      \n      var hitFox = false;\n      for (var i = 0; i !== State.foxes.length; i++) {\n        if (State.chicken.x === State.foxes[i].x && State.chicken.y === State.foxes[i].y) { hitFox = true; }\n      }\n      if (hitFox) {\n        setTimeout(function() {\n          if (msg) { msg.innerText = \"Oh no! The fox got the chicken!\"; msg.style.color = \"#d32f2f\"; }\n          State.isRunning = false;\n        }, 300);\n        return;\n      }\n      setTimeout(executeNext, 500);\n    }\n\n    function addCommand(cmd, label) {\n      if (State.isRunning) return;\n      State.userCommands.push(cmd);\n      var list = document.getElementById(\"y3-l3-algorithm-list\");\n      if (list) {\n        var el = document.createElement(\"div\");\n        el.style.background = \"#0073aa\"; el.style.color = \"white\"; el.style.padding = \"8px 12px\"; \n        el.style.marginBottom = \"5px\"; el.style.borderRadius = \"4px\"; el.style.fontWeight = \"bold\";\n        el.innerText = label;\n        list.appendChild(el);\n      }\n    }\n\n    bindClick(\"y3-l3-btn-move\", function() { addCommand(\"move\", \"Move Forward\"); });\n    bindClick(\"y3-l3-btn-left\", function() { addCommand(\"left\", \"Turn Left\"); });\n    bindClick(\"y3-l3-btn-right\", function() { addCommand(\"right\", \"Turn Right\"); });\n\n    bindClick(\"y3-l3-btn-clear\", function() {\n      if (State.isRunning) return;\n      State.userCommands = [];\n      document.getElementById(\"y3-l3-algorithm-list\").innerHTML = \"\";\n      State.chicken = { x: 0, y: 2, facing: \"east\" };\n      document.getElementById(\"y3-l3-game-message\").innerText = \"\";\n      updateSprite();\n    });\n\n    bindClick(\"y3-l3-btn-reset\", function() {\n      if (State.isRunning) return;\n      State.chicken = { x: 0, y: 2, facing: \"east\" };\n      document.getElementById(\"y3-l3-game-message\").innerText = \"\";\n      updateSprite();\n    });\n\n    bindClick(\"y3-l3-btn-run\", function() {\n      if (State.isRunning || State.userCommands.length === 0) return;\n      State.chicken = { x: 0, y: 2, facing: \"east\" };\n      document.getElementById(\"y3-l3-game-message\").innerText = \"Running...\";\n      document.getElementById(\"y3-l3-game-message\").style.color = \"#333\";\n      updateSprite();\n      State.executionQueue = State.userCommands.slice();\n      State.isRunning = true;\n      setTimeout(executeNext, 300);\n    });\n\n    setTimeout(updateSprite, 500);\n\n  });\n})();\n\/* ]]> *\/\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Year 3 Computing \u2014 Lesson 3! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\ud83d\udd12 Today we are continuing our online safety journey with Play Like Share (Episode 2) and taking&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-3-whats-okay-to-share\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.3 Whats okay to share?<\/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-405","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/405","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=405"}],"version-history":[{"count":6,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/405\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/405\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}