I've been working on a project. It's not a terribly exciting project, nor is it one that I think anyone besides me will find especially interesting or fun, nor is it especially complicated! It's a gallery of textbook cover art. It will have its own web site, as my Neocities storage is running low and it's all images. Of course it would probably make more sense to move the public domain art hoard to its own website, since that's over 2000 images and taking up the majority of my storage space, but it was here first!
I spent a lot of yesterday trying to figure out how to do a particular thing in HTML/CSS. It's a bittersweet feeling whenever I do that; it's satisfying and a bit exciting to solve a problem, but at the same time it feels frustrating. It takes me a long time to do things that I think are probably not that hard for other people, and the things that take a long time to work out are never especially impressive or flashy. Sometimes it feels like I'm throwing work into a black hole when I puzzle through something like this... like all the time and effort I put into it just disappears, gone without a trace... I look at the end result and think, "well, that's fine," and am irritated knowing how much time and effort went into making something that's only fine. Shouldn't it be great, considering the time I spent on it?
The thing I was doing was working out how to make a multiple-choice quiz; you see a textbook cover with the title removed and have to guess what subject it's about. You pick one answer, then click a button, and then it indicates if you got it right and reveals the unedited cover. An extremely simple procedure, thoroughly unimpressive to anybody who's ever taken an online quiz before. Which is basically everybody at this point. It ended up being harder than I thought it would be to write, though. Making things from scratch is hard.
First thing: I did not want to do javascript, because I still refuse to learn how to use javascript outside of stealing. This obviously creates a problem, as "click a button to make something happen" is really a javascript thing. Ditto if/then statements; while some people can do amazing things programming in CSS, I am not one of those people.
Initially I was going to steal James's quiz code, since he generously encourages it, but after I did the HTML portion I copy-pasted his javascript and was befuddled as to how to actually use or edit it. Since his thing is a personality quiz rather than a correct/incorrect type of test, it would need somewhat significant edits, which is hard to do if you don't understand how any of it works! And, again: I do not want to learn javascript lol.
Searching online for how to make a quiz is pretty tough, since it just gives you generators and websites for making quizzes... but I didn't want to embed a thing or just do a uquiz! Arbitrarily!!!!!!!
It took a while to bash together the first component, which was wrapping my head around :checked and IDs and whatever to make it so that when an answer is checked, it turns red if incorrect and green if correct. This part is relatively straightforward, although it took me a while to actually understand how to make it work.
Yuuuuuuuuck. See, the input (radio button) needs an ID so you can see if it's checked, and the label also needs an ID so you can do something to it. Both options need the "name" to group them together as two options for one question, and the label needs to be "for" the id of the button. It feels so fiddly and overly complicated, but whatever. Suffering.
Anyway, I was glad I could finally change the color of the thing, but I didn't want it to change color immediately, I wanted it to change color after pressing a submit button! Why? Because I just like it better that way. It feels tidier and less rushed. You have time to hem and haw and change your mind.
So.............. how, lol. I tried for a while trying to figure out if I could just wrap it in another checked check -
So that when you click the submit button (which is actually a checkbox), then if the answer button is checked color it red. But that didn't work. I tried moving the brackets around and googling and whatnot; I concluded it's not possible, although it might be possible if you're better at things than I am. I think maybe you can do this better with :has? I dunno.
So, failing that........ then what????? Only being able to affect one thing at a time is a problem if I want to affect multiple things!! I want "answer turns red if it's checked AND the button is pressed, otherwise it is not red"!!
I did some pacing around and groaning and complaining for a while, cursing my lack of skill + knowledge, trying to figure out if I could use a details tag or something somehow. I could use absolute positioning to scoot a colored copy of the answers on top of the answers...?? I thought that would be too silly.
How I ended up doing it is less silly than that but still silly. But I think it's silly in a sort of clever way! I put a grayscale filter on it. A 100% grayscale filter is applied to all the labels, so that they all appear dark grey. They are changing color when clicked, but you can't see it because of the filter. Pressing the "submit" button removes the grayscale filter and reveals whether the answer you clicked is green or red. I also added some checks and Xs next to the answers that become visible when the submit button is pressed.
Here's a demo, since describing it isn't a very good way to get the idea across...
i might try to puzzle out a way to count the correct answers without javascript, but I think that's probably too hard...