nicht angemeldet
Gunnar Bittersmann
Rolf B
Rolf B
Gunnar Bittersmann
JürgenB
Rolf B
Gunnar Bittersmann
Rolf B
Servus miteinander,
aktuell Programmiere ich ein Quiz und dort werden in einem Div Element die Buttons vom JS File automatisch je nach Antwortanzahl erstellt. Im Css File habe ich die height & width auf auto gestellt, damit die Buttons je nach Textlänge so groß sind wie der Text. Jetzt würde ich es aber gerne so machen, dass der größte Button (auch automatisch groß ist) die Größe der anderen Buttons bestimmt, damit alle gleich groß sind. Gibt es da Vorschläge wie man das vorgehen kann?
Der Martinbody {
text-align: center;
font-family: RobotoFix,Times,Arial,Helvetica,sans-serif;
background-color: #393E46;
color: #EEEEEE;
}
button {
font-size: 18px;
padding: 15px;
margin: 10px;
background-color: #00ADB5;
transition: all .5s ease;
border: 2px solid transparent;
margin-left: 30%;
margin-right: 30%;
height: auto;
width: auto;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
position:absolute;
width: 100%;
bottom: 0;
height: 2rem;Quelltext hier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="scriptv3.js"></script>
<title>Quiz</title>
</head>
<body>
<div id="Quiz">
<h1>Quiz zu XY</h1>
<h2 id="question"></h2>
<div id="options"></div>
<div>Questions correct: <span id="correct">0 of <span id="MaxQuestionNum"></span></span></div>
<div hidden>Anzahl der Fragen die du bearbeiten möchtest: (zwischen 1 und <span id="MaxQuestionNum2"></span>):
<input type="range" id="points" name="points" min="1" max="MaxQuestionNum2"></div>
<div id="Timeranzeige">Sie haben noch <span id="time">00:00</span> Minuten Zeit, die Aufgaben zu bearbeiten!</div>
</div>
<footer>By - contact: </footer>
</body>
</html>Quelltext hier
unction load_question () {
zufallszahlausgeben();
var question_number = zufallszahl;
document.querySelector("#question").innerHTML = question[question_number].question;
const options = document.querySelector("#options");
options.innerHTML = "";
for (const option of question[question_number].options) {
options.innerHTML += `<button class="option">${option}</button>`;
};
document.querySelectorAll(".option").forEach( option => {
option.onclick = () => {
if (option.textContent == question[question_number].answer) {
alert("RICHTIG"); //austauschen gegen correct button toggle green und falsch rot
correct += 1;
document.querySelector("#correct").innerHTML = `${correct} of ${question.length - 1}`;
return next_question();
} else {
alert("FALSCH");
return next_question();
}
}
})
};Quelltext hier
@@Ossenkaemper
Jetzt würde ich es aber gerne so machen, dass der größte Button (auch automatisch groß ist) die Größe der anderen Buttons bestimmt, damit alle gleich groß sind.
Die Buttons sollen nebeneinander oder untereinander sein?
Wenn nebeneinander, wie soll das gehen? Was soll passieren, wenn sie zusammen breiter sind als der Viewport? Horizontal scrollen?
<!DOCTYPE html> <html lang="en">
Die Sprachangabe ist falsch; es muss de heißen.
unction load_question () {
Elftes Gebot: Du sollst nicht unken!
😷 LLAP
Die Button sollen untereinander stehen, wie aktuell auch, aber ich möchte dass die Button die gleich länge haben
Das F in Function habe ich beim kopieren vergessen. Ist es nicht egal ob en oder de?
Hallo,
Ist es nicht egal ob en oder de?
nein, sicher nicht. Oder möchtest du, dass sich ein Screenreader "einen abbricht", wenn er versucht, so seltsame deutsche Wörter mit englischer Aussprache vorzulesen?
Live long and pros healthy,
Martin
@@Ossenkaemper
Ist es nicht egal ob en oder de?
Nein, das ist es ganz und gar nicht. Warum man Sprachattribute verwenden sollte – wobei ich die Gründe genau andersrum priorisiert aufzählen würde.
😷 LLAP
Hallo Gunnar,
unction Elftes Gebot: Du sollst nicht unken!
Guck ins Wörterbuch. Er verpasst seinem Code eine Einreibung, damit deine Abreibung nicht so schmerzt!
Rolf
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
@@Rolf B
… setzt Du im Stylesheet
width:max-content;Vielleicht noch eine max-width dabei, damit zu lange Antworten umbrechen können.
Nein, nicht vielleicht, sondern unbedingt.
max-content funktioniert nicht im Internet Explorer, aber hey, wen stört's heute noch.
Niemanden. Warum erwähnst du’s dann? 😉
Da sind die Buttons dann eben so breit wie das Fenster.
Progressive enhancement at work.
😷 LLAP
Hallo Gunnar,
max-content funktioniert nicht im Internet Explorer, aber hey, wen stört's heute noch.
Niemanden. Warum erwähnst du’s dann? 😉
vielleicht wegen
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Gruß
Jürgen
Hallo JürgenB,
was vermutlich eine der vielen unverstandenen Codezeilen in dieser Seite ist...
Rolf
@@Gunnar Bittersmann
… setzt Du im Stylesheet
width:max-content;Vielleicht noch eine max-width dabei, damit zu lange Antworten umbrechen können.Nein, nicht vielleicht, sondern unbedingt.
… mit dem Wert 100%. Sieht dann so aus: Beispiel.
😷 LLAP
Hallo Gunnar,
dein Codepen enthält ein div mit Buttons. Ist mein Gedanke mit der Liste ein Irtum?
… mit dem Wert 100%.
nein, bitte nicht 100%. Das ist der Wikipedia-Fehler, den Du schon oft genug gerügt hast. Ich sag nur: Fullscreen auf einem 43" Bildschirm im 32:10 Verhältnis, mit diesem Button:
<button>Dr. Leonard “Bones” McCoy, not an engineer, soldier, spy or pilot, but the well known doctor of the famous Constitution Class Spaceship NCC-1701 USS Enterprise, able to heal every injury, be it bodily or verbally</button>
Eine lesbare Breite sollte es sein, passend zum Layout des Quiz (sic!).
Rolf
@@Rolf B
dein Codepen enthält ein div mit Buttons. Ist mein Gedanke mit der Liste ein Irtum?
Kann man machen.
… mit dem Wert 100%.
nein, bitte nicht 100%.
Doch. Der Button soll nicht breiter werden als die zur Verfügung stehende Breite, und das sind nun mal 100%.
Man kann da nicht max-width: 42em angeben, sonst passt es auf schmalen Viewports nicht.
Das ist der Wikipedia-Fehler, den Du schon oft genug gerügt hast. Ich sag nur: Fullscreen auf einem 43" Bildschirm im 32:10 Verhältnis, mit diesem Button:
<button>Dr. Leonard “Bones” McCoy, not an engineer, soldier, spy or pilot, but the well known doctor of the famous Constitution Class Spaceship NCC-1701 USS Enterprise, able to heal every injury, be it bodily or verbally</button>Eine lesbare Breite sollte es sein
OK, wenn man solche Antwortmöglichkeiten hat (lies: haben könnte), sollte man vorsorgen.
Also maximal 100% und maximal 42em: max-width: min(100%, 42em)
Im Codepen ergänzt – dort bspw. 10em.
😷 LLAP
Hallo Gunnar,
Man kann da nicht max-width: 42em angeben, sonst passt es auf schmalen Viewports nicht.
Beim Test einer echten Application wäre mir das sicher aufgefallen... (schwatz, laber, rausred 😉)
Mit der min-Klausel passiert das, was ich meinte.
Rolf