Simon/quizify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: templates/quiz.html

Browse Source
This commit is contained in:
SimolZimol
2025-06-01 19:05:02 +02:00
parent b2c9d818ec
commit 54adafe5b4
1 changed files with 65 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
templates/quiz.html
View File

@@ -356,79 +356,71 @@ function replayDuration() {
</script> </script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0;">
<div style="text-align:center; margin-bottom: 10px;"> <div class="quiz-container" style="
<span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span> background: rgba(25, 20, 20, 0.92);
<span id="scoreInfo" style="margin-left:20px;"> padding: 40px 30px 30px 30px;
{{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }} border-radius: 22px;
({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }}) box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
</span> max-width: 500px;
</div> margin: 50px auto 30px auto;
<div style="text-align:center; margin-bottom: 20px;"> color: #fff;
<a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a> ">
</div> <div style="text-align:center; margin-bottom: 10px;">
<h2 id="question-text">{{ translations['question_artist'] }}</h2> <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
<span id="scoreInfo" style="margin-left:20px;">
<!-- Verstecktes Feld für device_id --> {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
<input type="hidden" id="device_id" value=""> ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
</span>
<!-- Spielmodi --> </div>
<div class="game-modes"> <div style="text-align:center; margin-bottom: 20px;">
<button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button> <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
<button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button> </div>
<button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button> <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
</div> <input type="hidden" id="device_id" value="">
<div class="game-modes" style="margin-bottom:20px;">
<!-- Optionen für das Spiel --> <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
<div class="game-options"> <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
<label>{{ translations['play_duration'] }}: <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
<select id="playDuration" onchange="onPlayDurationChange()"> </div>
<option value="10">10s</option> <div class="game-options" style="margin-bottom:20px;">
<option value="15">15s</option> <label>{{ translations['play_duration'] }}:
<option value="30">30s</option> <select id="playDuration" onchange="onPlayDurationChange()">
<option value="0" selected>{{ translations['unlimited'] }}</option> <option value="10">10s</option>
<option value="custom">Custom</option> <option value="15">15s</option>
</select> <option value="30">30s</option>
<input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)"> <option value="0" selected>{{ translations['unlimited'] }}</option>
<span id="customDurationLabel" style="display:none;">s</span> <option value="custom">Custom</option>
</label> </select>
<label style="margin-left:20px;">{{ translations['start_position'] }}: <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
<select id="startPosition" onchange="setOption('startPosition', this.value)"> <span id="customDurationLabel" style="display:none;">s</span>
<option value="start" selected>{{ translations['start'] }}</option> </label>
<option value="random">{{ translations['random'] }}</option> <label style="margin-left:20px;">{{ translations['start_position'] }}:
</select> <select id="startPosition" onchange="setOption('startPosition', this.value)">
</label> <option value="start" selected>{{ translations['start'] }}</option>
</div> <option value="random">{{ translations['random'] }}</option>
</select>
<!-- "Nochmal X Sekunden"-Button --> </label>
<div class="controls" style="text-align: center;"> </div>
<button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button> <div class="controls" style="text-align: center; margin-bottom:20px;">
</div> <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
</div>
<!-- Antwort-Eingabe --> <div style="text-align: center; margin-top: 10px;">
<div style="text-align: center; margin-top: 30px;"> <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
<input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()"> <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
<button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button> <div id="searchResults" class="search-results"></div>
<div id="resultContainer" class="result-container"></div>
<!-- Suchergebnisse --> <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
<div id="searchResults" class="search-results"></div> </div>
<div class="hint-container" style="color:#bdbdbd;">
<!-- Ergebnis-Anzeige --> {% if game_mode == 'artist' %}
<div id="resultContainer" class="result-container"></div> <p>{{ translations['tip_artist'] }}</p>
{% elif game_mode == 'title' %}
<!-- Nächste Frage Button, wird nach Antwort angezeigt --> <p>{{ translations['tip_title'] }}</p>
<a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a> {% elif game_mode == 'year' %}
</div> <p>{{ translations['tip_year'] }}</p>
{% endif %}
<!-- Hilfe-Text je nach Modus --> </div>
<div class="hint-container">
{% 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> </div>
</body> </body>
</html> </html>