Need advice about organizing data files (yml, json, xml) for simple pages

Hello Hugo users.

I’m building a static site with dozens of quizzes/exams (currently ~50 and growing), and I’m finding an approach to manage them.

There are many quiz types. Here is the demo of 2 of them.

https://demobbe.netlify.app/
https://demobbe1.netlify.app/

Here is my attempt to organize them, still not figure out HTML and JS parts.

├── content
│ ├── exams
│ │ ├── reading
│ │ │ ├── r-exam1.md
│ │ │ ├── r-exam2.md
│ │ │ └── … (r-exam50.md)
│ │ └── listening
│ │ ├── l-exam1.md
│ │ ├── l-exam2.md
│ │ └── … (l-exam50.md)
│ └── posts
│ └── my-first-post.md
└── data
├── reading
│ ├── multiple-choice-one-answer
│ │ ├── r-exam-1.yaml
│ │ ├── r-exam-2.yaml
│ │ └── … (r-exam-50.yaml)
│ └── multiple-choice-many-answer
│ ├── r-exam-1.yaml
│ ├── r-exam-2.yaml
│ └── … (r-exam-50.yaml)
└── listening
├── multiple-choice-one-answer
│ ├── l-exam-1.yaml
│ ├── l-exam-2.yaml
│ └── … (l-exam-50.yaml)
└── multiple-choice-many-answer
├── l-exam-1.yaml
├── l-exam-2.yaml
└── … (l-exam-50.yaml)

What metadata do I need in MD files? Currently I’m thinking of title, category (listening, reading), type (multiple-choice-one-answer, …), tag (environment, transportation, …)
How can I structure HTML and JS layout? Different quiz types have different JS scripts.
Do I have to repeatedly make 50 MD files for 50 exam pages?
Each exam page has a passage (300-900 words) and questions (5-15 questions).
Should I use yml or json for this task?

Thanks :folded_hands::folded_hands:

Currently I’m trying Hugo Content Adapter. The syntax comprehension is a bit difficult but achievable to do this task.