{"id":427,"date":"2026-09-09T20:58:53","date_gmt":"2026-09-09T20:58:53","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=427"},"modified":"2026-09-09T21:31:43","modified_gmt":"2026-09-09T21:31:43","slug":"yr3-term-1-1-8-repetition-decomposition-and-angles-on-code-org","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-8-repetition-decomposition-and-angles-on-code-org\/","title":{"rendered":"Yr3 Term 1.1.8 Repetition, Decomposition, and Angles on Code.org."},"content":{"rendered":"\n<p><strong>Welcome to Year 3 Computing \u2014 Lesson 8 (Capstone)! \ud83d\udc22\ud83d\udcbb<\/strong><\/p>\n<p>Today is our unit capstone! We are taking everything we learned on <strong>Code.org<\/strong> about sequences, loops, angles, and decomposition, and applying it to <strong>Text-Based Turtle Code<\/strong>! You will write text commands to draw regular polygons and repeating geometric patterns!<\/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 studio: <a href=\"https:\/\/ndovu.org.uk\/type\/\" target=\"_blank\" rel=\"noopener\">Start Typing Practice on Ndovu<\/a>.<\/li>\n  <li>Practice typing key text-coding commands: <em>fd, bk, rt, lt, repeat, pu, pd<\/em>. Keep your keystrokes accurate!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Turtle Studio &#038; Polygon Builder \ud83c\udfa8 (25 Mins)<\/strong><\/p>\n<p>Use the embedded Turtle Simulator below to run text commands, test repeat loops, and draw regular polygons!<\/p>\n\n<!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"y3-l8-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-l8-progress\" style=\"width: 20%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Embedded Turtle Simulator -->\n  <div class=\"y3-l8-slide\" id=\"y3-l8-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: Turtle Command Simulator \ud83d\udc22<\/h2>\n    <p>We type short text commands to control the turtle: <code>fd 100<\/code> moves forward 100 pixels, <code>rt 90<\/code> turns right 90 degrees. We use brackets <code>[ ]<\/code> to hold our repeat loops!<\/p>\n\n    <!-- CANVAS & EDITOR -->\n    <div style=\"display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 15px;\">\n      \n      <!-- Code Input Box -->\n      <div style=\"flex: 1; min-width: 280px; text-align: left;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">Type Commands Here:<\/label>\n        <textarea id=\"turtle-code-input\" rows=\"10\" style=\"width: 100%; font-family: monospace; font-size: 14px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; background: #222; color: #00ffcc;\">repeat 4 [\n  fd 80\n  rt 90\n]<\/textarea>\n        \n        <div style=\"margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap;\">\n          <button type=\"button\" onclick=\"runTurtleEngine()\" style=\"background: #4CAF50; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold;\">\u25b6\ufe0f Run Code<\/button>\n          <button type=\"button\" onclick=\"loadTurtlePreset('square')\" style=\"background: #0073aa; color: white; border: none; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;\">Square<\/button>\n          <button type=\"button\" onclick=\"loadTurtlePreset('triangle')\" style=\"background: #0073aa; color: white; border: none; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;\">Triangle<\/button>\n          <button type=\"button\" onclick=\"loadTurtlePreset('pattern')\" style=\"background: #0073aa; color: white; border: none; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;\">Star Pattern<\/button>\n        <\/div>\n        <p id=\"turtle-error-msg\" style=\"color: #d32f2f; font-size: 12px; font-weight: bold; margin-top: 10px; display: none;\"><\/p>\n      <\/div>\n\n      <!-- Turtle Output Canvas -->\n      <div style=\"flex: 1; min-width: 280px; text-align: center;\">\n        <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">Turtle Output Display:<\/label>\n        <canvas id=\"turtle-canvas-container\" width=\"350\" height=\"250\" style=\"border: 2px solid #0073aa; border-radius: 5px; background: #ffffff;\"><\/canvas>\n      <\/div>\n\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L8NextSlide(0, 1)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Reflection Questions \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Text vs. Block Reflection -->\n  <div class=\"y3-l8-slide\" id=\"y3-l8-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Text Code vs. Block Code Reflection<\/h2>\n    <p>Answer the reflection questions below comparing block coding with text-based commands:<\/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. What do the commands <code>pu<\/code> and <code>pd<\/code> stand for, and why are they useful?<\/label>\n      <input type=\"text\" id=\"y3-q-pupd\" placeholder=\"e.g., Pen Up and Pen Down. They let the turtle move without drawing...\" 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;\">2. How is writing a repeat loop with brackets <code>[ ]<\/code> different from snapping blocks together on Code.org?<\/label>\n      <input type=\"text\" id=\"y3-q-text-vs-block\" placeholder=\"e.g., We type words and use brackets to hold the loop, instead of dragging blocks...\" 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\" onclick=\"y3L8NextSlide(1, 2)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Custom Pattern Design \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Drawing Studio for Polygons -->\n  <div class=\"y3-l8-slide\" id=\"y3-l8-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 3: Design Your Capstone Polygon Pattern \ud83c\udfa8<\/h2>\n    <p>Use the canvas below to sketch a multi-polygon design or repeating pattern manually:<\/p>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n      <canvas id=\"y3-canvas-l8\" width=\"700\" height=\"250\" style=\"border: 2px dashed #0073aa; border-radius: 5px; background: #fafafa; cursor: crosshair; touch-action: none; max-width: 100%;\"><\/canvas>\n      <div style=\"margin-top: 8px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n        <label style=\"font-size: 12px;\">Color:<\/label>\n        <input type=\"color\" id=\"y3-l8-color\" value=\"#0073aa\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y3-l8-size\" min=\"2\" max=\"20\" value=\"4\">\n        <button type=\"button\" onclick=\"y3ClearCanvas('y3-canvas-l8')\" style=\"background: #e53935; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;\">\ud83d\uddd1\ufe0f Clear<\/button>\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L8NextSlide(2, 3)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: External Pencil Code Sandbox \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 4: External Pencil Code Link & Storage Space -->\n  <div class=\"y3-l8-slide\" id=\"y3-l8-slide-3\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 4: External Pencil Code Sandbox \ud83d\ude80<\/h2>\n    <p>Ready for a bigger challenge? Open the official Pencil Code website to build even more complex drawings. When you are finished, <strong>copy your code and paste it below<\/strong> to save it in your report!<\/p>\n\n    <div style=\"background-color: #e6f2f8; border-left: 5px solid #0073aa; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; text-align: center;\">\n      <a href=\"https:\/\/pencilcode.net\/edit\/first\" target=\"_blank\" rel=\"noopener\" style=\"display: inline-block; background-color: #0073aa; color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 16px;\">Launch PencilCode.net Sandbox \u2794<\/a>\n    <\/div>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 15px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">\ud83d\udcbe Paste &#038; Store Your External Pencil Code Here:<\/label>\n      <textarea id=\"y3-external-code\" rows=\"8\" style=\"width: 100%; font-family: monospace; font-size: 13px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\" placeholder=\"Paste the code you created on PencilCode.net here to save it into your Capstone Report...\"><\/textarea>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L8NextSlide(3, 4)\" style=\"background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Finish &#038; Download Report \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 5: Download Capstone Summary Report -->\n  <div class=\"y3-l8-slide\" id=\"y3-l8-slide-4\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Year 3 Computing Capstone Complete! \ud83c\udfc6<\/h2>\n    <p>Congratulations! You have completed the Year 3 Internet Safety &#038; Coding Unit! Download your final capstone report containing your code log and artwork.<\/p>\n\n    <button type=\"button\" onclick=\"y3L8DownloadReport()\" 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 Year 3 Capstone Portfolio Report<\/button>\n  <\/div>\n\n<\/div>\n\n<p><strong>Step 3: Log Off and Reflect \ud83d\udc4b (10 Mins)<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> What is the difference between <code>fd 50<\/code> and <code>fd 100<\/code>?<\/li>\n  <li>Log out securely from your PC and ensure your workstation is left clean and tidy!<\/li>\n<\/ul>\n\n<script>\n  var y3L8Data = { \n    executedCode: '', \n    pupdAns: '', \n    textVsBlockAns: '', \n    artworkImg: '', \n    turtleImg: '',\n    externalCode: '' \n  };\n  var activeCanvases = ['y3-canvas-l8'];\n  var isDrawingState = {};\n\n  \/\/ -- ROBUST TOKEN-BASED TURTLE ENGINE --\n  function runTurtleEngine() {\n    var rawText = document.getElementById(\"turtle-code-input\").value;\n    var cvs = document.getElementById(\"turtle-canvas-container\");\n    var ctx = cvs.getContext(\"2d\");\n    var errorBox = document.getElementById(\"turtle-error-msg\");\n    errorBox.style.display = \"none\";\n    y3L8Data.executedCode = rawText;\n\n    var cleanText = rawText.replace(\/<[^>]*>?\/gm, ' ')\n                           .replace(\/&nbsp;\/g, ' ')\n                           .replace(\/[\\u200B-\\u200D\\uFEFF]\/g, ' ');\n\n    var tokens = cleanText.match(\/([a-zA-Z]+|[0-9]+|\\[|\\])\/g);\n    if (!tokens) tokens = [];\n    \n    var pc = 0;\n    \n    function parseBlock() {\n      var cmds = [];\n      while (pc < tokens.length) {\n        var tok = tokens[pc].toLowerCase();\n        pc++;\n        \n        if (tok === ']') {\n          break;\n        } else if (tok === 'fd' || tok === 'bk' || tok === 'rt' || tok === 'lt') {\n          var arg = parseInt(tokens[pc]);\n          if (!isNaN(arg)) {\n            cmds.push({ cmd: tok, arg: arg });\n            pc++;\n          } else {\n            throw \"Expected a number after \" + tok;\n          }\n        } else if (tok === 'pu' || tok === 'pd') {\n          cmds.push({ cmd: tok });\n        } else if (tok === 'repeat') {\n          var count = parseInt(tokens[pc]);\n          if (isNaN(count)) throw \"Expected a number after repeat\";\n          pc++;\n          if (tokens[pc] !== '[') throw \"Expected a [ after repeat number\";\n          pc++;\n          var body = parseBlock();\n          cmds.push({ cmd: 'repeat', count: count, body: body });\n        }\n      }\n      return cmds;\n    }\n\n    try {\n      var ast = parseBlock();\n      \n      ctx.clearRect(0, 0, cvs.width, cvs.height);\n      var tX = cvs.width \/ 2;\n      var tY = cvs.height \/ 2 + 20;\n      var tAngle = -90;\n      var tPen = true;\n      \n      ctx.lineWidth = 3;\n      ctx.strokeStyle = '#0073aa';\n      ctx.lineCap = 'round';\n      ctx.lineJoin = 'round';\n      \n      function executeAST(nodes) {\n        for (var i = 0; i < nodes.length; i++) {\n          var n = nodes[i];\n          if (n.cmd === 'fd' || n.cmd === 'bk') {\n            var dist = (n.cmd === 'fd') ? n.arg : -n.arg;\n            var rad = tAngle * Math.PI \/ 180;\n            var nx = tX + dist * Math.cos(rad);\n            var ny = tY + dist * Math.sin(rad);\n            if (tPen) {\n              ctx.beginPath();\n              ctx.moveTo(tX, tY);\n              ctx.lineTo(nx, ny);\n              ctx.stroke();\n            }\n            tX = nx;\n            tY = ny;\n          } else if (n.cmd === 'rt') {\n            tAngle += n.arg;\n          } else if (n.cmd === 'lt') {\n            tAngle -= n.arg;\n          } else if (n.cmd === 'pu') {\n            tPen = false;\n          } else if (n.cmd === 'pd') {\n            tPen = true;\n          } else if (n.cmd === 'repeat') {\n            for (var r = 0; r < n.count; r++) {\n              executeAST(n.body);\n            }\n          }\n        }\n      }\n      \n      executeAST(ast);\n      \n      ctx.save();\n      ctx.translate(tX, tY);\n      ctx.rotate((tAngle + 90) * Math.PI \/ 180);\n      ctx.fillStyle = '#e53935';\n      ctx.beginPath();\n      ctx.moveTo(0, -10);\n      ctx.lineTo(-7, 7);\n      ctx.lineTo(7, 7);\n      ctx.closePath();\n      ctx.fill();\n      ctx.restore();\n      \n      y3L8Data.turtleImg = cvs.toDataURL();\n      \n    } catch (e) {\n      errorBox.innerText = \"Error: \" + e;\n      errorBox.style.display = \"block\";\n    }\n  }\n\n  function loadTurtlePreset(preset) {\n    var area = document.getElementById('turtle-code-input');\n    if (preset === 'square') {\n      area.value = \"repeat 4 [\\n  fd 80\\n  rt 90\\n]\";\n    } else if (preset === 'triangle') {\n      area.value = \"repeat 3 [\\n  fd 80\\n  rt 120\\n]\";\n    } else if (preset === 'pattern') {\n      area.value = \"repeat 8 [\\n  fd 50\\n  rt 45\\n]\";\n    }\n    runTurtleEngine();\n  }\n\n  \/\/ -- DRAWING STUDIO ENGINE --\n  function setupCanvasListeners(id) {\n    var cvs = document.getElementById(id);\n    if (!cvs) return;\n    var getContext = cvs.getContext('2d');\n\n    function getMousePos(e) {\n      var rect = cvs.getBoundingClientRect();\n      var clientX = e.touches ? e.touches[0].clientX : e.clientX;\n      var clientY = e.touches ? e.touches[0].clientY : e.clientY;\n      return { x: clientX - rect.left, y: clientY - rect.top };\n    }\n\n    function startDrawing(e) {\n      isDrawingState[id] = true;\n      var pos = getMousePos(e);\n      getContext.beginPath();\n      getContext.moveTo(pos.x, pos.y);\n    }\n\n    function draw(e) {\n      if (!isDrawingState[id]) return;\n      var pos = getMousePos(e);\n      var colorEl = document.getElementById('y3-l8-color');\n      var sizeEl = document.getElementById('y3-l8-size');\n      getContext.strokeStyle = colorEl ? colorEl.value : '#0073aa';\n      getContext.lineWidth = sizeEl ? sizeEl.value : 4;\n      getContext.lineCap = 'round';\n      getContext.lineTo(pos.x, pos.y);\n      getContext.stroke();\n    }\n\n    function stopDrawing() { isDrawingState[id] = false; }\n\n    cvs.onmousedown = startDrawing;\n    cvs.onmousemove = draw;\n    cvs.onmouseup = stopDrawing;\n    cvs.onmouseleave = stopDrawing;\n    cvs.ontouchstart = function(e) { startDrawing(e); };\n    cvs.ontouchmove = function(e) { draw(e); e.preventDefault(); };\n    cvs.ontouchend = stopDrawing;\n  }\n\n  function reinitCanvases() {\n    runTurtleEngine(); \n    for (var i = 0; i < activeCanvases.length; i++) {\n      setupCanvasListeners(activeCanvases[i]);\n    }\n  }\n\n  function y3ClearCanvas(id) {\n    var cvs = document.getElementById(id);\n    if (cvs) {\n      var ctx = cvs.getContext('2d');\n      ctx.clearRect(0, 0, cvs.width, cvs.height);\n    }\n  }\n\n  function y3L8NextSlide(currentIdx, targetIdx) {\n    if (currentIdx === 0) {\n      runTurtleEngine();\n    } else if (currentIdx === 1) {\n      var pu = document.getElementById('y3-q-pupd').value.trim();\n      var tvb = document.getElementById('y3-q-text-vs-block').value.trim();\n      if (!pu || !tvb) {\n        alert(\"Please answer both reflection questions before continuing!\");\n        return;\n      }\n      y3L8Data.pupdAns = pu;\n      y3L8Data.textVsBlockAns = tvb;\n    } else if (currentIdx === 2) {\n      var cvs = document.getElementById('y3-canvas-l8');\n      y3L8Data.artworkImg = cvs ? cvs.toDataURL() : '';\n    } else if (currentIdx === 3) {\n      \/\/ Capture the external code from Slide 4 before moving to Slide 5\n      y3L8Data.externalCode = document.getElementById('y3-external-code').value.trim() || 'No external code saved.';\n    }\n\n    var slides = document.querySelectorAll('#y3-l8-widget .y3-l8-slide');\n    for (var i = 0; i < slides.length; i++) {\n      slides[i].style.display = 'none';\n    }\n\n    var nextSlide = document.getElementById('y3-l8-slide-' + targetIdx);\n    if (nextSlide) {\n      nextSlide.style.display = 'block';\n    }\n\n    var progressPercents = [20, 40, 60, 80, 100];\n    var bar = document.getElementById('y3-l8-progress');\n    if (bar) {\n      bar.style.width = progressPercents[targetIdx] + '%';\n    }\n    \n    setTimeout(reinitCanvases, 150);\n  }\n\n  function y3L8DownloadReport() {\n    var htmlContent = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Year 3 Capstone Report<\/title><style>body{font-family:Arial,sans-serif;padding:20px;max-width:800px;margin:0 auto;background:#f4f4f9;}.card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);margin-bottom:20px;}h3{color:#0073aa;border-bottom:2px solid #eee;padding-bottom:5px;margin-top:0;}.text-block{background:#e6f2f8;padding:12px;border-left:4px solid #0073aa;font-size:14px;margin-top:8px;}img{max-width:100%;border:1px dashed #0073aa;border-radius:5px;margin-top:10px;}pre{background:#222;color:#00ffcc;padding:10px;border-radius:5px;white-space: pre-wrap; word-wrap: break-word;}<\/style><\/head><body>' +\n      '<h1>Year 3 Computing Unit Capstone Report \ud83c\udfc6<\/h1>' +\n      '<p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>' +\n      \n      '<div class=\"card\"><h3>1. Mini-Turtle Simulator Output<\/h3><p><strong>Executed Code:<\/strong><\/p><pre>' + y3L8Data.executedCode.replace(\/<\/g, \"&lt;\").replace(\/>\/g, \"&gt;\") + '<\/pre><p><strong>Output:<\/strong><\/p><img decoding=\"async\" src=\"' + y3L8Data.turtleImg + '\"><\/div>' +\n      \n      '<div class=\"card\"><h3>2. Reflection: Text Code vs Block Code<\/h3>' +\n      '<p><strong>Meaning of Pen Up and Pen Down:<\/strong><\/p><div class=\"text-block\">' + y3L8Data.pupdAns + '<\/div>' +\n      '<p><strong>Text Loops vs. Code.org Comparison:<\/strong><\/p><div class=\"text-block\">' + y3L8Data.textVsBlockAns + '<\/div><\/div>' +\n      \n      '<div class=\"card\"><h3>3. Capstone Design Artwork<\/h3><img decoding=\"async\" src=\"' + y3L8Data.artworkImg + '\"><\/div>' +\n      \n      '<div class=\"card\"><h3>4. External Pencil Code Work<\/h3><p><strong>Saved Code from PencilCode.net:<\/strong><\/p><pre>' + y3L8Data.externalCode.replace(\/<\/g, \"&lt;\").replace(\/>\/g, \"&gt;\") + '<\/pre><\/div>' +\n      \n      '<\/body><\/html>';\n\n    var blob = new Blob([htmlContent], { type: 'text\/html' });\n    var url = URL.createObjectURL(blob);\n    var a = document.createElement('a');\n    a.href = url;\n    a.download = 'Year3_Lesson8_Capstone_Report.html';\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n  }\n\n  window.addEventListener('DOMContentLoaded', reinitCanvases);\n  window.addEventListener('load', reinitCanvases);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Year 3 Computing \u2014 Lesson 8 (Capstone)! \ud83d\udc22\ud83d\udcbb Today is our unit capstone! We are taking everything we learned on Code.org about sequences,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-8-repetition-decomposition-and-angles-on-code-org\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.8 Repetition, Decomposition, and Angles on 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-427","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/427","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=427"}],"version-history":[{"count":13,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/427\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}