Beispiel:Mathe-Quiz-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>