# yrwanda/tryout-upkp architecture

> Architecture diagram of the GitHub repository yrwanda/tryout-upkp, 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/yrwanda/tryout-upkp
- Repository: https://github.com/yrwanda/tryout-upkp

## Overview

Tryout UPKP is a browser-based study and exam-preparation app for the Indonesian UPKP promotion examination. Learners study topic material, answer practice questions with immediate feedback, track readiness and progress, and take timed 100-question UPKP or 50-question official-form simulations. A separate Selingan area offers seven learning games. The README documents local progress storage, export/import, and offline use. The map reflects those documented capabilities and sampled source; detailed wiring for unsampled app sections is not asserted.

Main entry points: [`js/app.js`](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js) (App Logic), [`js/bank`](https://github.com/yrwanda/tryout-upkp/tree/main/js/bank) (Question Banks), [`index.html`](https://github.com/yrwanda/tryout-upkp/blob/main/index.html) (Web App Interface), [`sw.js`](https://github.com/yrwanda/tryout-upkp/blob/main/sw.js) (Offline Cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Study Content"]
  node_material["Topic Material<br/>[materi.js]"]
  node_question_bank["Question Banks"]
  node_twk["TWK Topics<br/>[bkn_twk.js]"]
  node_tkt["TKT Topics<br/>[bkn_tkt.js]"]
  node_tsi_tkp["TSI and TKP<br/>[bkn_tsi_tkp.js]"]
  node_extra_bank["BKN Supplements<br/>[bkn_ekstra.js]"]
  node_official_bank["Official Form Set<br/>[bkn_form.js]"]
end

subgraph group_practice["Practice and Exams"]
  node_practice["Question Practice<br/>[app.js]"]
  node_daily["Daily Study Session<br/>[app.js]"]
  node_progress["Readiness and History<br/>[app.js]"]
  node_exam["Timed Simulations<br/>[app.js]"]
end

subgraph group_games["Learning Games"]
  node_games_menu["Selingan Games<br/>[app.js]"]
  node_matching["Jodohkan and True/False<br/>[jodoh.js]"]
  node_grouping["Kelompokkan<br/>[kelompok.js]"]
  node_ordering["Urutkan<br/>[urut.js]"]
  node_clues["Tebak from Clues<br/>[tebak.js]"]
  node_detective["Detektif Kisi-kisi<br/>[detektif.js]"]
end

subgraph group_runtime["App Runtime"]
  node_interface["Web App Interface<br/>[index.html]"]
  node_app["App Logic<br/>[app.js]"]
  node_local_storage[("Browser Progress Store")]
  node_service_worker["Offline Cache<br/>[sw.js]"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_interface
node_interface -->|"dispatches actions"| node_app
node_app -->|"renders study material"| node_material
node_app -->|"loads questions"| node_question_bank
node_question_bank -->|"includes"| node_twk
node_question_bank -->|"includes"| node_tkt
node_question_bank -->|"includes"| node_tsi_tkp
node_question_bank -->|"includes"| node_extra_bank
node_question_bank -->|"includes"| node_official_bank
node_app -->|"runs practice"| node_practice
node_practice -->|"selects questions"| node_question_bank
node_app -->|"runs daily session"| node_daily
node_daily -->|"selects questions"| node_question_bank
node_app -->|"updates progress"| node_progress
node_progress -->|"reads and writes"| node_local_storage
node_app -->|"starts simulation"| node_exam
node_exam -->|"selects questions"| node_question_bank
node_exam -->|"records results"| node_local_storage
node_app -->|"opens games"| node_games_menu
node_games_menu -->|"uses game data"| node_matching
node_games_menu -->|"uses game data"| node_grouping
node_games_menu -->|"uses game data"| node_ordering
node_games_menu -->|"uses game data"| node_clues
node_games_menu -->|"uses game data"| node_detective
node_games_menu -->|"records game results"| node_local_storage
node_app -->|"registers offline support"| node_service_worker
node_service_worker -->|"caches app assets"| node_interface

click node_interface "https://github.com/yrwanda/tryout-upkp/blob/main/index.html"
click node_app "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_material "https://github.com/yrwanda/tryout-upkp/blob/main/js/materi.js"
click node_question_bank "https://github.com/yrwanda/tryout-upkp/tree/main/js/bank"
click node_twk "https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_twk.js"
click node_tkt "https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_tkt.js"
click node_tsi_tkp "https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_tsi_tkp.js"
click node_extra_bank "https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_ekstra.js"
click node_official_bank "https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_form.js"
click node_practice "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_daily "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_progress "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_exam "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_games_menu "https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js"
click node_matching "https://github.com/yrwanda/tryout-upkp/blob/main/js/jodoh.js"
click node_grouping "https://github.com/yrwanda/tryout-upkp/blob/main/js/kelompok.js"
click node_ordering "https://github.com/yrwanda/tryout-upkp/blob/main/js/urut.js"
click node_clues "https://github.com/yrwanda/tryout-upkp/blob/main/js/tebak.js"
click node_detective "https://github.com/yrwanda/tryout-upkp/blob/main/js/detektif.js"
click node_service_worker "https://github.com/yrwanda/tryout-upkp/blob/main/sw.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_material,node_question_bank,node_twk,node_tkt,node_tsi_tkp,node_extra_bank,node_official_bank toneBlue
class node_practice,node_daily,node_progress,node_exam toneAmber
class node_games_menu,node_matching,node_grouping,node_ordering,node_clues,node_detective toneMint
class node_interface,node_app,node_local_storage,node_service_worker toneRose
class node_learner toneIndigo
```

## Components

### Study Content

- [Topic Material](https://github.com/yrwanda/tryout-upkp/blob/main/js/materi.js): `js/materi.js`
- [Question Banks](https://github.com/yrwanda/tryout-upkp/tree/main/js/bank): `js/bank`
- [TWK Topics](https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_twk.js): `js/bank/bkn_twk.js`
- [TKT Topics](https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_tkt.js): `js/bank/bkn_tkt.js`
- [TSI and TKP](https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_tsi_tkp.js): `js/bank/bkn_tsi_tkp.js`
- [BKN Supplements](https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_ekstra.js): `js/bank/bkn_ekstra.js`
- [Official Form Set](https://github.com/yrwanda/tryout-upkp/blob/main/js/bank/bkn_form.js): `js/bank/bkn_form.js`

### Practice and Exams

- [Question Practice](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`
- [Daily Study Session](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`
- [Readiness and History](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`
- [Timed Simulations](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`

### Learning Games

- [Selingan Games](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`
- [Jodohkan and True/False](https://github.com/yrwanda/tryout-upkp/blob/main/js/jodoh.js): `js/jodoh.js`
- [Kelompokkan](https://github.com/yrwanda/tryout-upkp/blob/main/js/kelompok.js): `js/kelompok.js`
- [Urutkan](https://github.com/yrwanda/tryout-upkp/blob/main/js/urut.js): `js/urut.js`
- [Tebak from Clues](https://github.com/yrwanda/tryout-upkp/blob/main/js/tebak.js): `js/tebak.js`
- [Detektif Kisi-kisi](https://github.com/yrwanda/tryout-upkp/blob/main/js/detektif.js): `js/detektif.js`

### App Runtime

- [Web App Interface](https://github.com/yrwanda/tryout-upkp/blob/main/index.html): `index.html`
- [App Logic](https://github.com/yrwanda/tryout-upkp/blob/main/js/app.js): `js/app.js`
- **Browser Progress Store**
- [Offline Cache](https://github.com/yrwanda/tryout-upkp/blob/main/sw.js): `sw.js`

### Other components

- **Learner**

## Connections

- Learner → Web App Interface: uses
- Web App Interface → App Logic: dispatches actions
- App Logic → Topic Material: renders study material
- App Logic → Question Banks: loads questions
- Question Banks → TWK Topics: includes
- Question Banks → TKT Topics: includes
- Question Banks → TSI and TKP: includes
- Question Banks → BKN Supplements: includes
- Question Banks → Official Form Set: includes
- App Logic → Question Practice: runs practice
- Question Practice → Question Banks: selects questions
- App Logic → Daily Study Session: runs daily session
- Daily Study Session → Question Banks: selects questions
- App Logic → Readiness and History: updates progress
- Readiness and History → Browser Progress Store: reads and writes
- App Logic → Timed Simulations: starts simulation
- Timed Simulations → Question Banks: selects questions
- Timed Simulations → Browser Progress Store: records results
- App Logic → Selingan Games: opens games
- Selingan Games → Jodohkan and True/False: uses game data
- Selingan Games → Kelompokkan: uses game data
- Selingan Games → Urutkan: uses game data
- Selingan Games → Tebak from Clues: uses game data
- Selingan Games → Detektif Kisi-kisi: uses game data
- Selingan Games → Browser Progress Store: records game results
- App Logic → Offline Cache: registers offline support
- Offline Cache → Web App Interface: caches app assets