Six Lesson Course<\/title><\/p>\n<style>\n<p>\/* =========================================================\n GENERAL PAGE\n ========================================================= *\/<\/p>\n<p>* {\n box-sizing: border-box;\n}<\/p>\n<p>body {\n margin: 0;\n padding: 0;<\/p>\n<p> font-family: Arial, Helvetica, sans-serif;<\/p>\n<p> background: #eef2f6;\n color: #222;\n}<\/p>\n<p>.course-container {\n width: 100%;\n max-width: 1000px;<\/p>\n<p> margin: 30px auto;\n padding: 0 15px;\n}<\/p>\n<p>\/* =========================================================\n COURSE HEADER\n ========================================================= *\/<\/p>\n<p>.course-header {\n background: #193b63;\n color: white;<\/p>\n<p> padding: 30px;<\/p>\n<p> border-radius: 12px;<\/p>\n<p> box-shadow: 0 4px 15px rgba(0,0,0,0.10);<\/p>\n<p> margin-bottom: 25px;\n}<\/p>\n<p>.course-header h1 {\n margin: 0 0 10px;<\/p>\n<p> font-size: 30px;\n}<\/p>\n<p>.course-header p {\n margin: 0;<\/p>\n<p> line-height: 1.6;<\/p>\n<p> opacity: 0.95;\n}<\/p>\n<p>\/* =========================================================\n OVERALL PROGRESS\n ========================================================= *\/<\/p>\n<p>.overall-progress {\n margin-top: 25px;\n}<\/p>\n<p>.overall-progress-header {\n display: flex;<\/p>\n<p> justify-content: space-between;\n align-items: center;<\/p>\n<p> margin-bottom: 8px;<\/p>\n<p> font-size: 14px;\n}<\/p>\n<p>.progress-bar {\n width: 100%;<\/p>\n<p> height: 12px;<\/p>\n<p> background: #d9e1e8;<\/p>\n<p> border-radius: 20px;<\/p>\n<p> overflow: hidden;\n}<\/p>\n<p>.progress-fill {\n height: 100%;<\/p>\n<p> width: 0%;<\/p>\n<p> background: #42a5f5;<\/p>\n<p> border-radius: 20px;<\/p>\n<p> transition: width 0.3s ease;\n}<\/p>\n<p>\/* =========================================================\n LESSON CARDS\n ========================================================= *\/<\/p>\n<p>.lesson {\n background: white;<\/p>\n<p> border: 1px solid #d6dee6;<\/p>\n<p> border-radius: 12px;<\/p>\n<p> margin-bottom: 22px;<\/p>\n<p> overflow: hidden;<\/p>\n<p> box-shadow: 0 3px 12px rgba(0,0,0,0.07);\n}<\/p>\n<p>\/* =========================================================\n LESSON HEADER\n ========================================================= *\/<\/p>\n<p>.lesson-header {\n background: #245a8d;<\/p>\n<p> color: white;<\/p>\n<p> padding: 18px 20px;<\/p>\n<p> display: flex;<\/p>\n<p> justify-content: space-between;\n align-items: center;<\/p>\n<p> gap: 15px;\n}<\/p>\n<p>.lesson-header h2 {\n margin: 0;<\/p>\n<p> font-size: 21px;\n}<\/p>\n<p>.lesson-status {\n font-size: 13px;<\/p>\n<p> background: rgba(255,255,255,0.15);<\/p>\n<p> padding: 6px 10px;<\/p>\n<p> border-radius: 20px;<\/p>\n<p> white-space: nowrap;\n}<\/p>\n<p>\/* =========================================================\n LESSON CONTENT\n ========================================================= *\/<\/p>\n<p>.lesson-content {\n padding: 22px;\n}<\/p>\n<p>\/* =========================================================\n NOW \/ THEN \/ NEXT\n ========================================================= *\/<\/p>\n<p>.lesson-stage {\n border: 1px solid #dce3ea;<\/p>\n<p> border-radius: 8px;<\/p>\n<p> margin-bottom: 15px;<\/p>\n<p> overflow: hidden;<\/p>\n<p> background: #fff;\n}<\/p>\n<p>.stage-header {\n padding: 12px 15px;<\/p>\n<p> color: white;<\/p>\n<p> font-weight: bold;<\/p>\n<p> font-size: 16px;\n}<\/p>\n<p>\/* Different colours for each stage *\/<\/p>\n<p>.stage-now .stage-header {\n background: #3185c7;\n}<\/p>\n<p>.stage-then .stage-header {\n background: #6c757d;\n}<\/p>\n<p>.stage-next .stage-header {\n background: #32865b;\n}<\/p>\n<p>.stage-body {\n padding: 16px;\n}<\/p>\n<p>.stage-body p {\n margin-top: 0;<\/p>\n<p> line-height: 1.6;\n}<\/p>\n<p>.stage-body ul {\n line-height: 1.7;<\/p>\n<p> padding-left: 22px;\n}<\/p>\n<p>\/* =========================================================\n CHECKBOXES\n ========================================================= *\/<\/p>\n<p>.task {\n display: flex;<\/p>\n<p> align-items: flex-start;<\/p>\n<p> gap: 12px;<\/p>\n<p> padding: 12px;<\/p>\n<p> margin-top: 12px;<\/p>\n<p> background: #f6f8fa;<\/p>\n<p> border: 1px solid #e0e5ea;<\/p>\n<p> border-radius: 7px;<\/p>\n<p> cursor: pointer;<\/p>\n<p> transition:\n background 0.2s ease,\n border-color 0.2s ease;\n}<\/p>\n<p>.task:hover {\n background: #edf5fc;<\/p>\n<p> border-color: #b9d5eb;\n}<\/p>\n<p>.task input[type=\"checkbox\"] {\n width: 20px;\n height: 20px;<\/p>\n<p> margin-top: 1px;<\/p>\n<p> flex-shrink: 0;<\/p>\n<p> cursor: pointer;\n}<\/p>\n<p>.task label {\n cursor: pointer;<\/p>\n<p> line-height: 1.5;<\/p>\n<p> flex: 1;\n}<\/p>\n<p>\/* Completed task *\/<\/p>\n<p>.task.completed {\n background: #eaf7ef;<\/p>\n<p> border-color: #a9d8bb;\n}<\/p>\n<p>.task.completed label {\n text-decoration: line-through;<\/p>\n<p> color: #557060;\n}<\/p>\n<p>\/* =========================================================\n LESSON PROGRESS\n ========================================================= *\/<\/p>\n<p>.lesson-progress {\n margin-top: 20px;<\/p>\n<p> padding-top: 15px;<\/p>\n<p> border-top: 1px solid #e0e5ea;\n}<\/p>\n<p>.lesson-progress-header {\n display: flex;<\/p>\n<p> justify-content: space-between;<\/p>\n<p> font-size: 13px;<\/p>\n<p> margin-bottom: 7px;<\/p>\n<p> color: #555;\n}<\/p>\n<p>.lesson-progress-bar {\n height: 8px;<\/p>\n<p> background: #e1e6eb;<\/p>\n<p> border-radius: 20px;<\/p>\n<p> overflow: hidden;\n}<\/p>\n<p>.lesson-progress-fill {\n height: 100%;<\/p>\n<p> width: 0%;<\/p>\n<p> background: #42a5f5;<\/p>\n<p> border-radius: 20px;<\/p>\n<p> transition: width 0.3s ease;\n}<\/p>\n<p>\/* =========================================================\n COMPLETED LESSON\n ========================================================= *\/<\/p>\n<p>.lesson.completed-lesson {\n border-color: #72bd8d;\n}<\/p>\n<p>.lesson.completed-lesson .lesson-header {\n background: #27764d;\n}<\/p>\n<p>\/* =========================================================\n RESET BUTTON\n ========================================================= *\/<\/p>\n<p>.course-controls {\n text-align: center;<\/p>\n<p> margin: 30px 0 50px;\n}<\/p>\n<p>.reset-button {\n background: #c0392b;<\/p>\n<p> color: white;<\/p>\n<p> border: none;<\/p>\n<p> padding: 11px 20px;<\/p>\n<p> border-radius: 6px;<\/p>\n<p> cursor: pointer;<\/p>\n<p> font-size: 14px;\n}<\/p>\n<p>.reset-button:hover {\n background: #992d22;\n}<\/p>\n<p>\/* =========================================================\n SAVED MESSAGE\n ========================================================= *\/<\/p>\n<p>.saved-message {\n text-align: center;<\/p>\n<p> color: #27764d;<\/p>\n<p> font-size: 13px;<\/p>\n<p> margin-top: 12px;<\/p>\n<p> opacity: 0;<\/p>\n<p> transition: opacity 0.3s ease;\n}<\/p>\n<p>.saved-message.visible {\n opacity: 1;\n}<\/p>\n<p>\/* =========================================================\n MOBILE\n ========================================================= *\/<\/p>\n<p>@media (max-width: 600px) {<\/p>\n<p> .course-container {\n margin-top: 15px;<\/p>\n<p> padding: 0 10px;\n }<\/p>\n<p> .course-header {\n padding: 22px;\n }<\/p>\n<p> .course-header h1 {\n font-size: 24px;\n }<\/p>\n<p> .lesson-header {\n padding: 15px;<\/p>\n<p> align-items: flex-start;<\/p>\n<p> flex-direction: column;\n }<\/p>\n<p> .lesson-header h2 {\n font-size: 19px;\n }<\/p>\n<p> .lesson-content {\n padding: 15px;\n }<\/p>\n<p> .stage-body {\n padding: 13px;\n }<\/p>\n<p>}<\/p>\n<\/style>\n<p><\/head><\/p>\n<p><body><\/p>\n<div class=\"course-container\">\n<p> <\/p>\n<div class=\"course-header\">\n<h1>Six Lesson Course<\/h1>\n<p>\n Work through each lesson and tick the boxes as you complete<br \/>\n each activity. Your progress will be saved automatically.\n <\/p>\n<div class=\"overall-progress\">\n<div class=\"overall-progress-header\">\n<p> <span>Overall Progress<\/span><\/p>\n<p> <strong id=\"overallPercentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"progress-bar\">\n<div\n class=\"progress-fill\"\n id=\"overallProgress\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"1\">\n<div class=\"lesson-header\">\n<h2>Lesson 1: Introduction<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<p> <\/p>\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Start by thinking about what you already know about<br \/>\n the subject.\n <\/p>\n<ul>\n<li>Read the introduction.<\/li>\n<li>Think about what you already know.<\/li>\n<li>Consider what you would like to learn.<\/li>\n<\/ul>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson1-now-1\"\n data-task=\"lesson1-now-1\"\n ><\/p>\n<p> <label for=\"lesson1-now-1\"><br \/>\n I have read the introduction.<br \/>\n <\/label><\/p><\/div>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson1-now-2\"\n data-task=\"lesson1-now-2\"\n ><\/p>\n<p> <label for=\"lesson1-now-2\"><br \/>\n I have thought about what I already know.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Explore the main information for this lesson.\n <\/p>\n<ul>\n<li>Read the key information.<\/li>\n<li>Make notes of important ideas.<\/li>\n<li>Ask questions about anything you do not understand.<\/li>\n<\/ul>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson1-then-1\"\n data-task=\"lesson1-then-1\"\n ><\/p>\n<p> <label for=\"lesson1-then-1\"><br \/>\n I have completed the main learning activity.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n Finish the lesson by checking your understanding.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson1-next-1\"\n data-task=\"lesson1-next-1\"\n ><\/p>\n<p> <label for=\"lesson1-next-1\"><br \/>\n I am ready to move on to Lesson 2.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"2\">\n<div class=\"lesson-header\">\n<h2>Lesson 2: Core Concepts<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Begin by reviewing the previous lesson and introducing<br \/>\n today’s topic.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson2-now-1\"\n data-task=\"lesson2-now-1\"\n ><\/p>\n<p> <label for=\"lesson2-now-1\"><br \/>\n I have reviewed the previous lesson.<br \/>\n <\/label><\/p><\/div>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson2-now-2\"\n data-task=\"lesson2-now-2\"\n ><\/p>\n<p> <label for=\"lesson2-now-2\"><br \/>\n I understand today’s learning objectives.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Work through the main learning activity.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson2-then-1\"\n data-task=\"lesson2-then-1\"\n ><\/p>\n<p> <label for=\"lesson2-then-1\"><br \/>\n I have completed the Lesson 2 activity.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n Check your understanding before continuing.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson2-next-1\"\n data-task=\"lesson2-next-1\"\n ><\/p>\n<p> <label for=\"lesson2-next-1\"><br \/>\n I am ready to move on to Lesson 3.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"3\">\n<div class=\"lesson-header\">\n<h2>Lesson 3: Developing Knowledge<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Review what you have learned so far and prepare for<br \/>\n the next topic.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson3-now-1\"\n data-task=\"lesson3-now-1\"\n ><\/p>\n<p> <label for=\"lesson3-now-1\"><br \/>\n I have reviewed my previous learning.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Complete the main learning activity for Lesson 3.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson3-then-1\"\n data-task=\"lesson3-then-1\"\n ><\/p>\n<p> <label for=\"lesson3-then-1\"><br \/>\n I have completed the Lesson 3 activity.<br \/>\n <\/label><\/p><\/div>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson3-then-2\"\n data-task=\"lesson3-then-2\"\n ><\/p>\n<p> <label for=\"lesson3-then-2\"><br \/>\n I have checked my answers.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n Reflect on your learning.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson3-next-1\"\n data-task=\"lesson3-next-1\"\n ><\/p>\n<p> <label for=\"lesson3-next-1\"><br \/>\n I am ready for Lesson 4.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"4\">\n<div class=\"lesson-header\">\n<h2>Lesson 4: Applying Knowledge<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Think about how the knowledge from previous lessons<br \/>\n can be applied.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson4-now-1\"\n data-task=\"lesson4-now-1\"\n ><\/p>\n<p> <label for=\"lesson4-now-1\"><br \/>\n I have reviewed the relevant previous learning.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Complete the practical activity.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson4-then-1\"\n data-task=\"lesson4-then-1\"\n ><\/p>\n<p> <label for=\"lesson4-then-1\"><br \/>\n I have completed the practical activity.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n Consider what you have learned and prepare for Lesson 5.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson4-next-1\"\n data-task=\"lesson4-next-1\"\n ><\/p>\n<p> <label for=\"lesson4-next-1\"><br \/>\n I am ready to continue to Lesson 5.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"5\">\n<div class=\"lesson-header\">\n<h2>Lesson 5: Assessment and Review<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Review the important ideas covered in the course so far.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson5-now-1\"\n data-task=\"lesson5-now-1\"\n ><\/p>\n<p> <label for=\"lesson5-now-1\"><br \/>\n I have reviewed the key information.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Complete the assessment or review activity.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson5-then-1\"\n data-task=\"lesson5-then-1\"\n ><\/p>\n<p> <label for=\"lesson5-then-1\"><br \/>\n I have completed the assessment activity.<br \/>\n <\/label><\/p><\/div>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson5-then-2\"\n data-task=\"lesson5-then-2\"\n ><\/p>\n<p> <label for=\"lesson5-then-2\"><br \/>\n I have reviewed my answers.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n Identify anything that you need to revisit.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson5-next-1\"\n data-task=\"lesson5-next-1\"\n ><\/p>\n<p> <label for=\"lesson5-next-1\"><br \/>\n I am ready for the final lesson.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"lesson\" data-lesson=\"6\">\n<div class=\"lesson-header\">\n<h2>Lesson 6: Final Review<\/h2>\n<p> <span class=\"lesson-status\"><br \/>\n 0% Complete<br \/>\n <\/span><\/p><\/div>\n<div class=\"lesson-content\">\n<div class=\"lesson-stage stage-now\">\n<div class=\"stage-header\">\n NOW\n <\/div>\n<div class=\"stage-body\">\n<p>\n Review everything you have learned throughout the course.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson6-now-1\"\n data-task=\"lesson6-now-1\"\n ><\/p>\n<p> <label for=\"lesson6-now-1\"><br \/>\n I have reviewed the course material.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-then\">\n<div class=\"stage-header\">\n THEN\n <\/div>\n<div class=\"stage-body\">\n<p>\n Complete the final learning activity.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson6-then-1\"\n data-task=\"lesson6-then-1\"\n ><\/p>\n<p> <label for=\"lesson6-then-1\"><br \/>\n I have completed the final activity.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-stage stage-next\">\n<div class=\"stage-header\">\n NEXT\n <\/div>\n<div class=\"stage-body\">\n<p>\n You have reached the end of the course.\n <\/p>\n<div class=\"task\">\n<p> <input\n type=\"checkbox\"\n id=\"lesson6-next-1\"\n data-task=\"lesson6-next-1\"\n ><\/p>\n<p> <label for=\"lesson6-next-1\"><br \/>\n I have completed the course.<br \/>\n <\/label><\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"lesson-progress\">\n<div class=\"lesson-progress-header\">\n<p> <span>Lesson progress<\/span><\/p>\n<p> <strong class=\"lesson-percentage\"><br \/>\n 0%<br \/>\n <\/strong><\/p><\/div>\n<div class=\"lesson-progress-bar\">\n<div class=\"lesson-progress-fill\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"course-controls\">\n<p> <button\n class=\"reset-button\"\n id=\"resetProgress\"\n ><br \/>\n Reset All Progress<br \/>\n <\/button><\/p>\n<div\n class=\"saved-message\"\n id=\"savedMessage\"\n ><br \/>\n \u2713 Progress saved\n <\/div>\n<\/p><\/div>\n<\/div>\n<p><script><\/p>\n<p>\/* =========================================================\n COOKIE SETTINGS\n ========================================================= *\/<\/p>\n<p>const COOKIE_NAME = \"studentCourseProgress\";<\/p>\n<p>\/*\n Save progress for approximately 1 year.\n*\/\nconst COOKIE_DAYS = 365;<\/p>\n<p>\/* =========================================================\n SET COOKIE\n ========================================================= *\/<\/p>\n<p>function setCookie(name, value, days) {<\/p>\n<p> const date = new Date();<\/p>\n<p> date.setTime(\n date.getTime() +\n (days * 24 * 60 * 60 * 1000)\n );<\/p>\n<p> document.cookie =\n name +\n \"=\" +\n encodeURIComponent(value) +\n \";expires=\" +\n date.toUTCString() +\n \";path=\/;SameSite=Lax\";<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n GET COOKIE\n ========================================================= *\/<\/p>\n<p>function getCookie(name) {<\/p>\n<p> const cookies =\n document.cookie.split(\";\");<\/p>\n<p> for (let cookie of cookies) {<\/p>\n<p> cookie = cookie.trim();<\/p>\n<p> if (\n cookie.indexOf(name + \"=\") === 0\n ) {<\/p>\n<p> return decodeURIComponent(\n cookie.substring(\n name.length + 1\n )\n );<\/p>\n<p> }<\/p>\n<p> }<\/p>\n<p> return null;<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n DELETE COOKIE\n ========================================================= *\/<\/p>\n<p>function deleteCookie(name) {<\/p>\n<p> document.cookie =\n name +\n \"=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=\/;SameSite=Lax\";<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n SAVE STUDENT PROGRESS\n ========================================================= *\/<\/p>\n<p>function saveProgress() {<\/p>\n<p> const progress = {};<\/p>\n<p> document\n .querySelectorAll(\"[data-task]\")\n .forEach(checkbox => {<\/p>\n<p> progress[\n checkbox.dataset.task\n ] = checkbox.checked;<\/p>\n<p> });<\/p>\n<p> setCookie(\n COOKIE_NAME,\n JSON.stringify(progress),\n COOKIE_DAYS\n );<\/p>\n<p> showSavedMessage();<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n LOAD STUDENT PROGRESS\n ========================================================= *\/<\/p>\n<p>function loadProgress() {<\/p>\n<p> const saved =\n getCookie(COOKIE_NAME);<\/p>\n<p> if (!saved) {\n updateAllProgress();\n return;\n }<\/p>\n<p> try {<\/p>\n<p> const progress =\n JSON.parse(saved);<\/p>\n<p> document\n .querySelectorAll(\"[data-task]\")\n .forEach(checkbox => {<\/p>\n<p> const task =\n checkbox.dataset.task;<\/p>\n<p> if (\n Object.prototype.hasOwnProperty.call(\n progress,\n task\n )\n ) {<\/p>\n<p> checkbox.checked =\n progress[task];<\/p>\n<p> }<\/p>\n<p> });<\/p>\n<p> }<\/p>\n<p> catch (error) {<\/p>\n<p> console.log(\n \"Could not load saved progress.\"\n );<\/p>\n<p> }<\/p>\n<p> updateAllProgress();<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UPDATE TASK VISUAL STYLE\n ========================================================= *\/<\/p>\n<p>function updateTaskStyle(checkbox) {<\/p>\n<p> const task =\n checkbox.closest(\".task\");<\/p>\n<p> if (!task) {\n return;\n }<\/p>\n<p> task.classList.toggle(\n \"completed\",\n checkbox.checked\n );<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UPDATE LESSON PROGRESS\n ========================================================= *\/<\/p>\n<p>function updateLessonProgress(lesson) {<\/p>\n<p> const checkboxes =\n lesson.querySelectorAll(\n \"[data-task]\"\n );<\/p>\n<p> const total =\n checkboxes.length;<\/p>\n<p> let completed = 0;<\/p>\n<p> checkboxes.forEach(checkbox => {<\/p>\n<p> if (checkbox.checked) {\n completed++;\n }<\/p>\n<p> updateTaskStyle(checkbox);<\/p>\n<p> });<\/p>\n<p> const percentage =\n total === 0\n ? 0\n : Math.round(\n (completed \/ total) * 100\n );<\/p>\n<p> const percentageText =\n lesson.querySelector(\n \".lesson-percentage\"\n );<\/p>\n<p> const statusText =\n lesson.querySelector(\n \".lesson-status\"\n );<\/p>\n<p> const progressFill =\n lesson.querySelector(\n \".lesson-progress-fill\"\n );<\/p>\n<p> percentageText.textContent =\n percentage + \"%\";<\/p>\n<p> statusText.textContent =\n percentage + \"% Complete\";<\/p>\n<p> progressFill.style.width =\n percentage + \"%\";<\/p>\n<p> lesson.classList.toggle(\n \"completed-lesson\",\n percentage === 100\n );<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UPDATE OVERALL COURSE PROGRESS\n ========================================================= *\/<\/p>\n<p>function updateOverallProgress() {<\/p>\n<p> const checkboxes =\n document.querySelectorAll(\n \"[data-task]\"\n );<\/p>\n<p> const total =\n checkboxes.length;<\/p>\n<p> let completed = 0;<\/p>\n<p> checkboxes.forEach(checkbox => {<\/p>\n<p> if (checkbox.checked) {\n completed++;\n }<\/p>\n<p> });<\/p>\n<p> const percentage =\n total === 0\n ? 0\n : Math.round(\n (completed \/ total) * 100\n );<\/p>\n<p> document.getElementById(\n \"overallProgress\"\n ).style.width =\n percentage + \"%\";<\/p>\n<p> document.getElementById(\n \"overallPercentage\"\n ).textContent =\n percentage + \"%\";<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UPDATE EVERYTHING\n ========================================================= *\/<\/p>\n<p>function updateAllProgress() {<\/p>\n<p> document\n .querySelectorAll(\".lesson\")\n .forEach(lesson => {<\/p>\n<p> updateLessonProgress(\n lesson\n );<\/p>\n<p> });<\/p>\n<p> updateOverallProgress();<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n SAVED MESSAGE\n ========================================================= *\/<\/p>\n<p>let savedMessageTimer;<\/p>\n<p>function showSavedMessage() {<\/p>\n<p> const message =\n document.getElementById(\n \"savedMessage\"\n );<\/p>\n<p> message.classList.add(\n \"visible\"\n );<\/p>\n<p> clearTimeout(\n savedMessageTimer\n );<\/p>\n<p> savedMessageTimer =\n setTimeout(() => {<\/p>\n<p> message.classList.remove(\n \"visible\"\n );<\/p>\n<p> }, 1500);<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n CHECKBOX EVENT HANDLERS\n ========================================================= *\/<\/p>\n<p>document\n .querySelectorAll(\"[data-task]\")\n .forEach(checkbox => {<\/p>\n<p> checkbox.addEventListener(\n \"change\",\n function () {<\/p>\n<p> updateAllProgress();<\/p>\n<p> saveProgress();<\/p>\n<p> }\n );<\/p>\n<p> });<\/p>\n<p>\/* =========================================================\n RESET PROGRESS\n ========================================================= *\/<\/p>\n<p>document\n .getElementById(\"resetProgress\")\n .addEventListener(\n \"click\",\n function () {<\/p>\n<p> const confirmed =\n confirm(\n \"Are you sure you want to reset all of your course progress?\"\n );<\/p>\n<p> if (!confirmed) {\n return;\n }<\/p>\n<p> document\n .querySelectorAll(\"[data-task]\")\n .forEach(checkbox => {<\/p>\n<p> checkbox.checked = false;<\/p>\n<p> });<\/p>\n<p> deleteCookie(\n COOKIE_NAME\n );<\/p>\n<p> updateAllProgress();<\/p>\n<p> showSavedMessage();<\/p>\n<p> }\n );<\/p>\n<p>\/* =========================================================\n LOAD SAVED PROGRESS WHEN PAGE OPENS\n ========================================================= *\/<\/p>\n<p>loadProgress();<\/p>\n<p><\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Six Lesson Course Six Lesson Course Work through each lesson and tick the boxes as you complete each activity. Your progress will be saved automatically. Overall Progress 0% Lesson 1: Introduction 0% Complete NOW Start by thinking about what you already know about the subject. Read the introduction. Think about what you already know. Consider […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-645","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=645"}],"version-history":[{"count":1,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/645\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/645\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":645,"date":"2026-10-02T14:02:25","date_gmt":"2026-10-02T14:02:25","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=645"},"modified":"2026-10-02T14:02:25","modified_gmt":"2026-10-02T14:02:25","slug":"now-then-next","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/now-then-next\/","title":{"rendered":"Now Then Next"},"content":{"rendered":"

\n
\n
\n
\n<\/p>\n