# bappherhjr/dev architecture

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

- Interactive diagram: https://gitdiagram.com/bappherhjr/dev
- Repository: https://github.com/bappherhjr/dev

## Overview

This repository contains a browser-based quiz: the user answers shuffled questions, receives feedback, and sees a score when the quiz ends or time runs out. The sampled `app.js` loads its question bank from `jamb.json` and updates page elements directly. It also writes a dark-mode preference to browser storage. The README is empty, and the other HTML files were not sampled, so their contents and any additional capabilities are uncertain.

Main entry points: [`app.js`](https://github.com/bappherhjr/dev/blob/main/app.js) (Quiz controller), [`DevQuiz.html`](https://github.com/bappherhjr/dev/blob/main/DevQuiz.html) (Quiz page), [`jamb.json`](https://github.com/bappherhjr/dev/blob/main/jamb.json) (Question bank)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_quiz["Quiz runtime"]
  node_page["Quiz page<br/>[DevQuiz.html]"]
  node_runtime["Quiz controller<br/>[app.js]"]
end

subgraph group_browser["Browser resources"]
  node_bank["Question bank<br/>[jamb.json]"]
  node_dom["Page elements"]
  node_storage[("Local storage")]
end

node_user(("Quiz taker"))

node_user -->|"uses"| node_page
node_runtime -->|"fetches questions"| node_bank
node_runtime -->|"updates"| node_dom
node_dom -->|"answer clicks"| node_runtime
node_runtime -->|"stores preference"| node_storage

click node_page "https://github.com/bappherhjr/dev/blob/main/DevQuiz.html"
click node_runtime "https://github.com/bappherhjr/dev/blob/main/app.js"
click node_bank "https://github.com/bappherhjr/dev/blob/main/jamb.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_page,node_runtime toneBlue
class node_bank,node_dom,node_storage toneAmber
class node_user toneIndigo
```

## Components

### Quiz runtime

- [Quiz page](https://github.com/bappherhjr/dev/blob/main/DevQuiz.html): `DevQuiz.html`
- [Quiz controller](https://github.com/bappherhjr/dev/blob/main/app.js): `app.js`

### Browser resources

- [Question bank](https://github.com/bappherhjr/dev/blob/main/jamb.json): `jamb.json`
- **Page elements**
- **Local storage**

### Other components

- **Quiz taker**

## Connections

- Quiz taker → Quiz page: uses
- Quiz controller → Question bank: fetches questions
- Quiz controller → Page elements: updates
- Page elements → Quiz controller: answer clicks
- Quiz controller → Local storage: stores preference