tesolchina · tesolchina · Jan 7, 2026
diff --git a/gcap3056_extract/GCAP3056/govEnquiryChatbot.html b/gcap3056_extract/GCAP3056/govEnquiryChatbot.html
diff --git a/gcap3056_extract/GCAP3056/intro.html b/gcap3056_extract/GCAP3056/intro.html
diff --git a/gcap3056_extract/GCAP3056/week1-3/PracticeDiscussion.html b/gcap3056_extract/GCAP3056/week1-3/PracticeDiscussion.html
diff --git a/gcap3056_extract/GCAP3056/week1-3/ReflectAssess.html b/gcap3056_extract/GCAP3056/week1-3/ReflectAssess.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Report & Reflection</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#5D5CDE',
+                        'primary-light': '#7B7AE8',
+                        'primary-dark': '#4A49C2'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-white dark:bg-gray-900">
+    <div class="p-6">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Report & Reflection</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">Submit your report and receive feedback from your teacher via Moodle.</p>
+
+        <div class="space-y-6">
+            <!-- Placeholder for Reflection Questions -->
+            <div class="mb-6 bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg">
+                <h2 class="text-xl font-bold text-purple-800 dark:text-purple-200 mb-4">Reflection Questions</h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-4">
+                    [Placeholder] This section will contain reflection questions. You can add:
+                </p>
+                <ul class="space-y-2 text-gray-700 dark:text-gray-300">
+                    <li>• Personal insight questions</li>
+                    <li>• Critical thinking prompts</li>
+                    <li>• Self-evaluation checklists</li>
+                    <li>• Journaling exercises</li>
+                </ul>
+                <div class="mt-4">
+                    <label for="reflectionResponse" class="block text-gray-700 dark:text-gray-300 mb-2">Your Reflection:</label>
+                    <textarea id="reflectionResponse" class="w-full p-2 border rounded dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300" 
+                              placeholder="Write your reflections here..."
+                              onchange="saveResponse('reflectionResponse', this.value)"></textarea>
+                </div>
+            </div>
+
+            <!-- Report Submission Instructions -->
+            <div class="mb-6 bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg">
+                <h2 class="text-xl font-bold text-purple-800 dark:text-purple-200 mb-4">Report Submission</h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-4">
+                    Follow these instructions to submit your report:
+                </p>
+                <ul class="space-y-2 text-gray-700 dark:text-gray-300">
+                    <li>• Download your generated report from the main page.</li>
+                    <li>• Log in to Moodle and navigate to the appropriate course and assignment.</li>
+                    <li>• Upload the report file as instructed.</li>
+                    <li>• Check Moodle for feedback from your teacher after submission.</li>
+                </ul>
+                <p class="text-gray-700 dark:text-gray-300 mt-4">
+                    [Placeholder] Add specific Moodle links or additional instructions if needed.
+                </p>
+            </div>
+
+            <!-- Completion Button -->
+            <div class="flex justify-end">
+                <button onclick="markComplete()" 
+                        class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg">
+                    Mark as Complete
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function saveResponse(field, value) {
+            window.parent.postMessage({
+                type: 'saveResponse',
+                section: 'reflect',
+                response: { [field]: value }
+            }, '*');
+        }
+
+        function markComplete() {
+            window.parent.postMessage({
+                type: 'saveResponse',
+                section: 'reflect',
+                response: { completed: true }
+            }, '*');
+        }
+    </script>
+</body>
+</html>
diff --git a/gcap3056_extract/GCAP3056/week1-3/css/styles.css b/gcap3056_extract/GCAP3056/week1-3/css/styles.css
@@ -0,0 +1,163 @@
+/* ============================================
+   TEXT & COLOR ENHANCEMENTS
+   ============================================ */
+
+/* Strong text color for main content */
+body, .text-gray-700, .text-gray-800, .text-gray-900, .text-gray-500, .text-gray-600 {
+    color: #222 !important;
+    font-weight: 400;
+}
+
+.dark body, 
+.dark .text-gray-700, 
+.dark .text-gray-800, 
+.dark .text-gray-900,
+.dark .text-gray-500,
+.dark .text-gray-600 {
+    color: #f1f5f9 !important;
+}
+
+/* Feedback and status text */
+#govMcFeedback,
+#govTfFeedback,
+#transFb,
+#codeQuizFb,
+#ltrFb,
+.completion-status {
+    color: #222 !important;
+}
+.dark #govMcFeedback,
+.dark #govTfFeedback,
+.dark #transFb,
+.dark #codeQuizFb,
+.dark #ltrFb,
+.dark .completion-status {
+    color: #f1f5f9 !important;
+}
+
+/* MC/quiz button clarity */
+.gov-mc-btn,
+.trans-btn,
+.code-btn,
+.quiz-option {
+    color: #222 !important;
+    font-weight: 500;
+}
+.dark .gov-mc-btn,
+.dark .trans-btn,
+.dark .code-btn,
+.dark .quiz-option {
+    color: #f1f5f9 !important;
+    font-weight: 500;
+}
+
+/* ============================================
+   BULLET POINT ALIGNMENT
+   ============================================ */
+
+ul, ul.list-disc, ul.list-decimal {
+    margin-left: 0 !important;
+    padding-left: 1em !important;
+    list-style-position: outside !important;
+}
+li {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    margin-bottom: 0.5em !important;
+    color: inherit !important;
+}
+.dark ul li {
+    color: #f1f5f9 !important;
+}
+
+/* No faded bullets anywhere */
+ul li, ul.list-disc li, ul.list-decimal li {
+    color: inherit !important;
+}
+
+/* ============================================
+   PAGE WIDTH & LAYOUT
+   ============================================ */
+
+/* Max width for main containers */
+.max-w-4xl, .max-w-6xl {
+    max-width: 1400px !important;
+    width: 98% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+@media (min-width: 1600px) {
+    .max-w-4xl, .max-w-6xl {
+        max-width: 1600px !important;
+        width: 95% !important;
+    }
+}
+
+/* Adjust for mobile/tablet */
+@media (max-width: 1023px) {
+    .max-w-4xl, .max-w-6xl {
+        width: 100% !important;
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+}
+
+/* Content area min-height for better visual balance */
+#contentArea {
+    min-height: 60vh;
+    transition: all 0.3s ease;
+    background: inherit;
+}
+
+/* ============================================
+   NOTIFICATION & FEEDBACK
+   ============================================ */
+
+.notification {
+    background: #fff;
+    color: #222;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+}
+.dark .notification {
+    background: #222;
+    color: #f1f5f9;
+}
+
+/* ============================================
+   PRINT & ACCESSIBILITY
+   ============================================ */
+@media print {
+    .notification, #loadingIndicator, button { display: none !important; }
+    .max-w-4xl, .max-w-6xl { max-width: none !important; width: 100% !important; }
+}
+
+html { scroll-behavior: smooth; }
+
+/* Accessibility: Focus ring for all buttons */
+button:focus, .section-btn:focus {
+    outline: 2px solid #5D5CDE;
+    outline-offset: 2px;
+}
+
+/* ============================================
+   MISCELLANEOUS
+   ============================================ */
+
+/* Remove unwanted faded text for all gray variants */
+.text-gray-500, .text-gray-600, .text-gray-700 {
+    color: #222 !important;
+}
+.dark .text-gray-500, .dark .text-gray-600, .dark .text-gray-700 {
+    color: #f1f5f9 !important;
+}
+
+/* Ensure all list items are visible in dark mode */
+ul li {
+    color: inherit !important;
+}
+.dark ul li {
+    color: #f1f5f9 !important;
+}