# nnatebach/bachs_dev_pet architecture

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

## Overview

This repository contains two small, standalone browser quiz exercises. The main workflow is the Doggos game: request a random dog image, derive its breed, build shuffled choices, then display the image and mark a selected answer. The other quiz presents a fixed true/false fact, reveals its explanation, disables further choices, and marks the guess. Only the two scripts were sampled; the page structure and any additional capabilities are inferred only from their referenced element IDs and the file tree.

Main entry points: [`JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js`](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js) (Doggos game), [`JavaScript/01_JavaScript_Quiz_project/script.js`](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/script.js) (Fact quiz), [`JavaScript/02_JavaScript_Doggos_Quiz_Game/index.html`](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/index.html) (Quiz page), [`JavaScript/01_JavaScript_Quiz_project/index.html`](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/index.html) (Quiz page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_doggos["Doggos quiz"]
  node_doggame["Doggos game<br/>[script.js]"]
  node_breeddata["Breed choices<br/>[script.js]"]
  node_dogpage["Quiz page<br/>[index.html]"]
  node_dogstyle["Quiz styling<br/>[styles.css]"]
end

subgraph group_factquiz["Fact quiz"]
  node_factapp["Fact quiz<br/>[script.js]"]
  node_factdata["Fact content<br/>[script.js]"]
  node_factpage["Quiz page<br/>[index.html]"]
  node_factstyle["Quiz styling<br/>[styles.css]"]
end

node_player(("Player"))
node_dogapi{{"Dog image API"}}

node_player -->|"plays"| node_doggame
node_doggame -->|"fetches image"| node_dogapi
node_dogapi -->|"returns URL"| node_doggame
node_doggame -->|"selects choices"| node_breeddata
node_doggame -->|"renders quiz"| node_dogpage
node_dogpage -->|"dispatches clicks"| node_doggame
node_dogstyle -->|"styles"| node_dogpage
node_player -->|"answers"| node_factapp
node_factapp -->|"reads fact"| node_factdata
node_factapp -->|"updates"| node_factpage
node_factpage -->|"dispatches clicks"| node_factapp
node_factstyle -->|"styles"| node_factpage

click node_doggame "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js"
click node_breeddata "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js"
click node_dogpage "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/index.html"
click node_dogstyle "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/styles.css"
click node_factapp "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/script.js"
click node_factdata "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/script.js"
click node_factpage "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/index.html"
click node_factstyle "https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/styles.css"

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_doggame,node_breeddata,node_dogpage,node_dogstyle toneBlue
class node_factapp,node_factdata,node_factpage,node_factstyle toneAmber
class node_player toneIndigo
class node_dogapi toneMint
```

## Components

### Doggos quiz

- [Doggos game](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js): `JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js`
- [Breed choices](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js): `JavaScript/02_JavaScript_Doggos_Quiz_Game/script.js`
- [Quiz page](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/index.html): `JavaScript/02_JavaScript_Doggos_Quiz_Game/index.html`
- [Quiz styling](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/02_JavaScript_Doggos_Quiz_Game/styles.css): `JavaScript/02_JavaScript_Doggos_Quiz_Game/styles.css`

### Fact quiz

- [Fact quiz](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/script.js): `JavaScript/01_JavaScript_Quiz_project/script.js`
- [Fact content](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/script.js): `JavaScript/01_JavaScript_Quiz_project/script.js`
- [Quiz page](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/index.html): `JavaScript/01_JavaScript_Quiz_project/index.html`
- [Quiz styling](https://github.com/nnatebach/bachs_dev_pet/blob/main/JavaScript/01_JavaScript_Quiz_project/styles.css): `JavaScript/01_JavaScript_Quiz_project/styles.css`

### Other components

- **Player**
- **Dog image API**

## Connections

- Player → Doggos game: plays
- Doggos game → Dog image API: fetches image
- Dog image API → Doggos game: returns URL
- Doggos game → Breed choices: selects choices
- Doggos game → Quiz page: renders quiz
- Quiz page → Doggos game: dispatches clicks
- Quiz styling → Quiz page: styles
- Player → Fact quiz: answers
- Fact quiz → Fact content: reads fact
- Fact quiz → Quiz page: updates
- Quiz page → Fact quiz: dispatches clicks
- Quiz styling → Quiz page: styles