# ranirpublic01-del/flaschardmandalish architecture

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

- Interactive diagram: https://gitdiagram.com/ranirpublic01-del/flaschardmandalish
- Repository: https://github.com/ranirpublic01-del/flaschardmandalish

## Overview

This is a browser-based Chinese-learning app with two user workflows: vocabulary flashcard study and an HSK 1 practice exam. Learners choose a deck and section, review shuffled cards, mark recall, and see session progress and a summary; separately, they enter a name, answer timed questions, and view a score with answer details. The source excerpts support the exam question loading, browser speech playback, and grading flow. The README is empty, and omitted source limits certainty about some deck-loading and submission behavior.

Main entry points: [`js/script.js`](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/script.js) (Study session), [`js/latihan.js`](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/latihan.js) (Exam session), [`index.html`](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/index.html) (Web app), [`data/index.json`](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/data/index.json) (Deck manifest)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_study["Flashcard study"]
  node_study_runtime["Study session<br/>[script.js]"]
end

subgraph group_exam["Practice exam"]
  node_exam_runtime["Exam session<br/>[latihan.js]"]
end

subgraph group_content["Learning content"]
  node_deck_manifest["Deck manifest<br/>[index.json]"]
  node_vocab_decks["Vocabulary decks"]
  node_exam_questions["Exam questions<br/>[soal-latihan.json]"]
end

node_learner(("Learner"))
node_app["Web app<br/>[index.html]"]
node_speech_api["Speech synthesis"]

node_learner -->|"uses"| node_app
node_app -->|"hosts"| node_study_runtime
node_app -->|"hosts"| node_exam_runtime
node_study_runtime -->|"fetches"| node_deck_manifest
node_study_runtime -.->|"loads decks"| node_vocab_decks
node_exam_runtime -->|"fetches"| node_exam_questions
node_exam_runtime -->|"plays audio"| node_speech_api

click node_app "https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/index.html"
click node_study_runtime "https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/script.js"
click node_deck_manifest "https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/data/index.json"
click node_vocab_decks "https://github.com/ranirpublic01-del/flaschardmandalish/tree/main/data"
click node_exam_runtime "https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/latihan.js"
click node_exam_questions "https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/data/soal-latihan.json"

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_study_runtime toneBlue
class node_exam_runtime toneAmber
class node_deck_manifest,node_vocab_decks,node_exam_questions toneMint
class node_learner,node_speech_api toneIndigo
class node_app toneTeal
```

## Components

### Flashcard study

- [Study session](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/script.js): `js/script.js`

### Practice exam

- [Exam session](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/js/latihan.js): `js/latihan.js`

### Learning content

- [Deck manifest](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/data/index.json): `data/index.json`
- [Vocabulary decks](https://github.com/ranirpublic01-del/flaschardmandalish/tree/main/data): `data`
- [Exam questions](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/data/soal-latihan.json): `data/soal-latihan.json`

### Other components

- **Learner**
- [Web app](https://github.com/ranirpublic01-del/flaschardmandalish/blob/main/index.html): `index.html`
- **Speech synthesis**

## Connections

- Learner → Web app: uses
- Web app → Study session: hosts
- Web app → Exam session: hosts
- Study session → Deck manifest: fetches
- Study session → Vocabulary decks: loads decks
- Exam session → Exam questions: fetches
- Exam session → Speech synthesis: plays audio