Initial commit - Kinderspiele
This commit is contained in:
OpenClaw
@@ -0,0 +1,223 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user