Learn to Read the Clock (Lær å lese klokka)

Educational Progressive Web App (PWA) to teach children how to read an analog clock. Features Norwegian language interface with interactive practice and quiz modes.

✨ Features

• 🕐 Interactive Analog Clock - Drag the clock hands to set time (desktop & touch devices)
• 📝 Norwegian Time Descriptions - Live text shows time in Norwegian (e.g., "tyve minutter over tre")
• 🎯 Quiz Mode - Test knowledge with randomized questions using 24-hour format
• 📊 Score Tracking - Earn points for correct answers
• 🎨 Child-Friendly Design - Colorful and easy to use
• 📱 Works Offline - Install as PWA and use without internet
• 🌐 Cross-Platform - Works on desktop, tablet, and mobile devices

🚀 Quick Start

1. Install dependencies:

npm install

2. Run the development server:

npm start

The app will automatically open at http://localhost:3000

📖 How to Use

Practice Mode (Øv)

• Drag the hour hand (short) and minute hand (long) to practice setting different times
• Works with both mouse and touch gestures
• The digital time and Norwegian description update in real-time
• Examples: "Klokka er tolv", "Kvart over fire", "Halv tre", "tyve minutter over åtte"

Quiz Mode (Quiz)

• The clock shows a random time with AM/PM indicator
• Select the correct hour (24-hour format: 0-23) and minute from the dropdowns
• Times appear in 5-minute intervals (00, 05, 10, 15, etc.)
• Click "Sjekk Svar" to check if you're right
• Earn 10 points for each correct answer!

📱 Installing as PWA

When you open the app in a modern browser (Chrome, Edge, Safari), you'll see an install prompt. Click it to:

• Add the app to your home screen (mobile)
• Install as a desktop app (desktop)
• Use offline without internet connection

Note: For full PWA functionality, create icons following ICON-INSTRUCTIONS.md

🌐 Deployment

GitHub Pages (Recommended)

1. Push your code to GitHub
2. Go to repository Settings > Pages
3. Select branch: main, folder: / (root)
4. Wait 1-2 minutes for deployment
5. Access at https://yourusername.github.io/your-repo-name/

Netlify

1. Drag and drop the project folder to Netlify Drop
2. Or connect your GitHub repository for automatic deployments

Vercel

npx vercel

Any Web Host

Upload all files to any static web hosting with HTTPS support (required for service workers).

🛠️ Tech Stack

• Vanilla HTML/CSS/JavaScript (no frameworks)
• Progressive Web App (PWA) with service worker
• Norwegian language UI
• Responsive design for all devices
• Touch-optimized for tablets and mobile

🌍 Browser Support

• ✅ Chrome/Edge (desktop & mobile)
• ✅ Firefox (desktop & mobile)
• ✅ Safari (desktop & iOS)
• ✅ Any modern browser with PWA support

🎨 Creating Icons

For full PWA functionality, create two icon files. See ICON-INSTRUCTIONS.md for detailed guide:

• icon-192.png - 192x192 pixels
• icon-512.png - 512x512 pixels

The app works without icons but needs them for installation prompts.

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs or issues
• Suggest new features
• Submit pull requests
• Improve documentation
• Translate to other languages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with vanilla JavaScript for maximum compatibility and performance. Norwegian language implementation for educational purposes.