\r \r

Gaokao English Vocabulary Frequency Grading System\r

\r

Overview\r

\r This skill produces a self-contained interactive HTML webpage (gaokao_english_vocabulary.html) plus an external data file (vocab_data.js) that together form a comprehensive vocabulary study tool for Chinese Gaokao English preparation.\r \r The system classifies 4000+ words and 800+ phrases into 6 frequency levels each (12 levels total), with mastery tags, wrong-word warnings, search, multi-filter, and collapsible sections — all in a responsive dark theme.\r \r

Architecture\r

\r

File Structure\r

\r

gaokao_english_vocabulary.html   # Main page (self-contained HTML + CSS + JS)\r
vocab_data.js                    # External vocabulary data (loaded via \x3Cscript src>)\r
```\r
\r
The data file is separated from HTML to keep the page loadable even with large datasets. The HTML contains all styling and logic inline.\r
\r
### Data Format (`vocab_data.js`)\r
\r
Each entry in the `VOCAB` array follows one of two formats:\r
\r
**Word format:**\r
```javascript\r
{\r
  w: "abandon",        // word\r
  s: "vt.",            // part of speech\r
  d: [{m: "放弃", c: 28}],  // definitions array: [{meaning, exam_count}]\r
  l: 2,                // level (1-6)\r
  v: "must",           // mastery: "145" | "must" | "normal" | "know"\r
  p: "əˈbændən",       // phonetic (optional)\r
  e: true,             // has wrong-word warning (optional)\r
  t: "易写成abanden"    // wrong-word tip text (optional)\r
}\r
```\r
\r
**Phrase format (flat):**\r
```javascript\r
{\r
  w: "a great deal of",  // phrase\r
  s: "phr.",              // part of speech (always "phr.")\r
  m: "大量的",            // meaning (flat string, not array)\r
  c: 15,                 // exam frequency count\r
  i: "normal",           // mastery: "145" | "must" | "normal" | "know"\r
  e: false               // wrong-word warning (optional)\r
}\r
```\r
\r
### Level System\r
\r
**Words (6 levels by exam count):**\r
\r
| Level | Name | Range | Color |\r
|-------|------|-------|-------|\r
| Lv.1 | 超高频 Super High | ≥40 times | Green #3fb950 |\r
| Lv.2 | 高频 High | 20-39 times | Blue #58a6ff |\r
| Lv.3 | 次高频 Sub-High | 10-19 times | Yellow #e3b341 |\r
| Lv.4 | 中频 Medium | 5-9 times | Red #f85149 |\r
| Lv.5 | 低频 Low | 2-4 times | Purple #a371f7 |\r
| Lv.6 | 超低频 Very Low | 0-1 times | Gray #484f58 |\r
\r
**Phrases (6 levels by exam count):**\r
\r
| Level | Name | Range | Color |\r
|-------|------|-------|-------|\r
| P1 | 超高频 | ≥20 times | Cyan #38bdf8 |\r
| P2 | 高频 | 12-19 times | Teal #22d3ee |\r
| P3 | 次高频 | 8-11 times | Blue #38bdf8 |\r
| P4 | 中频 | 5-7 times | Light Blue #7dd3fc |\r
| P5 | 低频 | 3-4 times | Soft Blue #93c5fd |\r
| P6 | 超低频 | 1-2 times | Slate #94a3b8 |\r
\r
### Mastery Levels\r
\r
| Tag | Label | Color | CSS Class |\r
|-----|-------|-------|-----------|\r
| 145 | 🔥 145分必掌握 | Green bg | `.m145` |\r
| must | ✅ 必须掌握 | Yellow bg | `.mmust` |\r
| normal | 📖 一般掌握 | Gray bg | `.mnormal` |\r
| know | 👀 了解意思 | Dark bg | `.mknow` |\r
\r
## Key Features\r
\r
### 1. Sticky Top Bar\r
Header, stats, search box, and filter buttons are all in a `position:sticky` top bar that stays visible during scroll.\r
\r
### 2. Filter Buttons with Frequency Annotations\r
Each filter button shows the level name and a small `\x3Csmall>` tag with the exam count range (e.g., "20-39次").\r
\r
### 3. Sticky Level Headers\r
Each level section header (e.g., "🟢 Lv.1 超高频") uses `position:sticky` so it remains visible while scrolling through cards in that section.\r
\r
### 4. Collapsible Sections\r
Each level section can be expanded/collapsed by clicking its header. Sections start collapsed and expand with a smooth `max-height` transition.\r
\r
### 5. Card Design\r
Each vocabulary card displays:\r
- Frequency bar (width proportional to exam count)\r
- Word + part of speech + phonetic\r
- Meaning(s) with per-meaning count (for words with multiple meanings)\r
- Mastery badge + exam count badge\r
- Wrong-word tip (if applicable)\r
\r
### 6. Search\r
Real-time search across word, meaning, and phonetic fields. Supports both word `d[].m` and phrase `m` formats.\r
\r
### 7. Multi-Filter\r
Filter buttons for: All, 6 word levels, All phrases, 6 phrase levels, 145-essential, Wrong-word.\r
\r
## Page Layout Structure\r
\r
```\r
┌─────────────────────────────────────┐\r
│  📚 高考英语词汇频率分级系统          │  ← Sticky top bar\r
│  Stats: 总词汇 / 单词 / 词组 / ...   │\r
│  [🔍 搜索框]                         │\r
│  [全部] [Lv.1≥40次] [Lv.2 20-39次]… │  ← Filter buttons with annotations\r
├─────────────────────────────────────┤\r
│  🟢 Lv.1 超高频（≥40次考查） 161 词 ▼ │  ← Sticky level header\r
│  ┌──────────┐ ┌──────────┐          │\r
│  │  card    │ │  card    │          │  ← Card grid\r
│  └──────────┘ └──────────┘          │\r
│  🔵 Lv.2 高频（20-39次考查） 415 词 ▼ │\r
│  ┌──────────┐ ┌──────────┐          │\r
│  │  card    │ │  card    │          │\r
│  └──────────┘ └──────────┘          │\r
│  ... (remaining levels)              │\r
│  📌 词组 P1 超高频（≥20次考查） 22 词 ▼│\r
│  ... (phrase levels)                 │\r
└─────────────────────────────────────┘\r
```\r
\r
## Workflow\r
\r
### Generating a New Vocabulary System\r
\r
1. **Gather vocabulary data** — Collect word lists with:\r
   - Word, part of speech, meaning, exam frequency count\r
   - Mastery level assignment (145 / must / normal / know)\r
   - Wrong-word warnings with tip text (optional)\r
\r
2. **Generate `vocab_data.js`** — Format data as `var VOCAB = [...];` following the data format above. Words use `d:[{m,c}]` array; phrases use flat `m` and `c` fields.\r
\r
3. **Create the HTML page** — Use the template structure from `references/template_structure.md`. Key sections:\r
   - `\x3Cstyle>` block with all CSS (dark theme, card styles, level colors, responsive breakpoints)\r
   - Top bar with header, stats, search, filter buttons\r
   - Main content area `\x3Cdiv id="mainContent">`\r
   - `\x3Cscript>` block with: `getLevel()`, `getMaxCount()`, `renderCard()`, `render()`, `filterWord()`, `toggleSection()`, `setFilter()`, `doSearch()`, `updateStats()`\r
\r
4. **Ensure all 12 levels are non-empty** — If any level has zero entries, either add more vocabulary or adjust the count thresholds.\r
\r
5. **Validate data integrity** — Run Python checks:\r
   - Every entry has `w` and `s` fields\r
   - Every entry has either `d[]` (words) or `m` (phrases) for meaning\r
   - Every entry has `v` (words) or `i` (phrases) for mastery\r
   - No NaN or null values\r
\r
6. **Test in browser** — Start HTTP server (`python -m http.server 8080`) and verify:\r
   - Stats display correct totals\r
   - All filters work\r
   - Search works across word/meaning/phonetic\r
   - Collapsible sections expand/collapse\r
   - Sticky headers and top bar work during scroll\r
\r
## CSS Design Principles\r
\r
- **Dark theme**: Background `#0d1117`, cards `#161b22`, borders `#30363d`\r
- **Top bar gradient**: `linear-gradient(135deg, #1a1f2e, #0d1117)`\r
- **Card hover**: Border color changes to `#58a6ff`, slight translateY lift + box-shadow\r
- **Responsive grid**: `grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))`\r
- **Mobile**: Single column at `max-width: 600px`\r
- **Level header sticky**: `position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.3)`\r
- **Sticky top bar**: `position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px)`\r
\r
## Customization Points\r
\r
- **Exam year range**: Update the subtitle text (default: "1977—2025年")\r
- **Level thresholds**: Adjust in `getLevel()` function\r
- **Level colors**: Update CSS `.level-X .level-header` and `.level-X .word-bar` rules\r
- **Mastery labels**: Update `getMasteryLabel()` function\r
- **Signature/署名**: Add below subtitle in header section\r
- **Additional filters**: Add new cases in `setFilter()` and `filterWord()` switch statements\r
\r
## Resources\r
\r
### references/template_structure.md\r
Complete HTML template structure with all CSS styles and JavaScript functions. Use as the starting point when generating a new page — copy and customize the thresholds, colors, and data.\r
\r
### scripts/generate_vocab.py\r
Python script that generates `vocab_data.js` from a structured vocabulary source. Demonstrates the data generation workflow including word/phrase classification, mastery assignment, and JS output formatting.\r