{"id":346,"date":"2026-09-07T20:13:37","date_gmt":"2026-09-07T20:13:37","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=346"},"modified":"2026-09-07T20:15:55","modified_gmt":"2026-09-07T20:15:55","slug":"yr6-term-1-1-5-coding-a-poem","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-5-coding-a-poem\/","title":{"rendered":"Yr6 Term 1.1.5 Coding a poem"},"content":{"rendered":"\n<p><strong>Welcome back to Year 6 Computing! \ud83d\udcdc\ud83c\udfa8<\/strong><\/p>\n<p>Today we are blending technology and creative arts! You will learn how to write your own digital poetry and use block-based code to bring your poem to life with animated visual effects, background scenes, and sounds. Let&#8217;s dive in!<\/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 famous poetic lines and computer algorithms. Aim for smooth, steady rhythm and high accuracy!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Coding Poetry in Code.org \ud83d\ude80<\/strong><\/p>\n<p>We are going to use Code.org&#8217;s Poetry module to code dynamic visual effects that react to the words in a poem.<\/p>\n\n<div style=\"background-color: #f9f9f9; 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\udccd Important Access Instructions:<\/p>\n  <ol style=\"margin-bottom: 0;\">\n    <li>Click the link below to launch the Code.org Poetry module:<\/li>\n    <p style=\"margin: 10px 0;\"><a href=\"https:\/\/studio.code.org\/courses\/poetry-2023\/units\/1\/lessons\/1\/levels\/1?lang=en-US\" 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 Poetry Studio \u2794<\/a><\/p>\n    <li>When the page opens, <strong>do not sign in<\/strong>. Click the <strong>&#8220;Continue without logging in&#8221;<\/strong> option or simply begin on Level 1 as a guest.<\/li>\n  <\/ol>\n<\/div>\n\n<p><strong>Step 3: Poetic Code Elements \ud83e\udde9<\/strong><\/p>\n<p>As you work through the levels, pay close attention to these key coding concepts:<\/p>\n<ul>\n  <li><strong>Events:<\/strong> Blocks that wait for something to happen (e.g., <code>when line 2 is read<\/code> or <code>when clicked<\/code>).<\/li>\n  <li><strong>Effects:<\/strong> Animated background filters like rain, sparkles, or color shifts that match the poem&#8217;s mood.<\/li>\n  <li><strong>Sprites:<\/strong> Visual characters or items that appear, move, or change size as the poem progresses.<\/li>\n<\/ul>\n\n<p><strong>Step 4: Interactive Poetry Creator \ud83d\udcdd<\/strong><\/p>\n<p>Now it is time to plan your own masterpiece! Choose a theme, write a short 3-line poem, and plan which code effects you will use to animate it.<\/p>\n\n<!-- INTERACTIVE LESSON WIDGET -->\n<div id=\"poetry-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: 25%; height: 10px; background-color: #9c27b0; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Theme Selection -->\n  <div class=\"slide active\" id=\"slide-0\">\n    <h2 style=\"margin-top:0; color: #9c27b0;\">Step 1: Choose Your Poem&#8217;s Theme<\/h2>\n    <p>Select a mood\/theme for your animated poem:<\/p>\n    <div style=\"display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px;\">\n      <button class=\"theme-btn\" onclick=\"selectTheme('Ocean &#038; Nature \ud83c\udf0a', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83c\udf0a Ocean &#038; Nature<\/button>\n      <button class=\"theme-btn\" onclick=\"selectTheme('Space &#038; Stars \ud83d\ude80', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83d\ude80 Space &#038; Stars<\/button>\n      <button class=\"theme-btn\" onclick=\"selectTheme('Storm &#038; Mystery \ud83c\udf29\ufe0f', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\ud83c\udf29\ufe0f Storm &#038; Mystery<\/button>\n      <button class=\"theme-btn\" onclick=\"selectTheme('Joy &#038; Sunshine \u2600\ufe0f', this)\" style=\"padding: 15px; border: 2px solid #ccc; border-radius: 8px; cursor: pointer; background: white; font-size: 16px;\">\u2600\ufe0f Joy &#038; Sunshine<\/button>\n    <\/div>\n    <div style=\"text-align: right;\">\n      <button onclick=\"checkThemeAndNext(1)\" style=\"background-color: #9c27b0; 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: Write Poem Lines -->\n  <div class=\"slide\" id=\"slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #9c27b0;\">Step 2: Write Your Poem<\/h2>\n    <p>Compose a 3-line poem based on your chosen theme:<\/p>\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Line 1:<\/label>\n    <input type=\"text\" id=\"line1\" placeholder=\"e.g., Silent waves crash on the shore...\" style=\"width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\">\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Line 2:<\/label>\n    <input type=\"text\" id=\"line2\" placeholder=\"e.g., Deep blue waters dark and pure...\" style=\"width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\">\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Line 3:<\/label>\n    <input type=\"text\" id=\"line3\" placeholder=\"e.g., Whispering secrets forevermore.\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;\">\n\n    <div style=\"text-align: right;\">\n      <button onclick=\"checkPoemAndNext(2)\" style=\"background-color: #9c27b0; 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: #9c27b0;\">Step 3: Plan Your Code Effects<\/h2>\n    <p>Describe what visual effects or sprite movements you will code for each line in Code.org:<\/p>\n    \n    <label style=\"font-weight: bold; display: block; margin-top: 10px;\">Effect for Line 1:<\/label>\n    <textarea id=\"effect1\" rows=\"2\" placeholder=\"e.g., Set background to ocean and play wave 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;\">Effect for Line 2:<\/label>\n    <textarea id=\"effect2\" rows=\"2\" placeholder=\"e.g., Make a fish sprite swim across the screen\" 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;\">Effect for Line 3:<\/label>\n    <textarea id=\"effect3\" rows=\"2\" placeholder=\"e.g., Fade screen to dark blue and start bubble effect\" 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=\"checkEffectsAndNext(3)\" 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 4: Download -->\n  <div class=\"slide\" id=\"slide-3\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #9c27b0;\">Poetry Plan Complete! \ud83c\udfad<\/h2>\n    <p>Download your Poetry Plan and save it to your student folder. You can use it as your blueprint when coding in Code.org!<\/p>\n    <button onclick=\"downloadPoetryPlan()\" style=\"background-color: #9c27b0; 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 Poetry Plan<\/button>\n  <\/div>\n\n<\/div>\n\n<script>\n  let poetryData = {};\n  let selectedTheme = \"\";\n\n  function selectTheme(theme, btnElement) {\n    selectedTheme = theme;\n    let buttons = document.querySelectorAll('.theme-btn');\n    buttons.forEach(btn => {\n      btn.style.borderColor = '#ccc';\n      btn.style.backgroundColor = 'white';\n    });\n    btnElement.style.borderColor = '#9c27b0';\n    btnElement.style.backgroundColor = '#f3e5f5';\n  }\n\n  function checkThemeAndNext(nextSlideId) {\n    if (selectedTheme === \"\") {\n      alert(\"Please select a theme before continuing!\");\n      return;\n    }\n    poetryData.theme = selectedTheme;\n    showSlide(nextSlideId);\n  }\n\n  function checkPoemAndNext(nextSlideId) {\n    const l1 = document.getElementById('line1').value.trim();\n    const l2 = document.getElementById('line2').value.trim();\n    const l3 = document.getElementById('line3').value.trim();\n\n    if (l1 === \"\" || l2 === \"\" || l3 === \"\") {\n      alert(\"Please fill in all three lines of your poem!\");\n      return;\n    }\n\n    poetryData.line1 = l1;\n    poetryData.line2 = l2;\n    poetryData.line3 = l3;\n    showSlide(nextSlideId);\n  }\n\n  function checkEffectsAndNext(nextSlideId) {\n    const e1 = document.getElementById('effect1').value.trim();\n    const e2 = document.getElementById('effect2').value.trim();\n    const e3 = document.getElementById('effect3').value.trim();\n\n    if (e1 === \"\" || e2 === \"\" || e3 === \"\") {\n      alert(\"Please describe the code effect for each line!\");\n      return;\n    }\n\n    poetryData.effect1 = e1;\n    poetryData.effect2 = e2;\n    poetryData.effect3 = e3;\n    showSlide(nextSlideId);\n  }\n\n  function showSlide(slideIndex) {\n    document.querySelectorAll('#poetry-planner-widget .slide').forEach(slide => {\n      slide.style.display = 'none';\n    });\n    document.getElementById('slide-' + slideIndex).style.display = 'block';\n    \n    const progressPercents = [25, 50, 75, 100];\n    document.getElementById('progress-bar').style.width = progressPercents[slideIndex] + '%';\n  }\n\n  function downloadPoetryPlan() {\n    const htmlContent = `\n      <!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <title>My Animated Poetry Blueprint<\/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: #9c27b0; border-bottom: 2px solid #eee; padding-bottom: 5px; margin-top:0; }\n          .poem-line { background-color: #f3e5f5; padding: 10px; border-left: 4px solid #9c27b0; font-size: 16px; margin: 10px 0; font-style: italic; }\n          .code-plan { background-color: #e8f5e9; padding: 10px; border-left: 4px solid #4CAF50; font-size: 15px; margin: 5px 0 15px 0; }\n        <\/style>\n      <\/head>\n      <body>\n        <h1>My Animated Poetry Blueprint \ud83d\udcdc\ud83c\udfa8<\/h1>\n        <p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>\n        <p><strong>Chosen Theme:<\/strong> ${poetryData.theme}<\/p>\n        \n        <div class=\"card\">\n          <h3>Line 1 & Code Event<\/h3>\n          <div class=\"poem-line\">\"${poetryData.line1}\"<\/div>\n          <p><strong>Coded Animation \/ Event Plan:<\/strong><\/p>\n          <div class=\"code-plan\">${poetryData.effect1}<\/div>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Line 2 & Code Event<\/h3>\n          <div class=\"poem-line\">\"${poetryData.line2}\"<\/div>\n          <p><strong>Coded Animation \/ Event Plan:<\/strong><\/p>\n          <div class=\"code-plan\">${poetryData.effect2}<\/div>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Line 3 & Code Event<\/h3>\n          <div class=\"poem-line\">\"${poetryData.line3}\"<\/div>\n          <p><strong>Coded Animation \/ Event Plan:<\/strong><\/p>\n          <div class=\"code-plan\">${poetryData.effect3}<\/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_Poetry_Code_Plan.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 5: Log Off and Reflect \ud83d\udc4b<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> Share with a partner how using code event blocks (like <code>when line 2 is read<\/code>) helps express the emotions or story in a poem.<\/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\udcdc\ud83c\udfa8 Today we are blending technology and creative arts! You will learn how to write your own digital poetry&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr6-term-1-1-5-coding-a-poem\/\">Continue Reading<span class=\"screen-reader-text\">Yr6 Term 1.1.5 Coding a poem<\/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-346","post","type-post","status-publish","format-standard","hentry","category-year6","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/346","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=346"}],"version-history":[{"count":2,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/346\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/346\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}