OpenClaw
223 lines
9.2 KiB
HTML
223 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Wie viele? - KinderWelt</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh; display: flex; flex-direction: column; align-items: center;
|
|
font-family: 'Comic Sans MS', cursive, sans-serif; padding: 20px;
|
|
}
|
|
h1 { color: white; margin-bottom: 10px; }
|
|
.question { color: white; font-size: 22px; margin: 10px 0; text-align: center; }
|
|
.objects-area {
|
|
background: white; border-radius: 20px; padding: 30px; margin: 15px 0;
|
|
min-height: 200px; min-width: 300px; display: flex; flex-wrap: wrap;
|
|
justify-content: center; align-items: center; gap: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.object-item { font-size: 50px; }
|
|
.answer-section { margin: 20px 0; text-align: center; }
|
|
.answer-input {
|
|
font-size: 48px; width: 100px; text-align: center; padding: 10px;
|
|
border: 3px solid white; border-radius: 15px; background: rgba(255,255,255,0.9);
|
|
font-family: inherit; font-weight: bold;
|
|
}
|
|
.pin-pad {
|
|
display: grid; grid-template-columns: repeat(3, 70px); gap: 10px;
|
|
justify-content: center; margin: 20px 0;
|
|
}
|
|
.pin-btn {
|
|
background: rgba(255,255,255,0.9); border: none; border-radius: 15px;
|
|
width: 70px; height: 70px; font-size: 28px; font-weight: bold;
|
|
cursor: pointer; font-family: inherit;
|
|
}
|
|
.pin-btn:active { transform: scale(0.95); background: white; }
|
|
.pin-btn.action { background: #4ade80; color: white; }
|
|
.pin-btn.clear { background: #ff6b6b; color: white; }
|
|
.feedback {
|
|
font-size: 36px; margin: 15px 0; min-height: 50px; font-weight: bold;
|
|
}
|
|
.feedback.correct { color: #4ade80; }
|
|
.feedback.wrong { color: #ff6b6b; }
|
|
.score { color: white; font-size: 20px; margin-bottom: 10px; }
|
|
.controls { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; justify-content: center; }
|
|
.btn {
|
|
background: white; border: none; border-radius: 10px; padding: 12px 25px;
|
|
font-size: 16px; cursor: pointer; font-family: inherit; font-weight: bold;
|
|
}
|
|
.btn-back { background: #ff6b6b; color: white; text-decoration: none; }
|
|
.range-select { margin-bottom: 15px; }
|
|
.range-select button {
|
|
background: rgba(255,255,255,0.2); border: 2px solid white; border-radius: 10px;
|
|
padding: 8px 15px; margin: 0 5px; color: white; font-size: 14px; cursor: pointer;
|
|
}
|
|
.range-select button.active { background: white; color: #667eea; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔢 Wie viele siehst du?</h1>
|
|
|
|
<div class="range-select">
|
|
<button onclick="setRange(5)" id="r5" class="active">Bis 5</button>
|
|
<button onclick="setRange(10)" id="r10">Bis 10</button>
|
|
<button onclick="setRange(20)" id="r20">Bis 20</button>
|
|
</div>
|
|
|
|
<div class="score">Richtig: <span id="correctCount">0</span> | Versuche: <span id="totalCount">0</span></div>
|
|
|
|
<div class="question" id="questionText">Wie viele 🍎 siehst du?</div>
|
|
|
|
<div class="objects-area" id="objectsArea"></div>
|
|
|
|
<div class="answer-section">
|
|
<input type="text" class="answer-input" id="answerInput" readonly placeholder="?">
|
|
</div>
|
|
|
|
<div class="feedback" id="feedback"></div>
|
|
|
|
<div class="pin-pad">
|
|
<button class="pin-btn" onclick="enterDigit(1)">1</button>
|
|
<button class="pin-btn" onclick="enterDigit(2)">2</button>
|
|
<button class="pin-btn" onclick="enterDigit(3)">3</button>
|
|
<button class="pin-btn" onclick="enterDigit(4)">4</button>
|
|
<button class="pin-btn" onclick="enterDigit(5)">5</button>
|
|
<button class="pin-btn" onclick="enterDigit(6)">6</button>
|
|
<button class="pin-btn" onclick="enterDigit(7)">7</button>
|
|
<button class="pin-btn" onclick="enterDigit(8)">8</button>
|
|
<button class="pin-btn" onclick="enterDigit(9)">9</button>
|
|
<button class="pin-btn clear" onclick="clearAnswer()">⌫</button>
|
|
<button class="pin-btn" onclick="enterDigit(0)">0</button>
|
|
<button class="pin-btn action" onclick="checkAnswer()">✓</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" onclick="nextQuestion()">🔄 Nächste Aufgabe</button>
|
|
<a href="../index.html" class="btn btn-back">⬅️ Zurück</a>
|
|
</div>
|
|
|
|
<script>
|
|
const objects = [
|
|
{ emoji: '🍎', name: 'Äpfel' },
|
|
{ emoji: '🚗', name: 'Autos' },
|
|
{ emoji: '⭐', name: 'Sterne' },
|
|
{ emoji: '🐱', name: 'Katzen' },
|
|
{ emoji: '🌸', name: 'Blumen' },
|
|
{ emoji: '🎈', name: 'Ballons' },
|
|
{ emoji: '🐶', name: 'Hunde' },
|
|
{ emoji: '🦋', name: 'Schmetterlinge' },
|
|
{ emoji: '🍕', name: 'Pizzas' },
|
|
{ emoji: '🚀', name: 'Raketen' },
|
|
{ emoji: '🐘', name: 'Elefanten' },
|
|
{ emoji: '🌈', name: 'Regenbögen' }
|
|
];
|
|
|
|
let currentCount = 0;
|
|
let currentObject = null;
|
|
let userAnswer = '';
|
|
let maxRange = 5;
|
|
let correctCount = 0;
|
|
let totalCount = 0;
|
|
const synth = window.speechSynthesis;
|
|
|
|
function setRange(range) {
|
|
maxRange = range;
|
|
document.querySelectorAll('.range-select button').forEach(btn => btn.classList.remove('active'));
|
|
document.getElementById('r' + range).classList.add('active');
|
|
nextQuestion();
|
|
}
|
|
|
|
function nextQuestion() {
|
|
// Zufällige Anzahl und Objekt
|
|
currentCount = Math.floor(Math.random() * maxRange) + 1;
|
|
currentObject = objects[Math.floor(Math.random() * objects.length)];
|
|
|
|
// Anzeigen
|
|
const area = document.getElementById('objectsArea');
|
|
area.innerHTML = '';
|
|
|
|
// Objekte verteilen
|
|
for (let i = 0; i < currentCount; i++) {
|
|
const span = document.createElement('span');
|
|
span.className = 'object-item';
|
|
span.textContent = currentObject.emoji;
|
|
span.style.animationDelay = (i * 0.1) + 's';
|
|
area.appendChild(span);
|
|
}
|
|
|
|
// Frage setzen
|
|
document.getElementById('questionText').textContent =
|
|
`Wie viele ${currentObject.name} siehst du?`;
|
|
|
|
// Zurücksetzen
|
|
userAnswer = '';
|
|
document.getElementById('answerInput').value = '';
|
|
document.getElementById('feedback').textContent = '';
|
|
document.getElementById('feedback').className = 'feedback';
|
|
|
|
// Vorlesen
|
|
speak(`Wie viele ${currentObject.name} siehst du?`);
|
|
}
|
|
|
|
function enterDigit(digit) {
|
|
if (userAnswer.length < 2) {
|
|
userAnswer += digit;
|
|
document.getElementById('answerInput').value = userAnswer;
|
|
}
|
|
}
|
|
|
|
function clearAnswer() {
|
|
userAnswer = '';
|
|
document.getElementById('answerInput').value = '';
|
|
}
|
|
|
|
function checkAnswer() {
|
|
if (!userAnswer) return;
|
|
|
|
const answer = parseInt(userAnswer);
|
|
totalCount++;
|
|
|
|
const feedback = document.getElementById('feedback');
|
|
|
|
if (answer === currentCount) {
|
|
correctCount++;
|
|
feedback.textContent = '🎉 Richtig! Sehr gut!';
|
|
feedback.className = 'feedback correct';
|
|
speak(`Richtig! Es sind ${currentCount} ${currentObject.name}. Sehr gut!`);
|
|
} else {
|
|
feedback.textContent = `❌ Fast! Es waren ${currentCount} ${currentObject.name}.`;
|
|
feedback.className = 'feedback wrong';
|
|
speak(`Fast! Es waren ${currentCount} ${currentObject.name}.`);
|
|
}
|
|
|
|
document.getElementById('correctCount').textContent = correctCount;
|
|
document.getElementById('totalCount').textContent = totalCount;
|
|
|
|
// Nach 2 Sekunden nächste Frage
|
|
setTimeout(nextQuestion, 2500);
|
|
}
|
|
|
|
function speak(text) {
|
|
if (!synth) return;
|
|
const utterance = new SpeechSynthesisUtterance(text);
|
|
utterance.lang = 'de-DE';
|
|
utterance.rate = 0.8;
|
|
utterance.pitch = 1.2;
|
|
synth.speak(utterance);
|
|
}
|
|
|
|
// Keyboard
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key >= '0' && e.key <= '9') enterDigit(parseInt(e.key));
|
|
if (e.key === 'Backspace') clearAnswer();
|
|
if (e.key === 'Enter') checkAnswer();
|
|
});
|
|
|
|
// Init
|
|
nextQuestion();
|
|
</script>
|
|
</body>
|
|
</html> |