nicht angemeldet
Hi,
mir war etwas langweilig und habe das mal versucht zu basteln:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Lern-Dingens</title>
<style>
/* Formulare, die nicht der aktuelle Schritt sind, sollen ausgeblendet werden */
form:not(.currentStep) {
display: none;
}
#success:not(.currentStep) {
display: none;
}
/* Animation, die das Bild ausblendet */
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Zuweisen der animation an das Bild. Wichtig ist hier das delay, welches angibt nach wie vielen Sekunden die animation ausgeführt werden soll */
.currentStep img {
animation-duration: .2s;
animation-name: fadeOut;
animation-iteration-count: 1;
animation-delay: 5s;
animation-fill-mode: forwards;
display: block;
}
</style>
</head>
<body>
<!-- Ein Formular pro Bild/Eingabefeld-Kombination -->
<!-- Das "Startformular" hat die id "firstStep" und standardmäßig die class "currentStep". Jedes Formular hat novalidate, um die browserseitige validierung zu deaktivieren (wir wollen das selber mit JS machen) -->
<form id="firstStep" class="currentStep" novalidate>
<!-- das Bild -->
<img src="http://via.placeholder.com/350x150" />
<!-- das eingabefeld, im pattern-Attribut steht der richtige eingabewert (Achtung: Das ist ein regulärer Ausdruck, d.h. manche Zeichen haben eine besondere Bedeutung. Solange nur Ziffern verwendet werden funktioniert das wie erwartet) -->
<input type="text" pattern="1" required/>
<!-- Button zum bestätigen der eingegebenen Antwort. Hier mit der Lösung in klammern dahinter, die sollte man dann entfernen :) -->
<button type="submit">Bestätigen (1)</button>
</form>
<form novalidate>
<img src="http://via.placeholder.com/350x150" />
<input type="text" pattern="2" required/>
<button type="submit">Bestätigen (2)</button>
</form>
<form novalidate>
<img src="http://via.placeholder.com/350x150" />
<input type="text" pattern="3" required/>
<button type="submit">Bestätigen (3)</button>
</form>
<div id="success">Alles richtig!</div>
<script>
// immer wenn ein formular abgeschickt wird, soll unten stehende funktion ausgeführt werden
document.body.addEventListener('submit', e => {
// verhindere dass browser versucht, das formular an einen server zu schicken
e.preventDefault();
// mache aktuelles formular inaktiv
e.target.className = '';
// prüfe, ob eingabewert im input korrekt ist
if (e.target.querySelector('input').checkValidity()) {
// falls ja, mache nächstes Formular aktiv
e.target.nextElementSibling.className = 'currentStep';
} else {
// eingabe war falsch, mache erstes formular aktiv
// aber erst nach 1ms, um das einblenden/ausblenden des bildes neu anzustoßen
window.setTimeout(() => {
document.getElementById('firstStep').className = 'currentStep';
}, 1);
}
// setze formulardaten zurück (falls das gleiche formular später wieder angezeigt wird, sollte die antwort nicht schon drin stehen)
e.target.reset();
});
</script>
</body>
</html>
TS
Rolf B
Gunnar Bittersmann
JürgenB
Tabellenkalk
MudGuard
Auge
Matthias Apsel
marctrix