[
  {
    "id": "ai-prompt-library\\__MACOSX\\._ai-prompt-library",
    "title": ". ai-prompt-library",
    "folder": "._ai-prompt-library",
    "folderPath": "ai-prompt-library/__MACOSX",
    "indexPath": "ai-prompt-library/__MACOSX/._ai-prompt-library.html",
    "modifiedTime": "2025-11-19T23:27:26",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": false,
    "zipPath": null,
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\1materialsUsed\\scorable_newTab_timeline_AIused+index.html\\__MACOSX\\._index",
    "title": ". index",
    "folder": "._index",
    "folderPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html/__MACOSX",
    "indexPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html/__MACOSX/._index.html",
    "modifiedTime": "2026-02-06T11:16:04",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": false,
    "zipPath": null,
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Accounting_Theories",
    "title": "Accounting Theories",
    "folder": "Accounting_Theories",
    "folderPath": "Accounting_Theories",
    "indexPath": "Accounting_Theories/index.html",
    "modifiedTime": "2025-11-08T08:26:16",
    "topic": null,
    "gradeLevel": null,
    "subject": "Principles of Accounts",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Accounting_Theories.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Accounting_Theories_Battle_Arena_20251116",
    "title": "Accounting Theories Battle Arena 20251116",
    "folder": "Accounting_Theories_Battle_Arena_20251116",
    "folderPath": "Accounting_Theories_Battle_Arena_20251116",
    "indexPath": "Accounting_Theories_Battle_Arena_20251116/index.html",
    "modifiedTime": "2025-12-21T13:27:32.183745",
    "topic": "Accounting Theories",
    "gradeLevel": "Secondary 3",
    "subject": "History",
    "hasPrompt": true,
    "promptText": "ACP Prompt: by Ang Joo Bee https://vle.learning.moe.edu.sg/class-group/view/fb19f5f8-198c-4f8d-b1fd-1910dc16d40a?tab=forum&typeUuid=1b1a4bcf-d948-4d6e-aead-6634a487c88d&actionType=TOPIC\n \nSubject & Level: POA, 3G2, 3G3, 4G2 & 4G3\n \nTopic: Accounting Theories\n \nInteractive content: Game (fashioned after \"Clash Royale) with 3 levels to help students revise accounting theories.\n \nACP Prompt and HTML file: Refer to attached.\n\nI want to design a game-based learning interactive for my students.\nGrade level: Secondary 3\nStudent readiness level: Mixed Abilities\nThe game is based on only the following 12 accounting theories. Do not change the phrasing of the name, explanation and application. Use exactly the wording provided below.\nAccounting theory name: Accounting entity theory\nExplanation: The activities of a business are separate from the actions of the owner(s). All transactions are recorded from the point of view of the business.\nApplication: Contributions of resources by the sole owner for business use is recorded as “capital” while withdrawal of assets from the business by the sole owner for personal use is recorded as “drawings”.\n\nAccounting theory name: Accounting period theory\nExplanation: The life of a business is divided into regular time intervals. \nApplication: A business should prepare its financial statements at regular time intervals (e.g. at the end of every 12 months) to provide timely information for stakeholders to make decisions.\n\nAccounting theory name: Accrual basis of accounting theory\nExplanation: Business activities that have occurred, regardless of whether cash is paid or received, should be recorded in the relevant accounting period.\nApplication:\n•\tAdjusting for prepaid expense, expense payable, income receivable and income received in advance at the end of the accounting year.\n•\tAdjusting for interest expense payable at the end of the accounting year.\n\nAccounting theory name: Consistency  theory\nExplanation: Once an accounting method is chosen, this method should be applied to all future accounting periods to enable meaningful comparison of accounting information over time.\nApplication: Unless there is a change of usage pattern, a business should use the same depreciation method and depreciation rate every accounting period to enable meaningful comparison of the net book value of non-current assets over time.\n\nAccounting theory name: Going concern theory\nExplanation: A business is assumed to have an indefinite economic life unless there is credible evidence that it may close down. \nApplication: A business should prepare its financial statements at regular time intervals (e.g. at the end of every 12 months) to provide timely information for stakeholders to make decisions.\n\nAccounting theory name: Historical cost theory\nExplanation: Transactions should be recorded at their original cost.\nApplication: Transactions are recorded based on source documents as source documents provide proof of the original cost at which the transactions occurred.\n\nAccounting theory name: Matching theory\nExplanation: Expenses incurred must be matched against income earned in the same period to determine the profit for that period.\nApplication:\n•\tRecording of depreciation expense in the books of the business.\n•\tRecording of impairment loss on trade receivables in the books of a business.\n•\tRecording of interest expense in the books of a business.\n\nAccounting theory name: Materiality theory\nExplanation: A transaction is considered material if it makes a difference to the decision-making process.\nApplication: Recording small amounts as revenue expenditure even though they are likely to provide benefits beyond one financial year.\n\nAccounting theory name: Monetary theory\nExplanation: Only business transactions that can be measured in monetary terms are recorded.\nApplication: Business activities such as strong collaboration among employees and providing good customer service cannot be recorded in the books of the business as these cannot be measured in monetary terms.\n\nAccounting theory name: Objectivity theory\nExplanation: Accounting information recorded must be supported by reliable and verifiable evidence so that financial statements will be free from opinions and biases.\nApplication: Transactions are recorded based on source documents as they serve as evidence that transactions have occurred.\nAccounting theory: Prudence theory\nExplanation: The accounting treatment chosen should be the one that least overstates assets and profits and least understates liabilities and losses.\nApplication: \n•\tRecording accumulated depreciation in the books of the business.\n\n•\tRecording allowance for impairment of trade receivables in the books of the business.\n\n•\tInventory is valued on the Statement of Financial Position at cost or net realisable value, whichever is lower, to ensure that inventory (current asset) is not overstated.\n\nAccounting theory name: Revenue recognition theory\nExplanation: Revenue is earned when goods have been delivered or when  services have been provided.\nApplication: \n•\tSales revenue is recorded in the books of the business when goods have been delivered.\n•\tService fee revenue is recorded in the books of the business when services have been provided.\n\nThe objective of the game is to: help students remember the names of accounting theories, the explanation of accounting theories and application of accounting theories in the knowledge base\n\nWhile playing the game, students should experience: rapid fire questions\nCreate a game story that models after the game “Clash Royale”.\nThere are 3 levels in this game. \nLevel 1 has 12 questions covering all 12 accounting theories. \nLevel 2 has 12 questions covering all 12 accounting theories.\nIn Level 1, student will be given the name of as accounting theory and student has to select the correct explanation.\nIn level 2, student will be given the explanation of an accounting theory and student has to select the correct name of the accounting theory.\nFor level 1 and level 2, each accounting theory should be asked once and only once before any repeats occur. \nIn level 3, student will be given the application of an accounting theory and student must select the correct name AND accounting explanation of the accounting theory.\nLevel 3 has 18 questions covering all applications.\nFor level 3, each application should be asked once and only once before any repeats occur.\nFor Level 3, for the answer panel, there should be 2 sections. 1 section for student to select Accounting theory name and 1 section for student to select Explanation of accounting theory.\nFor Level 3, make the 2 panels side by side.\n\nDisplay congratulatory message each time the student gets a question right or each time student levels up. Display score counter.\nAt any point in time, let students have the option of restarting that particular level or that particular game altogether.\nTell students what is the correct answer each time they make a mistake. \nLevel 1 and 2 are optional. Level 3 is compulsory. Students can choose to start at level 1, 2 or 3 when they enter the game.\nUse font size 12 in the entire game.\nFor all levels, there should be a “Submit Answer” button.\n\n\n",
    "hasZip": true,
    "zipPath": "Accounting_Theories_Battle_Arena_20251116.zip",
    "hasPromptImage": true,
    "promptImagePath": "Accounting_Theories_Battle_Arena_20251116/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Accounting_Theories_Battle_Arena_20251116/Accounting_Theories_Prompt.docx",
    "knowledgeBaseExt": "docx",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Acid-Base Indicator Testing Lab",
    "title": "Acid-Base Indicator Testing Lab",
    "folder": "Acid-Base Indicator Testing Lab",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Acid-Base Indicator Testing Lab.html",
    "modifiedTime": "2025-12-21T13:26:58.032432",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Acid-Base Indicator Testing Lab”** where students test different household substances using multiple acid–base indicators to determine approximate pH and classify substances as acids, bases, or neutral.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary Science (approx. ages 11–14)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content aligned to basic acid–base concepts (pH scale, indicators, acids vs bases vs neutral)\n- Visual **virtual lab bench** with:\n  - A **test tube rack** containing multiple clickable test tubes (e.g., 8 tubes)\n  - Shelves holding **indicator bottles** and **substance bottles**, each clearly labeled\n- User interaction primarily via **mouse/touch clicks** on:\n  - Test tubes (to select a tube)\n  - Substance bottles (to add a substance to the selected tube)\n  - Indicator bottles (to add indicators and observe color changes)\n- Include **2D visualizations**:\n  - Colored test tubes showing liquid and indicator color change\n  - A **pH scale bar** (1–14) with a smooth color gradient from strong acid to strong base\n  - A **digital pH display** and a text readout of the substance’s “nature” (Strong Acid / Weak Acid / Neutral / Weak Base)\n- Real-time updates:\n  - When a test is performed, the test tube color should change to the correct indicator color\n  - pH reading and nature text should update immediately when a tested tube is selected\n  - A results/observation table should update live as more tests are done\n- Include a **hint modal** and **zoom/magnified view**:\n  - Hint button opens a modal with concise rules for interpreting indicator colors and pH ranges\n  - Zoom button opens a modal showing a magnified view of the current tested tube’s color\n- Self-contained front-end (HTML + CSS + JavaScript). It may be a single HTML file with embedded CSS/JS or separate `.css` / `.js` files, but **no external libraries** should be required.\n- Clear labels, legends, and explanations:\n  - Labels for “Indicators”, “Test Substances”, “pH Scale”, “pH Reading”, “Observation Table”\n  - Tooltips or titles on bottles and test tubes with additional information (e.g., approximate pH, strong/weak acid/base)\n- **MOBILE-RESPONSIVE**:\n  - Include a viewport meta tag for proper scaling on phones\n  - Layout should adapt to smaller screens (stack panels vertically, ensure text remains readable)\n- **TOUCH-ENABLED**:\n  - All interactions (select tube, select substance, select indicator, buttons) must work with touch events\n  - Avoid double-tap zoom issues on mobile (e.g., preventing default double-tap zoom where appropriate)\n\nSPECIFIC REQUIREMENTS:\n\nLab components and substances\n- Test tube rack:\n  - At least **8 clickable test tubes** in a rack\n  - Clicking a test tube **selects** it (visually highlighted)\n  - Each tube can store:\n    - Which substance is inside\n    - Which indicator was used\n    - Whether it has been “tested”\n- Indicators (on an “Indicators” shelf section):\n  - **Universal Indicator**\n  - **Litmus Solution**\n  - **Phenolphthalein**\n  - **Methyl Orange**\n- Test Substances (on a “Test Substances” shelf section):\n  - Vinegar (Acetic Acid) – weak acid, pH ≈ 2.5\n  - Lemon Juice (Citric Acid) – weak acid, pH ≈ 2\n  - Distilled Water – neutral, pH 7\n  - Baking Soda Solution – weak base, pH ≈ 9\n  - Soap Solution – weak base, pH ≈ 10\n  - Dilute Hydrochloric Acid (HCl) – strong acid, pH ≈ 1\n  - **Unknown X** – mystery substance, pH ≈ 8.5 (weak base) that students can identify using indicators\n- Each bottle should have:\n  - A visible label (e.g., “Vinegar”, “Lemon”, “Water”, “Baking Soda”, “Soap”, “HCl”, “Unknown X”)\n  - A tooltip/title with a short description (e.g., “Weak acid, pH ~2.5”)\n\nInteraction logic and flow\n- Step-wise interaction with **dynamic instructions**:\n  - Step 1: “Select a clean test tube from the rack”\n  - Step 2: “Select a substance to add to the test tube”\n  - Step 3: “Select an indicator to test the substance”\n  - Step 4: “Click the indicator again to add it to the tube” (if needed for clarity)\n  - Instructions should update automatically based on what the learner has already done (selected tube, added substance, etc.).\n- When a **substance bottle** is clicked:\n  - That substance becomes the “selected substance” (bottle highlighted)\n  - If a test tube is already selected, the substance is added to that tube:\n    - Tube visually fills with a base color (e.g., pale liquid colored according to the substance)\n    - The tube’s tooltip updates to indicate which substance it contains.\n- When an **indicator bottle** is clicked:\n  - That indicator becomes the “selected indicator” (bottle highlighted)\n  - If the selected tube already has a substance, adding the indicator should:\n    - Trigger a short animation (“testing” state) and then\n    - Change the liquid color in that tube to the correct indicator color based on the substance’s pH.\n\nIndicator behavior (core simulation logic)\n- Use a simple rule-based mapping from **substance pH** to indicator color.\n- Example mappings (as in the current interactive):\n  - Universal Indicator:\n    - HCl (pH 1): red\n    - Lemon (pH 2): orange-red\n    - Vinegar (pH 2.5): orange\n    - Water (pH 7): green\n    - Unknown X (pH 8.5): cyan/light blue\n    - Baking Soda (pH 9): blue\n    - Soap (pH 10): dark blue\n  - Litmus:\n    - Acids (pH 1–2.5): red/pink\n    - Neutral (pH 7): purple\n    - Bases (pH 8.5–10): blue/teal\n  - Phenolphthalein:\n    - pH < 7: colorless/transparent\n    - pH ≈ 7: colorless\n    - pH ≥ 8.5: pink to deeper pink\n  - Methyl Orange:\n    - Strong/weak acids: red/orange-red\n    - Near neutral to basic: orange/yellow\n- After a test is performed:\n  - Mark the tube as “tested”\n  - Save its substance, indicator, and resulting color into a data structure for use by the pH display, zoom view, and results table.\n\npH scale and display\n- Include a **pH Scale panel** with:\n  - Numbers 1–14 along the scale\n  - A horizontal color gradient bar from strong acid (red) through neutral (green) to strong base (blue/purple)\n  - Labels indicating ranges (e.g., “Strong Acid”, “Neutral”, “Strong Base”).\n- Include a **Digital pH Display**:\n  - Large numeric pH value (1 decimal place) for the currently selected tested tube\n  - A text label indicating chemical nature (e.g., “Strong Acid”, “Weak Acid”, “Neutral”, “Weak Base”)\n  - Color-code the pH value text:\n    - Red-ish for pH < 7\n    - Green for pH = 7\n    - Blue-ish for pH > 7\n  - If no tube is selected or the selected tube hasn’t been tested yet, show placeholders (e.g., “-.-” and “Select a test tube”).\n\nObservation / results table\n- Include an **“Observation Table”** section with a scrollable table:\n  - Columns: Substance | Universal | Litmus | Phenolphthalein | Methyl Orange | pH | Nature\n  - Each indicator column should show a small colored square representing the observed color for that substance–indicator combination.\n- Behavior:\n  - When a test is performed, the table row for that substance is created or updated.\n  - Untested indicator cells can show a placeholder (e.g., “-” or an empty box).\n  - The table initially displays a message like “No tests performed yet”.\n\nHint and zoom functionality\n- **Hint button**:\n  - Opens a modal dialog titled “Helpful Hints” (or similar)\n  - Bullet points summarizing key rules:\n    - pH ranges for acids/bases\n    - Indicator behavior (litmus red/blue, phenolphthalein colorless/pink, universal indicator colors, etc.)\n    - Examples of strong vs weak acids/bases.\n- **Zoom button**:\n  - If a tested tube is currently selected, open a “Magnified View” modal showing a large test tube with the exact indicator color for that tube.\n  - If no tested tube is selected, show an alert or message: e.g., “Please select a tested tube to zoom in!”.\n\nGlobal controls\n- **Reset** button:\n  - Confirms with the user before clearing\n  - On reset, clear:\n    - All tubes (remove substances/indicators, reset colors)\n    - Selected substance/indicator\n    - pH display and nature text\n    - Observation table (back to “No tests performed yet”)\n- All buttons should have clear labels and tooltips (e.g., Hint, Zoom, Reset).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Describe the difference between acids, bases, and neutral substances using the pH scale\n  - Use multiple indicators (universal, litmus, phenolphthalein, methyl orange) to infer whether a substance is acidic, neutral, or basic\n  - Interpret indicator color changes to estimate approximate pH values\n  - Use patterns in their observation table to identify an **unknown substance** from its indicator responses.\n- The interactive should encourage **experimental thinking**:\n  - Try different indicators on the same substance\n  - Compare indicator responses across different substances\n  - Use hints and observation table to draw conclusions.\n\nINTERACTION FEATURES TO INCLUDE:\n- Clear, guided **step-by-step instructions** that update as the learner progresses\n- Clickable bottles and test tubes with visible “selected” state\n- Real-time visual updates (tube colors, pH display, observation table)\n- Modals for hints and zoomed-in visualization\n- Reset functionality to return to a clean state\n- Tooltips/titles for key elements (bottles, tubes, scales) providing extra context.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Acid-Base Indicator Testing Lab.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Acid-Base Indicator Testing Lab_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025/Acid-Base_Indicator_Testing_Lab_20251107",
    "title": "Acid-Base Indicator Testing Lab 20251107",
    "folder": "Acid-Base_Indicator_Testing_Lab_20251107",
    "folderPath": "ACPcookout2025/Acid-Base_Indicator_Testing_Lab_20251107",
    "indexPath": "ACPcookout2025/Acid-Base_Indicator_Testing_Lab_20251107/index.html",
    "modifiedTime": "2025-12-21T13:26:59.138834",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Acid-Base_Indicator_Testing_Lab_20251107.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Acid-Base Titration Curve Explorer",
    "title": "Acid-Base Titration Curve Explorer",
    "folder": "Acid-Base Titration Curve Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Acid-Base Titration Curve Explorer.html",
    "modifiedTime": "2025-12-21T13:27:07.450550",
    "topic": null,
    "gradeLevel": "Junior College 1",
    "subject": "Character & Citizenship Education",
    "hasPrompt": true,
    "promptText": "By Guan Foo\nLearning Objectives: To understand which indicator to use for the different types of acid-base titrations.\nInteractive Prompt:\nGrade level: Junior College 1\n\nStudent readiness level: Mixed Abilities\n\nThe graph visualisation focuses on: Using titration curves to explore the suitability of indicators to determine colour change at end-point.\n\n \n\nThe objective of the visualisation is to: Help students understand which indicator to be used is dependent on the type of acid-base titration (e.g. strong acid-strong base, strong acid-weak base, weak acid-strong base, weak acid-weak base). Students should be given the opportunity to see the various types of acid-base titration and from there, explore which indicators (e.g methyl orange, screened methyl orange, thymolphthalein) can be used. Thereafter, they should be given the opportunity to explain the choice of indicator.\n\n \n\nWhile exploring the various titration curves, students should experience: Choosing an indicator and see where its working range lies on the pH scale of titration curve. The titration curve has pH as the y-axis and volume of titrant as the x-axis. Students should be given the option to define the titrant used.\n\n \n\nThe interface should include: Choice of indicators (methyl orange, screened methyl orange, thymolphthalein), Working range of indicators, appearance of conical flask as the titration proceeds with indicator added.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Acid-Base Titration Curve Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Acid-Base Titration Curve Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Addition Within 10 - Drag and Drop Assessment",
    "title": "Addition Within 10 - Drag and Drop Assessment",
    "folder": "Addition Within 10 - Drag and Drop Assessment",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Addition Within 10 - Drag and Drop Assessment.html",
    "modifiedTime": "2025-12-21T13:27:02.513122",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Addition Within 10 – Drag and Drop Assessment”** where students complete simple addition equations (sums ≤ 10) by dragging the correct missing addend into place, with progress tracking, feedback, and hints.\n\nTARGET AUDIENCE:\n- Lower Primary Mathematics (Primary 1–2; approx. ages 6–8)\n\nINTERACTIVE REQUIREMENTS:\n- One equation shown at a time in the form:\n  - **firstNumber + ? = result** (e.g., `8 + ? = 10`).\n- A **drop zone** for the missing number, initially showing a `?` placeholder.\n- A bank of **draggable number tiles** (e.g., 1–7) displayed below the equation.\n- Students drag a number tile into the drop zone to propose an answer.\n- Assessment consists of a fixed set of **5 questions**, generated randomly but within constraints.\n- UI elements:\n  - Progress bar showing how many questions have been attempted.\n  - Score display (e.g., “Score: X/5”).\n  - Feedback text area for immediate response.\n  - Hint area for contextual hints when students struggle.\n  - Completion modal at the end summarizing performance and offering a restart option.\n- Self-contained HTML, CSS, JavaScript (no external libraries). Support mouse and touch.\n- **ACCESSIBLE & MOBILE-FRIENDLY**:\n  - Draggable numbers should be keyboard-focusable and operable (Enter/Space to select).\n  - Layout adapts to iframe or full-screen.\n\nSPECIFIC REQUIREMENTS:\n\nQuestion generation\n- Generate **5 unique addition questions** where:\n  - result is between 3 and 10 inclusive.\n  - firstNumber is between 1 and result−1.\n  - secondNumber = result − firstNumber is between 1 and 7.\n- Avoid duplicate questions by tracking combinations like `a+b=result`.\n- Store questions as objects `{ firstNumber, secondNumber, result, answered }`.\n\nMain assessment flow\n- State variables:\n  - `currentQuestion` index (0–4).\n  - `score` (0–5).\n  - `totalQuestions = 5`.\n  - `isAnswered` flag for current question.\n  - `attempts` count for current question.\n  - `maxAttempts` (e.g., 3 attempts per question).\n  - `hintShown` flag per question.\n- For each question:\n  - Display `firstNumber` and `result` in the equation view.\n  - Drop zone contains `?` until a number is dropped/selected.\n  - When a number tile is placed in drop zone:\n    - Show it visually.\n    - Mark that tile as “used” (e.g., greyed) while others reset.\n    - Enable **Check Answer** button.\n    - Update feedback: prompt student to check.\n\nDrag-and-drop and touch/keyboard\n- Each `.draggable-number` tile:\n  - Is `draggable=\"true\"` for desktop HTML5 DnD.\n  - Has `data-value` storing its numeric value.\n  - Has `tabindex=\"0\"`, `role=\"button\"`, and `aria-label` describing the number.\n- Drag logic (desktop):\n  - On `dragstart`, set transfer data to selected value and add a `dragging` class.\n  - On drop zone `dragover`, prevent default and add `drag-over` style.\n  - On `drop`, read value, call a handler to update the drop zone and mark the chosen tile as used.\n- Touch logic (mobile):\n  - On `touchstart` on a number tile, directly treat as selection and send its value to the drop zone (no complex drag visual needed).\n- Keyboard logic:\n  - When a tile has focus, pressing Enter or Space selects that value as if dragged into the drop zone.\n\nAnswer checking and feedback\n- When **Check Answer** is pressed:\n  - If already answered or no value selected, do nothing.\n  - Increment `attempts`.\n  - Compare the student’s chosen value in drop zone with `secondNumber` of the current question.\n- If correct:\n  - Mark drop zone with a `correct` style.\n  - Feedback text: enthusiastic positive message (e.g., “Excellent! That’s correct! 🎉”).\n  - Hide the hint area and remove any highlights.\n  - Increment `score` and update score display.\n  - Hide **Check Answer** and Hint buttons.\n  - If not the last question: show **Next Question** button.\n  - If last question: after a slight delay, show completion modal.\n- If incorrect and attempts < maxAttempts:\n  - Momentarily mark drop zone with `incorrect` style.\n  - Show friendly feedback (e.g., “Not quite right. Try again!”).\n  - Hide **Check Answer**, show **Try Again** button, and reveal **Hint** button (if not already shown).\n- If incorrect and attempts >= maxAttempts:\n  - Show feedback revealing the correct answer (e.g., “The correct answer is 2. Let’s try the next one!”).\n  - Hide Check/Hint, ensure hint area is hidden.\n  - Move on to Next Question or finish and show completion modal.\n\nHint system\n- **Hint button** appears after at least one incorrect attempt and before max attempts reached.\n- `showHint()` generates a graded hint depending on how many attempts have been made, e.g.:\n  - 1st hint: “Think: What number do you add to 4 to get 9?”\n  - 2nd hint: “Try counting up from 4: 4… 5… 6… until you reach 9.”\n  - 3rd hint: “Use your fingers to count from 4 up to 9.”\n  - Beyond that: reveal the correct number with an explanation.\n- Hints are displayed in a dedicated hint area (`#hintArea`) with a lightbulb icon.\n- Optionally highlight the correct `.draggable-number` tile after later hints (e.g., add `hint-highlight` class).\n- Auto-hide hint box after a few seconds and remove highlights.\n\nUI controls\n- Buttons and behaviour:\n  - **Check Answer** (`#checkBtn`): enabled only when a number is placed in drop zone; disabled/reset between questions.\n  - **Next Question** (`#nextBtn`): shown after a correct answer or after max attempts used; advances `currentQuestion` and resets per-question state.\n  - **Try Again** (`#tryAgainBtn`): shown when an answer is wrong but more attempts allowed; resets drop zone and tile states while preserving attempts count.\n  - **Hint** (`#hintBtn`): shows contextual hint, then hides itself until the student tries again.\n  - **Restart** (`#restartBtn`): in completion modal, resets the entire assessment with new randomly generated questions.\n- Ensure button visibility is switched correctly between states (Check vs Try Again vs Next; Hint visible only when relevant).\n\nProgress and completion\n- **Progress bar**:\n  - Uses CSS custom property (e.g., `--progress`) to indicate proportion of questions completed (based on index or answered count).\n  - Progress text shows `currentQuestion/totalQuestions`.\n- **Score display**:\n  - Shows `score/totalQuestions`, updated when questions are answered correctly.\n- **Completion modal**:\n  - Appears when all questions are completed.\n  - Shows a summary message depending on final percentage (e.g., Outstanding / Good / Needs more practice).\n  - Provides a **Try Again** button to restart assessment with a fresh set of questions.\n\nAccessibility & tooltips\n- A small info icon at the top with a custom tooltip on hover (not default browser tooltip) explaining the task.\n- Keyboard navigation:\n  - Draggable numbers are focusable; Enter/Space selects them.\n  - Add screen-reader-friendly labels (aria-labels) on number tiles and key buttons.\n- Use simple, child-friendly language in all feedback and hints.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Solve **addition within 10** by identifying the missing addend in a simple equation.\n  - Use strategies like counting on and using fingers to find the missing number.\n  - Gain confidence through feedback and hints when they make mistakes.\n- The assessment should support both **formative checking** and self-practice.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop / click-to-select for number choices.\n- Immediate feedback (correct/incorrect) with animations.\n- Progressive hint system supporting multiple attempts.\n- Simple progress tracking and final score summary.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Addition Within 10 - Drag and Drop Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Addition Within 10 - Drag and Drop Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\AI Mystery Adventure - Online Safety Quest",
    "title": "AI Mystery Adventure - Online Safety Quest",
    "folder": "AI Mystery Adventure - Online Safety Quest",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/AI Mystery Adventure - Online Safety Quest.html",
    "modifiedTime": "2026-02-19T21:23:10.793579",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/AI Mystery Adventure - Online Safety Quest.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/AI Mystery Adventure - Online Safety Quest_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Algebraic Expansion Whack-a-Mole",
    "title": "Algebraic Expansion Whack-a-Mole",
    "folder": "Algebraic Expansion Whack-a-Mole",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Algebraic Expansion Whack-a-Mole.html",
    "modifiedTime": "2025-12-21T13:27:07.069304",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Algebraic Expansion Whack-a-Mole”** arcade-style game where students practice expanding algebraic expressions by quickly identifying the correct expanded form among multiple moving options.\n\nTARGET AUDIENCE:\n- Upper Secondary / high-ability Lower Secondary Mathematics (algebra, ~14–17 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A **whack-a-mole style grid** (3×3) of “moles”, each showing a candidate **expanded expression**.\n- At the top, display:\n  - The **current expression to expand** (question). Example forms:\n    - Level 1: `a(x + b)`\n    - Level 2: `a(bx + c)`\n    - Level 3: `(ax + b)(cx + d)`\n  - Instructions (e.g., “Find the expanded form and press SPACEBAR when the correct answer appears”).\n- Each mole:\n  - Pops up as “active” for a brief time with a candidate answer string.\n  - Has a visual “face” (e.g., 🐹) and a text region for the algebraic expression.\n- Game stats panel showing:\n  - **Score**.\n  - **Time remaining**.\n  - **Level**.\n  - **Lives**.\n- Control buttons:\n  - **START**: begins the game.\n  - **PAUSE/RESUME**: toggles pause state.\n  - **RESET**: resets entire game to initial state.\n- Game over modal at the end displaying final score, level reached, and a **Play Again** button.\n- A tooltip/info system explaining the game when hovering over UI elements.\n- Self-contained HTML, CSS, and JavaScript (no external game engine).\n- **MOBILE-FRIENDLY**:\n  - Moles are tap‑able on touch devices in addition to keyboard play.\n\nSPECIFIC REQUIREMENTS:\n\nGame state and difficulty\n- State variables:\n  - `score`, `level` (starting at 1), `lives` (e.g., 3), `timeRemaining` (e.g., 60 s).\n  - `isGameActive`, `isPaused`, `currentQuestion`, `correctAnswer`, `activeMoles`.\n  - Timers for overall game time and for mole cycles.\n- Level configuration (at least 3 levels):\n  - Level 1: questionType `simple`, slower mole speed (e.g., 3000 ms), expand `a(x + b)`.\n  - Level 2: questionType `linear`, medium speed (e.g., 2500 ms), expand `a(bx + c)`.\n  - Level 3: questionType `quadratic`, faster speed (e.g., 2000 ms), expand `(ax + b)(cx + d)`.\n- Level progression:\n  - Increase level when score crosses certain thresholds (e.g., score ≥ level × 50), and optionally add bonus time.\n\nQuestion generation\n- For each new question, based on the current level’s `questionType`:\n  - Level 1 (`simple`): randomly generate integers a, b (avoiding 0), then question is `a(x + b)`.\n    - Correct expansion: `ax + ab`, formatted with proper coefficient/ sign rules.\n  - Level 2 (`linear`): randomly generate a, b, c (avoiding 0), question `a(bx + c)`.\n    - Correct expansion: `abx + ac` with similar formatting.\n  - Level 3 (`quadratic`): randomly generate a, b, c, d, question `(ax + b)(cx + d)`.\n    - Correct expansion: `(ac)x² + (ad + bc)x + bd`, rendered using `x²` symbol and correct signs.\n- Formatting helpers:\n  - Omit coefficient 1; write `x` instead of `1x`.\n  - Use `-x` for coefficient −1.\n  - For constant and linear terms, prepend `+` or `−` appropriately.\n\nMole answers\n- For each cycle:\n  - Generate one **correct** expanded expression and multiple **plausible incorrect** expressions.\n  - Fill the 9 mole answer slots with 1 correct and 8 distractors.\n    - Distractors might have sign mistakes, wrong coefficients, or missing terms, but still look algebraic.\n  - Shuffle the assignment of answers to moles.\n- Show a **subset of moles** as active per cycle (e.g., 3–6 moles, increasing with level).\n- Active moles add an `.active` class to animate popping up.\n\nInput & interaction\n- **Keyboard**:\n  - SPACEBAR: checks whether any currently active mole contains the correct answer.\n    - If yes → treat as a correct hit.\n    - If no active mole is correct → treat as a miss (life lost).\n- **Mouse/touch**:\n  - Clicking/tapping an active mole should immediately evaluate that mole’s answer:\n    - If its answer matches `correctAnswer` → correct.\n    - Else → incorrect.\n- Prevent non-game elements from triggering default context menus or selection where needed.\n\nScoring, lives, and timing\n- Correct answer:\n  - Increase score by an amount depending on level (e.g., `10 × level`).\n  - Show positive feedback message (e.g., “Correct! +20”).\n  - Optionally play a small hit animation on the mole.\n  - Generate a new question shortly after.\n- Incorrect answer or missed correct mole:\n  - Decrease lives by 1.\n  - Show negative feedback message (e.g., “Incorrect! −1 Life”).\n  - If lives reach 0 → end the game.\n- Timer:\n  - Count down from initial time (e.g., 60 seconds).\n  - When `timeRemaining <= 0`, end the game (“Time’s up!”).\n- Level up:\n  - When reaching thresholds, increase `level`, speed up mole cycle, and optionally add bonus time.\n  - Display a feedback banner (e.g., “Level 2!”).\n\nFeedback and game over\n- Feedback area shows short-lived messages for correct/incorrect actions.\n- **Game over modal** displays:\n  - Custom end message (e.g., “No lives remaining!” or “Time’s up!”).\n  - Final score.\n  - Level reached.\n  - **Play Again** button that resets score, level, lives, and time to starting values and hides the modal.\n\nTooltips & UX\n- Tooltip system using a common tooltip element that:\n  - Appears on `mouseenter` for elements with `title` attributes (stats, buttons, etc.).\n  - Is positioned near the element and shows the text of the `title`.\n  - Fades out on `mouseleave`.\n\nResponsive behaviour\n- Game container should adapt height in iframes or full-screen.\n- Mole grid and buttons must be **tap friendly** on tablets/phones (large touch targets).\n- When the tab becomes hidden (e.g., user switches tabs), automatically **pause** the game to avoid time running out in the background.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Expand simple algebraic expressions quickly and accurately.\n  - Recognise common patterns in multiplications (distributive and FOIL for binomials).\n  - Spot common errors in expansions (e.g., sign errors, missing terms).\n- The game should build **fluency** and confidence with algebraic expansion under light time pressure.\n\nINTERACTION FEATURES TO INCLUDE:\n- Fast-paced whack-a-mole style gameplay with algebra answers.\n- Multiple input methods (SPACEBAR and clicking/tapping moles).\n- Dynamic difficulty progression across levels.\n- Immediate feedback and a clear end-of-game summary.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Algebraic Expansion Whack-a-Mole.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Algebraic Expansion Whack-a-Mole_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Angkor Civilisation Quest",
    "title": "Angkor Civilisation Quest",
    "folder": "Angkor Civilisation Quest",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Angkor Civilisation Quest.html",
    "modifiedTime": "2025-12-21T13:27:02.333557",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Angkor Civilisation Quest”** narrative exploration where students journey through key aspects of the Angkor (Khmer) civilisation and connect its ancient innovations to modern Singapore and Southeast Asia.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary History / Social Studies (~11–14 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A **story-based quest UI** composed of:\n  - Main **scene area** showing a stylised illustration (SVG background) representing the current location (e.g., temple complex, irrigation system, trade routes, cultural arts).\n  - A **scene title** (e.g., “Welcome to Angkor”, “Temple Complex”, “Irrigation System”).\n  - A **dialogue box** with typewriter-style text narrating what the student sees/learns.\n- A **progress bar** at the top tracking “Quest Progress: X/5”.\n- An **inventory panel** labelled “Discoveries” showing collected icons (e.g., 🏛️, 💧, 🛤️, 🎭) representing key legacies.\n- An **action panel** with navigation buttons:\n  - Explore Temple (🔍 Explore Temple).\n  - Talk to Guide (💬 Talk to Guide).\n  - Examine Artifacts (📜 Examine Artifacts).\n- Contextual **decision buttons** (two choices) that appear for certain scenes to support critical thinking (e.g., how to preserve techniques, what Singapore can learn).\n- A **tooltip** system giving a brief description of the overall quest when hovering over the container and descriptions when hovering over inventory items.\n- Self-contained HTML, CSS, and JavaScript; no external frameworks required.\n- **MOBILE-FRIENDLY**:\n  - Buttons and inventory slots are large enough for touch.\n  - Layout height adapts for iframe vs full-screen and orientation changes.\n\nSPECIFIC REQUIREMENTS:\n\nScenes and narrative\n- Define a set of **scenes** (at least 5) each with:\n  - `id`, `title`, `image` (data URL or asset), `dialogue` text, `actions`, and optionally a `discovery` icon.\n- Example scenes (as used in the existing implementation):\n  1. Welcome to Angkor (intro to quest and mission).\n  2. Temple Complex – focus on architecture/engineering and its influence on modern buildings.\n  3. Irrigation System – hydraulic engineering and barays; links to modern water management (e.g., Singapore).\n  4. Trade Routes – Angkor as trading hub; parallels to modern Singapore’s trade networks.\n  5. Cultural Legacy – arts, dance, architecture; living traditions in Southeast Asia.\n- The **dialogue text** should be chunked, student-friendly, and highlight **continuities** between Angkor and present-day Singapore/SEA.\n- Each scene specifies which actions are available (e.g., `['explore', 'talk', 'examine']`). Buttons not in the list are hidden.\n\nPlayer actions\n- **Explore**:\n  - Moves the student forward through scenes in sequence (0 → 1 → 2 → 3 → 4).\n  - Increases `progress` when moving to a new scene.\n  - When reaching the final scene and exploring again, shows a completion summary.\n- **Talk to Guide**:\n  - For some scenes, opens a **decision** segment where the student chooses one of two options related to preservation, learning, or application of Angkor’s legacies.\n- **Examine Artifacts**:\n  - Shows a random examination result from a small set of educational descriptions linking artifacts/structures to modern practices.\n  - Increases `progress` slightly to reward curiosity.\n- Provide subtle **haptic feedback** when possible (e.g., `navigator.vibrate(50)` on mobile).\n\nDecisions and feedback\n- For certain scenes (e.g., irrigation, engineering, trade), define **decision objects** with:\n  - `sceneId` (which scene triggers this decision).\n  - `question` (prompt text shown implicitly in the dialogue or UI).\n  - Two `choices`, each with:\n    - `text` (student-facing option text).\n    - `result` (feedback text explaining the impact of that choice).\n- When `Talk to Guide` is selected on a scene with a decision:\n  - Hide navigation buttons and show **decision buttons** (two options).\n  - On selecting a choice, show the `result` text in the dialogue box.\n  - Then hide decision buttons, restore navigation buttons, and increment progress (e.g., +0.5).\n\nInventory system\n- Each scene may include a **discovery icon** (e.g., 🏛️, 💧, 🛤️, 🎭).\n- When entering a scene with a discovery the player hasn’t collected yet:\n  - Add the icon to an `inventory` array.\n  - Update the **inventory grid** with up to 8 slots:\n    - Filled slots show icons and `title` attributes explaining their meaning.\n    - Empty slots are greyed or semi-transparent to suggest more to discover.\n- Provide educational descriptions for each discovery in a mapping, such as:\n  - 🏛️ – Temple Architecture – influences modern building design in SEA.\n  - 💧 – Water Management – ancient techniques used in modern water systems.\n  - 🛤️ – Trade Networks – routes still important to global commerce.\n  - 🎭 – Cultural Arts – traditions preserved in contemporary culture.\n- Hovering/tapping an inventory slot shows a **tooltip** with this description near the cursor.\n\nProgress bar & completion\n- Track `progress` as a fractional value (e.g., 0–5) and `maxProgress`.\n- `updateProgress()`:\n  - Sets width of `#progressFill` to `(progress / maxProgress) * 100%`.\n  - Sets `#progressText` to “Quest Progress: X/5” (X = floor of progress).\n- When `progress >= maxProgress`, show a **completion message** in the dialogue box summarizing key takeaways:\n  - Architecture and urban planning.\n  - Water management.\n  - Trade networks.\n  - Cultural arts.\n- Replace action panel with a **Start New Quest** button that calls a `restart()` method.\n\nRestart behaviour\n- `restart()` should:\n  - Reset `currentScene = 0`, `progress = 0`, clear inventory array.\n  - Re-render the starting scene and reset inventory display.\n  - Restore default navigation buttons configuration.\n\nTooltips and layout behaviour\n- Main game container tooltip:\n  - On mouse enter over container, show a tooltip describing the quest.\n  - On leave, hide the tooltip.\n- Inventory/tooltips:\n  - On hover over `.inventory-item` with a title, show a tooltip near the cursor with the description.\n- Orientation change support:\n  - On `orientationchange`, recalc container height (e.g., 90vh for tall screens, 450px for short), to keep everything visible on mobile.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify key features of **Angkor civilisation** (architecture, water, trade, culture).\n  - Explain how Angkor’s innovations influence **modern Singapore and Southeast Asia** (continuity and change).\n  - Appreciate the value of studying ancient civilisations for solving modern problems (e.g., water management).\n- The quest should support **inquiry**, **connection-making**, and **reflection**, not just content recall.\n\nINTERACTION FEATURES TO INCLUDE:\n- Narrative progression through explore/talk/examine actions.\n- Simple choice-based decisions with feedback.\n- Collectible inventory representing conceptual “discoveries”.\n- Visual progress tracking and completion summary.\n- Mobile-friendly layout with touch-capable buttons and responsive height.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Angkor Civilisation Quest.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Angkor Civilisation Quest_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Angkor Quest - Exploring Ancient Civilisation",
    "title": "Angkor Quest - Exploring Ancient Civilisation",
    "folder": "Angkor Quest - Exploring Ancient Civilisation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Angkor Quest - Exploring Ancient Civilisation.html",
    "modifiedTime": "2025-12-21T13:27:06.890304",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Angkor Quest – Exploring Ancient Civilisation”** experience where students explore multiple locations around the Angkor Wat complex, uncover discoveries via hotspots, and reflect on how Angkor’s legacies influence life in modern Southeast Asia (especially Singapore).\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary History / Social Studies (~11–14 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A **scene-based exploration** UI:\n  - Large **scene image** (SVG background) representing the current Angkor site (e.g., Angkor Wat complex, moat, irrigation works, other sites).\n  - **Scene text/description** below the image describing the site and its historical significance.\n  - **Hotspots** overlaid on the scene (e.g., icons 🏛️, 🌊) that students can click/tap to investigate specific features.\n- A **progress bar** at the top tracking overall quest completion (0–100%).\n- A **Discoveries** inventory panel showing collected items/icons representing key ideas or artifacts.\n- A **dialogue/decision area** where narrative text is shown and decision buttons allow students to extend thinking.\n- Navigation controls:\n  - **Back** (← Back) to return to previous site.\n  - **Next Site →** to move forward through different Angkor locations.\n  - **Reset Quest** to start over.\n- Tooltip system:\n  - A top-level tooltip that explains the overall quest.\n  - Tooltip text on hotspots and inventory items.\n- Achievement pop-up when a new discovery is made.\n- Self-contained HTML, CSS, JavaScript; no external framework.\n- **MOBILE-FRIENDLY**:\n  - Click/tap hotspots and buttons easily.\n  - Layout works both in iframe and full-screen.\n\nSPECIFIC REQUIREMENTS:\n\nScenes and hotspots\n- Maintain a list of **scenes**. Each scene includes:\n  - Background SVG/illustration for `#sceneImage`.\n  - A descriptive `sceneText` paragraph with historical context and modern links.\n  - One or more **hotspots** placed using absolute positioning (e.g., `left`, `top` percentages) within `#interactiveElements`.\n  - Each hotspot has:\n    - An icon (e.g., 🏛️ for temple, 🌊 for moat/water system).\n    - A `data-id` (e.g., `temple`, `moat`) used in the script.\n    - A `data-tooltip` string describing what the hotspot represents.\n- Clicking a hotspot:\n  - Shows additional narrative/description in `#dialogueText` or as a pop-up.\n  - Triggers an **achievement notification** and adds a related item to the **Discoveries** inventory if not already collected.\n\nInventory and achievements\n- The **Discoveries** panel (`#inventoryItems`) displays collected items such as:\n  - 🏛️ Temple architecture.\n  - 🌊 Water/irrigation systems.\n  - (and other icons as needed in the implementation).\n- When a new discovery is made:\n  - Show `#achievementNotification` with title “Discovery Made!” and a short explanation of what was discovered and why it matters.\n  - Update the inventory list with a new icon and associated tooltip.\n- Hovering over inventory items shows a tooltip with a brief description (e.g., how temple design influenced modern architecture; how moat/irrigation concepts relate to current water management in Singapore).\n\nDialogue and decision buttons\n- Dialogue box (`#dialogueBox` / `#dialogueText`) shows context for the current scene and guidance like:\n  - “You are exploring Angkor Wat Temple Complex. Click on the glowing areas to discover more about this ancient wonder.”\n- Decision buttons under `#decisionButtons` (e.g., “Learn about Legacy”, “Compare to Today”, “Take Notes”):\n  - When clicked, they update the dialogue with extended explanations:\n    - Highlight the **legacy** of the feature (e.g., sustainable water systems, religious architecture, trade, culture).\n    - Compare ancient practices to **modern Singapore** (e.g., water catchment, urban design, trade networks).\n  - May add to progress/inventory as students make thoughtful choices.\n\nNavigation & progress\n- **Next Site →** (`#nextBtn`):\n  - Advances to the next location (e.g., from Angkor Wat to another related site or viewpoint).\n  - Updates scene image, text, hotspots, and resets active decision buttons/hints as appropriate.\n- **← Back** (`#backBtn`):\n  - Goes to the previous site if available, disabled on the first site.\n- **Reset Quest**:\n  - Resets progress to 0% and returns to the first site.\n  - Clears inventory and hides/clears achievement popups.\n  - Resets dialogue to the introductory narrative.\n- Progress bar:\n  - `#progressFill` width reflects overall quest progress as students visit sites, click hotspots, and make decisions.\n  - `#progressText` shows text like “Quest Progress: 60%”.\n\nTooltip behaviour\n- Global tooltip element (`#tooltip`):\n  - Shows explanatory text taken from:\n    - The main game container’s title (for overall explanation).\n    - Hotspots’ `data-tooltip` attributes.\n  - Positioned near the cursor; hidden when the cursor leaves.\n\nAchievement pop-up\n- `#achievementNotification` appears when a new discovery is made:\n  - Contains title “Discovery Made!” and a dynamic text summarising the discovery.\n  - Fades out after a short time or when the user continues interacting.\n\nRestart behaviour\n- Restarting the quest via **Reset Quest** or at completion:\n  - Resets internal state (current site index, progress, inventory, any decision state).\n  - Re-populates initial hotspots and default text.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify and describe key features of the **Angkor civilisation**, including architecture, water/irrigation systems, and cultural elements.\n  - Recognise and explain **continuities** between ancient Angkor and **modern Singapore/SEA** (e.g., in water management, architecture, trade, culture).\n  - Reflect on why studying ancient civilisations is relevant for understanding current societies.\n- The quest should be exploratory, encourage curiosity, and scaffold historical thinking (connections across time and space).\n\nINTERACTION FEATURES TO INCLUDE:\n- Point-and-click / tap exploration with hotspots.\n- Discovery-based inventory and achievement notifications.\n- Dialogue updates and decision buttons that deepen understanding.\n- Progress tracking and a clear sense of completion.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Angkor Quest - Exploring Ancient Civilisation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Angkor Quest - Exploring Ancient Civilisation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Angle of Elevation and Depression Simulator",
    "title": "Angle of Elevation and Depression Simulator",
    "folder": "Angle of Elevation and Depression Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Angle of Elevation and Depression Simulator.html",
    "modifiedTime": "2025-12-21T13:27:06.401592",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Angle of Elevation and Depression Simulator”** that lets students explore how the angle between an observer and an object changes as the observer moves, for both angles of elevation and angles of depression.\n\nTARGET AUDIENCE:\n- Lower / Upper Secondary Mathematics (trigonometry introduction, ~13–16 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A central **canvas-based diagram** showing:\n  - Ground line.\n  - A chosen object (building / tree / lighthouse) at a fixed horizontal position.\n  - An observer either on the ground or in a helicopter.\n  - A **sight line** from the observer to the top of the object.\n  - A horizontal reference line from the observer.\n  - A highlighted **angle arc** with label θ indicating angle of elevation (ground view) or angle of depression (helicopter view).\n- Control panel on the side with:\n  - Object selection buttons: **Building**, **Tree**, **Lighthouse**.\n  - View mode buttons: **Ground View** (elevation) and **Helicopter View** (depression).\n  - **Observer position** controls: left/right arrow buttons and a range slider.\n  - Reset and Help buttons.\n- A **results panel** showing:\n  - Current angle (numeric, in degrees).\n  - Angle type (Elevation / Depression).\n  - Horizontal distance between observer and object.\n  - Object height.\n- A **help modal** explaining definitions and usage instructions.\n- A feedback overlay that occasionally displays short tips.\n- Self-contained HTML, CSS, JavaScript, using `<canvas>` for drawing.\n- **MOBILE-FRIENDLY**:\n  - Click/tap on the canvas to move the observer horizontally.\n  - Buttons and slider are touch-friendly.\n\nSPECIFIC REQUIREMENTS:\n\nGeometry & physics model\n- Fix the object’s horizontal position (e.g., `objectX`) and let the **observer’s x-position** vary (slider/arrow/canvas click).\n- For ground view (angle of elevation):\n  - Observer is on the ground line (with an eye-level offset above ground).\n  - Object top is at height `H` above ground.\n  - Compute angle θ via `tan(θ) = opposite / adjacent = (H) / |objectX − observerX|`.\n- For helicopter view (angle of depression):\n  - Observer is above ground at a fixed **helicopter height**.\n  - Object appears scaled in height for perspective but logical calculations still respect its defined height.\n  - Angle of depression measured from observer’s horizontal line down to line of sight.\n- Display angle θ in degrees (rounded) in **Angle** overlay and **Current Angle** in results.\n\nCanvas drawing\n- Background:\n  - Sky gradient above the ground line.\n  - Ground rectangle below ground line.\n  - Optional decorative clouds.\n- Objects:\n  - Draw **building**, **tree**, or **lighthouse** with simple shapes and colours.\n  - For helicopter view, render object smaller (scaled down) to show different perspective.\n- Observer:\n  - In ground view: draw a small person at `observerX`, on the ground, with head at eye level.\n  - In helicopter view: draw a small helicopter hovering above the scene.\n- Sight line & angle arc:\n  - Red dashed line from observer to top of object.\n  - Blue horizontal reference line from observer.\n  - Orange arc between horizontal and sight line, with “θ” label near the arc.\n\nControls\n- **Object buttons** (`data-object=\"building|tree|lighthouse\"`):\n  - Selecting a button sets the current object, updates active button styling, and redraws.\n- **View mode buttons** (`data-mode=\"ground|helicopter\"`):\n  - Switching mode updates `viewMode` and re-renders using elevation or depression angle definitions.\n- **Position slider** (`#positionSlider`):\n  - Range (e.g., 50–750 in canvas coordinates) controls `observerX`.\n  - On input change: update observerX and redraw.\n- **Move Left/Right** buttons:\n  - Adjust `observerX` in steps (e.g., ±20), clamped to slider range.\n  - Sync slider value and redraw.\n- **Reset Simulation**:\n  - Reset to defaults: object = building, view = ground, observerX = default value.\n  - Reset active button styling and slider.\n  - Show a brief feedback message (“Simulation reset to initial state”).\n- **Show Help**:\n  - Opens a modal explaining:\n    - Definitions of angle of elevation and depression.\n    - How to move observer & change objects.\n    - How changing position affects the angle.\n\nUser interaction with canvas\n- Clicking on the canvas:\n  - Determine x-coordinate relative to canvas and map to internal coordinate (accounting for canvas scaling).\n  - If x is within allowed range, set `observerX` to that value, update slider, and redraw.\n\nResults & feedback\n- Results panel values:\n  - Current Angle (e.g., `17°`).\n  - Angle Type (Elevation or Depression based on viewMode).\n  - Distance: horizontal distance `|objectX − observerX|` with units (e.g., m).\n  - Object Height: display base height or scaled height for viewMode.\n- Feedback overlay (`#feedbackOverlay`):\n  - Reused as a small message area for:\n    - Object or mode change notifications.\n    - Periodic **educational tips** (e.g., “Move closer to increase angle of elevation”).\n- Periodic tips:\n  - Array of tip strings.\n  - `setInterval` shows a tip every ~10 seconds if help modal is not open.\n\nResponsive behaviour\n- On window resize:\n  - Resize canvas to match parent container.\n  - Recalculate ground line position and re-render environment, object, observer, angle.\n- Keep visual proportions appropriate on different aspect ratios.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Distinguish between **angle of elevation** and **angle of depression**.\n  - Understand the relationship between **horizontal distance** and **angle size** (closer → larger angle).\n  - Connect the visual model to right-angle trigonometry (tan θ = opposite/adjacent).\n- The simulator should encourage exploration: changing objects, moving the observer, and switching viewpoints to observe how angles change.\n\nINTERACTION FEATURES TO INCLUDE:\n- Real-time angle updates when moving the observer.\n- Object switching and view mode toggling with immediate visual changes.\n- Contextual help and periodic tips reinforcing key mathematical ideas.\n- Reset function to go back to a standard starting scenario.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Angle of Elevation and Depression Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Angle of Elevation and Depression Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Animal Classification Assessment",
    "title": "Animal Classification Assessment",
    "folder": "Animal Classification Assessment",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Animal Classification Assessment.html",
    "modifiedTime": "2025-12-21T13:26:57.732269",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Animal Classification Assessment”** where students drag and drop animals into the correct vertebrate/invertebrate groups based on their characteristics.\n\nTARGET AUDIENCE:\n- Primary 4–5 Science (approx. ages 10–11)\n\nINTERACTIVE REQUIREMENTS:\n- Focus on **animal classification** by major groups:\n  - Mammals\n  - Birds\n  - Reptiles\n  - Amphibians\n  - Fish\n  - Insects\n- Learners are given a **set of animal cards** (with emoji + name) and must drag each card into the correct classification box.\n- Support **mouse-based drag-and-drop** (desktop) and **touch drag** (mobile/tablet).\n- Provide **instant formative feedback** when a card is dropped:\n  - Correct placements highlighted positively.\n  - Incorrect placements get hints about the correct group characteristics.\n- Include a **progress bar** showing how many animals have been placed out of the total (0–100% complete).\n- Include assessment controls:\n  - **Submit Answer** button (enabled only when all animals are placed).\n  - **Try Again** button to reset and allow students to reattempt.\n- Include a **Help/Examples** modal explaining each animal group with sample animals.\n- Provide a **results section** showing score (e.g., 10/12 correct) and an encouragement message based on performance.\n- Self-contained front-end (HTML, CSS, JavaScript) with no external frameworks required.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Responsive layout that works well on phones and tablets.\n  - Touch events for dragging animal cards to classification boxes.\n\nSPECIFIC REQUIREMENTS:\n\nAnimal cards\n- Include at least the following animals (exact set can be adapted, but should cover all groups):\n  - **Mammals**: Dog, Cat\n  - **Birds**: Eagle, Penguin\n  - **Reptiles**: Snake, Turtle\n  - **Amphibians**: Frog, Salamander\n  - **Fish**: Fish, Shark\n  - **Insects**: Butterfly, Bee\n- Each animal card should display:\n  - A clear **emoji/icon** representing the animal.\n  - The **animal name** (e.g., “Shark”).\n- Each card should carry internal data attributes or equivalent to encode the **correct group** (e.g., `data-group=\"mammals\"`).\n\nClassification boxes\n- Create six classification boxes, one for each group:\n  - Mammals\n  - Birds\n  - Reptiles\n  - Amphibians\n  - Fish\n  - Insects\n- Each classification box should contain:\n  - A small **icon/emoji** representing the group (e.g., 🐄 for mammals, 🐦 for birds).\n  - A **group label** (e.g., “Mammals”).\n  - An inner **drop zone** where animal cards can be dropped.\n- Each box should have a **tooltip or title** describing group characteristics, for example:\n  - Mammals: warm-blooded, have hair/fur, feed milk to babies.\n  - Birds: feathers, wings, lay eggs.\n  - Reptiles: scales, cold-blooded, lay eggs on land.\n  - Amphibians: live in water and on land, smooth moist skin.\n  - Fish: live in water, gills, scales.\n  - Insects: six legs, three body parts, often wings.\n\nDrag-and-drop / touch interaction\n- Desktop drag-and-drop:\n  - Animal cards are draggable.\n  - Drop zones accept cards.\n  - Visual feedback when a card is dragged over a valid drop zone (e.g., highlight border or background of that box).\n- Touch interaction (mobile/tablet):\n  - Press and drag an animal card with touch.\n  - Card follows the finger.\n  - When released over a drop zone, the card snaps into that zone.\n  - Reset positioning if not dropped over any valid zone.\n- When a card is dropped in a drop zone:\n  - Remove any previous placement for that animal (i.e., moving between boxes is allowed before submission).\n  - Store the mapping from animal to the currently chosen group.\n\nFeedback and hints\n- Immediate feedback after each drop **before submission**:\n  - If the animal is placed in the correct group:\n    - Add a `correct` visual style (e.g., green border / background).\n    - Optionally show a small tooltip like “Correct! Well done!”.\n  - If placed incorrectly:\n    - Add an `incorrect` visual style (e.g., red border).\n    - Show a brief hint that gently guides the student, e.g.:\n      - Mammals: “Think about animals that have fur and feed milk to their babies.”\n      - Birds: “Think about animals that have feathers and wings.”\n      - Reptiles: “Think about animals that have scales and are cold-blooded.”\n      - Amphibians: “Think about animals that can live both in water and on land.”\n      - Fish: “Think about animals that live in water and breathe through gills.”\n      - Insects: “Think about animals that have 6 legs and 3 body parts.”\n- Tooltips should appear near the card and disappear automatically after a short time (e.g., 2 seconds).\n\nProgress tracking\n- Maintain a data structure (`placedAnimals` or similar) mapping animal name → chosen group.\n- **Progress bar** at the top:\n  - Shows the percentage of animals that have been placed in any group (not necessarily correct).\n  - Label such as “0% Complete”, “50% Complete”, etc.\n- Update the progress bar **whenever** an animal is placed or moved.\n\nSubmit and scoring\n- **Submit Answer** button:\n  - Disabled until all animals have been placed in some box.\n  - On click:\n    - Lock the assessment (prevent further dragging).\n    - Calculate number correct (matching chosen group to the encoded correct group).\n    - Compute score and percentage (e.g., 10/12 → 83%).\n- **Results section** (initially hidden):\n  - Show score summary like: `You got X out of Y correct! (Z%)`.\n  - Show **encouragement message** varying with performance:\n    - ≥ 90%: “Excellent work! You really understand animal classification!”\n    - ≥ 70%: “Great effort! You have a good understanding of animal groups!”\n    - ≥ 50%: “Good try! Keep learning about animal characteristics!”\n    - < 50%: “Keep practicing! Every scientist learns through trying!”\n  - Optionally add a simple celebration animation (e.g., subtle scaling, background highlight) on the results panel.\n\nRetry / reset\n- **Try Again** button:\n  - Hidden until after submission.\n  - On click:\n    - Reset internal state (isSubmitted, placedAnimals, correct count).\n    - Move all animals back to the original animal cards area.\n    - Clear all `correct`/`incorrect` styles.\n    - Clear or hide the results section.\n    - Reset progress bar to 0%.\n    - Optionally shuffle the order of animal cards for variety.\n\nHelp / instructional support\n- **Help button** always visible (e.g., “Need Help?”):\n  - Opens a **Help modal** with concise explanations and example animals for each group.\n  - Use clear, student-friendly language.\n  - Include at least one example per group (some may overlap with actual assessment animals).\n- Modal behavior:\n  - Visible as an overlay centered on the screen.\n  - Close icon (×) in top-right.\n  - Clicking outside the modal content (on the overlay background) closes the modal.\n\nVisual design and responsiveness\n- Clean, student-friendly UI with:\n  - A main container.\n  - A row/column for the animal cards.\n  - A grid layout for the classification boxes.\n- Use simple color coding and iconography consistent across the UI.\n- Make sure text is readable on both desktop and mobile.\n- Hide or reposition tooltips when window is resized to avoid misplacement.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify key characteristics of major animal groups (mammals, birds, reptiles, amphibians, fish, insects).\n  - Correctly classify common animals into these groups.\n  - Use hints and examples to refine their understanding when they make mistakes.\n- The activity should serve as a **self-marking assessment**, giving instant feedback and a final score, while remaining encouraging and low-stakes.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop (mouse) and touch-drag (mobile) for animal cards.\n- Real-time progress bar and status text.\n- Tooltips/hints for incorrect attempts and confirmations for correct attempts.\n- Help modal with examples and group characteristics.\n- Submit/score screen with encouragement messages.\n- Try-again/reset flow resetting the whole assessment.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Animal Classification Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Animal Classification Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Animal Classification Mystery",
    "title": "Animal Classification Mystery",
    "folder": "Animal Classification Mystery",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Animal Classification Mystery.html",
    "modifiedTime": "2025-12-21T13:27:00.864086",
    "topic": null,
    "gradeLevel": "Primary 3",
    "subject": null,
    "hasPrompt": true,
    "promptText": "By Li Zhen\nP3 Classification of animals\nLearning Objectives: Recognise some broad groups of living things based on similarities and differences.\n-Plants (flowering, non-flowering)\n-Animals (amphibians, birds, fish, insects, mammals, reptiles)\n-Fungi (mould, mushroom, yeast)\n-Bacteria\n \nInteractive Prompt: \n \nI want to design a game-based learning interactive for my students.\n\nGrade level: Primary 3\n\nStudent readiness level: Mixed Abilities\n\n \n\nThe game is based on: solving science mysteries where the animals are let loose and students have to sort it according to the various animal groups like: 'mammals', 'fish', 'insects', 'birds', 'reptiles', 'amphibians'.\n\n \n\nThe objective of the game is to: be able to classify the animals based on similarities and differences of common observable characteristics.\n\n \n\nWhile playing the game, students should experience: quick-fire questions with immediate feedback and increasing difficulty.\n\n \n\nThe interface should include: score counter, timer, level progress display, celebration messages.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Animal Classification Mystery.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Animal Classification Mystery_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Animal Classification Mystery 2",
    "title": "Animal Classification Mystery 2",
    "folder": "Animal Classification Mystery 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Animal Classification Mystery 2.html",
    "modifiedTime": "2025-12-21T13:27:02.983371",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Animal Classification Mystery”** game where students classify animals into the correct vertebrate/invertebrate groups (mammals, birds, fish, reptiles, amphibians, insects, or “does not belong”) under time pressure, with score, levels, and auditory support.\n\nTARGET AUDIENCE:\n- Primary Science / Lower Secondary Biology (~9–13 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A **game-container** with:\n  - Header showing **Score**, **Time**, **Level**, **Progress**, and a **speaker button**.\n  - Main area displaying:\n    - A large **animal emoji/icon**.\n    - The **animal’s name**.\n  - Classification section with buttons for:\n    - Mammals, Birds, Fish, Reptiles, Amphibians, Insects, and\n    - “Does not belong to any of the groups listed”.\n  - Feedback section showing correctness messages.\n  - Game-over screen summarising final score, level, and accuracy, with a Play Again button.\n- Self-contained HTML, CSS, JavaScript (no external frameworks).\n- **MOBILE-FRIENDLY & ACCESSIBLE**:\n  - Buttons large enough for touch.\n  - Optional speaker button to read out animal name (or simulate TTS event hook).\n\nSPECIFIC REQUIREMENTS:\n\nGame state & data\n- Maintain state variables for:\n  - `score`, `level`, `timeRemaining`, `questionsAnswered`, `totalQuestions` (e.g., 5 per level or round).\n  - `currentAnimal`, `currentGroup`, `correctGroup`, `accuracy`.\n- Define a list/array of **animals**, each with:\n  - `name` (e.g., \"Crocodile\").\n  - `emoji` (e.g., 🐊).\n  - `group` (e.g., `reptiles`, `mammals`, etc., or `other`).\n- Ensure coverage across all classification buttons.\n\nGameplay flow\n- On game start (page load or Play Again):\n  - Initialise state (score=0, level=1, time=50s, progress=0/5, accuracy=0%).\n  - Start a countdown timer.\n  - Present the first random animal.\n- For each question:\n  - Show animal emoji and name.\n  - Student clicks a classification button.\n  - Check answer:\n    - If correct: increase score and correct count, update progress.\n    - If incorrect: optionally deduct points or show only feedback.\n  - Show immediate feedback in the feedback section.\n  - Move to next animal until **totalQuestions** reached or time runs out.\n- Level progression (if implemented):\n  - Increase level when student completes a round with sufficient accuracy or after a fixed number of animals.\n  - Optionally increase difficulty (less obvious animals, more \"other\" cases, shorter time).\n\nClassification options\n- Buttons and groups:\n  - Mammals (warm-blooded, hair/fur, feed young with milk).\n  - Birds (feathers, wings, lay eggs).\n  - Fish (live in water, gills, fins).\n  - Reptiles (scales, cold-blooded, lay eggs on land).\n  - Amphibians (live on land and water).\n  - Insects (6 legs, 3 body segments).\n  - “Does not belong to any of the groups listed” for outliers.\n- Each button displays an icon and a group name, plus a tooltip summarising group characteristics.\n\nFeedback & scoring\n- Feedback section (`#feedbackMessage`):\n  - Show messages like “Correct! Crocodile is a reptile.” or “Try again! Crocodile is a reptile, not a fish.”\n- Score updates:\n  - Award points for correct responses (optionally more for first try).\n  - Track total questions answered and correct answers to compute accuracy.\n- Game header updates:\n  - Score: `#score`.\n  - Timer: `#timer` countdown.\n  - Level: `#level`.\n  - Progress: e.g., `#progress` showing `questionsAnswered/totalQuestions`.\n\nTimer and game over\n- Timer counts down each second from starting value (e.g., 50 seconds).\n- When timer hits zero or all questions are answered:\n  - Show **game-over screen** (`#gameOverScreen`).\n  - Display:\n    - Final score (`#finalScore`).\n    - Level reached (`#finalLevel`).\n    - Accuracy percentage (`#accuracy`).\n  - Provide a **Play Again** button to restart the game.\n\nSpeaker / auditory support\n- `#speakerBtn`:\n  - When pressed, reads out the animal name for auditory learners (via Web Speech API or placeholder function).\n  - Provide visual feedback (e.g., pulsing icon) while speaking.\n\nTooltips\n- Tooltip element (`#tooltip`) used to:\n  - Show group descriptions when hovering over classification buttons.\n  - Optionally show hints about animals or controls.\n\nPlay Again behaviour\n- `Play Again` button:\n  - Hides the game-over screen.\n  - Resets all state variables to starting values.\n  - Restart timer and present a new random animal.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Classify a range of animals into correct vertebrate/invertebrate groups.\n  - Use clues from physical traits, habitats, and behaviours to justify classification.\n  - Recognise that some animals do not fit simple groupings (“other” category).\n- The game should build **automaticity** and confidence in classification while remaining fun and time-bound.\n\nINTERACTION FEATURES TO INCLUDE:\n- Time-limited classification rounds with score and progress feedback.\n- Immediate corrective feedback and summary statistics.\n- Simple, visual interface with emojis and concise text.\n- Optional audio support for animal names.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Animal Classification Mystery 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Animal Classification Mystery 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Apple Catch Addition Game",
    "title": "Apple Catch Addition Game",
    "folder": "Apple Catch Addition Game",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Apple Catch Addition Game.html",
    "modifiedTime": "2025-12-21T13:26:58.182125",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Apple Catch Addition Game”** where students practice addition facts (sums up to 10) by catching falling apples with the correct answer in a moving basket.\n\nTARGET AUDIENCE:\n- Primary 2 Mathematics (approx. ages 7–8)\n\nINTERACTIVE REQUIREMENTS:\n- A game-like environment focused on **single-digit addition** with sums ≤ 10.\n- Central **game area** showing:\n  - A falling stream of apples, each labelled with a number.\n  - A **movable basket** at the bottom that the player controls.\n- A **question panel** that shows the current addition question (e.g., `6 + 1 = ?`).\n- The learner’s goal: **move the basket to catch apples whose number equals the correct answer** to the question.\n- UI elements:\n  - **Score** display that increases for correct catches.\n  - **Lives** display using hearts (❤️) that decreases when:\n    - A wrong apple is caught, or\n    - A correct apple falls off the screen.\n  - **Feedback messages** for correct/incorrect actions.\n  - A **Game Over** panel showing final score and encouragement.\n- Game controls:\n  - **Start Game** button.\n  - **Pause / Resume** button.\n  - **Reset** button.\n  - **Play Again** button on the Game Over screen.\n- Include a brief **“How to Play”** instructions tooltip within the game.\n- Implement **smooth animations** (falling apples, feedback effects) using CSS/JS.\n- Self-contained front-end (HTML + CSS + vanilla JavaScript only).\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Layout works on phones and tablets.\n  - Basket can be moved with touch as well as mouse & keyboard.\n\nSPECIFIC REQUIREMENTS:\n\nGame content and difficulty\n- Focus on **addition within 10** (e.g., 1+2, 4+3, 6+1, etc.).\n- Question generator:\n  - Randomly pick two addends where the **sum ≤ 10**.\n  - Display question as text (e.g., `3 + 5 = ?`).\n- For each question:\n  - Define a unique **correct answer**.\n  - Spawn at least one **correct apple** with that number.\n  - Spawn **1–2 incorrect apples** with other numbers (1–10) that are **not equal** to the correct answer.\n\nVisual layout\n- Top **game header**:\n  - Score area: label + numeric score.\n  - Question display area.\n  - Lives display showing hearts (e.g., `❤️❤️❤️`).\n- **Game area**:\n  - Background area where apples fall from the top to the bottom.\n  - Container for dynamically created apple elements.\n  - Basket graphic at bottom center that can move horizontally.\n  - Overlay elements for feedback text and a happy-face emoji animation.\n- **Controls row** below the game area with Start, Pause, and Reset buttons.\n- **Game Over screen** overlaying the game area when lives reach zero:\n  - Shows “Game Over!” text.\n  - Displays final score.\n  - Shows a performance-based encouragement message.\n  - Includes a “Play Again” button.\n\nApple behaviour\n- Each apple:\n  - Rendered as a circular/rounded element with number text.\n  - Has data attributes for its value and whether it’s correct.\n  - Spawns at a random horizontal position (e.g., between 10% and 90% of game width).\n  - Starts above the visible area and **falls down** at a fixed speed (e.g., pixels/frame).\n- Apples are continuously updated in a game loop using `requestAnimationFrame`:\n  - The y-position increases by a fixed `appleSpeed` each frame.\n  - When apples leave the bottom of the game area, they are removed.\n- When a **correct apple** falls off screen:\n  - Player **loses 1 life**.\n  - Display feedback like “Missed the correct answer!”.\n  - Optionally play a soft error sound.\n  - Generate a new question after a short delay.\n\nBasket control and collision\n- Basket movement options:\n  - **Mouse** / **touch**: moving/clicking/touch-dragging within the game area moves the basket horizontally.\n  - **Keyboard**: left/right arrow keys move the basket in steps (e.g., ±5%), with boundaries at edges.\n  - Basket position stored as a percentage from the left; constrained within [10%, 90%].\n- Basket visual position updated via inline style (e.g., `left: 50%`).\n- Collision detection:\n  - Apples are considered “caught” when their horizontal position overlaps the basket’s region and their vertical position reaches the basket height.\n  - Optional: allow **tap-to-catch** by clicking/tapping on apples that are near the basket.\n\nScoring and lives\n- Initial state:\n  - Score = 0.\n  - Lives = 3 (shown as three hearts).\n- On catching an apple near the basket:\n  - If apple is correct:\n    - Increase score by a fixed amount (e.g., +10 points).\n    - Show positive feedback text (e.g., “Correct! +10 points”).\n    - Trigger a **happy face** animation.\n    - Play a gentle **success chime** (Web Audio API or simple audio).\n    - Generate a new question shortly after.\n  - If apple is incorrect:\n    - Decrease lives by 1.\n    - Show feedback like “Try again!”.\n    - Play a soft error tone.\n    - If lives reach 0, trigger Game Over.\n- Lives display:\n  - Use coloured hearts for remaining lives and hollow/white hearts for lost lives (e.g., `❤️❤️🤍`).\n\nGame states and loop\n- Key states:\n  - `gameRunning` (whether main loop is active).\n  - `gamePaused` (paused but not reset).\n- Buttons behaviour:\n  - **Start Game**:\n    - Enables audio context (resume if suspended).\n    - Sets `gameRunning = true` and `gamePaused = false`.\n    - Disables the Start button while game is running.\n    - Starts the animation/game loop.\n  - **Pause**:\n    - Toggles between Paused and Resume states.\n    - When paused, stop updating apples (but don’t clear them).\n  - **Reset**:\n    - Stops the game loop (`gameRunning = false`).\n    - Resets score, lives, basket position, apples array.\n    - Clears all apples from the screen.\n    - Hides the Game Over screen.\n    - Generates a **new question**.\n    - Re-enables the Start button and resets Pause button text.\n  - **Play Again** (on Game Over):\n    - Calls the same logic as Reset, then waits for Start.\n- Game loop (called with `requestAnimationFrame`):\n  - If game is running and not paused:\n    - With probability based on `appleSpawnRate` and limited by `maxApples`, spawn a new set of apples:\n      - Always at least one correct apple.\n      - 1–2 incorrect apples if room allows.\n    - Move all apples down.\n    - Check apples that have fallen off the screen (remove and penalise if correct).\n    - Check for basket collisions with apples and handle catches.\n    - Continue the loop via `requestAnimationFrame`.\n\nFeedback and encouragement\n- **Feedback display** in the game area that shows transient messages:\n  - “Correct! +10 points” when correct.\n  - “Try again!” or “Missed the correct answer!” when incorrect/missed.\n  - Messages should fade away after ~1–1.5 seconds.\n- **Happy face** emoji pops up briefly on correct catches.\n- **Game Over screen**:\n  - Final score.\n  - Encouragement message based on score, for example:\n    - Score ≥ 100: “Excellent work! You’re a math star! ⭐”\n    - Score ≥ 50: “Great job! Keep practicing! 👍”\n    - Otherwise: “Good effort! Try again to improve! 💪”\n\nInstructions and accessibility\n- Provide a **“How to Play”** tooltip or box in/near the game area explaining:\n  - Move your basket left and right.\n  - Catch apples with the correct answer.\n  - Avoid wrong apples or you lose a life.\n  - Score points for each correct catch.\n- Tooltip should appear when the game area is focused/hovered or when the game starts, and fade out automatically after a few seconds.\n- Ensure colour contrast is adequate and text is legible.\n- Keyboard support for learners who can’t easily use mouse/touch.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Practise and strengthen fluency with addition facts up to 10.\n  - Link symbolic addition (e.g., `4 + 3`) with numerical answers.\n  - Receive immediate feedback and adjust their strategy (focus on correct sums).\n- The game should emphasise a **positive learning experience** with encouraging feedback rather than punishment.\n\nINTERACTION FEATURES TO INCLUDE:\n- Real-time apple animations and basket movement.\n- Responsive input via mouse, touch, and keyboard.\n- Immediate feedback for each catch/miss.\n- Visible score and lives that update dynamically.\n- Start/Pause/Reset/Play Again controls.\n- Game Over screen with summary and encouragement.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Apple Catch Addition Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Apple Catch Addition Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Basketball_Basics_-_Interactive_Learning_20260225",
    "title": "Basketball Basics - Interactive Learning 20260225",
    "folder": "Basketball_Basics_-_Interactive_Learning_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Basketball_Basics_-_Interactive_Learning_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Basketball_Basics_-_Interactive_Learning_20260225/index.html",
    "modifiedTime": "2026-02-25T13:36:30",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about teach the game of baskeyball.\nTARGET AUDIENCE: Primary 3-4 - Physical Education\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nLEARNING OUTCOMES:\n- Students should be able to explore and understand teach the game of baskeyball\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR QUIZ/GAME INTERACTIVES:\n- Implement a real-time analytics panel showing:\n  * Question number and text\n  * Correct answer\n  * Student's selected answer\n  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)\n  * Sequential log of all attempts to reveal misconception patterns\n- Display analytics in a clear, scrollable panel\n- Use Unicode symbols and color coding for visual clarity\n- Purpose: Allow teachers to identify student misconceptions and thinking patterns\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Basketball_Basics_-_Interactive_Learning_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Basketball_Basics_-_Interactive_Learning_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Bee_Sting_Adventure_20260219",
    "title": "Bee Sting Adventure 20260219",
    "folder": "Bee_Sting_Adventure_20260219",
    "folderPath": "SDCDworkshop2026/Bee_Sting_Adventure_20260219",
    "indexPath": "SDCDworkshop2026/Bee_Sting_Adventure_20260219/index.html",
    "modifiedTime": "2026-02-19T12:56:34",
    "topic": null,
    "gradeLevel": null,
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "Kah Weng\nI am designing a learning interactive experience where I want my students to learn about the steps to take to treat a bee sting. My students are 13 years old with an interest in Japanese anime and a language proficiency of basic at a Secondary school level. The aesthetic design should be modern but cute and include features in the following: for the interactivity, I want to utilize mix and match mechanics, supported by Immediate Feedback and an exploration style focused on Role-playing. To drive engagement, please include Time Pressure within an Adventure storyline with choices narrative. Within each question, I would like for a literal display of what the action choices are. They would have 3 lives and if all 3 lives are gone, they will have to start over again, showing them starting all over again. Finally, the experience should include a musical score that resembles a jungle and sound effects for correct choices and wrong choices. If they manage to complete all the task with 3 lives remaining, they will get an outdoor champion. With 2 lives left, they will get an outdoor survivor badge, with 1 live left, they will get Outdoor amateur.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Bee_Sting_Adventure_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Bee_Sting_Adventure_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Blood Circulation Animation",
    "title": "Blood Circulation Animation",
    "folder": "Blood Circulation Animation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Blood Circulation Animation.html",
    "modifiedTime": "2025-12-21T13:27:08.892534",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Blood Circulation Animation”** that visually demonstrates the flow of oxygenated and deoxygenated blood between the heart, lungs, and body, using an animated diagram and step-by-step explanation.\n\nTARGET AUDIENCE:\n- Upper Secondary Biology / Science (e.g., Sec 3–4)\n\nINTERACTIVE REQUIREMENTS:\n- A central **SVG diagram** showing:\n  - **Lungs** at the top, labelled, with simple alveoli icons.\n  - **Heart** in the middle, stylised with chambers and dividing line.\n  - **Body tissues** at the bottom, labelled BODY with cell icons.\n  - Four main **vessel paths**:\n    - Heart → Lungs (pulmonary artery, deoxygenated, blue).\n    - Lungs → Heart (pulmonary vein, oxygenated, red).\n    - Heart → Body (aorta/systemic arteries, oxygenated, red).\n    - Body → Heart (vena cava/systemic veins, deoxygenated, blue).\n- **Animated blood cells** moving along the vessels using SVG `<animateMotion>`:\n  - Red cells travelling along oxygenated paths.\n  - Blue cells travelling along deoxygenated paths.\n- A **legend panel** identifying colours:\n  - Oxygenated Blood.\n  - Deoxygenated Blood.\n- A **control panel** with buttons:\n  - **Start Animation**.\n  - **Pause**.\n  - **Reset**.\n- An **information panel** listing labelled steps (1–5) describing the circulation sequence.\n- A minimal **tooltip** system that shows short explanations when hovering over key diagram parts (heart, lungs, body, each vessel path).\n- Self-contained HTML, CSS, JavaScript; no external libraries.\n- **Responsive**: adapts layout for iframe / full-screen, includes special handling for reduced-motion preference.\n\nSPECIFIC REQUIREMENTS:\n\nCirculation model\n- Represent the **double circulation** concept:\n  1. Deoxygenated blood from body → heart.\n  2. Heart → lungs (deoxygenated).\n  3. Lungs oxygenate blood.\n  4. Lungs → heart (oxygenated).\n  5. Heart → body (oxygenated).\n- Use distinct colours:\n  - Deoxygenated: blue (#4a90e2).\n  - Oxygenated: red (#e74c3c).\n- Show animated blood cells (small circles) continuously travelling along the SVG paths to suggest ongoing flow.\n\nControls & animation state\n- Manage animation with a class, e.g., `BloodCirculationAnimation`, holding:\n  - `isPlaying`, `isPaused`, `currentStep`, `stepTimer`.\n  - References to buttons, tooltip, container, and info panel.\n- **Start Animation**:\n  - If animation has not started, set `isPlaying = true`, `isPaused = false`, `currentStep = 0`.\n  - Disable Start, enable Pause and Reset.\n  - Remove any `.stopped` class from container.\n  - Begin a **step-by-step** highlighting routine guiding students through steps 1–5.\n- **Pause**:\n  - If currently playing, set `isPaused = true`, add `.paused` class.\n  - Enable Start (“Resume”), disable Pause.\n  - Clear step timer; animation of SVG blood cells continues visually, but step highlighting is paused.\n- **Reset**:\n  - Stop and clear timers, set `isPlaying = false`, `isPaused = false`, `currentStep = 0`.\n  - Re-enable Start, disable Pause and Reset.\n  - Add `.stopped` class and remove `.paused`.\n  - Remove `.active` from any highlighted steps.\n\nStep-by-step info panel\n- Info panel lists conceptual steps:\n  - Step 1: Deoxygenated blood returns to heart from body tissues.\n  - Step 2: Heart pumps deoxygenated blood to lungs.\n  - Step 3: Blood picks up oxygen in lungs.\n  - Step 4: Oxygenated blood returns to heart.\n  - Step 5: Heart pumps oxygenated blood to body tissues.\n- When running:\n  - A timed loop (`playNextStep`) cycles through `steps` array.\n  - For each step, apply `.active` class to the corresponding `.step` div.\n  - Smooth scroll the active step into view if necessary.\n  - After step 5, optionally loop back to step 1.\n\nTooltip behaviour\n- Attach tooltip text to key diagram groups/paths:\n  - Heart group, lungs group, body group.\n  - Each major vessel path (`#to-lungs`, `#from-lungs`, `#to-body`, `#from-body`).\n- On hover (`mouseenter`):\n  - Show tooltip element near cursor with explanatory text.\n- On `mousemove`:\n  - Update tooltip position relative to container, keeping it inside the visible area.\n- On `mouseleave`:\n  - Hide tooltip.\n\nKeyboard & accessibility\n- Keyboard shortcuts:\n  - Space / Enter: toggle start/pause/resume.\n  - Escape: reset.\n- Buttons:\n  - All have ARIA labels (start/pause/reset animation).\n- Add a small on-screen hint (e.g., bottom-right): “Use Space/Enter to start/pause, Escape to reset”.\n- Add a live region (off-screen) to announce important state changes if desired (e.g., “Animation started”, “Animation paused”).\n- Respect `prefers-reduced-motion` media query:\n  - If true, add a `reduced-motion` CSS class to tone down or skip continuous animations where appropriate.\n\nAudio feedback (optional)\n- Use Web Audio API to play brief tones for key actions:\n  - Start: mid-pitch tone.\n  - Pause: slightly higher tone.\n  - Reset: lower tone.\n- Use simple envelope (attack/decay) and keep sounds under ~0.3 s.\n\nResponsive behaviour\n- Detect if running in an iframe; if so, adjust layout classes (e.g., narrower padding).\n- On window resize:\n  - Optionally reflow container (e.g., temporarily switch display to none and back to trigger layout).\n- Ensure SVG diagram scales within its container.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Describe the **pathway of blood** through the heart, lungs, and body.\n  - Distinguish between **pulmonary** and **systemic** circulation.\n  - Interpret colour coding (oxygenated vs deoxygenated) and relate it to gas exchange.\n  - Sequence the major steps of the circulatory process using the info panel.\n- The animation should reduce cognitive load by chunking the process into clear, labelled stages.\n\nINTERACTION FEATURES TO INCLUDE:\n- Start/Pause/Reset control over the conceptual walkthrough of blood circulation.\n- Visually distinct continuous flow of red and blue blood cells.\n- Tooltips that appear only when needed, providing concise explanations.\n- Keyboard shortcuts and subtle audio/visual feedback.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Blood Circulation Animation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Blood Circulation Animation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Blood Circulation Interactive",
    "title": "Blood Circulation Interactive",
    "folder": "Blood Circulation Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Blood Circulation Interactive.html",
    "modifiedTime": "2025-12-21T13:27:04.487186",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Blood Circulation Interactive”** that animates blood flow through the circulatory system and guides students with simple captions and highlights, focusing on the path of oxygenated and deoxygenated blood.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary Science (introductory circulatory system)\n\nINTERACTIVE REQUIREMENTS:\n- A **central SVG diagram** representing:\n  - **Lungs** at the top (oval with “LUNGS” label and small alveoli dots).\n  - **Heart** in the centre, with left (oxygenated) and right (deoxygenated) sides drawn separately.\n  - **Body organs** at the bottom (oval labelled “BODY ORGANS” with tissue dots).\n  - Four main **vessel paths**:\n    - Right heart → lungs (pulmonary artery, deoxygenated, blue).\n    - Lungs → left heart (pulmonary vein, oxygenated, red).\n    - Left heart → body (aorta, oxygenated, red).\n    - Body → right heart (vena cava, deoxygenated, blue).\n- Animated **blood cells** (small circles) moving along the hidden path definitions to visually show the continuous circulation loop.\n- A **legend** showing colour coding:\n  - Oxygenated Blood (red).\n  - Deoxygenated Blood (blue).\n- A top **control panel** with:\n  - **Start Animation / Pause / Resume** (single toggle button).\n  - **Reset** button.\n- A **caption area** below the diagram that displays step-by-step text explaining what is happening.\n- Tooltip behaviour for key parts (using hover) explaining what each part does.\n- Self-contained HTML, CSS, JavaScript, no external libraries.\n\nSPECIFIC REQUIREMENTS:\n\nCirculation diagram\n- Layout the circulatory system in a simplified double-circulation diagram:\n  - Lungs at top, heart centre, body at bottom.\n  - Right heart shown in blue (deoxygenated) and left heart in red (oxygenated).\n- Draw vessels as thick strokes with appropriate colour and class names, e.g.:\n  - `.pulmonary-artery`, `.pulmonary-vein`, `.aorta`, `.vena-cava`.\n- Define hidden `<path>` elements (`#path-right-to-lungs`, `#path-lungs-to-left`, `#path-left-to-body`, `#path-body-to-right`) for `<animateMotion>`.\n- Group “LUNGS”, “HEART”, “BODY ORGANS” text labels and tissue dots inside respective `<g>` elements.\n\nAnimated blood cells\n- Create four `<circle>` elements with class `blood-cell` and different fill colours:\n  - Deoxygenated cells (blue) moving along right-heart→lungs and body→right-heart paths.\n  - Oxygenated cells (red) moving along lungs→left-heart and left-heart→body paths.\n- Use `<animateMotion>` for each cell with a `dur` (e.g., 4s), `repeatCount=\"indefinite\"`, and staggered `begin` times (0s, 1s, 2s, 3s) to avoid overlap.\n\nControl logic\n- Implement a `BloodCirculationAnimation` class managing:\n  - `isPlaying`, `currentStep`, `animationInterval`.\n  - References to `playBtn`, `resetBtn`, `caption`, `tooltip`, `bloodCells`, and `.heart`.\n- **Start Animation**:\n  - When clicked from idle state, set `isPlaying = true`, `currentStep = 0`.\n  - Change button text to “Pause” and add a `.playing` class for styling.\n  - Add `.beating` class to `.heart` to show pulsing heart animation.\n  - Add `.active` class to `.blood-cell` elements so CSS animations become visible.\n  - Start a caption/step sequence (see below).\n- **Pause**:\n  - Clicking play button while `isPlaying = true` pauses the step sequence:\n    - Set `isPlaying = false`, update button to “Resume”, remove `.playing` and `.beating`.\n    - Clear any step interval/timeouts.\n    - Update caption (e.g., “Animation paused – click Resume to continue”).\n- **Resume**:\n  - Clicking play button when paused resumes the step sequence from the current step:\n    - Set `isPlaying = true`, `playBtn.textContent = 'Pause'`, re-add `.playing` and `.beating`.\n    - Restart the caption/step sequence with `startStepSequence()`.\n- **Reset**:\n  - Stop any current animation, clear intervals, set `isPlaying = false`, `currentStep = 0`.\n  - Set button text back to “Start Animation”, remove `.playing` and `.beating`.\n  - Remove `.active` classes from blood cells if used for visibility.\n  - Clear highlight styling from diagram parts.\n  - Reset caption to the initial instruction.\n\nCaption & steps\n- Define an array of **circulation steps** with:\n  - `caption` text describing the stage.\n  - `duration` for how long each caption should show (e.g., 4000 ms).\n  - `highlight` class name for the SVG element to emphasise.\n- Example steps:\n  1. \"Deoxygenated blood from the body enters the right side of the heart\" → highlight `.right-heart`.\n  2. \"Right heart pumps deoxygenated blood to the lungs through pulmonary arteries\" → highlight `.pulmonary-artery`.\n  3. \"In the lungs, blood picks up oxygen and releases carbon dioxide\" → highlight `.lungs`.\n  4. \"Oxygenated blood returns to the left side of the heart via pulmonary veins\" → highlight `.pulmonary-vein`.\n  5. \"Left heart pumps oxygenated blood to the body through the aorta\" → highlight `.aorta`.\n  6. \"Body organs use oxygen and nutrients, blood becomes deoxygenated\" → highlight `.body-organs`.\n  7. \"Deoxygenated blood returns to the heart through veins, completing the cycle\" → highlight `.vena-cava`.\n- `startStepSequence()`:\n  - If `isPlaying` is false, do nothing.\n  - Show the current step’s caption using a fade transition on the caption element.\n  - Apply highlight style (e.g., drop-shadow + slight scale) to the target element; remove from others.\n  - Use `setTimeout` with `step.duration` to advance `currentStep`, looping back to 0 at the end.\n\nTooltips & touch support\n- Hover tooltips:\n  - For `.lungs`, `.heart`, `.body-organs`, and each `.vessel` group, show a tooltip with a short explanation.\n  - Position tooltip near cursor; hide it on `mouseleave`.\n- Touch behaviour (mobile):\n  - On touchstart on these regions, trigger a caption update describing that part and optionally vibrate (if supported) for feedback.\n  - After a short delay (e.g., 3s), restore the previous caption if animation is not running.\n\nKeyboard & accessibility\n- Keyboard controls:\n  - Enter/Space on focussed `.control-btn` triggers click (handled globally in keydown listener).\n- Buttons are large and labelled clearly.\n- Caption text is simple and concise for learners.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Describe the **direction of blood flow** through heart, lungs, and body in order.\n  - Distinguish between oxygenated and deoxygenated blood using colour and context.\n  - Explain the roles of key vessels (pulmonary artery/vein, aorta, vena cava).\n- The interactive should support conceptual understanding through repeated cycles, simple captions, and highlights instead of dense text.\n\nINTERACTION FEATURES TO INCLUDE:\n- Start/Pause/Resume/Reset controls governing a stepwise explanatory loop.\n- Dynamic caption that updates in sync with highlighted diagram parts.\n- Continuous visual motion of blood cells to maintain the sense of flow.\n- Tooltips and touch-friendly hints to explore components on demand.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Blood Circulation Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Blood Circulation Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\BMI Interactive Assessment",
    "title": "BMI Interactive Assessment",
    "folder": "BMI Interactive Assessment",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/BMI Interactive Assessment.html",
    "modifiedTime": "2025-12-21T13:27:05.347380",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Dominic\nDesign Brief: BMI Interactive Assessment for Lower Progress Secondary 3 Students\n\nTarget Audience: Secondary 3 students who need additional scaffolding and support (Lower Progress learners)\n\nLearning Focus:\n\nCalculate Body Mass Index using the formula: BMI = mass (kg) / [height (m) × height (m)]\nInterpret BMI results to determine if values fall within healthy ranges\nUnderstand the relationship between mass, height, and BMI\nObserve how changes in mass and height affect BMI calculations\nAssessment Type: Interactive variable manipulation - students adjust mass and height using sliders and observe real-time BMI calculations and visual feedback\n\nCore Interface Elements:\n\n1. Input Controls:\n\nMass Slider: Range 30-120 kg, increments of 1 kg\nLarge, easy-to-manipulate slider with clear labels\nCurrent value displayed prominently next to slider\nVisual markings at regular intervals (every 10 kg)\nHeight Slider: Range 1.3-2.0 m, increments of 0.01 m\nLarge, easy-to-manipulate slider with clear labels\nCurrent value displayed prominently next to slider\nOptional: Also show height in cm for easier understanding (e.g., \"1.65 m (165 cm)\")\n2. Output Display:\n\nBMI Value Text Box:\nLarge, clearly visible output showing calculated BMI\nRounded to 1 decimal place (e.g., \"BMI: 22.3\")\nAuto-updates immediately when sliders are adjusted\nColor-coded background based on BMI category (see below)\nBMI Category Indicator:\nClear text label showing interpretation:\nUnderweight (BMI < 18.5) - Blue\nHealthy weight (BMI 18.5-24.9) - Green\nOverweight (BMI 25-29.9) - Orange\nObese (BMI ≥ 30) - Red\nSimple, supportive language appropriate for students\n3. Visual Human Body Representation:\n\nAnatomically Accurate Human Figure:\nDisplays a human boy character that updates in real-time\nCRITICAL REQUIREMENT: Body must change proportionally and anatomically correctly\nBody Scaling Requirements:\n\nHeight changes: Entire body scales vertically proportionally\nAll body segments maintain correct ratios (head:torso:legs approximately 1:3:4)\nJoints (neck, shoulders, elbows, hips, knees, ankles) remain properly aligned\nLimbs lengthen/shorten smoothly without distortion\nHead size adjusts subtly with height (not just stretched)\nMass changes: Body width and composition change realistically\nBody mass distributed naturally (torso, limbs, face all adjust together)\nNo \"balloon effect\" - body thickens proportionally, not uniformly\nLimbs become thicker/thinner in proportion to torso\nFace reflects body composition changes (fuller/leaner appropriately)\nNatural body contours maintained (shoulders, waist, hips move together)\nCombined height + mass changes:\nBody maintains anatomical integrity at all combinations\nTall + light = lean, elongated but proportional figure\nShort + heavy = stockier, fuller but proportional figure\nAll intermediate combinations appear natural and realistic\nNo disjointed appearance, stretched limbs, or disconnected body parts\nSmooth, gradual transitions when sliders are adjusted\nTechnical Implementation for Body Accuracy:\n\nUse proportional scaling algorithms, not simple image stretching\nMultiple body segments that scale independently but harmoniously\nBlend between pre-designed body types rather than distorting single image\nEnsure all body parts connected properly at joints regardless of settings\nTest extreme values (very tall/light, very short/heavy) for realism\n4. Scaffolding Features for Lower Progress Learners:\n\nReference Guide Panel:\nBMI categories chart always visible\nSimple explanation: \"BMI helps us understand if our body weight is healthy for our height\"\nVisual color-coding matching the output display\nGuided Questions/Prompts:\n\"What happens to BMI when you increase mass but keep height the same?\"\n\"How does height affect BMI?\"\n\"Try to find a combination that gives a healthy BMI\"\nFormula Display:\nBMI formula shown with current values substituted\nExample: \"BMI = 60 ÷ (1.65 × 1.65) = 22.0\"\nHelps students connect the calculation to the result\nHints/Tips Button:\nProvides guidance like \"Try increasing height and see what happens\"\nExplains: \"Taller people can have higher mass and still be healthy\"\nReset Button:\nReturns to default values (mass: 60 kg, height: 1.65 m)\nAllows students to start fresh without confusion\n5. Assessment Integration:\n\nExploration Phase:\nStudents freely adjust sliders to explore relationships\nNo pressure or scoring during exploration\nEncourages discovery learning\nChallenge Tasks: (Optional, can be toggled by teacher)\n\"Find 3 different combinations that result in healthy BMI\"\n\"What mass gives BMI = 25 at height 1.70 m?\"\n\"Person A is 1.5 m tall with BMI 20. What is their mass?\"\nReflection Prompts:\n\"What did you notice about BMI when height increases?\"\n\"Why might two people with the same BMI look different?\"\nVisual Design:\n\nClean, uncluttered interface\nLarge, readable fonts (minimum 16pt)\nHigh contrast for visibility\nSliders positioned logically (left side or top)\nHuman figure centered and prominent (main focus)\nBMI output clearly visible (top right or bottom center)\nColor-coding consistent throughout\nAccessibility Features:\n\nKeyboard navigation support for sliders\nClear labels on all interactive elements\nText-to-speech compatible\nWorks on tablets and computers\nNo time pressure\nTechnical Specifications:\n\nReal-time calculation and update (no \"calculate\" button needed)\nSmooth animations for body changes (not jarring jumps)\nResponsive design that works on different screen sizes\nBrowser-based, no installation required\nLearning Objectives Assessment: Students successfully demonstrate understanding by:\n\nCorrectly identifying when BMI values are in healthy/unhealthy ranges\nExplaining that increasing mass raises BMI (when height constant)\nExplaining that increasing height lowers BMI (when mass constant)\nFinding multiple mass/height combinations that achieve healthy BMI\nUnderstanding that BMI is a ratio, not just about weight alone\nSuccess Criteria for Visual Body Representation: ✓ Body appears as a cohesive, realistic human figure at all slider settings ✓ No stretched, compressed, or distorted body parts ✓ All joints properly aligned and connected ✓ Proportional changes that reflect real human body variation ✓ Smooth transitions without jarring jumps or disconnected segments ✓ Body reflects both taller/shorter AND heavier/lighter variations accurately",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/BMI Interactive Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/BMI Interactive Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Bone & Joint Condition Identifier",
    "title": "Bone & Joint Condition Identifier",
    "folder": "Bone & Joint Condition Identifier",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Bone & Joint Condition Identifier.html",
    "modifiedTime": "2025-12-21T13:27:04.324084",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Bone & Joint Condition Identifier\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Bone & Joint Condition Identifier\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Bone & Joint Condition Identifier\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Bone & Joint Condition Identifier.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Bone & Joint Condition Identifier_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Budget Blueprint SG",
    "title": "Budget Blueprint SG",
    "folder": "Budget Blueprint SG",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Budget Blueprint SG.html",
    "modifiedTime": "2025-12-21T13:27:06.264760",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "By Tai Xiang\nLearning Objectives: \n \nIn this lesson, students will gain an awareness of the global realities that Singapore faces, and examine their thoughts and feelings towards the issues.\nStudents will gain an understanding of the various budget measures and consider how some of these measures are meaningful and/or important to the people in Singapore.\nStudents will gain an appreciation of the government's role in building our shared future and, as such, reflect on their role in making Singapore a better place, now and in the future. \nInteractive Prompt: \n \nRole: Act as an expert game developer. Your task is to re-create a 15-minute, single-player, educational interactive game called \"Budget Blueprint SG.\" The game is a simplified \"worker placement\" simulation designed to teach students about the Singapore National Budget.\n\nCore Objective: The player, acting as the Singapore Cabinet, must make strategic decisions over 4 rounds (\"Fiscal Years\") to maximize the \"National Well-being Point\" (NWP) score.\n\n \n1. Core Game Loop & Mechanics\n\nThe game proceeds in 4 distinct rounds. Each round consists of three phases:\n\nGlobal Event Phase: A random \"Global Reality\" event is revealed, which applies a modifier (positive or negative) for the entire round.\nAction Phase: The player \"places\" their 3 \"Ministry Teams\" (workers) onto 3 different \"National Sectors\" (locations) to gain resources (\"Funds\" and \"Manpower\"). This phase continues until all 3 workers are placed.\nFunding Phase: The player can, at any time, spend their gathered resources to complete \"National Priorities\" (quests) to earn NWPs.\nEnd Phase: The player clicks \"End Fiscal Year\" to end the round. All workers return, and a new round begins.\n \n2. Core Game State Variables\n\nYou must track the following variables in a central game state:\n\nround: (Number) Current round, from 1 to 4.\nfunds: (Number) Main currency. Starts at 10.\nmanpower: (Number) Secondary resource. Starts at 0.\nnwp: (Number) The player's score. Starts at 0.\nworkersAvailable: (Number) How many workers the player has left to place this round. Starts at 3 each round.\nsectorsFilled: (Array of Strings) A list of sectorIds that have been used this round (e.g., ['moh', 'mti']).\nactivePriorities: (Array of Objects) The 3 currently available \"quest\" cards.\nglobalEvent: (Object) The active event card for the current round.\n \n\n3. Data Structures (Game Database)\n\nThese must be implemented exactly as specified:\n\nA. National Sectors (Worker Locations)\n\n'moh': { name: 'Ministry of Health (MOH)', reward: { funds: 3 } }\n'mindef': { name: 'Ministry of Defence (MINDEF)', reward: { manpower: 1 } }\n'mti': { name: 'Ministry of Trade & Industry (MTI)', reward: { funds: 5 } }\n'msf': { name: 'Ministry of Social & Family Dev (MSF)', reward: { funds: 2 } }\n'mse': { name: 'Ministry of Sustainability (MSE)', reward: { funds: 2 } }\n'moe': { name: 'Ministry of Education (MOE)', reward: { manpower: 1 } }\nB. Global Reality Cards (Event Deck)\n\n(Must be shuffled and drawn 1 per round)\n\ng1: { title: 'Global Pandemic!', text: 'Healthcare policies cost 2 extra Funds this year.', effect: { type: 'costIncrease', category: 'Health', amount: 2 } }\ng2: { title: 'Regional Tensions!', text: 'Defence priorities are critical. Funding Defence gains +3 NWP.', effect: { type: 'bonusNWP', category: 'Defence', amount: 3 } }\ng3: { title: 'Tech Breakthrough!', text: 'Bonus revenue! Gain 4 extra Funds immediately.', effect: { type: 'bonusResource', resource: 'funds', amount: 4 } }\ng4: { title: 'Supply Chain Disruption', text: 'All priorities cost 1 extra Fund this year.', effect: { type: 'costIncrease', category: 'All', amount: 1 } }\ng5: { title: 'Economic Slowdown', text: 'MTI (Trade & Industry) only generates 3 Funds instead of 5 this year.', effect: { type: 'nerfSector', sectorId: 'mti', newReward: { funds: 3 } } }\ng6: { title: 'Aging Population', text: 'Social priorities are in high demand. Funding Social gains +3 NWP.', effect: { type: 'bonusNWP', category: 'Social', amount: 3 } }\n \n\nC. National Priority Cards (Quest Deck)\n\n(Must be shuffled. 3 are active at all times. Draw a new one when one is completed)\n\np1: { title: 'Build New Polyclinic', cost: { funds: 6 }, reward: { nwp: 10 }, category: 'Health', helps: 'Seniors, Families' }\np2: { title: 'Digital Skills Package', cost: { funds: 4, manpower: 1 }, reward: { nwp: 8 }, category: 'Economy', helps: 'Workers, Students' }\np3: { title: 'Support for Low-Income', cost: { funds: 5 }, reward: { nwp: 7 }, category: 'Social', helps: 'Vulnerable groups' }\np4: { title: 'Bolster Cyber Defence', cost: { funds: 4, manpower: 1 }, reward: { nwp: 8 }, category: 'Defence', helps: 'National Security' }\np5: { title: 'Invest in Green Energy', cost: { funds: 7 }, reward: { nwp: 9 }, category: 'Sustainability', helps: 'Future Generations' }\np6: { title: 'Upgrade School Facilities', cost: { funds: 3, manpower: 1 }, reward: { nwp: 6 }, category: 'Education', helps: 'Students' }\np7: { title: 'Enhance Elder-care Services', cost: { funds: 4 }, reward: { nwp: 6 }, category: 'Health', helps: 'Seniors' }\np8: { title: 'Boost Local Startups', cost: { funds: 6, manpower: 1 }, reward: { nwp: 10 }, category: 'Economy', helps: 'Entrepreneurs' }\np9: { title: 'New Public Housing', cost: { funds: 8 }, reward: { nwp: 11 }, category: 'Social', helps: 'Young Families' }\np10: { title: 'Acquire New Naval Vessels', cost: { funds: 7, manpower: 2 }, reward: { nwp: 15 }, category: 'Defence', helps: 'National Security' }\np11: { title: 'Develop Food Resilience Tech', cost: { funds: 5 }, reward: { nwp: 7 }, category: 'Sustainability', helps: 'Food Security' }\np12: { title: 'Expand University Grants', cost: { funds: 4 }, reward: { nwp: 5 }, category: 'Education', helps: 'Students' }\n \n4. UI & Interaction Requirements\n\nCreate a clean, modern UI with the following components:\n\nResource Dashboard (Always Visible):\nDisplay for Fiscal Year (e.g., \"1 / 4\").\nDisplay for Funds (e.g., \"$10M\").\nDisplay for Manpower (e.g., \"0\").\nDisplay for National Well-being (e.g., \"0\").\n \n\nNational Sectors (6 Clickable Areas):\nMust be 6 distinct, clickable UI elements (e.g., cards or buttons).\nEach must display its name and reward.\nStateful: Must clearly show a \"Used\" or \"Filled\" state when clicked, making it non-interactive for the rest of the round.\n \n\nWorker Pool (Always Visible):\nVisually represent the 3 \"Ministry Teams\" (e.g., as 3 icons).\nAs workers are placed, these icons should visually change to an \"Used\" state.\n \n\nPriority Deck (3 Visible \"Cards\"):\nDisplay the 3 activePriorities as cards.\nEach card must show: title, category, helps, cost (Funds/Manpower), and reward (NWP).\nEach card must have a \"Fund\" button.\nStateful: The \"Fund\" button must be disabled if the player does not have enough funds or manpower (after accounting for event modifiers) and enabled when they do.\n \n\nEnd Turn Button:\nA button labeled \"End Fiscal Year.\"\nStateful: This button must be disabled while workersAvailable > 0 and enabled only when workersAvailable === 0.\n \n\nModal Popups:\nGlobal Event Modal: Must appear at the start of every round, display the title and text of the drawn event card, and have a close button.\nGame Over Modal: Must appear at the end of Round 4, display the final nwp score, and a \"Restart\" or \"Review\" button.\n \n\n5. Core Game Logic (Function Definitions)\n\nImplement the following logic:\n\ninitGame():\nReset gameState to starting values.\nCreate shuffled copies of the globalRealityDeck and priorityDeck.\nDraw 3 priorities into gameState.activePriorities.\nCall startRound().\nstartRound():\nCheck if gameState.round > 4. If so, call endGame().\nReset gameState.workersAvailable = 3 and gameState.sectorsFilled = [].\nDraw one globalEvent card.\nHandle immediate event effects (e.g., bonusResource).\nDisplay the \"Global Event Modal.\"\nCall updateUI() to refresh the screen.\nonSectorClick(sectorId):\nCheck: if (gameState.workersAvailable > 0 && !gameState.sectorsFilled.includes(sectorId)).\nIf valid:\ngameState.workersAvailable--.\ngameState.sectorsFilled.push(sectorId).\nCalculate the reward. Check if the globalEvent has a nerfSector effect for this sectorId. Otherwise, use the default allSectors[sectorId].reward.\nAdd the calculated funds or manpower to the gameState.\nCall updateUI().\nonFundPriorityClick(priorityId):\nFind the priority object from gameState.activePriorities.\nCalculate its final cost, accounting for globalEvent effects (e.g., costIncrease).\nCheck if gameState.funds and gameState.manpower are >= the final cost.\nIf affordable:\nDeduct resources from gameState.\nCalculate its final reward, accounting for globalEvent effects (e.g., bonusNWP).\nAdd the final reward to gameState.nwp.\nRemove this priority from gameState.activePriorities.\nDraw a new card from the shuffled priority deck and add it to gameState.activePriorities.\nCall updateUI().\nonEndTurnClick():\nCheck: if (gameState.workersAvailable === 0).\nIf valid:\ngameState.round++.\nCall startRound().\nendGame():\nDisplay the \"Game Over Modal\" with the final gameState.nwp score and a context-aware message (e.g., \"An excellent result!\").\nupdateUI() (Master Function):\nThis function must be called after any change to the gameState.\nIt must refresh all visual components: resource displays, worker icons, sector \"filled\" states, priority card \"Fund\" button disabled states, and the \"End Turn\" button disabled state.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Budget Blueprint SG.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Budget Blueprint SG_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Bystander Hero Adventure",
    "title": "Bystander Hero Adventure",
    "folder": "Bystander Hero Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Bystander Hero Adventure.html",
    "modifiedTime": "2026-02-19T21:23:54.932453",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Bystander Hero Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Bystander Hero Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Carnival Probability Simulator",
    "title": "Carnival Probability Simulator",
    "folder": "Carnival Probability Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Carnival Probability Simulator.html",
    "modifiedTime": "2025-12-21T13:27:08.593668",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Carnival Probability Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Carnival Probability Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Carnival Probability Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Carnival Probability Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Carnival Probability Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Chinese Coffee Culture Matching Game",
    "title": "Chinese Coffee Culture Matching Game",
    "folder": "Chinese Coffee Culture Matching Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Chinese Coffee Culture Matching Game.html",
    "modifiedTime": "2025-12-21T13:27:02.294541",
    "topic": null,
    "gradeLevel": null,
    "subject": "English Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Chinese Coffee Culture Matching Game”** where students learn Chinese coffee-culture collocations by catching falling words (saucers) and matching them to the correct base words (coffee cups).\n\nTARGET AUDIENCE:\n- Junior College / Upper Secondary Chinese Language (vocabulary & collocations)\n\nINTERACTIVE REQUIREMENTS:\n- A game layout themed around **coffee cups and saucers**:\n  - Bottom row: 5 labelled **coffee cups**, each showing the **first word** of a collocation (e.g., 浓郁, 传统, 文化, 社交, 多元) with English glosses (Rich, Tradition, Culture, Social, Diverse).\n  - Top area: **falling saucers** that carry the **second word** of each collocation (e.g., 香味, 工艺, 传承, 场所, 融合).\n- Students interact by:\n  1. Tapping/clicking a falling saucer to “catch” it.\n  2. Then tapping/clicking a coffee cup; if the collocation pair is correct, it counts as a match.\n- A simple **score** display (e.g., `Score: X/5`).\n- A **Restart** button to reset the game.\n- A **completion modal** showing final score and a “Play again” button.\n- An **instructions tooltip** explaining game rules (tap saucers → match to cups → learn collocations).\n- Self-contained HTML, CSS, JavaScript; no external frameworks.\n\nSPECIFIC REQUIREMENTS:\n\nVocabulary & collocations\n- Use 5 Chinese collocation pairs relevant to coffee culture:\n  - 浓郁 + 香味 (rich aroma).\n  - 传统 + 工艺 (traditional craftsmanship).\n  - 文化 + 传承 (cultural heritage).\n  - 社交 + 场所 (social venue).\n  - 多元 + 融合 (multicultural integration).\n- Each pair has:\n  - `first`: first word (cup label).\n  - `second`: second word (saucer label).\n  - `translation`: short English gloss.\n- Cups display the **first word** plus an English hint in the title attribute.\n- Saucers display the **second word** and show the full pair + translation in their `title`.\n\nGame mechanics\n- **Game state**:\n  - `score` (0–5).\n  - `totalPairs` = 5.\n  - `completedPairs`: indices of pairs already correctly matched.\n  - `usedWords`: list of `second` words already spawned to ensure each appears only once.\n  - `activeSaucers`: array of saucers currently falling.\n  - `gameActive` flag to stop loop once complete.\n  - `caughtSaucer`: the currently selected saucer awaiting cup match.\n- **Falling saucers**:\n  - Use `fallSpeed` (e.g., 1 px/frame) and `spawnRate` (e.g., 0.01 per frame) and `maxSaucers` to control difficulty.\n  - In each animation frame:\n    - Possibly spawn a new saucer if fewer than `maxSaucers` active and random < `spawnRate`.\n    - Update each saucer’s `y` position by `fallSpeed`.\n    - Remove saucers that fall off the bottom and **release** their word back into `usedWords` so it can be respawned.\n- **Spawning logic**:\n  - Only spawn saucers for pairs where:\n    - The pair index is not in `completedPairs`.\n    - `second` is not in `usedWords`.\n  - Choose one available pair at random.\n  - Create a `.saucer` element with `data-pair-index` and `data-word` set to the `second` word.\n  - Position the saucer at the top, with a random `left` within the game area.\n\nInteraction\n- **Catching a saucer**:\n  - When a saucer is clicked/touched:\n    - Prevent default and stop propagation.\n    - Mark it as caught (e.g., add `caught` CSS class for animation).\n    - Store its data in `caughtSaucer` (pairIndex + word).\n    - Remove it from `activeSaucers` and stop it falling.\n    - Show an info feedback message (Chinese) such as “已接住！点击匹配的咖啡杯” (“Caught! Click the matching coffee cup”).\n    - Highlight the matching cup (via `.highlight` class) to support learners.\n- **Clicking a cup**:\n  - Only if `caughtSaucer` exists and `gameActive` is true.\n  - If cup’s `data-pair-index` equals `caughtSaucer.pairIndex`, treat as **correct match**:\n    - Increment `score`.\n    - Add pair index to `completedPairs`.\n    - Update score display.\n    - Add `.correct` styling to the cup briefly and show ✓ feedback overlay.\n    - Check if all 5 pairs are completed; if so, end game.\n  - If wrong cup:\n    - Treat as **incorrect match**:\n      - Add `.incorrect` styling briefly and show ✗ feedback overlay.\n      - Return the `caughtSaucer.word` to `usedWords` so it can respawn later.\n- After each cup click, remove the caught saucer element and clear `caughtSaucer`. Always clear `.highlight` from cups.\n\nFeedback & completion\n- **Score display**:\n  - Show `score` (0–5). Optionally show as `score/totalPairs`.\n- **Feedback overlay**:\n  - A small overlay `#feedbackOverlay` shows short feedback messages or symbols (✓ / ✗) for ~1 second.\n- **Game complete modal**:\n  - When `score >= totalPairs`:\n    - Set `gameActive = false`.\n    - Show a centered modal with:\n      - “恭喜完成！” / “Congratulations on completing this!”\n      - Final score (e.g., `5/5`).\n      - A **Play again** button that calls `resetGame()`.\n\nReset & replay\n- `resetGame()`:\n  - Reset `score`, `completedPairs`, `usedWords`, `caughtSaucer`, `gameActive`.\n  - Remove all active saucer elements and clear `activeSaucers`.\n  - Reset cup classes (remove `correct`, `incorrect`, `highlight`).\n  - Hide completion modal.\n  - Restart the game loop.\n\nInstructions & tooltips\n- A persistent **instructions tooltip** (e.g., bottom or corner) explaining in Chinese + simple English:\n  - “1. Tap falling saucers to catch them.”\n  - “2. Match saucer with correct coffee cup.”\n  - “3. Learn Chinese vocabulary collocations!”\n- Tooltip is shown on game start for a short duration, and when hovering the container.\n\nPerformance considerations\n- A simple performance monitor may adjust `fallSpeed`/`spawnRate` downward if FPS drops below a threshold, to keep the game playable.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Recognise and recall Chinese collocations related to **coffee culture** (e.g., 浓郁香味, 传统工艺, 文化传承, 社交场所, 多元融合).\n  - Link Chinese collocations to English glosses and coffee-culture concepts.\n  - Practise vocabulary in a light, game-based context that encourages repeated exposure.\n- The game should emphasise **meaningful collocational pairs** rather than isolated words.\n\nINTERACTION FEATURES TO INCLUDE:\n- Continuous falling-word mechanic with controlled difficulty.\n- Catch-then-match interaction pattern reinforcing pairings.\n- Immediate visual feedback for correct/incorrect matches.\n- Clear final summary and option to replay.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Chinese Coffee Culture Matching Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Chinese Coffee Culture Matching Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Chinese Fruit Matching Game",
    "title": "Chinese Fruit Matching Game",
    "folder": "Chinese Fruit Matching Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Chinese Fruit Matching Game.html",
    "modifiedTime": "2025-12-21T13:27:00.943087",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Chinese Fruit Matching Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Chinese Fruit Matching Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Chinese Fruit Matching Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Chinese Fruit Matching Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Chinese Fruit Matching Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Chinese Fruit Matching Game Wing Yi",
    "title": "Chinese Fruit Matching Game Wing Yi",
    "folder": "Chinese Fruit Matching Game Wing Yi",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Chinese Fruit Matching Game Wing Yi.html",
    "modifiedTime": "2025-12-21T13:27:08.690454",
    "topic": null,
    "gradeLevel": "Primary 3",
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "Wing Yi\nLearning Objectives: 词语配对\n\nI want to design an assessment interactive for my students.\n\nGrade level: Primary 3\n\nStudent readiness level: middle ability students\n\nThe assessment focuses on: Sorting fruits (西瓜、香蕉、草莓、木瓜、苹果、葡萄) based on their characteristics\n\nAssessment type needed: Drag and Drop sorting/matching\n\nThe objective of the assessment is to: Check students' understanding of fruit classification and their ability to identify key characteristics that distinguish different fruits\n\nWhile completing the assessment, students should experience: Dragging colorful animal cards into labeled category boxes, hearing encouraging sounds when correct, receiving gentle hints like \"Think about where this animal lives and how it breathes\" when incorrect, celebration animations when completing each category, and the option to review their choices before final submission\n\nThe interface should include: Six labeled boxes for animal groups with characteristic icons, animal cards with clear pictures and names in large text, drag-and-drop functionality with snap-to-grid alignment, green checkmarks for correct placements, gentle red highlights (not harsh) for incorrect attempts, progress bar showing completion percentage, \"Need Help?\" button with example classifications, submit button, try again option, and final score display with encouraging messages like \"Great effort! You got 8 out of 10 correct!\"\n \n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/4c3a4790-ad76-4fa7-b649-e2736cf6ca6d/section/33536/activity/33538?pageNo=1",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Chinese Fruit Matching Game Wing Yi.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Chinese Fruit Matching Game Wing Yi_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031",
    "title": "Chinese Text to Speech with Hanyu Pinyin 20251031",
    "folder": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031",
    "folderPath": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031",
    "indexPath": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031/index.html",
    "modifiedTime": "2025-12-21T13:26:55.186266",
    "topic": "Chinese Text to Speech with Hanyu Pinyin",
    "gradeLevel": "Primary 3-4",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "═══════════════════════════════════════════════════════════\n📚 SLS INTERACTIVE PROMPT - FULL DETAILS\n═══════════════════════════════════════════════════════════\n\n📋 PROMPT DETAILS:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📚 Topic: Chinese Text to Speech with Hanyu Pinyin\n🎯 Grade Level: Primary 3-4\n📖 Subject Area: Not specified\n🎮 Interaction Type: Auto-detect\n🔧 Specific Requirements: None specified\n📅 Generated: 31/10/2025, 4:18:58 pm\n\n═══════════════════════════════════════════════════════════\n🤖 FULL PROMPT FOR CLAUDE:\n═══════════════════════════════════════════════════════════\n\nSYSTEM CONTEXT - SLS Interactive Development Master Prompt:\nYou are a web developer specialized in HTML5 educational content creation. Follow these critical requirements:\n\nTECHNICAL REQUIREMENTS:\n- Create a completely self-contained HTML file (no external libraries or dependencies)\n- All code must run entirely offline with HTML, CSS, and JavaScript embedded in a single file\n- Optimize for iframe environment: 100% width, 450px height in iframe, 90vh when opened in new tab\n- Support both touch and mouse interactions with appropriate target sizes\n\nDESIGN PRINCIPLES:\n- Align to Singapore curriculum standards and mathematical notations\n- Apply cognitive load theory and Mayer's 12 principles of multimedia learning\n- Use information visualization best practices\n- Maintain clean, intuitive layout with visual cues (shadows, highlights) for interaction states\n- Use center tooltips for displaying extensive text information in iframe mode\n- Optimize button sizing: height fits text, width accommodates text without wrapping\n- No header text at top to save vertical space; use tooltips on hover for titles\n\nPEDAGOGICAL REQUIREMENTS:\n- Ground design in instructional and cognitive psychology\n- Minimize extraneous cognitive load\n- Provide immediate feedback for interactions\n- Include clear labels, legends, and brief explanations\n- Enable active learning through meaningful interactions\n\nCODE QUALITY:\n- Include comprehensive comments explaining what code does and how it works\n- Use proper formatting and structure\n- Generate complete, functional JavaScript for all interactive elements\n- Ensure all simulations/games/visualizations work correctly\n\n═══════════════════════════════════════════════════════════\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 simulation about Chinese Text to Speech with Hanyu Pinyin.\n\nTARGET AUDIENCE: Primary 3-4\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Chinese Text to Speech with Hanyu Pinyin\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.\n\n═══════════════════════════════════════════════════════════\n💡 USAGE INSTRUCTIONS:\n═══════════════════════════════════════════════════════════\n1. Copy this entire text\n2. Open Claude (claude.ai)\n3. Paste the prompt section into Claude\n4. Claude will generate your interactive HTML file\n5. Save the HTML file to your SLS or website\n6. Share this full details document with colleagues for reference\n\nGenerated by: SLS Prompt Generator for Educational Interactive Creation\n═══════════════════════════════════════════════════════════",
    "hasZip": true,
    "zipPath": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031.zip",
    "hasPromptImage": true,
    "promptImagePath": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225",
    "title": "Chinese Text to Speech with Hanyu Pinyin 20260225",
    "folder": "Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225/index.html",
    "modifiedTime": "2026-02-25T13:32:18",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about Chinese Text to Speech with Hanyu Pinyin.\nTARGET AUDIENCE: Primary 3-4 - Chinese Language\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\n- Language-appropriate TTS with adjustable rate/pitch\n- Word-level highlighting; tap-to-speak for words/phrases\n- Romanization support (e.g., Pinyin/Rumi/Transliteration) toggle\n- Tone/intonation helper (tone colors for Chinese; stress markers for Malay/Tamil)\n- Mini listening discrimination quizzes (minimal pairs) with instant feedback\n- Word-by-word highlighting synchronized with audio; adjustable WPM and pitch\n- Pronunciation practice: record and compare waveform/envelope to model\n- Pinyin/romanization tone-mark toggle with tone-color mapping; show syllable boundaries\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Chinese Text to Speech with Hanyu Pinyin\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Chinese_Text_to_Speech_with_Hanyu_Pinyin_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Circuit Resistance Simulator",
    "title": "Circuit Resistance Simulator",
    "folder": "Circuit Resistance Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Circuit Resistance Simulator.html",
    "modifiedTime": "2025-12-21T13:27:06.070460",
    "topic": null,
    "gradeLevel": "Secondary 2",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Jun Li\nI want to design a simulation interactive for my students.\n\n \n\n \n\nGrade level: Secondary 2\n\n \n\nStudent readiness level: Higher Progress (ready for challenges)\n\n \n\nThe simulation is based on: how series or parallel arrangement of fixed resistors affects the current as an output of an electrical system\n\n \n\nThe objective of the simulation is to: understand how the arrangement of resistors (and hence the total resistance) in the circuit affects the current flowing in the circuit. The current can will be shown by brightness of a bulb, loudness of a bell, ammeter or some electrical components which students can choose from\n\n \n\nWhile using the simulation, students should experience: making choices on the types of arrangements of resistors (series or parallel), have the choice to also change the value of the resistors. They can also choose the type of electrical components that will show the difference in the current value, e.g. bulb (with varying brightness), ammeter, bell (with varying loudness), etc\n\n \n\n \n\nThe interface should include: the ability for students to the type of circuit (series of parallel), show the circuit being set up with the connection of the wires to the components and power source.\n\n \n\n \n\nRefinement 1:\n\nThere is overlap of some of the text. Can we refine it?\n\n \n\n \n\nRefinement 2:\n\nWhen a new electrical component (a) is chosen, a text describing the component (a) is shown. When a new component (b) is chosen, the original text describing component (a) should now disappear, replaced by a text describing component (b) \n\n \n\n \n\nRefinement 3:\n\nthe text (bulb) did not disappear when ammeter or bell was chosen",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Circuit Resistance Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Circuit Resistance Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Class Perk Scratch Card",
    "title": "Class Perk Scratch Card",
    "folder": "Class Perk Scratch Card",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Class Perk Scratch Card.html",
    "modifiedTime": "2025-12-21T13:27:06.784305",
    "topic": null,
    "gradeLevel": null,
    "subject": "Art",
    "hasPrompt": true,
    "promptText": "By Mohamad Azhar\nLearning Objectives: Break time\nInteractive Prompt: \nCreate an HTML5 interactive called “Class Perk Scratch Card” for secondary students. The experience shows a single large, cartoony scratch card that hides a perk result. When the student drags the cursor or finger, a realistic scratch animation reveals the layer below.\n\nRequirements:\n\nVisuals: bright, playful, cartoon look. Rounded card, glossy coating effect, sparkles. Big “Scratch me!” headline. A mischievous mascot in the corner.\n\n\nScratch interaction: works with mouse and touch. Use canvas with a foreground coating and an eraser brush that follows the pointer. Brush size 30 to 40 px. Smooth strokes, no lag. Add a light scratch sound on drag and a subtle particle fleck trail.\n\n\nReveal logic: the result is chosen only on first drag start. Weighted randomness: 10 percent Chocolate Bar, 30 percent Sweet, 60 percent Lose. Ensure correct probabilities across many plays.\n\n\nWin feedback: if Chocolate or Sweet, show a burst confetti animation, a short success sound, and a large card flip that reveals the prize art and text. If Lose, show a comic “Better luck next time” with a tiny sad trombone sound and a gentle shake.\n\n\nUI: Start button to show a fresh coated card. Reset button that fully re-covers the card and clears state. A timer displays how long the student spent scratching. A results panel logs the last 5 outcomes with time stamps. Sound toggle.\n\n\nFair play: prevent peeking by blocking right-click context menu on canvas and disabling pointer events below the coating until 40 percent of the area is scratched. Show a progress ring at the corner that fills as area is cleared. Auto-reveal when 70 percent is cleared.\n\n\nAccessibility: keyboard support that simulates scratching with arrow keys and space to “rub.” Provide ARIA labels, focus order, and a high-contrast mode toggle.\n\n\nPerformance: target 60 fps on mid-range devices. Debounce pointer events and batch canvas updates. Test on desktop and mobile.\n\n\nExport: one self-contained HTML file with embedded CSS and JS. No external libraries.\n\n\nDeliverables:\n• Working HTML5 interactive\n• Clear code comments for the scratch mask, area-cleared calculation, and weighted RNG\n• How-to section at the top explaining where to change probabilities and prize text\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Class Perk Scratch Card.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Class Perk Scratch Card_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Clue Chase - Detective Vocabulary Game",
    "title": "Clue Chase - Detective Vocabulary Game",
    "folder": "Clue Chase - Detective Vocabulary Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game.html",
    "modifiedTime": "2025-12-21T13:27:00.627891",
    "topic": null,
    "gradeLevel": null,
    "subject": "English Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Clue Chase - Detective Vocabulary Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Clue Chase - Detective Vocabulary Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Clue Chase - Detective Vocabulary Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Clue Chase - Detective Vocabulary Game 2",
    "title": "Clue Chase - Detective Vocabulary Game 2",
    "folder": "Clue Chase - Detective Vocabulary Game 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game 2.html",
    "modifiedTime": "2025-12-21T13:27:04.400171",
    "topic": null,
    "gradeLevel": null,
    "subject": "English Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Clue Chase - Detective Vocabulary Game 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Clue Chase - Detective Vocabulary Game 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Clue Chase - Detective Vocabulary Game 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Clue Chase - Detective Vocabulary Game 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Clue Chase Detective Game",
    "title": "Clue Chase Detective Game",
    "folder": "Clue Chase Detective Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Clue Chase Detective Game.html",
    "modifiedTime": "2025-12-21T13:27:01.119240",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Clue Chase Detective Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Clue Chase Detective Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Clue Chase Detective Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Clue Chase Detective Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Clue Chase Detective Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Corner_Defence_Training_-_Interactive_Football_Simulation_20260219",
    "title": "Corner Defence Training - Interactive Football Simulation 20260219",
    "folder": "Corner_Defence_Training_-_Interactive_Football_Simulation_20260219",
    "folderPath": "SDCDworkshop2026/Corner_Defence_Training_-_Interactive_Football_Simulation_20260219",
    "indexPath": "SDCDworkshop2026/Corner_Defence_Training_-_Interactive_Football_Simulation_20260219/index.html",
    "modifiedTime": "2026-02-19T12:39:22",
    "topic": null,
    "gradeLevel": null,
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "I am designing a learning interactive experience where I want my students to learn how to defend a corner in football. The skills that I want them to learn includes:\n\na.          Where to position themselves depending on which player is taking the corner\nb.          What they need to observe as the ball is kicked\nc.          What are the actions they need to take in relation to the action their opponents make. My students are 15 years old with an interest in football and a language proficiency of English at a Secondary school level. The aesthetic design should be Serious and include features in the following: for the interactivity, I want to utilize Matching mechanics, supported by Immediate Feedback and an exploration style focused on Role-playing. To drive engagement, please include Points and Scoring within a Adventure storyline with choices narrative. Finally, the experience should include a musical score and sound effects for general interaction.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Corner_Defence_Training_-_Interactive_Football_Simulation_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Corner_Defence_Training_-_Interactive_Football_Simulation_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\CPR & AED Interactive Training",
    "title": "CPR & AED Interactive Training",
    "folder": "CPR & AED Interactive Training",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/CPR & AED Interactive Training.html",
    "modifiedTime": "2025-12-21T13:27:03.219449",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“CPR & AED Interactive Training”** module that walks learners through key concepts of cardiac emergencies, CPR, and AED use in 6 short modules, with scenarios, quiz questions, immediate feedback, tooltips, and a final completion summary.\n\nTARGET AUDIENCE:\n- Upper Secondary / post-secondary students (e.g., Sec 3–5, JC, poly)\n- Health/PE / First Aid enrichment\n\nINTERACTIVE REQUIREMENTS:\n- A single-page training interface with:\n  - **Top progress bar** showing module progress (Module X of 6).\n  - **Content area** that loads one module at a time (via JS) with:\n    - Scenario description.\n    - One interactive challenge question (MCQ or decision type).\n    - A practice/summary section with key bullet points.\n  - **Navigation controls** (Previous, Next/Complete Training) at the bottom.\n  - **Score tracker** displaying cumulative correct answers out of total questions.\n  - A **tooltip** system for key headings (e.g., module title) providing extra info on hover/touch.\n  - A **modal dialog** that shows training completion summary and key takeaways.\n- Self-contained HTML, CSS, JavaScript without external libraries.\n\nSPECIFIC REQUIREMENTS:\n\nModules & content\n- Organise content into **6 modules**, each defined in code as an object in an array. Each module has:\n  - `id` (1–6)\n  - `title` and `icon` (emoji)\n  - `scenario` (title, situation description)\n  - `challenge`:\n    - `type` (e.g. knowledge_check, decision_tree, symptom_checker, risk_assessment, procedure_check, safety_check)\n    - `title`\n    - `question` (one MCQ per module)\n    - `options` (array of 4 text options)\n    - `correct` (index of correct option)\n    - `feedback`: `correct` and `incorrect` messages\n  - `practice`:\n    - `title`\n    - `content` (short explanatory paragraph)\n    - `steps` (array of bullet points)\n  - `tooltip` (short extra info string for module header)\n- Example module topics (as per implementation):\n  1. Understanding the heart & Chain of Survival.\n  2. Clinical vs biological death; emergency timelines.\n  3. Recognising cardiac arrest and heart attack symptoms.\n  4. Risk factors & heart-healthy living.\n  5. CPR assessment sequence & technique.\n  6. AED operation & safety.\n\nDynamic content loading\n- Use a `CPRTrainingSystem` class to:\n  - Maintain `currentModule`, `totalModules`, `score`, `totalQuestions`, and `moduleProgress` (per-module attempt tracking).\n  - Render module HTML into `#contentArea` by reading from the module data array.\n- `loadModule(index)` should:\n  - Fade out current content.\n  - Replace content with a new `.module` element including:\n    - Module header (`.module-header` with icon, title, and `data-tooltip`).\n    - Scenario box (`Scenario Setup`).\n    - Interactive challenge box (`.question`, `.options`, `.feedback`).\n    - Practice section with key steps.\n  - Fade content back in and call `setupModuleInteractions`.\n- `setupModuleInteractions(module)`:\n  - Attach click handlers to each `.option` for that module's question.\n  - On first click only, check answer and show feedback.\n\nAssessment & scoring\n- When an option is clicked:\n  - If no selection has been made yet (`.options` not `.answered`):\n    - Mark the container `.answered`.\n    - Highlight the correct option with `correct` class.\n    - If the selected option is wrong, highlight the selected one with `incorrect`.\n    - Compare chosen index to `module.challenge.correct`.\n    - If module not yet in `moduleProgress`, increment `totalQuestions` and record result.\n    - If correct, increment `score`.\n    - Update score display (`Score: X/Y`).\n    - Show feedback text block (`feedback-[module.id]`) with green/red styling.\n    - Enable the Next button.\n- Score tracker always displays current score vs total questions attempted.\n\nProgress & navigation\n- `updateProgress()`:\n  - Compute percent = `(currentModule + 1) / totalModules * 100`.\n  - Update CSS custom property `--progress` on `#progressBar`.\n  - Set progress text to `Module X of 6`.\n- `updateNavigation()`:\n  - Disable Previous on first module.\n  - Disable Next when on last module.\n  - Change Next button text to “Complete Training” when on the final module.\n- Next/Previous behaviour:\n  - **Previous**: loads previous module if available.\n  - **Next**: loads next module, or if on last module, calls `completeTraining()`.\n\nTraining completion\n- `completeTraining()`:\n  - Compute completion rate = `(score / totalQuestions) * 100`, round to nearest percent.\n  - Consider pass threshold (e.g., 70%).\n  - Build modal content with:\n    - Large emoji (e.g., ✅ if pass, 📚 if retry needed).\n    - `Your Score: X/Y (Z%)`.\n    - Message coloured green/red for pass/fail.\n    - “Key Takeaways” list: e.g., CPR improves survival, early defib is crucial, every minute counts, safety & technique matter.\n    - A **Restart Training** button that reloads the page (`location.reload()`).\n  - Display this content in `#modalBody` and show `.modal`.\n\nTooltips & accessibility\n- Elements with `data-tooltip` show a tooltip on hover/mouseover and on touch.\n- Tooltip behaviour:\n  - On `mouseover` of `[data-tooltip]`: show `#tooltip` above the element with its text.\n  - On `mouseout`: hide tooltip.\n  - On touchstart on `[data-tooltip]`: show tooltip briefly, then hide after a timeout.\n- Keyboard support:\n  - ArrowLeft/ArrowRight navigate modules via Prev/Next.\n  - Set ARIA attributes on Next/Prev buttons and `#progressBar` (`role=\"progressbar\"`, `aria-label`=\"Training progress\").\n\nUI/UX behaviour\n- Smooth visual transitions when changing modules (fade in/out).\n- Options visually indicate selected/correct/incorrect state.\n- Layout is responsive and works inside SLS iframe.\n- Language and explanations are concise, clear, and student-friendly.\n\nLEARNING OUTCOMES:\n- Learners should be able to:\n  - Explain the **Chain of Survival** and the roles of CPR and AED.\n  - Distinguish between **clinical** and **biological** death and understand why time is critical.\n  - Recognise key **heart attack and cardiac arrest symptoms**.\n  - Identify **modifiable risk factors** and outline a heart-healthy lifestyle.\n  - Describe and sequence core **CPR steps** (assessment sequence and compression/ventilation details).\n  - Perform basic **AED safety checks** and summarise AED operation steps.\n- The module is meant to serve as a formative, self-paced training with immediate feedback.\n\nINTERACTION FEATURES TO INCLUDE:\n- Per-module MCQ challenge with instant feedback.\n- Scenario descriptions that anchor the learning in real-life contexts.\n- Progress bar and navigation indicating completion status.\n- Persistent scoring and a final completion summary.\n- Tooltips and accessible keyboard navigation.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/CPR & AED Interactive Training.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/CPR & AED Interactive Training_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\CPR & AED Interactive Training 2",
    "title": "CPR & AED Interactive Training 2",
    "folder": "CPR & AED Interactive Training 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/CPR & AED Interactive Training 2.html",
    "modifiedTime": "2025-12-21T13:27:03.709722",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"CPR & AED Interactive Training 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"CPR & AED Interactive Training 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"CPR & AED Interactive Training 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/CPR & AED Interactive Training 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/CPR & AED Interactive Training 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Credit Card Compound Interest Simulator",
    "title": "Credit Card Compound Interest Simulator",
    "folder": "Credit Card Compound Interest Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Credit Card Compound Interest Simulator.html",
    "modifiedTime": "2025-12-21T13:27:06.988304",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Credit Card Compound Interest Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Credit Card Compound Interest Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Credit Card Compound Interest Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Credit Card Compound Interest Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Credit Card Compound Interest Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Deepfake Detective_ Truth or Deception",
    "title": "Deepfake Detective  Truth or Deception",
    "folder": "Deepfake Detective_ Truth or Deception",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Deepfake Detective_ Truth or Deception.html",
    "modifiedTime": "2026-02-19T21:24:42.315886",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Deepfake Detective_ Truth or Deception.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Deepfake Detective_ Truth or Deception_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Demand-Supply Interactive Model",
    "title": "Demand-Supply Interactive Model",
    "folder": "Demand-Supply Interactive Model",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Demand-Supply Interactive Model.html",
    "modifiedTime": "2025-12-21T13:27:08.275872",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Kevin\n\nPerfect—here’s an upgraded, drop-in prompt that adds a demand elasticity control (with two modeling options) and shows how elasticity alters the before/after equilibrium and total revenue.\n\n \n\n \n\n \n\nPrompt (paste into your code generator):\n\n \n\nBuild an interactive web app (HTML/CSS/JS with p5.js, D3.js, or Plotly.js) that visualizes a demand–supply model and highlights how shocks shift curves and change equilibrium price (P), quantity (Q), and total revenue (TR = P×Q). Add a dedicated control to change the elasticity of demand and reflect its consequences visually and numerically.\n\n \n\nCore features\n\n \n\nAxes & Curves\nX-axis = Quantity; Y-axis = Price.\nInitial Demand (D₁) downward sloping and Supply (S₁) upward sloping; clearly labeled.\nKeep a “ghosted” copy of original curves when they shift (for comparison).\n \nEquilibrium & Revenue (Before/After)\nCompute initial E₁(P₁, Q₁) with dashed guides; badge showing P₁, Q₁, TR₁ = P₁×Q₁.\nAfter any change, compute E₂(P₂, Q₂); badge P₂, Q₂, TR₂.\nShade TR rectangles: R₁ (to Q₁×P₁) and R₂ (to Q₂×P₂), semi-transparent to compare areas.\nDraw arrowed deltas (ΔP, ΔQ). Provide Comparison Panel showing P₁/P₂, Q₁/Q₂, TR₁/TR₂, and ΔP/ΔQ/ΔTR (absolute & %).\n \nInteractive Shocks (Determinants)\nSliders/dropdowns for demand shifters (income, tastes, related goods, number of buyers) and supply shifters (technology, input costs, number of sellers).\nSmoothly shift the relevant curve and recompute equilibrium and revenue.\n \nDemand Elasticity Control (the new part)\nElasticity Mode toggle with two options:\nLinear (point-elasticity at equilibrium): Use linear demand in direct form\nQ = A − B·P. At the current equilibrium (P*, Q*), let the user set a target elasticity ε_d (negative by convention; UI slider shows |ε_d|).\nEnforce that D passes through (P*, Q*) and has the chosen elasticity there by setting:\nB = (|ε_d| · Q*/P*) and A = Q* + B·P*.\n(Point elasticity at E is then ε_d = −B·(P*/Q*).)\nRe-render D with these new A,B while keeping E₁ fixed before further shocks.\nDisplay the computed local elasticity at E₁ and E₂ as the user moves sliders.\n \nIsoelastic (constant elasticity): Use Q = k · P^{−e}, where e = |ε_d| (constant along the curve).\nCalibrate k = Q* · (P*)^{e} so the curve passes through the current equilibrium.\nRecompute E₂ when other shifters change; show that |ε| is constant along D.\n \n \nUI: a slider for |ε_d| (range ~0.2 to 3.0), numeric readout, and a dropdown for Linear vs Isoelastic.\nDynamic hints:\nIf |ε_d| > 1 (elastic), note “price ↑ → TR ↓” and vice versa; if |ε_d| < 1 (inelastic), the opposite.\nShow MR toggle (optional): for isoelastic, MR slope differs; for linear, draw MR with twice the slope. Label MR only when toggled on.\n \n \nLive Explanations\nText box updates with plain-English logic, e.g.,\n“Income ↑ shifts demand right. With |ε_d| = 1.6 (elastic) at E₁, equilibrium price rises, quantity rises, and TR increases with the outward shift.”\n \nControls & UI niceties\nButtons: Reset, Show/Hide TR rectangles, Show/Hide ΔP/ΔQ, Toggle MR, Side-by-side view (E₁ left vs E₂ right).\nTooltips on elasticity slider explaining the setting (“Higher |ε| = flatter demand; revenue falls when price rises” for elastic region).\nMobile-friendly labels and keyboard-accessible controls.\n \nMath & Computation\nAlways compute equilibrium analytically from current D and S forms. For supply, keep linear Q = α + β·P (or P = c + d·Q) and let shifters move intercepts/β sensibly.\nDisplay the current point elasticity of demand at E₂:\nLinear mode: ε_d(E) = −B·(P/Q)\nIsoelastic mode: ε_d(E) = −e (constant)\n \n \n \n\n \n\nGoal\n\nStudents can change demand elasticity and immediately see how the same shock yields different equilibrium and revenue outcomes—reinforcing the link between elasticity, price changes, and TR.\n\n \n\n \n\n \n\nIf you want, I can also give you a ready-to-run Plotly.js version that implements both elasticity modes with the formulas above and the TR rectangles pre-styled.\n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/af779313-c60f-4a7a-bdff-e89c6fcad21b/section/34049/activity/34099",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Demand-Supply Interactive Model.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Demand-Supply Interactive Model_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Depreciation_Calculation_Simulator_20251116",
    "title": "Depreciation Calculation Simulator 20251116",
    "folder": "Depreciation_Calculation_Simulator_20251116",
    "folderPath": "Depreciation_Calculation_Simulator_20251116",
    "indexPath": "Depreciation_Calculation_Simulator_20251116/index.html",
    "modifiedTime": "2025-12-21T13:26:57.293528",
    "topic": "Calculating impairment loss on trade receivables (TR)",
    "gradeLevel": "Secondary 3",
    "subject": "Principles of Accounts",
    "hasPrompt": true,
    "promptText": "Ang Joo Bee https://vle.learning.moe.edu.sg/class-group/view/fb19f5f8-198c-4f8d-b1fd-1910dc16d40a?tab=forum&typeUuid=1b1a4bcf-d948-4d6e-aead-6634a487c88d&actionType=TOPIC\n\nEdited on08 Nov 2025 11:21 AM\n0 Comments\n0 Votes\nSubject & Level: POA 3G2, 3G3, 4G2 & 4G3\n \nTopic: Calculating impairment loss on trade receivables (TR)\n\nInteractive content: This simulator allows students to vary (i) the amoun confirmed uncollectible and (ii) % of TR estimated uncollectible to check if their calculation of impairment loss on TR (and Reversal of impairment loss on TR) is correct.\n\nI want to design a simulation interactive for my students.\nGrade level: Secondary 3\nStudent readiness level: Mixed Abilities\nThe simulation is based on: calculation of (i) Impairment loss on trade receivables (or Reversal of impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables\nThe objective of the simulation is to: Understand how the variables (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible affects the calculation of (i) Impairment loss on trade receivables (or Reversal for impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables will change when the variables \n\nWhile using the simulation, students should experience: experimenting with different variables i.e. (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible \nThe interface should include: drop down list for students to select the variable “Amount confirmed uncollectible” where values consist of $0, $100, $200, $300, $400, $500, $600 and $700; drop down list for students to select the variable “Percentage of trade receivables estimated uncollectible” where values consists of 1%, 2%, 3%,  4% and 5%.\nThe results panel should show 2 sections. \nThe title of the 1st section is “Statement of Financial Performance”, where the title of the sub-section is “Less: Other Expenses” and followed by “Impairment loss on trade receivables”.\nThe title of the 2nd section is “Statement of Financial Position” where the title of the sub-section is “Current Assets”, followed by “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\nCalculate the values for the results panel using the following logic:\nTrade receivables = Given trade receivables minus amount confirmed uncollectible\nAllowance for impairment of trade receivables = % x Trade receivables\nImpairment loss on trade receivables = Allowance for impairment of trade receivables minus (Given Allowance for impairment of trade receivables minus amount confirmed uncollectible).\n\nIf the value for Impairment loss on trade receivables is a negative value, display “Reversal of impairment loss on trade receivables” instead of “Impairment loss on trade receivables”, and display the value in brackets.\nDisplay “Reversal of impairment loss on trade receivables” in bold italics red fonts.\n\nProvide the students with a checkbox whether they want to see the workings.\nDisplay only numeric workings. Display the workings next to “Impairment loss on trade receivables”, “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\nUncheck the checkbox automatically every time the student changes any one of the variables.\n\nGiven Trade receivables = $10000\nGiven Allowance for impairment of trade receivables = $500\n\nDisplay “Given Trade receivables” and “Given Allowance for impairment of trade receivables” at the top of the screen.\n\n\n",
    "hasZip": true,
    "zipPath": "Depreciation_Calculation_Simulator_20251116.zip",
    "hasPromptImage": true,
    "promptImagePath": "Depreciation_Calculation_Simulator_20251116/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Depreciation_Calculation_Simulator_20251116/ACP_Prompt_for_Depreciation_Simulator.docx",
    "knowledgeBaseExt": "docx",
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Design Stylisation Explorer",
    "title": "Design Stylisation Explorer",
    "folder": "Design Stylisation Explorer",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Design Stylisation Explorer.html",
    "modifiedTime": "2026-02-19T21:25:13.590101",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Design Stylisation Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Design Stylisation Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Design-Based Simulation_ From Random Lines to Deliberate Design",
    "title": "Design-Based Simulation  From Random Lines to Deliberate Design",
    "folder": "Design-Based Simulation_ From Random Lines to Deliberate Design",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Design-Based Simulation_ From Random Lines to Deliberate Design.html",
    "modifiedTime": "2025-12-21T13:27:07.308304",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Design-Based Simulation_ From Random Lines to Deliberate Design\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Design-Based Simulation_ From Random Lines to Deliberate Design\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Design-Based Simulation_ From Random Lines to Deliberate Design\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Design-Based Simulation_ From Random Lines to Deliberate Design.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Design-Based Simulation_ From Random Lines to Deliberate Design_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Digital Sketching Simulator",
    "title": "Digital Sketching Simulator",
    "folder": "Digital Sketching Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Digital Sketching Simulator.html",
    "modifiedTime": "2025-12-21T13:27:06.148171",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Digital Sketching Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Digital Sketching Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Digital Sketching Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Digital Sketching Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Digital Sketching Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Dikir Barat - Wau Bulan Interactive Learning",
    "title": "Dikir Barat - Wau Bulan Interactive Learning",
    "folder": "Dikir Barat - Wau Bulan Interactive Learning",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Dikir Barat - Wau Bulan Interactive Learning.html",
    "modifiedTime": "2025-12-21T13:27:00.958087",
    "topic": null,
    "gradeLevel": "Secondary 4 by Ji Heng",
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "Grade level: Secondary 4 by Ji Heng\n\nStudent readiness level: Mixed Abilities\n\nThe simulation is based on: Learning the opening verse of \"Anak Haram,\" a traditional Dikir Barat piece, focusing on mastering the four foundational lines: \"Di mana hendak ku serahkan / Dengarlah jeritan batinku / Di masa kecil aku dibuang / Di mana ayah dan juga ibu\" with proper pronunciation, melodic delivery, and coordination with the traditional rebana rhythm pattern: T TTK TKT TKT.\n\nKnown elements include:\n\nFour specific lyrical lines with Malay pronunciation\nTraditional Dikir Barat melodic patterns\nRebana rhythm pattern: T TTK TKT TKT (T = Tak, K = Kah)\nVocal delivery techniques and phrasing\nCoordination between singing and percussion\nCultural context of the opening verse\nThe objective of the simulation is to: Allow students to master the pronunciation and delivery of the opening verse, understand how vocals coordinate with rebana rhythms in Dikir Barat, develop skills in maintaining steady rhythm while singing, and appreciate the integrated nature of voice and percussion in traditional Malaysian musical performance.\n\nWhile using the simulation, students should experience: Listening to the rebana rhythm pattern in isolation, practising the T TTK TKT TKT pattern on virtual rebana, learning each vocal line with phonetic guidance, coordinating singing with the rebana rhythm, building fluency through layered practice (rhythm only, vocals only, then combined), recording attempts with both vocal and percussion elements, adjusting timing to maintain synchronisation, and gradually building confidence in performing the complete integrated piece with proper flow and cultural authenticity.\n\nThe interface should include: Virtual rebana with visual rhythm notation showing T TTK TKT TKT pattern, line-by-line lyric display with phonetic pronunciation guides, dual-track audio playback for vocals and percussion separately or combined, recording feature capturing both vocal and rhythm attempts, rhythm practice mode with visual beat indicators, coordination trainer showing when vocals align with specific drum beats, tempo adjustment slider for learning at different speeds, cultural context panel explaining rebana's role in Dikir Barat, progress tracker showing mastery of vocals, rhythm, and coordination, metronome with traditional Dikir Barat timing, and performance mode combining all elements for complete practice experience.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Dikir Barat - Wau Bulan Interactive Learning.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Dikir Barat - Wau Bulan Interactive Learning_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Disappointment Detective - Managing Emotions",
    "title": "Disappointment Detective - Managing Emotions",
    "folder": "Disappointment Detective - Managing Emotions",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Disappointment Detective - Managing Emotions.html",
    "modifiedTime": "2026-02-19T21:26:32.654838",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Disappointment Detective - Managing Emotions.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Disappointment Detective - Managing Emotions_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Distance-Time Graph Simulation",
    "title": "Distance-Time Graph Simulation",
    "folder": "Distance-Time Graph Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Distance-Time Graph Simulation.html",
    "modifiedTime": "2025-12-21T13:27:08.934534",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Distance–Time Graph Simulation”** where students control the speed of a car and observe how its motion is represented on a distance–time graph in real time.\n\nTARGET AUDIENCE:\n- Lower / Upper Secondary Physics & Mathematics (~13–16 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A **split-screen simulation** with:\n  - Left: a simple **road scene** showing a car moving horizontally along a road with distance markers (0 m, 50 m, 100 m, 150 m, 200 m).\n  - Right: a **distance–time graph** on a `<canvas>` plotting distance (vertical axis, m) vs time (horizontal axis, s).\n- Control panel above or beside the simulation with:\n  - **Speed slider** (0–20 m/s) showing current speed.\n  - **Start Motion** button.\n  - **Pause** button.\n  - **Reset** button.\n- Display of **current time** and **current distance** values.\n- An **information panel** highlighting key concepts (e.g., steeper line = faster speed; horizontal line = no motion; straight line = constant speed).\n- Self-contained HTML, CSS, JavaScript; no external libraries.\n- **MOBILE-FRIENDLY & ACCESSIBLE**:\n  - Touch-friendly buttons and slider.\n  - Keyboard shortcuts (Space to start/pause, R to reset, Arrow keys for speed) for accessibility.\n\nSPECIFIC REQUIREMENTS:\n\nSimulation model\n- Use a simple linear model: `distance = speed × time`.\n- State variables:\n  - `time` (seconds, starts at 0).\n  - `distance` (meters, starts at 0).\n  - `speed` (m/s), controlled by slider.\n  - `isRunning` flag.\n  - `dataPoints`: array of `{ time, distance }` used for plotting.\n- Update loop:\n  - Use `requestAnimationFrame` to animate.\n  - Each frame, compute `deltaTime` in seconds using timestamps.\n  - If 0 < `deltaTime` < 0.1 s, update `time += deltaTime` and `distance += speed × deltaTime`.\n  - Add data points at regular intervals (e.g., every 0.1 s) for a smooth line.\n- Stop conditions:\n  - When `distance` reaches or exceeds `maxDistance` (e.g., 200 m), stop the simulation.\n  - When `time` reaches `maxTime` (e.g., 20 s), stop as well.\n\nCar animation\n- Road section with car icon (`🚗`) absolutely positioned within a road container.\n- The car’s `left` position is proportional to `distance / maxDistance` times the road width.\n- Reflect speed visually (optional):\n  - At speed 0: greyed/parked car.\n  - At moderate/high speeds: colour shift or slight scale-up.\n\nGraph drawing\n- Use a `<canvas>` with a 2D context for drawing the distance–time graph.\n- Configure maximum time (e.g., 20 s) and distance (e.g., 200 m) for axes.\n- Drawing steps:\n  - Clear canvas each frame.\n  - Draw grid lines (optional dashed lines) for both axes.\n  - Draw x- and y-axes with thicker lines.\n  - Plot the polyline through all `dataPoints`:\n    - Map `time` to x: `x = margin + (time / maxTime) × graphWidth`.\n    - Map `distance` to y: `y = height−margin − (distance / maxDistance) × graphHeight`.\n    - Use a coloured stroke (e.g., blue/purple), rounded line caps.\n  - Draw a filled point/glowing marker at the **current** (time, distance) location.\n  - Add axis labels and tick values (e.g., 0, 5, 10, 15, 20 s; 0, 50, 100, 150, 200 m).\n\nControls and behaviour\n- **Speed slider**:\n  - Range 0–20 m/s, integer steps.\n  - On `input`, update `speed` and numeric display.\n  - If the simulation is running, the new speed affects subsequent motion instantly.\n- **Start Motion** button:\n  - Begins or resumes simulation if not already running.\n  - Disables itself and enables Pause.\n- **Pause** button:\n  - Pauses simulation (no time/distance updates; animation frame cancelled).\n  - Disables itself and enables Start.\n- **Reset** button:\n  - Calls a reset routine that:\n    - Stops simulation.\n    - Resets `time`, `distance`, and `dataPoints`.\n    - Moves car to start.\n    - Sets displays to 0.0 s, 0.0 m.\n    - Redraws empty graph with axes and grid.\n\nDisplay elements\n- Current time display: `Time: X.Xs`.\n- Current distance display: `Distance: Y.Ym`.\n- Speed value label: numeric, in m/s.\n\nKeyboard and touch support\n- Keyboard shortcuts:\n  - Space: toggle Start/Pause.\n  - R: reset.\n  - ArrowUp/ArrowDown: increase/decrease speed slider value by 1, within bounds.\n- Touch support:\n  - For control buttons, on `touchstart` scale the button slightly; on `touchend`, revert and trigger click.\n\nEducational messaging\n- Info panel with concept bullets:\n  - “Steeper line = faster speed”.\n  - “Horizontal line = no motion”.\n  - “Straight line = constant speed”.\n- Optionally: console log or tooltip explaining keyboard shortcuts.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Relate **constant speed** motion to the slope of a distance–time graph.\n  - Understand that **steeper lines** represent higher speed.\n  - Recognise that a **horizontal line** corresponds to the car being stationary.\n  - Interpret numerical values of time and distance from the graph.\n- The simulation should support experimentation with different speeds and durations to build intuition about motion graphs.\n\nINTERACTION FEATURES TO INCLUDE:\n- Real-time animation of car position.\n- Real-time plotting of distance–time graph.\n- Start/Pause/Reset controls, slider & keyboard input, and live numeric readouts.\n- Clear, labelled axes and concept prompts for self-guided exploration.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Distance-Time Graph Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Distance-Time Graph Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Distance-Time Graph Simulation 2",
    "title": "Distance-Time Graph Simulation 2",
    "folder": "Distance-Time Graph Simulation 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Distance-Time Graph Simulation 2.html",
    "modifiedTime": "2025-12-21T13:27:03.102297",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Distance-Time Graph Simulation 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Distance-Time Graph Simulation 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Distance-Time Graph Simulation 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Distance-Time Graph Simulation 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Distance-Time Graph Simulation 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Distance-Time Graph Simulation 3",
    "title": "Distance-Time Graph Simulation 3",
    "folder": "Distance-Time Graph Simulation 3",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Distance-Time Graph Simulation 3.html",
    "modifiedTime": "2025-12-21T13:27:01.227240",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Distance-Time Graph Simulation 3\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Distance-Time Graph Simulation 3\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Distance-Time Graph Simulation 3\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Distance-Time Graph Simulation 3.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Distance-Time Graph Simulation 3_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\East Singapore Safety Explorer",
    "title": "East Singapore Safety Explorer",
    "folder": "East Singapore Safety Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/East Singapore Safety Explorer.html",
    "modifiedTime": "2025-12-21T13:27:05.241210",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"East Singapore Safety Explorer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"East Singapore Safety Explorer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"East Singapore Safety Explorer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/East Singapore Safety Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/East Singapore Safety Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Eddie's Tragic Timeline - A View from the Bridge",
    "title": "Eddie's Tragic Timeline - A View from the Bridge",
    "folder": "Eddie's Tragic Timeline - A View from the Bridge",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Eddie's Tragic Timeline - A View from the Bridge.html",
    "modifiedTime": "2025-12-21T13:27:04.788860",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Eddie's Tragic Timeline - A View from the Bridge\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Eddie's Tragic Timeline - A View from the Bridge\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Eddie's Tragic Timeline - A View from the Bridge\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Eddie's Tragic Timeline - A View from the Bridge.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Eddie's Tragic Timeline - A View from the Bridge_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\EDM Drum Sequencer",
    "title": "EDM Drum Sequencer",
    "folder": "EDM Drum Sequencer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/EDM Drum Sequencer.html",
    "modifiedTime": "2025-12-21T13:27:04.180003",
    "topic": null,
    "gradeLevel": "Secondary 4 by Ji Heng",
    "subject": "Computing",
    "hasPrompt": true,
    "promptText": "Grade level: Secondary 4 by Ji Heng\n\n\nStudent readiness level: Mixed Abilities\n\nThe simulation is based on: Operating a virtual EDM drum sequencer featuring a 16-step pattern grid with classic electronic drum sounds (kick, snare, hi-hat, crash, clap, etc.), integrated filter controls including cutoff and resonance parameters, and real-time pattern programming capabilities to understand electronic music production and rhythm creation techniques.\n\nKnown sequencer elements include:\n\n16-step pattern grid with multiple drum tracks\nElectronic drum sounds (kick, snare, hi-hat, open hat, clap, crash, percussion)\nFilter cutoff and resonance controls per track\nTempo and swing controls\nPattern playback and loop functionality\nStep velocity and accent programming\nReal-time pattern editing and manipulation\nThe objective of the simulation is to: Allow students to create authentic EDM drum patterns through step sequencing, understand how filter parameters shape electronic drum sounds, master the 16-step grid programming method used in electronic music production, learn rhythm construction techniques common in dance music genres, and develop practical skills in beat programming and sound design.\n\nWhile using the simulation, students should experience: Clicking step buttons to program drum hits across the 16-step grid, selecting different drum sounds for each track row, adjusting filter cutoff to brighten or darken drum sounds, manipulating resonance to add character and emphasis, experimenting with velocity levels for dynamic variation, creating classic EDM patterns like four-on-the-floor kicks and syncopated hi-hats, using real-time playback to hear patterns while editing, building complete drum arrangements through pattern variation, and understanding how filtered drums create movement and energy in electronic dance music.\n\nThe interface should include: 16-step grid with illuminated step buttons for each drum track, drum sound selector with classic EDM samples (kick, snare, hi-hat, clap, crash, percussion), dedicated filter section with cutoff and resonance knobs per track, tempo slider with BPM display, play/stop/record transport controls, step velocity controls for dynamic programming, swing parameter for groove adjustment, pattern clear and randomise functions, visual step indicator showing playback position, volume faders for each drum track, pattern save and load functionality, and preset library featuring classic EDM drum patterns for reference and learning.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/EDM Drum Sequencer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/EDM Drum Sequencer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/EDM_Drum_Sequencer_20260219",
    "title": "EDM Drum Sequencer 20260219",
    "folder": "EDM_Drum_Sequencer_20260219",
    "folderPath": "SDCDworkshop2026/EDM_Drum_Sequencer_20260219",
    "indexPath": "SDCDworkshop2026/EDM_Drum_Sequencer_20260219/index.html",
    "modifiedTime": "2026-02-19T13:10:50",
    "topic": null,
    "gradeLevel": "Secondary 4",
    "subject": "Computing",
    "hasPrompt": true,
    "promptText": "Ji Heng Prompt:\nGrade level: Secondary 4\n\nStudent readiness level: Mixed Abilities\n\nThe simulation is based on: Operating a virtual EDM drum sequencer featuring a 16-step pattern grid with classic electronic drum sounds (kick, snare, hi-hat, crash, clap, etc.), integrated filter controls including cutoff and resonance parameters, and real-time pattern programming capabilities to understand electronic music production and rhythm creation techniques.\n\nKnown sequencer elements include:\n\n16-step pattern grid with multiple drum tracks\nElectronic drum sounds (kick, snare, hi-hat, open hat, clap, crash, percussion)\nFilter cutoff and resonance controls per track\nTempo and swing controls\nPattern playback and loop functionality\nStep velocity and accent programming\nReal-time pattern editing and manipulation\nThe objective of the simulation is to: Allow students to create authentic EDM drum patterns through step sequencing, understand how filter parameters shape electronic drum sounds, master the 16-step grid programming method used in electronic music production, learn rhythm construction techniques common in dance music genres, and develop practical skills in beat programming and sound design.\n\nWhile using the simulation, students should experience: Clicking step buttons to program drum hits across the 16-step grid, selecting different drum sounds for each track row, adjusting filter cutoff to brighten or darken drum sounds, manipulating resonance to add character and emphasis, experimenting with velocity levels for dynamic variation, creating classic EDM patterns like four-on-the-floor kicks and syncopated hi-hats, using real-time playback to hear patterns while editing, building complete drum arrangements through pattern variation, and understanding how filtered drums create movement and energy in electronic dance music.\n\nThe interface should include: 16-step grid with illuminated step buttons for each drum track, drum sound selector with classic EDM samples (kick, snare, hi-hat, clap, crash, percussion), dedicated filter section with cutoff and resonance knobs per track, tempo slider with BPM display, play/stop/record transport controls, step velocity controls for dynamic programming, swing parameter for groove adjustment, pattern clear and randomise functions, visual step indicator showing playback position, volume faders for each drum track, pattern save and load functionality, and preset library featuring classic EDM drum patterns for reference and learning.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/EDM_Drum_Sequencer_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/EDM_Drum_Sequencer_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Electrolysis Adventure_ The Chemical Quest",
    "title": "Electrolysis Adventure  The Chemical Quest",
    "folder": "Electrolysis Adventure_ The Chemical Quest",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Electrolysis Adventure_ The Chemical Quest.html",
    "modifiedTime": "2026-02-19T21:27:05.119517",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Electrolysis Adventure_ The Chemical Quest.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Electrolysis Adventure_ The Chemical Quest_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Electromagnetic Spectrum Simulation",
    "title": "Electromagnetic Spectrum Simulation",
    "folder": "Electromagnetic Spectrum Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Electromagnetic Spectrum Simulation.html",
    "modifiedTime": "2025-12-21T13:27:04.258084",
    "topic": null,
    "gradeLevel": "Secondary 3 to 4",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Wei Hao\nLearning Objectives: State examples of typical uses of the following regions of the electromagnetic spectrum:\n\n \n\n \n\n1.      Radio waves\n\n \n\n \n\n2.      Microwaves\n\n \n\n \n\n3.      Infrared\n\n \n\n \n\n4.      Visible light\n\n \n\n \n\n5.      Ultraviolet\n\n \n\n \n\n6.      X-rays\n\n \n\n \n\n7.      Gamma rays\n\n \n\n \n\nInclude their typical range of wavelengths and frequencies including the use of prefixes such as n for nano and m for milli.\n\n \n\n \n\nInteractive Prompt:\n\n \n\n \n\nI want to design a simulation interactive for my students.\n\n \n\n \n\nGrade level: Secondary 3 to 4\n\n \n\n \n\nStudent readiness level: Mixed Abilities\n\n \n\n \n\nThe simulation is based on: Electromagnetic Spectrum with the range of wavelengths and frequencies for the following regions:\n\n \n\n \n\n1.      Radio waves\n\n \n\n \n\n2.      Microwaves\n\n \n\n \n\n3.      Infrared\n\n \n\n \n\n4.      Visible light\n\n \n\n \n\n5.      Ultraviolet\n\n \n\n \n\n6.      X-rays\n\n \n\n \n\n7.      Gamma rays\n\n \n\n \n\nInclude their uses and typical range of wavelengths and frequencies including the use of prefixes such as n for nano and m for milli.\n\n \n\n \n\nThe objective of the simulation is to: Understand the uses of the specific region and their typical magnitude of wavelengths and frequencies.\n\n \n\n \n\nWhile using the simulation, students should experience: Using two sliders to adjust the range of wavelength or frequencies, including typical uses of that particular wave\n\n \n\n \n\nThe interface should include: A slider to adjust the wavelength and another slider to adjust frequencies as variables. A panel that shows two or more typical uses of the electromagnetic wave. Another button/slider that shows the spectrum, including red for red visible light and violet for visible violet light. \n\n ",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Electromagnetic Spectrum Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Electromagnetic Spectrum Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Emergency Grab Bag Packing",
    "title": "Emergency Grab Bag Packing",
    "folder": "Emergency Grab Bag Packing",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Emergency Grab Bag Packing.html",
    "modifiedTime": "2026-02-19T21:27:34.678269",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Emergency Grab Bag Packing.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Emergency Grab Bag Packing_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Empathy Champions Adventure",
    "title": "Empathy Champions Adventure",
    "folder": "Empathy Champions Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Empathy Champions Adventure.html",
    "modifiedTime": "2026-02-19T21:28:25.136721",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Empathy Champions Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Empathy Champions Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Enhanced Greenhouse Effect Simulation",
    "title": "Enhanced Greenhouse Effect Simulation",
    "folder": "Enhanced Greenhouse Effect Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Enhanced Greenhouse Effect Simulation.html",
    "modifiedTime": "2025-12-21T13:27:02.401804",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Enhanced Greenhouse Effect Simulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Enhanced Greenhouse Effect Simulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Enhanced Greenhouse Effect Simulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Enhanced Greenhouse Effect Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Enhanced Greenhouse Effect Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Environmental Degradation Concept Map",
    "title": "Environmental Degradation Concept Map",
    "folder": "Environmental Degradation Concept Map",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Environmental Degradation Concept Map.html",
    "modifiedTime": "2025-12-21T13:27:04.064933",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Environmental Degradation Concept Map\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Environmental Degradation Concept Map\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Environmental Degradation Concept Map\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Environmental Degradation Concept Map.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Environmental Degradation Concept Map_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Equivalent Fractions Memory Game",
    "title": "Equivalent Fractions Memory Game",
    "folder": "Equivalent Fractions Memory Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Equivalent Fractions Memory Game.html",
    "modifiedTime": "2025-12-21T13:27:03.847463",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Equivalent Fractions Memory Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Equivalent Fractions Memory Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Equivalent Fractions Memory Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Equivalent Fractions Memory Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Equivalent Fractions Memory Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Ergonomics Design Simulation",
    "title": "Ergonomics Design Simulation",
    "folder": "Ergonomics Design Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Ergonomics Design Simulation.html",
    "modifiedTime": "2025-12-21T13:27:06.842305",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Ergonomics Design Simulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Ergonomics Design Simulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Ergonomics Design Simulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Ergonomics Design Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Ergonomics Design Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Express_Fractions_as_Single_Fraction_20251103",
    "title": "Express Fractions as Single Fraction 20251103",
    "folder": "Express_Fractions_as_Single_Fraction_20251103",
    "folderPath": "Express_Fractions_as_Single_Fraction_20251103",
    "indexPath": "Express_Fractions_as_Single_Fraction_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:55.532431",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Express Fractions as Single Fraction.\n\nTARGET AUDIENCE: Primary 3-4 - Mathematics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Express Fractions as Single Fraction\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Express_Fractions_as_Single_Fraction_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Express_Fractions_as_Single_Fraction_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Express_Fractions_as_Single_Fraction_20260225",
    "title": "Express Fractions as Single Fraction 20260225",
    "folder": "Express_Fractions_as_Single_Fraction_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Express_Fractions_as_Single_Fraction_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Express_Fractions_as_Single_Fraction_20260225/index.html",
    "modifiedTime": "2026-02-25T13:34:48",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about Express Fractions as Single Fraction.\nTARGET AUDIENCE: Secondary 1-2 - Mathematics\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\n- Step-by-step solution reveal with hints and “Why?” explanations\n- Randomized problem generator (seeded) for varied practice\n- Equation input with on-screen math keyboard and LaTeX rendering\n- Unit handling/validation and clear messages for common mistakes\n- Dynamic graphs/diagrams with draggable points and live readouts\n- Guided steps: find LCM of denominators, convert to equivalent fractions, operate, then simplify\n- Visual models (bars/pies) synchronized with numeric steps\n- Error-detection for common mistakes (e.g., adding denominators directly) with corrective hints\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Express Fractions as Single Fraction\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.\n \nRefine:\nfor problem greater than 1, can you represent them as greater than 1 for example\n2/8 + 9/6 = ?\ncan 9/6 can be represented as 6/6 + 3/6 blocks of the same color?\n \nRefine 2: (Pro Tip: I used ChatGPT image capability to ask for text to paste inside refine text)\nfor problem like 1/4 × 1/2 = ?\nthe visualisation should not be 2 blocks side by side that is geat for + and -\nthe x visualisation should be one block horizontal and the other vertical, so that the interection is the shading color representing the answer\nA rectangle is divided into equal parts. The full height is 1, and the shaded height is 1/2. The full width is 1, and the shaded width is 1/4. The overlapping shaded region represents 1/4 of 1/2 of the whole rectangle.\nSo in text form for an AI:\n“Take 1/2 of a rectangle, then take 1/4 of that region. The overlapping area represents the product 1/4 × 1/2.”\nAnd the result is:\n1/4 × 1/2 = 1/8\n \n \nRefine 3: (ask for specific edits)\n\nsteps-container, can make the steps-container a resizable panel, it currently in still difficult to see the full conatiner, perhaps make it expandable and draggable and resizable to accommodate all use case\n ",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Express_Fractions_as_Single_Fraction_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Express_Fractions_as_Single_Fraction_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\EZ-Link Top-Up Simulator",
    "title": "EZ-Link Top-Up Simulator",
    "folder": "EZ-Link Top-Up Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/EZ-Link Top-Up Simulator.html",
    "modifiedTime": "2025-12-21T13:27:05.315292",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"EZ-Link Top-Up Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"EZ-Link Top-Up Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"EZ-Link Top-Up Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/EZ-Link Top-Up Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/EZ-Link Top-Up Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Favorite Fruits Bar Chart",
    "title": "Favorite Fruits Bar Chart",
    "folder": "Favorite Fruits Bar Chart",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Favorite Fruits Bar Chart.html",
    "modifiedTime": "2025-12-21T13:26:57.927352",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Favorite Fruits Bar Chart”** where students explore a simple bar chart showing classmates’ favourite fruits and reveal the number of votes for each fruit by interacting with the bars.\n\nTARGET AUDIENCE:\n- Primary 3 Mathematics (Data handling / Picture & Bar Graphs)\n\nINTERACTIVE REQUIREMENTS:\n- Visual **bar chart** representing the number of votes for several fruits.\n- Fruits (at least):\n  - Apple\n  - Banana\n  - Orange\n  - Grape\n  - Strawberry\n- Each fruit should be represented by:\n  - An emoji/icon (e.g., 🍎, 🍌, 🍊, 🍇, 🍓)\n  - A fruit label (name)\n  - A coloured bar whose height reflects the number of votes.\n- **Click/tap interaction**: clicking/tapping a bar reveals that fruit’s exact number of votes.\n- Visual and audio **immediate feedback** on bar clicks (animations + soft click sound).\n- A **“Most Popular Fruit”** highlight that appears after students have explored all bars.\n- A short **instruction message** that updates as students interact (e.g., prompts them to click remaining bars).\n- Tooltip explaining what the chart represents and how to interact.\n- Self-contained front-end (HTML + CSS + JavaScript), no external libraries required.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Layout adapts to smaller screens.\n  - Bars respond to touch as well as mouse.\n- **ACCESSIBLE**:\n  - Bars are keyboard-focusable and activatable with Enter/Space.\n  - ARIA labels describing the action (e.g., “Click to see votes for apple”).\n\nSPECIFIC REQUIREMENTS:\n\nDataset and mapping\n- Use a fixed example dataset for clarity (numbers can be adjusted but should distinguish the most popular fruit). For example:\n  - Apple: 8 votes\n  - Banana: 6 votes\n  - Orange: 10 votes\n  - Grape: 4 votes\n  - Strawberry: 7 votes\n- Encode the vote count for each fruit as a **data attribute** on the bar container (e.g., `data-fruit=\"apple\"`, `data-votes=\"8\"`).\n- Set the bar height proportionally to the number of votes (e.g., as a percentage of the tallest bar). Example mapping:\n  - 10 votes → 100% height\n  - 8 votes → 80%\n  - 7 votes → 70%\n  - 6 votes → 60%\n  - 4 votes → 40%\n\nBar structure and layout\n- Main **chart container**:\n  - Contains multiple `.fruit-bar` items laid out horizontally.\n- Each `.fruit-bar` should include:\n  - `.fruit-info` block with emoji and text label.\n  - `.bar-container` with:\n    - `.bar` (the coloured vertical bar matching the fruit).\n    - `.vote-display` beneath or inside the bar area, initially showing `?`.\n- Bars should be visually distinct (different colours for each fruit).\n\nInteraction behaviour\n- Clicking/tapping a fruit bar should:\n  - Add a `clicked` style (e.g., slight border or background change) to show it’s been explored.\n  - Update the corresponding `.vote-display` text from `?` to the full text, e.g. `8 votes`.\n  - Play a short **click sound** using Web Audio API (with graceful fallback if unavailable).\n  - Apply a brief **clickPulse** animation (scale up/down) for immediate feedback.\n- Track which fruits have been clicked using an internal data structure (e.g., a Set of fruit IDs).\n- Once **all bars have been clicked**:\n  - After a short delay, reveal a **“Most Popular”** message area:\n    - Text like: “👑 Orange is the most popular!” (using the fruit with the largest vote count).\n    - A celebratory bounce or pulse animation on this message.\n  - Highlight the most popular bar with a pulsing animation.\n\nInstruction / progress feedback\n- A small **instructions panel** below or beside the chart with a paragraph that changes based on progress:\n  - Before any clicks: “👆 Click on any bar to see the number of votes!”\n  - After some bars clicked but not all: e.g., “Great! Click X more bars to see all votes!”\n  - After all bars clicked: “🎉 Excellent! You’ve explored all the data!”\n- Progress calculation: `clickedBars.size / totalBars * 100` (used only for messaging, no need for a visual progress bar unless desired).\n\nTooltip / header info\n- A tooltip element (e.g., at the top of the chart) containing:\n  - Title: “Favorite Fruits of Students”\n  - Brief description: “Click on the bars to see how many votes each fruit got!”\n- Tooltip behaviour:\n  - Appears when hovering over the main chart panel (desktop) after a short delay.\n  - Hides when the pointer leaves the chart area.\n  - On touch devices: show on touchstart for a couple of seconds, then fade out.\n\nAnimations and audio\n- Define CSS keyframe animations for:\n  - `clickPulse`: small scale up/down on click.\n  - `bounce`: bounce effect for the “Most Popular” message.\n  - `pulse`: gentle pulsing highlight on the winning bar.\n- Implement a simple click sound via Web Audio API:\n  - Create `AudioContext`, oscillator, and gain node.\n  - Short blip that ramps down quickly.\n  - Catch errors silently if audio is not available or blocked.\n\nAccessibility and keyboard support\n- Each `.fruit-bar`:\n  - Should have `tabindex=\"0\"` so it can be focused via keyboard.\n  - `role=\"button\"` and `aria-label` like “Click to see votes for apple”.\n- Global `keydown` handler:\n  - When Enter or Space is pressed and a `.fruit-bar` has focus, trigger the same behaviour as click (including vote reveal and animations).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Read a simple bar chart and relate bar height to frequency (number of votes).\n  - Identify which category (fruit) has the greatest number of votes.\n  - Recognise that data can be represented visually and explored interactively.\n- The interactive should encourage **exploratory data analysis** by clicking all bars and then noticing the most popular fruit.\n\nINTERACTION FEATURES TO INCLUDE:\n- Click/tap and keyboard interactions on bars.\n- Animated feedback and simple audio cues for engagement.\n- Dynamic instructions that respond to user progress.\n- Automatic reveal of the most popular category once all data has been explored.\n- Tooltip that contextualises the chart and guides interaction.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Favorite Fruits Bar Chart.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Favorite Fruits Bar Chart_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Fence & Frame Shop - Perimeter Calculator Game",
    "title": "Fence & Frame Shop - Perimeter Calculator Game",
    "folder": "Fence & Frame Shop - Perimeter Calculator Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Fence & Frame Shop - Perimeter Calculator Game.html",
    "modifiedTime": "2025-12-21T13:27:05.133926",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Fence & Frame Shop - Perimeter Calculator Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Fence & Frame Shop - Perimeter Calculator Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Fence & Frame Shop - Perimeter Calculator Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Fence & Frame Shop - Perimeter Calculator Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Fence & Frame Shop - Perimeter Calculator Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Fender Rhodes Electronic Effects Simulator",
    "title": "Fender Rhodes Electronic Effects Simulator",
    "folder": "Fender Rhodes Electronic Effects Simulator",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Fender Rhodes Electronic Effects Simulator.html",
    "modifiedTime": "2026-02-19T21:29:12.397050",
    "topic": null,
    "gradeLevel": null,
    "subject": "Music",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Fender Rhodes Electronic Effects Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Fender Rhodes Electronic Effects Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Fire Investigator's Case",
    "title": "Fire Investigator's Case",
    "folder": "Fire Investigator's Case",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Fire Investigator's Case.html",
    "modifiedTime": "2025-12-21T13:27:06.209689",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Fire Investigator's Case\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Fire Investigator's Case\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Fire Investigator's Case\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Fire Investigator's Case.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Fire Investigator's Case_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Fire Investigator's Case 2",
    "title": "Fire Investigator's Case 2",
    "folder": "Fire Investigator's Case 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Fire Investigator's Case 2.html",
    "modifiedTime": "2025-12-21T13:27:07.015307",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Fire Investigator's Case 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Fire Investigator's Case 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Fire Investigator's Case 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Fire Investigator's Case 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Fire Investigator's Case 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Fire Safety Adventure",
    "title": "Fire Safety Adventure",
    "folder": "Fire Safety Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Fire Safety Adventure.html",
    "modifiedTime": "2026-02-19T21:29:54.596729",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Fire Safety Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Fire Safety Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Fire Safety Detective Adventure",
    "title": "Fire Safety Detective Adventure",
    "folder": "Fire Safety Detective Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Fire Safety Detective Adventure.html",
    "modifiedTime": "2026-02-19T21:30:23.249765",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Fire Safety Detective Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Fire Safety Detective Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Food Tests Virtual Lab",
    "title": "Food Tests Virtual Lab",
    "folder": "Food Tests Virtual Lab",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Food Tests Virtual Lab.html",
    "modifiedTime": "2025-12-21T13:27:06.345595",
    "topic": null,
    "gradeLevel": "Secondary 2",
    "subject": null,
    "hasPrompt": true,
    "promptText": "By Lydia\nLearning Objectives: \nStudents will be able to describe and carry out tests for:\n\nstarch (iodine in potassium iodide solution)\nreducing sugars (Benedict’s solution)\nprotein (biuret test)\nfats (ethanol emulsion)\n \n \nInteractive Prompt:\nI want to design a simulation interactive for my students.\n\n\nGrade level: Secondary 2\n\n\nStudent readiness level: Mixed Abilities\n\n\nThe simulation is based on: conducting food tests to identify the presence of starch, reducing sugars, protein, and fats in different food samples.\n\n\nThe objective of the simulation is to: help students describe and carry out the key food tests — iodine test for starch, Benedict’s test for reducing sugars, Biuret test for protein, and ethanol emulsion test for fats — and interpret colour changes or observations to conclude which nutrients are present.\n\n\nWhile using the simulation, students should experience: selecting different liquid food substances from a rack, transferring them into test tubes with a dropper, adding the appropriate reagents, and observing the reactions. They should see realistic colour changes or emulsions forming, learn safe and systematic laboratory procedures, and infer results through visual cues and feedback.\n\n\nThe interface should include:\n\n\nA virtual lab bench with labelled reagent bottles (Iodine solution, Benedict’s solution, Biuret reagent, Ethanol, Water).\n\n\nA rack of test substances (e.g. starch solution, glucose solution, egg white solution, oil, unknown mixtures).\n\n\nDroppers or pipettes for transferring small amounts of substances into clean test tubes.\n\n\nAction buttons such as Add Reagent, Heat in Water Bath (for Benedict’s test), Shake, and Observe.\n\n\nVisual indicators of results, e.g. blue-black colour for starch, brick-red precipitate for reducing sugars, violet colour for protein, white emulsion for fats.\n\n\nFeedback or result summary panel where students record observations and conclusions for each nutrient test.\n\n\nReset or replay button to repeat tests with different samples.\n\n\nOptional hint or help icon explaining reagent purpose or safety reminders.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Food Tests Virtual Lab.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Food Tests Virtual Lab_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Food Types and Digestion Pathways",
    "title": "Food Types and Digestion Pathways",
    "folder": "Food Types and Digestion Pathways",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Food Types and Digestion Pathways.html",
    "modifiedTime": "2025-12-21T13:27:04.523951",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "By Cindy\n“Food Types and Digestion Pathways”\nObjective:\nExplore how different types of food go through different digestive pathways based on their composition and surface area.\n\nInstructions:\n\nChoose a Food Type: Pick a food (e.g., fruit, vegetables, proteins, grains).\n\nPrepare the Food: Slice, chop, or mash to create different surface areas.\n\nAdd Enzymes: Choose the enzyme type best suited for that food.\n\nAmylase (carbohydrates)\n\nProtease (proteins)\n\nLipase (fats)\n\nObserve how the enzymes break down food differently in various pathways (e.g., starch digestion with amylase, fat digestion with lipase).\n\nLearning Goal:\nStudents will understand how different food types require different enzymatic pathways for digestion, and how surface area influences these processes",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Food Types and Digestion Pathways.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Food Types and Digestion Pathways_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Food Web Builder - Level 1",
    "title": "Food Web Builder - Level 1",
    "folder": "Food Web Builder - Level 1",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Food Web Builder - Level 1.html",
    "modifiedTime": "2025-12-21T13:27:03.148449",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Food Web Builder - Level 1\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Food Web Builder - Level 1\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Food Web Builder - Level 1\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Food Web Builder - Level 1.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Food Web Builder - Level 1_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Food Web Ecosystem Interactive",
    "title": "Food Web Ecosystem Interactive",
    "folder": "Food Web Ecosystem Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Food Web Ecosystem Interactive.html",
    "modifiedTime": "2025-12-21T13:27:08.166474",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Food Web Ecosystem Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Food Web Ecosystem Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Food Web Ecosystem Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Food Web Ecosystem Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Food Web Ecosystem Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Function and Derivative Explorer",
    "title": "Function and Derivative Explorer",
    "folder": "Function and Derivative Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Function and Derivative Explorer.html",
    "modifiedTime": "2025-12-21T13:27:01.995263",
    "topic": null,
    "gradeLevel": "Secondary 3 additional mathematics",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "By Nicole Ng\nI want to design a graph visualisation interactive for my students. The graph is f(x), and another graph is right below it, on a different axes, showing the derivative of f(x).  \n\nGrade level: Secondary 3 additional mathematics \n\nStudent readiness level: mixed abilities \n\nThe graph visualisation focuses on: exploring the derivative of functions\n\nThe objective of the visualisation is to: explore the effects of changing parameters in functions\n\nWhile exploring the graphs, students should experience: [adjusting sliders to change function parameters, plotting points by clicking, seeing instant visual feedback when equations change\"]\n\nThe interface should include: coordinate grid with adjustable scale, sliders to modify function parameters, input boxes for custom equations, zoom and pan controls, toggle buttons to show/hide different functions\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Function and Derivative Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Function and Derivative Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Function Graph Explorer",
    "title": "Function Graph Explorer",
    "folder": "Function Graph Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Function Graph Explorer.html",
    "modifiedTime": "2025-12-21T13:27:00.800091",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Function Graph Explorer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Function Graph Explorer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Function Graph Explorer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Function Graph Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Function Graph Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Geometric Distribution Simulation",
    "title": "Geometric Distribution Simulation",
    "folder": "Geometric Distribution Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Geometric Distribution Simulation.html",
    "modifiedTime": "2025-12-21T13:27:01.291318",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "By Wen Jun\nLearning Objectives: Discovering the memoryless property for Geometric Distributions\n \nInteractive Prompt:  \n \n[Prompt generated using ChatGPT]\nSimulate two players, Alex and Ben, rolling a fair die until they get their first 6.\n\n \nAlex is starting fresh.\n\nBen has already rolled 10 times without success.\n\n \nLet X X be the number of rolls until the first 6 appears, X tilde operator text Geometric end text not stretchy left parenthesis p equals 1 over 6 not stretchy right parenthesis X ∼  Geometric(p =    6   1​  ).\nRun many trials to find how many rolls each player needs.\nPlot histograms for Alex’s total rolls (X subscript A X A​ ) and Ben’s additional rolls after 10 failures (X subscript B minus 10 X B​  −  10).\n\n \nGoal:\nShow that both distributions are the same — the probability of success on the next roll is always 1 over 6   6   1​  , no matter how many times you’ve already failed.\n\n \nKey Interaction:\n\n \nAdjust number of past failures (slider).\n\nRun 1 or 1000 simulations.\n\nCompare histograms of X subscript A X A​  and X subscript B minus s X B​  −  s.\n\nDisplay empirical probability of success each roll.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Geometric Distribution Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Geometric Distribution Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Gorbachev's Dilemma_ Soviet Reform Simulator",
    "title": "Gorbachev's Dilemma  Soviet Reform Simulator",
    "folder": "Gorbachev's Dilemma_ Soviet Reform Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Gorbachev's Dilemma_ Soviet Reform Simulator.html",
    "modifiedTime": "2025-12-21T13:27:06.920305",
    "topic": null,
    "gradeLevel": "Sec 4",
    "subject": "Character & Citizenship Education",
    "hasPrompt": true,
    "promptText": "By Timotty\nGorbachev's Dilemma: End of an Era\nLearning objectives:\n\nDeepen Historical Understanding:\nConceptual understanding: causation, historical significance, historical empathy\nUnderstanding the Soviet collapse, reform complications, and complexity of international relations\n \n\nDevelop Values and Dispositions:\nSound decision-making\nConsidering multiple perspectives\nCritical and adaptive thinking, civic literacy\n \n\nI want to design a game-based learning interactive for my students.\n\nGrade level: Sec 4\n\nStudent readiness level: mixed abilities\n\nThe game acts as a gamemaster that presents 3 multiple-choice options for 8 sequential scenarios\n\nThe objective of the game is to: Understanding the Soviet collapse, reform complications, and complexity of international relations. \n\n \n\nThe interactive is to guide students, who are role playing as Gorbachev, through Gorbachev's reform challenges while tracking four key metrics: Unity, Economy, Power, and International Relations.\n\n1. INITIAL SETUP\n\nGive a short preamble to introduce the game, then present game options:\n\n- Length: Short (5 events) or Long (8 events)\n\nOnly after choosing the length, explain the objectives of the game without revealing exact the win / loss conditions. Check if player needs clarification. Then display the following:\n\n- Starting conditions: All meters begin at Concerning (Yellow - 5)\n\n- Display initial meter status in the bottom right corner using this format:\n\nCURRENT STATUS:\n\nUnity: [Level + Colour symbol] (5/10)\n\nEconomy: [Level + Colour symbol] (5/10)\n\nPower: [Level + Colour symbol] (5/10)\n\nInternational: [Level + Colour symbol] (5/10)\n\n2. EACH ROUND STRUCTURE\n\nPresent in this order:\n\n1. Current situation/crisis (2-3 sentences)\n\n2. Three clear options [from the knowledge base]:\n\n- Conservative option (slow changes)\n\n- Moderate option (balanced reform)\n\n- Radical option (dramatic change)\n\n3. For each option, show:\n\n- Action description [based on knowledge base]\n\n4. After player choice, provide:\n\n- Pravda headline\n\n- International media reaction\n\n- Citizen/official responses (2-3 perspectives)\n\n- Updated meter values\n\n3. TRACKING SYSTEM\n\nMonitor and update:\n\n- Meter levels (1-10 scale)\n\n- Crisis triggers (any meter reaching Red/1-2)\n\n- Victory conditions:\n\n* \"Reformed Union\": All meters at Stable (Green). \n\n* \"Controlled Transition\": 3/4 meters at Stable\n\n- Loss condition: Any meter reaching Crisis (Red)\n\n- Game ends once a victory / loss condition has been met, or the end of all rounds.\n\n \n\n \n\nRESPONSE STYLE:\n\n• Use period-appropriate terminology\n\n• Include simple Soviet/Russian phrases occasionally \n\n• Write in an urgent but accessible tone\n\n• Address player as \"Comrade General Secretary\"\n\n• Present clear cause-effect relationships\n\n• Maintain historical plausibility\n\n \n\n• Do not reveal actual historically accurate decisions to the players during the gameplay\n\n \n\nHISTORICAL AUTHENTICITY:\n\n• Reference real events and figures\n\n• Use actual policy names (Perestroika, Glasnost)\n\n• Include authentic locations and organizations\n\n• Create plausible but not deterministic outcomes\n\nPRESENTATION\n\n- Always show the colour symbol emoji (not word of the colour) after when the level is being mentioned\n\n- Don't use actual Russian, just used anglicised Latin spellings of the Russian words",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Gorbachev's Dilemma_ Soviet Reform Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Gorbachev's Dilemma_ Soviet Reform Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Harmony Heroes_ Singapore's Unity Quest",
    "title": "Harmony Heroes  Singapore's Unity Quest",
    "folder": "Harmony Heroes_ Singapore's Unity Quest",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Harmony Heroes_ Singapore's Unity Quest.html",
    "modifiedTime": "2026-02-19T21:30:57.567998",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Harmony Heroes_ Singapore's Unity Quest.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Harmony Heroes_ Singapore's Unity Quest_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Hawker Culture Detective 文化小侦探",
    "title": "Hawker Culture Detective 文化小侦探",
    "folder": "Hawker Culture Detective 文化小侦探",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Hawker Culture Detective 文化小侦探.html",
    "modifiedTime": "2025-12-21T13:27:05.291291",
    "topic": null,
    "gradeLevel": "Primary 5–6",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Francesca\nHawker Culture Detective 文化小侦探\nI want to design a game-based learning interactive for my students.\n\nGrade level: Primary 5–6\n\nStudent readiness level: Mixed Abilities\n\nThe game is based on: A detective-style cultural exploration called “Hawker Culture Detective 文化小侦探.” Students explore a virtual hawker centre featuring Chinese, Malay, Indian, and Fusion stalls. They collect clues by making polite Chinese dialogues and cultural choices to solve the mystery: “Why is hawker culture central to Singapore’s shared identity?”\n\nThe objective of the game is to:\n\nHelp students describe the origins, diversity, and social role of Singapore’s Hawker Culture in Chinese.\n\nCultivate appreciation for multicultural harmony and respectful interactions.\n\nStrengthen vocabulary and sentence structures related to food, customs, and social etiquette.\n\nGuide reflection on why preserving Hawker Culture is important for national identity.\n\nWhile playing the game, students should experience:\n\nMaking meaningful choices that affect story progression (choosing stalls, responding politely, identifying accurate cultural facts).\n\nReceiving immediate feedback with cultural explanations and hints after incorrect attempts.\n\nBuilding dialogues in Chinese using sentence tiles or multiple-choice responses with English tooltips.\n\nCompleting a final quiz (5–8 MCQs + 1 short Chinese reflection) to consolidate learning.\n\nThe interface should include:\n\nA clickable map hub with four stalls and a Reflection Corner (unlocked after collecting three or more clues).\n\nDialogue boxes (Chinese text with English tooltips), decision buttons, and progress trackers (clues, badges, and score).\n\nOptional timer, hint button, reset progress, and export results (JSON) options.\n\nAccessibility features such as keyboard navigation, focus outlines, alt text, high-contrast mode, and adjustable text size.\n\nA vocabulary bank (CN→EN hover) with key terms: 鸡饭、叻沙、椰浆饭、沙爹、印度煎饼、清真、传统、多元、融合、文化遗产、社会凝聚、礼貌用语.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Hawker Culture Detective 文化小侦探.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Hawker Culture Detective 文化小侦探_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Health Hero_ Nutrition Game",
    "title": "Health Hero  Nutrition Game",
    "folder": "Health Hero_ Nutrition Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Health Hero_ Nutrition Game.html",
    "modifiedTime": "2025-12-21T13:27:02.236479",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Health Hero_ Nutrition Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Health Hero_ Nutrition Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Health Hero_ Nutrition Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Health Hero_ Nutrition Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Health Hero_ Nutrition Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Hygiene Hero Café",
    "title": "Hygiene Hero Café",
    "folder": "Hygiene Hero Café",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Hygiene Hero Café.html",
    "modifiedTime": "2025-12-21T13:27:05.746619",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Hygiene Hero Café\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Hygiene Hero Café\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Hygiene Hero Café\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Hygiene Hero Café.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Hygiene Hero Café_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Idiom_Translation_Fun_—_习语中英互动（TTS_图片_特效）_20251112",
    "title": "Idiom Translation Fun — 习语中英互动（TTS 图片 特效） 20251112",
    "folder": "Idiom_Translation_Fun_—_习语中英互动（TTS_图片_特效）_20251112",
    "folderPath": "Idiom_Translation_Fun_—_习语中英互动（TTS_图片_特效）_20251112",
    "indexPath": "Idiom_Translation_Fun_—_习语中英互动（TTS_图片_特效）_20251112/index.html",
    "modifiedTime": "2025-11-12T05:28:44",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chinese Language",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Idiom_Translation_Fun_—_习语中英互动（TTS_图片_特效）_20251112.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116",
    "title": "Idiom Translation Fun — 习语中英互动（TTS+图片+特效） 20251116",
    "folder": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116",
    "folderPath": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116",
    "indexPath": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116/index.html",
    "modifiedTime": "2025-12-21T13:27:32.026494",
    "topic": null,
    "gradeLevel": "Primary 5–6",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "ACP Prompt: by Ms Lau Sze Hui - The Dreamcatch\nTaken from \nhttps://vle.learning.moe.edu.sg/class-group/view/fb19f5f8-198c-4f8d-b1fd-1910dc16d40a?tab=forum&typeUuid=3ce7a541-e9da-4c52-89f8-0e6bc2df3d41&actionType=TOPIC\n\nI want to design a game-based learning interactive for my students.\nGrade level: Primary 5–6\nStudent readiness level: Mixed Abilities\nThe game is based on: matching and translating English idioms into their equivalent Chinese meanings through a fun, self-paced quiz.\nThe objective of the game is to: help students understand common idiomatic expressions, connect them with similar Chinese sayings, and strengthen vocabulary, cultural awareness, and inferential skills in both languages.\nWhile playing the game, students should experience: immediate feedback after each choice, encouragement through sound effects and confetti celebrations, and self-reflection by reviewing explanations at the end of the quiz.\nThe interface should include: a score counter, visual illustrations that change with each question, progress bar, instant feedback highlighting, celebration effects for correct answers, and a review page summarizing performance and learning points.",
    "hasZip": true,
    "zipPath": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116.zip",
    "hasPromptImage": true,
    "promptImagePath": "Idiom_Translation_Fun_—_习语中英互动（TTS+图片+特效）_20251116/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Imbuhan meN- Interactive Assessment",
    "title": "Imbuhan meN- Interactive Assessment",
    "folder": "Imbuhan meN- Interactive Assessment",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Imbuhan meN- Interactive Assessment.html",
    "modifiedTime": "2025-12-21T13:27:04.657794",
    "topic": null,
    "gradeLevel": null,
    "subject": "Malay Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Imbuhan meN- Interactive Assessment\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Imbuhan meN- Interactive Assessment\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Imbuhan meN- Interactive Assessment\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Imbuhan meN- Interactive Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Imbuhan meN- Interactive Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Impairment_loss_on_TR",
    "title": "Impairment loss on TR",
    "folder": "Impairment_loss_on_TR",
    "folderPath": "Impairment_loss_on_TR",
    "indexPath": "Impairment_loss_on_TR/index.html",
    "modifiedTime": "2025-11-07T13:28:30",
    "topic": null,
    "gradeLevel": null,
    "subject": "Principles of Accounts",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Impairment_loss_on_TR.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251030124920",
    "title": "Interactive 20251030124920",
    "folder": "Interactive_20251030124920",
    "folderPath": "Interactive_20251030124920",
    "indexPath": "Interactive_20251030124920/index.html",
    "modifiedTime": "2025-10-30T04:51:04",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251030124920.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251031015830",
    "title": "Interactive 20251031015830",
    "folder": "Interactive_20251031015830",
    "folderPath": "Interactive_20251031015830",
    "indexPath": "Interactive_20251031015830/index.html",
    "modifiedTime": "2025-10-31T06:00:32",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chinese Language",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251031015830.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103011536",
    "title": "Interactive 20251103011536",
    "folder": "Interactive_20251103011536",
    "folderPath": "Interactive_20251103011536",
    "indexPath": "Interactive_20251103011536/index.html",
    "modifiedTime": "2025-11-03T05:14:48",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103011536.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103012005",
    "title": "Interactive 20251103012005",
    "folder": "Interactive_20251103012005",
    "folderPath": "Interactive_20251103012005",
    "indexPath": "Interactive_20251103012005/index.html",
    "modifiedTime": "2025-11-03T05:19:26",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103012005.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103012952",
    "title": "Interactive 20251103012952",
    "folder": "Interactive_20251103012952",
    "folderPath": "Interactive_20251103012952",
    "indexPath": "Interactive_20251103012952/index.html",
    "modifiedTime": "2025-11-03T05:25:50",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103012952.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103024912",
    "title": "Interactive 20251103024912",
    "folder": "Interactive_20251103024912",
    "folderPath": "Interactive_20251103024912",
    "indexPath": "Interactive_20251103024912/index.html",
    "modifiedTime": "2025-11-03T06:47:42",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103024912.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103025209",
    "title": "Interactive 20251103025209",
    "folder": "Interactive_20251103025209",
    "folderPath": "Interactive_20251103025209",
    "indexPath": "Interactive_20251103025209/index.html",
    "modifiedTime": "2025-11-03T06:52:08",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103025209.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103031221",
    "title": "Interactive 20251103031221",
    "folder": "Interactive_20251103031221",
    "folderPath": "Interactive_20251103031221",
    "indexPath": "Interactive_20251103031221/index.html",
    "modifiedTime": "2025-11-03T07:12:04",
    "topic": null,
    "gradeLevel": null,
    "subject": "Principles of Accounts",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103031221.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103033647",
    "title": "Interactive 20251103033647",
    "folder": "Interactive_20251103033647",
    "folderPath": "Interactive_20251103033647",
    "indexPath": "Interactive_20251103033647/index.html",
    "modifiedTime": "2025-11-03T07:11:06",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103033647.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103035352",
    "title": "Interactive 20251103035352",
    "folder": "Interactive_20251103035352",
    "folderPath": "Interactive_20251103035352",
    "indexPath": "Interactive_20251103035352/index.html",
    "modifiedTime": "2025-11-03T07:52:14",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103035352.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103041041",
    "title": "Interactive 20251103041041",
    "folder": "Interactive_20251103041041",
    "folderPath": "Interactive_20251103041041",
    "indexPath": "Interactive_20251103041041/index.html",
    "modifiedTime": "2025-11-03T08:10:42",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103041041.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103092212",
    "title": "Interactive 20251103092212",
    "folder": "Interactive_20251103092212",
    "folderPath": "Interactive_20251103092212",
    "indexPath": "Interactive_20251103092212/index.html",
    "modifiedTime": "2025-11-03T01:19:02",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103092212.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251103113916",
    "title": "Interactive 20251103113916",
    "folder": "Interactive_20251103113916",
    "folderPath": "Interactive_20251103113916",
    "indexPath": "Interactive_20251103113916/index.html",
    "modifiedTime": "2025-11-03T03:37:52",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251103113916.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251107041019",
    "title": "Interactive 20251107041019",
    "folder": "Interactive_20251107041019",
    "folderPath": "Interactive_20251107041019",
    "indexPath": "Interactive_20251107041019/index.html",
    "modifiedTime": "2025-11-07T08:09:48",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251107041019.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251113105842",
    "title": "Interactive 20251113105842",
    "folder": "Interactive_20251113105842",
    "folderPath": "Interactive_20251113105842",
    "indexPath": "Interactive_20251113105842/index.html",
    "modifiedTime": "2025-11-13T14:58:38",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251113105842.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251114090525",
    "title": "Interactive 20251114090525",
    "folder": "Interactive_20251114090525",
    "folderPath": "Interactive_20251114090525",
    "indexPath": "Interactive_20251114090525/index.html",
    "modifiedTime": "2025-12-21T13:26:55.697431",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251114090525.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Interactive_20251114092736",
    "title": "Interactive 20251114092736",
    "folder": "Interactive_20251114092736",
    "folderPath": "Interactive_20251114092736",
    "indexPath": "Interactive_20251114092736/index.html",
    "modifiedTime": "2025-12-21T13:26:56.585579",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Interactive_20251114092736.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Interview Quest_ Prepare for Success",
    "title": "Interview Quest  Prepare for Success",
    "folder": "Interview Quest_ Prepare for Success",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Interview Quest_ Prepare for Success.html",
    "modifiedTime": "2026-02-19T21:31:54.933927",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Interview Quest_ Prepare for Success.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Interview Quest_ Prepare for Success_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\K-Nearest Neighbor Algorithm Visualization",
    "title": "K-Nearest Neighbor Algorithm Visualization",
    "folder": "K-Nearest Neighbor Algorithm Visualization",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/K-Nearest Neighbor Algorithm Visualization.html",
    "modifiedTime": "2025-12-21T13:27:06.416593",
    "topic": null,
    "gradeLevel": "Secondary 3",
    "subject": "Computing",
    "hasPrompt": true,
    "promptText": "By Zuo Sheng\nGrade level: Secondary 3\nStudent readiness level: Mixed Abilities\nThe simulation is based on: The k nearest neighbor algorithm.\nThe objective of the simulation is to: \nAllow students learn how the k-nearest neighbor algorithm works by visualising the effect of applying the algorithm and adjusting different parameters and seeing the data points labeled with different colours in a 2-dimensional plane or 3-dimensional plane.\nWhile using the simulation, students should experience: \nchanging the parameters including the k value, the categorical values and the number of data points. Entering a new test data point to perform classification.\n\nThe interface should include: \nSliders or input boxes for parameter adjustments, rescaling and rotation of the various axis, reset button and button to randomize the data points and labels.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/K-Nearest Neighbor Algorithm Visualization.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/K-Nearest Neighbor Algorithm Visualization_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Köppen Climate Graph Visualizer",
    "title": "Köppen Climate Graph Visualizer",
    "folder": "Köppen Climate Graph Visualizer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Köppen Climate Graph Visualizer.html",
    "modifiedTime": "2025-12-21T13:27:08.308927",
    "topic": null,
    "gradeLevel": "Secondary 3 (Singapore)",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Nicholas\n\nHow do Different Places Experience Different Climate? Comparing Climate Types\nLearning Objectives: \nIdentify different climate types of various named locations\nDescribe climate characteristics of temperature and rainfall using a climograph\nRead, interpret and describe temperature and rainfall patterns, referencing the appropriate y- and x-axis in a graph\nCompare the climate characteristics of different named locations in the world using a climograph\n \n \nInteractive Prompt: \nGrade level: Secondary 3 (Singapore)\nReadiness: Mixed abilities\n\nTopic & scope: Comparing Köppen–Geiger climate types across locations using climate graphs (Temperature line °C + Precipitation bars mm). Students switch reference periods (e.g., 1980–2010 vs 1990–2020) and compare locations.\n\nCore learning objectives (student-facing):\n\nIdentify and compare Köppen–Geiger climate types for selected locations.\n\nRead climate graphs (axes, units, seasonality, ranges).\n\nDetect changes across periods and explain differences.\n\nConnect locations to extreme weather events via concise info cards.\n\nEssential features (graphs only):\n\nGraph panel as primary view; no world map.\n\nSelect locations (search + pick list). Compare up to 2 locations at once.\n\nCompare modes:\n\nOverlay: both locations on one chart (distinct labels; avoid color dependence—use line styles/markers).\n\nSide-by-Side: two charts aligned and scaled for fair comparison.\n\nReference-period control:\n\nToggle/slider between 1980–2010 and 1990–2020 (allow future presets).\n\nOptional Play to animate between periods.\n\nClimate graph spec (per location):\n\nTemperature: smooth line (°C, left y-axis).\n\nPrecipitation: vertical bars (mm, right y-axis).\n\nX-axis: Jan → Dec; clear tick labels.\n\nY-axes: auto-scale; show units; subtle gridlines; zero baselines visible.\n\nTitle: Location name + climate code centered above the graph (e.g., “Singapore — Af”).\n\nHover tooltips: Month, Temp (°C), Precip (mm); when overlaying two locations, include location tag.\n\nLegend: Temp (°C) / Precip (mm); if overlaying, show both location names.\n\nExtreme event info (no map):\n\nClickable location name (above graph or in selection list) opens an Event Card with:\n\nEvent type (heatwave/flood/storm/drought etc.), magnitude label (e.g., “24-h rain 310 mm”),\n\nPlace & country, date & local time, brief description, casualties (if available).\n\nEvent Card provides “Focus months” shortcut to highlight relevant months on the climate graph.\n\nFilters & search:\n\nFilter locations by Köppen code (multi-select), region/continent, hemisphere.\n\nSearch by location name.\n\nAccessibility & UX:\n\nKeyboard-navigable controls; ARIA labels for axes and toggles; high-contrast option.\n\nAvoid color-only encoding (use patterns/markers/line styles).\n\nResponsive layout (desktop/tablet).\n\nPerformance: lazy-load datasets per selection.\n\nExport & teacher aids:\n\nExport PNG of the current graph(s) and CSV of monthly data for the chosen period(s).\n\nOptional guided prompts (Core/Stretch/Challenge) and Reset to defaults.\n\nImplementation notes:\n\nValidate arrays have 12 months; handle missing data gracefully with “no data” hints.\n\nFor Overlay mode, offset precipitation bars slightly or use Side-by-Side to avoid occlusion.\n\nKeep fonts/labels crisp; ensure units are always visible.\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/cc9680ca-c034-44e9-aa3f-945676edc60d/section/33560/activity/33562?pageNo=1",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Köppen Climate Graph Visualizer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Köppen Climate Graph Visualizer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Lateral Thinking Adventure",
    "title": "Lateral Thinking Adventure",
    "folder": "Lateral Thinking Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Lateral Thinking Adventure.html",
    "modifiedTime": "2026-02-19T21:32:28.569061",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Lateral Thinking Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Lateral Thinking Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Law_of_Reflection_Simulation_20251103 simple",
    "title": "Law of Reflection Simulation 20251103 simple",
    "folder": "Law_of_Reflection_Simulation_20251103 simple",
    "folderPath": "Law_of_Reflection_Simulation_20251103 simple",
    "indexPath": "Law_of_Reflection_Simulation_20251103 simple/index.html",
    "modifiedTime": "2025-12-21T13:26:54.816410",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Law of Reflection Simulation.\n\nTARGET AUDIENCE: Secondary 1-2 - Physics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Law of Reflection Simulation\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Law_of_Reflection_Simulation_20251103 simple.zip",
    "hasPromptImage": true,
    "promptImagePath": "Law_of_Reflection_Simulation_20251103 simple/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough",
    "title": "Law of Reflection Simulation 20251103PlaneCurvedRough",
    "folder": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough",
    "folderPath": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough",
    "indexPath": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough/index.html",
    "modifiedTime": "2025-12-21T13:26:54.980247",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Law of Reflection Simulation.\n\nTARGET AUDIENCE: Secondary 1-2 - Physics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Law of Reflection Simulation\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough.zip",
    "hasPromptImage": true,
    "promptImagePath": "Law_of_Reflection_Simulation_20251103PlaneCurvedRough/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Law_of_Reflection_Simulation_20251114",
    "title": "Law of Reflection Simulation 20251114",
    "folder": "Law_of_Reflection_Simulation_20251114",
    "folderPath": "Law_of_Reflection_Simulation_20251114",
    "indexPath": "Law_of_Reflection_Simulation_20251114/index.html",
    "modifiedTime": "2025-12-21T13:26:55.319265",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Law of Reflection Simulation.\n\nTARGET AUDIENCE: Secondary 3-4 - Physics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\n- Clear variable controls with sensible ranges and units\n- Contextual tooltips/glossary for symbols/terms\n- Preset scenarios and a Reset to defaults\n- Vector arrows, numeric readouts, and optional air resistance toggle\n- Design an interactive virtual lab on the Law of Reflection, focused on exploring the relationship between angle of incidence and angle of reflection (i = r).\n- Show a clear, labelled diagram with a flat horizontal mirror, a dashed normal line at the point of incidence, an incident ray, and a reflected ray.\n- Clearly label and continuously display the angle of incidence (i) and angle of reflection (r) in degrees to one decimal place, both measured from the normal.\n- As the user adjusts the incident ray, update both incident and reflected rays dynamically so that the reflected ray always obeys i = r.\n- Provide an \"Angle of Incidence\" slider with range 0.0° to 90.0° and 0.1° step size to control the incident ray.\n- Include a \"Record\" button that logs the current (i, r) pair into a data table, with all values stored to one decimal place.\n- Display a data table with two columns: Angle of Incidence i (°) and Angle of Reflection r (°), supporting up to seven recorded rows.\n- Include a \"Plot Graph\" button that, once data exists, generates a graph with i on the x-axis and r on the y-axis, shown side-by-side with the table.\n- Ensure the plotted points lie on or very close to a straight line through the origin with slope ~1, visually confirming that i = r.\n- Provide a \"Reset\" button that clears the data table and graph and resets the angle of incidence to a default value (e.g., 45.0°).\n- Place the main control panel at the top of the diagram/plotting area to save vertical space, with additional explanatory text revealed using tooltips instead of long static text blocks.\n- Use clear, student-friendly language appropriate for science lessons, reinforcing the terms \"incident ray\", \"reflected ray\", \"normal\", and \"Law of Reflection\".\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Law of Reflection Simulation\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\n\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\n\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "Law_of_Reflection_Simulation_20251114.zip",
    "hasPromptImage": true,
    "promptImagePath": "Law_of_Reflection_Simulation_20251114/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\LED Room Designer - Perimeter Calculator",
    "title": "LED Room Designer - Perimeter Calculator",
    "folder": "LED Room Designer - Perimeter Calculator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/LED Room Designer - Perimeter Calculator.html",
    "modifiedTime": "2025-12-21T13:27:02.808266",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"LED Room Designer - Perimeter Calculator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"LED Room Designer - Perimeter Calculator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"LED Room Designer - Perimeter Calculator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/LED Room Designer - Perimeter Calculator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/LED Room Designer - Perimeter Calculator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Library of Lost Words",
    "title": "Library of Lost Words",
    "folder": "Library of Lost Words",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Library of Lost Words.html",
    "modifiedTime": "2025-12-21T13:27:03.908788",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Louis\nLibrary of Lost Words\nLearning Objectives:\n1) Increase typing speed (digital counterpart for W&R LO1)\n2) Build rich vocabulary knowledge (Vocab LO2)\nAttempt 6: Further modifications made to Attempt 5\n(Shortened sentences, randomisation of the order)\n \nPrompt:\nCreate an interactive game called Library of Lost Words, targeting Secondary 1 Low Progress learners.\n\n \n\nThe design should be simple, child-friendly, and fully functional within one HTML file. Use emoji, clear fonts, warm colors, and fantasy-themed visuals with 8-bit graphic style. Present these visual elements throughout the course of the game.\n\n \n\nPrepare a set of twenty words and sample sentences for this game.\n\n \n\nGame flow:\n\n1. The player explores a fantasy-themed interface (an ancient magical library). Begin with a simple cut scene displaying the sentence “The ancient Library of Lost Words trembles — you have just one minute to rescue as many glowing words as you can before its doors vanish into the mist forever!”.\n\n2. The system presents a new word, with four potential definitions (one correct and three incorrect). The order of presentation should be randomised with each attempt. Do not repeat words during the course of a game.\n\n3. The player guesses the meaning of the word by choosing the correct solution.\n\n4. After guessing, the system reveals the correct meaning.\n\n5. If the student has selected the correct meaning, the system shows a sentence (ten words or fewer) using the word that the player must then type out. The sentence should be fantasy-themed.\n\n6. The game measures and displays typing speed.\n\n7. Points or “word magic” are awarded for correct meanings and fast, accurate typing.\n\n8. Include soft background music or sound effects, animated transitions, and a progress tracker (like “Crystals Collected”).\n\n9. Game ends after 1 minute. End with a simple cut scene displaying the sentence “The Library has faded into silence, but the words you saved now shine forever in the Book of Knowledge.”\n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/c6974630-02f8-4ca1-8293-c3b578f6b236/section/33572/activity/33574?pageNo=1\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Library of Lost Words.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Library of Lost Words_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Library of Lost Words 2",
    "title": "Library of Lost Words 2",
    "folder": "Library of Lost Words 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Library of Lost Words 2.html",
    "modifiedTime": "2025-12-21T13:27:03.241450",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Library of Lost Words 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Library of Lost Words 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Library of Lost Words 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Library of Lost Words 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Library of Lost Words 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Life_Cycle_Drag_&_Drop_Quiz_20251103",
    "title": "Life Cycle Drag & Drop Quiz 20251103",
    "folder": "Life_Cycle_Drag_&_Drop_Quiz_20251103",
    "folderPath": "Life_Cycle_Drag_&_Drop_Quiz_20251103",
    "indexPath": "Life_Cycle_Drag_&_Drop_Quiz_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:55.957563",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Life Cycle Drag & Drop Quiz.\n\nTARGET AUDIENCE: Primary 5-6 - Science (General)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Life Cycle Drag & Drop Quiz\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Life_Cycle_Drag_&_Drop_Quiz_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Life_Cycle_Drag_&_Drop_Quiz_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Life_Cycle_Drag_&_Drop_Quiz_20251103/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Life_Cycle_Drag_&_Drop_Quiz_20260225",
    "title": "Life Cycle Drag & Drop Quiz 20260225",
    "folder": "Life_Cycle_Drag_&_Drop_Quiz_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Life_Cycle_Drag_&_Drop_Quiz_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Life_Cycle_Drag_&_Drop_Quiz_20260225/index.html",
    "modifiedTime": "2026-02-25T13:33:36",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Prompt used to generate the above interactive\n \nUSER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about Life Cycle Drag & Drop Quiz.\nTARGET AUDIENCE: Primary 5-6 - Science (General)\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\n- Clear variable controls with sensible ranges and units\n- Contextual tooltips/glossary for symbols/terms\n- Preset scenarios and a Reset to defaults\n- Drag-and-drop stages into the correct sequence with immediate feedback\n- “Explain why” reflection prompts and common misconception notes (e.g., size vs age)\n- Teacher toggle to randomize organism variants and order\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Life Cycle Drag & Drop Quiz\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR QUIZ/GAME INTERACTIVES:\n- Implement a real-time analytics panel showing:\n  * Question number and text\n  * Correct answer\n  * Student's selected answer\n  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)\n  * Sequential log of all attempts to reveal misconception patterns\n- Display analytics in a clear, scrollable panel\n- Use Unicode symbols and color coding for visual clarity\n- Purpose: Allow teachers to identify student misconceptions and thinking patterns\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Life_Cycle_Drag_&_Drop_Quiz_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Life_Cycle_Drag_&_Drop_Quiz_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Light Intensity and Plant Growth Experiment",
    "title": "Light Intensity and Plant Growth Experiment",
    "folder": "Light Intensity and Plant Growth Experiment",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Light Intensity and Plant Growth Experiment.html",
    "modifiedTime": "2026-02-19T21:33:16.516846",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Light Intensity and Plant Growth Experiment.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Light Intensity and Plant Growth Experiment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Linear Equations Graph Visualizer",
    "title": "Linear Equations Graph Visualizer",
    "folder": "Linear Equations Graph Visualizer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Linear Equations Graph Visualizer.html",
    "modifiedTime": "2025-12-21T13:27:07.380482",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Linear Equations Graph Visualizer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Linear Equations Graph Visualizer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Linear Equations Graph Visualizer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Linear Equations Graph Visualizer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Linear Equations Graph Visualizer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Linear Function Explorer",
    "title": "Linear Function Explorer",
    "folder": "Linear Function Explorer",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Linear Function Explorer.html",
    "modifiedTime": "2025-12-21T13:26:57.782270",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Linear Function Explorer”** that lets students investigate how the slope (m) and y-intercept (c) in the equation **y = mx + c** affect the graph of a straight line.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary Mathematics (approx. ages 11–14)\n\nINTERACTIVE REQUIREMENTS:\n- A central **Cartesian coordinate grid** rendered on an HTML5 `<canvas>`.\n- Visualisation of a **single linear function** `y = mx + c` that updates in real time when parameters change.\n- User controls:\n  - Slider for **slope m** (e.g., from −5 to 5 with step 0.1).\n  - Slider for **y-intercept c** (e.g., from −10 to 10 with step 0.5).\n  - **Reset** button to return to a default line (e.g., `y = 1x + 0`).\n- Live displays:\n  - Current values of `m` and `c` beside each slider.\n  - Equation display overlay showing the current equation in simplified form (e.g., `y = x + 2`, `y = -1.5x - 3.0`).\n- Visual features on the graph:\n  - Grid lines.\n  - x- and y-axes with arrows and tick labels.\n  - The line for `y = mx + c` drawn clearly.\n  - A highlighted **y-intercept point** if it lies within the visible region, with coordinate label `(0, c)`.\n- An **info tooltip** that appears when hovering over the graph, giving brief instructions or tips; this tooltip can also show rotating educational tips.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Canvas resizes with the container or window.\n  - Sliders work smoothly with touch (visual feedback on touch start/end).\n\nSPECIFIC REQUIREMENTS:\n\nCanvas and coordinate system\n- The canvas should:\n  - Fill the available width of its container while keeping a reasonable aspect ratio.\n  - Adjust its internal width/height on window resize to maintain crisp drawing.\n- Coordinate system:\n  - Place the **origin at the centre** of the canvas.\n  - Use a fixed **grid size** (pixels per unit) that adapts to canvas size so that about ±10 units are visible in both directions.\n  - Draw:\n    - Light grey grid lines at each unit step.\n    - Darker axes (x and y) through the origin with arrowheads.\n- Axis labels:\n  - Numbers along x- and y-axes (e.g., from −10 to 10, skipping 0 at the origin).\n  - Label the axes with `x` and `y` near the arrowheads.\n\nLine plotting\n- Given **slope `m`** and **intercept `c`**:\n  - Compute the line’s y-values at the left and right edges of the canvas in coordinate units.\n  - Convert these to pixel coordinates using the origin and grid size.\n  - Draw a single line segment across the canvas representing the infinite line.\n- Style:\n  - Use a contrasting colour (e.g., red) and slightly thicker stroke so the line stands out.\n- Highlight y-intercept:\n  - Compute where the line crosses the y-axis (x = 0 → y = c).\n  - If this point is on-screen, draw a small filled circle (e.g., green) at that point and label it `(0, c)`.\n\nControls and displays\n- Slope slider:\n  - Range: at least from −5 to 5 with step size 0.1.\n  - Labeled “Slope (m)”.\n  - Display current value with one decimal place next to the label.\n  - Tooltip explaining “Slope controls steepness; positive slopes rise, negative slopes fall.”\n- Y-intercept slider:\n  - Range: at least from −10 to 10 with step size ∼0.5.\n  - Labeled “Y-intercept (c)”.\n  - Display value with one decimal place.\n  - Tooltip explaining that y-intercept is where the line crosses the y-axis.\n- Equation display:\n  - Text showing the current equation `y = mx + c` with formatting rules:\n    - If m = 1, show `y = x + ...`; if m = −1, show `y = -x + ...`.\n    - If c = 0, omit the + c term.\n    - If c > 0, show `+ c`; if c < 0, show `- |c|`.\n- Reset button:\n  - Resets slope and intercept to default (e.g. m = 1, c = 0).\n  - Brief visual feedback (e.g., button colour change and “Reset ✓” text) then returns to normal state.\n\nTooltips and educational tips\n- Info tooltip panel near the graph:\n  - On graph hover / mouseenter, show a short message (e.g., “Click and drag the sliders to see how the line changes!”); hide on mouseleave.\n  - Additionally, cycle through a list of **educational tips** every ~10 seconds when the tooltip is not currently visible, e.g.:\n    - “Try setting the slope to 0 – what happens to the line?”\n    - “Make the slope negative – notice how the line tilts the other way!”\n    - “The y-intercept is where the line crosses the y-axis.”\n    - “Steeper slopes make the line more vertical.”\n    - “When slope = 1, the line goes up 1 unit for every 1 unit right.”\n\nTouch and accessibility\n- Sliders must support touch:\n  - Prevent unintended scrolling/zooming when adjusting sliders.\n  - Provide subtle visual feedback on touch start/end (e.g., slight scale-up).\n- Keyboard accessibility:\n  - Add a handler such that when the **slope slider** has focus, pressing ↑/↓ adjusts the slope up/down by the slider step, updates the display, and redraws the graph.\n  - Optionally support a keyboard shortcut (e.g., Ctrl+R or Cmd+R) to trigger reset without reloading the entire page (prevent default browser refresh in that case).\n\nResponsive behaviour\n- On window resize:\n  - Recompute canvas dimensions and origin.\n  - Adjust grid size if necessary.\n  - Redraw grid, axes, labels, and line.\n- Ensure text and controls remain readable on smaller screens.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Understand visually what the **slope** of a linear function represents.\n  - Understand the role of the **y-intercept** in positioning the line.\n  - Relate the symbolic form `y = mx + c` to the graph of the function.\n  - Explore how changing `m` and `c` affects the line’s steepness and position.\n- The interactive should encourage **exploration** and **sense-making** rather than just static viewing.\n\nINTERACTION FEATURES TO INCLUDE:\n- Real-time updates of the graph as sliders move.\n- Clear display of numerical values and equation form.\n- Highlight of the y-intercept point for visual emphasis.\n- Tooltip and rotating tips to guide students’ exploration.\n- Reset control for returning to a standard reference line.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Linear Function Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Linear Function Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Literary Detective_ Uncover the Mystery",
    "title": "Literary Detective  Uncover the Mystery",
    "folder": "Literary Detective_ Uncover the Mystery",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Literary Detective_ Uncover the Mystery.html",
    "modifiedTime": "2026-02-19T21:33:55.727543",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Literary Detective_ Uncover the Mystery.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Literary Detective_ Uncover the Mystery_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Little Doctor's Clinic - A Local Medical Game",
    "title": "Little Doctor's Clinic - A Local Medical Game",
    "folder": "Little Doctor's Clinic - A Local Medical Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Little Doctor's Clinic - A Local Medical Game.html",
    "modifiedTime": "2025-12-21T13:27:02.753266",
    "topic": null,
    "gradeLevel": "Primary 5 or 6",
    "subject": "English Language",
    "hasPrompt": true,
    "promptText": "By Francesca\nGame Based《的地得 诊所》 — The “De-Clinic”\nLearning Objectives: \n \nBy the end of the lesson, students will be able to:\n\nIdentify and correct common errors in the use of 的 (de), 地 (di), and 得 (de) in Chinese sentences.\n\nExplain the function of each particle —\n\n的: used after adjectives or phrases to modify a noun (attributive);\n\n地: used before verbs to describe how an action is done (adverbial);\n\n得: used after verbs or adjectives to describe degree or result (complement).\n\nApply the correct particle when constructing or editing sentences in their own writing.\n\nDemonstrate grammatical awareness through a game-based diagnostic activity by making decisions, receiving feedback, and improving accuracy through practice.\n\nReflect on learning progress by identifying which particle they most often confuse and how to avoid the same error next time.\n\n \nInteractive Prompt: \n \nI want to design a game-based learning interactive for my students.\n\nGrade level: Primary 5 or 6\nStudent readiness level: Mixed Abilities\n\nThe game is based on:\nA mini doctor simulation where students act as junior doctors who diagnose sentences containing 的 / 地 / 得, then prescribe the correct character as the “medicine.” If students make repeated errors on a case, an Injection Check (a quick confirm question) appears before they can proceed.\n\nThe objective of the game is to:\n\nQuickly identify and correct misuse of 的 / 地 / 得.\n\nStrengthen intuition for modifier patterns through immediate feedback and micro-hints.\n\nConsolidate the core rules for 的 (attributive/nominalizer), 地 (adverbial/ before verb), 得 (complement/ after verb or adj).\n\nWhile playing the game, students should experience:\n\nTriage → Diagnose → Prescribe → Recover/Injection → Discharge summary flow.\n\nOne-tap correction (choose 的 / 地 / 得).\n\nMicro-hints: 1st wrong → rule keyword; 2nd wrong → template example.\n\nFast run: 10–12 items; 2–4 minutes to complete.\n\nThe interface should include:\n\nSentence card with the target spot underlined/highlighted.\n\nThree prescription buttons: 的 / 地 / 得.\n\nFeedback bar (✅ / ❌ + one-line rule).\n\nHint button (appears after first wrong attempt).\n\nSeverity meter (tracks errors); Injection Check modal (one quick MCQ or drag-drop) after 2 errors on a case.\n\nScore, progress, Reset; Export Results (JSON) capturing responses/time/hints/injections.\n\nSingle HTML file, inline CSS/JS, no external libraries/CDN; keyboard accessible; high-contrast & text-size toggles.\n\nIn-game help (concise rules):\n\n的 (de) — attributive/nominalizer: before a noun or to nominalize a clause/phrase.\n\ne.g., 漂亮的花；他写的字\n\n地 (di) — adverbial (before verb): modifies the verb.\n\ne.g., 认真地学习；轻轻地放下\n\n得 (de) — complement (after verb/adj): degree/result/complement.\n\ne.g., 跑得快；写得很整齐",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Little Doctor's Clinic - A Local Medical Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Little Doctor's Clinic - A Local Medical Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Longitudinal & Transverse Waves Explorer",
    "title": "Longitudinal & Transverse Waves Explorer",
    "folder": "Longitudinal & Transverse Waves Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Longitudinal & Transverse Waves Explorer.html",
    "modifiedTime": "2025-12-21T13:27:01.833093",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": false,
    "zipPath": null,
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Loop-Based_Melody_Creator_20260219",
    "title": "Loop-Based Melody Creator 20260219",
    "folder": "Loop-Based_Melody_Creator_20260219",
    "folderPath": "SDCDworkshop2026/Loop-Based_Melody_Creator_20260219",
    "indexPath": "SDCDworkshop2026/Loop-Based_Melody_Creator_20260219/index.html",
    "modifiedTime": "2026-02-19T13:09:16",
    "topic": null,
    "gradeLevel": "Secondary 3",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Ji Heng Prompt:\nGrade level: Secondary 3\n\nStudent readiness level: Mixed Abilities\n\nThe game is based on: Loop-based melody creation where students compose repeating melodic patterns using an onscreen keyboard with musical typing support, experimenting with different loop lengths and tempos to create engaging musical phrases\n\nThe objective of the game is to: Develop melodic composition skills, understand how repetition and variation work in music, learn the relationship between rhythm and melody in looped patterns, and explore how tempo changes affect musical expression and feel\n\nWhile playing the game, students should experience: Playing melodies using both mouse clicks on the onscreen keyboard and computer keyboard musical typing, recording melodic ideas into loops of varying lengths, hearing their creations play back continuously, experimenting with different BPM settings to change the character of their melodies, and layering or modifying loops to create more complex musical structures\n\nThe interface should include: Visual piano keyboard with clear key labels and musical typing key mappings displayed, loop length selector buttons (8, 16, 32 beats), numerical BPM input field with increment/decrement controls, visual loop progress indicator showing current playback position, record/play/stop transport controls, clear/reset button for starting over, visual metronome or beat counter, playback waveform or note display showing recorded melody, and save/load functionality for preserving student compositions\n\nThis approach allows students to explore melodic composition through immediate audio feedback while learning fundamental concepts about musical loops, tempo, and phrase structure in an intuitive, hands-on environment.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Loop-Based_Melody_Creator_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Loop-Based_Melody_Creator_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Marble Subtraction Catcher",
    "title": "Marble Subtraction Catcher",
    "folder": "Marble Subtraction Catcher",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Marble Subtraction Catcher.html",
    "modifiedTime": "2025-12-21T13:27:02.904372",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Marble Subtraction Catcher\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Marble Subtraction Catcher\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Marble Subtraction Catcher\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Marble Subtraction Catcher.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Marble Subtraction Catcher_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Marine Ecosystem Microplastics Simulator",
    "title": "Marine Ecosystem Microplastics Simulator",
    "folder": "Marine Ecosystem Microplastics Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Marine Ecosystem Microplastics Simulator.html",
    "modifiedTime": "2025-12-21T13:27:04.835861",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Marine Ecosystem Microplastics Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Marine Ecosystem Microplastics Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Marine Ecosystem Microplastics Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Marine Ecosystem Microplastics Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Marine Ecosystem Microplastics Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_-_JC_Level_20260225",
    "title": "Math Facts Automaticity Builder - JC Level 20260225",
    "folder": "Math_Facts_Automaticity_Builder_-_JC_Level_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_-_JC_Level_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_-_JC_Level_20260225/index.html",
    "modifiedTime": "2026-02-25T14:15:34",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "REFINE - modify to JC context",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_-_JC_Level_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_-_JC_Level_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_20260225",
    "title": "Math Facts Automaticity Builder 20260225",
    "folder": "Math_Facts_Automaticity_Builder_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_20260225/index.html",
    "modifiedTime": "2026-02-25T13:38:20",
    "topic": null,
    "gradeLevel": "[e.g., \"Primary 2\"]",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about build automaticity in math facts.\nTARGET AUDIENCE: Primary 1-2 - Mathematics\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\nI want to design a game-based learning interactive for my students.\nGrade level: [e.g., \"Primary 2\"]\nStudent readiness level: [choose one: \"Lower Progress (need more support)\"]\nThe game is based on: [e.g., \"rapid multiplication practice with rewards]\nThe objective of the game is to: [e.g., \"build automaticity in math facts,\"]\nWhile playing the game, students should experience: [e.g., \"quick-fire questions with immediate feedback and increasing difficulty\" ]\nThe interface should include: [e.g., \"score counter, timer, level progress display, celebration messages\"\nLEARNING OUTCOMES:\n- Students should be able to explore and understand build automaticity in math facts\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Math_Facts_Automaticity_Builder_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Math_Quest_Adventure_20251103",
    "title": "Math Quest Adventure 20251103",
    "folder": "Math_Quest_Adventure_20251103",
    "folderPath": "Math_Quest_Adventure_20251103",
    "indexPath": "Math_Quest_Adventure_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:54.543270",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Shadow Formation Virtual Lab.\n\nTARGET AUDIENCE: Primary 5-6 - Science (General)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Shadow Formation Virtual Lab\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Math_Quest_Adventure_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Math_Quest_Adventure_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Memoryless Property of Geometric Distribution",
    "title": "Memoryless Property of Geometric Distribution",
    "folder": "Memoryless Property of Geometric Distribution",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Memoryless Property of Geometric Distribution.html",
    "modifiedTime": "2025-12-21T13:27:01.703946",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Memoryless Property of Geometric Distribution\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Memoryless Property of Geometric Distribution\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Memoryless Property of Geometric Distribution\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Memoryless Property of Geometric Distribution.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Memoryless Property of Geometric Distribution_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Microplastics Ecosystem Simulation",
    "title": "Microplastics Ecosystem Simulation",
    "folder": "Microplastics Ecosystem Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Microplastics Ecosystem Simulation.html",
    "modifiedTime": "2025-12-21T13:27:00.912087",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Microplastics Ecosystem Simulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Microplastics Ecosystem Simulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Microplastics Ecosystem Simulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Microplastics Ecosystem Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Microplastics Ecosystem Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\MRT Translation Explorer - Subway Translation Expert",
    "title": "MRT Translation Explorer - Subway Translation Expert",
    "folder": "MRT Translation Explorer - Subway Translation Expert",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/MRT Translation Explorer - Subway Translation Expert.html",
    "modifiedTime": "2025-12-21T13:27:05.682619",
    "topic": null,
    "gradeLevel": "Primary 5–6",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Francesca\nMRT Translation Explorer 地铁翻译达人\nI want to design a game-based learning interactive for my students.\n\nGrade level: Primary 5–6\nStudent readiness level: Mixed Abilities\n\nThe game is based on:\nA translation adventure called “MRT Translation Explorer 地铁翻译达人”.\nStudents travel virtually across Singapore’s MRT map to different stations. At each stop, they are challenged to translate the station name between English and Chinese (e.g., “Woodlands” → “兀兰”, “滨海湾” → “Bayfront”).\nEach correct answer earns them a “Tap-In” sound, points, and travel miles to unlock the next line (e.g., North–South Line → Downtown Line).\n\nThe objective of the game is to:\nStrengthen vocabulary related to Singapore place names and public transport.\n\nBuild awareness of meaningful translations and transliteration in context (e.g., heritage names vs literal meaning).\n\nCultivate appreciation for Singapore’s bilingual landscape.\n\nEncourage listening, reading, and translation fluency through sound-supported interaction.\n\nWhile playing the game, students should experience:\nExploration and progress: Click or tap stations on a map to begin challenges.\n\nMultiple game modes:\n\nTranslate to Chinese 🀄️ (English → Chinese)\n\nTranslate to English 🇬🇧 (Chinese → English)\n\nSound Challenge 🔊 (Listen to pronunciation → select correct translation).\n\nImmediate feedback: “Ding!” for correct, “Try again!” for wrong, with pop-up cultural fun facts.\n\nEarning badges: “City Line Novice,” “Bilingual Commuter,” “Translation Master.”\n\nAdaptive levels: Starting with common stations, unlocking heritage or complex ones (e.g., “裕廊东 Jurong East,” “欧南园 Outram Park”).\n\nThe interface should include:\nClickable MRT map (simplified, four main lines with 3–4 stations each).\n\nStation cards showing:\n\nStation name (one language hidden).\n\nInput box or MCQ options for translation.\n\n“Check” button + sound feedback.\n\nSound effects:\n\nTap-in beep (correct answer).\n\nError buzz (wrong answer).\n\nBackground train ambience (loop, optional).\n\nStation name pronunciation (CN & EN audio).\n\nProgress panel: Tracks score, stations unlocked, accuracy rate.\n\nMini-quiz: At end of each line, students translate 5 random stations within a time limit to “catch the last train.”\n\nReflection Corner: “Which name surprised you most? What did you learn about Singapore’s bilingual naming?”\n\nAccessibility:\nKeyboard shortcuts (↑ ↓ to select answers, Enter to submit).\n\nAdjustable text size, high-contrast toggle, subtitles for all sounds.\n\nAudio playback toggle for quieter classrooms.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/MRT Translation Explorer - Subway Translation Expert.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/MRT Translation Explorer - Subway Translation Expert_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Multiplication_Master_20260225",
    "title": "Multiplication Master 20260225",
    "folder": "Multiplication_Master_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Multiplication_Master_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Multiplication_Master_20260225/index.html",
    "modifiedTime": "2026-02-25T14:16:12",
    "topic": null,
    "gradeLevel": "[e.g., \"Primary 2,\"",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "I want to design a game-based learning interactive for my students.\n\nGrade level: [e.g., \"Primary 2,\" \n\nStudent readiness level: [choose one: \"Lower Progress (need more support)\"\n\nThe game is based on: [e.g., \"rapid multiplication practice with rewards,\"\n\nThe objective of the game is to: [e.g., \"build automaticity in math facts,\n\nWhile playing the game, students should experience: [e.g., \"quick-fire questions with immediate feedback and increasing difficulty\" \n\nThe interface should include: [e.g., \"score counter, timer, level progress display, celebration messages\" ",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Multiplication_Master_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Multiplication_Master_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Musical Texture Explorer",
    "title": "Musical Texture Explorer",
    "folder": "Musical Texture Explorer",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Musical Texture Explorer.html",
    "modifiedTime": "2026-02-19T21:35:00.209718",
    "topic": null,
    "gradeLevel": null,
    "subject": "Music",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Musical Texture Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Musical Texture Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\My Healthy Plate Builder",
    "title": "My Healthy Plate Builder",
    "folder": "My Healthy Plate Builder",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/My Healthy Plate Builder.html",
    "modifiedTime": "2025-12-21T13:27:07.771484",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"My Healthy Plate Builder\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"My Healthy Plate Builder\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"My Healthy Plate Builder\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/My Healthy Plate Builder.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/My Healthy Plate Builder_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Natural Selection Simulation",
    "title": "Natural Selection Simulation",
    "folder": "Natural Selection Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Natural Selection Simulation.html",
    "modifiedTime": "2025-12-21T13:27:01.814094",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Natural Selection Simulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Natural Selection Simulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Natural Selection Simulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Natural Selection Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Natural Selection Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Navigation - Cardinal Directions & Bearings",
    "title": "Navigation - Cardinal Directions & Bearings",
    "folder": "Navigation - Cardinal Directions & Bearings",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Navigation - Cardinal Directions & Bearings.html",
    "modifiedTime": "2026-02-19T21:51:31.856412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Navigation - Cardinal Directions & Bearings.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Navigation - Cardinal Directions & Bearings_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\1materialsUsed\\webejs_model_Nets_of_Cube_Selectable_v21\\netsofcube\\nets",
    "title": "nets",
    "folder": "nets",
    "folderPath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/netsofcube",
    "indexPath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/netsofcube/nets.html",
    "modifiedTime": "2026-02-05T23:44:08",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": false,
    "zipPath": null,
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/netsofcube/2016-07-09_2257s.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Nuclear_Reactions_Mystery_Lab_20260219",
    "title": "Nuclear Reactions Mystery Lab 20260219",
    "folder": "Nuclear_Reactions_Mystery_Lab_20260219",
    "folderPath": "SDCDworkshop2026/Nuclear_Reactions_Mystery_Lab_20260219",
    "indexPath": "SDCDworkshop2026/Nuclear_Reactions_Mystery_Lab_20260219/index.html",
    "modifiedTime": "2026-02-19T13:01:58",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Yi Jun Prompt:\nStudents are [Secondary 4] of [mixed abilities]\n\nLearning Outcome [how to differentiate between nuclear fission and nuclear fission using examples]\n\nThe aesthetic design should be [Cute] and include features in the following: for the interactivity, I want to utilize [Matching] mechanics, supported by [Immediate Feedback] and an exploration style focused on [Discovery]. To drive engagement, please include [Points and Scoring and Time Pressure] within a [Mystery storyline with dialogues] narrative. Finally, the experience should include a musical score and sound effects for [general interaction]. Please make sure that the interactive includes \"nuclear fission\" and \"nuclear fusion\" as selection buttons but do not include the terms \"fission\", \"fusion\", \"split\", \"fuse\" in the questions. At the end of the game, include explanation of \"nuclear fission\" and \"nuclear fusion\" and offer an evaluation of student's performance on the interactive.\n\n \n\n📋 REQUIREMENTS:\n\n- Must run entirely offline without external libraries\n\n- Optimized for iframe (100% width, 450px height) and standalone mode (90vh)\n\n- Aligned to Singapore curriculum and notations\n\n- Apply cognitive load theory and Mayer's multimedia learning principles\n\n- Support both touch and mouse interactions (minimum 44px touch targets)\n\n- Use visual cues (shadows, highlights) for interaction states\n\n- Implement tooltips for additional information to reduce clutter\n\n- No header text to save vertical space\n\n- Clean, organized layout with clear visual hierarchy\n\n \n\n🎨 DESIGN PRINCIPLES TO APPLY:\n\n- Segmentation: Break content into manageable chunks\n\n- Coherence: Eliminate extraneous information\n\n- Signaling: Use visual cues to guide attention\n\n- Spatial Contiguity: Place related elements together\n\n- Temporal Contiguity: Present related information simultaneously\n\n- Modality: Use both visual and verbal channels appropriately\n\n- Redundancy: Avoid unnecessary duplication\n\n- Personalization: Use conversational, engaging language\n\n \n\n \n\n💻 TECHNICAL SPECIFICATIONS:\n\n- Generate three separate files: index.html, styles.css, script.js\n\n- Include comprehensive comments explaining the code\n\n- Ensure responsive design and accessibility\n\n- Optimize performance for smooth interactions",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Nuclear_Reactions_Mystery_Lab_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Nuclear_Reactions_Mystery_Lab_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Number Line Estimation Game",
    "title": "Number Line Estimation Game",
    "folder": "Number Line Estimation Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Number Line Estimation Game.html",
    "modifiedTime": "2025-12-21T13:27:07.627375",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Number Line Estimation Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Number Line Estimation Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Number Line Estimation Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Number Line Estimation Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Number Line Estimation Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\One Thousand Buckets of Water - Oral Interaction",
    "title": "One Thousand Buckets of Water - Oral Interaction",
    "folder": "One Thousand Buckets of Water - Oral Interaction",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction.html",
    "modifiedTime": "2025-12-21T13:27:07.041305",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"One Thousand Buckets of Water - Oral Interaction\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"One Thousand Buckets of Water - Oral Interaction\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"One Thousand Buckets of Water - Oral Interaction\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\One Thousand Buckets of Water - Oral Interaction 2",
    "title": "One Thousand Buckets of Water - Oral Interaction 2",
    "folder": "One Thousand Buckets of Water - Oral Interaction 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction 2.html",
    "modifiedTime": "2025-12-21T13:27:01.634757",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"One Thousand Buckets of Water - Oral Interaction 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"One Thousand Buckets of Water - Oral Interaction 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"One Thousand Buckets of Water - Oral Interaction 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interaction 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\One Thousand Buckets of Water - Oral Interactive Activity",
    "title": "One Thousand Buckets of Water - Oral Interactive Activity",
    "folder": "One Thousand Buckets of Water - Oral Interactive Activity",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity.html",
    "modifiedTime": "2025-12-21T13:27:01.405406",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"One Thousand Buckets of Water - Oral Interactive Activity\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"One Thousand Buckets of Water - Oral Interactive Activity\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"One Thousand Buckets of Water - Oral Interactive Activity\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\One Thousand Buckets of Water - Oral Interactive Activity2",
    "title": "One Thousand Buckets of Water - Oral Interactive Activity2",
    "folder": "One Thousand Buckets of Water - Oral Interactive Activity2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity2.html",
    "modifiedTime": "2025-12-21T13:27:05.110861",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“One Thousand Buckets of Water – Oral Interactive Activity”** based on the story 《一千桶水》, where students discuss key scenes, express opinions about characters’ actions, and justify their views using language scaffolds, with optional two-player (partner) mode.\n\nTARGET AUDIENCE:\n- Upper Primary Chinese Language (P4–P6) – oral interaction / picture discussion\n\nINTERACTIVE REQUIREMENTS:\n- A **storyboard** of 4 main scenes presented as clickable **scene cards**, each with:\n  - An emoji-style **scene image** (e.g., 🐋, 🪣, 👥, 🌊).\n  - A short **scene title** (e.g., \"Whale discovered\", \"Rescue begins\", \"Villagers help\", \"Successful rescue\").\n  - A brief **scene description** in English or Chinese.\n- A **discussion panel** including:\n  - A dynamic **question prompt** area showing the current discussion question for the selected scene.\n  - A **language scaffold** section with buttons that insert starter phrases.\n  - A **response area** where scaffolded responses build up as editable text blocks.\n  - Control buttons: **Clear** and **Share your views**.\n- A **partner mode** (two-player checkbox) that changes labels/text to reflect two-person discussion.\n- A **timer** and **progress indicator** at the bottom:\n  - Timer with display (e.g., 15:00) and Start/Pause/Restart button.\n  - Horizontal progress bar and text indicating activity progress.\n- A **center tooltip/help overlay** explaining the activity goals and how to use language scaffolds.\n- Self-contained HTML, CSS, and JavaScript (no external frameworks).\n- **Responsive layout**: adapts height for different viewport sizes and iframe embedding (e.g., 90vh or fixed ~450px height).\n\nSPECIFIC REQUIREMENTS:\n\nScenes & questions\n- Represent at least these 4 scenes:\n  1. **Whale discovered** – 阿东 and younger brother discover a stranded whale.\n  2. **Rescue begins** – They start splashing water using buckets; 阿东 says they need \"one thousand buckets\".\n  3. **Villagers help** – Villagers join in with buckets, clothes, and a water pump.\n  4. **Successful rescue** – Tide comes in and the whale returns to the sea, spraying water as if saying thanks.\n- Each scene has:\n  - `title` (e.g., \"发现鲸鱼\", \"开始救援\", \"村民帮忙\", \"成功救援\").\n  - `question` – a Chinese discussion question encouraging opinion and reasoning, such as:\n    - Scene 1: \"阿东和弟弟发现搁浅的鲸鱼时，他们的反应如何？你觉得他们这样做对吗？为什么？\".\n    - Scene 2: \"阿东说需要一千桶水来救鲸鱼，你觉得这个想法怎么样？如果是你，你会怎么做？\".\n    - Scene 3: \"村民们看到后也来帮忙，你觉得他们的行为如何？这说明了什么？\".\n    - Scene 4: \"最后鲸鱼得救了，它向大家道谢。你从这个故事中学到了什么？\".\n  - `details` – a short story excerpt to support understanding.\n- Clicking a scene card:\n  - Highlights it as active.\n  - Updates the **question prompt** area with that scene’s question.\n  - Updates activity progress.\n  - On small screens, optionally shows a detail overlay with scene question & details.\n\nLanguage scaffolds\n- Provide a set of **scaffold buttons** (Chinese phrases) like:\n  - \"我觉得他这样做…\" – to express judgement.\n  - \"你说得有道理。可是…\" – to provide counter-argument.\n  - \"如果是我，我会…\" – to suggest alternative.\n  - \"这个主意不错\" – to show agreement.\n- Clicking a scaffold button:\n  - Appends a new **response item** into the response display area, with:\n    - The scaffold in bold.\n    - An editable `contenteditable` span after it for the student to add details.\n  - Removes any placeholder message in the response area if present.\n  - Gives a brief animation/visual feedback on the clicked button.\n\nResponse area & controls\n- **Response area**:\n  - Initially shows a placeholder (e.g., “选择语言支架开始表达想法 / Choose a language scaffold to begin expressing your thoughts.”).\n  - Each scaffold click adds one response block; students can type to elaborate.\n- **Clear** button:\n  - Clears all responses, restores the placeholder, and resets internal response tracking.\n- **Share your views** button:\n  - If no responses exist, show a notification such as “请先添加一些想法再分享！”\n  - If there are responses, combine scaffold + typed text from each block and show a confirmation/feedback notification (e.g., how many viewpoints shared, and if in partner mode, note waiting for partner feedback).\n\nPartner (two-player) mode\n- Checkbox **Two-player mode**:\n  - When enabled, change discussion header (e.g., from \"讨论区域\" to \"双人讨论区域\").\n  - Notification invites students to discuss with a partner.\n  - Sharing feedback may mention partner (e.g., “等待同伴反馈…”).\n\nTimer & progress\n- Timer configuration:\n  - Default 15:00.\n  - **Start timing** button toggles to Pause/Resume/Restart depending on state.\n  - Timer counts down every second.\n  - When time reaches 0: show message like “活动时间结束！请进行总结分享。” and stop automatically.\n- Timer display styling:\n  - Normal colour for > 5 minutes.\n  - Orange for last 5 minutes.\n  - Red for last minute.\n- Progress bar:\n  - Width proportional to a combination of:\n    - Scenes interacted with.\n    - Number of scaffolds/responses used.\n  - Progress text updates (e.g., “活动进度 60%”; turns to “活动完成” with green colour at 100%).\n\nTooltips & help overlay\n- **Header tooltip**:\n  - Small icon at top that, when clicked (especially on mobile), opens a **center tooltip overlay**.\n- Center tooltip overlay:\n  - Shows lesson objective and instructions in Chinese, including:\n    - Learning goal (oral discussion, expressing opinions with reasons).\n    - Steps: click scenes, use scaffolds, enable partner mode, follow 15–20 min timing.\n    - Short guide on how to use each scaffold.\n  - Dismissable with a close button or by clicking outside the content.\n- Scene details overlay (optional for mobile):\n  - When a scene card is clicked on small screens, show an overlay with scene title, question, and details to support oral discussion.\n\nNotifications\n- Implement a **non-blocking toast notification** system for:\n  - Sharing responses.\n  - Switching to partner mode.\n  - Timer finishing.\n- Notifications appear at top-right, slide in, and auto-dismiss after ~3 seconds.\n\nResponsive behaviour\n- On window resize:\n  - Adjust main container height (90vh vs a fixed height like 450px) depending on viewport size.\n  - Ensure layout remains readable on tablets/phones.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Express opinions about characters’ actions in the story 《一千桶水》.\n  - Support their opinions with reasons and story evidence.\n  - Respond to a partner’s view using appropriate discourse markers (agree/disagree, propose alternatives).\n- The interactive should scaffold Chinese oral interaction and picture discussion in a structured but flexible way.\n\nINTERACTION FEATURES TO INCLUDE:\n- Clickable story scenes with context-rich prompts.\n- Scaffolded response building with editable text.\n- Optional partner mode for two-student use.\n- Timer and progress bar to structure activity time and pace.\n- Clear visual feedback and notifications for key actions.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/One Thousand Buckets of Water - Oral Interactive Activity2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Outdoor Day Trip Essentials",
    "title": "Outdoor Day Trip Essentials",
    "folder": "Outdoor Day Trip Essentials",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Outdoor Day Trip Essentials.html",
    "modifiedTime": "2025-12-21T13:27:06.166171",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Outdoor Day Trip Essentials\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Outdoor Day Trip Essentials\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Outdoor Day Trip Essentials\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Outdoor Day Trip Essentials.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Outdoor Day Trip Essentials_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Outdoor Day Trip Packing",
    "title": "Outdoor Day Trip Packing",
    "folder": "Outdoor Day Trip Packing",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Outdoor Day Trip Packing.html",
    "modifiedTime": "2026-02-19T21:51:31.857412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Outdoor Day Trip Packing.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Outdoor Day Trip Packing_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/P.E.E.P._Hazard_Classification_Adventure_20260219",
    "title": "P.E.E.P. Hazard Classification Adventure 20260219",
    "folder": "P.E.E.P._Hazard_Classification_Adventure_20260219",
    "folderPath": "SDCDworkshop2026/P.E.E.P._Hazard_Classification_Adventure_20260219",
    "indexPath": "SDCDworkshop2026/P.E.E.P._Hazard_Classification_Adventure_20260219/index.html",
    "modifiedTime": "2026-02-19T12:50:54",
    "topic": null,
    "gradeLevel": null,
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "I am designing a learning interactive experience where I want my students to learn the different classifications of hazards using the P.E.E.P. frame (people, equipment, environment, and procedure), understand the risk involved and how to mitigate these risks. My students are 13 to 15 years old with an interest in outdoor education and a language proficiency of intermediate at a Secondary] school level. The aesthetic design should be for Gen Z and include features in the following: for the interactivity, I want to utilize [Matching / Drag and drop / Sorting or Categorisation] mechanics, supported by Immediate Feedback and Progress Tracking and an exploration style focused on role-playing. To drive engagement, please include points and Scoring within an adventure storyline with choices narrative. Finally, the experience should include a musical score and sound effects for correct choices.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/P.E.E.P._Hazard_Classification_Adventure_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/P.E.E.P._Hazard_Classification_Adventure_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225",
    "title": "P3 WA1 Number Sense — Kid Friendly (One Question • Timer • Instant Check) 20260225",
    "folder": "P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225/index.html",
    "modifiedTime": "2026-02-25T14:17:06",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "SDCDworkshop2026/1materialsUsed/P3_WA1_Number_Sense_—_Kid_Friendly_(One_Question_•_Timer_•_Instant_Check)_20260225/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Paper Chromatography Investigation",
    "title": "Paper Chromatography Investigation",
    "folder": "Paper Chromatography Investigation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Paper Chromatography Investigation.html",
    "modifiedTime": "2025-12-21T13:27:08.121474",
    "topic": null,
    "gradeLevel": "Secondary 1",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "By Jia Hui\nCreate an interactive [an experiment to investigate if there are any dyes with known toxic properties in food colouring, F] for [Secondary 1 G3] [Science] students.\n \nGrade level: Secondary 1\nStudent readiness level: Mixed Abilities\n \nThe simulation is based on: \n·       explain how the constituents of a mixture can be separated based on their physical properties, using the following techniques: paper chromatography\n·       investigate the separation of constituents of mixtures based on basic principles involved in the following separation techniques: paper chromatography\n \nKnown substances include:\nNew food colouring F\n4 other dyes, W, X, Y and Z (toxic properties)\n\nThe objective of the simulation is to: Allow students to practice proper technique of paper chromatography and to identify whether an toxic food dye (W,X, Y, Z)is found in the new food colouring, F by comparing the chromatogram of F with those of four other food dye, W, X, Y and Z, which have known toxic properties .\n \nWhile using the simulation, students should experience:Interactive Elements  \n \nSetup Phase\nStudents select and drag each food dye (W, X, Y, Z) and food colouring (F) to designated spots (a cross) on the start line of filter paper to obtain a dark spot of the food dye on the cross.\n\nChromatography Process \nStudents fill virtual basin with water to 2cm depth. Automatically stop the water pouring once the 2cm depth is reached.\nPlace the filter paper in. The pencil start line should be above the water level. Show the filter paper in the water.\nTime-lapse feature allows students to observe separation over several minutes. Increase size of chromatogram so that students can see clearly. The time-lapse should not show back and forth movement. Should be a continuous movement upwards.\n\nAnalysis Phase:\nInteractive measuring tools to record distances travelled by different dye components\nSide-by-side comparison view of all chromatograms\nPattern matching activity where students identify which toxic dye (W, X, Y, or Z) matches components found in food colouring F. Have clear labels.\n \nAssessment Features (to have a button for assessment, and a figure of the chromatogram above the input box for student reference)\nAnswer input box for students to identify which toxic dye is present in F\nImmediate feedback with explanation of correct answer\nReset button to repeat experiment\n \nSuccess Criteria: Students successfully identify that food colouring F contains the same dye components as toxic colouring X by comparing chromatogram patterns and spot positions.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Paper Chromatography Investigation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Paper Chromatography Investigation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Parts of a Flower - Concept Mapping",
    "title": "Parts of a Flower - Concept Mapping",
    "folder": "Parts of a Flower - Concept Mapping",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Parts of a Flower - Concept Mapping.html",
    "modifiedTime": "2025-12-21T13:26:58.006432",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Parts of a Flower – Concept Mapping”** activity where students drag word cards (petals, stem, roots, leaves) to the correct parts of a flower diagram and see immediate feedback on their understanding of structure and function.\n\nTARGET AUDIENCE:\n- Primary 5 Science (lower progress learners, ~11 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A central **flower diagram** (SVG or canvas) showing key parts:\n  - Roots\n  - Stem\n  - Leaves\n  - Petals\n- **Drag-and-drop word cards** representing each part + function:\n  - “Petals – Make the flower beautiful to attract insects”\n  - “Stem – Holds up the flower and carries water”\n  - “Roots – Take in water and nutrients from soil”\n  - “Leaves – Make food for the plant using sunlight”\n- Students drag these cards to **drop zones** over the corresponding diagram parts.\n- Visual connection lines drawn between each card and its target part when placed.\n- Two main controls:\n  - **“Check My Work”**: evaluate all current placements.\n  - **“Try Again”**: reset the activity.\n- Feedback mechanisms:\n  - Immediate, local feedback when placing a card (brief tooltip message, highlight on target).\n  - Overall summary feedback after checking (score-style message with encouragement).\n- Self-contained HTML + CSS + JavaScript (no external frameworks).\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Drag-and-drop must work with both mouse and touch.\n  - Layout adapts for iframe and full-browser modes.\n\nSPECIFIC REQUIREMENTS:\n\nFlower diagram and drop zones\n- Use an SVG-based flower composed of groups (`<g>`) for each part:\n  - **Roots** group with stylised root paths near the bottom, and a circular drop zone around them.\n  - **Stem** group with a vertical rectangle, and a drop zone around the stem.\n  - **Leaves** group with two leaf shapes on the sides, each with a drop zone (both represent the same part).\n  - **Petals** group with petals and central disc, and a circular drop zone around the petals.\n- Each drop zone must have a data attribute indicating the part it represents, e.g. `data-part=\"roots\"`, `data-part=\"stem\"`, etc.\n\nWord cards\n- List word cards in a dedicated `word-cards-container`:\n  - Each card is a `.word-card` element with:\n    - `data-word` attribute (e.g. \"petals\", \"stem\", \"roots\", \"leaves\").\n    - Visible text for the part name (e.g. `<span class=\"word-text\">Petals</span>`).\n    - A short description of function (e.g. `<span class=\"function-text\">Make the flower beautiful to attract insects</span>`).\n- Cards must be **draggable** and visually distinct (e.g., borders, background colour).\n- Cards that have been placed should be styled differently (e.g., `placed` class) and not draggable again until reset.\n\nDrag-and-drop behaviour\n- Support **mouse-based drag-and-drop**:\n  - `dragstart`, `dragover`, `drop`, `dragenter`, `dragleave`, `dragend` events.\n  - Only allow dragging word cards that are not yet placed.\n- Support **touch-based drag-and-drop**:\n  - `touchstart`, `touchmove`, `touchend` events.\n  - On `touchmove`, move the card with the finger (using fixed positioning and high z-index).\n  - On `touchend`, determine the element under the finger via `document.elementFromPoint()` and treat it as a drop event if it’s a drop zone.\n- When hovering over or touching a drop zone while dragging:\n  - Add a `highlight` class to that drop zone so students know they can drop there.\n- When a card is dropped on a drop zone:\n  - If that drop zone already has a placement, clear/move the previous card back.\n  - Record the placement mapping (e.g., `placements[part] = word`).\n  - Mark the word card as placed (`.placed`).\n  - Create a **connection line** from the card to the drop zone.\n\nConnections\n- Implement a separate SVG group (`.connection-lines`) that contains `<line>` elements representing connections between cards and parts.\n- When a card is placed:\n  - Compute the positions of the card centre and the drop zone centre relative to the container.\n  - Create a line from card centre to drop zone centre.\n  - Tag the line with a data attribute, e.g. `data-connection=\"petals-petals\"`.\n- When resetting/removing placements, remove or update their corresponding lines.\n- Lines may gain a `correct` class when the match is correct during checking.\n\nAnswer key and immediate feedback\n- Maintain a **correct answers mapping**, for example:\n  - `petals → petals`\n  - `stem → stem`\n  - `roots → roots`\n  - `leaves → leaves`\n- When a card is placed on a drop zone:\n  - Determine if the placement is correct using the mapping.\n  - Briefly highlight the drop zone:\n    - Add `correct` class for correct placement.\n    - Add `incorrect` class for incorrect placement.\n  - Show a short message via a temporary tooltip, e.g.:\n    - Correct: “Great job! That’s correct!”\n    - Incorrect: “Try again! Think about what this part does.”\n  - Remove these highlight classes after a short duration (e.g., 2 seconds).\n\nCheck and feedback logic\n- On “Check My Work” button click:\n  - Iterate over all expected parts and compare `placements[part]` with the answer key.\n  - Count the number of correct matches.\n  - Add persistent feedback classes to drop zones and lines (e.g., `correct` for fully correct connections, `incorrect` for wrong or missing ones).\n  - Display overall feedback in a dedicated `#feedback` area:\n    - If all correct: success message, e.g. `🌸 Excellent! You got all 4 correct! You understand how flower parts work together!`.\n    - If mostly correct: partial success message, e.g. `🌱 Good work! You got 3 out of 4 correct. Check the red ones and try again!`.\n    - If few correct: encouragement to try again, e.g. `🌿 Keep trying! You got 1 out of 4 correct. Remember: each part has a special job!`.\n  - For a perfect score, trigger a small **celebration animation** on all placed cards (e.g., sequential bounce effect).\n  - Temporarily disable the “Check My Work” button (e.g., for 3 seconds) to prevent spamming.\n\nReset behaviour\n- On “Try Again” button click:\n  - Clear `placements` and any feedback classes from drop zones and lines.\n  - Move all word cards back to their original container and remove `placed` styles.\n  - Clear the connection lines group.\n  - Reset the feedback area.\n  - Show a short tooltip message such as “Activity reset! Try again!”.\n\nTooltips and accessibility\n- Tooltip system:\n  - A global tooltip (`#tooltip`) moves near the cursor when hovering over elements with `title` attributes.\n  - On `mouseenter`, show the tooltip text from `title` and temporarily remove the `title` to avoid default browser tooltip.\n  - On `mouseleave`, hide the custom tooltip and restore the original `title` from a stored `data-original-title` attribute.\n  - On `mousemove`, update tooltip position relative to the container.\n- When showing custom messages (e.g., after reset or correct placement), create a temporary tooltip-like overlay centred in the container; remove after a few seconds.\n\nResponsive handling\n- Adjust container height based on environment:\n  - If running inside an iframe, limit height (e.g., 450px) for SLS embedding.\n  - If in full browser, use a percentage of viewport height (e.g., 90vh).\n- On window resize:\n  - Optionally recalculate line positions if needed (or accept minor drift if simple).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify the **roots**, **stem**, **leaves**, and **petals** of a flowering plant.\n  - Match each part with its **function** (e.g., roots absorb water, leaves make food, etc.).\n  - See how all parts are connected in a whole plant system.\n- The activity should support **concept mapping** by visually linking labels and parts, reinforcing both terminology and function.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop of labelled cards to diagram parts (mouse + touch).\n- Visual connection lines between cards and parts.\n- Immediate placement feedback and overall checking feedback.\n- Reset/try-again function for repeated practice.\n- Custom tooltip system improving clarity and accessibility.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Parts of a Flower - Concept Mapping.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Parts of a Flower - Concept Mapping_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Past Tense Verb Quiz",
    "title": "Past Tense Verb Quiz",
    "folder": "Past Tense Verb Quiz",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Past Tense Verb Quiz.html",
    "modifiedTime": "2025-12-21T13:27:02.482937",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Past Tense Verb Quiz\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Past Tense Verb Quiz\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Past Tense Verb Quiz\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Past Tense Verb Quiz.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Past Tense Verb Quiz_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Past Tense Verb Shooter",
    "title": "Past Tense Verb Shooter",
    "folder": "Past Tense Verb Shooter",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Past Tense Verb Shooter.html",
    "modifiedTime": "2025-12-21T13:27:04.607020",
    "topic": null,
    "gradeLevel": "Primary 1",
    "subject": "English Language",
    "hasPrompt": true,
    "promptText": "English Lesson - Verbs in Past Tense - by Jon\nGrade level: Primary 1\n\nStudent readiness level: Mixed Abilities\n\nThe assessment focuses on: guiding students to arrange and describe a sequence of 4 pictures to form a short story (beginning, middle, ending)\n\nAssessment type needed: Drag and Drop sequencing + Sentence building (choose or type simple sentences)\n\nThe objective of the assessment is to:\n\nhelp students understand story sequence (first → next → then → finally)\n\nencourage them to form complete sentences with correct verb tenses (mainly past tense)\n\nbuild confidence in continuous writing using pictures as cues\n\nWhile completing the assessment, students should experience:\n\nimmediate feedback after sequencing (e.g., “Good job! That’s the correct order!” or “Try again — what happened first?”)\n\nhints for sentence construction (e.g., “Remember to use past tense verbs like played or ate.”)\n\nencouragement after completing each stage (“You’re building a great story!”)\n\nThe interface should include:\n\n4 draggable picture cards to arrange in order\n\na sentence box under each picture (students type or choose from a word bank)\n\n“Check order” and “Show hint” buttons\n\nprogress bar showing story completion\n\ngreen/red visual feedback\n\n“Try again” and “Next story” buttons\n\nfinal “Story Summary” screen showing the student’s completed story with stars or score",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Past Tense Verb Shooter.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Past Tense Verb Shooter_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Pedestrian Safety Explorer",
    "title": "Pedestrian Safety Explorer",
    "folder": "Pedestrian Safety Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Pedestrian Safety Explorer.html",
    "modifiedTime": "2025-12-21T13:27:04.092932",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Pedestrian Safety Explorer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Pedestrian Safety Explorer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Pedestrian Safety Explorer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Pedestrian Safety Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Pedestrian Safety Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Performance Enhancing Drugs",
    "title": "Performance Enhancing Drugs",
    "folder": "Performance Enhancing Drugs",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Performance Enhancing Drugs.html",
    "modifiedTime": "2026-02-19T21:51:31.857412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Performance Enhancing Drugs.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Performance Enhancing Drugs_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Peribahasa Interaktif",
    "title": "Peribahasa Interaktif",
    "folder": "Peribahasa Interaktif",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Peribahasa Interaktif.html",
    "modifiedTime": "2025-12-21T13:27:05.221142",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Julaiha\nGrade level:\nSecondary 1–3 (Malay Language)\n\n \n\nThe simulation is based on:\nMatching common peribahasa (Malay proverbs) to their correct meanings and real-life contexts through an interactive and gamified experience.\n\n \n\nThe objective of the simulation is to:\n\nStrengthen students’ understanding of peribahasa through contextual application.\n\nEncourage critical thinking and collaboration as students analyse and discuss meanings.\n\nPromote deeper appreciation of Malay culture and values reflected in peribahasa.\n\n \n\nWhile using the simulation, students should experience:\n\nA sense of challenge and fun as they drag, drop, or match peribahasa to scenarios.\n\nImmediate feedback and hints when incorrect matches are made.\n\nScenario-based reflection questions (e.g., “Bilakah anda akan menggunakan peribahasa ini dalam kehidupan seharian?”).\n\nProgressive levels of difficulty — from literal meaning to contextual usage.\n\nA leaderboard or progress bar that motivates them to improve their accuracy and speed.\n\n \n\nThe interface should include:\n\nA welcome screen with instructions and learning objectives.\n\nA matching board divided into two columns: Peribahasa and Maksud/ Situasi.\n\nInteractive elements such as drag-and-drop cards, pop-up hints, and “Did You Know?” cultural facts.\n\nAudio narration for pronunciation support (optional).\n\nProgress tracking (e.g., badges for completion or accuracy).\n\nA reflection section at the end:",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Peribahasa Interaktif.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Peribahasa Interaktif_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Peribahasa Matching Game",
    "title": "Peribahasa Matching Game",
    "folder": "Peribahasa Matching Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Peribahasa Matching Game.html",
    "modifiedTime": "2025-12-21T13:27:06.934304",
    "topic": null,
    "gradeLevel": null,
    "subject": "Malay Language",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Peribahasa Matching Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Peribahasa Matching Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Peribahasa Matching Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Peribahasa Matching Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Peribahasa Matching Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Perimeter Sticker Game",
    "title": "Perimeter Sticker Game",
    "folder": "Perimeter Sticker Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Perimeter Sticker Game.html",
    "modifiedTime": "2025-12-21T13:27:06.669210",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Perimeter Sticker Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Perimeter Sticker Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Perimeter Sticker Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Perimeter Sticker Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Perimeter Sticker Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Periodic_Table_Explorer_20251103",
    "title": "Periodic Table Explorer 20251103",
    "folder": "Periodic_Table_Explorer_20251103",
    "folderPath": "Periodic_Table_Explorer_20251103",
    "indexPath": "Periodic_Table_Explorer_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:55.831499",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Periodic Table Explorer.\n\nTARGET AUDIENCE: Secondary 1-2 - Chemistry\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Periodic Table Explorer\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Periodic_Table_Explorer_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Periodic_Table_Explorer_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Permission Asking Adventure",
    "title": "Permission Asking Adventure",
    "folder": "Permission Asking Adventure",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Permission Asking Adventure.html",
    "modifiedTime": "2025-12-21T13:27:08.387328",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Permission Asking Adventure\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Permission Asking Adventure\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Permission Asking Adventure\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Permission Asking Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Permission Asking Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Permission Please! - Social Skills Game",
    "title": "Permission Please! - Social Skills Game",
    "folder": "Permission Please! - Social Skills Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Permission Please! - Social Skills Game.html",
    "modifiedTime": "2025-12-21T13:27:07.694947",
    "topic": null,
    "gradeLevel": "Primary 1",
    "subject": null,
    "hasPrompt": true,
    "promptText": "Ritchell\n\nLearning Objectives: To ask permission at appropriate times and in desirable ways. \nInteractive Prompt: \n \nI want to design a game-based learning interactive for my students.\n\nGrade level: Primary 1 \n\nStudent readiness level: Low progress learners with behavioural and social communication difficulties \n\nThe game is based on: social emotional learning skills, in particularly learning how to ask for permission. \n\nThe objective of the game is to: learn the correct steps to ask for permission. here are the skill steps:\n\n1. Decide who to ask for permission.\n\n2. Get the person’s attention in an appropriate way.\n\n3. Address the person.\n\n4. Ask for permission politely.\n\n5. Wait for the person to give you his/her permission.\n \n\nWhile playing the game, students should experience: the negative and positive consequences of asking for permission well and understand the importance of doing so. The game should give them 3 different scenarios in school, class and at home to practise the skills.\n \n\nThe interface should include: e.g., level progress display, celebration message, clickable navigation buttons, inventory display, dialogue boxes, progress tracking, decision buttons, background visuals to show the scenario reflected in the game. e.g. when in a classroom, show a background of a classroom.\n\n \n\n \n\n \n\nI want to design a game-based learning interactive for my students.\n\n \n\nGrade level: Primary 1 \n\n \n\nStudent readiness level: Low progress learners with behavioural and social communication difficulties \n\n \n\nThe game is based on: social emotional learning skills, in particularly learning how to ask for permission. \n\n \n\nThe objective of the game is to: learn the correct steps to ask for permission. here are the skill steps: \n\n \n\n1. Decide who to ask for permission.\n\n \n\n2. Get the person’s attention in an appropriate way.\n\n \n\n3. Address the person.\n\n \n\n4. Ask for permission politely.\n\n \n\n5. Wait for the person to give you his/her permission.\n\n \n\n \n\n \n\nWhile playing the game, students should experience: the negative and positive consequences of asking for permission well and understand the importance of doing so. The game should give them 3 different scenarios in school, class and at home to practise the skills. Include a voice-over for the options, to increase accessibility for students who have trouble reading. \n\n \n\n \n\n \n\nThe interface should include: e.g., level progress display, celebration message, clickable navigation buttons, inventory display, dialogue boxes, visuals to show the achievement of each  progress tracking, decision buttons, background visuals to show the scenario reflected in the game. e.g. when in a classroom, show a background of a classroom. for the teachers' names, use local names like Mr Tan, Ms Lim or Mdm Nafisah. \n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/9984e5a5-5311-47f0-b246-841b7c6bdf61/section/33624/activity/33626?pageNo=1\n ",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Permission Please! - Social Skills Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Permission Please! - Social Skills Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Permission Quest - Social Skills Game",
    "title": "Permission Quest - Social Skills Game",
    "folder": "Permission Quest - Social Skills Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Permission Quest - Social Skills Game.html",
    "modifiedTime": "2025-12-21T13:27:08.054290",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Permission Quest - Social Skills Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Permission Quest - Social Skills Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Permission Quest - Social Skills Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Permission Quest - Social Skills Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Permission Quest - Social Skills Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Permission Quest - Social Skills Game 2",
    "title": "Permission Quest - Social Skills Game 2",
    "folder": "Permission Quest - Social Skills Game 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Permission Quest - Social Skills Game 2.html",
    "modifiedTime": "2025-12-21T13:27:02.712198",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Permission Quest - Social Skills Game 2\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Permission Quest - Social Skills Game 2\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Permission Quest - Social Skills Game 2\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Permission Quest - Social Skills Game 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Permission Quest - Social Skills Game 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Personal Aspirations Concept Map",
    "title": "Personal Aspirations Concept Map",
    "folder": "Personal Aspirations Concept Map",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Personal Aspirations Concept Map.html",
    "modifiedTime": "2025-12-21T13:27:03.392506",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Personal Aspirations Concept Map\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Personal Aspirations Concept Map\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Personal Aspirations Concept Map\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Personal Aspirations Concept Map.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Personal Aspirations Concept Map_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Personal Concept Mapping Interactive",
    "title": "Personal Concept Mapping Interactive",
    "folder": "Personal Concept Mapping Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Personal Concept Mapping Interactive.html",
    "modifiedTime": "2025-12-21T13:27:00.900087",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Personal Concept Mapping Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Personal Concept Mapping Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Personal Concept Mapping Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Personal Concept Mapping Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Personal Concept Mapping Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Persuasion Master_ The Advertising Challenge",
    "title": "Persuasion Master  The Advertising Challenge",
    "folder": "Persuasion Master_ The Advertising Challenge",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Persuasion Master_ The Advertising Challenge.html",
    "modifiedTime": "2025-12-21T13:27:04.048932",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Persuasion Master_ The Advertising Challenge\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Persuasion Master_ The Advertising Challenge\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Persuasion Master_ The Advertising Challenge\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Persuasion Master_ The Advertising Challenge.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Persuasion Master_ The Advertising Challenge_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Persuasive Language Features Assessment",
    "title": "Persuasive Language Features Assessment",
    "folder": "Persuasive Language Features Assessment",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Persuasive Language Features Assessment.html",
    "modifiedTime": "2025-12-21T13:27:07.968061",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Persuasive Language Features Assessment\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Persuasive Language Features Assessment\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Persuasive Language Features Assessment\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Persuasive Language Features Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Persuasive Language Features Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Persuasive Words Adventure",
    "title": "Persuasive Words Adventure",
    "folder": "Persuasive Words Adventure",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Persuasive Words Adventure.html",
    "modifiedTime": "2025-12-21T13:27:05.177141",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Persuasive Words Adventure\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Persuasive Words Adventure\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Persuasive Words Adventure\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Persuasive Words Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Persuasive Words Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Picture Graph Builder - Favorite School Activities",
    "title": "Picture Graph Builder - Favorite School Activities",
    "folder": "Picture Graph Builder - Favorite School Activities",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Picture Graph Builder - Favorite School Activities.html",
    "modifiedTime": "2025-12-21T13:27:02.417806",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Picture Graph Builder - Favorite School Activities\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Picture Graph Builder - Favorite School Activities\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Picture Graph Builder - Favorite School Activities\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Picture Graph Builder - Favorite School Activities.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Picture Graph Builder - Favorite School Activities_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Plant Hormone Growth Interactive",
    "title": "Plant Hormone Growth Interactive",
    "folder": "Plant Hormone Growth Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Plant Hormone Growth Interactive.html",
    "modifiedTime": "2025-12-21T13:27:08.831456",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Plant Hormone Growth Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Plant Hormone Growth Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Plant Hormone Growth Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Plant Hormone Growth Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Plant Hormone Growth Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Plant Hormone Growth Regulation",
    "title": "Plant Hormone Growth Regulation",
    "folder": "Plant Hormone Growth Regulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Plant Hormone Growth Regulation.html",
    "modifiedTime": "2025-12-21T13:27:01.635756",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Plant Hormone Growth Regulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Plant Hormone Growth Regulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Plant Hormone Growth Regulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Plant Hormone Growth Regulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Plant Hormone Growth Regulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Plant Transpiration Simulation",
    "title": "Plant Transpiration Simulation",
    "folder": "Plant Transpiration Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Plant Transpiration Simulation.html",
    "modifiedTime": "2025-12-21T13:27:07.535271",
    "topic": null,
    "gradeLevel": "Secondary 3",
    "subject": "Science (General)",
    "hasPrompt": true,
    "promptText": "Lydia\nFactors Affecting Rate of Transpiration\nLearning Objective:\nStudents will investigate the effects of variation of air movement, temperature, humidity and light intensity on transpiration rate.\n \nPrompt:\nI want to design a simulation interactive for my students.\n \nGrade level: Secondary 3\n \nStudent readiness level: Mixed Abilities\nThe simulation is based on: investigating how different environmental factors — light intensity, temperature, wind speed, and humidity — affect the rate of transpiration in plants.\n \nThe objective of the simulation is to: help students understand that transpiration rate varies with changes in environmental conditions, and to explore how each factor influences water loss from the leaves.\n \nWhile using the simulation, students should experience: adjusting one factor at a time (light, temperature, wind, humidity) and observing real-time changes in the rate of transpiration. They should visualise how increased light or wind speeds up water loss, while higher humidity or lower temperature reduces it. Students can compare and interpret trends from a dynamic graph showing transpiration rate over time.\n \nThe interface should include:\nSliders or dials to control light intensity, temperature, wind speed, and humidity.\nA plant model (e.g. potted plant or leaf cross-section) that visually responds to changes — such as faster or slower water vapour movement from stomata.\nA digital sensor panel showing current settings and live readings of transpiration rate.\nA real-time graph plotting time (x-axis) against rate of transpiration (y-axis).\nButtons for Start Experiment, Pause, Reset, and Compare Conditions.\nOptional guided mode that prompts students to test one variable at a time and reflect on observed patterns.\nTooltip or info icons explaining scientific reasoning behind observed changes.\n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/f83a3a0b-ac40-49c0-9389-5cd5debd4de2/section/33837/activity/34137",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Plant Transpiration Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Plant Transpiration Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Prefix & Suffix Game",
    "title": "Prefix & Suffix Game",
    "folder": "Prefix & Suffix Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Prefix & Suffix Game.html",
    "modifiedTime": "2025-12-21T13:27:01.321319",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Prefix & Suffix Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Prefix & Suffix Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Prefix & Suffix Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Prefix & Suffix Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Prefix & Suffix Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Product Design Sketching Strokes Identification",
    "title": "Product Design Sketching Strokes Identification",
    "folder": "Product Design Sketching Strokes Identification",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Product Design Sketching Strokes Identification.html",
    "modifiedTime": "2025-12-21T13:27:00.711889",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Product Design Sketching Strokes Identification\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Product Design Sketching Strokes Identification\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Product Design Sketching Strokes Identification\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Product Design Sketching Strokes Identification.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Product Design Sketching Strokes Identification_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Projectile_Motion_Interactive_20251113",
    "title": "Projectile Motion Interactive 20251113",
    "folder": "Projectile_Motion_Interactive_20251113",
    "folderPath": "Projectile_Motion_Interactive_20251113",
    "indexPath": "Projectile_Motion_Interactive_20251113/index.html",
    "modifiedTime": "2026-01-30T21:51:16",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Projectile Motion.\n\nTARGET AUDIENCE: Secondary 3-4 - Physics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\n- Clear variable controls with sensible ranges and units\n- Real-time graphing + data logging (CSV export); pause/reset\n- “Predict → Test → Explain” prompts to structure inquiry\n- Preset scenarios and a Reset to defaults\n- Contextual tooltips/glossary for symbols/terms\n- Vector arrows, numeric readouts, and optional air resistance toggle\n- Controls: initial speed, launch angle, and gravity; optional air resistance\n- Decompose velocity into horizontal/vertical components with vector overlays\n- Multiple representations: y–t, vᵧ–t, and aᵧ–t graphs only (as in Tracker); snap to integer axes/ticks with gridlines; show exact values at key events (launch, apex, landing)\n- Live graphs: y–t, vᵧ–t, and aᵧ–t only; show time of flight and max height\n- Snap & presets: angle slider with 1° steps and quick presets (30°, 45°, 60°); optionally snap initial speed to 1 m/s steps\n- Trajectory options: toggle path trace/breadcrumbs; compare mode to display two trajectories concurrently\n- Data tools: real-time data table (t, x, y, vₓ, vᵧ); export CSV; “Clear Log” button\n- UI/layout: control panel + canvas layout optimized for iframe (100% width, ~450px height) and mobile; minimal header similar to the reference design\n- Design reference: follow interaction affordances similar to https://iwant2study.org/lookangejss/02_newtonianmechanics_7energyworkpower/ejss_model_projectileprimary/index.html (no external dependencies)\n- “Predict → Test → Explain” prompts; freeze/step-through at apex; show symmetry about apex\n- Misconceptions: 45° not always max range with drag; horizontal and vertical motions independent\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Projectile Motion\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\n\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\n\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "Projectile_Motion_Interactive_20251113.zip",
    "hasPromptImage": true,
    "promptImagePath": "Projectile_Motion_Interactive_20251113/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Projectile_Motion_Interactive_20251113_WITH_PANELS",
    "title": "Projectile Motion Interactive 20251113 WITH PANELS",
    "folder": "Projectile_Motion_Interactive_20251113_WITH_PANELS",
    "folderPath": "Projectile_Motion_Interactive_20251113_WITH_PANELS",
    "indexPath": "Projectile_Motion_Interactive_20251113_WITH_PANELS/index.html",
    "modifiedTime": "2025-11-14T12:11:46",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Projectile Motion.\n\nTARGET AUDIENCE: Secondary 3-4 - Physics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\n- Clear variable controls with sensible ranges and units\n- Real-time graphing + data logging (CSV export); pause/reset\n- “Predict → Test → Explain” prompts to structure inquiry\n- Preset scenarios and a Reset to defaults\n- Contextual tooltips/glossary for symbols/terms\n- Vector arrows, numeric readouts, and optional air resistance toggle\n- Controls: initial speed, launch angle, and gravity; optional air resistance\n- Decompose velocity into horizontal/vertical components with vector overlays\n- Multiple representations: y–t, vᵧ–t, and aᵧ–t graphs only (as in Tracker); snap to integer axes/ticks with gridlines; show exact values at key events (launch, apex, landing)\n- Live graphs: y–t, vᵧ–t, and aᵧ–t only; show time of flight and max height\n- Snap & presets: angle slider with 1° steps and quick presets (30°, 45°, 60°); optionally snap initial speed to 1 m/s steps\n- Trajectory options: toggle path trace/breadcrumbs; compare mode to display two trajectories concurrently\n- Data tools: real-time data table (t, x, y, vₓ, vᵧ); export CSV; “Clear Log” button\n- UI/layout: control panel + canvas layout optimized for iframe (100% width, ~450px height) and mobile; minimal header similar to the reference design\n- Design reference: follow interaction affordances similar to https://iwant2study.org/lookangejss/02_newtonianmechanics_7energyworkpower/ejss_model_projectileprimary/index.html (no external dependencies)\n- “Predict → Test → Explain” prompts; freeze/step-through at apex; show symmetry about apex\n- Misconceptions: 45° not always max range with drag; horizontal and vertical motions independent\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Projectile Motion\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\n\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\n\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "Projectile_Motion_Interactive_20251113_WITH_PANELS.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": true
  },
  {
    "id": "ACPcookout2025\\users\\Projectile Motion Simulator",
    "title": "Projectile Motion Simulator",
    "folder": "Projectile Motion Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Projectile Motion Simulator.html",
    "modifiedTime": "2025-12-21T13:27:00.995178",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "By Jeremy\nObjective: Create an engaging, web-based simulation that allows users to explore 2D projectile motion by firing a virtual cannon. The simulation must visually demonstrate the effects of initial velocity, launch angle, mass, air resistance, and gravity on the trajectory, and provide real-time numerical data for maximum height and horizontal distances.\n\n1. Core Visual & Interactive Elements\nA. The Scene:\n\nA clean, colorful 2D canvas with a sky background and ground.\n\nA cannon positioned at the origin (0, 0) at the bottom-left of the scene. The cannon's barrel should pivot to visually represent the current launch angle.\n\nA projectile (e.g., a cannonball) that is launched from the cannon when the user clicks \"Fire\".\n\nB. The Trajectory & Data Visualization:\n\nAs the projectile flies, it must leave a dotted or dashed line behind it, tracing its path in real-time.\n\nCritical Point Markers:\n\nLaunch Point: Clearly marked.\n\nMaximum Height Point: A distinct marker (e.g., a flag or a different colored dot) on the trajectory at the apex. A vertical dashed line should connect this point to the ground, labeled \"Max Height\".\n\nLanding Point: A marker where the projectile hits the ground.\n\nC. Interactive Controls Panel (Sliders & Inputs): \nA clearly labeled control panel should allow users to modify the following parameters:\n\nInitial Speed (m/s): A slider from 0 to 150 m/s.\n\nLaunch Angle (degrees): A slider from 0° to 90°. The cannon's barrel should rotate in real-time as this slider is moved.\n\nMass (kg): A slider from 1 kg to 50 kg.\n\nAir Resistance Coefficient: A slider from 0 (no air resistance) to 0.5 (high air resistance).\n\nGravitational Field Strength (m/s²): A slider from 1 m/s² (e.g., Moon) to 24 m/s² (e.g., Jupiter), with Earth's gravity (9.81 m/s²) as the default.\n\nD. Control Buttons:\n\nFIRE / START: A large, prominent button to launch the projectile with the current parameters.\n\nRESET / CLEAR: A button to stop the current simulation, clear the trajectory, and reset all data displays.\n\n2. Key Data Display (Numerical Readouts)\nA dedicated \"Flight Data\" panel must display the following information, updated in real-time during the flight and finalized upon landing:\n\nMaximum Height (Y_max): The highest vertical point reached by the projectile, in meters.\n\nHorizontal Distance to Max Height (X_to_peak): The horizontal distance traveled from the launch point to the point directly below the maximum height.\n\nHorizontal Distance from Max Height to Landing (X_from_peak): The horizontal distance traveled from the point directly below the maximum height to the landing point.\n\nTotal Horizontal Distance (Range): The sum of X_to_peak and X_from_peak.\n\n(Optional but useful) Time of Flight: The total time the projectile was in the air.\n\n3. Key Functionality & Physics\nA. The \"Fire\" Button:\n\nThe simulation only begins when the Fire button is pressed.\n\nUpon pressing \"Fire\", the cannonball is launched with the current parameter values.\n\nB. Physics Model & Data Tracking: \nThe simulation must use accurate physics calculations. The core logic should be implemented using numerical integration (Euler or Verlet method) to correctly handle air resistance and track the required data points.\n\nPseudocode for Physics and Data Tracking:\n\njavascript\n// === SIMULATION PARAMETERS ===\nlet speed, angle, mass, gravity, airResistanceCoeff;\n\n// === PROJECTILE STATE ===\nlet x, y, vx, vy, time;\nlet isFlying = false;\nlet trajectoryPoints = [];\n\n// === DATA TRACKING VARIABLES ===\nlet maxHeight = 0;\nlet distanceToMaxHeight = 0;\nlet distanceFromMaxHeightToLanding = 0;\nlet totalRange = 0;\n\n// === FIRING MECHANISM ===\nfunction fireCannon() {\n  // Reset state and tracking variables\n  isFlying = true;\n  trajectoryPoints = [];\n  x = 0;\n  y = 0; // Launch from origin\n  time = 0;\n  maxHeight = 0;\n  distanceToMaxHeight = 0;\n  distanceFromMaxHeightToLanding = 0;\n\n  // Convert angle to radians and set initial velocity\n  let angleRad = radians(angle);\n  vx = speed * cos(angleRad);\n  vy = speed * sin(angleRad);\n}\n\n// === PHYSICS UPDATE (WITH AIR RESISTANCE) ===\nfunction updateProjectileWithAirResistance() {\n  let dt = 0.1; // Time step\n  time += dt;\n\n  // Calculate velocity magnitude for air resistance\n  let velocity = sqrt(vx*vx + vy*vy);\n\n  // Calculate air resistance force components\n  let F_air_x = -airResistanceCoeff * vx * velocity;\n  let F_air_y = -airResistanceCoeff * vy * velocity;\n\n  // Calculate acceleration (F = ma -> a = F/m)\n  let ax = F_air_x / mass;\n  let ay = -gravity + (F_air_y / mass);\n\n  // Update velocity and position\n  vx += ax * dt;\n  vy += ay * dt;\n  x += vx * dt;\n  y += vy * dt; // Note: y is positive upwards\n\n  // --- CRITICAL DATA TRACKING ---\n  \n  // 1. Track Maximum Height\n  if (y > maxHeight) {\n    maxHeight = y;\n    // 2. When a new max height is set, record the horizontal distance to this point\n    distanceToMaxHeight = x;\n  }\n\n  // Store point for trajectory line\n  trajectoryPoints.push({x: x, y: y});\n\n  // Check for landing (projectile hits the ground, y <= 0)\n  if (y <= 0 && isFlying) {\n    isFlying = false;\n    totalRange = x;\n    // 3. Calculate the horizontal distance FROM the max height point TO the landing point\n    distanceFromMaxHeightToLanding = totalRange - distanceToMaxHeight;\n    \n    // Update the data display panel with final values\n    updateDataDisplay();\n  }\n}\n4. User Workflow & Learning Outcomes\nHow a student would use the simulator:\n\nBasic Exploration: Adjust the angle and speed sliders and press Fire. Observe how the trajectory changes and see the numerical values for Max Height, X_to_peak, and X_from_peak update.\n\nDiscover Symmetry: Set air resistance to 0. Notice that for a given speed, the X_to_peak and X_from_peak are equal at 45°, demonstrating symmetric motion.\n\nUnderstand Air Resistance: Increase air resistance. Observe how the trajectory becomes asymmetric and X_from_peak becomes shorter than X_to_peak because the projectile loses more horizontal speed on the way down.\n\nExperiment with Mass: With air resistance on, fire projectiles with different masses but the same speed and angle. Observe that a heavier projectile is less affected by air resistance, resulting in a larger X_from_peak and a more symmetric path.\n\nAnalyze Gravity: Change gravity to a low value (Moon). Observe the large increase in Maximum Height and Time of Flight, and note that the horizontal distances X_to_peak and X_from_peak are still equal without air resistance.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Projectile Motion Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Projectile Motion Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Projectile_Motion_Simulator_20251030",
    "title": "Projectile Motion Simulator 20251030",
    "folder": "Projectile_Motion_Simulator_20251030",
    "folderPath": "Projectile_Motion_Simulator_20251030",
    "indexPath": "Projectile_Motion_Simulator_20251030/index.html",
    "modifiedTime": "2025-12-21T13:27:31.209167",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "Projectile_Motion_Simulator_20251030.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Projectile_Motion_Simulator_20251031",
    "title": "Projectile Motion Simulator 20251031",
    "folder": "Projectile_Motion_Simulator_20251031",
    "folderPath": "Projectile_Motion_Simulator_20251031",
    "indexPath": "Projectile_Motion_Simulator_20251031/index.html",
    "modifiedTime": "2026-01-30T21:51:16",
    "topic": "Chinese Text to Speech with Hanyu Pinyin",
    "gradeLevel": "Primary 3-4",
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "═══════════════════════════════════════════════════════════\n📚 SLS INTERACTIVE PROMPT - FULL DETAILS\n═══════════════════════════════════════════════════════════\n\n📋 PROMPT DETAILS:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📚 Topic: Chinese Text to Speech with Hanyu Pinyin\n🎯 Grade Level: Primary 3-4\n📖 Subject Area: Chinese Language\n🎮 Interaction Type: Auto-detect\n🔧 Specific Requirements: None specified\n📅 Generated: 31/10/2025, 1:47:09 pm\n\n═══════════════════════════════════════════════════════════\n🤖 FULL PROMPT FOR CLAUDE:\n═══════════════════════════════════════════════════════════\n\nSYSTEM CONTEXT - SLS Interactive Development Master Prompt:\nYou are a web developer specialized in HTML5 educational content creation. Follow these critical requirements:\n\nTECHNICAL REQUIREMENTS:\n- Create a completely self-contained HTML file (no external libraries or dependencies)\n- All code must run entirely offline with HTML, CSS, and JavaScript embedded in a single file\n- Optimize for iframe environment: 100% width, 450px height in iframe, 90vh when opened in new tab\n- Support both touch and mouse interactions with appropriate target sizes\n\nDESIGN PRINCIPLES:\n- Align to Singapore curriculum standards and mathematical notations\n- Apply cognitive load theory and Mayer's 12 principles of multimedia learning\n- Use information visualization best practices\n- Maintain clean, intuitive layout with visual cues (shadows, highlights) for interaction states\n- Use center tooltips for displaying extensive text information in iframe mode\n- Optimize button sizing: height fits text, width accommodates text without wrapping\n- No header text at top to save vertical space; use tooltips on hover for titles\n\nPEDAGOGICAL REQUIREMENTS:\n- Ground design in instructional and cognitive psychology\n- Minimize extraneous cognitive load\n- Provide immediate feedback for interactions\n- Include clear labels, legends, and brief explanations\n- Enable active learning through meaningful interactions\n\nCODE QUALITY:\n- Include comprehensive comments explaining what code does and how it works\n- Use proper formatting and structure\n- Generate complete, functional JavaScript for all interactive elements\n- Ensure all simulations/games/visualizations work correctly\n\n═══════════════════════════════════════════════════════════\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 simulation about Chinese Text to Speech with Hanyu Pinyin.\n\nTARGET AUDIENCE: Primary 3-4 - Chinese Language\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Chinese Text to Speech with Hanyu Pinyin\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.\n\n═══════════════════════════════════════════════════════════\n💡 USAGE INSTRUCTIONS:\n═══════════════════════════════════════════════════════════\n1. Copy this entire text\n2. Open Claude (claude.ai)\n3. Paste the prompt section into Claude\n4. Claude will generate your interactive HTML file\n5. Save the HTML file to your SLS or website\n6. Share this full details document with colleagues for reference\n\nGenerated by: SLS Prompt Generator for Educational Interactive Creation\n═══════════════════════════════════════════════════════════",
    "hasZip": true,
    "zipPath": "Projectile_Motion_Simulator_20251031.zip",
    "hasPromptImage": true,
    "promptImagePath": "Projectile_Motion_Simulator_20251031/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Projectile_Motion_Simulator_20251031/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Reading Emotional Curve Studio",
    "title": "Reading Emotional Curve Studio",
    "folder": "Reading Emotional Curve Studio",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Reading Emotional Curve Studio.html",
    "modifiedTime": "2025-12-21T13:27:07.547270",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Reading Emotional Curve Studio\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Reading Emotional Curve Studio\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Reading Emotional Curve Studio\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Reading Emotional Curve Studio.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Reading Emotional Curve Studio_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Recorder_Fingering_Interactive_20260225",
    "title": "Recorder Fingering Interactive 20260225",
    "folder": "Recorder_Fingering_Interactive_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Recorder_Fingering_Interactive_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Recorder_Fingering_Interactive_20260225/index.html",
    "modifiedTime": "2026-02-25T13:35:48",
    "topic": null,
    "gradeLevel": "Primary 3",
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Recorder by cindy Learning Objectives: [insert here] Interactive Prompt:   I want to design a simulation interactive for my students.  Grade level: Primary 3  Student readiness level: Mixed Abilities  The simulation is based on: recorder (woodwind music instrument) fingerings and sounds  The objective of the simulation is to: let students hear the recorder sounds, and see the fingering for the corresponding note.  While using the simulation, students should experience: clicking the letter name, hear the corresponding note, and see the fingering on a recorder.     The interface should include: picture of recorder,  letter names buttons that will play a sound of corresponding note when the button is clicked, fingering of the recorder..\nTARGET AUDIENCE: Primary 3-4 - Music\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\nRecorder by cindy\nLearning Objectives: [insert here]\nInteractive Prompt:\n \nI want to design a simulation interactive for my students.\nGrade level: Primary 3\nStudent readiness level: Mixed Abilities\nThe simulation is based on: recorder (woodwind music instrument) fingerings and sounds\nThe objective of the simulation is to: let students hear the recorder sounds, and see the fingering for the corresponding note.\nWhile using the simulation, students should experience: clicking the letter name, hear the corresponding note, and see the fingering on a recorder.\n \nThe interface should include: picture of recorder,  letter names buttons that will play a sound of corresponding note when the button is clicked, fingering of the recorder.\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Recorder by cindy Learning Objectives: [insert here] Interactive Prompt:   I want to design a simulation interactive for my students.  Grade level: Primary 3  Student readiness level: Mixed Abilities  The simulation is based on: recorder (woodwind music instrument) fingerings and sounds  The objective of the simulation is to: let students hear the recorder sounds, and see the fingering for the corresponding note.  While using the simulation, students should experience: clicking the letter name, hear the corresponding note, and see the fingering on a recorder.     The interface should include: picture of recorder,  letter names buttons that will play a sound of corresponding note when the button is clicked, fingering of the recorder.\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.\nRead Less\nRefine\nthe view of the musical instrument is currently cut off showing only 2,3,4.\n\ncan increase the height to show all the different holes in a single view ?",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Recorder_Fingering_Interactive_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Recorder_Fingering_Interactive_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Recorder Fingering Simulator",
    "title": "Recorder Fingering Simulator",
    "folder": "Recorder Fingering Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Recorder Fingering Simulator.html",
    "modifiedTime": "2025-12-21T13:27:04.446171",
    "topic": null,
    "gradeLevel": "Primary 3",
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "Recorder by cindy\nLearning Objectives: [insert here]\nInteractive Prompt:\n \nI want to design a simulation interactive for my students.\n\nGrade level: Primary 3\n\nStudent readiness level: Mixed Abilities\n\nThe simulation is based on: recorder (woodwind music instrument) fingerings and sounds\n\nThe objective of the simulation is to: let students hear the recorder sounds, and see the fingering for the corresponding note.\n\nWhile using the simulation, students should experience: clicking the letter name, hear the corresponding note, and see the fingering on a recorder.\n\n \n\nThe interface should include: picture of recorder,  letter names buttons that will play a sound of corresponding note when the button is clicked, fingering of the recorder. ",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Recorder Fingering Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Recorder Fingering Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Rhythmic_Ostinato_Explorer_20260219",
    "title": "Rhythmic Ostinato Explorer 20260219",
    "folder": "Rhythmic_Ostinato_Explorer_20260219",
    "folderPath": "SDCDworkshop2026/Rhythmic_Ostinato_Explorer_20260219",
    "indexPath": "SDCDworkshop2026/Rhythmic_Ostinato_Explorer_20260219/index.html",
    "modifiedTime": "2026-02-19T13:07:28",
    "topic": null,
    "gradeLevel": "Secondary 3",
    "subject": "Music",
    "hasPrompt": true,
    "promptText": "Ji Heng Prompt:\nGrade level: Secondary 3\n\nStudent readiness level: Mixed Abilities\n\nThe game is based on: Interactive rhythmic ostinato exploration where students discover, activate, and layer different repeating percussion patterns using a variety of MIDI percussion sounds (drums, cymbals, shakers, bells, woodblocks, etc.) to create complex polyrhythmic textures\n\nThe objective of the game is to: Understand how rhythmic ostinatos function as foundational elements in music, learn to identify different percussion timbres and their rhythmic patterns, and develop skills in layering multiple rhythms to create intricate polyrhythmic compositions\n\nWhile playing the game, students should experience: Selecting from a palette of percussion instruments with distinct MIDI sounds, activating individual ostinato patterns that loop continuously, layering multiple rhythmic patterns simultaneously to hear how they interact, experimenting with different combinations to create unique polyrhythmic textures, and discovering how ostinatos from different world music traditions can be combined\n\nThe interface should include: Grid-based pattern sequencer showing visual rhythm notation, extensive MIDI percussion sound library with instrument icons (kick drum, snare, hi-hat, congas, bongos, tambourine, triangle, cowbell, claves, etc.), individual play/stop buttons for each ostinato pattern, volume sliders for each percussion layer, tempo control affecting all patterns simultaneously, visual metronome with beat indicators, pattern length options (4, 8, 16 beats), preset ostinato library from various musical cultures, and recording capability to save layered creations\n\nThis approach allows students to experience the power of rhythmic ostinatos through hands-on experimentation with authentic percussion sounds and polyrhythmic layering.\n\nRefinement:\n\nI want to be able to extend the tempo to more than 180, so enable it to be a numerical input function\n \nAlso I want to be able to have envelope features - cut off, resonance. And shift the volume control to the right side so that the bar is not so long",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Rhythmic_Ostinato_Explorer_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Rhythmic_Ostinato_Explorer_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Riemann Sum Explorer",
    "title": "Riemann Sum Explorer",
    "folder": "Riemann Sum Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Riemann Sum Explorer.html",
    "modifiedTime": "2025-12-21T13:27:03.013375",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Riemann Sum Explorer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Riemann Sum Explorer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Riemann Sum Explorer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Riemann Sum Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Riemann Sum Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\School Day Timeline",
    "title": "School Day Timeline",
    "folder": "School Day Timeline",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/School Day Timeline.html",
    "modifiedTime": "2025-12-21T13:26:57.873352",
    "topic": null,
    "gradeLevel": null,
    "subject": "Biology",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“School Day Timeline”** where students drag activity cards (e.g., Wake Up, Breakfast, Go to School) into the correct time-of-day sections (Morning, Afternoon, Evening) on a visual timeline.\n\nTARGET AUDIENCE:\n- Lower Primary / Middle Primary students (approx. ages 7–9)\n\nINTERACTIVE REQUIREMENTS:\n- A set of **activity cards** representing common daily school-day activities, each with:\n  - An icon/illustration.\n  - A short label (e.g., “Wake Up”, “Breakfast”, “Go to School”, “Recess”, “Lessons”, “Lunch”, “Go Home”, “Homework”, “Dinner”).\n  - A data attribute indicating its correct **time-of-day** category (morning/afternoon/evening).\n- A **timeline area** divided into three labelled sections:\n  - Morning (6:00 AM – 12:00 PM) with icon (e.g., 🌅).\n  - Afternoon (12:00 PM – 6:00 PM) with icon (☀️).\n  - Evening (6:00 PM – 10:00 PM) with icon (🌙).\n- Each section has a **drop zone** where cards can be dropped and a “drop hint” text that disappears once cards are placed.\n- Students **drag and drop** activity cards into the time sections they believe are correct.\n- Controls:\n  - **“Check My Timeline”** button: evaluates placements and gives feedback.\n  - **“Reset”** button: clears the timeline and returns all cards to the starting area.\n- A **feedback area** that shows performance messages with simple icons/emojis.\n- Self-contained HTML, CSS, and JavaScript (no external libraries required).\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Dragging must work with both mouse and touch (on phones/tablets).\n  - Layout adapts for iframe or full browser use (container height adjusted accordingly).\n\nSPECIFIC REQUIREMENTS:\n\nActivity cards\n- Place all activity cards in an `activity-cards` container initially.\n- Each card:\n  - Has class `.card`.\n  - Is `draggable=\"true\"` for desktop drag-and-drop.\n  - Has `data-time` attribute indicating the correct time period (e.g., `data-time=\"morning\"`).\n  - Has `data-activity` to uniquely identify the activity.\n  - Contains an image (e.g., inline SVG) and a label `<span>`.\n- There should be **9 activities** in total (3 per time period).\n\nTimeline sections and drop zones\n- Three `.time-section` blocks with:\n  - A header showing icon, time-of-day label, and approximate time range.\n  - A `.drop-zone` element (`data-time=\"morning\"|\"afternoon\"|\"evening\"`) where cards can be dropped.\n  - Each drop zone initially shows a hint (e.g., “Drag morning activities here”), which hides once at least one card is placed.\n\nDrag-and-drop interactions (desktop)\n- Implement standard HTML5 drag-and-drop:\n  - On card `dragstart`:\n    - Mark the card as dragging, store it as the current `draggedElement`.\n    - Set `effectAllowed` and `dataTransfer` appropriately.\n  - On drop zone `dragover`:\n    - Prevent default to allow drop.\n    - Add a `drag-over` highlight class to the drop zone.\n  - On `drop`:\n    - Remove highlight class.\n    - Move the `draggedElement` into that drop zone.\n    - Clone vs move logic should ensure the card isn’t duplicated; the original should move.\n  - On `dragend`:\n    - Clear dragging state, reset references.\n\nTouch interactions (mobile)\n- For each card, implement touch handlers:\n  - On `touchstart`:\n    - Mark the card as being dragged.\n    - Record initial touch coordinates.\n  - On `touchmove`:\n    - Position the card near the finger (`position: fixed`, updated left/top, high z-index).\n    - Use `document.elementFromPoint()` to detect if the finger is over a drop zone and visually highlight that zone (add `drag-over`).\n  - On `touchend`:\n    - Reset card positioning styling.\n    - Remove highlights from all drop zones.\n    - If the final touch position is over a drop zone, move the card into that zone.\n- Ensure default touch behaviours (scrolling/zoom) do not interfere with dragging (use `preventDefault()` judiciously).\n\nPlacement logic\n- When moving a card into a drop zone:\n  - Append the card element as a child of the drop zone.\n  - Hide the drop hint (e.g., set `display: none`).\n  - Reattach drag/touch event listeners to the moved card so it can be dragged again if needed.\n  - Clear any existing feedback message (so students understand they need to re-check).\n\nChecking answers\n- On “Check My Timeline” click:\n  - For each drop zone:\n    - Read its `data-time` (morning/afternoon/evening).\n    - Inspect all `.card` elements inside.\n    - For each card, compare its `data-time` with the drop zone’s `data-time`.\n      - If they match, count as **correct placement**.\n      - Otherwise, count as **incorrect placement**.\n  - Count:\n    - `correctCount`: total # of correctly placed cards.\n    - `totalPlaced`: total # of cards placed in any drop zone.\n  - Visual feedback on sections:\n    - For drop zones where all contained cards are correct, add a `correct` class.\n    - For zones with any incorrect cards, add an `incorrect` class.\n\nFeedback messages\n- Show feedback in `#feedback` (previously hidden by `hidden` class):\n  - Case 1: All 9 cards placed and all correct:\n    - Message like: `🎉 Excellent! You got all activities in the right time! Well done!`.\n    - Add `success` class; trigger a subtle celebration animation (e.g., container pulse).\n  - Case 2: All placed cards are correct but not all 9 placed:\n    - Message like: `✅ Great job! 6 activities are correct. Try placing the remaining activities.`.\n    - Add `success` class.\n  - Case 3: More than half of placed cards are correct but not perfect:\n    - Message like: `👍 Good try! You got X out of Y activities correct. Keep going!`.\n    - Add `error` class to encourage improvement but with positive tone.\n  - Case 4: Half or fewer correct:\n    - Message like: `🤔 Let's try again! Think about when you do these activities during the day.`.\n    - Add `error` class.\n\nReset behaviour\n- On “Reset” button:\n  - Move all cards from timeline drop zones back to the `activity-cards` container.\n  - Reattach drag & touch handlers.\n  - Show all `drop-hint` texts again.\n  - Remove `correct`, `incorrect`, `drag-over` classes from drop zones.\n  - Hide and clear the feedback message (`feedback` gets `hidden` class again).\n\nTooltips and accessibility\n- Use `title` attributes on key elements (e.g., container, buttons) and mirror them to `aria-label` for improved accessibility.\n- Simple tooltip handling:\n  - On mouseenter, copy the `title` into `aria-label`.\n  - On mouseleave, remove the temporary `aria-label`.\n- Add `aria-label` on the main container describing the activity (e.g., “School Day Timeline – Drag activities to the correct time of day”).\n\nResponsive behaviour\n- When embedded in an iframe, apply a class or style (e.g., `body.iframe-mode`) to set container height to about 450px.\n- In full browser mode, use `90vh` height for the main container.\n- On window resize, adjust container height accordingly.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Recognise typical school-day activities (wake up, breakfast, school, recess, lessons, lunch, go home, homework, dinner).\n  - Sort and sequence activities into appropriate **time-of-day** categories.\n  - Reflect on their daily routines and time organisation.\n- The activity should be simple, visual, and encourage trial-and-error with supportive feedback.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop with both mouse and touch.\n- Clear visual grouping of morning/afternoon/evening.\n- Immediate visual cues when dragging over valid drop zones.\n- Rich feedback messages showing correctness and encouraging further attempts.\n- Reset functionality for repeated practice.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/School Day Timeline.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/School Day Timeline_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\School Heroes Adventure",
    "title": "School Heroes Adventure",
    "folder": "School Heroes Adventure",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/School Heroes Adventure.html",
    "modifiedTime": "2025-12-21T13:27:01.478405",
    "topic": null,
    "gradeLevel": "Primary 1",
    "subject": null,
    "hasPrompt": true,
    "promptText": "By Josh\nBehavioural Expectations\nLearning Objectives: Identified Primary One students with social and behavioural difficulties are able identify the appropriate classroom work habits in a primary school context\n \nInteractive Prompt:\n \nI want to design a game-based learning interactive for my students.\n\n \n\n \n\nGrade level: Primary 1\n\n \n\n \n\nStudent readiness level: Lower Progress with learning and behavioural needs\n\n \n\n \n\nThe game is based on: expected prosocial behaviours in a primary school\n\n \n\n \n\nThe objective of the game is to: for students to identify the appropriate situations to behave in a primary school context\n\n \n\n \n\nWhile playing the game, students should experience: making meaningful choices that affect story outcomes and discovering new information through exploration\n\n \n\n \n\nThe interface should include: comic style pictures, score counter, level progress display, celebration messages, dialogue boxes, progress tracking, decision buttons, larger text font size",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/School Heroes Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/School Heroes Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "School_Heroes_Adventure_20251116",
    "title": "School Heroes Adventure 20251116",
    "folder": "School_Heroes_Adventure_20251116",
    "folderPath": "School_Heroes_Adventure_20251116",
    "indexPath": "School_Heroes_Adventure_20251116/index.html",
    "modifiedTime": "2025-12-21T13:27:32.740436",
    "topic": "Social Skills",
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Mr Josh Wong (Wong Han Xian)\n\nEdited on07 Nov 2025 10:15 PM\n0 Comments\n0 Votes\nSubject & Level: Self-Management Skills (Lower Primary)\n\nTopic: Social Skills\n\nScreenshots/HTML5 file: Attach a screenshot and/of file of your interactive or image to show and share your work.\nInteractive/Content: Students to identify the appropriate situations to behave in a primary school context",
    "hasZip": true,
    "zipPath": "School_Heroes_Adventure_20251116.zip",
    "hasPromptImage": true,
    "promptImagePath": "School_Heroes_Adventure_20251116/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260128091738",
    "title": "scorable newTab quiz Interactive 20260128091738",
    "folder": "scorable_newTab_quiz_Interactive_20260128091738",
    "folderPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260128091738",
    "indexPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260128091738/index.html",
    "modifiedTime": "2026-02-05T03:58:46",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260128091738.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": true
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260203040441_1",
    "title": "scorable newTab quiz Interactive 20260203040441 1",
    "folder": "scorable_newTab_quiz_Interactive_20260203040441_1",
    "folderPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260203040441_1",
    "indexPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260203040441_1/index.html",
    "modifiedTime": "2026-02-05T06:35:34",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_quiz_Interactive_20260203040441_1.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": true
  },
  {
    "id": "SDCDworkshop2026\\1materialsUsed\\scorable_newTab_timeline_AIused+index",
    "title": "scorable newTab timeline AIused+index",
    "folder": "scorable_newTab_timeline_AIused+index",
    "folderPath": "SDCDworkshop2026/1materialsUsed",
    "indexPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html",
    "modifiedTime": "2026-02-25T22:31:19.660879",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": false,
    "zipPath": null,
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html",
    "title": "scorable newTab timeline AIused+index.html",
    "folder": "scorable_newTab_timeline_AIused+index.html",
    "folderPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html",
    "indexPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html/index.html",
    "modifiedTime": "2026-02-06T03:28:58",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "SDCDworkshop2026/1materialsUsed/scorable_newTab_timeline_AIused+index.html/instruction.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": true
  },
  {
    "id": "ACPcookout2025\\users\\Security Challenges in Globalisation - Interactive Game",
    "title": "Security Challenges in Globalisation - Interactive Game",
    "folder": "Security Challenges in Globalisation - Interactive Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Security Challenges in Globalisation - Interactive Game.html",
    "modifiedTime": "2025-12-21T13:27:01.917266",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Security Challenges in Globalisation - Interactive Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Security Challenges in Globalisation - Interactive Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Security Challenges in Globalisation - Interactive Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Security Challenges in Globalisation - Interactive Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Security Challenges in Globalisation - Interactive Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/Security_Challenges_in_Globalisation_-_Interactive_Game_20260225",
    "title": "Security Challenges in Globalisation - Interactive Game 20260225",
    "folder": "Security_Challenges_in_Globalisation_-_Interactive_Game_20260225",
    "folderPath": "SDCDworkshop2026/1materialsUsed/Security_Challenges_in_Globalisation_-_Interactive_Game_20260225",
    "indexPath": "SDCDworkshop2026/1materialsUsed/Security_Challenges_in_Globalisation_-_Interactive_Game_20260225/index.html",
    "modifiedTime": "2026-02-25T13:37:26",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\nCreate an interactive HTML5 auto-detect about \"Security Challenges in Globalisation - Interactive Game.\nTARGET AUDIENCE: Secondary 1-2 - Character & Citizenship Education\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\nSPECIFIC REQUIREMENTS:\nUSER TASK SPECIFICATION:\nCreate a complete, functional HTML5 interactive titled **\"Security Challenges in Globalisation - Interactive Game\"**.\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Security Challenges in Globalisation - Interactive Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Security Challenges in Globalisation - Interactive Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\nLEARNING OUTCOMES:\n- Students should be able to explore and understand \"Security Challenges in Globalisation - Interactive Game\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR QUIZ/GAME INTERACTIVES:\n- Implement a real-time analytics panel showing:\n  * Question number and text\n  * Correct answer\n  * Student's selected answer\n  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)\n  * Sequential log of all attempts to reveal misconception patterns\n- Display analytics in a clear, scrollable panel\n- Use Unicode symbols and color coding for visual clarity\n- Purpose: Allow teachers to identify student misconceptions and thinking patterns\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n \n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/Security_Challenges_in_Globalisation_-_Interactive_Game_20260225.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/Security_Challenges_in_Globalisation_-_Interactive_Game_20260225/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Self-Discovery Interactive",
    "title": "Self-Discovery Interactive",
    "folder": "Self-Discovery Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Self-Discovery Interactive.html",
    "modifiedTime": "2025-12-21T13:27:00.543890",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Self-Discovery Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Self-Discovery Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Self-Discovery Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Self-Discovery Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Self-Discovery Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Sentence Error Clinic - Chinese Language Games",
    "title": "Sentence Error Clinic - Chinese Language Games",
    "folder": "Sentence Error Clinic - Chinese Language Games",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Sentence Error Clinic - Chinese Language Games.html",
    "modifiedTime": "2025-12-21T13:27:08.978534",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "By Xueping\nLearning Objectives: \n引导学生理解文本的情感\n\n提高学生的社交情绪管理能力\n\n \nInteractive Prompt: \n \n\n你是一位友善的“阅读心理分析师”，也是语文课堂里的“情感曲线绘制师”。  \n你正在与中学生一起玩一个名为《阅读情感曲线》的语文游戏。\n \n\n【你的任务】\n帮助学生：\n1. 识别文本中的情感起伏（如平静、兴奋、悲伤、希望等）；\n2. 用曲线或文字描述情感变化；\n3. 解释情感转折的原因（人物、事件、意象、用词）；\n4. 引导学生反思：作者为何要安排这样的情绪变化。\n \n\n【互动规则】\n当学生输入文本、句子或段落时：\n1️⃣ 让学生说出主要情感（如喜、怒、哀、乐、忧、思、恐、惊）；  \n2️⃣ 鼓励学生标出三个以上情感转折点（起点—高潮—结尾）；  \n3️⃣ 生成一条“文字版情感曲线”，并附简短点评；  \n4️⃣ 引导学生思考情感变化的原因；  \n5️⃣ 最后请学生为整首诗或文章的“情感节奏”命名（如“渐强式”“波浪式”“螺旋上升式”等）。\n \n\n【输出格式】\n请使用以下结构输出：\n🎭 **情感阶段识别**：列出每个阶段的情绪（例如：平静→激昂→悲伤→超脱）。  \n📈 **文字曲线描述**：用文字描绘情感走势（如：“情绪从平稳逐渐上升，到结尾突然转折”）。  \n💬 **转折点分析**：指出导致情绪变化的关键句、意象或事件。  \n🪞 **作者意图/读者反思**：说明情感安排的意义。  \n🌟 **激励反馈**：鼓励学生进一步优化曲线或与同伴比较。\n \n\n【语气要求】\n- 温暖、启发性强，避免机械化批改语气。\n- 可使用表情符号（🎭📈💬🪞🌟）提升游戏感。\n- 若学生答案笼统，鼓励他用“更具体的感受词”；  \n  若学生答案深入，赞赏其洞察力并邀请他命名曲线。\n \n\n【示范】\n输入文本：李白《将进酒》  \n输出示范：  \n🎭 情感阶段识别：激昂 → 狂放 → 愁苦 → 昂扬超脱  \n📈 文字曲线描述：情绪一开始高昂，随后出现短暂低谷，最终再次攀升至豪迈的顶点。  \n💬 转折点分析：“但愿长醉不愿醒”是情绪低谷的关键句。  \n🪞 作者意图/读者反思：李白通过起伏的情绪表达对生命无常与理想追求的矛盾。  \n🌟 激励反馈：太棒了！你抓住了“豪放与悲凉共存”的灵魂节奏，试着为这条曲线命名吧！\n \n\n准备好后，请以“🎭 欢迎来到阅读情感曲线工作室！”开场。\n ",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Sentence Error Clinic - Chinese Language Games.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Sentence Error Clinic - Chinese Language Games_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Shadow_Formation_Virtual_Lab_20251103",
    "title": "Shadow Formation Virtual Lab 20251103",
    "folder": "Shadow_Formation_Virtual_Lab_20251103",
    "folderPath": "Shadow_Formation_Virtual_Lab_20251103",
    "indexPath": "Shadow_Formation_Virtual_Lab_20251103/index.html",
    "modifiedTime": "2025-12-21T13:27:31.486649",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Shadow Formation Virtual Lab.\n\nTARGET AUDIENCE: Primary 5-6 - Science (General)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Shadow Formation Virtual Lab\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Shadow_Formation_Virtual_Lab_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Shadow_Formation_Virtual_Lab_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Shadow_Formation_Virtual_Lab_20251103/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "Shadow_Formation_Virtual_Lab_20251114",
    "title": "Shadow Formation Virtual Lab 20251114",
    "folder": "Shadow_Formation_Virtual_Lab_20251114",
    "folderPath": "Shadow_Formation_Virtual_Lab_20251114",
    "indexPath": "Shadow_Formation_Virtual_Lab_20251114/index.html",
    "modifiedTime": "2025-12-21T13:26:57.105424",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Shadow Formation Virtual Lab.\n\nTARGET AUDIENCE: Primary 5-6 - Science (General)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\n- Clear variable controls with sensible ranges and units\n- Contextual tooltips/glossary for symbols/terms\n- Create a fully interactive and realistic shadow formation virtual lab for a point/beam light source, opaque object, and screen.\n- Refer to a stored \"layout picture\" of the virtual lab as design knowledge; if this reference image fails to load, show a clear on-screen error log message (for the teacher).\n- Layout: on the left, show a point/beam light source; in the centre, an opaque object (selectable via combo box: cube or sphere); on the right, a screen where the shadow is cast.\n- From the light source, draw exactly two straight light rays that are mathematically tangent to the top and bottom of the opaque object (edge of cube, or tangents to the circle for the sphere case).\n- Ensure the two light rays continue as straight lines until they meet the screen on the right; use correct geometry to compute the intersection points and shadow size on the screen.\n- The shadow width on the screen must be mathematically accurate based on similar triangles (point source, object, and screen distances).\n- Make the light source, object, and screen draggable along the horizontal (x) direction only; prevent them from overlapping while keeping all light rays and shadows updated in real time.\n- Constrain dragging so that the light source always stays to the left of the object, and the screen always stays to the right of the object, within the visible plotting panel.\n- Light rays must always stop at the screen; if the screen is moved so that a ray would miss it, allow the ray to extend to the end of the plotting panel to illustrate that the ray continues in a straight line.\n- Include a simple top control panel with Play, Pause, and Reset buttons.\n- Play button: automatically oscillate the light source left and right, between the left boundary (xmin of view) and a safe distance from the object, while updating the light rays and shadow dynamically.\n- Pause button: freeze the animation but keep allowing manual dragging of light source, object, and screen.\n- Reset button: restore default positions and sizes of the light source, object, and screen, and clear any animation state.\n- Use clear labels and brief explanations suitable for Primary 5–6 Science, emphasizing terms such as \"light ray\", \"opaque object\", and \"shadow\".\n- Focus on scientific accuracy (straight-line propagation of light, correct tangents, and similar triangles) while keeping the interface simple and age-appropriate.\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Shadow Formation Virtual Lab\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\n\nFOR SIMULATION/INTERACTIVE TOOLS:\n- Implement a real-time action log showing:\n  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)\n  * Description of action taken (e.g., \"Slider moved to 45°\", \"Reset button clicked\")\n  * Current state/values after action\n  * Sequential log of all interactions\n- Display action log in a clear, scrollable panel\n- Use Unicode symbols to mark different action types\n- Purpose: Allow teachers to understand student exploration patterns and thinking process\n\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\n\n\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\n\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.",
    "hasZip": true,
    "zipPath": "Shadow_Formation_Virtual_Lab_20251114.zip",
    "hasPromptImage": true,
    "promptImagePath": "Shadow_Formation_Virtual_Lab_20251114/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Sign Language Spelling Adventure",
    "title": "Sign Language Spelling Adventure",
    "folder": "Sign Language Spelling Adventure",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Sign Language Spelling Adventure.html",
    "modifiedTime": "2025-12-21T13:27:00.827086",
    "topic": null,
    "gradeLevel": "Primary 1",
    "subject": null,
    "hasPrompt": true,
    "promptText": "By Zhan Zhi\nLLearning Objectives:\nI want to design a game-based learning interactive for my students with hearing loss. Students are familiar with basic Singapore Sign Language letter signs but need more practice linking the signs to printed letters.\n\n \n\nGrade level: Primary 1\n\n \n\nStudent readiness level: Lower Progress (need more support)\n\n \n\nThe game is based on: spelling words based on visuals to gain experience and unlock different accessories for their avatar that they can choose and equip from their inventory\n\n \n\nThe objective of the game is to: building automaticity in letter to letter sign correspondence\n\n \n\nWhile playing the game, students should experience: words of increasing difficulty, moving from monosyllabic words to multisyllabic words, and they should be able to see an image describing the meaning of the words, as well as a picture of the SgSL or ASL sign (and state) where possible; each correct response will give 10 points, and student will level up after every 50 points.\n\n \n\nThe interface should include: clickable navigation buttons, inventory display, dialogue boxes, progress tracking, decision buttons, a list of letter signs that students can choose from to spell the words. Ensure that the signs and letters are big enough for accessibility.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Sign Language Spelling Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Sign Language Spelling Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Sign Language Spelling Game",
    "title": "Sign Language Spelling Game",
    "folder": "Sign Language Spelling Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Sign Language Spelling Game.html",
    "modifiedTime": "2025-12-21T13:27:02.273542",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Sign Language Spelling Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Sign Language Spelling Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Sign Language Spelling Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Sign Language Spelling Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Sign Language Spelling Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Simulasi Interaktif Cerpen _Kudrat_",
    "title": "Simulasi Interaktif Cerpen  Kudrat ",
    "folder": "Simulasi Interaktif Cerpen _Kudrat_",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Simulasi Interaktif Cerpen _Kudrat_.html",
    "modifiedTime": "2025-12-21T13:27:07.194304",
    "topic": null,
    "gradeLevel": null,
    "subject": "Malay Language",
    "hasPrompt": true,
    "promptText": "By Erfasiah\nLearning Objectives: [Pelajar akan dapat berinteraksi dengan watak-watak Kudrat dan memahami ciri-ciri watak tersebut]\nInteractive Prompt: [\nTahap gred: Menengah 3 & 4\n\nTahap kesediaan pelajar: Kebolehan Campuran\n\nSimulasi ini berdasarkan: Penerokaan watak interaktif cerpen \"Kudrat\" yang menampilkan perbualan maya dengan watak-watak utama termasuk protagonis, ahli keluarga, dan tokoh masyarakat, lengkap dengan pilihan dialog autentik, kad profil watak, alat pemetaan hubungan, persekitaran penciptaan semula adegan, dan maklumat latar belakang kontekstual tentang latar dan tema cerita.\n\nWatak-watak yang diketahui termasuk:\n\nKudrat (protagonis)\nIbu Kudrat\nBapa Kudrat\nKetua kampung/pemimpin masyarakat\nWatak-watak jiran\nTokoh guru\nWatak rakan sebaya dari cerita\nAhli keluarga sokongan\nObjektif simulasi adalah untuk: Membolehkan pelajar memperdalam pemahaman mereka tentang motivasi dan hubungan watak, meneroka perspektif berbeza dalam naratif, mengamalkan pemikiran analitikal tentang perkembangan watak, memahami konteks budaya dan sosial yang dipersembahkan dalam cerita, dan mengembangkan empati melalui interaksi watak yang mendalam dalam persekitaran digital yang menyokong.\n\nSemasa menggunakan simulasi, pelajar sepatutnya mengalami: Memilih watak untuk berinteraksi dari galeri watak, memilih respons dialog yang sesuai yang mencerminkan pemahaman personaliti watak, meneroka laluan perbualan berbeza yang mendedahkan latar belakang watak, mengakses gelembung pemikiran watak yang menunjukkan motivasi dalaman, membandingkan bagaimana watak berbeza melihat peristiwa yang sama, membuka kunci wawasan cerita melalui interaksi bermakna, merekod pemerhatian watak dalam jurnal digital, menganalisis dinamik hubungan melalui pemetaan interaktif, dan mensintesis pemahaman mereka melalui aktiviti refleksi.\n\nAntara muka sepatutnya termasuk: Hab pemilihan watak dengan potret beranimasi dan penerangan ringkas, sistem pokok dialog dengan pelbagai pilihan respons yang mencerminkan tafsiran berbeza, latar belakang adegan interaktif yang sepadan dengan tetapan cerita, web hubungan watak yang menunjukkan sambungan dan konflik, buku nota digital untuk merekod wawasan dan petikan, pop-up konteks budaya yang menerangkan tradisi atau norma sosial yang berkaitan, narator audio dalam Bahasa Melayu dengan pilihan sarikata, penjejak kemajuan yang menunjukkan interaksi watak mana yang telah diselesaikan, gesaan refleksi yang menggalakkan analisis yang lebih mendalam, alat perbandingan untuk mengkaji perspektif watak berbeza tentang peristiwa utama, dan rubrik penilaian yang membantu pelajar menilai pemahaman mereka tentang perkembangan watak dan elemen tematik.\n\n]",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Simulasi Interaktif Cerpen _Kudrat_.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Simulasi Interaktif Cerpen _Kudrat__files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Simulasi Kehidupan CCA - Minggu Saya",
    "title": "Simulasi Kehidupan CCA - Minggu Saya",
    "folder": "Simulasi Kehidupan CCA - Minggu Saya",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Simulasi Kehidupan CCA - Minggu Saya.html",
    "modifiedTime": "2025-12-21T13:27:01.780094",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Simulasi Kehidupan CCA - Minggu Saya\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Simulasi Kehidupan CCA - Minggu Saya\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Simulasi Kehidupan CCA - Minggu Saya\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Simulasi Kehidupan CCA - Minggu Saya.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Simulasi Kehidupan CCA - Minggu Saya_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Simulasi Mahkamah_ Tanggungjawab Keluarga",
    "title": "Simulasi Mahkamah  Tanggungjawab Keluarga",
    "folder": "Simulasi Mahkamah_ Tanggungjawab Keluarga",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Simulasi Mahkamah_ Tanggungjawab Keluarga.html",
    "modifiedTime": "2025-12-21T13:27:03.206450",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Simulasi Mahkamah_ Tanggungjawab Keluarga\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Simulasi Mahkamah_ Tanggungjawab Keluarga\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Simulasi Mahkamah_ Tanggungjawab Keluarga\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Simulasi Mahkamah_ Tanggungjawab Keluarga.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Simulasi Mahkamah_ Tanggungjawab Keluarga_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Simultaneous Equations Explorer",
    "title": "Simultaneous Equations Explorer",
    "folder": "Simultaneous Equations Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Simultaneous Equations Explorer.html",
    "modifiedTime": "2025-12-21T13:27:06.801305",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Simultaneous Equations Explorer\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Simultaneous Equations Explorer\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Simultaneous Equations Explorer\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Simultaneous Equations Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Simultaneous Equations Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Singapore Air Quality Data Visualization",
    "title": "Singapore Air Quality Data Visualization",
    "folder": "Singapore Air Quality Data Visualization",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Singapore Air Quality Data Visualization.html",
    "modifiedTime": "2025-12-21T13:26:58.312131",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Singapore Air Quality Data Visualization”** that lets students explore simulated PSI and pollutant data for different regions of Singapore over several years, using a map and time-series charts.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary Geography / Science (approx. ages 11–14)\n\nINTERACTIVE REQUIREMENTS:\n- Central layout with two main panels:\n  - **Map panel**: clickable Singapore regions (North, Central, East, West, South) coloured by current PSI level.\n  - **Chart panel**: time-series graph showing PSI and pollutant trends over time for selected regions.\n- Top **control panel** including:\n  - Year filter dropdown (All, 2019–2023).\n  - Season filter dropdown (All, Dry, Wet, Inter-monsoon).\n  - **Compare Regions** toggle button (single vs multi-region view).\n  - **Data** button to download the filtered dataset as CSV.\n- **Pollutant toggles** for overlaying multiple lines on the chart:\n  - PM2.5\n  - PM10\n  - Ozone (O₃)\n- **Time slider** to scrub through the dataset and update:\n  - Current date label.\n  - Map region colours (based on PSI at that date).\n  - Region info panel (if open).\n- Detailed **region info panel** showing current PSI, pollutant breakdown, weather data, and basic statistics for the selected region.\n- **Significant event markers** on the chart that can be clicked to reveal more information in an event popup.\n- Tooltips on hover over map regions.\n- Self-contained HTML, CSS, and JavaScript (no external libraries), using canvas for charts and SVG for the map.\n- **MOBILE-RESPONSIVE**:\n  - Layout adapts to smaller screens; map and chart remain readable.\n\nSPECIFIC REQUIREMENTS:\n\nData model\n- Use simulated but realistic weekly PSI data from 2019–2023 for each region:\n  - Regions: North, Central, East, West, South.\n- For each region and date (weekly time step):\n  - `date` (Date object).\n  - `psi` (integer).\n  - `pm25` (μg/m³), `pm10` (μg/m³), `ozone` (μg/m³).\n  - `weather`: rainfall (mm), wind speed (km/h), wind direction (N/NE/…/NW), humidity (%).\n- PSI generation logic should include:\n  - Baseline levels.\n  - Seasonal variation (higher in dry season, lower in wet).\n  - Regional differences (e.g., slightly higher PSI in West/central industrial/urban areas).\n  - Occasional spikes to represent haze events.\n\nSignificant events\n- Define a set of **significant haze/air quality events** with:\n  - `date` (e.g., 2019-09-15, 2020-03-20, 2021-08-10).\n  - `title` (e.g., Indonesian Forest Fires, COVID-19 Lockdown Effect).\n  - `description` (short description of cause/effect).\n  - `regions` affected (array of region names).\n  - `impact` (e.g., schools reduce outdoor activities).\n- On the chart, draw a special marker (larger/red point) on data points that correspond to these events for affected regions.\n- Clicking these markers opens an **event popup** with detailed info.\n\nMap panel\n- SVG map representing five regions as polygons or rectangles:\n  - Each region element has:\n    - Class `.region` plus dynamic PSI-based class (good/moderate/unhealthy/hazardous).\n    - `id` matching lowercase region name (e.g., `id=\"north\"`).\n    - `data-region=\"North\"` etc.\n    - Human-readable `title` describing the region.\n- Colour each region based on the **current** PSI value (from filtered data at the slider’s current time index):\n  - PSI 0–50: green (`good`).\n  - 51–100: yellow/orange (`moderate`).\n  - 101–200: red (`unhealthy`).\n  - >200: deep red/purple (`hazardous`).\n- Include a **PSI legend** showing colour bands and ranges.\n- On region hover:\n  - Show a tooltip with region name, current PSI, status, and hint “Click for details”.\n- On region click:\n  - In normal mode: select that region as the **current region**, update chart and region info.\n  - In compare mode: add/remove region to/from `selectedRegions` (up to 3 visible at once) and update chart.\n\nControl panel\n- **Year filter**:\n  - Dropdown with All, 2019, 2020, 2021, 2022, 2023.\n  - Filters data for both map colours and chart.\n- **Season filter**:\n  - Dropdown with All, Dry (Feb–Apr), Wet (Nov–Jan), Inter-monsoon (May–Oct).\n  - Filters data by month.\n- **Compare Regions** button:\n  - Toggles `compareMode` boolean.\n  - In compare mode: button text changes (e.g., “Exit Compare”), visual style changes; `selectedRegions` is used to populate chart.\n  - In single-region mode: revert to showing only the `currentRegion` (default Central if none selected).\n- **Data download** button:\n  - Exports the **filtered data** as CSV with columns: Region, Date, PSI, PM2.5, PM10, Ozone, Rainfall, Wind Speed, Wind Direction, Humidity.\n\nChart panel\n- Use `<canvas>` to draw a **multi-line time-series chart**:\n  - X-axis: time (from earliest to latest date in filtered data).\n  - Y-axis: PSI levels (scaled to cover up to at least the maximum PSI, with grid at key levels 0, 50, 100, 150, 200, 250+).\n- Draw background grid lines and axis labels (`PSI Level`, `Time Period`).\n- For each selected region:\n  - Draw a coloured line representing PSI over time.\n  - Draw small circular markers at each data point.\n  - Use distinct colours per region (e.g., blue, red, teal, etc.).\n- Pollutant toggles (PM2.5, PM10, Ozone):\n  - When toggled on, overlay additional lines or separate representation as needed.\n  - When toggled off, hide those overlays.\n- **Time indicator**:\n  - Vertical dashed line at the date corresponding to the current time slider index.\n\nTime slider\n- Range corresponds to indices into the (filtered) data sequence (e.g., 0–59 for last 60 time steps).\n- Changing the slider:\n  - Updates `currentTimeIndex`.\n  - Updates current date label (`#currentDate`).\n  - Recalculates map region colours based on PSI at that index.\n  - Updates region info panel (if open).\n\nRegion info panel\n- Side panel showing details for the selected region (if any):\n  - Title: “<Region> Region”.\n  - Current reading:\n    - PSI value with colour-coded background class (good/moderate/unhealthy/hazardous).\n    - Health advice text based on PSI level.\n  - Pollutant breakdown (current point’s PM2.5, PM10, ozone).\n  - Weather conditions (rainfall, wind speed/direction, humidity).\n  - Statistics:\n    - Average PSI over filtered time span.\n    - Number of data points.\n    - Trend (Increasing/Decreasing/Stable) based on comparison of recent vs older averages.\n- Close button (×) hides the panel.\n\nEvent popup\n- When an event marker is clicked on the chart:\n  - Show a popup overlay with:\n    - Event title\n    - Date\n    - Affected regions\n    - Description of event\n    - Impact on Singapore’s air quality or public activities\n- Close button (×) hides the popup.\n\nTooltips and responsiveness\n- Global tooltip element for map region hover; position it near the cursor.\n- On window resize:\n  - Redraw chart (recalculate dimensions, rerender axes and data lines).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Interpret PSI and pollutant data from both a map and a time-series chart.\n  - Recognise how air quality varies by **region** and **time** in Singapore.\n  - Relate air quality changes to **seasonal patterns**, **weather**, and **significant events** (e.g., haze episodes, lockdowns).\n  - Understand PSI categories and basic health advisories for different levels.\n- The interactive should promote **data literacy** by encouraging exploration of filters and comparative views.\n\nINTERACTION FEATURES TO INCLUDE:\n- Clickable regional map with dynamic colouring and tooltips.\n- Multi-region comparison on the chart.\n- Year and season filters.\n- Pollutant toggles for deeper exploration.\n- Time slider to scrub through the data.\n- Downloadable CSV for further analysis in spreadsheets.\n- Region info and event popups for context and explanation.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Singapore Air Quality Data Visualization.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Singapore Air Quality Data Visualization_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Singapore Art Detective Adventure",
    "title": "Singapore Art Detective Adventure",
    "folder": "Singapore Art Detective Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Singapore Art Detective Adventure.html",
    "modifiedTime": "2026-02-19T21:51:31.858412",
    "topic": null,
    "gradeLevel": null,
    "subject": "Art",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Singapore Art Detective Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Singapore Art Detective Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Singapore Eco Heroes Adventure",
    "title": "Singapore Eco Heroes Adventure",
    "folder": "Singapore Eco Heroes Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Singapore Eco Heroes Adventure.html",
    "modifiedTime": "2026-02-19T21:51:31.858412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Singapore Eco Heroes Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Singapore Eco Heroes Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Singapore History Concept Map",
    "title": "Singapore History Concept Map",
    "folder": "Singapore History Concept Map",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Singapore History Concept Map.html",
    "modifiedTime": "2025-12-21T13:26:58.234200",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Singapore History Concept Map”** where students build their own concept map of Singapore’s history by dragging events, places, and key figures onto a canvas and drawing labelled connections between them.\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary History / Social Studies (approx. ages 11–14)\n\nINTERACTIVE REQUIREMENTS:\n- Main layout split into:\n  - **Control panel** on the left with tools and a **content bank** of draggable items.\n  - **Canvas area** on the right where students drop items to create a concept map.\n  - A **legend** explaining colour coding by historical era.\n- Pre-placed central node on the canvas labelled **“Singapore History”**.\n- Content bank sections:\n  - **Events** (e.g., 1819 Founding of Singapore; 1942 Fall of Singapore; 1965 Independence; 1820s Opium Trade; 1942–1945 Japanese Occupation; 1963 Malaysia Merger).\n  - **Places** (e.g., Raffles Landing Site; Fort Canning; The Padang; Changi Prison; City Hall).\n  - **Key Figures** (e.g., Sir Stamford Raffles; Lee Kuan Yew; General Percival; Goh Keng Swee).\n- Students drag items from the bank onto the canvas to create **concept nodes**, then click nodes to **select two at a time** and define a labelled relationship between them (e.g., “established”, “occurred at”, “led to”, “declared at”).\n- Connections appear as **arrowed lines** between nodes, with relationship labels and optional notes.\n- Tool buttons:\n  - Zoom In / Zoom Out (scales the canvas).\n  - Show Example (overlay explaining what a good concept map might include).\n  - Validate Connections (checks for historically important connections and provides feedback).\n  - Export Map (exports nodes/connections as JSON).\n- Self-contained HTML, CSS, and JavaScript (no external frameworks); use DOM and SVG for nodes and connection lines.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Dragging/dropping from the content bank and moving nodes on the canvas must work with mouse and touch.\n\nSPECIFIC REQUIREMENTS:\n\nContent bank and node creation\n- Content bank items:\n  - Represented as `.draggable-item` elements with:\n    - `data-type` (event/place/figure).\n    - `data-id` (e.g., `founding`, `fall`, `independence`, `raffles-site`, `raffles`, `lky`).\n    - CSS classes indicating their historical era (`colonial-era`, `war-era`, `merger-era`, `independence-era`).\n- On drag start (mouse or touch) from the content bank:\n  - Create a **floating copy** of the item following the cursor/finger.\n- On drag end:\n  - If the drop point is inside the canvas, create a **new concept node** there:\n    - Node text = item’s text content.\n    - Node data attributes: `data-type`, `data-id` preserved from bank item.\n    - Node CSS classes include the era class for colour coding.\n  - Nodes appear with a short scale/opacity animation.\n\nCanvas and node behaviour\n- Canvas is a positioned container where nodes can be free-placed.\n- Each node:\n  - Is a `.concept-node` element positioned absolutely within the canvas.\n  - Stores its type/id and text.\n  - Can be clicked to **select/deselect**.\n  - Supports dragging within the canvas to rearrange the map; connections update positions as nodes move.\n- Ensure nodes remain within canvas bounds when dragged.\n\nConnections (edges)\n- Selecting nodes:\n  - Clicking a node toggles its `selected` state.\n  - Maintain an array of currently selected nodes.\n  - When exactly **two nodes** are selected, open a **Connection Details** modal.\n- Connection modal:\n  - Inputs:\n    - Relationship label (required) – e.g., “established”, “led to”, “occurred at”.\n    - Optional note explaining significance.\n  - Buttons: Save / Cancel.\n- On Save:\n  - Create a connection between the two selected nodes:\n    - A `<line>` element in the SVG overlay with class `.connection-line`.\n    - A `<text>` label element at the midpoint of the line showing the relationship.\n    - Optional note stored in connection metadata (not necessarily visible by default).\n  - Store connection in an internal structure keyed by an ID.\n  - Clear selections and close the modal.\n- On Cancel:\n  - Close the modal and clear node selection.\n- On node drag:\n  - Recalculate positions of all connections that involve that node and update line + label positions.\n- Use a **marker arrowhead** at the end of lines for direction (via `<marker id=\"arrowhead\">` and `marker-end=\"url(#arrowhead)\"`).\n\nZoom and view\n- Zoom In / Zoom Out buttons:\n  - Adjust an internal `zoomLevel` between ~50% and 200%.\n  - Apply CSS transform on the canvas element (scale) around its centre.\n  - Show brief feedback indicating the current zoom percentage.\n\nExample overlay\n- Example button:\n  - Shows an overlay describing what a strong concept map might include (textual example listing key connections e.g., “Raffles → 1819 Founding via ‘established’”, “Lee Kuan Yew → 1965 Independence via ‘led’”, etc.).\n  - Close button hides the overlay.\n\nValidation\n- Validate button:\n  - Compare student-created connections against a **list of expected key connections**, e.g.:\n    - `raffles → founding` (established)\n    - `raffles-site → founding` (location of)\n    - `fall → occupation` (led to)\n    - `lky → independence` (led)\n    - `city-hall → independence` (declared at)\n  - Calculate a score based on how many of these key relationships are present (direction may be flexible).\n  - Show a text summary in a feedback area (e.g., “3/5 key connections found”) plus a qualitative message:\n    - High score: “Great work! Strong historical connections identified.”\n    - Lower score: “Good start! Try adding more key historical relationships.”\n\nExport\n- Export button:\n  - Collect all nodes and connections into a JSON object, including:\n    - Node IDs, text, type, era, and positions (x,y).\n    - For each connection: source node ID, target node ID, label, note.\n  - Trigger a download of a `.json` file (e.g., `singapore-history-concept-map.json`).\n  - Show confirmation feedback: “Concept map exported successfully!”.\n\nLegend and colour coding\n- A legend explaining the era colour scheme:\n  - Colonial Era (1819–1942)\n  - War Era (1942–1945)\n  - Merger Period (1963–1965)\n  - Independence Era (1965+)\n- Legend uses coloured boxes with the same CSS classes as nodes.\n\nResponsive and iframe behaviour\n- If running inside an iframe (SLS embedding), apply an `iframe-mode` class to body for adjusted sizing.\n- Ensure drag-and-drop and node interactions still work on smaller screens (touch-friendly behaviour for both bank items and nodes).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify major **events**, **places**, and **figures** in Singapore’s history.\n  - Construct and explain **relationships** between these elements (cause/effect, location, leadership, etc.).\n  - Recognise how different historical periods connect (colonial era, war era, merger, independence).\n- The interactive should foster **historical reasoning** and **concept mapping skills**, not just recall.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop creation of concept nodes from a content bank.\n- Free placement and repositioning of nodes on a canvas.\n- Creation of labelled connections between nodes via a modal.\n- Visual encoding of eras via colours and legend.\n- Validation mechanism for key historically accurate connections.\n- Export feature for saving/sharing concept maps.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Singapore History Concept Map.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Singapore History Concept Map_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Singapore History Timeline",
    "title": "Singapore History Timeline",
    "folder": "Singapore History Timeline",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Singapore History Timeline.html",
    "modifiedTime": "2025-12-21T13:27:06.029733",
    "topic": null,
    "gradeLevel": null,
    "subject": "History",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Singapore History Timeline\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Singapore History Timeline\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Singapore History Timeline\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Singapore History Timeline.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Singapore History Timeline_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Singapore National Day Adventure",
    "title": "Singapore National Day Adventure",
    "folder": "Singapore National Day Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Singapore National Day Adventure.html",
    "modifiedTime": "2026-02-19T21:51:31.858412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Singapore National Day Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Singapore National Day Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Singapore Neighbourhood Map Builder",
    "title": "Singapore Neighbourhood Map Builder",
    "folder": "Singapore Neighbourhood Map Builder",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Singapore Neighbourhood Map Builder.html",
    "modifiedTime": "2025-12-21T13:27:03.112296",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Singapore Neighbourhood Map Builder\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Singapore Neighbourhood Map Builder\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Singapore Neighbourhood Map Builder\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Singapore Neighbourhood Map Builder.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Singapore Neighbourhood Map Builder_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Singapore's Four National Taps Adventure",
    "title": "Singapore's Four National Taps Adventure",
    "folder": "Singapore's Four National Taps Adventure",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Singapore's Four National Taps Adventure.html",
    "modifiedTime": "2025-12-21T13:27:03.366863",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Singapore's Four National Taps Adventure\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Singapore's Four National Taps Adventure\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Singapore's Four National Taps Adventure\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Singapore's Four National Taps Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Singapore's Four National Taps Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Snell's Law Interactive Visualization",
    "title": "Snell's Law Interactive Visualization",
    "folder": "Snell's Law Interactive Visualization",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Snell's Law Interactive Visualization.html",
    "modifiedTime": "2025-12-21T13:26:57.695190",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Snell’s Law Interactive Visualization”** that lets students explore refraction and total internal reflection by adjusting incident angle and refractive indices of two media, with both a mathematical graph and a ray diagram.\n\nTARGET AUDIENCE:\n- Upper Secondary Physics (optics) or high-ability Lower Secondary (~13–16 years old)\n\nINTERACTIVE REQUIREMENTS:\n- Two synchronized visual panels:\n  - **Graph View**: plots the relationship between sin(θ₁) and sin(θ₂) according to Snell’s Law.\n  - **Ray Diagram**: shows an animated light ray crossing an interface between two media, with incident and refracted (or totally internally reflected) rays.\n- Top **control panel** with:\n  - Slider for **incident angle θ₁** (0–90°).\n  - Two medium selectors (**Medium 1**, **Medium 2**) with preset refractive indices and a **custom** option.\n  - Custom refractive index inputs (n₁, n₂) that appear only when “Custom” is selected.\n  - Buttons for:\n    - **Show Critical Angle / Hide Critical Angle**.\n    - **Toggle Normal** line visibility.\n    - **Reset** to default parameters.\n    - **Examples** to load preset scenarios.\n- Dynamic numeric display showing current values of **n₁, n₂, θ₁, θ₂**.\n- A text tooltip area giving guidance and context.\n- Self-contained HTML, CSS, and JavaScript (no external libraries), using canvas for rendering.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Canvases and controls resize with window.\n  - Controls work on touch devices (no reliance on hover).\n\nSPECIFIC REQUIREMENTS:\n\nPhysics model\n- Implement **Snell’s Law**: `n₁ sin(θ₁) = n₂ sin(θ₂)`.\n- Support both directions:\n  - Light entering a denser medium: normal refraction.\n  - Light going from denser to less dense medium: allow for **total internal reflection**.\n- When `n₁ > n₂`, compute **critical angle** θc with: `sin(θc) = n₂ / n₁` (if applicable).\n- If the calculated `sin(θ₂) > 1`, treat this as **total internal reflection** and set θ₂ to null / N/A.\n\nControl panel\n- **Incident angle slider**:\n  - Range 0–90°, step small enough (e.g., 1° or less).\n  - Live update `currentAngle`, display value next to label, and re-draw both panels.\n- **Medium 1 / Medium 2 selectors**:\n  - Options with fixed indices:\n    - Air (n = 1.00)\n    - Water (n = 1.33)\n    - Glass (n = 1.50)\n    - Diamond (n = 2.42)\n    - Custom\n  - Selecting “Custom” shows a numeric input for n with step 0.01 and min 1.0.\n- Buttons:\n  - **Show Critical Angle / Hide Critical Angle** toggles an internal `criticalAngleMode` and updates button label + style.\n  - **Toggle Normal / Hide Normal** toggles `showNormal` and re-draws ray diagram.\n  - **Reset** restores defaults (e.g., n₁ = 1.00 Air, n₂ = 1.33 Water, θ₁ = 30°, normal and graph options reset) and shows a brief tooltip message.\n  - **Examples** opens a modal listing preset scenarios.\n\nGraph View (sinθ graph)\n- Use `graphCanvas` for drawing.\n- Plot axes (x: sin(θ₁), y: sin(θ₂)) with range 0–1 on each axis.\n- Draw grid lines and labels at convenient increments (e.g., 0.0 to 1.0 in steps of 0.1).\n- Axis labels:\n  - x-axis: “sin(θ₁)”.\n  - y-axis: “sin(θ₂)”.\n- Draw the Snell’s law line/curve: for sin(θ₁) ∈ [0,1], compute sin(θ₂) = (n₁/n₂) sin(θ₁); draw only where sin(θ₂) ≤ 1.\n- Highlight the **current operating point** corresponding to the slider’s θ₁ and computed θ₂:\n  - Plot as a distinct coloured dot.\n  - Show text near the point, e.g., “(0.50, 0.37)”.\n- If **critical angle mode** is ON and a critical angle exists:\n  - Draw a vertical dashed line at sin(θc) on the x-axis.\n  - Label it “Critical: θc°”.\n\nRay Diagram View\n- Use `rayCanvas` and split the canvas horizontally into two regions:\n  - Upper half: medium 1.\n  - Lower half: medium 2.\n- Use different background colours for each medium (based on a materials map), plus labels with names and indices.\n- Draw the interface as a horizontal line at the mid-height.\n- **Normal line**:\n  - Vertical dashed line through the interface at the centre; shown/hidden based on `showNormal`.\n- Rays:\n  - **Incident ray**: from upper region down to the interface at the centre, with angle θ₁ measured from the normal.\n  - If refraction occurs:\n    - **Refracted ray**: from the interface into the lower medium, angle θ₂ from the normal.\n  - If total internal reflection occurs:\n    - **Reflected ray**: in the first medium, symmetric to incident ray relative to the normal.\n- Rays should have arrowheads indicating direction of travel.\n- Show **angle arcs** (if normal is visible):\n  - An arc between normal and incident ray labelled with θ₁.\n  - If refraction occurs, an arc between normal and refracted ray labelled with θ₂.\n- Show text overlay “Total Internal Reflection!” when refractedAngle is null.\n\nInteractivity and visual feedback\n- Clicking on the **graph**:\n  - If the click is within the graph area, convert x-position to sin(θ₁) and update θ₁ accordingly (updating slider & number display).\n- Clicking on the **ray diagram**:\n  - Create a brief **ripple effect** animation around the click position, then redraw.\n- Tooltip behaviour:\n  - Elements with `title` attribute show a custom tooltip (not the browser default) near the cursor; on leave, restore the original title.\n  - `showTooltip(message)` displays a centred message at top (e.g., after reset or when loading examples), then fades after a few seconds.\n\nExample scenarios\n- Examples modal listing buttons, each loading a preset configuration:\n  - **Rainbow Formation**: Air → Water, θ₁ ~ 42°; note that this angle is relevant to dispersion and internal reflection in raindrops.\n  - **Fiber Optics**: Glass → Air, θ₁ large (e.g., 75°), n₁ > n₂, showing total internal reflection with critical angle highlighted.\n  - **Diamond Brilliance**: Air → Diamond, θ₁ moderate; highlight strong bending due to high n₂.\n  - **Underwater Vision**: Water → Air, θ₁ > critical angle; show TIR and critical angle.\n- Loading a scenario:\n  - Updates n₁, n₂, and θ₁, sets medium dropdowns to match, toggles critical-angle mode if needed.\n  - Shows an explanatory tooltip describing the scenario.\n\nResponsive behaviour\n- On window resize:\n  - Resize both canvases to fit their parent panels (minus headers/overlays).\n  - Recompute all drawing dimensions, then redraw graph and ray diagram.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Relate the **angle of incidence** and **angle of refraction** through Snell’s Law.\n  - Understand how **refractive index** affects the bending of light at an interface.\n  - Recognise the concept of **critical angle** and **total internal reflection**.\n  - Interpret graphical representations of sin(θ₁) vs sin(θ₂) and connect them to ray diagrams.\n- The interactive should encourage experimentation with different media and angles, making invisible mathematical relationships visible.\n\nINTERACTION FEATURES TO INCLUDE:\n- Adjustable incident angle and refractive indices (including custom values).\n- Dual representation: analytic graph and geometric ray diagram.\n- Visualisation of critical angle and total internal reflection.\n- Preset example scenarios that tie to real-world contexts (rainbows, fibre optics, diamonds, underwater vision).\n- Tooltips and visual cues to guide learning.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Snell's Law Interactive Visualization.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Snell's Law Interactive Visualization_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Softball Fielding Adventure",
    "title": "Softball Fielding Adventure",
    "folder": "Softball Fielding Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Softball Fielding Adventure.html",
    "modifiedTime": "2026-02-19T21:51:31.859413",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physical Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Softball Fielding Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Softball Fielding Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Space Exploration Timeline",
    "title": "Space Exploration Timeline",
    "folder": "Space Exploration Timeline",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Space Exploration Timeline.html",
    "modifiedTime": "2025-12-21T13:26:58.125511",
    "topic": null,
    "gradeLevel": null,
    "subject": "History",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Space Exploration Timeline”** where students drag major space exploration events onto the correct decade on a horizontal timeline, then check their answers and receive feedback (with optional certificate at the end).\n\nTARGET AUDIENCE:\n- Upper Primary / Lower Secondary Science / History (~10–14 years old)\n\nINTERACTIVE REQUIREMENTS:\n- A horizontal **timeline** from the 1950s to the 2020s, divided into decade segments:\n  - 1950s, 1960s, 1970s, 1980s, 1990s, 2000s, 2010s, 2020s.\n- A set of draggable **event cards** representing key milestones in space exploration, each showing:\n  - An icon (emoji) representing the event.\n  - The **year** (e.g., 1957, 1961, 1969, …, 2020).\n  - A short **title** (e.g., “Sputnik 1 Launch”, “Moon Landing”).\n- Students drag event cards from the bottom panel onto the correct decade segment on the timeline.\n- Top control bar with:\n  - **Check My Work** button.\n  - **Show Me** hint button.\n  - **Reset** button.\n  - **Zoom slider** to scale the timeline horizontally.\n  - Progress indicator showing “X/12 correct” plus a progress bar.\n- Event detail modal: clicking an event (either card or placed on timeline) opens more detailed description.\n- A **success modal** with simple celebration and options to “Print Certificate” and “Play Again” when all events are correctly placed.\n- Self-contained HTML, CSS, JavaScript (no external frameworks).\n- **MOBILE-RESPONSIVE & TOUCH-FRIENDLY**:\n  - Horizontal scrolling for the timeline.\n  - Drag-and-drop works on both mouse and touch devices.\n\nSPECIFIC REQUIREMENTS:\n\nEvent data\n- Include at least these 12 events (or similar), each with:\n  - `id`, `year`, `title`, `icon`, `type`, `description`, `details`, and `decade` fields.\n- Example set:\n  - 1957 – Sputnik 1 Launch (🛰️) – First artificial satellite.\n  - 1961 – First Human in Space (👨‍🚀) – Yuri Gagarin.\n  - 1969 – Moon Landing (🌙) – Apollo 11.\n  - 1970 – Venera 7 Landing (🪐) – First successful Venus landing.\n  - 1975 – Apollo–Soyuz Mission (🤝) – US–Soviet cooperation.\n  - 1981 – Space Shuttle Program (🚀) – First reusable spacecraft.\n  - 1986 – Challenger Disaster (💥) – Shuttle tragedy.\n  - 1990 – Hubble Space Telescope (🔭) – Space observatory.\n  - 1998 – International Space Station (🏗️) – Global orbiting laboratory.\n  - 2003 – Columbia Disaster (💔) – Second shuttle tragedy.\n  - 2012 – SpaceX Dragon (🐉) – First commercial cargo to ISS.\n  - 2020 – Crew Dragon Demo-2 (👨‍🚀👨‍🚀) – First commercial crew flight.\n\nTimeline & drop zones\n- Timeline container with fixed internal width (e.g., 800px) and horizontal scroll.\n- For each decade:\n  - A **decade marker** at the left edge, labelled by year (e.g., 1960).\n  - A **drop zone** spanning that decade range, labelled with decade text (e.g., “1960s”).\n- Each drop zone element:\n  - Has `data-decade` = starting year of that decade (1950, 1960, …, 2020).\n  - Listens for `dragover`, `drop`, `dragenter`, `dragleave` events.\n  - Applies a `drag-over` class while a card is over it.\n\nEvent cards (bottom panel)\n- `event-cards` container holding all `.event-card` elements at start.\n- Each `.event-card`:\n  - `draggable=\"true\"`.\n  - Data attributes: `data-event-id`, `data-year`, `data-decade`, `data-type`.\n  - Inner HTML includes icon, year, and title text.\n- Cards are **shuffled** before rendering for variety.\n- Each card:\n  - Has drag event handlers (`dragstart`, `dragend`).\n  - Has a click handler to open a detailed modal.\n  - Shows tooltip on hover with a short description.\n\nDrag-and-drop behaviour\n- When a card is dropped on a `drop-zone`:\n  - Create a **timeline event** element positioned within that decade zone.\n  - Mark the original card:\n    - Add `placed` class.\n    - Disable further dragging (draggable = false).\n    - Track placed event IDs in a `Set`.\n- Timeline events:\n  - `.timeline-event` with data attributes (id, type, etc.).\n  - Positioned with a bit of random horizontal offset within the decade zone for visual variety.\n  - Display icon, year, and title.\n  - Click opens the same detail modal.\n  - Hover shows tooltip with brief description.\n\nChecking & feedback\n- `checkAnswers()`:\n  - For each `.timeline-event`, get its `data-event-id` and find the corresponding event data.\n  - Determine which **drop zone** (decade) it lies above, based on its x-position relative to drop-zone bounds.\n  - Compare event’s `decade` value with drop zone’s `data-decade`.\n  - If correct:\n    - Add `correct` class to both the timeline event and its original card.\n  - If incorrect:\n    - Add `incorrect` class.\n    - Show tooltip near the event with a hint (e.g., “This event happened in the 1970s”).\n- Track `correctPlacements` (number of correctly placed events) and display in progress indicator.\n- When all events are correctly placed (`correctPlacements === totalEvents`):\n  - Show **success modal** with rocket animation and congrats message.\n\nHints (“Show Me”)\n- `showMeHint()`:\n  - Identify events not yet placed (or those incorrectly placed, depending on design).\n  - For the next unplaced event in sequence, highlight:\n    - The event card (e.g., pulse animation).\n    - The correct decade drop zone (pulse animation).\n  - Show a tooltip near the card: e.g., “This event belongs in the 1970s”.\n  - Advance internal index so subsequent clicks move to the next unplaced event.\n\nReset & zoom\n- `resetTimeline()`:\n  - Remove all timeline events.\n  - Reset all cards: remove `placed`, `correct`, `incorrect` classes; restore `draggable = true`.\n  - Clear placed events set and reset `correctPlacements` and hint index.\n  - Reset progress display and hide any modals.\n- Zoom slider:\n  - Changes the horizontal scale of the timeline using CSS transform `scaleX(zoomLevel)`.\n  - Range 1–3, default 1.\n\nModals & certificate\n- **Event details modal**:\n  - Shows icon, year, title, short description, and longer explanation text.\n  - Close button hides modal.\n- **Success modal**:\n  - Shows rocket emoji animation, congrats text, and two buttons:\n    - “Print Certificate”: opens a new window with a styled certificate summarizing achievement and date, then calls `print()`.\n    - “Play Again”: calls `resetTimeline()`.\n\nTooltips\n- Single tooltip element positioned near cursor for both cards and timeline events.\n- `showTooltip(e, text)` sets tooltip text and positions it near event/cursor; adds a `show` class.\n- `hideTooltip()` removes the `show` class.\n\nProgress tracking\n- Progress display shows: “X/12 correct”, where X is `correctPlacements`.\n- Progress bar width reflects percentage of correct placements.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Identify and sequence key events in the history of space exploration.\n  - Group events into correct **decades** and reason about chronological order.\n  - Recognise major themes: firsts in space, international cooperation, technological milestones, and accidents.\n- The interactive should encourage **temporal reasoning** and engagement with historical context via exploration.\n\nINTERACTION FEATURES TO INCLUDE:\n- Drag-and-drop linking of events to decades with mouse and touch.\n- Visual feedback (correct/incorrect), tooltips, and hints.\n- Success celebration and optional printable certificate.\n- Zooming timeline for accessibility on different device sizes.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Space Exploration Timeline.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Space Exploration Timeline_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Space Math Shooter",
    "title": "Space Math Shooter",
    "folder": "Space Math Shooter",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Space Math Shooter.html",
    "modifiedTime": "2025-12-21T13:27:03.927788",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Space Math Shooter\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Space Math Shooter\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Space Math Shooter\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Space Math Shooter.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Space Math Shooter_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Speed_and_Velocity_Mind_Map_20251103",
    "title": "Speed and Velocity Mind Map 20251103",
    "folder": "Speed_and_Velocity_Mind_Map_20251103",
    "folderPath": "Speed_and_Velocity_Mind_Map_20251103",
    "indexPath": "Speed_and_Velocity_Mind_Map_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:56.678191",
    "topic": null,
    "gradeLevel": null,
    "subject": "Science (General)",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Speed and Velocity Mind Map.\n\nTARGET AUDIENCE: Primary 5-6 - Science (General)\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 5-6 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Speed and Velocity Mind Map\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Speed_and_Velocity_Mind_Map_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Speed_and_Velocity_Mind_Map_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Speed_and_Velocity_Mind_Map_20251103/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Speed-Time and Distance-Time Graph Explorer",
    "title": "Speed-Time and Distance-Time Graph Explorer",
    "folder": "Speed-Time and Distance-Time Graph Explorer",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Speed-Time and Distance-Time Graph Explorer.html",
    "modifiedTime": "2025-12-21T13:27:02.634124",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Mavis\nLearning Objectives:\nUnderstand the relationship between distance-time graph and speed-time graph\n \nInteractive Prompt:\nCreate an HTML5 interactive tool for secondary school mathematics students of age 15 years old to explore the relationship between speed-time graphs and their corresponding distance-time graphs.\n \nThe tool should include:\nA split-screen layout: left panel shows a speed-time graph, right panel shows the corresponding distance-time graph.\nInteractive controls to toggle between different speed-time graph types:Constant speed (horizontal line)\nIncreasing speed (upward slant)\nDecreasing speed (downward slant)\nPiecewise speed changes (e.g. horizontal then slanted)\nReal-time animation of a moving object that reflects the speed profile.\nDynamic plotting of the distance-time graph as the object moves.\nOptional step-by-step mode to pause and observe changes at each time interval.\nLabels and tooltips to explain key features (e.g. slope, area under curve, gradient).\n\nhttps://vle.sandbox.sls.moe.edu.sg/class-group/module/view/a3943fdc-0a28-4825-a3ec-c9e4d7fe4124/section/33692/activity/33694?pageNo=1",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Speed-Time and Distance-Time Graph Explorer.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Speed-Time and Distance-Time Graph Explorer_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026/Spot_the_Animals_-_Park_Adventure_20260219",
    "title": "Spot the Animals - Park Adventure 20260219",
    "folder": "Spot_the_Animals_-_Park_Adventure_20260219",
    "folderPath": "SDCDworkshop2026/Spot_the_Animals_-_Park_Adventure_20260219",
    "indexPath": "SDCDworkshop2026/Spot_the_Animals_-_Park_Adventure_20260219/index.html",
    "modifiedTime": "2026-02-19T12:33:38",
    "topic": "Spot the animals",
    "gradeLevel": "Primary 1-2",
    "subject": "Physical Education",
    "hasPrompt": true,
    "promptText": "Boey Ling\n═══════════════════════════════════════════════════════════\n📚 SLS INTERACTIVE PROMPT - FULL DETAILS\n═══════════════════════════════════════════════════════════\n📋 PROMPT DETAILS:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📚 Topic: Spot the animals\n🎯 Grade Level: Primary 1-2\n📖 Subject Area: Physical Education\n🎮 Interaction Type: Game\n🔧 Specific Requirements: Design style: Cartoon illustration\nBackground: Park with Water canal, trees and pavement\nReal Animals illustration: Otter swimming in water, monitor lizard crossing pavement, Long tail shrike on the tree, red jungle fowl on the grass\nSpot the animal game. Once click on animal, it shows the unique feature of the animal such as colour of animal, how many legged, etc.\n📅 Generated: 04/02/2026, 12:25:27 pm\n═══════════════════════════════════════════════════════════\n🤖 FULL PROMPT FOR CLAUDE:\n═══════════════════════════════════════════════════════════\nSYSTEM CONTEXT - SLS Interactive Development Master Prompt:\nYou are a web developer specialized in HTML5 educational content creation. Follow these critical requirements:\nTECHNICAL REQUIREMENTS:\n- Create a completely self-contained HTML file (no external libraries or dependencies)\n- All code must run entirely offline with HTML, CSS, and JavaScript embedded in a single file\n- Optimize for iframe environment: 100% width, 450px height in iframe, 90vh when opened in new tab\n- Support both touch and mouse interactions with appropriate target sizes\nMOBILE-FIRST DESIGN (CRITICAL):\n- **MUST include viewport meta tag**: <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n- **Responsive layout**: Use flexbox or CSS grid that adapts to screen sizes (mobile-first approach)\n- **Touch-friendly targets**: All interactive elements (buttons, draggable items) must be at least 44x44px for touch\n- **Touch events support**: Implement BOTH mouse events AND touch events (touchstart, touchmove, touchend)\n- **Drag and drop on mobile**: Use Touch API (event.touches[0]) in addition to mouse events for drag-and-drop\n- **Test on mobile**: Ensure layout doesn't break on screens as small as 320px width\n- **No tiny text**: Minimum font size 14px, preferably 16px for body text\n- **Prevent zoom issues**: Disable pinch-zoom if it interferes with interactions\n- **Landscape/Portrait**: Layout should work in both orientations\nDRAG AND DROP IMPLEMENTATION (CRITICAL FOR MOBILE):\nFor drag-and-drop interactives, you MUST:\n- Implement touch event handlers: touchstart, touchmove, touchend\n- Get touch coordinates from: event.touches[0].clientX and event.touches[0].clientY\n- Add event.preventDefault() to prevent scrolling during drag\n- Use CSS: touch-action: none; on draggable elements\n- Provide visual feedback during drag (e.g., opacity change, elevation)\n- Ensure drop zones are large enough (min 60x60px) for touch accuracy\n- Test with both mouse and touch interaction patterns\nDESIGN PRINCIPLES:\n- Align to Singapore curriculum standards and mathematical notations\n- Apply cognitive load theory and Mayer's 12 principles of multimedia learning\n- Use information visualization best practices\n- Maintain clean, intuitive layout with visual cues (shadows, highlights) for interaction states\n- Use center tooltips for displaying extensive text information in iframe mode\n- Optimize button sizing: height fits text, width accommodates text without wrapping\n- No header text at top to save vertical space; use tooltips on hover for titles\nPEDAGOGICAL REQUIREMENTS:\n- Ground design in instructional and cognitive psychology\n- Minimize extraneous cognitive load\n- Provide immediate feedback for interactions\n- Include clear labels, legends, and brief explanations\n- Enable active learning through meaningful interactions\nREAL-TIME DATA ANALYTICS (Critical for Learning Assessment):\nFOR QUIZ/GAME INTERACTIVES:\n- Implement a real-time analytics panel showing:\n  * Question number and text\n  * Correct answer\n  * Student's selected answer\n  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)\n  * Sequential log of all attempts to reveal misconception patterns\n- Display analytics in a clear, scrollable panel\n- Use Unicode symbols and color coding for visual clarity\n- Purpose: Allow teachers to identify student misconceptions and thinking patterns\nANALYTICS PLACEMENT:\n- Position analytics panel at the bottom or side of the interactive\n- Make it collapsible/toggleable to not interfere with main interaction\n- Ensure analytics update in real-time as student interacts\n- Include a \"Clear Log\" or \"Reset Analytics\" button\nCODE QUALITY:\n- Include comprehensive comments explaining what code does and how it works\n- Use proper formatting and structure\n- Generate complete, functional JavaScript for all interactive elements\n- Ensure all simulations/games/visualizations work correctly\nACCESSIBILITY & USABILITY:\n- High contrast colors for readability (WCAG AA minimum)\n- Clear visual feedback for all interactions\n- Error messages should be helpful and visible\n- Loading states for any delayed operations\n- Keyboard navigation support where applicable\n- Alt text for any meaningful images or icons\n- Clear instructions visible at start\nPERFORMANCE OPTIMIZATION:\n- Efficient JavaScript (avoid unnecessary loops or DOM manipulations)\n- CSS animations over JavaScript where possible\n- Debounce/throttle frequent events (resize, scroll, input)\n- Clean up event listeners when elements are removed\nCROSS-BROWSER COMPATIBILITY:\n- Works on modern browsers: Chrome, Firefox, Safari, Edge\n- Works on mobile browsers: iOS Safari, Chrome Mobile, Samsung Internet\n- Supports both orientations (portrait and landscape); handle orientation changes gracefully\n- Avoid browser-specific features without fallbacks\n- Test-friendly code structure\n═══════════════════════════════════════════════════════════\nUSER TASK SPECIFICATION:\nCreate an interactive HTML5 game about Spot the animals.\nTARGET AUDIENCE: Primary 1-2 - Physical Education\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Primary 1-2 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\nSPECIFIC REQUIREMENTS:\nDesign style: Cartoon illustration\nBackground: Park with Water canal, trees and pavement\nReal Animals illustration: Otter swimming in water, monitor lizard crossing pavement, Long tail shrike on the tree, red jungle fowl on the grass\nSpot the animal game. Once click on animal, it shows the unique feature of the animal such as colour of animal, how many legged, etc.\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Spot the animals\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel to track student interactions and thinking patterns**\n- Score tracking or achievement feedback\n\nVISUAL DESIGN REQUIREMENTS:\n- Use appropriate color schemes for educational content\n- Ensure sufficient contrast for readability\n- Include visual hierarchy to guide attention\n- Use animations judiciously to demonstrate concepts\n- Maintain consistency in design elements\nPlease create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.\n═══════════════════════════════════════════════════════════\n💡 USAGE INSTRUCTIONS:\n═══════════════════════════════════════════════════════════\n1. Copy this entire text\n2. Open Claude (claude.ai)\n3. Paste the prompt section into Claude\n4. Claude will generate your interactive HTML file\n5. Save the HTML file to your SLS or website\n6. Share this full details document with colleagues for reference\nGenerated by: SLS Prompt Generator for Educational Interactive Creation\n═══════════════════════════════════════════════════════════",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Spot_the_Animals_-_Park_Adventure_20260219.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Spot_the_Animals_-_Park_Adventure_20260219/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Statistical Diagrams Interactive",
    "title": "Statistical Diagrams Interactive",
    "folder": "Statistical Diagrams Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Statistical Diagrams Interactive.html",
    "modifiedTime": "2025-12-21T13:27:02.617122",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Statistical Diagrams Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Statistical Diagrams Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Statistical Diagrams Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Statistical Diagrams Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Statistical Diagrams Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Story Picture Mapping",
    "title": "Story Picture Mapping",
    "folder": "Story Picture Mapping",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Story Picture Mapping.html",
    "modifiedTime": "2025-12-21T13:27:00.578890",
    "topic": null,
    "gradeLevel": "Primary 3",
    "subject": "Chinese Language",
    "hasPrompt": true,
    "promptText": "By Cyrus\n应该做什么事\nLearning Objectives: \n \n提升学生的场所行为认知\n \n \nInteractive Prompt: \nI want to design a concept mapping interactive for my students.\n\n \n\n \n\nGrade level: Primary 3\n\nSubject: Chinese language\n\n \n\nStudent readiness level:\"Lower Progress (need more support)\"\n\n \n\n \n\nThe concept mapping focuses on: matching pictures to the correct scenario\n\n \n\n \n\nThe objective of the concept map is to: train students to see linkage among pictures in a story\n\n \n\n \n\nWhile creating the concept map, students should experience: dragging concepts to create connections, seeing visual links between related ideas, building a complete picture of how everything fits together\n\n \n\n \n\nThe interface should include: draggable text boxes, connecting lines that appear when linking, color-coded categories, zoom buttons, print button, example template overlay",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Story Picture Mapping.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Story Picture Mapping_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Subject-Verb Agreement Game",
    "title": "Subject-Verb Agreement Game",
    "folder": "Subject-Verb Agreement Game",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Subject-Verb Agreement Game.html",
    "modifiedTime": "2025-12-21T13:27:07.115306",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Subject-Verb Agreement Game\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Subject-Verb Agreement Game\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Subject-Verb Agreement Game\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Subject-Verb Agreement Game.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Subject-Verb Agreement Game_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Tent Building Challenge",
    "title": "Tent Building Challenge",
    "folder": "Tent Building Challenge",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Tent Building Challenge.html",
    "modifiedTime": "2026-02-19T21:51:31.860412",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Tent Building Challenge.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Tent Building Challenge_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\The Ant and the Dove Timeline",
    "title": "The Ant and the Dove Timeline",
    "folder": "The Ant and the Dove Timeline",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/The Ant and the Dove Timeline.html",
    "modifiedTime": "2025-12-21T13:27:08.707453",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"The Ant and the Dove Timeline\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"The Ant and the Dove Timeline\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"The Ant and the Dove Timeline\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/The Ant and the Dove Timeline.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/The Ant and the Dove Timeline_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\The Giver Concept Map",
    "title": "The Giver Concept Map",
    "folder": "The Giver Concept Map",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/The Giver Concept Map.html",
    "modifiedTime": "2025-12-21T13:27:00.737998",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"The Giver Concept Map\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"The Giver Concept Map\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"The Giver Concept Map\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/The Giver Concept Map.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/The Giver Concept Map_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Third Indochina War Interactive Map",
    "title": "Third Indochina War Interactive Map",
    "folder": "Third Indochina War Interactive Map",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Third Indochina War Interactive Map.html",
    "modifiedTime": "2025-12-21T13:27:05.070861",
    "topic": null,
    "gradeLevel": "JC1",
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "By Timotty\nThird Indochina War Interactive Map\nLearning Objectives: evaluate the factors that shaped the development of Cold War conflicts in Southeast Asia\nInteractive Prompt: \nI want to design an interactive map for the Third Indochina War for my students.\n\nGrade level: JC1\n\nStudent readiness level: Mixed Abilities\n\nThe data visualisation focuses on exploring the outbreak and development of the Third Indochina War, focusing on the historical context of the War, the timeline of the key developments, and the countries involved in the War. This resource will help students to understand causes of inter-state tensions through examining the actions of Cambodia and Vietnam, and to contextualise the Third Indochina War in the Cold War.\n\nThe objective of the interactive map is to help students evaluate the factors that shaped the development of Cold War conflicts in Southeast Asia.\n\nWhile exploring the map, students should be able to see the surrounding region of Southeast Asia that shows the locations of the Cold War-related conflicts and confrontations happening globally.  This map should allow the target audience to zoom in and to zoom out to place the relevant countries in frame. The resource should allow the target audience to explore the map at their own pace. There should be distinct colours to differentiate the countries (Vietnam, Cambodia, China, USA, USSR) that have been explored in the interactive map. There should be the name of the country accompanying its general area of the map. Upon clicking the country, there should be a pop-up box giving a brief description of the country's involvement in the Third Indochina War.\n\nOverall, the colour scheme should be bright and vibrant, and the illustrations should be engaging and appealing for the target audience, while ensuring sensitivity in the portrayal of countries and people (i.e., no stereotyping or exaggeration). ",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Third Indochina War Interactive Map.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Third Indochina War Interactive Map_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Trade Receivables Impairment Simulation",
    "title": "Trade Receivables Impairment Simulation",
    "folder": "Trade Receivables Impairment Simulation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Trade Receivables Impairment Simulation.html",
    "modifiedTime": "2025-12-21T13:27:06.881303",
    "topic": null,
    "gradeLevel": "Secondary 3",
    "subject": "Principles of Accounts",
    "hasPrompt": true,
    "promptText": "By Grace\nCalculation of Impairment Loss on Trade Receivables\nLearning Objectives: Calculation of impairment loss on trade receivables\n \nInteractive Prompt: \nI want to design a simulation interactive for my students.\n\nGrade level: Secondary 3\n\nStudent readiness level: Mixed Abilities\n\n \n\nThe simulation is based on: calculation of (i) Impairment loss on trade receivables (or Reversal of impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables\n\n \n\nThe objective of the simulation is to: Understand how the variables (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible affects the calculation of (i) Impairment loss on trade receivables (or Reversal for impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables will change when the variables.\n\n \n\nWhile using the simulation, students should experience: experimenting with different variables i.e. (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible.\n\n \n\nThe interface should include: drop down list for students to select the variable “Amount confirmed uncollectible” where values consist of $100, $200, $300 and $400; drop down list for students to select the variable “Percentage of trade receivables estimated uncollectible” where values consists of 1%, 2%, 3% and 4%.\n\n \n\nThe results panel should show 2 sections.\n\n \n\nThe title of the 1st section is “Statement of Financial Performance”, where the title of the sub-section is “Less: Other Expenses” and followed by “Impairment loss on trade receivables”.\n\n \n\nThe title of the 2nd section is “Statement of Financial Position” where the title of the sub-section is “Current Assets”, followed by “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\n\n \n\nCalculate the values for the results panel using the following logic:\n\nTrade receivables = Given trade receivables minus amount confirmed uncollectible\n\nAllowance for impairment of trade receivables = % x Trade receivables\n\nImpairment loss on trade receivables = Allowance for impairment of trade receivables minus (Given Allowance for impairment of trade receivables minus amount confirmed uncollectible).\n\n \n\nIf the value for Impairment loss on trade receivables is a negative value, display “Reversal of impairment loss on trade receivables” instead of “Impairment loss on trade receivables”, and display the value in brackets.\n\n \n\nProvide the students with a checkbox whether they want to see the workings.\n\n \n\nDisplay only numeric workings. Display the workings next to “Impairment loss on trade receivables”, “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\n\n \n\nGiven Trade receivables = $10000\n\nGiven Allowance for impairment of trade receivables = $500\n\n \n\nDisplay “Given Trade receivables” and “Given Allowance for impairment of trade receivables” at the top of the screen.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Trade Receivables Impairment Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Trade Receivables Impairment Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Trade Receivables Impairment Simulation 2",
    "title": "Trade Receivables Impairment Simulation 2",
    "folder": "Trade Receivables Impairment Simulation 2",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Trade Receivables Impairment Simulation 2.html",
    "modifiedTime": "2025-12-21T13:27:07.835483",
    "topic": null,
    "gradeLevel": null,
    "subject": "Principles of Accounts",
    "hasPrompt": true,
    "promptText": "By Dennesa\nLearning Objectives: \nTo help students understand how the changes in the calculation of the ending allowance for impairment of trade receivables when compared to the beginning allowance for impairment of trade receivables, lead to an impairment loss on trade receivables or the reversal of impairment loss on trade receivables.\n\n \n\n \n\nInteractive Prompt: \nA section to show a $10,000 beginning allowance for impairment of trade receivables balance on 1 Jan 20X5, a next section with two drop down boxes - first drop down box to select different ending trade receivables balance of $120,000, $140,000, $160,000 and $180,000, another drop-down box to select different percentages of allowance for impairment of trade receivables (4%, 6%, 8% 10%) and second box that shows the results of the ending allowance for impairment of trade receivables based on the formula = percentage (%) of ending allowance for impairment of trade receivables x Ending trade receivables balance. This is followed by a third section to show the if it leads to an impairment loss on trade receivables or reversal on impairment loss on trade receivables based on the formula “Impairment loss on trade receivables = Ending allowance for impairment of trade receivables – beginning allowance for impairment of trade receivables”. If the difference is positive, it should indicate that it is an impairment loss on trade receivables, if the difference is negative amount, it should indicate that it is a reversal of impairment loss on trade receivables.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Trade Receivables Impairment Simulation 2.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Trade Receivables Impairment Simulation 2_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Trade_Receivables_Impairment_Simulation_20251116",
    "title": "Trade Receivables Impairment Simulation 20251116",
    "folder": "Trade_Receivables_Impairment_Simulation_20251116",
    "folderPath": "Trade_Receivables_Impairment_Simulation_20251116",
    "indexPath": "Trade_Receivables_Impairment_Simulation_20251116/index.html",
    "modifiedTime": "2025-12-21T13:26:56.909340",
    "topic": "Calculating impairment loss on trade receivables (TR)",
    "gradeLevel": "Secondary 3",
    "subject": "Principles of Accounts",
    "hasPrompt": true,
    "promptText": "Ang Joo Bee https://vle.learning.moe.edu.sg/class-group/view/fb19f5f8-198c-4f8d-b1fd-1910dc16d40a?tab=forum&typeUuid=1b1a4bcf-d948-4d6e-aead-6634a487c88d&actionType=TOPIC\n\nEdited on08 Nov 2025 11:21 AM\n0 Comments\n0 Votes\nSubject & Level: POA 3G2, 3G3, 4G2 & 4G3\n \nTopic: Calculating impairment loss on trade receivables (TR)\n\nInteractive content: This simulator allows students to vary (i) the amoun confirmed uncollectible and (ii) % of TR estimated uncollectible to check if their calculation of impairment loss on TR (and Reversal of impairment loss on TR) is correct.\n\nI want to design a simulation interactive for my students.\nGrade level: Secondary 3\nStudent readiness level: Mixed Abilities\nThe simulation is based on: calculation of (i) Impairment loss on trade receivables (or Reversal of impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables\nThe objective of the simulation is to: Understand how the variables (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible affects the calculation of (i) Impairment loss on trade receivables (or Reversal for impairment loss on trade receivables), (ii) Trade receivables, (iii) Allowance for impairment of trade receivables and (iv) Net trade receivables will change when the variables \n\nWhile using the simulation, students should experience: experimenting with different variables i.e. (i) amount confirmed uncollectible and (ii) percentage of trade receivables estimated uncollectible \nThe interface should include: drop down list for students to select the variable “Amount confirmed uncollectible” where values consist of $0, $100, $200, $300, $400, $500, $600 and $700; drop down list for students to select the variable “Percentage of trade receivables estimated uncollectible” where values consists of 1%, 2%, 3%,  4% and 5%.\nThe results panel should show 2 sections. \nThe title of the 1st section is “Statement of Financial Performance”, where the title of the sub-section is “Less: Other Expenses” and followed by “Impairment loss on trade receivables”.\nThe title of the 2nd section is “Statement of Financial Position” where the title of the sub-section is “Current Assets”, followed by “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\nCalculate the values for the results panel using the following logic:\nTrade receivables = Given trade receivables minus amount confirmed uncollectible\nAllowance for impairment of trade receivables = % x Trade receivables\nImpairment loss on trade receivables = Allowance for impairment of trade receivables minus (Given Allowance for impairment of trade receivables minus amount confirmed uncollectible).\n\nIf the value for Impairment loss on trade receivables is a negative value, display “Reversal of impairment loss on trade receivables” instead of “Impairment loss on trade receivables”, and display the value in brackets.\nDisplay “Reversal of impairment loss on trade receivables” in bold italics red fonts.\n\nProvide the students with a checkbox whether they want to see the workings.\nDisplay only numeric workings. Display the workings next to “Impairment loss on trade receivables”, “Trade receivables”, “Less: Allowance for impairment of trade receivables” and “Net trade receivables”.\nUncheck the checkbox automatically every time the student changes any one of the variables.\n\nGiven Trade receivables = $10000\nGiven Allowance for impairment of trade receivables = $500\n\nDisplay “Given Trade receivables” and “Given Allowance for impairment of trade receivables” at the top of the screen.\n\n\n",
    "hasZip": true,
    "zipPath": "Trade_Receivables_Impairment_Simulation_20251116.zip",
    "hasPromptImage": true,
    "promptImagePath": "Trade_Receivables_Impairment_Simulation_20251116/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Trade_Receivables_Impairment_Simulation_20251116/ACP_Prompt_for_Impairment_Loss_on_TR.docx",
    "knowledgeBaseExt": "docx",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Trade-offs and Opportunity Cost",
    "title": "Trade-offs and Opportunity Cost",
    "folder": "Trade-offs and Opportunity Cost",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Trade-offs and Opportunity Cost.html",
    "modifiedTime": "2025-12-21T13:27:02.908373",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Trade-offs and Opportunity Cost\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Trade-offs and Opportunity Cost\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Trade-offs and Opportunity Cost\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Trade-offs and Opportunity Cost.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Trade-offs and Opportunity Cost_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Trigonometric Functions Matching Assessment",
    "title": "Trigonometric Functions Matching Assessment",
    "folder": "Trigonometric Functions Matching Assessment",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Trigonometric Functions Matching Assessment.html",
    "modifiedTime": "2025-12-21T13:27:08.184474",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Trigonometric Functions Matching Assessment\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Trigonometric Functions Matching Assessment\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Trigonometric Functions Matching Assessment\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Trigonometric Functions Matching Assessment.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Trigonometric Functions Matching Assessment_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Trigonometry Unit Circle Interactive",
    "title": "Trigonometry Unit Circle Interactive",
    "folder": "Trigonometry Unit Circle Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Trigonometry Unit Circle Interactive.html",
    "modifiedTime": "2025-12-21T13:27:06.569148",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Trigonometry Unit Circle Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Trigonometry Unit Circle Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Trigonometry Unit Circle Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Trigonometry Unit Circle Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Trigonometry Unit Circle Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "Trigonometry_Unit_Circle_Interactive_20251103",
    "title": "Trigonometry Unit Circle Interactive 20251103",
    "folder": "Trigonometry_Unit_Circle_Interactive_20251103",
    "folderPath": "Trigonometry_Unit_Circle_Interactive_20251103",
    "indexPath": "Trigonometry_Unit_Circle_Interactive_20251103/index.html",
    "modifiedTime": "2025-12-21T13:26:54.236053",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "USER TASK SPECIFICATION:\n\nCreate an interactive HTML5 auto-detect about Trigonometry Unit Circle.\n\nTARGET AUDIENCE: Secondary 3-4 - Mathematics\n\nINTERACTIVE REQUIREMENTS:\n- Educational content suitable for Secondary 3-4 students\n- User interaction via sliders, buttons, checkboxes, or other appropriate controls\n- Include visualizations (2D graphics)\n- Display real-time changes in graphs, values, or visual feedback\n- Self-contained in one HTML file with embedded CSS and JavaScript\n- Add clear labels, legends, and explanations for all elements\n- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)\n- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)\n\nSPECIFIC REQUIREMENTS:\nNone specified\n\nLEARNING OUTCOMES:\n- Students should be able to explore and understand Trigonometry Unit Circle\n- Interactive elements should reveal key concepts through manipulation\n- Visual feedback should reinforce learning objectives\n- Design should encourage experimentation and discovery\n\nINTERACTION FEATURES TO INCLUDE:\n- Input controls (sliders/buttons) with clear labels and units\n- Real-time visual updates based on user input\n- Graphs or diagrams that respond to changes\n- Brief explanatory text or tooltips for context\n- Reset functionality to return to default state\n- **Real-time analytics panel tracking student actions for learning assessment**\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.",
    "hasZip": true,
    "zipPath": "Trigonometry_Unit_Circle_Interactive_20251103.zip",
    "hasPromptImage": true,
    "promptImagePath": "Trigonometry_Unit_Circle_Interactive_20251103/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "Trigonometry_Unit_Circle_Interactive_20251103/README_SLS_COMPATIBILITY.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Tropical Rainforest Layers Interactive",
    "title": "Tropical Rainforest Layers Interactive",
    "folder": "Tropical Rainforest Layers Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Tropical Rainforest Layers Interactive.html",
    "modifiedTime": "2025-12-21T13:27:07.782483",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Tropical Rainforest Layers Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Tropical Rainforest Layers Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Tropical Rainforest Layers Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Tropical Rainforest Layers Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Tropical Rainforest Layers Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Ukulele Chord C Simulator",
    "title": "Ukulele Chord C Simulator",
    "folder": "Ukulele Chord C Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Ukulele Chord C Simulator.html",
    "modifiedTime": "2025-12-21T13:27:05.087861",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Ukulele Chord C Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Ukulele Chord C Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Ukulele Chord C Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Ukulele Chord C Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Ukulele Chord C Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Ukulele Chord Simulator",
    "title": "Ukulele Chord Simulator",
    "folder": "Ukulele Chord Simulator",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Ukulele Chord Simulator.html",
    "modifiedTime": "2025-12-21T13:27:05.886685",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Ukulele Chord Simulator\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Ukulele Chord Simulator\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Ukulele Chord Simulator\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Ukulele Chord Simulator.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Ukulele Chord Simulator_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Values-Based Decision Making Adventure",
    "title": "Values-Based Decision Making Adventure",
    "folder": "Values-Based Decision Making Adventure",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Values-Based Decision Making Adventure.html",
    "modifiedTime": "2026-02-19T21:51:31.860412",
    "topic": null,
    "gradeLevel": null,
    "subject": "Character & Citizenship Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Values-Based Decision Making Adventure.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Values-Based Decision Making Adventure_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Virtual Synthesizer Workstation",
    "title": "Virtual Synthesizer Workstation",
    "folder": "Virtual Synthesizer Workstation",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Virtual Synthesizer Workstation.html",
    "modifiedTime": "2025-12-21T13:27:04.752863",
    "topic": null,
    "gradeLevel": "Secondary 4 by Ji Heng",
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Grade level: Secondary 4 by Ji Heng\n\nStudent readiness level: Mixed Abilities\n\nThe simulation is based on: Operating a virtual synthesiser workstation featuring core synthesis components including oscillators with multiple waveform options, envelope filter controls (ADSR), low-frequency oscillator (LFO) modulation, and real-time sound manipulation capabilities to understand electronic music production and sound design principles.\n\nKnown synthesis elements include:\n\nOscillator waveforms (sine, square, sawtooth, triangle)\nADSR envelope controls (Attack, Decay, Sustain, Release)\nFilter types (low-pass, high-pass, band-pass)\nLFO modulation sources and destinations\nFrequency and amplitude controls\nFilter cutoff and resonance parameters\nModulation depth and rate settings\nThe objective of the simulation is to: Allow students to explore fundamental synthesis concepts through hands-on experimentation, understand how different waveforms create distinct timbres, master envelope shaping for dynamic sound control, learn LFO modulation techniques for creating movement and texture, and develop practical skills in electronic sound design and music production.\n\nWhile using the simulation, students should experience: Selecting and switching between different oscillator waveforms, adjusting ADSR envelope parameters to shape sound dynamics, manipulating filter cutoff and resonance to alter tonal characteristics, routing LFO signals to various synthesis parameters, experimenting with modulation depth and rate controls, layering multiple synthesis elements for complex sounds, recording and comparing different parameter combinations, creating evolving textures through real-time parameter automation, and building understanding of how electronic instruments generate and modify sound.\n\nThe interface should include: Virtual synthesiser panel with clearly labelled oscillator section featuring waveform selector and frequency controls, dedicated ADSR envelope module with visual envelope display, filter section with cutoff, resonance, and filter type controls, LFO module with rate, depth, and destination routing options, virtual keyboard for triggering sounds, real-time waveform and spectrum analysers, preset saving and loading functionality, parameter automation recording capabilities, help tooltips explaining each control's function, visual feedback showing modulation effects in real-time, and sound library for comparing student creations with professional synthesis examples.",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Virtual Synthesizer Workstation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Virtual Synthesizer Workstation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Visual Lyrics Interactive",
    "title": "Visual Lyrics Interactive",
    "folder": "Visual Lyrics Interactive",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Visual Lyrics Interactive.html",
    "modifiedTime": "2025-12-21T13:27:04.020931",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Visual Lyrics Interactive\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Visual Lyrics Interactive\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Visual Lyrics Interactive\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Visual Lyrics Interactive.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Visual Lyrics Interactive_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Vocab Speed Challenge",
    "title": "Vocab Speed Challenge",
    "folder": "Vocab Speed Challenge",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Vocab Speed Challenge.html",
    "modifiedTime": "2025-12-21T13:27:03.761721",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Vocab Speed Challenge\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Vocab Speed Challenge\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Vocab Speed Challenge\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Vocab Speed Challenge.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Vocab Speed Challenge_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "SDCDworkshop2026\\Volleyball Adventure_ Match & Play",
    "title": "Volleyball Adventure  Match & Play",
    "folder": "Volleyball Adventure_ Match & Play",
    "folderPath": "SDCDworkshop2026",
    "indexPath": "SDCDworkshop2026/Volleyball Adventure_ Match & Play.html",
    "modifiedTime": "2026-02-19T21:51:31.861412",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physical Education",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/Volleyball Adventure_ Match & Play.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/Volleyball Adventure_ Match & Play_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Water Electrolysis Simulation",
    "title": "Water Electrolysis Simulation",
    "folder": "Water Electrolysis Simulation",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/Water Electrolysis Simulation.html",
    "modifiedTime": "2025-12-21T13:26:57.690190",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“Water Electrolysis Simulation”** where students adjust circuit parameters (water volume, voltage, current), start/stop a virtual electrolysis experiment, and observe hydrogen and oxygen gas production in real time.\n\nTARGET AUDIENCE:\n- Lower Secondary Science (Electrochemistry introduction, ~13–15 years old)\n\nINTERACTIVE REQUIREMENTS:\n- Visual **laboratory setup** consisting of:\n  - An electrolysis cell with water and two electrodes (cathode and anode).\n  - Gas collection tubes above each electrode (H₂ at cathode, O₂ at anode).\n  - A simple circuit diagram showing a DC power source, connecting wires, and current indicator.\n- **Control panel** with sliders for:\n  - Water Volume (e.g., 50–500 mL).\n  - Voltage (e.g., 3–12 V).\n  - Current (e.g., 0.5–3.0 A).\n- Buttons:\n  - **Start Electrolysis**.\n  - **Stop** (disabled when not running).\n  - **Reset** (returns simulation to initial state).\n- **Real-time displays**:\n  - Elapsed time (s).\n  - Electrical power `P = V × I` (W).\n  - H₂ and O₂ gas volumes (mL).\n  - H₂:O₂ volume ratio (target 2:1).\n- A small **gas production chart** (canvas) plotting H₂ and O₂ volumes over time.\n- Status message area giving textual feedback and prompts.\n- Self-contained HTML, CSS, JavaScript (no external libraries), using canvas for the chart.\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Sliders respond to touch and adjust smoothly.\n  - Layout adapts to smaller screens.\n\nSPECIFIC REQUIREMENTS:\n\nControls and parameters\n- Sliders:\n  - **Water Volume** (`#water-volume`): 50–500 mL, with current value displayed beside it (e.g., `250`).\n  - **Voltage** (`#voltage`): continuous or stepped 3–12 V, display with one decimal place (e.g., `6.0`).\n  - **Current** (`#current`): 0.5–3.0 A, display with one decimal place (e.g., `1.5`).\n- On slider `input` events:\n  - Update numeric display spans (`#water-value`, `#voltage-value`, `#current-value`).\n  - Recalculate derived quantities (power, water level).\n- Touch support:\n  - Custom `touchmove` handling maps horizontal finger position to slider value.\n  - Use `preventDefault` appropriately to avoid page scroll while sliding.\n\nApparatus visuals\n- **Water container**:\n  - Represented as a vertical container with a water column (`#water-level`) whose height scales with water volume (e.g., 20–100% height).\n- **Electrodes**:\n  - Two vertical bars inside the water (`.electrode.cathode` and `.electrode.anode`).\n  - Tooltips or titles explaining roles (cathode: H₂, anode: O₂).\n- **Gas collection tubes**:\n  - Two tubes above the container:\n    - Hydrogen tube with fill area (`#hydrogen-gas`) and volume label (`#h2-volume`).\n    - Oxygen tube with fill area (`#oxygen-gas`) and volume label (`#o2-volume`).\n  - Gas fill heights represent collected volumes, capped at ~90% of tube height.\n- **Circuit diagram**:\n  - Simple icons for battery, wires, and current indicator (`#current-flow`).\n  - Current indicator shows `I` value and glowing/animated style when the experiment runs.\n\nSimulation logic\n- Main simulation state:\n  - `isRunning` boolean.\n  - `startTime` and `elapsedTime` in seconds.\n  - `hydrogenVolume` and `oxygenVolume` in mL.\n  - `chartData` arrays for time, hydrogen, and oxygen.\n- When **Start Electrolysis** is pressed and not already running:\n  - Set `isRunning = true` and store current time.\n  - Disable Start button and enable Stop button.\n  - Activate current indicator (`.active` class) and display current value.\n  - Update status message to indicate experiment is in progress; style it with greenish “in progress” appearance.\n  - Start a **requestAnimationFrame** loop to update time and gas production.\n  - Start a periodic **bubble effect** near electrodes.\n- Gas production model (simplified):\n  - At each animation frame, compute a **production rate** based on `current`, `voltage`, and `waterVolume` (e.g., `rate ∝ I × V / sqrt(Vwater)`).\n  - Hydrogen volume increases at twice the rate of oxygen (stoichiometric 2:1).\n  - Constrain visual gas heights to a maximum (e.g., 90% of tube height).\n- On each update:\n  - Update elapsed time display (integer seconds).\n  - Update `#h2-volume` and `#o2-volume` labels (to 1 decimal place).\n  - If both volumes > 0, update H₂:O₂ ratio in `#ratio-display` (actual ratio to 1 decimal; otherwise display theoretical `2:1`).\n  - Every few seconds (e.g., every 2 s), append points to chartData and redraw chart.\n\nChart view\n- Use `#gas-chart` canvas to plot hydrogen and oxygen volumes vs time.\n- Chart background:\n  - Light-coloured rectangle with vertical and horizontal grid lines.\n- Scaling:\n  - X-axis: time (s), scaled to most recent `maxTime` window (e.g., last 10–15 points).\n  - Y-axis: volume (mL), scaled to maximum seen or a minimum (e.g., 10 mL) for readability.\n- Lines:\n  - Hydrogen: red line.\n  - Oxygen: teal/blue line.\n- Axis labels:\n  - X-axis: “Time (s)”.\n  - Y-axis: “Volume (mL)” (rotated text).\n\nStart, stop, and reset\n- **Stop** button:\n  - Stops simulation without resetting volumes/time.\n  - Re-enables Start button and disables Stop button.\n  - Stops requestAnimationFrame loop and bubble generator.\n  - Removes `.active` from current indicator.\n  - Status message updated to orange “stopped, data preserved” style.\n- **Reset** button:\n  - Calls `stopElectrolysis()` to stop any running simulation.\n  - Reset all state variables (time, gas volumes, chartData).\n  - Reset visual elements: gas heights 0%, labels “0 mL”, time “0s”, and default slider values.\n  - Redraw chart cleared of previous data.\n  - Reset water level & power display.\n  - Reset status message to blue “ready” style.\n\nBubble and current animations\n- Bubble effect:\n  - Periodic creation of `.bubble` elements near cathode and (less frequently) near anode.\n  - Bubbles float upward in the water container with CSS animation, then are removed from DOM.\n- On Stop/Reset:\n  - Clear the bubble interval and remove all bubble elements.\n\nStatus message and guidance\n- Status area (`#status-message`) that shows context-sensitive messages:\n  - Before start: “Adjust parameters and click ‘Start Electrolysis’ to begin the experiment”.\n  - During run: “Electrolysis in progress – Observing gas production…”.\n  - Stopped: “Electrolysis stopped – Data preserved for analysis”.\n  - After reset: “Simulation reset – Ready to start new experiment”.\n- Style changes (background/border/text colour) reinforce current state (ready/running/stopped/reset).\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Describe the basic setup and process of water electrolysis.\n  - Identify where hydrogen and oxygen are produced (cathode vs anode).\n  - Observe and explain why the hydrogen volume is approximately twice that of oxygen (2:1 ratio).\n  - Relate current and voltage to the **rate of gas production**.\n  - Interpret a simple graph of gas volume vs time.\n- The simulation should encourage students to explore “what-if” scenarios by changing parameters and observing effects on gas production and ratio.\n\nINTERACTION FEATURES TO INCLUDE:\n- Slider-based control of experimental parameters with instant numeric feedback.\n- Start/Stop/Reset experiment controls with clear state transitions.\n- Real-time visual changes (water level, gas columns, bubbles, current indicator).\n- Dynamic chart of gas production.\n- Intuitive status messages guiding the user.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Water Electrolysis Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Water Electrolysis Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\Water Electrolysis Simulation_ai_integrated\\Water Electrolysis Simulation",
    "title": "Water Electrolysis Simulation",
    "folder": "Water Electrolysis Simulation",
    "folderPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated",
    "indexPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated/Water Electrolysis Simulation.html",
    "modifiedTime": "2025-12-21T13:27:00.125287",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Water Electrolysis Simulation\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Water Electrolysis Simulation\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Water Electrolysis Simulation\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated/Water Electrolysis Simulation.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated/Water Electrolysis Simulation_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated",
    "title": "Water Electrolysis Simulation ai integrated",
    "folder": "Water Electrolysis Simulation_ai_integrated",
    "folderPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated",
    "indexPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated/index.html",
    "modifiedTime": "2025-12-21T13:27:00.070285",
    "topic": null,
    "gradeLevel": null,
    "subject": "Chemistry",
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "ACPcookout2025/Water Electrolysis Simulation_ai_integrated.zip",
    "hasPromptImage": false,
    "promptImagePath": null,
    "promptImageExt": null,
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": true
  },
  {
    "id": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21",
    "title": "webejs model Nets of Cube Selectable v21",
    "folder": "webejs_model_Nets_of_Cube_Selectable_v21",
    "folderPath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21",
    "indexPath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/index.html",
    "modifiedTime": "2026-02-06T00:51:50",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": false,
    "promptText": "",
    "hasZip": true,
    "zipPath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21.zip",
    "hasPromptImage": true,
    "promptImagePath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/01authorlookang50x50.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": true,
    "knowledgeBasePath": "SDCDworkshop2026/1materialsUsed/webejs_model_Nets_of_Cube_Selectable_v21/_metadata.txt",
    "knowledgeBaseExt": "txt",
    "hasXapi": true
  },
  {
    "id": "ACPcookout2025\\users\\Word Typing Challenge",
    "title": "Word Typing Challenge",
    "folder": "Word Typing Challenge",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Word Typing Challenge.html",
    "modifiedTime": "2025-12-21T13:27:05.573555",
    "topic": null,
    "gradeLevel": null,
    "subject": null,
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Word Typing Challenge\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Word Typing Challenge\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Word Typing Challenge\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Word Typing Challenge.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Word Typing Challenge_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\World War II Causes - Concept Mapping",
    "title": "World War II Causes - Concept Mapping",
    "folder": "World War II Causes - Concept Mapping",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/World War II Causes - Concept Mapping.html",
    "modifiedTime": "2025-12-21T13:27:02.080293",
    "topic": null,
    "gradeLevel": null,
    "subject": "Geography",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"World War II Causes - Concept Mapping\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"World War II Causes - Concept Mapping\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"World War II Causes - Concept Mapping\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/World War II Causes - Concept Mapping.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/World War II Causes - Concept Mapping_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\World War II Outbreak Factors Visualization",
    "title": "World War II Outbreak Factors Visualization",
    "folder": "World War II Outbreak Factors Visualization",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/World War II Outbreak Factors Visualization.html",
    "modifiedTime": "2025-12-21T13:27:08.229005",
    "topic": null,
    "gradeLevel": null,
    "subject": "History",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"World War II Outbreak Factors Visualization\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"World War II Outbreak Factors Visualization\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"World War II Outbreak Factors Visualization\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/World War II Outbreak Factors Visualization.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/World War II Outbreak Factors Visualization_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Xiao Le's Day",
    "title": "Xiao Le's Day",
    "folder": "Xiao Le's Day",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Xiao Le's Day.html",
    "modifiedTime": "2025-12-21T13:27:03.303532",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "By Zhen Lin\nThis is a short interactive game I designed for Primary 3 students — it’s called 《小乐的一天》.\n\n \n\nThe game is a train-themed storytelling activity, where students follow a cheerful train conductor to explore what Xiao Le does on her birthday — in the morning, afternoon, and evening.\n\n \n\nIn each scene, students see a set of emoji pictures and answer four guiding questions:\nWhen did it happen? Where was she? Who was she with? And what were they doing?\n\nThey choose the correct answers — for example, 🌞🏫👧👦🎵 represents “上午 – 学校 – 同学 – 唱生日歌.”\n\n \n\n(I used emojis instead of real images because the we can’t upload pictures.)\n\n \n\nThe goal is to help students describe a picture using the four key elements — 时间、地点、人物、事情 — which supports 段落小练笔 (paragraph writing) and builds observation, sequencing, and sentence skills in a fun way.\n\n \n\nThe game gives friendly feedback — correct answers light up the scene with a “叮！” sound, while wrong answers show a gentle hint. When students complete all three scenes, the train moves forward with fireworks and the message “太棒了！你完成了小乐的一天！”",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Xiao Le's Day.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Xiao Le's Day_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\Xiao Le's Day - Concept Art",
    "title": "Xiao Le's Day - Concept Art",
    "folder": "Xiao Le's Day - Concept Art",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/Xiao Le's Day - Concept Art.html",
    "modifiedTime": "2025-12-21T13:27:03.317530",
    "topic": null,
    "gradeLevel": null,
    "subject": "Art",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is auto-generated as a starting point. Please edit and refine the details for your lesson context.\n\nUSER TASK SPECIFICATION:\n\nCreate a complete, functional HTML5 interactive titled **\"Xiao Le's Day - Concept Art\"**.\n\nGENERAL REQUIREMENTS:\n- Self-contained front-end using **HTML, CSS, and JavaScript only** (no external frameworks required).\n- Designed for **browser use on laptops, tablets, and phones** (responsive layout).\n- Clear visual layout with a **main interactive area** and a **side/top panel** for instructions and feedback.\n- Include basic **interactivity appropriate to the title** (e.g., game/simulation/quiz/visualization).\n- Provide **immediate feedback** where meaningful (correct/incorrect, hints, progress indicators, etc.).\n- Use simple, student-friendly visual design and readable text.\n\nSUGGESTED STRUCTURE (EDIT AS NEEDED):\n1. **Learning Goal & Context**\n   - Briefly describe the learning objective(s) for \"Xiao Le's Day - Concept Art\".\n   - Example: \"Students will be able to ...\" (fill in based on your subject and level).\n\n2. **Core Interactive Mechanics**\n   - Describe the main interaction for this activity (e.g., drag-and-drop, multiple-choice, slider-based simulation, matching pairs, timeline manipulation, etc.).\n   - Explain how the learner will use the interactive to achieve the learning goal.\n\n3. **Feedback & Scoring (if applicable)**\n   - Specify how the interactive should respond to correct vs incorrect actions.\n   - Indicate whether there should be a score, attempts counter, or summary message at the end.\n\n4. **Interface Layout**\n   - Describe the main UI regions (e.g., top instructions bar, left control panel, right visualisation area, bottom feedback/status bar).\n   - Indicate any important buttons (Start, Reset, Check Answer, Next, Help, etc.).\n\n5. **Accessibility & Responsiveness**\n   - Ensure buttons and text are large enough for touch devices.\n   - Prefer high-contrast colors and clear labels for all controls.\n\n6. **Extra Notes (Optional)**\n   - Any subject-specific rules, constraints, or content that must be included (e.g., specific question sets, scenario details, or data sets).\n\nDEVELOPER IMPLEMENTATION NOTES:\n- Organise the code into three files in this folder:\n  -  – structure and main containers for \"Xiao Le's Day - Concept Art\".\n  -  – layout, colours, and responsive design.\n  -  – interactive logic, event handlers, and state management.\n- Ensure the interactive runs fully **offline** once these files are loaded in a browser.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/Xiao Le's Day - Concept Art.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/Xiao Le's Day - Concept Art_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\users\\You Are My Sunshine - Interactive Lyrics",
    "title": "You Are My Sunshine - Interactive Lyrics",
    "folder": "You Are My Sunshine - Interactive Lyrics",
    "folderPath": "ACPcookout2025/users",
    "indexPath": "ACPcookout2025/users/You Are My Sunshine - Interactive Lyrics.html",
    "modifiedTime": "2025-12-21T13:27:05.939686",
    "topic": null,
    "gradeLevel": null,
    "subject": "Physics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“You Are My Sunshine – Interactive Lyrics”** activity where young learners explore the lyrics through clickable images that reveal spelled-out key words, with audio playback of the song and strong accessibility support.\n\nTARGET AUDIENCE:\n- Lower Primary English / Music (Primary 1–2; beginner readers)\n\nINTERACTIVE REQUIREMENTS:\n- A **lyrics display** for the first part of “You Are My Sunshine”, laid out in lines with a mix of plain text words and **interactive picture-word cards**.\n- Each interactive card shows an image (sun, happy face, grey cloud, etc.) that, when clicked or activated via keyboard, flips to reveal the **spelled-out English word** as individual letters (e.g., S U N S H I N E).\n- A central **Play Song** button that plays the audio for “You Are My Sunshine”, with fallback to a simple generated melody if the audio file is not available.\n- Visual feedback (animations) and simple audio feedback (chimes/tones) to reward interaction.\n- Self-contained HTML, CSS, JavaScript. No external frameworks.\n- **ACCESSIBLE & CHILD-FRIENDLY**:\n  - Keyboard accessible (Tab/Enter/Space) for all interactive elements.\n  - ARIA labels + live region announcements for screen readers.\n  - Clear instructions for keyboard navigation embedded in an invisible region.\n\nSPECIFIC REQUIREMENTS:\n\nLyrics layout\n- Show at least these lines (or equivalent subset):\n  - “You are my sunshine, my only sunshine”\n  - “You make me happy, when skies are grey”\n- Layout as `.lyrics-line` blocks containing:\n  - `<span class=\"word\">` elements for regular words (you, are, my, only, etc.).\n  - `.word-image` blocks for key vocabulary represented by pictures:\n    - `data-word=\"sunshine\"` – sun icon.\n    - `data-word=\"happy\"` – smiley face icon.\n    - `data-word=\"grey\"` – grey cloud icon.\n- Each `.word-image` contains a **flip card**:\n  - **Front**: SVG illustration (sun, face, cloud).\n  - **Back**: the **spelled word**, with each letter wrapped in a `.letter` span.\n\nCard interaction\n- Each `.word-image`:\n  - Is clickable and touch-friendly.\n  - Supports keyboard activation via Enter/Space.\n  - Uses `tabindex=\"0\"`, `role=\"button\"`, and ARIA label describing the action (e.g., “Click to reveal the word sunshine spelled out”).\n- Flipping behaviour:\n  - Default: shows picture.\n  - On activation: flip to show spelled letters, animate letters in a sequence (e.g., `letterPop` animation with slight delay between letters).\n  - On second activation: flip back to picture.\n- Maintain internal state (e.g., a `Set` of flipped cards) so the app knows which cards are currently revealed.\n- Provide haptic feedback (short vibration) on mobile if available.\n- When a card is flipped to reveal the word:\n  - Play a **short positive chime** using Web Audio API.\n  - Update ARIA label to reflect that the word is revealed and can be flipped back.\n  - Announce via a live region: “Word revealed: sunshine, spelled S, U, N, S, H, I, N, E.”\n\nAudio playback\n- Add an `<audio id=\"songAudio\">` element with one or more `<source>` URLs for the “You Are My Sunshine” song.\n- Play button behaviour:\n  - Initial state: shows a play icon and text “Play Song”.\n  - On click/keypress:\n    - If not playing: attempt to play the audio file.\n    - If audio plays successfully: show pause/playing state (e.g., pause icon + “Playing…”), set `isPlaying = true`.\n    - If the audio file cannot be played (error or missing), **fallback** to a **generated melody** using Web Audio (sequence of notes approximating the first line).\n  - While playing generated melody, maintain the playing state until melody ends.\n  - If button pressed while playing: stop audio/melody and revert to “Play Song” state.\n- On natural audio end or melody completion: automatically reset button to “Play Song” and `isPlaying = false`.\n\nGenerated melody (fallback)\n- Use Web Audio API `AudioContext`, `OscillatorNode`, and `GainNode`:\n  - Define a list of `(frequency, duration)` pairs approximating the melody of “You are my sunshine”.\n  - Schedule notes sequentially with a gentle sine wave and simple attack/decay envelope.\n  - Ensure the entire melody stops after all notes have played.\n\nAccessibility & instructions\n- Add a **live region** element (off-screen) with `aria-live=\"polite\"` and `aria-atomic=\"true\"` where status messages are announced, such as:\n  - Word reveal announcements with spelling.\n  - Optional “Playing song…” messages.\n- Add an off-screen **instructions region** with a description like:\n  - “Use Tab to navigate between images and the play button. Press Enter or Space to interact.”\n- Ensure `.word-image` and the play button both respond to keyboard events.\n\nVisual feedback and animations\n- Use CSS transitions/animations to: \n  - Provide a brief scale-down effect on buttons/images when activated.\n  - Animate letter appearance on word reveal (staggered `letterPop` effect).\n- Use a `flip-card` pattern (CSS 3D transforms) for the image-to-word transition.\n\nError handling\n- Wrap audio-related code in try/catch and log errors to console for debugging.\n- If AudioContext is not available, fail gracefully by still providing visual feedback and possibly a timed “pretend playing” state (e.g., 8 seconds) before resetting.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Connect **images** (sun, happy face, grey cloud) with the corresponding **vocabulary** (sunshine, happy, grey).\n  - Recognise and **spell** these key words by seeing them broken into letters.\n  - Enjoy and sing along to the song, reinforcing vocabulary in a musical context.\n- The interactive should support early literacy by combining **audio, imagery, and text** in a low-load, playful way.\n\nINTERACTION FEATURES TO INCLUDE:\n- Click/tap/keyboard flip between picture and spelled word.\n- Audio playback of the song with robust fallback.\n- Visual and audio reinforcement (chimes, animations) for correct interactions.\n- Screen-reader-friendly announcements and navigation instructions.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/users/You Are My Sunshine - Interactive Lyrics.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/users/You Are My Sunshine - Interactive Lyrics_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  },
  {
    "id": "ACPcookout2025\\汉字太空射击 - Chinese Character Space Shooter",
    "title": "汉字太空射击 - Chinese Character Space Shooter",
    "folder": "汉字太空射击 - Chinese Character Space Shooter",
    "folderPath": "ACPcookout2025",
    "indexPath": "ACPcookout2025/汉字太空射击 - Chinese Character Space Shooter.html",
    "modifiedTime": "2025-12-21T13:26:58.381208",
    "topic": null,
    "gradeLevel": null,
    "subject": "Mathematics",
    "hasPrompt": true,
    "promptText": "Note: this text prompt is re-made from the interactive, use as reference only.\n\nUSER TASK SPECIFICATION:\n\nCreate an interactive HTML5 **“汉字太空射击 – Chinese Character Space Shooter”** game where students practice recognising common Chinese characters by shooting the correct character asteroids in space.\n\nTARGET AUDIENCE:\n- Primary 3 Chinese Language (approx. ages 8–9)\n\nINTERACTIVE REQUIREMENTS:\n- Full-screen (or container-filling) **canvas-based space shooter** game.\n- Player controls a **spaceship** at the bottom of the screen that can move and shoot upwards.\n- **Asteroids** fall from the top of the screen, each displaying a single Chinese character (汉字).\n- A **question panel** shows the **target character** plus its English meaning and Hanyu Pinyin.\n- The learner’s goal: **shoot only the asteroids that match the target character**.\n- UI overlay elements:\n  - Score display (得分) with star indicators for combo.\n  - Lives display (生命) using hearts.\n  - Level display (等级) with a progress bar.\n  - Question text: “找到这个字: X”.\n  - Question meaning and pinyin: “Meaning (pinyin)”.\n- Game state screens:\n  - In-game HUD.\n  - **Game Over** overlay showing final score, accuracy, and max combo, with buttons to restart and view leaderboard.\n- Additional modals:\n  - **Help** modal (游戏帮助) explaining controls, goals, and scoring.\n  - **Leaderboard** modal showing local best scores.\n- Audio feedback and background effects:\n  - Simple sound effects for shooting, correct hit, wrong hit, level up, and game over.\n  - Option to toggle sound on/off.\n- Self-contained HTML + CSS + JavaScript (no external game engines).\n- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:\n  - Works on desktop (keyboard + mouse) and mobile (touch controls, auto-shoot).\n\nSPECIFIC REQUIREMENTS:\n\nCharacter content\n- Use a fixed set of **common characters** appropriate for Primary 3, each with:\n  - `char`: the Chinese character (e.g., \"水\", \"火\", \"木\", \"金\", \"土\", \"人\", etc.).\n  - `meaning`: English gloss (e.g., \"Water\", \"Fire\", \"Wood\").\n  - `pinyin`: Hanyu Pinyin with tone marks (e.g., \"shuǐ\", \"huǒ\").\n- Example list (as in the current implementation):\n  - 水 (Water, shuǐ)\n  - 火 (Fire, huǒ)\n  - 木 (Wood, mù)\n  - 金 (Gold, jīn)\n  - 土 (Earth, tǔ)\n  - 人 (Person, rén)\n  - 大 (Big, dà)\n  - 小 (Small, xiǎo)\n  - 上 (Up, shàng)\n  - 下 (Down, xià)\n  - 左 (Left, zuǒ)\n  - 右 (Right, yòu)\n  - 中 (Middle, zhōng)\n  - 日 (Sun, rì)\n  - 月 (Moon, yuè)\n  - 山 (Mountain, shān)\n  - 川 (River, chuān)\n  - 田 (Field, tián)\n  - 口 (Mouth, kǒu)\n  - 手 (Hand, shǒu)\n\nQuestion system\n- At any time, there is one **current question**:\n  - Randomly select a character entry from the list.\n  - Display: `找到这个字: <char>` in the question text panel.\n  - Display the character’s meaning and pinyin in a smaller sub-line (e.g., `Gold (jīn)`).\n- When a correct asteroid is shot, generate a **new question**.\n\nAsteroids\n- Asteroids represent candidate answers and fall from the top of the canvas:\n  - Each asteroid has:\n    - Position (x, y).\n    - Size (e.g., 60×60 px).\n    - Falling speed based on level.\n    - A Chinese character (from the list).\n    - A flag `isCorrect` indicating whether it matches the current question’s character.\n  - Use an **approx. 30% chance** that a spawned asteroid is correct; the rest are incorrect (different from the current character).\n- Visual design:\n  - Circular, shaded asteroid shape.\n  - Different colours for correct vs incorrect asteroids (e.g., blue-ish for correct, grey for incorrect).\n  - Character rendered in white in the centre.\n  - Slight rotation and rotation animation for visual interest.\n- Behaviour:\n  - Asteroids fall with increasing speed as level increases.\n  - If a **correct** asteroid passes off the bottom of the canvas without being hit, the player loses a life.\n\nSpaceship and controls\n- The spaceship is drawn near the bottom of the canvas and can move within bounds.\n- Controls on desktop:\n  - **Arrow keys / WASD** to move (left/right, optionally up/down).\n  - **Spacebar** to shoot bullets upward.\n  - **ESC** to pause/continue the game.\n- Controls on mobile:\n  - A **touch area** below or overlaid on the canvas.\n  - Drag/move finger horizontally; spaceship moves to follow the touch x-position.\n  - Game performs **auto-shooting** at intervals on mobile (no need for tap to shoot each time).\n\nBullets and collision\n- Bullets are simple rectangles fired from the spaceship’s nose.\n- On shoot:\n  - Create a bullet travelling upwards at fixed speed.\n  - Play a shoot sound.\n- Collision detection:\n  - Check bullet vs asteroid rectangles.\n  - When collision detected:\n    - Remove bullet and asteroid.\n    - Increment `totalAnswers` counter.\n    - If `asteroid.isCorrect`:\n      - Treat as **correct answer**.\n    - Else, treat as **wrong answer**.\n\nScoring, combo, and level\n- Maintain:\n  - `score` (starting at 0).\n  - `combo` (consecutive correct hits).\n  - `maxCombo` (highest combo achieved this run).\n  - `correctAnswers` and `totalAnswers` (for accuracy).\n- Correct hit:\n  - `correctAnswers++`, `combo++`, `maxCombo = max(maxCombo, combo)`.\n  - Score gain base: +10 points plus a small **combo bonus** (e.g., +2 per combo step).\n  - Show a **\"连击\" power-up notification** when combo ≥ 3, with text like `连击 x3!`.\n  - Play a positive “correct” sound.\n  - Generate a new question.\n  - Check whether to **level up** (e.g., score >= level × 100).\n- Wrong hit or missing a correct asteroid:\n  - `combo` reset to 0.\n  - Reduce score slightly for wrong shots (e.g., −5, floor at 0).\n  - Lose a life if miss a correct asteroid or on certain wrong events.\n  - Play an error sound.\n- Level system:\n  - `level` starts at 1.\n  - When `score` crosses certain thresholds, `level++`.\n  - On level up:\n    - Show power-up notification: `等级提升! 等级 <level>`.\n    - Increase difficulty: shorten asteroid spawn intervals and/or increase fall speeds.\n    - Play a “level up” sound.\n\nLives and hearts\n- Player starts with **3 hearts** (lives).\n- Lives are shown as heart icons (❤️) in the UI.\n- On losing a life, visually mark one heart as lost (e.g., greyed or with a `lost` class).\n- When lives reach 0:\n  - Trigger **Game Over**.\n\nParticles and visual feedback\n- When an asteroid is destroyed (hit by a bullet):\n  - Spawn a small particle explosion at the collision point.\n  - Use greenish particles for correct hits; red for wrong.\n  - Particles move outward and fade out over time.\n- Background:\n  - A simple **animated starfield** drawn each frame (flickering / moving stars).\n- Spaceship and bullet visuals:\n  - Stylised triangular spaceship with body, window, and engine glow.\n  - Bullets with glow effect.\n\nGame states and UI\n- States: `playing`, `paused`, `gameOver`.\n- Status bar at top:\n  - Score (得分) numeric label.\n  - Stars area showing combo (small ⭐ icons for high combo).\n  - Lives (生命) hearts.\n  - Level (等级) numeric label plus progress bar (progress towards next level). Progress can be based on `score % 100`.\n- Question panel:\n  - Shows the current target character, meaning, and pinyin.\n- Controls area:\n  - Pause button (⏸️ / ▶️ toggle).\n  - Sound toggle button (🔊/🔇).\n  - Help button (❓) to open the help modal.\n- **Game Over overlay**:\n  - Final score.\n  - Accuracy (%) = `correctAnswers / totalAnswers × 100`.\n  - Max combo.\n  - Buttons: “重新开始” (Restart) and “排行榜” (Leaderboard).\n\nHelp and leaderboard\n- Help modal (`游戏帮助`):\n  - Explains the **goal** (射击带有正确汉字的小行星).\n  - Explains **controls** for PC (arrow keys, space, ESC) and mobile (touch to move, auto-shoot).\n  - Explains **scoring rules** (correct +10 + combo, wrong −5, lose life, etc.).\n- Leaderboard:\n  - Save entries to `localStorage` under a game-specific key (e.g., `chineseSpaceShooterLeaderboard`).\n  - Each entry includes: score, level, accuracy, date.\n  - Show top 10 scores sorted by score descending.\n  - Leaderboard modal shows rank, level, accuracy, score, and date.\n\nSound design\n- Implement sounds using Web Audio API (oscillator + gain node):\n  - `shoot`: short blip.\n  - `correct`: positive short melody.\n  - `wrong`: low descending tone.\n  - `levelup`: ascending sequence.\n  - `gameover`: longer, descending tone.\n- Sound can be turned on/off with a **sound toggle button**, updating its icon.\n\nGame loop and performance\n- Use `requestAnimationFrame` for the main loop:\n  - Compute `deltaTime` each frame.\n  - If state is `playing`:\n    - Update game state (positions, spawns, collisions, particles).\n  - Always render the frame (including pause overlay when paused).\n- Auto-shoot on mobile: occasionally call `shoot()` when game is playing and `isMobile`.\n\nLEARNING OUTCOMES:\n- Students should be able to:\n  - Recognise and read a set of common Chinese characters by sight.\n  - Link each character to its meaning and pinyin.\n  - Strengthen character recognition through repeated exposure in a game context.\n- The game should encourage **fast, accurate recognition** rather than random shooting, via combo rewards and penalties for mistakes.\n\nINTERACTION FEATURES TO INCLUDE:\n- Real-time action game feel with canvas rendering.\n- Keyboard, mouse, and touch controls.\n- Clear status indicators (score, lives, level, progress, combo stars).\n- Help guidance and accessible controls for both PC and mobile.\n- Leaderboard using local storage for repeated practice and motivation.\n\nCreate a complete, functional HTML5 interactive that meets all requirements above.\n",
    "hasZip": true,
    "zipPath": "ACPcookout2025/汉字太空射击 - Chinese Character Space Shooter.zip",
    "hasPromptImage": true,
    "promptImagePath": "ACPcookout2025/汉字太空射击 - Chinese Character Space Shooter_files/thumbnail_320x180.png",
    "promptImageExt": "png",
    "hasKnowledgeBase": false,
    "knowledgeBasePath": null,
    "knowledgeBaseExt": null,
    "hasXapi": false
  }
]