nicht angemeldet
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?
body {
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
Gunnar Bittersmann
Der Martin
Rolf B
JürgenB