Spaces:
Sleeping
Sleeping
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Turing Test</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script> | |
| let firstGuess = null; | |
| let gameOver = false; | |
| function renderGameState(state) { | |
| ['1','2','3'].forEach(function(screenNum) { | |
| let html = ''; | |
| const history = state.history[screenNum]; | |
| if (history && history.length > 0) { | |
| const reversed = [...history].reverse(); | |
| reversed.forEach(function(round, i) { | |
| const isLatest = i === 0; | |
| html += ` | |
| <div class="history-round ${isLatest ? 'history-round--latest' : ''}"> | |
| <p class="history-question">Vraag: ${round.question}</p> | |
| <p class="history-answer">${round.answer}</p> | |
| </div>`; | |
| }); | |
| } else { | |
| html = '<p class="response-empty">Nog geen reacties.</p>'; | |
| } | |
| $('#screen-' + screenNum + '-current').html(html); | |
| }); | |
| $('#questions-left').text(state.questions_left); | |
| $('.compose-input').prop('disabled', !state.can_ask); | |
| $('.compose-send').prop('disabled', !state.can_ask); | |
| firstGuess = state.first_guess; | |
| gameOver = state.game_over; | |
| ['1','2','3'].forEach(function(s) { | |
| const btn = $('#ai-btn-' + s); | |
| if (state.game_over) { | |
| btn.prop('disabled', true); | |
| } else if (state.first_guess === s) { | |
| btn.prop('disabled', true).text('✓ Gekozen als AI'); | |
| } else if (state.first_guess !== null) { | |
| btn.prop('disabled', false).text('Dit is de AI! 🤖'); | |
| } else { | |
| btn.prop('disabled', !state.can_guess).text('Dit is de AI! 🤖'); | |
| } | |
| }); | |
| if (state.pending) { | |
| $('#pending-banner').removeClass('hidden'); | |
| } else { | |
| $('#pending-banner').addClass('hidden'); | |
| } | |
| if (state.pending) { | |
| showRobot(); | |
| } else { | |
| hideRobot(); | |
| } | |
| } | |
| function fetchGameState() { | |
| $.getJSON('/get_game_state', function(state) { | |
| renderGameState(state); | |
| }); | |
| } | |
| function showResult(data) { | |
| let msg = ''; | |
| if (data.result === 'victory') { | |
| msg = '🎉 Gewonnen! Je hebt beide AI\'s correct gevonden!'; | |
| } else if (data.result === 'partial') { | |
| msg = `Je hebt één AI goed geraden! Scherm ${data.human_screen} was de echte mens.`; | |
| } else { | |
| msg = `Helaas! Je hebt geen AI correct geraden. Scherm ${data.human_screen} was de echte mens.`; | |
| } | |
| $('#result-banner') | |
| .removeClass('hidden result-banner--victory result-banner--partial result-banner--defeat') | |
| .addClass('result-banner--' + data.result) | |
| .text(msg); | |
| $('#game-actions').removeClass('hidden'); | |
| ['1','2','3'].forEach(function(s) { | |
| $('#ai-btn-' + s).prop('disabled', true); | |
| }); | |
| } | |
| // ── helpers defined at global scope ────────────────────────────── | |
| function switchTab(tab) { | |
| document.getElementById('hulp-vragen').classList.toggle('hulp-section--hidden', tab !== 'vragen'); | |
| document.getElementById('hulp-onderwerpen').classList.toggle('hulp-section--hidden', tab !== 'onderwerpen'); | |
| document.querySelectorAll('.hulp-tab').forEach(function(t, i) { | |
| t.classList.toggle('hulp-tab--active', | |
| (tab === 'onderwerpen' && i === 0) || (tab === 'vragen' && i === 1)); | |
| }); | |
| } | |
| function fillQuestion(btn) { | |
| document.querySelector('textarea[name="message"]').value = btn.textContent.trim(); | |
| document.getElementById('hulp-panel').classList.add('hulp-panel--hidden'); | |
| } | |
| function showRobot() { | |
| document.getElementById('walking-robot').classList.remove('walking-robot--hidden'); | |
| } | |
| function hideRobot() { | |
| document.getElementById('walking-robot').classList.add('walking-robot--hidden'); | |
| } | |
| // ── DOM-ready ───────────────────────────────────────────────────── | |
| $(document).ready(function() { | |
| $('#user-message-form').on('submit', function(event) { | |
| event.preventDefault(); | |
| let message = $('textarea[name="message"]').val().trim(); | |
| if (!message) return; | |
| $.post('/dashboard', { message: message }, function() { | |
| fetchGameState(); | |
| $('textarea[name="message"]').val(''); | |
| showRobot(); | |
| }); | |
| }); | |
| fetchGameState(); | |
| setInterval(fetchGameState, 2000); | |
| ['1','2','3'].forEach(function(s) { | |
| $('#ai-btn-' + s).on('click', function() { | |
| if (firstGuess === s) return; | |
| $('#guess-modal-screen').text('scherm ' + s); | |
| $('#guess-confirm').data('screen', s); | |
| if (firstGuess === null) { | |
| $('#guess-modal-text').text('Je denkt dat scherm ' + s + ' een AI is. Daarna moet je nog één AI aanwijzen.'); | |
| } else { | |
| $('#guess-modal-text').text('Je denkt dat scherm ' + s + ' ook een AI is. Dit is je laatste keuze!'); | |
| } | |
| $('#guess-modal').removeClass('hidden'); | |
| }); | |
| }); | |
| $('#guess-cancel').on('click', function() { | |
| $('#guess-modal').addClass('hidden'); | |
| }); | |
| $('#guess-confirm').on('click', function() { | |
| const screen = $(this).data('screen'); | |
| $.post('/submit_guess', { screen: screen }, function(data) { | |
| $('#guess-modal').addClass('hidden'); | |
| if (data.status === 'first_guess') { | |
| fetchGameState(); | |
| } else if (data.status === 'done') { | |
| fetchGameState(); | |
| showResult(data); | |
| } else if (data.reason === 'same_screen') { | |
| alert('Je hebt dit scherm al gekozen! Kies een ander scherm.'); | |
| } | |
| }); | |
| }); | |
| document.getElementById('hulp-toggle').addEventListener('click', function() { | |
| document.getElementById('hulp-panel').classList.toggle('hulp-panel--hidden'); | |
| }); | |
| document.getElementById('walking-robot').addEventListener('click', function() { | |
| const robot = this; | |
| const isFlipped = window.getComputedStyle(robot).transform.includes('-1'); | |
| robot.style.setProperty('--rx', isFlipped ? '-1' : '1'); | |
| robot.classList.add('walking-robot--dance'); | |
| const msgs = ['🎉', '⚡', '💫', '🌟', '🎵', '👾', '🔥', '✨']; | |
| const pop = document.createElement('div'); | |
| pop.textContent = msgs[Math.floor(Math.random() * msgs.length)]; | |
| pop.style.cssText = ` | |
| position: fixed; | |
| bottom: 140px; | |
| left: ${robot.getBoundingClientRect().left + 10}px; | |
| font-size: 2rem; | |
| z-index: 200; | |
| pointer-events: none; | |
| animation: popUp 0.8s ease forwards; | |
| `; | |
| document.body.appendChild(pop); | |
| setTimeout(() => pop.remove(), 800); | |
| robot.addEventListener('animationend', function handler() { | |
| robot.classList.remove('walking-robot--dance'); | |
| robot.removeEventListener('animationend', handler); | |
| }); | |
| }); | |
| }); // ← end of $(document).ready | |
| </script> | |
| </head> | |
| <body class="theme-app theme-participant"> | |
| <div class="app-bg"></div> | |
| <div class="app-shell participant-dashboard"> | |
| <div class="container dashboard-scroll dashboard-stage-container"> | |
| <!-- Regels button — top left --> | |
| <div class="buttons" style="position: absolute; top: 20px; left: clamp(16px, 4vw, 32px); z-index: 5;"> | |
| <a href="{{ url_for('user_rules') }}" class="button">Regels</a> | |
| </div> | |
| <!-- Hulp button — top right --> | |
| <div style="position: absolute; top: 20px; right: clamp(16px, 4vw, 32px); z-index: 100;"> | |
| <button type="button" class="button" id="hulp-toggle">💡 Hulp</button> | |
| </div> | |
| <!-- Hulp side panel --> | |
| <div id="hulp-panel" class="hulp-panel hulp-panel--hidden"> | |
| <div class="hulp-tabs"> | |
| <button class="hulp-tab hulp-tab--active" onclick="switchTab('onderwerpen')">🌍 Onderwerpen</button> | |
| <button class="hulp-tab" onclick="switchTab('vragen')">💬 Vragen</button> | |
| </div> | |
| <div id="hulp-onderwerpen" class="hulp-section"> | |
| <p class="hulp-hint">Kies een onderwerp om over te vragen!</p> | |
| <span class="hint-chip hint-chip--topic">🚀 Ruimte en Planeten</span> | |
| <span class="hint-chip hint-chip--topic">🌊 Oceaan en Diepzee</span> | |
| <span class="hint-chip hint-chip--topic">🐘 Dieren</span> | |
| <span class="hint-chip hint-chip--topic">🦕 Dinosaurussen</span> | |
| <span class="hint-chip hint-chip--topic">🤖 Robots en AI</span> | |
| <span class="hint-chip hint-chip--topic">🪄 Magie</span> | |
| <span class="hint-chip hint-chip--topic">⏳ Tijdreizen</span> | |
| <span class="hint-chip hint-chip--topic">🦸 Superhelden</span> | |
| <span class="hint-chip hint-chip--topic">💡 Uitvindingen</span> | |
| <span class="hint-chip hint-chip--topic">🔍 Mysteries</span> | |
| <span class="hint-chip hint-chip--topic">🗺️ Avontuur</span> | |
| <span class="hint-chip hint-chip--topic">🌿 Regenwouden en Jungles</span> | |
| <span class="hint-chip hint-chip--topic">🐉 Draken en Mythische Wezens</span> | |
| <span class="hint-chip hint-chip--topic">🔭 Toekomstige Technologie</span> | |
| <span class="hint-chip hint-chip--topic">🕵️ Geheime Codes en Spionnen</span> | |
| <span class="hint-chip hint-chip--topic">☁️ Weer en Rampen</span> | |
| <span class="hint-chip hint-chip--topic">🏴☠️ Schatten en Piraten</span> | |
| <span class="hint-chip hint-chip--topic">🧪 Wetenschapsexperimenten</span> | |
| <span class="hint-chip hint-chip--topic">😄 Grappige Wat-Als</span> | |
| </div> | |
| <div id="hulp-vragen" class="hulp-section hulp-section--hidden"> | |
| <p class="hulp-hint">Klik op een vraag om hem in te vullen!</p> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Zou vliegen of onzichtbaar zijn handiger zijn?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Wat is het leukste om te doen op een regenachtige dag?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Hoe zou je een bal uit een boom halen?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Zou je liever heel snel of heel sterk zijn?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Zou een giraf of een pinguïn beter zijn in voetbal?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Wat zou er gebeuren als iedereen een dag achteruit moest lopen?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Mogen robots lesgeven op school?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Zou jij een robot willen als dat mogelijk was?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Wat zou jouw perfecte vakantie zijn?</button> | |
| <button class="hint-chip" onclick="fillQuestion(this)">Zou je een alien willen ontmoeten?</button> | |
| </div> | |
| </div> | |
| <section class="dashboard-stage" aria-label="Chatter schermen"> | |
| <div id="pending-banner" class="pending-banner hidden">Wacht op de admin...</div> | |
| <!-- Screen 1 — left --> | |
| <div class="screen-controls screen-controls--left"> | |
| <button type="button" class="screen-btn screen-btn--ai" id="ai-btn-1" disabled>Dit is de AI! 🤖</button> | |
| </div> | |
| <article class="response-card response-card--left card"> | |
| <div id="screen-1-current" class="response-screen">Nog geen reacties.</div> | |
| </article> | |
| <!-- Screen 2 — middle --> | |
| <div class="screen-controls screen-controls--middle"> | |
| <button type="button" class="screen-btn screen-btn--ai" id="ai-btn-2" disabled>Dit is de AI! 🤖</button> | |
| </div> | |
| <article class="response-card response-card--middle card"> | |
| <div id="screen-2-current" class="response-screen">Nog geen reacties.</div> | |
| </article> | |
| <!-- Screen 3 — right --> | |
| <div class="screen-controls screen-controls--right"> | |
| <button type="button" class="screen-btn screen-btn--ai" id="ai-btn-3" disabled>Dit is de AI! 🤖</button> | |
| </div> | |
| <article class="response-card response-card--right card"> | |
| <div id="screen-3-current" class="response-screen">Nog geen reacties.</div> | |
| </article> | |
| <!-- Game over --> | |
| <div id="result-banner" class="result-banner hidden"></div> | |
| <div id="game-actions" class="game-actions hidden"> | |
| <form action="/reset_game" method="POST"> | |
| <input type="hidden" name="next" value="{{ url_for('user_dashboard') }}"> | |
| <button type="submit" class="button">Opnieuw spelen</button> | |
| </form> | |
| <form action="/reset_game" method="POST"> | |
| <input type="hidden" name="next" value="{{ url_for('user_rules') }}"> | |
| <button type="submit" class="button">Moeilijkheid wijzigen</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Guess modal --> | |
| <div id="guess-modal" class="modal hidden" role="dialog" aria-modal="true"> | |
| <div class="modal-card"> | |
| <h3>Weet je het zeker?</h3> | |
| <p id="guess-modal-text">...</p> | |
| <div class="modal-buttons" style="display: flex; justify-content: center; gap: 10px; margin-top: 14px;"> | |
| <button type="button" id="guess-confirm" class="button">Ja, dit is een AI!</button> | |
| <button type="button" id="guess-cancel" class="button button-ghost">Annuleren</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Walking robot --> | |
| <div id="walking-robot" class="walking-robot walking-robot--hidden">🤖</div> | |
| <!-- Compose bar --> | |
| <div class="compose-dock compose-dock--stage"> | |
| <form action="/dashboard" method="POST" id="user-message-form" class="compose-form"> | |
| <div class="question-counter"> | |
| <span id="questions-left">0</span> | |
| <span class="question-label">vragen</span> | |
| </div> | |
| <textarea name="message" class="compose-input" placeholder="Typ hier je vraag..." required></textarea> | |
| <button type="submit" class="compose-send button">Stuur</button> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |