-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Connections game now supports cohere.ai
- Loading branch information
Showing
5 changed files
with
806 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Connections Game</title> | ||
| <link rel="stylesheet" type="text/css" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Connections Game</h1> | ||
| <!-- Instructions Button --> | ||
| <div> | ||
| <button id="instructionsButton">Instructions</button> | ||
| </div> | ||
|
|
||
| <!-- Instructions Modal --> | ||
| <div id="instructionsModal" class="modal"> | ||
| <div class="modal-content"> | ||
| <span class="close">×</span> | ||
| <h2>How to Play Connections</h2> | ||
|
|
||
| <ol> | ||
| <li><strong>Initialize the Game</strong>: Click the "Initialize Game" button to start a new game. This will generate a grid of 16 words.</li> | ||
| <li><strong>Select Words</strong>: Click on the words in the grid to select them. You can select up to 4 words at a time.</li> | ||
| <li><strong>Submit Group</strong>: Once you've selected a group of words, click the "Submit" button to check if they belong to the same category.</li> | ||
| <li><strong>Correct Group</strong>: If the selected words form a correct group, they will be highlighted in green and the category will be displayed below the grid.</li> | ||
| <li><strong>Clear Selection</strong>: You can clear your current selection at any time by clicking the "Clear Selection" button.</li> | ||
| <li><strong>Mistakes</strong>: Be careful! You are only allowed up to 4 mistakes. After that, the game will end and reveal the categories and words you didn't find.</li> | ||
| <li><strong>End Game</strong>: The game ends when you've successfully grouped all 16 words or reached the maximum number of mistakes.</li> | ||
| <li><strong>Custom Prompt</strong>: Want to customize the game? Edit the GPT-4 prompt in the text area and click "Initialize Game" again for a new set of categories and words.</li> | ||
| <li><strong>Replay</strong>: To play again with new categories and words, simply click "Initialize Game" again.</li> | ||
| <li><strong>Instructions</strong>: Lost? Click the "Instructions" button anytime to review the rules.</li> | ||
| </ol> | ||
|
|
||
| <p>This app was created by <a href="https://chat.openai.com/share/dce5265f-927b-4309-8550-9ed276719d64" target="_blank" id="gpt4Link">conversing with ChatGPT 4</a> (August 3, 2023 version).</p> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Add a dropdown for API selection --> | ||
| <div> | ||
| <label for="apiSelector">Select API:</label> | ||
| <select id="apiSelector"> | ||
| <option value="OpenAI">OpenAI</option> | ||
| <option value="Cohere">Cohere.ai</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <!-- Existing elements for API key input --> | ||
| <div> | ||
| <label for="apiKey">Enter API Key:</label> | ||
| <input type="password" id="apiKey"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <button id="initializeGame">Initialize Game</button> | ||
| <div id="loadingIcon" class="loading-icon-hidden"> | ||
| <div class="spinner"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="grid"> | ||
| <!-- Grid items will be populated here --> | ||
| </div> | ||
| <button id="submitBtn">Submit</button> | ||
| <button id="clearBtn">Clear</button> | ||
| <div> | ||
| <div id="mistakeCounter">Mistakes: 0</div> | ||
| <div id="foundCategories">Found Categories:</div> | ||
| <div id="statusMessage"></div> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <label for="gpt4Prompt">Optionally edit the GPT-4 Prompt (you can even ask for another language):</label> | ||
| <div> | ||
| <textarea id="gpt4Prompt" rows="16"> | ||
| Generate 4 categories of words, each containing exactly 4 unique words. | ||
| Ensure that no words are duplicated across categories. | ||
| In total, there should be exactly 16 unique words. | ||
| Make sure the same word does not appear in more than one category. | ||
| Try to include words that could be ambiguous | ||
| and fit into more than one category. | ||
| For example, the word 'mouse' could be ambiguous if | ||
| both 'ANIMALS' and 'COMPUTER PARTS' are categories | ||
| but it should be part of only one category. | ||
| But don't use the mouse example. | ||
| Categories can also be like "FIRE ___" for | ||
| Ant, Drill, Island, Opal. | ||
| Or something else about the words independent of their meaning. | ||
| </textarea> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.