# congminh204/study_web_4exam architecture

> Architecture diagram of the GitHub repository congminh204/study_web_4exam, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/congminh204/study_web_4exam
- Repository: https://github.com/congminh204/study_web_4exam

## Overview

This is a browser-based, Quizlet-style study app for organizing subjects and study sets, then practicing their cards. The visible user journey goes from browsing subjects to creating a set and using flashcards, learn, test, or match modes. The tree also shows shared storage/study/UI modules and bundled course data. Runtime source and README content were not provided, so internal calls and data flow cannot be verified; the edges below reflect only navigation exercised in the smoke-test excerpt.

Main entry points: [`index.html`](https://github.com/congminh204/study_web_4exam/blob/main/index.html) (Subject Browser), [`subject.html`](https://github.com/congminh204/study_web_4exam/blob/main/subject.html) (Subject Page), [`edit.html`](https://github.com/congminh204/study_web_4exam/blob/main/edit.html) (Set Editor), [`set.html`](https://github.com/congminh204/study_web_4exam/blob/main/set.html) (Study Set)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_organize["Subject and Set Management"]
  node_home["Subject Browser<br/>[index.html]"]
  node_subject["Subject Page<br/>[subject.html]"]
  node_editor["Set Editor<br/>[edit.html]"]
  node_set["Study Set<br/>[set.html]"]
end

subgraph group_practice["Study Modes"]
  node_flashcards["Flashcards<br/>[flashcards.html]"]
  node_learn["Learn Mode<br/>[learn.html]"]
  node_test["Test Mode<br/>[test.html]"]
  node_match["Match Mode<br/>[match.html]"]
end

subgraph group_runtime["Shared Runtime and Content"]
  node_store[("Browser Store<br/>[store.js]")]
  node_study["Study Logic<br/>[study.js]"]
  node_ui["Shared UI<br/>[ui.js]"]
  node_coursepacks["Course Data Packs"]
  node_icons["Icons<br/>[icons.js]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_home
node_home -->|"opens subject"| node_subject
node_subject -->|"creates set"| node_editor
node_editor -->|"saves set"| node_set
node_learner -->|"practices"| node_flashcards
node_learner -->|"practices"| node_learn
node_learner -->|"takes test"| node_test
node_learner -->|"plays"| node_match

click node_home "https://github.com/congminh204/study_web_4exam/blob/main/index.html"
click node_subject "https://github.com/congminh204/study_web_4exam/blob/main/subject.html"
click node_editor "https://github.com/congminh204/study_web_4exam/blob/main/edit.html"
click node_set "https://github.com/congminh204/study_web_4exam/blob/main/set.html"
click node_flashcards "https://github.com/congminh204/study_web_4exam/blob/main/flashcards.html"
click node_learn "https://github.com/congminh204/study_web_4exam/blob/main/learn.html"
click node_test "https://github.com/congminh204/study_web_4exam/blob/main/test.html"
click node_match "https://github.com/congminh204/study_web_4exam/blob/main/match.html"
click node_store "https://github.com/congminh204/study_web_4exam/blob/main/assets/js/store.js"
click node_study "https://github.com/congminh204/study_web_4exam/blob/main/assets/js/study.js"
click node_ui "https://github.com/congminh204/study_web_4exam/blob/main/assets/js/ui.js"
click node_coursepacks "https://github.com/congminh204/study_web_4exam/tree/main/assets/data"
click node_icons "https://github.com/congminh204/study_web_4exam/blob/main/assets/js/icons.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_subject,node_editor,node_set toneBlue
class node_flashcards,node_learn,node_test,node_match toneAmber
class node_store,node_study,node_ui,node_coursepacks,node_icons toneMint
class node_learner toneIndigo
```

## Components

### Subject and Set Management

- [Subject Browser](https://github.com/congminh204/study_web_4exam/blob/main/index.html): `index.html`
- [Subject Page](https://github.com/congminh204/study_web_4exam/blob/main/subject.html): `subject.html`
- [Set Editor](https://github.com/congminh204/study_web_4exam/blob/main/edit.html): `edit.html`
- [Study Set](https://github.com/congminh204/study_web_4exam/blob/main/set.html): `set.html`

### Study Modes

- [Flashcards](https://github.com/congminh204/study_web_4exam/blob/main/flashcards.html): `flashcards.html`
- [Learn Mode](https://github.com/congminh204/study_web_4exam/blob/main/learn.html): `learn.html`
- [Test Mode](https://github.com/congminh204/study_web_4exam/blob/main/test.html): `test.html`
- [Match Mode](https://github.com/congminh204/study_web_4exam/blob/main/match.html): `match.html`

### Shared Runtime and Content

- [Browser Store](https://github.com/congminh204/study_web_4exam/blob/main/assets/js/store.js): `assets/js/store.js`
- [Study Logic](https://github.com/congminh204/study_web_4exam/blob/main/assets/js/study.js): `assets/js/study.js`
- [Shared UI](https://github.com/congminh204/study_web_4exam/blob/main/assets/js/ui.js): `assets/js/ui.js`
- [Course Data Packs](https://github.com/congminh204/study_web_4exam/tree/main/assets/data): `assets/data`
- [Icons](https://github.com/congminh204/study_web_4exam/blob/main/assets/js/icons.js): `assets/js/icons.js`

### Other components

- **Learner**

## Connections

- Learner → Subject Browser: opens
- Subject Browser → Subject Page: opens subject
- Subject Page → Set Editor: creates set
- Set Editor → Study Set: saves set
- Learner → Flashcards: practices
- Learner → Learn Mode: practices
- Learner → Test Mode: takes test
- Learner → Match Mode: plays