Denkmal-Quiz/index.html at main · codeforcologne/Denkmal-Quiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<!-- Diese Webseite wurde teilweise mit Hilfe von KI erzeugt, und sorgfältig geprüft. -->
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="description" content="Quiz zu Kölner Denkmälern" />
	<meta name="author" content="OK Lab Köln">
    <title>Denkmal Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <div class="brand">
          <span class="brand-mark"><img src="images/CodeFor-koeln.svg" alt="Code for Köln Logo" /></span>
          <div>

            <h1>Kölner Denkmal Quiz</h1>
          </div>
        </div>
        <div class="score-pill" aria-live="polite"><span id="score">0</span> / 5</div>
      </header>

      <main>
        <section id="loading-screen" class="screen visible" aria-live="polite">
          <div class="loading-card">
            <div class="spinner" aria-hidden="true"></div>
            <h2>Denkmäler werden geladen</h2>
            <p>Ein paar Augenblicke, die Spielrunde wird vorbereitet.</p>
          </div>
        </section>

        <section id="quiz-screen" class="screen" aria-live="polite">
          <div class="progress" aria-label="Fortschritt der Quizrunde">
            <div id="progress-bar" class="progress-bar"></div>
          </div>

          <div class="question-meta">
            <span id="round-label" class="round-label">Runde 1</span>
            <span id="category-label" class="category-label"></span>
          </div>

          <div class="question-card">
            <div class="question-layout">
              <div class="photo-column">
                <div class="photo-frame">
                  <img id="photo" alt="" src="" />
                </div>
                <p class="photo-credit" id="photo-credit" hidden>
                  <a id="photo-credit-link" href="#" target="_blank" rel="noopener noreferrer"></a>
                </p>
              </div>

              <div class="answer-panel">
                <h2>Welches Denkmal ist auf dem Foto zu sehen?</h2>
                <div id="answers" class="answers" role="list"></div>
              </div>
            </div>
          </div>

          <div id="feedback" class="feedback" aria-live="assertive" hidden></div>
          <button id="next-button" class="primary-button" type="button" hidden>Weiter</button>
        </section>

        <section id="result-screen" class="screen" aria-labelledby="result-title">
          <div class="result-card">
            <div class="result-badge">Ergebnis</div>
            <h2 id="result-title">Quiz beendet</h2>
            <p id="result-summary" class="result-summary"></p>
            <div class="result-score" aria-live="polite">
              <span id="final-score">0</span>
              <span>von 5 Punkten</span>
            </div>
            <button id="restart-button" class="primary-button" type="button">Neues Quiz</button>
          </div>
        </section>

        <section id="error-screen" class="screen" aria-live="assertive">
          <div class="error-card">
            <h2>Die Daten konnten nicht geladen werden</h2>
            <p>Bitte überprüfe den Dateizugriff und lade die Seite neu.</p>
            <button id="retry-button" class="primary-button" type="button">Erneut versuchen</button>
          </div>
        </section>
      </main>
    </div>

    <script src="app.js"></script>
  </body>
</html>