{"id":355,"date":"2026-09-07T20:24:41","date_gmt":"2026-09-07T20:24:41","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=355"},"modified":"2026-09-07T20:30:09","modified_gmt":"2026-09-07T20:30:09","slug":"yr6-term-1-1-7","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-7\/","title":{"rendered":"Yr6 Term 1.1.7 Interactive digital map"},"content":{"rendered":"\n<p><strong>Welcome back to Year 6 Computing! \ud83d\udee1\ufe0f\ud83d\uddfa\ufe0f<\/strong><\/p>\n<p>Today we are starting our final capstone project! You will apply everything you have learned about framing, digital footprints, and privacy to design an <strong>Interactive Digital Identity Map<\/strong>. Let&#8217;s plan what stays inside your public frame and what stays strictly private!<\/p>\n\n<p><strong>Step 1: Time to Type! \u2328\ufe0f<\/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 identity vocabulary: <em>avatar, representation, digital footprint, privacy, and choice<\/em>. Aim for high accuracy!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Digital Identity Map Module \ud83d\udcdd<\/strong><\/p>\n<p>Use the embedded module below to select your privacy-safe avatar, categorize profile information into public vs. private, map out your code events, and test your interactive hotspot simulation directly on this page!<\/p>\n\n<!-- INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"identity-planner-widget\" style=\"max-width: 800px; 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=\"progress-bar\" style=\"width: 20%; height: 10px; background-color: #009688; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Avatar Selection -->\n  <div class=\"slide active\" id=\"slide-0\">\n    <h2 style=\"margin-top:0; color: #009688;\">Step 1: Choose Your Safe Avatar<\/h2>\n    <p>A safe digital footprint uses an abstract avatar rather than a real personal photo. Select your representation:<\/p>\n    <div style=\"display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px;\">\n      <button class=\"avatar-btn\" onclick=\"selectAvatar('Cyber Explorer \ud83e\udd16', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83e\udd16 Cyber Explorer<\/button>\n      <button class=\"avatar-btn\" onclick=\"selectAvatar('Pixel Dragon \ud83d\udc09', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83d\udc09 Pixel Dragon<\/button>\n      <button class=\"avatar-btn\" onclick=\"selectAvatar('Astro Artist \ud83c\udfa8', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83c\udfa8 Astro Artist<\/button>\n      <button class=\"avatar-btn\" onclick=\"selectAvatar('Tech Detective \ud83d\udd75\ufe0f', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83d\udd75\ufe0f Tech Detective<\/button>\n    <\/div>\n    <div style=\"text-align: right;\">\n      <button onclick=\"checkAvatarAndNext(1)\" style=\"background-color: #009688; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Framing Information -->\n  <div class=\"slide\" id=\"slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #009688;\">Step 2: Inside or Outside the Frame?<\/h2>\n    <p>Decide whether each item belongs inside your public profile or kept private outside the frame:<\/p>\n    \n    <div style=\"margin-bottom: 15px; background: #fff; padding: 10px; border: 1px solid #eee; border-radius: 5px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px;\">1. Favorite Hobby \/ Game:<\/label>\n      <select id=\"item1\" style=\"width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;\">\n        <option value=\"\">&#8212; Select Choice &#8212;<\/option>\n        <option value=\"Inside Frame (Safe Public)\">Inside Frame (Safe Public)<\/option>\n        <option value=\"Outside Frame (Keep Private)\">Outside Frame (Keep Private)<\/option>\n      <\/select>\n    <\/div>\n\n    <div style=\"margin-bottom: 15px; background: #fff; padding: 10px; border: 1px solid #eee; border-radius: 5px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px;\">2. Full Home Address &#038; Postcode:<\/label>\n      <select id=\"item2\" style=\"width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;\">\n        <option value=\"\">&#8212; Select Choice &#8212;<\/option>\n        <option value=\"Inside Frame (Safe Public)\">Inside Frame (Safe Public)<\/option>\n        <option value=\"Outside Frame (Keep Private)\">Outside Frame (Keep Private)<\/option>\n      <\/select>\n    <\/div>\n\n    <div style=\"margin-bottom: 15px; background: #fff; padding: 10px; border: 1px solid #eee; border-radius: 5px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px;\">3. Passwords &#038; Passcodes:<\/label>\n      <select id=\"item3\" style=\"width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;\">\n        <option value=\"\">&#8212; Select Choice &#8212;<\/option>\n        <option value=\"Inside Frame (Safe Public)\">Inside Frame (Safe Public)<\/option>\n        <option value=\"Outside Frame (Keep Private)\">Outside Frame (Keep Private)<\/option>\n      <\/select>\n    <\/div>\n\n    <div style=\"margin-bottom: 20px; background: #fff; padding: 10px; border: 1px solid #eee; border-radius: 5px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px;\">4. Favorite Book or Film:<\/label>\n      <select id=\"item4\" style=\"width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;\">\n        <option value=\"\">&#8212; Select Choice &#8212;<\/option>\n        <option value=\"Inside Frame (Safe Public)\">Inside Frame (Safe Public)<\/option>\n        <option value=\"Outside Frame (Keep Private)\">Outside Frame (Keep Private)<\/option>\n      <\/select>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button onclick=\"checkFramingAndNext(2)\" style=\"background-color: #009688; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Code Event Mapping -->\n  <div class=\"slide\" id=\"slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #009688;\">Step 3: Plan Your Interactive Code Events<\/h2>\n    <p>Describe what interactive event reactions should happen when a user clicks on your profile elements:<\/p>\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Event for Clicking Safe Info (e.g., Avatar or Hobbies):<\/label>\n    <textarea id=\"code-safe\" rows=\"2\" placeholder=\"e.g., Display 'I love coding and basketball!' and play a cheerful sound.\" style=\"width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\"><\/textarea>\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Event for Clicking Private Info (e.g., Address or Password Hotspot):<\/label>\n    <textarea id=\"code-private\" rows=\"2\" placeholder=\"e.g., Show a warning popup: 'Access Denied! Personal information stays private!'\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\"><\/textarea>\n\n    <div style=\"text-align: right;\">\n      <button onclick=\"checkCodeAndNext(3)\" style=\"background-color: #009688; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 4: Interactive Digital Identity Map Studio -->\n  <div class=\"slide\" id=\"slide-3\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #009688;\">Step 4: Interactive Identity Map Studio<\/h2>\n    <p>Click on the hotspots below to test your programmed profile logic in action!<\/p>\n    \n    <div style=\"border: 3px dashed #009688; border-radius: 10px; padding: 20px; background: #ffffff; text-align: center; position: relative; margin-bottom: 20px;\">\n      <div id=\"map-avatar-display\" style=\"font-size: 48px; margin-bottom: 10px;\">\ud83e\udd16<\/div>\n      <h3 style=\"margin: 0 0 15px 0; color: #333;\">Digital Identity Map<\/h3>\n      \n      <div style=\"display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;\">\n        <button onclick=\"triggerHotspot('safe', 'Hobby \/ Favorite Game')\" style=\"padding: 10px 15px; background: #e0f2f1; border: 2px solid #009688; border-radius: 5px; cursor: pointer; font-weight: bold; color: #00695c;\">\ud83c\udfae Hobby Hotspot<\/button>\n        <button onclick=\"triggerHotspot('private', 'Home Address')\" style=\"padding: 10px 15px; background: #ffebee; border: 2px solid #e53935; border-radius: 5px; cursor: pointer; font-weight: bold; color: #c62828;\">\ud83c\udfe0 Address Hotspot<\/button>\n        <button onclick=\"triggerHotspot('private', 'Account Password')\" style=\"padding: 10px 15px; background: #ffebee; border: 2px solid #e53935; border-radius: 5px; cursor: pointer; font-weight: bold; color: #c62828;\">\ud83d\udd11 Password Hotspot<\/button>\n        <button onclick=\"triggerHotspot('safe', 'Favorite Book \/ Film')\" style=\"padding: 10px 15px; background: #e0f2f1; border: 2px solid #009688; border-radius: 5px; cursor: pointer; font-weight: bold; color: #00695c;\">\ud83d\udcda Favorite Book Hotspot<\/button>\n      <\/div>\n\n      <div id=\"hotspot-output\" style=\"margin-top: 20px; padding: 15px; border-radius: 5px; background: #f9f9f9; border: 1px solid #ddd; min-height: 40px; font-weight: bold; color: #555;\">\n        Click any hotspot above to execute your programmed response!\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button onclick=\"showSlide(4)\" style=\"background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Finish &#038; Download \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 5: Download -->\n  <div class=\"slide\" id=\"slide-4\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #009688;\">Identity Map Complete! \ud83d\uddfa\ufe0f<\/h2>\n    <p>Download your complete Digital Identity Map portfolio file and save it directly in your student network folder.<\/p>\n    <button onclick=\"downloadIdentityBlueprint()\" style=\"background-color: #009688; color: white; border: none; padding: 15px 25px; border-radius: 5px; cursor: pointer; font-size: 18px; margin-top: 20px; font-weight: bold;\">\ud83d\udcbe Download My Identity Map<\/button>\n  <\/div>\n\n<\/div>\n\n<script>\n  let identityData = {};\n  let selectedAvatar = \"\ud83e\udd16 Cyber Explorer\";\n\n  function selectAvatar(avatar, btnElement) {\n    selectedAvatar = avatar;\n    let buttons = document.querySelectorAll('.avatar-btn');\n    buttons.forEach(btn => {\n      btn.style.borderColor = '#ccc';\n      btn.style.backgroundColor = 'white';\n    });\n    btnElement.style.borderColor = '#009688';\n    btnElement.style.backgroundColor = '#e0f2f1';\n  }\n\n  function checkAvatarAndNext(nextSlideId) {\n    identityData.avatar = selectedAvatar;\n    document.getElementById('map-avatar-display').innerText = selectedAvatar.split(' ').slice(-1)[0] || '\ud83e\udd16';\n    showSlide(nextSlideId);\n  }\n\n  function checkFramingAndNext(nextSlideId) {\n    const i1 = document.getElementById('item1').value;\n    const i2 = document.getElementById('item2').value;\n    const i3 = document.getElementById('item3').value;\n    const i4 = document.getElementById('item4').value;\n\n    if (i1 === \"\" || i2 === \"\" || i3 === \"\" || i4 === \"\") {\n      alert(\"Please categorize all information items before continuing!\");\n      return;\n    }\n\n    identityData.hobbyChoice = i1;\n    identityData.addressChoice = i2;\n    identityData.passwordChoice = i3;\n    identityData.bookChoice = i4;\n    showSlide(nextSlideId);\n  }\n\n  function checkCodeAndNext(nextSlideId) {\n    const safeCode = document.getElementById('code-safe').value.trim();\n    const privateCode = document.getElementById('code-private').value.trim();\n\n    if (safeCode === \"\" || privateCode === \"\") {\n      alert(\"Please describe both interactive code events!\");\n      return;\n    }\n\n    identityData.codeSafe = safeCode;\n    identityData.codePrivate = privateCode;\n    showSlide(nextSlideId);\n  }\n\n  function triggerHotspot(type, label) {\n    const output = document.getElementById('hotspot-output');\n    if (type === 'safe') {\n      output.style.backgroundColor = '#e0f2f1';\n      output.style.borderColor = '#009688';\n      output.style.color = '#004d40';\n      output.innerHTML = '\u2705 <strong>' + label + ':<\/strong> ' + (identityData.codeSafe || 'Displaying public safe information!');\n    } else {\n      output.style.backgroundColor = '#ffebee';\n      output.style.borderColor = '#e53935';\n      output.style.color = '#b71c1c';\n      output.innerHTML = '\ud83d\uded1 <strong>' + label + ':<\/strong> ' + (identityData.codePrivate || 'Access Denied! Personal details stay private!');\n    }\n  }\n\n  function showSlide(slideIndex) {\n    document.querySelectorAll('#identity-planner-widget .slide').forEach(slide => {\n      slide.style.display = 'none';\n    });\n    document.getElementById('slide-' + slideIndex).style.display = 'block';\n    \n    const progressPercents = [20, 40, 60, 80, 100];\n    document.getElementById('progress-bar').style.width = progressPercents[slideIndex] + '%';\n  }\n\n  function downloadIdentityBlueprint() {\n    const htmlContent = `\n      <!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <title>My Digital Identity Map Portfolio<\/title>\n        <style>\n          body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; background-color: #f4f4f9; }\n          .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }\n          h3 { color: #009688; border-bottom: 2px solid #eee; padding-bottom: 5px; margin-top:0; }\n          .choice-block { background-color: #e0f2f1; padding: 10px; border-left: 4px solid #009688; font-size: 15px; margin: 5px 0 10px 0; }\n          .code-plan { background-color: #e8f5e9; padding: 10px; border-left: 4px solid #4CAF50; font-size: 15px; margin: 5px 0 10px 0; }\n        <\/style>\n      <\/head>\n      <body>\n        <h1>Digital Identity Map Portfolio \ud83d\udee1\ufe0f\ud83d\uddfa\ufe0f<\/h1>\n        <p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>\n        <p><strong>Selected Avatar:<\/strong> ${identityData.avatar || '\ud83e\udd16 Cyber Explorer'}<\/p>\n        \n        <div class=\"card\">\n          <h3>Information Framing Choices<\/h3>\n          <p><strong>1. Favorite Hobby \/ Game:<\/strong><\/p>\n          <div class=\"choice-block\">${identityData.hobbyChoice}<\/div>\n          <p><strong>2. Full Home Address & Postcode:<\/strong><\/p>\n          <div class=\"choice-block\">${identityData.addressChoice}<\/div>\n          <p><strong>3. Passwords & Passcodes:<\/strong><\/p>\n          <div class=\"choice-block\">${identityData.passwordChoice}<\/div>\n          <p><strong>4. Favorite Book or Film:<\/strong><\/p>\n          <div class=\"choice-block\">${identityData.bookChoice}<\/div>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Code Event Logic & Interactive Hotspots<\/h3>\n          <p><strong>Safe Info Event Trigger:<\/strong><\/p>\n          <div class=\"code-plan\">${identityData.codeSafe}<\/div>\n          <p><strong>Private Info Event Trigger:<\/strong><\/p>\n          <div class=\"code-plan\">${identityData.codePrivate}<\/div>\n        <\/div>\n      <\/body>\n      <\/html>\n    `;\n\n    const blob = new Blob([htmlContent], { type: 'text\/html' });\n    const url = URL.createObjectURL(blob);\n    const downloadLink = document.createElement('a');\n    downloadLink.href = url;\n    downloadLink.download = 'My_Digital_Identity_Map.html';\n    document.body.appendChild(downloadLink);\n    downloadLink.click();\n    document.body.removeChild(downloadLink);\n    URL.revokeObjectURL(url);\n  }\n<\/script>\n<!-- END INTERACTIVE LESSON WIDGET -->\n\n<p><strong>Step 3: Practice Profile Safety in Interland \u26f0\ufe0f<\/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>Travel to <strong>Mindful Mountain<\/strong> to practice evaluating what information is safe to share publicly on an online profile.<\/li>\n<\/ul>\n\n<p><strong>Step 4: Log Off and Reflect \ud83d\udc4b<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> Tell your partner one piece of personal information that must always stay &#8220;outside the frame&#8221; of a public profile.<\/li>\n  <li>Log out securely and tidy your desk space!<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Welcome back to Year 6 Computing! \ud83d\udee1\ufe0f\ud83d\uddfa\ufe0f Today we are starting our final capstone project! You will apply everything you have learned about framing, digital&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-7\/\">Continue Reading<span class=\"screen-reader-text\">Yr6 Term 1.1.7 Interactive digital map<\/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":[9],"tags":[],"class_list":["post-355","post","type-post","status-publish","format-standard","hentry","category-year6","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/355","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=355"}],"version-history":[{"count":3,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/355\/revisions\/359"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}