# sz-tim/h2sms_practicals architecture

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

- Interactive diagram: https://gitdiagram.com/sz-tim/h2sms_practicals
- Repository: https://github.com/sz-tim/h2sms_practicals

## Overview

This repository provides H2 Statistics for Marine Science practicals as an online Quarto book, with manual, answer-key, and full-key profiles; solutions are released session by session. The available tree shows generated browser assets rather than the practical source or profile configuration. The graph therefore captures the documented learning product and the sampled browser capabilities, but omits uncertain wiring between book content and those assets.

Main entry points: [`_man/site_libs/plotly-binding-4.12.1/plotly.js`](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/plotly-binding-4.12.1/plotly.js) (Interactive plots), [`_man`](https://github.com/sz-tim/h2sms_practicals/tree/main/_man) (Manual profile), [`_key`](https://github.com/sz-tim/h2sms_practicals/tree/main/_key) (Key profile), [`_keyfull`](https://github.com/sz-tim/h2sms_practicals/tree/main/_keyfull) (Full-key profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning materials"]
  node_practicals["H2 practicals"]
  node_manual["Manual profile"]
  node_key["Key profile"]
  node_keyfull["Full-key profile"]
end

subgraph group_browser["Book interface"]
  node_quarto["Quarto interface<br/>[quarto.js]"]
  node_navigation["Page navigation<br/>[quarto-nav.js]"]
  node_tabsets["Tabsets<br/>[tabsets.js]"]
  node_search["Book search<br/>[quarto-search.js]"]
  node_plotly["Interactive plots<br/>[plotly.js]"]
  node_crosstalk["Linked selections<br/>[crosstalk.js]"]
end

node_learner(("Student"))

node_learner -->|"uses"| node_practicals
node_practicals -->|"offers profile"| node_manual
node_practicals -->|"offers profile"| node_key
node_practicals -->|"offers profile"| node_keyfull
node_learner -->|"searches"| node_search
node_learner -->|"navigates"| node_navigation
node_learner -->|"selects tabs"| node_tabsets
node_learner -->|"interacts"| node_plotly
node_plotly -.->|"shares selections"| node_crosstalk

click node_manual "https://github.com/sz-tim/h2sms_practicals/tree/main/_man"
click node_key "https://github.com/sz-tim/h2sms_practicals/tree/main/_key"
click node_keyfull "https://github.com/sz-tim/h2sms_practicals/tree/main/_keyfull"
click node_quarto "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-html/quarto.js"
click node_navigation "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-nav/quarto-nav.js"
click node_tabsets "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-html/tabsets/tabsets.js"
click node_search "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-search/quarto-search.js"
click node_plotly "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/plotly-binding-4.12.1/plotly.js"
click node_crosstalk "https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/crosstalk-1.2.2/js/crosstalk.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_practicals,node_manual,node_key,node_keyfull toneBlue
class node_quarto,node_navigation,node_tabsets,node_search,node_plotly,node_crosstalk toneAmber
class node_learner toneIndigo
```

## Components

### Learning materials

- **H2 practicals**
- [Manual profile](https://github.com/sz-tim/h2sms_practicals/tree/main/_man): `_man`
- [Key profile](https://github.com/sz-tim/h2sms_practicals/tree/main/_key): `_key`
- [Full-key profile](https://github.com/sz-tim/h2sms_practicals/tree/main/_keyfull): `_keyfull`

### Book interface

- [Quarto interface](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-html/quarto.js): `_man/site_libs/quarto-html/quarto.js`
- [Page navigation](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-nav/quarto-nav.js): `_man/site_libs/quarto-nav/quarto-nav.js`
- [Tabsets](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-html/tabsets/tabsets.js): `_man/site_libs/quarto-html/tabsets/tabsets.js`
- [Book search](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/quarto-search/quarto-search.js): `_man/site_libs/quarto-search/quarto-search.js`
- [Interactive plots](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/plotly-binding-4.12.1/plotly.js): `_man/site_libs/plotly-binding-4.12.1/plotly.js`
- [Linked selections](https://github.com/sz-tim/h2sms_practicals/blob/main/_man/site_libs/crosstalk-1.2.2/js/crosstalk.js): `_man/site_libs/crosstalk-1.2.2/js/crosstalk.js`

### Other components

- **Student**

## Connections

- Student → H2 practicals: uses
- H2 practicals → Manual profile: offers profile
- H2 practicals → Key profile: offers profile
- H2 practicals → Full-key profile: offers profile
- Student → Book search: searches
- Student → Page navigation: navigates
- Student → Tabsets: selects tabs
- Student → Interactive plots: interacts
- Interactive plots → Linked selections: shares selections