Feature: 40 bilingual questions, random 10 game run, difficulty levels, and full i18n support
This commit is contained in:
kobold-ai
+166
-22
@@ -1,9 +1,72 @@
|
||||
let currentSessionId = null;
|
||||
let currentQuestionNumber = 1;
|
||||
let totalQuestions = 15;
|
||||
let totalQuestions = 10;
|
||||
let currentScore = 0;
|
||||
let attemptsUsed = 0;
|
||||
const maxAttempts = 3;
|
||||
let selectedDifficulty = "all";
|
||||
let lastQuestionData = null;
|
||||
|
||||
const UI_TEXT = {
|
||||
de: {
|
||||
pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
|
||||
pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
|
||||
envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||
introDesc: "Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.<br>Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?",
|
||||
diffLabel: "Schwierigkeitsgrad wählen:",
|
||||
diffAll: "Alle gemischt",
|
||||
diffEasy: "Leicht",
|
||||
diffMed: "Mittel",
|
||||
diffHard: "Schwer",
|
||||
startBtn: "📜 Siegel brechen & Brief öffnen",
|
||||
startBtnCasting: "✨ Zauber wird gewirkt...",
|
||||
pointsLabel: "🏆 Hauspunkte",
|
||||
questionLabel: "Frage",
|
||||
ofLabel: "von",
|
||||
attemptLabel: "Versuch",
|
||||
checkBtn: "✨ Zauber prüfen",
|
||||
hintBtn: "💡 Zaubertipp",
|
||||
hintHeading: "📜 Notiz aus der verbotenen Abteilung:",
|
||||
placeholder: "Deine Antwort hier eingeben...",
|
||||
noHint: "Kein Tipp vorhanden.",
|
||||
hintFailed: "Tipp konnte nicht geladen werden.",
|
||||
correctFeedback: "✨ Richtig! 1 Hauspunkt für dein Haus! ✨",
|
||||
wrongFeedback: "Leider falsch! Noch {attempts} Versuch(e).",
|
||||
exhaustedWrong: "Leider nicht richtig (3 Fehlversuche).",
|
||||
solutionLabel: "Richtige Lösung:",
|
||||
startError: "Fehler beim Starten des Quiz: ",
|
||||
networkError: "Netzwerkfehler: "
|
||||
},
|
||||
en: {
|
||||
pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
|
||||
pageSubtitle: "10 tricky wizarding world puzzles await you",
|
||||
envelopeLetter: "Hogwarts School of Witchcraft and Wizardry",
|
||||
introDesc: "An enchanted letter from Hogwarts is floating in the air before you.<br>Are you ready to take the exams and secure House Points?",
|
||||
diffLabel: "Choose difficulty level:",
|
||||
diffAll: "All mixed",
|
||||
diffEasy: "Easy",
|
||||
diffMed: "Medium",
|
||||
diffHard: "Hard",
|
||||
startBtn: "📜 Break Seal & Open Letter",
|
||||
startBtnCasting: "✨ Casting spell...",
|
||||
pointsLabel: "🏆 House Points",
|
||||
questionLabel: "Question",
|
||||
ofLabel: "of",
|
||||
attemptLabel: "Attempt",
|
||||
checkBtn: "✨ Check Spell",
|
||||
hintBtn: "💡 Magic Hint",
|
||||
hintHeading: "📜 Note from the Restricted Section:",
|
||||
placeholder: "Type your answer here...",
|
||||
noHint: "No hint available.",
|
||||
hintFailed: "Could not load hint.",
|
||||
correctFeedback: "✨ Correct! 1 House Point for your House! ✨",
|
||||
wrongFeedback: "Incorrect! {attempts} attempt(s) remaining.",
|
||||
exhaustedWrong: "Unfortunately incorrect (3 failed attempts).",
|
||||
solutionLabel: "Correct solution:",
|
||||
startError: "Error starting quiz: ",
|
||||
networkError: "Network error: "
|
||||
}
|
||||
};
|
||||
|
||||
// Web Audio API Sound Generator for magic chimes and buzzers
|
||||
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
@@ -43,12 +106,63 @@ function playSound(type) {
|
||||
}
|
||||
}
|
||||
|
||||
function selectDifficulty(diff) {
|
||||
selectedDifficulty = diff;
|
||||
document.querySelectorAll(".diff-chip").forEach(chip => {
|
||||
chip.classList.toggle("active", chip.getAttribute("data-diff") === diff);
|
||||
});
|
||||
}
|
||||
|
||||
function onLanguageChange(lang) {
|
||||
applyQuizTranslations(lang);
|
||||
}
|
||||
|
||||
function applyQuizTranslations(lang) {
|
||||
const t = UI_TEXT[lang] || UI_TEXT.de;
|
||||
const pageTitle = document.getElementById("pageTitle");
|
||||
const pageSubtitle = document.getElementById("pageSubtitle");
|
||||
const envelopeLetter = document.getElementById("envelopeLetter");
|
||||
const introDesc = document.getElementById("introDesc");
|
||||
const diffLabel = document.getElementById("diffLabel");
|
||||
const diffAllText = document.getElementById("diffAllText");
|
||||
const diffEasyText = document.getElementById("diffEasyText");
|
||||
const diffMedText = document.getElementById("diffMedText");
|
||||
const diffHardText = document.getElementById("diffHardText");
|
||||
const startBtn = document.getElementById("startBtn");
|
||||
const checkBtn = document.getElementById("checkBtn");
|
||||
const hintBtn = document.getElementById("hintBtn");
|
||||
const hintBtnMC = document.getElementById("hintBtnMC");
|
||||
const hintHeading = document.getElementById("hintHeading");
|
||||
const answerInput = document.getElementById("answerInput");
|
||||
|
||||
if (pageTitle) pageTitle.innerText = t.pageTitle;
|
||||
if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
|
||||
if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter;
|
||||
if (introDesc) introDesc.innerHTML = t.introDesc;
|
||||
if (diffLabel) diffLabel.innerText = t.diffLabel;
|
||||
if (diffAllText) diffAllText.innerText = t.diffAll;
|
||||
if (diffEasyText) diffEasyText.innerText = t.diffEasy;
|
||||
if (diffMedText) diffMedText.innerText = t.diffMed;
|
||||
if (diffHardText) diffHardText.innerText = t.diffHard;
|
||||
if (startBtn && !startBtn.disabled) startBtn.innerText = t.startBtn;
|
||||
if (checkBtn) checkBtn.innerText = t.checkBtn;
|
||||
if (hintBtn) hintBtn.innerText = t.hintBtn;
|
||||
if (hintBtnMC) hintBtnMC.innerText = t.hintBtn;
|
||||
if (hintHeading) hintHeading.innerText = t.hintHeading;
|
||||
if (answerInput) answerInput.placeholder = t.placeholder;
|
||||
|
||||
if (lastQuestionData) {
|
||||
renderQuestion(lastQuestionData);
|
||||
}
|
||||
}
|
||||
|
||||
async function startGame() {
|
||||
const envelope = document.getElementById("envelope");
|
||||
const startBtn = document.getElementById("startBtn");
|
||||
const t = UI_TEXT[currentLang] || UI_TEXT.de;
|
||||
|
||||
startBtn.disabled = true;
|
||||
startBtn.innerText = "✨ Zauber wird gewirkt...";
|
||||
startBtn.innerText = t.startBtnCasting;
|
||||
envelope.classList.add("envelope-opened");
|
||||
|
||||
// Start background music if enabled or first click
|
||||
@@ -59,7 +173,7 @@ async function startGame() {
|
||||
const text = document.getElementById("audioText");
|
||||
if (icon && text) {
|
||||
icon.innerText = "🔊";
|
||||
text.innerText = "Musik: An";
|
||||
text.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||
}
|
||||
localStorage.setItem("bgm_enabled", "true");
|
||||
}).catch(() => {});
|
||||
@@ -68,11 +182,15 @@ async function startGame() {
|
||||
try {
|
||||
const res = await fetch("/api/game/start", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" }
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
lang: currentLang,
|
||||
difficulty: selectedDifficulty
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Konnte Spiel nicht starten.");
|
||||
throw new Error(currentLang === "en" ? "Could not start game session." : "Konnte Spiel nicht starten.");
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
@@ -89,18 +207,39 @@ async function startGame() {
|
||||
}, 1100);
|
||||
|
||||
} catch (err) {
|
||||
alert("Fehler beim Starten des Quiz: " + err.message);
|
||||
alert(t.startError + err.message);
|
||||
startBtn.disabled = false;
|
||||
startBtn.innerText = "📜 Siegel brechen & Brief öffnen";
|
||||
startBtn.innerText = t.startBtn;
|
||||
envelope.classList.remove("envelope-opened");
|
||||
}
|
||||
}
|
||||
|
||||
function renderQuestion(qData) {
|
||||
document.getElementById("questionCounter").innerText = `Frage ${qData.question_number} von ${totalQuestions}`;
|
||||
document.getElementById("pointsCounter").innerText = `🏆 Hauspunkte: ${currentScore}`;
|
||||
lastQuestionData = qData;
|
||||
const t = UI_TEXT[currentLang] || UI_TEXT.de;
|
||||
|
||||
document.getElementById("questionCounter").innerText = `${t.questionLabel} ${qData.question_number} ${t.ofLabel} ${totalQuestions}`;
|
||||
document.getElementById("pointsCounter").innerText = `${t.pointsLabel}: ${currentScore}`;
|
||||
document.getElementById("badgeCategory").innerText = `⚡ ${qData.category.replace("_", " ").toUpperCase()}`;
|
||||
document.getElementById("attemptBadge").innerText = `Versuch ${attemptsUsed + 1} von ${maxAttempts}`;
|
||||
|
||||
// Difficulty badge
|
||||
const badgeDiff = document.getElementById("badgeDifficulty");
|
||||
if (badgeDiff) {
|
||||
const diff = qData.difficulty || "medium";
|
||||
badgeDiff.className = `badge badge-diff badge-diff-${diff}`;
|
||||
let diffText = t.diffMed;
|
||||
let diffIcon = "🟡";
|
||||
if (diff === "easy") {
|
||||
diffText = t.diffEasy;
|
||||
diffIcon = "🟢";
|
||||
} else if (diff === "hard") {
|
||||
diffText = t.diffHard;
|
||||
diffIcon = "🔴";
|
||||
}
|
||||
badgeDiff.innerText = `${diffIcon} ${diffText}`;
|
||||
}
|
||||
|
||||
document.getElementById("attemptBadge").innerText = `${t.attemptLabel} ${attemptsUsed + 1} ${t.ofLabel} ${maxAttempts}`;
|
||||
document.getElementById("frageText").innerText = qData.question;
|
||||
|
||||
const textGroup = document.getElementById("textAnswerGroup");
|
||||
@@ -129,6 +268,7 @@ function renderQuestion(qData) {
|
||||
choiceGroup.classList.add("hidden");
|
||||
textGroup.classList.remove("hidden");
|
||||
input.value = "";
|
||||
input.placeholder = t.placeholder;
|
||||
input.disabled = false;
|
||||
document.getElementById("checkBtn").disabled = false;
|
||||
input.focus();
|
||||
@@ -160,6 +300,8 @@ function checkAnswer() {
|
||||
async function submitAnswer(answer, clickedBtn = null) {
|
||||
const checkBtn = document.getElementById("checkBtn");
|
||||
const input = document.getElementById("answerInput");
|
||||
const t = UI_TEXT[currentLang] || UI_TEXT.de;
|
||||
|
||||
if (checkBtn) checkBtn.disabled = true;
|
||||
if (input) input.disabled = true;
|
||||
|
||||
@@ -181,12 +323,12 @@ async function submitAnswer(answer, clickedBtn = null) {
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Fehler bei der Antwortprüfung.");
|
||||
throw new Error(currentLang === "en" ? "Answer check failed." : "Fehler bei der Antwortprüfung.");
|
||||
}
|
||||
|
||||
const result = await res.json();
|
||||
currentScore = result.score;
|
||||
document.getElementById("pointsCounter").innerText = `🏆 Hauspunkte: ${currentScore}`;
|
||||
document.getElementById("pointsCounter").innerText = `${t.pointsLabel}: ${currentScore}`;
|
||||
|
||||
const frageBox = document.getElementById("frageBox");
|
||||
const feedbackBox = document.getElementById("feedbackBox");
|
||||
@@ -199,7 +341,7 @@ async function submitAnswer(answer, clickedBtn = null) {
|
||||
clickedBtn.classList.add("choice-correct");
|
||||
}
|
||||
frageBox.classList.add("sparkle-effect");
|
||||
feedbackBox.innerHTML = `<span class="feedback-correct">✨ Richtig! 1 Hauspunkt für dein Haus! ✨</span>`;
|
||||
feedbackBox.innerHTML = `<span class="feedback-correct">${t.correctFeedback}</span>`;
|
||||
|
||||
setTimeout(() => {
|
||||
frageBox.classList.remove("sparkle-effect");
|
||||
@@ -223,13 +365,13 @@ async function submitAnswer(answer, clickedBtn = null) {
|
||||
setTimeout(() => frageBox.classList.remove("shake-effect"), 500);
|
||||
|
||||
attemptsUsed = result.attempts_used;
|
||||
document.getElementById("attemptBadge").innerText = `Versuch ${Math.min(attemptsUsed + 1, maxAttempts)} von ${maxAttempts}`;
|
||||
document.getElementById("attemptBadge").innerText = `${t.attemptLabel} ${Math.min(attemptsUsed + 1, maxAttempts)} ${t.ofLabel} ${maxAttempts}`;
|
||||
|
||||
if (result.attempts_left === 0) {
|
||||
// Exhausted all attempts
|
||||
feedbackBox.innerHTML = `
|
||||
<div class="feedback-wrong">Leider nicht richtig (3 Fehlversuche).</div>
|
||||
<div class="feedback-revealed">Richtige Lösung: <strong>${result.revealed_answer}</strong></div>
|
||||
<div class="feedback-wrong">${t.exhaustedWrong}</div>
|
||||
<div class="feedback-revealed">${t.solutionLabel} <strong>${result.revealed_answer}</strong></div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -244,7 +386,8 @@ async function submitAnswer(answer, clickedBtn = null) {
|
||||
|
||||
} else {
|
||||
// Still attempts remaining
|
||||
feedbackBox.innerHTML = `<span class="feedback-wrong">Leider falsch! Noch ${result.attempts_left} Versuch(e).</span>`;
|
||||
const msg = t.wrongFeedback.replace("{attempts}", result.attempts_left);
|
||||
feedbackBox.innerHTML = `<span class="feedback-wrong">${msg}</span>`;
|
||||
if (checkBtn) checkBtn.disabled = false;
|
||||
if (input) {
|
||||
input.disabled = false;
|
||||
@@ -256,7 +399,7 @@ async function submitAnswer(answer, clickedBtn = null) {
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
alert("Netzwerkfehler: " + err.message);
|
||||
alert(t.networkError + err.message);
|
||||
if (checkBtn) checkBtn.disabled = false;
|
||||
if (input) input.disabled = false;
|
||||
choiceBtns.forEach(b => b.disabled = false);
|
||||
@@ -267,22 +410,22 @@ async function requestHint() {
|
||||
if (!currentSessionId) return;
|
||||
const hintBox = document.getElementById("hintBox");
|
||||
const hintText = document.getElementById("hintText");
|
||||
const t = UI_TEXT[currentLang] || UI_TEXT.de;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/game/hint?session_id=${encodeURIComponent(currentSessionId)}`);
|
||||
const data = await res.json();
|
||||
hintText.innerText = data.hint || "Kein Tipp vorhanden.";
|
||||
hintText.innerText = data.hint || t.noHint;
|
||||
hintBox.classList.remove("hidden");
|
||||
} catch (err) {
|
||||
hintText.innerText = "Tipp konnte nicht geladen werden.";
|
||||
hintText.innerText = t.hintFailed;
|
||||
hintBox.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function finishGame() {
|
||||
// 100% progress
|
||||
document.getElementById("progressBar").style.width = "100%";
|
||||
window.location.href = `/finale?score=${currentScore}&total=${totalQuestions}`;
|
||||
window.location.href = `/finale?score=${currentScore}&total=${totalQuestions}&lang=${currentLang}`;
|
||||
}
|
||||
|
||||
// Enter key to submit
|
||||
@@ -296,4 +439,5 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
applyQuizTranslations(currentLang);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user