✨ Die Magische-Mathe Wand 3Ag – Repetition – Mikul@
Klicke auf ein Feld, beantworte die Frage und sammle Punkte!
🏆
Spiel beendet!
"📐 Repetition",
"✖️ Grosses 1×1",
"🔄 Prozent–Bruch–Dez.",
"💰 Prozentrechnen",
"📊 Diagramme"
];
const colColors = ["var(--col1)","var(--col2)","var(--col3)","#a78bfa","var(--col5)"];
// questions[col][row] row 0 = 100 pts, row 4 = 500 pts
const questions = [
// ── COL 0: Repetition ────────────────────────────────────────────────────
[
{ q: "Berechne: 4,5 + 3,7", choices: ["8,2", "7,2", "8,12"], answer: 0 },
{ q: "Berechne: 120 ÷ 8", choices: ["12", "15", "14"], answer: 1 },
{ q: "Berechne: 15 × 6 − 24", choices: ["66", "70", "60"], answer: 0 },
{ q: "Berechne: 8,4 − 3,9 + 2,5", choices: ["7,0", "6,0", "7,5"], answer: 0 },
{ q: "Berechne: 4,8 × 5 − 6,4", choices: ["17,6", "20,4", "16,4"], answer: 0 },
],
// ── COL 1: Grosses 1×1 ───────────────────────────────────────────────────
[
{ q: "Berechne: 13 × 4", choices: ["42", "52", "48"], answer: 1 },
{ q: "Berechne: 240 ÷ 12", choices: ["20", "22", "18"], answer: 0 },
{ q: "Berechne: 25 × 8", choices: ["175", "200", "180"], answer: 1 },
{ q: "Berechne: 350 ÷ 14", choices: ["25", "30", "24"], answer: 0 },
{ q: "Berechne: 13 × 14", choices: ["172", "168", "182"], answer: 2 },
],
// ── COL 2: Prozent–Bruch–Dezimalzahl ─────────────────────────────────────
[
{ q: "Wie viel Prozent ist ¼?", choices: ["20 %", "25 %", "40 %"], answer: 1 },
{ q: "Schreibe 60 % als Dezimalzahl.", choices: ["6,0", "0,06", "0,6"], answer: 2 },
{ q: "Schreibe 0,75 als Bruch (gekürzt).", choices: ["3/4", "7/5", "1/4"], answer: 0 },
{ q: "Wie viel Prozent ist 0,83?", choices: ["8,3 %", "830 %", "83 %"], answer: 2 },
{ q: "Schreibe ⅝ als Dezimalzahl.", choices: ["0,65", "0,625", "0,58"], answer: 1 },
],
// ── COL 3: Prozentrechnen ─────────────────────────────────────────────────
[
{ q: "10 % von CHF 80.–", choices: ["CHF 8.–", "CHF 18.–", "CHF 0.80"], answer: 0 },
{ q: "Ein Artikel kostet CHF 120.–. Er wird um 10 % reduziert. Wie viel kostet er jetzt?", choices: ["CHF 110.–", "CHF 108.–", "CHF 100.–"], answer: 1 },
{ q: "Rabatt von CHF 2400 auf CHF 2040 – wie viel Prozent Rabatt ist das?", choices: ["10 %", "15 %", "20 %"], answer: 1 },
{ q: "18 % von 338 432 km² (Fläche der Schweiz: nein – das ist Russland, also vereinfacht: 18 % von 3000)", choices: ["480", "540", "620"], answer: 1 },
{ q: "Lohnerhöhung von 5 % auf CHF 18.–/h. Wie hoch ist der neue Lohn?", choices: ["CHF 18.90", "CHF 19.00", "CHF 18.50"], answer: 0 },
],
// ── COL 4: Diagramme ─────────────────────────────────────────────────────
[
{ q: "In einem Kreisdiagramm hat «Fussball» einen Anteil von 25 %. Von 200 Schülerinnen und Schülern – wie viele spielen Fussball?", choices: ["40", "50", "60"], answer: 1 },
{ q: "Im Kreisdiagramm: Schwimmen 30 %, Turnen 20 %, Fussball 25 %. Wie viel Prozent bleibt für den Rest?", choices: ["20 %", "25 %", "30 %"], answer: 1 },
{ q: "Ein Balkendiagramm zeigt: Montag 40, Dienstag 55, Mittwoch 35 Besucherinnen und Besucher. Wie viele Personen kamen insgesamt?", choices: ["120", "130", "140"], answer: 1 },
{ q: "Im Kreisdiagramm hat Sport 40 %, Musik 35 %, Rest ?. Wie viel Prozent ist der Rest?", choices: ["20 %", "25 %", "15 %"], answer: 1 },
{ q: "Von 400 Schülerinnen und Schülern nutzen 45 % das Velo. Wie viele Personen sind das?", choices: ["160", "180", "200"], answer: 1 },
],
];
const points = [100, 200, 300, 400, 500]; // row 0..4
// ── STATE ─────────────────────────────────────────────────────────────────────
let score = 0;
let totalCells = 25;
let answered = 0;
let activeCell = null;
// ── BUILD GRID ────────────────────────────────────────────────────────────────
const grid = document.getElementById("grid");
// Render rows top to bottom = 500,400,300,200,100
for (let row = 4; row >= 0; row--) {
for (let col = 0; col < 5; col++) {
const pts = points[row];
const cell = document.createElement("div");
cell.className = "cell";
cell.dataset.col = col;
cell.dataset.row = row;
cell.innerHTML = `
`;
cell.addEventListener("click", () => openQuestion(cell, col, row));
grid.appendChild(cell);
}
}
// ── OPEN QUESTION ─────────────────────────────────────────────────────────────
function openQuestion(cell, col, row) {
activeCell = cell;
const q = questions[col][row];
const pts = points[row];
document.getElementById("modal-cat").textContent = categories[col];
document.getElementById("modal-cat").style.color = colColors[col];
document.getElementById("modal-pts").textContent = `⭐ ${pts} Punkte`;
document.getElementById("modal-q").textContent = q.q;
const choicesEl = document.getElementById("choices");
choicesEl.innerHTML = "";
q.choices.forEach((c, i) => {
const btn = document.createElement("button");
btn.className = "choice-btn";
btn.textContent = c;
btn.addEventListener("click", () => handleAnswer(i, q, pts));
choicesEl.appendChild(btn);
});
document.getElementById("feedback").className = "feedback";
document.getElementById("feedback").textContent = "";
document.getElementById("modal-close").style.display = "none";
document.getElementById("overlay").classList.add("open");
}
// ── HANDLE ANSWER ─────────────────────────────────────────────────────────────
function handleAnswer(chosen, q, pts) {
const btns = document.querySelectorAll(".choice-btn");
btns.forEach(b => b.disabled = true);
const feedback = document.getElementById("feedback");
if (chosen === q.answer) {
btns[chosen].classList.add("correct-ans");
feedback.className = "feedback correct";
feedback.textContent = "🎉 Super! Richtig gelöst!";
score += pts;
updateScore();
activeCell.classList.add("correct");
activeCell.querySelector(".back-icon").textContent = "✔️";
} else {
btns[chosen].classList.add("wrong-ans");
btns[q.answer].classList.add("correct-ans");
feedback.className = "feedback wrong";
feedback.innerHTML = `❌ Leider falsch.
Die richtige Antwort ist: ${q.choices[q.answer]}`;
activeCell.classList.add("wrong");
activeCell.querySelector(".back-icon").textContent = "✖️";
}
activeCell.classList.add("flipped", "used");
document.getElementById("modal-close").style.display = "block";
answered++;
}
document.getElementById("modal-close").addEventListener("click", () => {
document.getElementById("overlay").classList.remove("open");
if (answered === totalCells) setTimeout(showEnd, 400);
});
// ── SCORE ─────────────────────────────────────────────────────────────────────
function updateScore() {
const el = document.getElementById("score");
el.textContent = score;
el.classList.remove("bump");
void el.offsetWidth;
el.classList.add("bump");
}
// ── END ───────────────────────────────────────────────────────────────────────
function showEnd() {
document.getElementById("end-score").textContent = score + " Punkte";
const max = 25 * 300; // ~avg
let msg = "";
if (score >= 2000) msg = "Fantastisch! Du hast fast alles richtig! 🌟";
else if (score >= 1200) msg = "Sehr gut gemacht – du kennst den Stoff! 💪";
else if (score >= 600) msg = "Guter Einsatz! Noch etwas üben und du schaffst es! 👍";
else msg = "Weiter üben – beim nächsten Mal klappt es besser! 🚀";
document.getElementById("end-msg").textContent = msg;
document.getElementById("end-overlay").classList.add("open");
document.getElementById("end-screen").classList.add("show");
}