Gaokao English Vocabulary Frequency Grading System

Overview

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.

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.

Architecture

File Structure

gaokao_english_vocabulary.html   # Main page (self-contained HTML + CSS + JS)
vocab_data.js                    # External vocabulary data (loaded via <script src>)

The data file is separated from HTML to keep the page loadable even with large datasets. The HTML contains all styling and logic inline.

Data Format (vocab_data.js)

Each entry in the VOCAB array follows one of two formats:

Word format:

{
  w: "abandon",        // word
  s: "vt.",            // part of speech
  d: [{m: "放弃", c: 28}],  // definitions array: [{meaning, exam_count}]
  l: 2,                // level (1-6)
  v: "must",           // mastery: "145" | "must" | "normal" | "know"
  p: "əˈbændən",       // phonetic (optional)
  e: true,             // has wrong-word warning (optional)
  t: "易写成abanden"    // wrong-word tip text (optional)
}

Phrase format (flat):

{
  w: "a great deal of",  // phrase
  s: "phr.",              // part of speech (always "phr.")
  m: "大量的",            // meaning (flat string, not array)
  c: 15,                 // exam frequency count
  i: "normal",           // mastery: "145" | "must" | "normal" | "know"
  e: false               // wrong-word warning (optional)
}

Level System

Words (6 levels by exam count):

| Level | Name | Range | Color |

|-------|------|-------|-------|

| Lv.1 | 超高频 Super High | ≥40 times | Green #3fb950 |

| Lv.2 | 高频 High | 20-39 times | Blue #58a6ff |

| Lv.3 | 次高频 Sub-High | 10-19 times | Yellow #e3b341 |

| Lv.4 | 中频 Medium | 5-9 times | Red #f85149 |

| Lv.5 | 低频 Low | 2-4 times | Purple #a371f7 |

| Lv.6 | 超低频 Very Low | 0-1 times | Gray #484f58 |

Phrases (6 levels by exam count):

| Level | Name | Range | Color |

|-------|------|-------|-------|

| P1 | 超高频 | ≥20 times | Cyan #38bdf8 |

| P2 | 高频 | 12-19 times | Teal #22d3ee |

| P3 | 次高频 | 8-11 times | Blue #38bdf8 |

| P4 | 中频 | 5-7 times | Light Blue #7dd3fc |

| P5 | 低频 | 3-4 times | Soft Blue #93c5fd |

| P6 | 超低频 | 1-2 times | Slate #94a3b8 |

Mastery Levels

| Tag | Label | Color | CSS Class |

|-----|-------|-------|-----------|

| 145 | 🔥 145分必掌握 | Green bg | .m145 |

| must | ✅ 必须掌握 | Yellow bg | .mmust |

| normal | 📖 一般掌握 | Gray bg | .mnormal |

| know | 👀 了解意思 | Dark bg | .mknow |

Key Features

1. Sticky Top Bar

Header, stats, search box, and filter buttons are all in a position:sticky top bar that stays visible during scroll.

2. Filter Buttons with Frequency Annotations

Each filter button shows the level name and a small tag with the exam count range (e.g., "20-39次").

3. Sticky Level Headers

Each level section header (e.g., "🟢 Lv.1 超高频") uses position:sticky so it remains visible while scrolling through cards in that section.

4. Collapsible Sections

Each level section can be expanded/collapsed by clicking its header. Sections start collapsed and expand with a smooth max-height transition.

5. Card Design

Each vocabulary card displays:

• Frequency bar (width proportional to exam count)
• Word + part of speech + phonetic
• Meaning(s) with per-meaning count (for words with multiple meanings)
• Mastery badge + exam count badge
• Wrong-word tip (if applicable)

6. Search

Real-time search across word, meaning, and phonetic fields. Supports both word d[].m and phrase m formats.

7. Multi-Filter

Filter buttons for: All, 6 word levels, All phrases, 6 phrase levels, 145-essential, Wrong-word.

Page Layout Structure

┌─────────────────────────────────────┐
│  📚 高考英语词汇频率分级系统          │  ← Sticky top bar
│  Stats: 总词汇 / 单词 / 词组 / ...   │
│  [🔍 搜索框]                         │
│  [全部] [Lv.1≥40次] [Lv.2 20-39次]… │  ← Filter buttons with annotations
├─────────────────────────────────────┤
│  🟢 Lv.1 超高频（≥40次考查） 161 词 ▼ │  ← Sticky level header
│  ┌──────────┐ ┌──────────┐          │
│  │  card    │ │  card    │          │  ← Card grid
│  └──────────┘ └──────────┘          │
│  🔵 Lv.2 高频（20-39次考查） 415 词 ▼ │
│  ┌──────────┐ ┌──────────┐          │
│  │  card    │ │  card    │          │
│  └──────────┘ └──────────┘          │
│  ... (remaining levels)              │
│  📌 词组 P1 超高频（≥20次考查） 22 词 ▼│
│  ... (phrase levels)                 │
└─────────────────────────────────────┘

Workflow

Generating a New Vocabulary System

1. Gather vocabulary data — Collect word lists with:
• Word, part of speech, meaning, exam frequency count
• Mastery level assignment (145 / must / normal / know)
• Wrong-word warnings with tip text (optional)

1. 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.

1. Create the HTML page — Use the template structure from references/template_structure.md. Key sections: