How to make a Quiz App disable other options after an option is selected?
Hello, i need help with my Javascript quiz app.
I need to disable other options after an option is selected.
I also need to find a way to make sure that when the "Next" button is clicked, the previously selected options/buttons are deselected.
I've tried doing this myself but wasnt able to.
I'd appreciate your help.
The codepen is given below:
https://codepen.io/will-ndaji/pen/zYyNjLJ
22 Replies
The easiest option is to use radio buttons. You can hide the radio button and style the labels to look exactly the same as how your current buttons look.
If you must keep the current HTML as it is, you will need to check the event target and set all other buttons to a deselected state.
here are a few steps i would do:
- instead of buttons, use a radio input
- wrap the whole thing in a fieldset
- when an input in the fieldset changes, set the fieldset to disabled
It's not necessary to actually set anything as disabled if you use radio buttons. Just set a different style for checked or unchecked.
I need to disable other options after an option is selected.this is part of the requirements
I believe that comes from not understanding another way to implement this.
that's a fair interpretation
but i believe this is like a "click and lock the answer in, to show if it's right or wrong"
I think you are right. I didn't notice that the button was for next and not submit.
yup, and if you click on a button, you see a buggy red/green background on the buttons
but, a step at a time
but, the simplest way is to just wrap it all in a fieldset and put it as disabled
It's a bad user experience for any answer to be your final answer. I have never seen a quiz like that before.
ive seen a lot
hello? please how do i do this?
instead of using a div, use a fieldset
and in javascript, you set or remove the
disabled attribute
that's literally itoh i didnt use a div though, just buttons, everything seems to be working except the javascript part where i'll have to modify the code to disable the deselected options, while making sure the Red or Green background disappears when the next button is clicked
but the buttons are inside something, right?
Yes, inside a div containerπ
yes, and instead of that div, you can use a fieldset
oh, and since you're using a fieldset, you could use the
<legend> tag to show the question
you can style it to look like the div
i don't know if there's any usability issues from it, but you can ask in #ui-uxAlright, so instead of the button tag, i'll use the Legend tag right?
no, the button tag stays a button tag
So label tag inside the Button Tag right?
i wouldn't put a label tag inside, but if it makes it easier to style, keep it
i meant "Legend", sorry
the
<legend> tag can't be inside a button
but you don't have to use it
you can pretend that it is some sort of weird <p> tag with hardcoded styles