{"id":378,"date":"2026-09-07T21:06:59","date_gmt":"2026-09-07T21:06:59","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=378"},"modified":"2026-09-29T10:00:54","modified_gmt":"2026-09-29T10:00:54","slug":"yr6-term-1-1-2-digital-detectives","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-2-digital-detectives\/","title":{"rendered":"Yr5 Term 1.1.2 Digital Detectives"},"content":{"rendered":"\n<p><strong>Welcome to Year 5 Computing! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\ud83d\udcf1<\/strong><\/p>\n<p>Today we are becoming digital detectives! We will learn how online posts, profile details, and media shape our <strong>digital footprint<\/strong>, and how people can misinterpret information shared online. Let&#8217;s inspect the evidence!<\/p>\n\n<p><strong>Step 1: Time to Type! \u2328\ufe0f (10 Mins)<\/strong><\/p>\n<ul>\n  <li>Click here to warm up your fingers: <a href=\"https:\/\/dyson-fereday.ovh\/type\/\" target=\"_blank\" rel=\"noopener\">Start Typing Practice<\/a>.<\/li>\n  <li>Today&#8217;s typing challenge focuses on digital identity terms: <em>footprint, reputation, profile, assumption, opinion, and privacy<\/em>. Keep your accuracy high!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Profile Inspector &amp; Drawing Studio \ud83d\udd0d (35 Mins)<\/strong><\/p>\n<p>Use the embedded module below to inspect the online activity cards for <strong>Gurpreet<\/strong>, <strong>Mark<\/strong>, and <strong>Leah<\/strong> one by one. For each person, examine their activity feed side-by-side with the questions, record your findings, design a drawing representing their profile, and download your final report!<\/p>\n\n<!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"y5-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=\"y5-l2-progress\" style=\"width: 20%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Gurpreet Inspection -->\n  <div class=\"y5-l2-slide\" id=\"y5-l2-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Profile 1 of 3: Gurpreet \ud83d\udcf8<\/h2>\n    \n    <div style=\"display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;\">\n      <!-- Activity Card Side -->\n      <div style=\"flex: 1; min-width: 280px; background: #fff; border: 2px solid #0073aa; border-radius: 8px; padding: 15px;\">\n        <h3 style=\"margin-top:0; color:#0073aa; border-bottom: 1px solid #eee; padding-bottom: 5px;\">\ud83d\udccb Gurpreet&#8217;s Online Activity Feed<\/h3>\n        <ul style=\"margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6;\">\n          <li><strong>Post:<\/strong> &#8220;Here are the photos I took of our end-of-year party! Everyone looked good!&#8221;<\/li>\n          <li><strong>Check-in:<\/strong> Tokyo Kitchen, Canterbury<\/li>\n          <li><strong>Post:<\/strong> &#8220;I hate school dances. #ratherbeatarockconcert&#8221;<\/li>\n          <li><strong>Check-in:<\/strong> St. Anselm&#8217;s end of year prom<\/li>\n          <li><strong>Check-in:<\/strong> Young Fashion Design Conference at Sheffield College of Fashion<\/li>\n          <li><strong>Check-in:<\/strong> Tyler Smith concert at King&#8217;s Park<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Analysis Questions Side -->\n      <div style=\"flex: 1; min-width: 280px;\">\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 is one definite FACT proven directly by her feed?<\/label>\n          <input type=\"text\" id=\"y5-gurpreet-fact\" placeholder=\"e.g., She went to Tokyo Kitchen in Canterbury...\" 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. What is an ASSUMPTION a stranger might make that might NOT be true?<\/label>\n          <input type=\"text\" id=\"y5-gurpreet-assumption\" placeholder=\"e.g., A stranger might assume she never has fun...\" 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: #e6f2f8; border-left: 4px solid #0073aa; padding: 10px; border-radius: 0 5px 5px 0; font-size: 12px;\">\n          <strong>Revealed Truth:<\/strong> Gurpreet is in Year 13 going to university for business. She cares most about family, volunteering, pop culture, and fashion.\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Drawing Pad for Gurpreet -->\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 10px; text-align: left;\">\ud83c\udfa8 Draw a picture representing Gurpreet&#8217;s profile or hobbies:<\/label>\n      \n      <!-- Toolbar -->\n      <div style=\"margin-bottom: 10px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n        <button type=\"button\" id=\"y5-brush-gurpreet\" 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=\"y5-eraser-gurpreet\" 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        <label style=\"font-size: 12px;\">Color:<\/label>\n        <input type=\"color\" id=\"y5-color-gurpreet\" value=\"#0073aa\" style=\"cursor: pointer;\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y5-size-gurpreet\" min=\"2\" max=\"30\" value=\"6\" style=\"cursor: pointer;\">\n        <button type=\"button\" id=\"btn-clear-gurpreet\" style=\"background: #e53935; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold;\">\ud83d\uddd1\ufe0f Clear<\/button>\n      <\/div>\n\n      <canvas id=\"y5-canvas-gurpreet\" 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.05);\"><\/canvas>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-next-gurpreet\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Next Person (Mark) \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Mark Inspection -->\n  <div class=\"y5-l2-slide\" id=\"y5-l2-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Profile 2 of 3: Mark \u26bd<\/h2>\n    \n    <div style=\"display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;\">\n      <!-- Activity Card Side -->\n      <div style=\"flex: 1; min-width: 280px; background: #fff; border: 2px solid #0073aa; border-radius: 8px; padding: 15px;\">\n        <h3 style=\"margin-top:0; color:#0073aa; border-bottom: 1px solid #eee; padding-bottom: 5px;\">\ud83d\udccb Mark&#8217;s Online Activity Feed<\/h3>\n        <ul style=\"margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6;\">\n          <li><strong>Post:<\/strong> &#8220;Won the game! One more to go before the championship. Gotta practise my free kicks.&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;Missed the winning goal. Ugh. At least we drew.&#8221;<\/li>\n          <li><strong>Search:<\/strong> &#8220;Best Ways to Battle Spots&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;My little brother Alex is SOO annoying. Maybe he&#8217;s an alien.&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;Fishing this Saturday with my Dad at Bristol Water Park. Gonna be fantastic!&#8221;<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Analysis Questions Side -->\n      <div style=\"flex: 1; min-width: 280px;\">\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 is one definite FACT proven directly by his feed?<\/label>\n          <input type=\"text\" id=\"y5-mark-fact\" placeholder=\"e.g., He plays football and has a brother named Alex...\" 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. What is an ASSUMPTION a stranger might make that might NOT be true?<\/label>\n          <input type=\"text\" id=\"y5-mark-assumption\" placeholder=\"e.g., A stranger might assume he hates his brother...\" 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: #e6f2f8; border-left: 4px solid #0073aa; padding: 10px; border-radius: 0 5px 5px 0; font-size: 12px;\">\n          <strong>Revealed Truth:<\/strong> Mark is a 16-year-old starting midfielder from Cheltenham with an 8-year-old sister. He cares most about football, engineering, guitar, and friends.\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Drawing Pad for Mark -->\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 10px; text-align: left;\">\ud83c\udfa8 Draw a picture representing Mark&#8217;s profile or hobbies:<\/label>\n      \n      <!-- Toolbar -->\n      <div style=\"margin-bottom: 10px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n        <button type=\"button\" id=\"y5-brush-mark\" 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=\"y5-eraser-mark\" 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        <label style=\"font-size: 12px;\">Color:<\/label>\n        <input type=\"color\" id=\"y5-color-mark\" value=\"#0073aa\" style=\"cursor: pointer;\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y5-size-mark\" min=\"2\" max=\"30\" value=\"6\" style=\"cursor: pointer;\">\n        <button type=\"button\" id=\"btn-clear-mark\" style=\"background: #e53935; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold;\">\ud83d\uddd1\ufe0f Clear<\/button>\n      <\/div>\n\n      <canvas id=\"y5-canvas-mark\" 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.05);\"><\/canvas>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-next-mark\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Next Person (Leah) \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Leah Inspection -->\n  <div class=\"y5-l2-slide\" id=\"y5-l2-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Profile 3 of 3: Leah \ud83e\udd16<\/h2>\n    \n    <div style=\"display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;\">\n      <!-- Activity Card Side -->\n      <div style=\"flex: 1; min-width: 280px; background: #fff; border: 2px solid #0073aa; border-radius: 8px; padding: 15px;\">\n        <h3 style=\"margin-top:0; color:#0073aa; border-bottom: 1px solid #eee; padding-bottom: 5px;\">\ud83d\udccb Leah&#8217;s Online Activity Feed<\/h3>\n        <ul style=\"margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6;\">\n          <li><strong>Check-in:<\/strong> University Academy of Engineering, South Bank London<\/li>\n          <li><strong>Post:<\/strong> &#8220;25 Photos of Puppies&#8221;<\/li>\n          <li><strong>Check-in:<\/strong> Laser Tag Venue, Market Square<\/li>\n          <li><strong>Search:<\/strong> &#8220;10 Signs Your Parents are Trying to Ruin Your Life&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;Hi everyone, check out my friend&#8217;s website! I wrote a lot of the code for it.&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;FINALLY SAW THE NEW SQUIRREL WARS MOVIE. Omg obsessed!&#8221;<\/li>\n          <li><strong>Post:<\/strong> &#8220;Wahoo! Just got my highest score on Confectionery Crunch&#8221;<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Analysis Questions Side -->\n      <div style=\"flex: 1; min-width: 280px;\">\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 is one definite FACT proven directly by her feed?<\/label>\n          <input type=\"text\" id=\"y5-leah-fact\" placeholder=\"e.g., She knows how to write code...\" 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. What is an ASSUMPTION a stranger might make that might NOT be true?<\/label>\n          <input type=\"text\" id=\"y5-leah-assumption\" placeholder=\"e.g., A stranger might assume she argues with her parents...\" 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: #e6f2f8; border-left: 4px solid #0073aa; padding: 10px; border-radius: 0 5px 5px 0; font-size: 12px;\">\n          <strong>Revealed Truth:<\/strong> Leah is 17, loves engineering\/building robots, has 2 cats, and plays football. She cares most about technology, animal rights, and sports.\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Drawing Pad for Leah -->\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 10px; text-align: left;\">\ud83c\udfa8 Draw a picture representing Leah&#8217;s profile or hobbies:<\/label>\n      \n      <!-- Toolbar -->\n      <div style=\"margin-bottom: 10px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n        <button type=\"button\" id=\"y5-brush-leah\" 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=\"y5-eraser-leah\" 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        <label style=\"font-size: 12px;\">Color:<\/label>\n        <input type=\"color\" id=\"y5-color-leah\" value=\"#0073aa\" style=\"cursor: pointer;\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y5-size-leah\" min=\"2\" max=\"30\" value=\"6\" style=\"cursor: pointer;\">\n        <button type=\"button\" id=\"btn-clear-leah\" style=\"background: #e53935; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold;\">\ud83d\uddd1\ufe0f Clear<\/button>\n      <\/div>\n\n      <canvas id=\"y5-canvas-leah\" 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.05);\"><\/canvas>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-next-leah\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\">Final Reflection \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 4: Overall Unit Reflection -->\n  <div class=\"y5-l2-slide\" id=\"y5-l2-slide-3\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Final Reflection: Digital Footprints<\/h2>\n    <p>Think about all three profiles (Gurpreet, Mark, and Leah):<\/p>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px;\">Why do online profiles often cause people to make false assumptions about someone? How can we manage our own digital footprint safely?<\/label>\n      <textarea id=\"y5-l2-overall-reflection\" rows=\"4\" placeholder=\"Write your full reflection here...\" style=\"width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 14px;\"><\/textarea>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" id=\"btn-next-reflection\" 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 \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 5: Download Complete Package -->\n  <div class=\"y5-l2-slide\" id=\"y5-l2-slide-4\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Digital Footprint Inspection Complete! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/h2>\n    <p>Your responses and artwork drawings have been compiled into a full report. Download your image and paste it directly into your Word Document.<\/p>\n\n    <button type=\"button\" id=\"btn-download-png\" 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 Complete Portfolio Image<\/button>\n  <\/div>\n\n<\/div>\n\n<p><strong>Step 3: Explore Interland \u2014 Mindful Mountain \u26f0\ufe0f (15 Mins)<\/strong><\/p>\n<ul>\n  <li>Click here to play: <a href=\"https:\/\/beinternetawesome.withgoogle.com\/en_uk\/interland\" target=\"_blank\" rel=\"noopener\">Play Interland<\/a>.<\/li>\n  <li>Navigate to <strong>Mindful Mountain<\/strong> to practice sharing information carefully and protecting your digital footprint!<\/li>\n<\/ul>\n\n<p><strong>Step 4: Log Off and Reflect \ud83d\udc4b (10 Mins)<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> Share one reason why an online profile can never show the full truth about who a person really is.<\/li>\n  <li>Log out securely and ensure your workstation is clean and tidy!<\/li>\n<\/ul>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\nvar State = { gurpreetFact: '', gurpreetAssumption: '', markFact: '', markAssumption: '', leahFact: '', leahAssumption: '', reflection: '' };\nvar currentToolState = { 'y5-canvas-gurpreet': 'brush', 'y5-canvas-mark': 'brush', 'y5-canvas-leah': 'brush' };\nvar isDrawingState = {};\nfunction fillCanvasWhite(canvasId) {\nvar cvs = document.getElementById(canvasId);\nif (cvs && cvs.getAttribute('data-bg') !== 'true') {\nvar ctx = cvs.getContext('2d');\nctx.fillStyle = '#fafafa';\nctx.fillRect(0, 0, cvs.width, cvs.height);\ncvs.setAttribute('data-bg', 'true');\n}\n}\nfunction setupCanvasListeners(id) {\nvar cvs = document.getElementById(id);\nif (!cvs || cvs.getAttribute('data-bound') === 'true') return;\nfillCanvasWhite(id); \nvar ctx = cvs.getContext('2d');\nfunction getMousePos(e) {\nvar rect = cvs.getBoundingClientRect();\nvar scaleX = cvs.width \/ rect.width;\nvar scaleY = cvs.height \/ rect.height;\nvar cx = (e.touches && e.touches.length !== 0) ? e.touches[0].clientX : e.clientX;\nvar cy = (e.touches && e.touches.length !== 0) ? e.touches[0].clientY : e.clientY;\nreturn { x: (cx - rect.left) * scaleX, y: (cy - rect.top) * scaleY, scale: scaleX };\n}\nfunction startDrawing(e) {\nisDrawingState[id] = true;\nvar pos = getMousePos(e);\nctx.beginPath();\nctx.moveTo(pos.x, pos.y);\n}\nfunction draw(e) {\nif (!isDrawingState[id]) return;\nvar pos = getMousePos(e);\nvar person = id.split('-')[2];\nvar tool = currentToolState[id];\nvar colorEl = document.getElementById('y5-color-' + person);\nvar sizeEl = document.getElementById('y5-size-' + person);\nif (tool === 'eraser') { ctx.strokeStyle = '#fafafa'; } else { ctx.strokeStyle = colorEl ? colorEl.value : '#0073aa'; }\nvar brushSize = sizeEl ? parseInt(sizeEl.value) : 6;\nvar scaleAdj = Math.max(1, pos.scale \/ 1.5);\nctx.lineWidth = brushSize * scaleAdj;\nctx.lineCap = 'round';\nctx.lineJoin = 'round';\nctx.lineTo(pos.x, pos.y);\nctx.stroke();\nctx.beginPath();\nctx.moveTo(pos.x, pos.y);\n}\nfunction stopDrawing() { isDrawingState[id] = false; ctx.beginPath(); }\ncvs.addEventListener('mousedown', startDrawing);\ncvs.addEventListener('mousemove', draw);\ncvs.addEventListener('mouseup', stopDrawing);\ncvs.addEventListener('mouseleave', stopDrawing);\ncvs.addEventListener('touchstart', function(e) { e.preventDefault(); startDrawing(e); }, { passive: false });\ncvs.addEventListener('touchmove', function(e) { e.preventDefault(); draw(e); }, { passive: false });\ncvs.addEventListener('touchend', stopDrawing);\ncvs.setAttribute('data-bound', 'true');\n}\ndocument.addEventListener('click', function(e) {\nvar btn = e.target.closest('button');\nif (!btn) return;\nvar id = btn.id;\nif (id.indexOf('y5-brush-') === 0 || id.indexOf('y5-eraser-') === 0) {\nvar parts = id.split('-');\nvar toolType = parts[1];\nvar person = parts[2];\nvar canvasId = 'y5-canvas-' + person;\ncurrentToolState[canvasId] = toolType;\nvar btnB = document.getElementById('y5-brush-' + person);\nvar btnE = document.getElementById('y5-eraser-' + person);\nif (toolType === 'brush') {\nif(btnB) { btnB.style.backgroundColor = '#0073aa'; btnB.style.color = 'white'; }\nif(btnE) { btnE.style.backgroundColor = '#e0e0e0'; btnE.style.color = '#333'; }\n} else {\nif(btnE) { btnE.style.backgroundColor = '#0073aa'; btnE.style.color = 'white'; }\nif(btnB) { btnB.style.backgroundColor = '#e0e0e0'; btnB.style.color = '#333'; }\n}\nreturn;\n}\nif (id.indexOf('btn-clear-') === 0) {\nvar personName = id.split('-')[2];\nvar cId = 'y5-canvas-' + personName;\nvar cvsEl = document.getElementById(cId);\nif (cvsEl && confirm('Clear drawing?')) { cvsEl.getContext('2d').fillRect(0, 0, cvsEl.width, cvsEl.height); }\nreturn;\n}\nif (id === 'btn-next-gurpreet') {\nvar gf = document.getElementById('y5-gurpreet-fact').value.trim();\nvar ga = document.getElementById('y5-gurpreet-assumption').value.trim();\nif (!gf || !ga) { alert('Please answer both questions for Gurpreet!'); return; }\nState.gurpreetFact = gf; State.gurpreetAssumption = ga;\ngoToSlide(1, 40);\n} \nelse if (id === 'btn-next-mark') {\nvar mf = document.getElementById('y5-mark-fact').value.trim();\nvar ma = document.getElementById('y5-mark-assumption').value.trim();\nif (!mf || !ma) { alert('Please answer both questions for Mark!'); return; }\nState.markFact = mf; State.markAssumption = ma;\ngoToSlide(2, 60);\n} \nelse if (id === 'btn-next-leah') {\nvar lf = document.getElementById('y5-leah-fact').value.trim();\nvar la = document.getElementById('y5-leah-assumption').value.trim();\nif (!lf || !la) { alert('Please answer both questions for Leah!'); return; }\nState.leahFact = lf; State.leahAssumption = la;\ngoToSlide(3, 80);\n} \nelse if (id === 'btn-next-reflection') {\nvar ref = document.getElementById('y5-l2-overall-reflection').value.trim();\nif (!ref) { alert('Please write your final reflection!'); return; }\nState.reflection = ref;\ngoToSlide(4, 100);\n}\nelse if (id === 'btn-download-png') {\nvar expCanvas = document.createElement('canvas');\nexpCanvas.width = 800;\nexpCanvas.height = 2900;\nvar ctxExp = expCanvas.getContext('2d');\nctxExp.fillStyle = '#ffffff';\nctxExp.fillRect(0, 0, expCanvas.width, expCanvas.height);\nfunction wrapText(context, text, x, y, maxWidth, lineHeight) {\nvar words = text.split(' '); var line = '';\nfor (var n = 0; n !== words.length; n++) {\nvar testLine = line + words[n] + ' ';\nvar metrics = context.measureText(testLine);\nif (metrics.width > maxWidth && n !== 0) {\ncontext.fillText(line, x, y); line = words[n] + ' '; y += lineHeight;\n} else { line = testLine; }\n}\ncontext.fillText(line, x, y); return y + lineHeight;\n}\nfunction drawProfileBlock(title, fact, assumption, canvasId, currentY) {\nctxExp.fillStyle = '#e65100'; ctxExp.font = 'bold 24px Arial';\nctxExp.fillText(title, 40, currentY); currentY += 45;\nctxExp.fillStyle = '#333333'; ctxExp.font = 'bold 18px Arial';\nctxExp.fillText('Proven Fact:', 40, currentY); currentY += 30;\nctxExp.font = 'normal 18px Arial';\ncurrentY = wrapText(ctxExp, fact || 'N\/A', 40, currentY, 720, 26); currentY += 20;\nctxExp.font = 'bold 18px Arial';\nctxExp.fillText('Unproven Assumption:', 40, currentY); currentY += 30;\nctxExp.font = 'normal 18px Arial';\ncurrentY = wrapText(ctxExp, assumption || 'N\/A', 40, currentY, 720, 26); currentY += 30;\nvar srcCvs = document.getElementById(canvasId);\nif (srcCvs) {\nctxExp.drawImage(srcCvs, 50, currentY, 700, 437);\ncurrentY += 460; \n}\nreturn currentY;\n}\nvar startY = 60;\nctxExp.fillStyle = '#0073aa'; ctxExp.font = 'bold 32px Arial';\nctxExp.fillText('Digital Footprint Portfolio', 40, startY); startY += 80;\nstartY = drawProfileBlock('1. Gurpreet Profile', State.gurpreetFact, State.gurpreetAssumption, 'y5-canvas-gurpreet', startY);\nstartY = drawProfileBlock('2. Mark Profile', State.markFact, State.markAssumption, 'y5-canvas-mark', startY);\nstartY = drawProfileBlock('3. Leah Profile', State.leahFact, State.leahAssumption, 'y5-canvas-leah', startY);\nctxExp.fillStyle = '#0073aa'; ctxExp.font = 'bold 24px Arial';\nctxExp.fillText('Overall Digital Identity Reflection', 40, startY); startY += 45;\nctxExp.fillStyle = '#333333'; ctxExp.font = 'normal 18px Arial';\nstartY = wrapText(ctxExp, State.reflection || 'N\/A', 40, startY, 720, 26);\nvar a = document.createElement('a');\na.href = expCanvas.toDataURL('image\/png');\na.download = 'Year5_Footprint_Portfolio.png';\ndocument.body.appendChild(a);\na.click();\ndocument.body.removeChild(a);\nalert('Your Portfolio Image has been downloaded!');\n}\n});\nfunction goToSlide(targetIdx, progress) {\nvar slides = document.querySelectorAll('#y5-l2-widget .y5-l2-slide');\nfor (var i = 0; i !== slides.length; i++) { slides[i].style.display = 'none'; }\nvar targetSlide = document.getElementById('y5-l2-slide-' + targetIdx);\nif (targetSlide) targetSlide.style.display = 'block';\nvar progBar = document.getElementById('y5-l2-progress');\nif (progBar) progBar.style.width = progress + '%';\nsetTimeout(initAllCanvases, 100);\n}\nfunction initAllCanvases() {\nsetupCanvasListeners('y5-canvas-gurpreet');\nsetupCanvasListeners('y5-canvas-mark');\nsetupCanvasListeners('y5-canvas-leah');\n}\ninitAllCanvases();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Year 5 Computing! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\ud83d\udcf1 Today we are becoming digital detectives! We will learn how online posts, profile details, and media shape our digital&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-2-digital-detectives\/\">Continue Reading<span class=\"screen-reader-text\">Yr5 Term 1.1.2 Digital Detectives<\/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":[8],"tags":[],"class_list":["post-378","post","type-post","status-publish","format-standard","hentry","category-year5","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/378","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=378"}],"version-history":[{"count":9,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":531,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/378\/revisions\/531"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}