quizify/templates/quiz_single.html

{% extends "quiz_base.html" %}
{% block quiz_content %}
  <div style="text-align:center; margin-bottom: 10px;">
    <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
    <span id="scoreInfo" style="margin-left:20px;">
      {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
      ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
    </span>
  </div>
  <div style="text-align:center; margin-bottom: 20px;">
    <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
  </div>
  <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
  <input type="hidden" id="device_id" value="">
  <div class="game-modes" style="margin-bottom:20px;">
    <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
    <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
    <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
  </div>
  <div class="game-options" style="margin-bottom:20px;">
    <label>{{ translations['play_duration'] }}:
      <select id="playDuration" onchange="onPlayDurationChange()">
        <option value="10">10s</option>
        <option value="15">15s</option>
        <option value="30">30s</option>
        <option value="0" selected>{{ translations['unlimited'] }}</option>
        <option value="custom">{{ translations['custom'] }}</option>
      </select>
      <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
      <span id="customDurationLabel" style="display:none;">s</span>
    </label>
    <label style="margin-left:20px;">{{ translations['start_position'] }}:
      <select id="startPosition" onchange="setOption('startPosition', this.value)">
        <option value="start" selected>{{ translations['start'] }}</option>
        <option value="random">{{ translations['random'] }}</option>
      </select>
    </label>
  </div>
  <div class="controls" style="text-align: center; margin-bottom:20px;">
    <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
  </div>
  <div style="text-align: center; margin-top: 10px;">
    <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
    <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
    <div id="searchResults" class="search-results"></div>
    <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
    <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
  </div>
  <div class="hint-container" style="color:#bdbdbd;">
    {% if game_mode == 'artist' %}
      <p>{{ translations['tip_artist'] }}</p>
    {% elif game_mode == 'title' %}
      <p>{{ translations['tip_title'] }}</p>
    {% elif game_mode == 'year' %}
      <p>{{ translations['tip_year'] }}</p>
    {% endif %}
  </div>
{% endblock %}
{% block extra_body %}
<script>
  // Entferne Multiplayer-Daten, falls vorhanden
  localStorage.removeItem('quizify_multiplayer_names');
  localStorage.removeItem('quizify_multiplayer_scores');
  localStorage.removeItem('quizify_multiplayer_current');
</script>
<!-- Hier dein gesamtes JS aus quiz.html, aber OHNE Multiplayer-Logik -->
{% endblock %}