{"id":423,"date":"2026-09-09T20:56:19","date_gmt":"2026-09-09T20:56:19","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=423"},"modified":"2026-09-09T20:57:50","modified_gmt":"2026-09-09T20:57:50","slug":"yr3-term-1-1-6","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-6\/","title":{"rendered":"Yr3 Term 1.1.6 Repetition, Decomposition, and Angles on Code.org."},"content":{"rendered":"\n<p><strong>Welcome to Year 3 Computing \u2014 Lesson 6! \ud83d\udcd0\ud83d\udd01<\/strong><\/p>\n<p>Today we are taking our coding skills further on <strong>Code.org<\/strong>! We will learn how to use <strong>Decomposition<\/strong> (breaking big problems into smaller steps), practice using <strong>Repeat Loops<\/strong>, and explore how changing <strong>Angles<\/strong> (like 90\u00b0, 45\u00b0, or 120\u00b0) changes the shapes our algorithms create!<\/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 coding and math terms: <em>decomposition, repetition, loop, angle, degree, corner, and polygon<\/em>. Keep your posture tall and keystrokes light!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Decomposition &#038; Angle Studio \ud83d\udcd0 (25 Mins)<\/strong><\/p>\n<p>Use the embedded module below to experiment with breaking down shapes, test how different turn angles alter drawings, and design a multi-sided polygon pattern!<\/p>\n\n<!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"y3-l6-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-l6-progress\" style=\"width: 25%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Decomposition & Angle Simulator -->\n  <div class=\"y3-l6-slide\" id=\"y3-l6-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: Decomposition &#038; Angle Simulator<\/h2>\n    <p><strong>Decomposition<\/strong> means breaking a complex shape down into tiny, simple parts. For example, drawing a square is just <code>Draw Line \u2794 Turn Corner<\/code> repeated 4 times!<\/p>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 15px; text-align: center;\">\n      <p style=\"font-weight: bold; margin-top: 0;\">Select an angle to see how changing degrees changes the shape:<\/p>\n      <div style=\"display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 15px;\">\n        <button type=\"button\" onclick=\"y3L6SimulateAngle(90)\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udcd0 Turn 90\u00b0 (Square Corner)<\/button>\n        <button type=\"button\" onclick=\"y3L6SimulateAngle(120)\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udcd0 Turn 120\u00b0 (Triangle Corner)<\/button>\n        <button type=\"button\" onclick=\"y3L6SimulateAngle(60)\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udcd0 Turn 60\u00b0 (Hexagon Corner)<\/button>\n      <\/div>\n\n      <div id=\"y3-l6-sim-output\" style=\"background: #222; color: #00ffcc; font-family: monospace; padding: 12px; border-radius: 5px; text-align: left; font-size: 13px; min-height: 80px;\">\n        Click an angle button above to simulate the algorithm&#8230;\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L6NextSlide(0, 1)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Decomposition Questions \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Logical Reasoning & Decomposition Questions -->\n  <div class=\"y3-l6-slide\" id=\"y3-l6-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Decomposition &#038; Repetition Reasoning<\/h2>\n    <p>Answer the questions below based on how loops simplify long code sequences:<\/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. Instead of writing &#8216;Move, Turn, Move, Turn, Move, Turn, Move, Turn&#8217;, what single block could we use?<\/label>\n      <input type=\"text\" id=\"y3-q-loop-block\" placeholder=\"e.g., A Repeat Loop block set to repeat 4 times...\" 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. If we change our turn angle from 90 degrees to 45 degrees, what will happen to our drawn shape?<\/label>\n      <input type=\"text\" id=\"y3-q-angle-change\" placeholder=\"e.g., The corners will be sharper, creating an 8-sided octagon pattern instead of a square...\" 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=\"y3L6NextSlide(1, 2)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Shape Drawing Studio \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Drawing Studio -->\n  <div class=\"y3-l6-slide\" id=\"y3-l6-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 3: Draw a Polygon or Multi-Angle Pattern \ud83c\udfa8<\/h2>\n    <p>Use the canvas below to draw a shape with different angles (e.g., a hexagon, octagon, star, or a house shape combining multiple angles):<\/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-l6\" 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-l6-color\" value=\"#0073aa\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y3-l6-size\" min=\"2\" max=\"20\" value=\"4\">\n        <button type=\"button\" onclick=\"y3ClearCanvas('y3-canvas-l6')\" 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=\"y3L6NextSlide(2, 3)\" 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 4: Download Report -->\n  <div class=\"y3-l6-slide\" id=\"y3-l6-slide-3\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Decomposition &#038; Angles Module Complete! \ud83c\udfc6<\/h2>\n    <p>Your answers, angle simulation logs, and multi-angle artwork have been saved into a full report. Download your file and save it into your personal student network folder.<\/p>\n\n    <button type=\"button\" onclick=\"y3L6DownloadReport()\" 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 Lesson 6 Decomposition Report<\/button>\n  <\/div>\n\n<\/div>\n\n<p><strong>Step 3: Repetition &#038; Angle Puzzles on Code.org \ud83d\ude80 (15 Mins)<\/strong><\/p>\n<p>Now let&#8217;s open <strong>Code.org<\/strong> to practice using repeat loops with different turn angles in turtle graphics!<\/p>\n\n<div style=\"background-color: #e6f2f8; border-left: 5px solid #0073aa; padding: 15px 20px; border-radius: 8px; margin: 20px 0;\">\n  <p style=\"margin-top: 0; font-weight: bold; font-size: 18px;\">\ud83d\udd11 Continue on Code.org:<\/p>\n  <p style=\"margin: 10px 0;\">\n    Click the button below to sign in and open your coding puzzles:\n  <\/p>\n  <p style=\"margin: 10px 0;\">\n    <a href=\"https:\/\/studio.code.org\/users\/sign_in\" target=\"_blank\" rel=\"noopener\" style=\"display: inline-block; background-color: #0073aa; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold;\">Launch Code.org Sign In \u2794<\/a>\n  <\/p>\n  <p style=\"margin-bottom: 0; font-size: 14px; color: #333;\"><em>Remember: Break complex shapes down into one side and one turn first, then wrap that sequence inside a repeat loop!<\/em><\/p>\n<\/div>\n\n<p><strong>Step 4: Log Off and Reflect \ud83d\udc4b (10 Mins)<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> What is &#8216;Decomposition&#8217; in computer science? (<em>Breaking a big, complex problem down into smaller, manageable parts!<\/em>)<\/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 y3L6Data = {\n    selectedAngleSim: 'None',\n    loopBlockAns: '',\n    angleChangeAns: '',\n    artworkImg: ''\n  };\n\n  var activeCanvases = ['y3-canvas-l6'];\n  var isDrawingState = {};\n\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-l6-color');\n      var sizeEl = document.getElementById('y3-l6-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\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    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 y3L6SimulateAngle(deg) {\n    var out = document.getElementById('y3-l6-sim-output');\n    y3L6Data.selectedAngleSim = deg + ' Degrees';\n    if (deg === 90) {\n      out.innerHTML = '<strong>ANGLE TEST: 90\u00b0 Turn (Square\/Rectangle)<\/strong><br>\u2794 Decomposed Step: Move Forward 100px \u2794 Turn Right 90\u00b0<br>\u2794 Repeat 4 Times = Standard 4-Sided Square<br><em>Result: Right-angle corners formed!<\/em>';\n    } else if (deg === 120) {\n      out.innerHTML = '<strong>ANGLE TEST: 120\u00b0 External Turn (Equilateral Triangle)<\/strong><br>\u2794 Decomposed Step: Move Forward 100px \u2794 Turn Right 120\u00b0<br>\u2794 Repeat 3 Times = 3-Sided Triangle<br><em>Result: Wider turns create a 3-pointed shape!<\/em>';\n    } else if (deg === 60) {\n      out.innerHTML = '<strong>ANGLE TEST: 60\u00b0 External Turn (Regular Hexagon)<\/strong><br>\u2794 Decomposed Step: Move Forward 100px \u2794 Turn Right 60\u00b0<br>\u2794 Repeat 6 Times = 6-Sided Hexagon<br><em>Result: Sharper turns create a 6-sided polygon!<\/em>';\n    }\n  }\n\n  function y3L6NextSlide(currentIdx, targetIdx) {\n    if (currentIdx === 0) {\n      if (y3L6Data.selectedAngleSim === 'None') {\n        alert(\"Please click one of the angle simulation buttons to test the algorithm before continuing!\");\n        return;\n      }\n    } else if (currentIdx === 1) {\n      var lb = document.getElementById('y3-q-loop-block').value.trim();\n      var ac = document.getElementById('y3-q-angle-change').value.trim();\n      if (!lb || !ac) {\n        alert(\"Please answer both questions before continuing!\");\n        return;\n      }\n      y3L6Data.loopBlockAns = lb;\n      y3L6Data.angleChangeAns = ac;\n    } else if (currentIdx === 2) {\n      var cvs = document.getElementById('y3-canvas-l6');\n      y3L6Data.artworkImg = cvs ? cvs.toDataURL() : '';\n    }\n\n    var slides = document.querySelectorAll('#y3-l6-widget .y3-l6-slide');\n    for (var i = 0; i < slides.length; i++) {\n      slides[i].style.display = 'none';\n    }\n\n    var nextSlide = document.getElementById('y3-l6-slide-' + targetIdx);\n    if (nextSlide) {\n      nextSlide.style.display = 'block';\n    }\n\n    var progressPercents = [25, 50, 75, 100];\n    var bar = document.getElementById('y3-l6-progress');\n    if (bar) {\n      bar.style.width = progressPercents[targetIdx] + '%';\n    }\n\n    setTimeout(reinitCanvases, 100);\n  }\n\n  function y3L6DownloadReport() {\n    var htmlContent = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Year 3 Lesson 6 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;}<\/style><\/head><body>' +\n      '<h1>Year 3 Decomposition, Loops & Angles Report \ud83d\udcd0\ud83d\udd01<\/h1>' +\n      '<p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>' +\n      \n      '<div class=\"card\"><h3>1. Angle Simulation Test<\/h3>' +\n      '<p><strong>Tested Angle Mode:<\/strong> ' + y3L6Data.selectedAngleSim + '<\/p><\/div>' +\n      \n      '<div class=\"card\"><h3>2. Decomposition & Repetition Reasoning<\/h3>' +\n      '<p><strong>Replacing repeated blocks:<\/strong><\/p><div class=\"text-block\">' + y3L6Data.loopBlockAns + '<\/div>' +\n      '<p><strong>Impact of changing turn angles:<\/strong><\/p><div class=\"text-block\">' + y3L6Data.angleChangeAns + '<\/div><\/div>' +\n      \n      '<div class=\"card\"><h3>3. Multi-Angle Polygon Artwork<\/h3><img decoding=\"async\" src=\"' + y3L6Data.artworkImg + '\"><\/div>' +\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_Lesson6_Decomposition_Report.html';\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(a);\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 6! \ud83d\udcd0\ud83d\udd01 Today we are taking our coding skills further on Code.org! We will learn how to use&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-6\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.6 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-423","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/423","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=423"}],"version-history":[{"count":2,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/423\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}