Benutzer:Buss-Haskert/Übungsseite: Unterschied zwischen den Versionen
Aus ZUM Projektwiki
Keine Bearbeitungszusammenfassung Markierungen: Zurückgesetzt Quelltext-Bearbeitung 2017 |
Keine Bearbeitungszusammenfassung Markierungen: Zurückgesetzt Quelltext-Bearbeitung 2017 |
||
| Zeile 1: | Zeile 1: | ||
< | <!DOCTYPE html> | ||
<html lang="de"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>Online-Test Klasse 5</title> | |||
<style> | |||
body { | |||
font-family: Arial, sans-serif; | |||
margin: 20px; | |||
padding: 20px; | |||
background-color: #f4f4f4; | |||
} | |||
h1 { | |||
text-align: center; | |||
} | |||
.question { | |||
margin-bottom: 20px; | |||
} | |||
.question label { | |||
display: block; | |||
margin: 10px 0 5px; | |||
} | |||
.submit { | |||
display: block; | |||
margin: 20px auto; | |||
padding: 10px 20px; | |||
background-color: #007BFF; | |||
color: white; | |||
border: none; | |||
cursor: pointer; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h1>Online-Test für die 5. Klasse</h1> | |||
<form id="quiz-form"> | |||
<div class="question"> | |||
<label for="q1">1. Was ist das Ergebnis von 8 + 5?</label> | |||
<input type="number" id="q1" required> | |||
</div> | |||
<div class="question"> | |||
<label for="q2">2. Nenne das Hauptstadt von Deutschland.</label> | |||
<input type="text" id="q2" required> | |||
</div> | |||
<div class="question"> | |||
<label for="q3">3. Was ist die korrekte Schreibweise für die Zahl 25 in Worten?</label> | |||
<input type="text" id="q3" required> | |||
</div> | |||
<div class="question"> | |||
<label for="q4">4. Welche Form hat 3 Ecken?</label> | |||
<input type="text" id="q4" required> | |||
</div> | |||
<div class="question"> | |||
<label for="q5">5. Wie viele Kontinente gibt es auf der Erde?</label> | |||
<input type="number" id="q5" required> | |||
</div> | |||
<button type="submit" class="submit">Test abschicken</button> | |||
</form> | |||
<script> | |||
document.getElementById('quiz-form').addEventListener('submit', function(event) { | |||
event.preventDefault(); // Verhindert das Standardverhalten des Formulars | |||
alert('Test erfolgreich abgeschickt!'); // Hier könnte man die Antworten auswerten | |||
}); | |||
</script> | |||
</body> | |||
</html> | |||
Version vom 29. Dezember 2024, 11:18 Uhr
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online-Test Klasse 5</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
text-align: center;
}
.question {
margin-bottom: 20px;
}
.question label {
display: block;
margin: 10px 0 5px;
}
.submit {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
</style>
</head> <body>
Online-Test für die 5. Klasse
<form id="quiz-form">
<label for="q1">1. Was ist das Ergebnis von 8 + 5?</label>
<input type="number" id="q1" required>
<label for="q2">2. Nenne das Hauptstadt von Deutschland.</label>
<input type="text" id="q2" required>
<label for="q3">3. Was ist die korrekte Schreibweise für die Zahl 25 in Worten?</label>
<input type="text" id="q3" required>
<label for="q4">4. Welche Form hat 3 Ecken?</label>
<input type="text" id="q4" required>
<label for="q5">5. Wie viele Kontinente gibt es auf der Erde?</label>
<input type="number" id="q5" required>
<button type="submit" class="submit">Test abschicken</button>
</form>
<script>
document.getElementById('quiz-form').addEventListener('submit', function(event) {
event.preventDefault(); // Verhindert das Standardverhalten des Formulars
alert('Test erfolgreich abgeschickt!'); // Hier könnte man die Antworten auswerten
});
</script>
</body> </html>
