{"id":420,"date":"2026-09-09T20:54:28","date_gmt":"2026-09-09T20:54:28","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=420"},"modified":"2026-09-09T20:54:28","modified_gmt":"2026-09-09T20:54:28","slug":"yr3-term-1-1-7-complex-patterns","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-7-complex-patterns\/","title":{"rendered":"Yr3 Term 1.1.7 Complex Patterns"},"content":{"rendered":"\n<p><strong>Welcome to Year 3 Computing \u2014 Lesson 7! \ud83d\udd04\u26a1<\/strong><\/p>\n<p>Today we are taking our coding skills to the next level on <strong>Code.org<\/strong>! We will explore how <strong>Loops<\/strong> (repeating code) and <strong>Events<\/strong> (code that runs when something happens, like clicking a button) work together to create automated patterns and interactive programs!<\/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 terms: <em>loop, event, trigger, repeat, pattern, nested, and event-driven<\/em>. Keep your posture tall and keystrokes light!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Loops &#038; Events Studio \ud83c\udfa8 (25 Mins)<\/strong><\/p>\n<p>Use the embedded module below to experiment with event triggers, predict how loop algorithms behave, and design a complex repeating pattern!<\/p>\n\n<!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"y3-l7-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-l7-progress\" style=\"width: 25%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Interactive Event & Loop Trigger Simulator -->\n  <div class=\"y3-l7-slide\" id=\"y3-l7-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: What is an Event Trigger?<\/h2>\n    <p>An <strong>Event<\/strong> is an action that tells the computer <em>when<\/em> to start running code (like clicking a mouse button or tapping a key). Test how different event triggers run loop algorithms below:<\/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;\">Click an Event Trigger below to execute its loop algorithm:<\/p>\n      <div style=\"display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 15px;\">\n        <button type=\"button\" onclick=\"y3L7TriggerEvent('click')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\uddb1\ufe0f Event: WHEN Clicked<\/button>\n        <button type=\"button\" onclick=\"y3L7TriggerEvent('key')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\u2328\ufe0f Event: WHEN Arrow Key Pressed<\/button>\n        <button type=\"button\" onclick=\"y3L7TriggerEvent('nested')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udd04 Event: RUN Nested Loop (Pattern)<\/button>\n      <\/div>\n\n      <div id=\"y3-l7-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 Event Trigger button above to see the code execute&#8230;\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L7NextSlide(0, 1)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Loops &#038; Events Questions \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Logical Reasoning Questions -->\n  <div class=\"y3-l7-slide\" id=\"y3-l7-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Events &#038; Pattern Reasoning<\/h2>\n    <p>Answer the logical reasoning questions below based on how loops and events control code execution:<\/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 event block do we need if we want code to run only when a user clicks the mouse?<\/label>\n      <input type=\"text\" id=\"y3-q-event-block\" placeholder=\"e.g., 'When Clicked' or 'When Mouse Clicked' block...\" 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 does using a &#8216;Repeat Loop&#8217; make a program better than writing the same block 10 times?<\/label>\n      <input type=\"text\" id=\"y3-q-loop-advantage\" placeholder=\"e.g., It saves time, uses fewer blocks, prevents mistakes, and makes code easier to read...\" 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=\"y3L7NextSlide(1, 2)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Complex Pattern Studio \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Drawing Studio -->\n  <div class=\"y3-l7-slide\" id=\"y3-l7-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 3: Draw a Repeating Pattern \ud83c\udfa8<\/h2>\n    <p>Use the canvas below to design a repeating geometric pattern or spiraling shape (e.g., repeating squares, flowers, or starbursts):<\/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-l7\" 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-l7-color\" value=\"#0073aa\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y3-l7-size\" min=\"2\" max=\"20\" value=\"4\">\n        <button type=\"button\" onclick=\"y3ClearCanvas('y3-canvas-l7')\" 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=\"y3L7NextSlide(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-l7-slide\" id=\"y3-l7-slide-3\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Loops &#038; Events Module Complete! \ud83c\udfc6<\/h2>\n    <p>Your answers, event simulator log, and repeating pattern artwork have been compiled into a full report. Download your file and save it into your personal student network folder.<\/p>\n\n    <button type=\"button\" onclick=\"y3L7DownloadReport()\" 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 7 Safety &#038; Coding Report<\/button>\n  <\/div>\n\n<\/div>\n\n<p><strong>Step 3: Advanced Loops &#038; Events Puzzles on Code.org \ud83d\ude80 (15 Mins)<\/strong><\/p>\n<p>Now let&#8217;s open <strong>Code.org<\/strong> to practice using event blocks and complex repeat loops!<\/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 launch your 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>Challenge: Try using a loop inside another loop (a nested loop) to draw a full flower or starburst pattern!<\/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 an &#8216;Event&#8217; in computer coding? (<em>An action like a click or key press that tells the computer when to run specific code!<\/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 y3L7Data = {\n    selectedEventSim: 'None',\n    eventBlockAns: '',\n    loopAdvantageAns: '',\n    artworkImg: ''\n  };\n\n  var activeCanvases = ['y3-canvas-l7'];\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-l7-color');\n      var sizeEl = document.getElementById('y3-l7-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 y3L7TriggerEvent(type) {\n    var out = document.getElementById('y3-l7-sim-output');\n    y3L7Data.selectedEventSim = type;\n    if (type === 'click') {\n      out.innerHTML = '\u26a1 <strong>EVENT TRIGGERED: Mouse Clicked!<\/strong><br>\u2794 Algorithm Running: Move Forward 50px \u2794 Change Color \u2794 Play Sound<br><em>Status: Code Executed Successfully!<\/em>';\n    } else if (type === 'key') {\n      out.innerHTML = '\u26a1 <strong>EVENT TRIGGERED: Up Arrow Key Pressed!<\/strong><br>\u2794 Algorithm Running: Move Up 20px \u2794 Loop 3 Times [ Flash Color ]<em>Status: Code Executed Successfully!<\/em>';\n    } else if (type === 'nested') {\n      out.innerHTML = '\u26a1 <strong>EVENT TRIGGERED: Pattern Generator!<\/strong><br>\u2794 Running Outer Loop (4 times):<br>&nbsp;&nbsp;&nbsp;\u2022 Inner Loop: Draw Square (4 sides)<br>&nbsp;&nbsp;&nbsp;\u2022 Turn 90\u00b0<br><em>Status: 4-Square Flower Pattern Completed!<\/em>';\n    }\n  }\n\n  function y3L7NextSlide(currentIdx, targetIdx) {\n    if (currentIdx === 0) {\n      if (y3L7Data.selectedEventSim === 'None') {\n        alert(\"Please click one of the Event Trigger buttons to test the code before continuing!\");\n        return;\n      }\n    } else if (currentIdx === 1) {\n      var eb = document.getElementById('y3-q-event-block').value.trim();\n      var la = document.getElementById('y3-q-loop-advantage').value.trim();\n      if (!eb || !la) {\n        alert(\"Please answer both questions before continuing!\");\n        return;\n      }\n      y3L7Data.eventBlockAns = eb;\n      y3L7Data.loopAdvantageAns = la;\n    } else if (currentIdx === 2) {\n      var cvs = document.getElementById('y3-canvas-l7');\n      y3L7Data.artworkImg = cvs ? cvs.toDataURL() : '';\n    }\n\n    var slides = document.querySelectorAll('#y3-l7-widget .y3-l7-slide');\n    for (var i = 0; i < slides.length; i++) {\n      slides[i].style.display = 'none';\n    }\n\n    var nextSlide = document.getElementById('y3-l7-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-l7-progress');\n    if (bar) {\n      bar.style.width = progressPercents[targetIdx] + '%';\n    }\n\n    setTimeout(reinitCanvases, 100);\n  }\n\n  function y3L7DownloadReport() {\n    var htmlContent = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Year 3 Lesson 7 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 Loops & Events Coding Report \ud83d\udd04\u26a1<\/h1>' +\n      '<p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>' +\n      \n      '<div class=\"card\"><h3>1. Event Trigger Simulation<\/h3>' +\n      '<p><strong>Tested Event Mode:<\/strong> ' + y3L7Data.selectedEventSim + '<\/p><\/div>' +\n      \n      '<div class=\"card\"><h3>2. Loops & Events Reasoning<\/h3>' +\n      '<p><strong>Required Event Block:<\/strong><\/p><div class=\"text-block\">' + y3L7Data.eventBlockAns + '<\/div>' +\n      '<p><strong>Advantage of Repeat Loops:<\/strong><\/p><div class=\"text-block\">' + y3L7Data.loopAdvantageAns + '<\/div><\/div>' +\n      \n      '<div class=\"card\"><h3>3. Repeating Pattern Artwork<\/h3><img decoding=\"async\" src=\"' + y3L7Data.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_Lesson7_Loops_Events_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 7! \ud83d\udd04\u26a1 Today we are taking our coding skills to the next level on Code.org! We will explore&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-7-complex-patterns\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.7 Complex Patterns<\/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-420","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/420","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=420"}],"version-history":[{"count":1,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/420\/revisions"}],"predecessor-version":[{"id":421,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/420\/revisions\/421"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}