added instructions

This commit is contained in:
tom.hempel
2025-09-18 10:31:19 +02:00
parent e6d73a2bcb
commit 6d9d624510

View File

@ -57,7 +57,7 @@
} }
.container { .container {
max-width: 700px; flex: 1;
min-width: 400px; min-width: 400px;
margin: 10px; margin: 10px;
padding: 20px; padding: 20px;
@ -177,7 +177,9 @@
.flex { .flex {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
} }
</style> </style>
</head> </head>
@ -573,5 +575,85 @@
}); });
} }
</script> </script>
<div style="margin-top: 40px; background-color: #f9f9f9; border-left: 4px solid #4CAF50; padding: 20px;">
<h2>How to Use This Interface</h2>
<div class="flex">
<div class="container" style="background-color: transparent; box-shadow: none;">
<h3>Setting Up a Charades Session</h3>
<ol>
<li><strong>Configure Player IPs</strong>
<ul>
<li>Enter the IP addresses of Player 1 and Player 2 VR headsets</li>
<li>These should match the IPs you used in the <code>control.py</code> commands</li>
<li><strong>Note:</strong> The default placeholders are examples - use your actual headset IPs</li>
</ul>
</li>
<li><strong>Prepare Word List</strong>
<ul>
<li>Copy your word list from <code>word-list.txt</code> and paste it into the large text area</li>
<li>Click the <strong>"Shuffle"</strong> button to randomize the word order</li>
<li>Click the <strong>"Modify"</strong> button to generate interactive word items</li>
</ul>
</li>
<li><strong>Set Game Parameters</strong>
<ul>
<li><strong>Current Player For Acting:</strong> Select which player will be acting out the words</li>
<li><strong>Time (s):</strong> Set the time limit for each word (e.g., 30 seconds)</li>
<li><strong>Last Word Status:</strong> Set to "None" for the first word</li>
</ul>
</li>
</ol>
</div>
<div class="container" style="background-color: transparent; box-shadow: none;">
<h3>Running the Experiment</h3>
<h4>Manual Mode (Individual Words)</h4>
<ol>
<li>Enter a word in the "Word" field</li>
<li>Select the acting player (Player 1 or Player 2)</li>
<li>Set the time limit</li>
<li>Click <strong>"Send"</strong> to transmit the word to the VR headsets</li>
</ol>
<h4>Automatic Mode (Word List)</h4>
<ol>
<li>After clicking "Modify" with your word list, the interface shows all words with timers</li>
<li>The system automatically starts with the first word and counts down</li>
<li><strong>During the session:</strong>
<ul>
<li><strong>Mark words correct:</strong> Hover over a word and check the checkbox if guessed correctly</li>
<li><strong>Visual indicators:</strong> ▶ = Current word, ✅ = Correct, ❌ = Time expired</li>
</ul>
</li>
<li><strong>Stop the session:</strong> Click <strong>"Stop"</strong> to end early</li>
</ol>
</div>
<div class="container" style="background-color: transparent; box-shadow: none;">
<h3>Exporting Results</h3>
<ol>
<li>After completing the word list, click <strong>"Save as CSV"</strong></li>
<li>This downloads a CSV file with:
<ul>
<li>Word name</li>
<li>Whether it was guessed correctly (true/false)</li>
<li>Time remaining when completed</li>
</ul>
</li>
</ol>
<h3>Troubleshooting</h3>
<ul>
<li>If words don't appear in VR headsets, check that <code>control.py</code> commands were sent correctly</li>
<li>If timer doesn't start, ensure you clicked "Modify" after entering the word list</li>
<li>If players can't see each other, verify the MODE commands were sent with correct parameters</li>
<li>If shuffle doesn't work, make sure the word list isn't currently running (click "Stop" first)</li>
</ul>
</div>
</div>
</div>
</body> </body>
</html> </html>