app.js

/*  Dieser Code wurde teilweise mit Hilfe von KI erzeugt, und sorgfältig geprüft. */
const quizLength = 5;
const state = {
  monuments: [],
  questions: [],
  currentIndex: 0,
  score: 0,
  answered: false,
};

const screens = {
  loading: document.querySelector("#loading-screen"),
  quiz: document.querySelector("#quiz-screen"),
  result: document.querySelector("#result-screen"),
  error: document.querySelector("#error-screen"),
};

const elements = {
  score: document.querySelector("#score"),
  progress: document.querySelector("#progress-bar"),
  round: document.querySelector("#round-label"),
  category: document.querySelector("#category-label"),
  photo: document.querySelector("#photo"),
  credit: document.querySelector("#photo-credit"),
  creditLink: document.querySelector("#photo-credit-link"),
  answers: document.querySelector("#answers"),
  feedback: document.querySelector("#feedback"),
  next: document.querySelector("#next-button"),
  resultSummary: document.querySelector("#result-summary"),
  finalScore: document.querySelector("#final-score"),
  retry: document.querySelector("#retry-button"),
  restart: document.querySelector("#restart-button"),
};

const normalize = (value) => value
  .toLowerCase()
  .normalize("NFD")
  .replace(/[\u0300-\u036f]/g, "")
  .replace(/[^a-z0-9]+/g, " ")
  .trim();

const levenshtein = (left, right) => {
  if (left === right) return 0;
  if (left.length === 0) return right.length;
  if (right.length === 0) return left.length;

  const previous = Array.from({ length: right.length + 1 }, (_, index) => index);

  for (let i = 0; i < left.length; i += 1) {
    const current = [i + 1];
    for (let j = 0; j < right.length; j += 1) {
      const cost = left[i] === right[j] ? 0 : 1;
      current.push(Math.min(
        current[j] + 1,
        previous[j + 1] + 1,
        previous[j] + cost,
      ));
    }
    previous.splice(0, previous.length, ...current);
  }

  return previous[previous.length - 1];
};

const calculateSimilarity = (candidate, correct) => {
  const candidateText = normalize(candidate);
  const correctText = normalize(correct);
  const maxLength = Math.max(candidateText.length, correctText.length, 1);
  const distance = levenshtein(candidateText, correctText);
  return 1 - (distance / maxLength);
};

const shuffle = (items) => [...items].sort(() => Math.random() - 0.5);

const getQuestionOptions = (correctMonument, allMonuments) => {
  const candidates = allMonuments
    .filter((monument) => monument.name !== correctMonument.name)
    .map((monument) => ({
      ...monument,
      similarity: calculateSimilarity(monument.name, correctMonument.name),
      sameCategory: monument.category === correctMonument.category,
    }))
    .filter((monument) => monument.similarity > 0.15 || monument.sameCategory)
    .sort((left, right) => {
      const categoryDifference = Number(right.sameCategory) - Number(left.sameCategory);
      if (categoryDifference !== 0) return categoryDifference;
      return right.similarity - left.similarity;
    })
    .slice(0, 12);

  if (candidates.length < 3) {
    throw new Error("Nicht genug ähnliche Denkmäler für die Antwortmöglichkeiten vorhanden.");
  }

  const options = shuffle([
    correctMonument,
    ...candidates.slice(0, 3),
  ]);

  return shuffle(options.map((monument) => monument.name));
};

const showScreen = (name) => {
  Object.entries(screens).forEach(([key, screen]) => {
    screen.classList.toggle("visible", key === name);
  });
};

const showImage = (url) => { 

  const largeUrl = getLargeImageUrl(url);
  elements.photo.onerror = () => {
    // Größere Version nicht verfügbar (z. B. Original kleiner): auf die Original-URL zurückfallen
    elements.photo.onerror = null;
    if (elements.photo.src !== url) elements.photo.src = url;
  };
  elements.photo.src = largeUrl;
  elements.photo.alt = "Foto des zu ratenden Denkmals";
  elements.photo.classList.remove("is-hidden");  
};

const isHttpUrl = (value) => /^https?:\/\//i.test(value || "");

const thumbWidth = 1280;

// Wikimedia-Thumbnails (z. B. .../thumb/e/e3/Datei.jpg/250px-Datei.jpg?utm_source=...)
// auf eine größere Breite umschreiben; alle anderen URLs bleiben unverändert.
const getLargeImageUrl = (url) => {
  if (!url) return url;
  try {
    const parsed = new URL(url);
    const isThumbHost = parsed.hostname === "thumb.wikimedia.org"
      || (parsed.hostname === "upload.wikimedia.org" && parsed.pathname.includes("/thumb/"));
    if (!isThumbHost) return url;

    const match = parsed.pathname.match(/^(.*\/)(\d+)px-([^/]+)$/);
    if (!match) return url;

    parsed.hostname = "upload.wikimedia.org";
    parsed.pathname = `${match[1]}${thumbWidth}px-${match[3]}`;
    parsed.search = "";
    return parsed.toString();
  } catch {
    return url;
  }
};

const showCredit = (text, url) => {
  if (!text) {
    elements.credit.hidden = true;
    return;
  }

  elements.creditLink.textContent = text;
  if (isHttpUrl(url)) {
    elements.creditLink.href = url;
    elements.creditLink.title = "Bildquelle in neuem Fenster öffnen";
    elements.creditLink.removeAttribute("aria-disabled");
  } else {
    elements.creditLink.removeAttribute("href");
    elements.creditLink.removeAttribute("title");
    elements.creditLink.setAttribute("aria-disabled", "true");
  }
  elements.credit.hidden = false;
};

const openCreditWindow = (event) => {
  const url = elements.creditLink.getAttribute("href");
  if (!isHttpUrl(url)) {
    event.preventDefault();
    return;
  }
  // Separates Fenster (Popup); wird es blockiert, greift der normale Link (neuer Tab)
  const popup = window.open(url, "_blank", "noopener,noreferrer,width=1100,height=800");
  if (popup) event.preventDefault();
};

const buildQuestion = (monument, allMonuments) => {
  const options = getQuestionOptions(monument, allMonuments);
  return {
    ...monument,
    options,
  };
};

const createQuestions = (allMonuments) => {
  const shuffled = shuffle(allMonuments);
  return shuffled.slice(0, quizLength).map((monument) => buildQuestion(monument, allMonuments));
};

const updateScore = () => {
  elements.score.textContent = state.score;
};

const renderQuestion = () => {
  const question = state.questions[state.currentIndex];
  if (!question) return;

  state.answered = false;
  elements.progress.style.width = `${((state.currentIndex + 1) / quizLength) * 100}%`;
  elements.round.textContent = `Runde ${state.currentIndex + 1}`;
  elements.category.textContent = question.category || "Unbekannte Kategorie";
  showImage(question.photoUrl);
  showCredit(question.photoSource, question.photoSourceUrl);
  window.scrollTo({ top: 0, behavior: "auto" });
  elements.feedback.hidden = true;
  elements.feedback.className = "feedback";
  elements.next.hidden = true;

  elements.answers.replaceChildren();
  question.options.forEach((option, index) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "answer-button";
    button.textContent = option;
    button.setAttribute("role", "listitem");
    button.setAttribute("aria-label", `Antwort ${index + 1}: ${option}`);
    button.dataset.answer = option;

    button.addEventListener("click", () => handleAnswer(button, option, question));
    elements.answers.append(button);
  });
};

const handleAnswer = (button, selectedAnswer, question) => {
  if (state.answered) return;
  state.answered = true;

  const correct = selectedAnswer === question.name;
  const buttons = [...elements.answers.querySelectorAll(".answer-button")];
  buttons.forEach((answerButton) => {
    const isCorrect = answerButton.dataset.answer === question.name;
    answerButton.disabled = true;
    answerButton.classList.toggle("correct", isCorrect);
    answerButton.classList.toggle("wrong", answerButton === button && !correct);
  });

  elements.feedback.hidden = false;
  elements.feedback.classList.add(correct ? "success" : "error");
  elements.feedback.textContent = correct
    ? `Richtig! ${question.name} ist die korrekte Antwort.`
    : `Leider falsch. Die richtige Antwort lautet: ${question.name}.`;

  if (correct) state.score += 1;
  updateScore();
  elements.next.hidden = false;
  requestAnimationFrame(() => {
    elements.next.scrollIntoView({ behavior: "smooth", block: "nearest" });
  });
};

const advanceQuiz = () => {
  state.currentIndex += 1;
  if (state.currentIndex < quizLength) {
    renderQuestion();
  } else {
    showResult();
  }
};

const showResult = () => {
  elements.resultSummary.textContent = state.score === quizLength
    ? "Perfekt! Du hast alle fünf Denkmäler erkannt."
    : state.score >= 3
      ? "Gute Arbeit! Du hast die meisten Denkmäler richtig erkannt."
      : "Nicht ganz. Ein weiterer Versuch lohnt sich!";

  elements.finalScore.textContent = state.score;
  showScreen("result");
};

const startQuiz = () => {
  state.currentIndex = 0;
  state.score = 0;
  updateScore();
  elements.progress.style.width = "20%";
  state.questions = createQuestions(state.monuments);
  renderQuestion();
  showScreen("quiz");
};

const loadData = async () => {
  try {
    const response = await fetch("data/denkmaeler.geojson");
    if (!response.ok) throw new Error("GeoJSON konnte nicht geladen werden.");

    const data = await response.json();
    state.monuments = (data.features || [])
      .map((feature) => {
        const properties = feature.properties || {};
        return {
          name: properties.kurzbezeic || "Unbekanntes Denkmal",
          category: properties.kategorie || "Allgemein",
          photoUrl: properties.fotourl || "",
          photoSource: properties.fotosource || "",
          photoSourceUrl: properties.fotosour_1 || "",
        };
      })
      .filter((monument) => monument.name && monument.name !== "Unbekanntes Denkmal");

    if (state.monuments.length < quizLength) {
      throw new Error("Zu wenige Denkmäler für ein vollständiges Quiz vorhanden.");
    }

    startQuiz();
  } catch (error) {
    console.error(error);
    showScreen("error");
  }
};

elements.creditLink.addEventListener("click", openCreditWindow);
elements.next.addEventListener("click", advanceQuiz);
elements.restart.addEventListener("click", startQuiz);

elements.retry.addEventListener("click", () => {
  showScreen("loading");
  loadData();
});

showScreen("loading");
loadData();