Group of buttons: start disabled

1

I made a class of buttons “factPick” and I’d like them to start disabled (except for the zeroes) and then become active as people progress.

<button class="button1 factPick" id="oneButton"  onclick="pickFact(0);">Zeroes</button>

( https://codepen.io/geonz/pen/qBBoVbO )
Is there a way to declare a whole class of buttons disabled with CSS? Nothing I’ve tried works. Other stuff like changing color works…
(e.g.:

.factPick
{
/*    background-color: white; */
  disabled: true;
}

( I know I could just label each individual one “disabled” to start with.)

3

Thanks! I just wanted to make sure I wasn’t a properly placed parenthesis away from making it work…

4

@geonz I took your project and refactored a bit, so you can see an alternative way of creating all of the fact groups without having to hard code them. I kept it simple with respect to the order of the facts. You can check the browser console after clicking to see the array of facts created when clicking on a number button to see how my logic arranged them. Personally would randomly select (without replacement) one of the facts for each test, but this is your quiz and you can do what you want with it.

I also dynamically create the buttons, because I like to keep code as DRY (Do Not Repeat Yourself) as possible.

Feel free to use the code and tweak it a bit more to your liking. I recommend clicking the open in repl.it link at the top right corner of the embedded code below.

6

This is something I was trying to figure out… I have made some things in Geogebra with sequences so I didn’t have to list all… those… facts… I’ll be thinking :wink:
(and I’m planning to have an “in order” version and then a random version… but also versions with visual representations of various sorts.)

7

Question… what is this called:

const choices = {
  0: "Zeros", 1: "Ones", 2: "Twos", 3: "Threes",
  4: "Fours", 5: "Fives", 6: "Sixes", 7: "Sevens",
  8: "Eights", 9: "Nines", 10: "Tens"
};

… is it an object with ten ‘properties’? (I’d never have thought to do that… )

and… what does the $ mean in ${choices[factChoice]} ?

9

I’ve started using repl.it – it is nicer for bouncing back and forth between files and having different .js files. I did some adaptations … and now I’ve moved to building an “identify which multiplication table is represented here” and – once I saw some teeny single quotes I’d missed – am using the loop to add N pairs of purple socks…

I’m wondering whether just saying buttonsDiv.innerHTML= instead of the getElementById text is something I should be doing? Is it a new convenience or something that doesn’t always work? https://repl.it/@xiousgeonz/visual-rep-of-mult-identify-Twos is where I’m currently playing…