Japanese JLPT Learner is a full-featured, interactive web application designed to help learners master the JLPT N5 to N1 levels through quizzes, downloadable study materials, progress tracking, and real-time feedback.
🎯 Built with vanilla HTML, CSS, and JavaScript — no frameworks, no backend required.
🚀 Perfect for self-learners, teachers, and developers.
Sanskar Hatwar
📧 Email: [email protected]
💼 GitHub: https://github.com/hatwarsanskar95-web
"Empowering language learners with technology."
- Downloadable PDFs for each level:
- Grammar
- Vocabulary
- Kanji
- Level-specific content (no repetition)
- Real, free JLPT study guides from trusted sources
- Level Quizzes (N5–N1):
- Select level → Click "Start Quiz"
- Questions shuffled randomly
- Timer starts on quiz start
- Green border highlights selected answer
- Daily Challenge Quiz:
- 100 mixed questions from N5 to N1
- Progress bar shows completion
- Results Page:
- Score display (e.g.,
78 / 80) - Time taken shown
- Feedback: "🎉 Master Level!" or "📚 Keep practicing!"
- Review with correct/incorrect answers and explanations
- Score display (e.g.,
- Dashboard
- Click Study → Download PDFs
- Click Quiz → Select level → Start Quiz
- Answer → Submit → See results
- Streak counter
- Level progress bars
- Encouraging feedback based on score
japanese-jlpt-learner/ │ ├── index.html # Main dashboard with study & quiz ├── study-materials.html # Dynamic PDF download by level ├── quiz.html # Level quiz with timer & shuffle ├── daily-quiz.html # 100 mixed questions (N5-N1) ├── result.html # Quiz results with time & review ├── result-daily.html # Daily quiz results │ ├── css/ │ └── style.css # Styling for all pages │ ├── js/ │ ├── app.js # Session, navigation, streaks │ └── quiz-data.js # 200+ quiz questions (N5-N1) │ ├── pdfs/ # 15 real JLPT PDFs │ ├── N5-Grammar.pdf │ ├── ... │ └── N1-Kanji.pdf │ └── README.md # This file
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, JavaScript (Vanilla) |
| Styling | Custom CSS + Google Fonts (Noto Sans JP) |
| Data | localStorage (no backend) |
| Quiz Engine | Dynamic rendering, Fisher-Yates shuffle, timer |
| Responsive | Works on mobile & desktop |
| Fonts | Noto Sans JP |
- Web browser (Chrome, Firefox, Edge, Safari)
- Text editor (VS Code, Sublime, etc.)
- Terminal (Command Prompt, PowerShell, or VS Code Terminal)
http-server(for local testing)
npm install -g http-server