Hello
It’s very important to get html right on challenges. This must be a form with radio inputs, not a list of buttons. This is essential I’m afraid.
But the good news is once that’s done the js part becomes tiny and simple.
This challenge really only needs a few lines of js. It’s almost all standard html form functionality and that’s what you should be practicing here.
A loader isn’t necessary and is actually breaking your solution at the end by making the thank you content disappear.
Don’t over-engineer these things.
If displaying the thank you on the same screen and generating the thank you markup with js like you are doing at the moment, you would need a holding element present on the original page with an aria live attribute on it so the thank you gets announced to screenreader users. I also think you’d need to programmatically move focus to the thank you panel and make it persist.
Golden rule - no unexpected changes of context for users.
Once this has the correct html (form with radios) all the js needs to do is
- listen for submit
- get the value from the input name
- use that in the thank you
- hide first panel, show second one
Marked as helpful