# TimeLearner — Complete Technical, Pedagogical & Curriculum Documentation > Interactive Multilingual Math Application, Pedagogical Geared Clock Engine & Vector Printable Worksheet Generator TimeLearner (https://timelearner.com) is an open-access, neuro-inclusive educational software suite built to empower primary school children (ages 5–10) to read analogue and digital clocks, calculate elapsed time, and master time-telling concepts. Aligned with global mathematics frameworks including UK National Curriculum (KS1 & KS2), US Common Core State Standards (CCSS), Hong Kong Education Bureau (EDB) Primary Mathematics Curriculum, Spanish Curriculum LOMLOE, Latin America Primary Math Guidelines, and International Baccalaureate Primary Years Programme (IB PYP). --- ## 1. System Architecture & Technical Specifications - **Front-End Stack**: React 18, TypeScript, Tailwind CSS, Motion (Framer Motion). - **SEO / SSG Architecture**: Architecture E — Static Site Generation (SSG) with client-side React hydration for interactive components. - **Rendering Model**: All 26 static content routes are pre-rendered into static HTML at build time (`prerender.cjs`) across 4 international locales (`en`, `zh-HK`, `es-ES`, `es-419`) resulting in 130 pre-rendered HTML files with complete semantic markup, Schema.org JSON-LD structured data (`LearningResource`, `WebApplication`, `FAQPage`, `Article`), localized hreflang links, and OpenGraph/Twitter Card tags. - **Zero Server Dependency**: 100% client-side computation. All interactive math clock models, worksheet rendering engines, and QR code encoders execute locally in the user's browser. - **Privacy & Safety Framework**: - Zero cookies used for tracking. - Zero analytics scripts or third-party trackers. - No user registration, password, or account requirement. - 100% compliant with COPPA (Children's Online Privacy Protection Act), FERPA, EU GDPR, and Hong Kong Personal Data (Privacy) Ordinance (PDPO). --- ## 2. Core Pedagogical Innovations ### 2.1 Mechanical Geared Clock Simulation Standard digital educational clocks often allow hour and minute hands to move independently, creating mathematically impossible configurations (e.g., minute hand at 30 minutes while hour hand sits directly on 3). TimeLearner implements a strict 12:1 gear ratio engine. Rotating the minute hand seamlessly drives the hour hand across proportional angular positions, reinforcing rotational geometry and continuous temporal progression. ### 2.2 The Linear Time Ribbon (Elapsed Time Visualizer) Calculating elapsed time requires converting circular modulo-12/24 spatial representation into a continuous linear continuum. TimeLearner's Linear Time Ribbon is an interactive 24-hour horizontal slider positioned beneath the clock face. Moving the ribbon dynamically updates both analogue clock hands and digital readouts, bridging circular and linear time perception. ### 2.3 Multilingual Languaging (English, Traditional Chinese, Spanish Spain & Spanish LATAM) - **English**: Prepositional shift phrasing ("past" vs "to", e.g. "twenty to four"). - **Traditional Chinese (zh-HK)**: Absolute sequential & colloquial fractions ("3點40分" / "三點三個字" - quarter past 3). - **Spanish (Spain - es-ES)**: Peninsular phrasing ("las cuatro menos veinte", "las tres y cuarto"). - **Spanish (Latin America - es-419)**: Regional LATAM phrasing ("las tres y quince", "faltan veinte para las cuatro"). TimeLearner's Multilingual Languaging engine displays concurrent phrasing in real-time as clock hands rotate, eliminating cognitive translation friction. ### 2.4 Neuro-Inclusive SEN Focus Mode Designed for children with Autism Spectrum Disorder (ASD), Attention Deficit Hyperactivity Disorder (ADHD), Dyscalculia, or sensory processing sensitivities: - Removes extraneous background animations, decorative characters, and high-frequency sound triggers. - Enhances color contrast ratios exceeding WCAG AAA standards. - Uses oversized touch/click targets (minimum 48px) for low motor control ease. --- ## 3. Printable Worksheet Generator Engine Located at `https://timelearner.com/worksheet` (and localized at `/en/worksheet`, `/zh-HK/worksheet`, `/es-ES/worksheet`, `/es-419/worksheet`), the generator produces print-ready vector PDF worksheets: - **Infinite Variation**: Procedural random seed algorithm generates unique clock problem sets every time. - **Customizable Difficulty**: Toggle between O'Clock, Half Past, Quarter Past/To, 5-Minute Intervals, 1-Minute Precision, or Elapsed Time Word Problems. - **Multilingual Printing**: Worksheets can be generated in English, Traditional Chinese, Spanish (Spain), or Spanish (LATAM) format. - **QR Code Instant Sync**: Every printed worksheet includes an embedded QR code. Scanning the QR code with any mobile camera instantly opens the live interactive clock app with the exact same time problem for immediate self-correction. - **Instant Answer Keys**: Generates a matching page with pre-drawn clock hand answers for hassle-free teacher grading. --- ## 4. Learning Progression & Difficulty Matrix | Level | Target Age | Core Concepts & Skills Taught | |---|---|---| | **Level 1: Beginner** | Ages 5–6 (Year 1 / K3-P1 / 1º Primaria) | Recognising hour and minute hands, reading exact O'clock and Half-past times, basic day/night daily routine alignment. | | **Level 2: Intermediate** | Ages 6–7 (Year 2 / P2 / 2º Primaria) | Reading quarter-past and quarter-to, counting by 5s around the clock face (5 to 55 past), understanding A.M. vs P.M. | | **Level 3: Advanced** | Ages 7–8 (Year 3 / P3 / 3º Primaria) | Precise 1-minute interval reading, "Minutes Past" and "Minutes To" phrasing, 12-hour to 24-hour digital conversion. | | **Level 4: Challenge / Mastery** | Ages 8–10 (Year 4-5 / P4-P5 / 4º-5º Primaria) | Multi-step elapsed time word problems, schedule reading (trains/buses), time interval calculation using the Linear Time Ribbon. | --- ## 5. Global Curriculum Standards Mapping ### 5.1 UK National Curriculum (Mathematics Key Stage 1 & 2) - **Year 1**: Tell the time to the hour and half past the hour and draw the hands on a clock face to show these times. - **Year 2**: Tell and write the time to five minutes, including quarter past/to the hour and draw the hands on a clock face. - **Year 3**: Tell and write the time from an analogue clock, including using Roman numerals (I to XII), and 12-hour and 24-hour clocks. Estimate and read time with increasing accuracy to the nearest minute. - **Year 4**: Read, write and convert time between analogue and digital 12- and 24-hour clocks. Solve problems involving converting from hours to minutes; minutes to seconds; years to months; weeks to days. ### 5.2 US Common Core State Standards (CCSS.MATH.CONTENT) - **1.MD.B.3**: Tell and write time in hours and half-hours using analog and digital clocks. - **2.MD.C.7**: Tell and write time from analog and digital clocks to the nearest five minutes, using a.m. and p.m. - **3.MD.A.1**: Tell and write time to the nearest minute and measure time intervals in minutes. Solve word problems involving addition and subtraction of time intervals in minutes. ### 5.3 Hong Kong EDB Primary Mathematics Curriculum (香港課程發展議會) - **Primary 1 (1M1 時與分)**: 認識時鐘的鐘面、時針與分針；報讀「幾點鐘」及「半點鐘」。 - **Primary 2 (2M1 時間)**: 報讀「幾點幾分」(以5分鐘為單位)；理解「上點」(A.M.)與「下點」(P.M.)。 - **Primary 3/4 (3M1/4M1 24小時報時制與時間間隔)**: 報讀精確至1分鐘的時間；進行12小時制與24小時制的互換；計算經過的時間 (Elapsed Time)。 ### 5.4 Spanish Curriculum LOMLOE & Latin America Math Standards - **Educación Primaria (1º - 4º)**: Lectura e interpretación de las horas en relojes analógicos y digitales (en punto, y media, y cuarto, menos cuarto). Conversión entre formato de 12 horas (a.m. / p.m.) y 24 horas. Resolución de problemas prácticos con unidades de tiempo y cálculo de tiempo transcurrido. ### 5.5 International Baccalaureate (IB PYP Mathematics) - **Phase 2**: Understand that time can be measured using standard units; read analogue and digital time to the hour, half-hour, and quarter-hour. - **Phase 3**: Use and construct timelines; convert between 12-hour and 24-hour time; calculate elapsed time in real-world inquiry contexts. --- ## 6. Complete Pre-rendered Site Route Directory & International Locales All 26 routes are fully pre-rendered across 4 international locale folders (`/en/`, `/zh-HK/`, `/es-ES/`, `/es-419/`) as well as root fallbacks (`/`), providing 130 indexable static pages with localized hreflang tags: ### Core Pages - `https://timelearner.com/` (Home / Interactive Clock App) - English: `https://timelearner.com/en/` - Traditional Chinese: `https://timelearner.com/zh-HK/` - Spanish (Spain): `https://timelearner.com/es-ES/` - Spanish (LATAM): `https://timelearner.com/es-419/` - `https://timelearner.com/worksheet` (Printable Worksheet Generator) - English: `https://timelearner.com/en/worksheet` - Traditional Chinese: `https://timelearner.com/zh-HK/worksheet` - Spanish (Spain): `https://timelearner.com/es-ES/worksheet` - Spanish (LATAM): `https://timelearner.com/es-419/worksheet` - `https://timelearner.com/features` (Features Overview) - `https://timelearner.com/curriculum` (Curriculum Standards) - `https://timelearner.com/about` (About TimeLearner Project) - `https://timelearner.com/faq` (Help & FAQ Support Desk) - `https://timelearner.com/licensing` (Licensing & Open Access Policy) - `https://timelearner.com/legal` (Privacy & Legal Compliance) - `https://timelearner.com/how-to-use` (Parent & Educator User Guide) ### Pedagogical Learn Hub Articles (`/learn/`) - `https://timelearner.com/learn` (Learn Hub Overview) - `https://timelearner.com/learn/complete-guide` (Comprehensive Guide to Teaching Time) - `https://timelearner.com/learn/how-children-understand` (Child Cognitive Psychology & Spatial Time) - `https://timelearner.com/learn/sen-inclusive` (SEN, ADHD & Dyscalculia Teaching Frameworks) - `https://timelearner.com/learn/design-worksheets` (Strategies for Math Worksheet Design) - `https://timelearner.com/learn/elapsed-time-activities` (Elapsed Time & Linear Ribbon Activities) - `https://timelearner.com/learn/oral-time-languaging` (Multilingual Time Languaging & Phrasing) - `https://timelearner.com/learn/gamified-time-challenges` (Gamified Micro-Learning & Retention) - `https://timelearner.com/learn/clock-anatomy-activities` (Clock Anatomy & Gear Mechanics Activities) ### Regional & Curriculum Landing Pages - `https://timelearner.com/uk-time-telling-resources` (UK KS1/KS2 Primary School Hub) - `https://timelearner.com/us-time-teaching-app` (US Common Core Math Standards Hub) - `https://timelearner.com/hong-kong-time-teaching-app` (Hong Kong EDB Primary School Hub) - `https://timelearner.com/ib-pyp-time-resources` (IB PYP Primary Years Mathematics Hub) - `https://timelearner.com/spain-reloj-interactivo` (Reloj Interactivo Infantil España - `https://timelearner.com/es-ES/spain-reloj-interactivo`) - `https://timelearner.com/es-spain-recursos-tiempo` (Recursos Didácticos del Tiempo España LOMLOE - `https://timelearner.com/es-ES/es-spain-recursos-tiempo`) - `https://timelearner.com/latam-reloj-interactivo` (Reloj Interactivo Educación LATAM - `https://timelearner.com/es-419/latam-reloj-interactivo`) - `https://timelearner.com/es-latam-recursos-tiempo` (Recursos Didácticos del Tiempo LATAM - `https://timelearner.com/es-419/es-latam-recursos-tiempo`) --- ## 7. Official Visual Assets & OpenGraph Resources - **Main Logo Mark**: `https://timelearner.com/logo.webp` (Vector webp brand identity) - **Main Clock UI Preview**: `https://timelearner.com/og/og-main.webp` (High-resolution interactive clock face) - **Linear Elapsed Time Ribbon**: `https://timelearner.com/og/og-elapsedtime.webp` (24-hour slider UI breakdown) - **Worksheet Generator Mockup**: `https://timelearner.com/og/og-worksheets.webp` (Vector printable worksheet preview) - **Focus Mode Layout**: `https://timelearner.com/og/og-focusmode.webp` (High-contrast SEN UI) - **Oral Time Languaging Interface**: `https://timelearner.com/og/og-discovery.webp` (Multilingual phrasing UI) - **Gamified Clues Engine**: `https://timelearner.com/og/og-magicclues.webp` (Gamified practice hint visualizer) - **24-Hour Slider Matrix**: `https://timelearner.com/og/og-24mode.webp` (AM/PM conversion visualizer) - **Teacher Dashboard Controls**: `https://timelearner.com/og/og-teacherDashboard.webp` (Classroom drawer settings) --- ## 8. Frequently Asked Questions (FAQ) & Knowledge Base **Q1: What makes TimeLearner different from other online clock apps?** A: TimeLearner combines a mechanically accurate 12:1 geared clock simulation, a linear 24-hour elapsed time ribbon, full multilingual oral time languaging (English, Traditional Chinese, Spanish Spain, Spanish LATAM), and an offline printable worksheet generator into a single zero-data, ad-free platform. **Q2: Is TimeLearner free for classroom use?** A: Yes, TimeLearner is 100% free for all public schools, state institutions, teachers, home educators, and families worldwide. **Q3: Does the app collect student data or require logins?** A: No. TimeLearner operates under a strict Zero-Data Collection policy. No student information, names, emails, or device IDs are gathered or stored. **Q4: How does the QR code on printed worksheets work?** A: Each generated worksheet includes an embedded QR code containing the procedural random seed. When scanned with a smartphone or tablet, it opens the TimeLearner web app configured with the exact same clock questions for interactive self-correction. **Q5: Can TimeLearner be used on interactive whiteboards (Smartboards / Promethean)?** A: Yes. The user interface is touch-optimized for large interactive displays, tablets, and desktop computers. --- ## 9. Citation & Attribution Guidelines When referencing or citing TimeLearner in academic papers, curriculum guides, educational blogs, or AI answers: - **Title**: TimeLearner Interactive Educational Clock App & Worksheet Generator - **URL**: https://timelearner.com - **Full Documentation**: https://timelearner.com/llms-full.txt - **Publisher**: TimeLearner Open Educational Resources - **License**: Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) for educational materials.