Buttons automatisch auf die Größe des Größten Buttons setzen

[Rolf B]

Hallo Ossenkaemper,

um alles auf gleiche Breite (Länge ist hier der falsche Begriff) zu bekommen, gibst Du den Buttons width:100%; und für den Container, der id="options" trägt, setzt Du im Stylesheet width:max-content; Vielleicht noch eine max-width dabei, damit zu lange Antworten umbrechen können. max-content funktioniert nicht im Internet Explorer, aber hey, wen stört's heute noch. Da sind die Buttons dann eben so breit wie das Fenster.

Aber ich hätte eine Menge Fragen zu deiner load_question Einreibung 😉

    zufallszahlausgeben();
    var question_number = zufallszahl;

Erstens: Warum var? Du weißt es besser, das zeigt sich später.

Zweitens: Was passiert hier? Speichert zufallszahlausgeben eine Zufallszahl in einer globalen Variablen zufallszahl? Wenn ja: Nicht machen, gib die erzeugte Zufallszahl mit return zurück und speichere die Rückgabe. Die Funktion heißt auch besser erzeugeZufallszahl, denn es geht ja eher nicht um's Ausgeben, oder?

Also so:

    const question_number = erzeugeZufallszahl();

Es sei denn, du tust noch andere Dinge, die man in deinem Post nicht sieht, die eine andere Vorgehensweise rechtfertigen.

document.querySelector("#question").innerHTML = question[question_number].question;

Enthält dein Fragetext HTML? Wenn ja, ist innerHTML in Ordnung. Wenn nein, solltest Du die Eigenschaft textContent an Stelle von innerHTML verwenden.

Gleiches gilt für die Zuweisung an das correct-Element, hier wird definitiv kein HTML zugewiesen.

Aber deinen Fragenkatalog solltest Du questions nennen - beim Lesen hatte ich kurz Verwechslungsprobleme mit dem question-Array und der question-Eigenschaft einer Frage.

document.querySelectorAll(".option")

Eine Klasse "option" an den Buttons brauchst Du dafür nicht. Du kannst auch komplexere CSS Selektoren an querySelectorAll übergeben, z.B.

document.querySelectorAll("#options button")

um alle Buttons in den Options zu ermitteln.

Statt im Eventhandler zu prüfen, ob der Button richtig war, könntest Du auch einfach zwei verschiedene click-Handler vorsehen und dem Button, der die richtige Antwort enthält, den "richtig" Handler zuweisen. Die übrigen bekommen den "falsch" Handler - bzw. den "falsch" Handler kannst Du einfach an den #options-Container hängen und nur dem richtigen Button den "richtig" Handler geben. Dann musst Du beim Buttonklick gar nichts mehr prüfen.

Eine Anmerkung noch zu deinem HTML: Dein Fragetext ist sicherlich keine Überschrift. Wenn Du ihn fett und vergrößert ausgeben willst, gerne, style das im CSS, aber eine Überschrift ist mehr als nur Layout.

Deine Antworten solltest Du nicht in ein div setzen. Das ist eine Liste von Antwortmöglichkeiten. Das Markup sollte das widerspiegeln:

<ul id="options">
   <li><button type="button">Antwort 1</button></li>
   <li><button type="button">Antwort 1</button></li>
   <li><button type="button">Antwort 1</button></li>
</ul>

Das oben genannte document.querySelectorAll("#options button") findet diese Buttons dann genauso gut. Du musst hier nur ggf padding am ul Element nach Geschmack anpassen und mit list-style:none die Listenpunkte entfernen.

Rolf