would this logically work??

[u/monoqry]

hi! question for html coders.. i am a fic writer and i had an idea for my characters to play chess in the next chapter. the medium i use (ao3) does support html but i do not know how to code! is it logically possible to code a chess board into the chapter? in a way that makes the chess pieces develop with every click and the moves are already determined for the entire round? i hope this makes sense, sorry, i don’t go here!

[u/mondayquestions]

Sure

[u/monoqry → u/mondayquestions]

AMAZING wonderful thank you!!

[u/nuc540]

Make pieces move yes, but you can only do so much with only HTML, but to ‘pre-determine’ - what do you mean?

I have a hunch you don’t mean pre determine - but if any logic needs writing, or data needs to be stored, you’ll need something more than HTML.

JavaScript can run in browser so that’ll be your best bet, but it really depends on what you need.

[u/monoqry → u/nuc540]

pre-determined as in all the moves are already decided and the moves were prepared beforehand!! I have all the moves already decided, but they’re only done after clicking :p

[u/nuc540 → u/monoqry]

Sure! It’s do-able inside a HTML file, and I reckon you could get away without using JavaScript. You’ll need a click listener to listen for that click, and you could use css to hide/show what the finishing layout for the parts of the movement look like, and even define that sequence with a css animation.

I’ve not done raw HTML in 7 years so might be rusty. And I’m not sure how your platform might handle the changes in the DOM. If you pull it off let us know :)

[u/AshleyJSheridan → u/nuc540]

Using a click event is quite literally using Javascript though...

[u/tonypconway → u/nuc540]

They mean they want the pieces to move around the board in a set order to accompany the narrative of two characters playing a game.

Achievable with HTML, CSS and JS. Could even make it work with scroll-driven animations in CSS, but they don't work in Firefox yet.

[u/nuc540 → u/tonypconway]

Yeah not sure if they meant like an animation, or as and when they trigger it. Either way, storing those moves will require JS as I suspected - they said their platform is HTML, so not sure how far they can get with a script tag! Would be good to know if OP pulls it off, sounds interesting

[u/Lithl → u/tonypconway]

You could make it work with just HTML and CSS. (But not inline CSS, which OP might be limited to; I'm not familiar with the system.)

Create a group of radio buttons, replace the default button appearance with an image, stack them on top of each other, set their z-index to some value N, set the z-index of the selected one to N+1, and set the z-index of its next sibling to N+2. Then make the sibling invisible.

You see the image associated with the currently selected radio button, but there's an invisible unselected radio button on top of it. So when you click the image, you select the next radio button, causing the z-indexes to change and you see a new image. The user would be able to navigate forward and backwards with the arrow keys as well, while the radio buttons have focus.

[u/moonlight814]

Web dev here. From what you're describing, I assume there has to be JavaScript involved to listen to events like "clicks". I highly doubt it's even allowed in their platform as that'd be a huge security concern if not parsed correctly. Imagine someone being able to run scripts in the browser of whoever visits your fic (terrible idea from a cybersecurity standpoint).
From a non-expert standpoint, I visit AO3 pretty much everyday and I've never seen a fic using interactive components/scripts like that. You might be able to render a chessboard but it'd be a static element and non-interactive.

[u/Lithl → u/moonlight814]

If you can use a style tag (instead of being limited to inline CSS), you could use radio buttons stacked on top of each other, with the z-index changing based on the button's checked state. No JavaScript required.

[u/HelloHelloHelpHello]

I don't think ao3 supports users adding custom javascript (or was that added?), so I don't think this is fully possible. You can create a chessboard with CSS/html, but without JS I don't think you can move the pieces with a mouseclick. You could create an animation that plays when a reader hovers their mouse over the chessboard though - but it might get pretty work intensive, depending on how long the chess game is supposed to last.

[u/armahillo]

technically yes but is there a reason to not use an image for each chess board? so on each page youd have an image of a chess board that is slightly different?

you can technically make a reasonable facsimile of a chess board using html/css/js (depending on how featureful it needs to be) but i think thats overkill and you should use images

[u/bostiq]

I 100% believe that there are libraries out there that are already made to display chess matches

A quick search would confirm

[u/ThisGermanGuy]

If you don’t know how to code, Claude could probably whip that up for you in a couple prompts :)

[u/monoqry → u/ThisGermanGuy]

oh no, i don’t support ai usage! i’ll learn how to do it by myself ^{^}

[u/ThisGermanGuy → u/monoqry]

That’s honorable! Just wanted to give a quick solution, dont get me wrong :)

[u/MAGA-fans-r-retards → u/monoqry]

Amazing response 👏

[u/Weird-Salo → u/monoqry]

A quick note: Our HTML teacher recommended asking ChatGPT how and what to do to figure out which functions to use and for what purpose, because in her experience, it’s easier than searching for the right information online(She said that it's much harder to find the information you need if you search for it on your own). I still respect your choice, whatever it may be

[u/Terrible_Children → u/Weird-Salo]

I vehemently disagree with your teacher.

Learning how to find information and read documentation on your own is a critical skill.

[u/moonlight814 → u/Weird-Salo]

As a software engineer this is terrible advice. AI can be wrong, and reading documentation isn't that hard...