Making a student practice question page with randomized questions more "modular"
Hey folks, I'm a physics teacher and one of the main things I'm developing for my (extremely basic) site is a set of randomizable questions. I'm using buttons to trigger functions in scripts that affect the contents of paragraph elements, all of which are given ids based on the question number (i.e. "question1", "question2", etc.) since every id has to be unique. The functions for randomizing the questions and showing the answers are also similarly named, and so far I've kept everything pertaining to one particular question together in one spot. Here's a link to one of the pages I've made so far so you can see how I've put the code together: Link
The "problem" I have is that if I want to add a new question into the middle of the list somewhere, for example adding a 4th question in between 2 and 3, now my numbered ids are all out of order, which makes the ids harder to keep track of on the page. I understand that there's no inherent problem in having 4 coming before 3 - it's just a name - but the issue is more for keeping track of the question ids I have used when I have a lot of questions on a page (and I guess just wanting them to be in the right order).
I considered having all of the functions in one big script section and in order of their numbers, while the paragraphs and buttons are placed wherever I want them to go. I don't like this because the separation between the html and the scripts makes it harder to see what is what in the file. I've also considered the idea of having the numbers all jumbled up in the code, but with all the related elements kept together in blocks like I have now, and I could track them in the file itself with some kind of comment. I'd just need to update it whenever I added anything new. I don't love that, but that's the best option I've come up with so far.
What I ultimately want is a way to reduce or totally remove my reliance on the naming/numbering that I've created here, but I'm not sure how or even if that would be possible. Ideally, I think it would look like a generic bit of code that's more self-contained so that I could ditch the numbering altogether, but from what I've seen I don't think that's really possible.
If there's any way around this, please let me know! Or if anyone has a better idea for how to implement this kind of thing, I'd love to hear it! It wouldn't surprise me to learn that there's a better way of doing what I'm trying to do. Thanks in advance!