Beispiel:Mathe-Quiz-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Mathe-Quiz</title>
<style>
#task {
font-size: 2em;
margin: 2em auto;
}
#task span {
display: inline-block;
width: 1em;
text-align: center;
}
/* Scrollleiste von type="number" wird ausgeblendet */
#task input[type="number"]{
width: 2em;
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
font-size: 1em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#task button {
font-size: 1.33em;
padding: -0.5em 0 0;
height: 1em;
width: 1em;
line-height: 90%;
vertical-align: top;
}
output {
display: block;
margin: 2em 0;
}
[for=input] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
<script>
</script>
</head>
<body>
<h1>Mathe-Quiz - Aufgabenfeld</h1>
<form id="task">
<span id="var1">a</span>
<span id="operator">+</span>
<span id="var2">b</span>
=
<label for="input">Ergebnis eingeben:</label>
<input id="input" type="number" step="1" size="3">
<button type="submit" aria-label="Berechnung starten">↵</button>
</form>
<p>
<output>Ergebnisausgabe</output>
</p>
</body>
</html>
