Beispiel:JS-Multiple-Choice-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">
<script>
</script>
<style>
#quiz label {
display: block;
background-color: lightBlue;
border: medium solid steelBlue;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
/* Hover-Effekt */
#quiz label:hover {
background-color: lightyellow;
}
/* mache Fokus sichtbar */
#quiz input[type="radio"]:focus + label {
outline: 2px solid black;
outline-offset: 2px;
}
/* Auswahl */
#quiz input[type="radio"]:checked + label {
background-color: gold;
border-color: #866a00;
}
#quiz input { /*visually-hidden */
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
#quiz label {
border-radius: 0.2em;
margin: 0.1em 0;
padding: 1em 2em;
max-width: 33em;
}
</style>
<title>CSS für Multiple-Choice-Quiz</title>
</head>
<body><h1>CSS für Multiple-Choice-Quiz</h1>
<form id="quiz" action="">
<fieldset role="radiogroup">
<legend>Frage …</legend>
<input type="radio" name="answer" id="a27_0">
<label for="a27_0">Antwort 1</label>
<input type="radio" name="answer" id="a27_1">
<label for="a27_1">Antwort 2</label>
<input type="radio" name="answer" id="a27_2" value="Antwort 3">
<label for="a27_2">Antwort 3</label>
</fieldset>
<button type="submit">Auswahl bestätigen</button>
</form>
</body>
</html>
