2c:null 2d:["$","title",null,{"children":"Expertle Puzzle | Bruce Crock | Observable"}] 32:T8a0,function createGameElements() { const body = document.body; // Create puzzle grid container const puzzleContainer = document.createElement('div'); puzzleContainer.id = 'puzzle-container'; puzzleContainer.style.display = 'inline-block'; puzzleContainer.style.verticalAlign = 'top'; body.appendChild(puzzleContainer); // Create scoreboard container const scoreboard = document.createElement('div'); scoreboard.id = 'scoreboard'; scoreboard.style.display = 'inline-block'; scoreboard.style.width = '200px'; scoreboard.style.height = 'auto'; scoreboard.style.marginLeft = '20px'; scoreboard.style.verticalAlign = 'top'; scoreboard.style.backgroundColor = '#f9f9f9'; scoreboard.style.border = '1px solid #ccc'; scoreboard.style.padding = '10px'; scoreboard.style.boxSizing = 'border-box'; body.appendChild(scoreboard); // Create keyboard container const keyboardContainer = document.createElement('div'); keyboardContainer.id = 'keyboard-container'; keyboardContainer.style.display = 'grid'; keyboardContainer.style.gridTemplateColumns = 'repeat(10, 1fr)'; keyboardContainer.style.gap = '5px'; body.appendChild(keyboardContainer); // Create Submit button const submitButton = document.createElement('button'); submitButton.id = 'enter-button'; submitButton.textContent = 'Submit'; submitButton.style.gridColumn = 'span 2'; submitButton.style.backgroundColor = '#b3e0ff'; submitButton.style.cursor = 'pointer'; submitButton.disabled = true; keyboardContainer.appendChild(submitButton); // Create Clear button const clearButton = document.createElement('button'); clearButton.id = 'clear-button'; clearButton.textContent = 'Clear'; clearButton.style.gridColumn = 'span 2'; clearButton.style.backgroundColor = '#ffcccc'; clearButton.style.cursor = 'pointer'; clearButton.disabled = true; keyboardContainer.appendChild(clearButton); // Create New Game button const newGameButton = document.createElement('button'); newGameButton.id = 'new-game-button'; newGameButton.textContent = 'New Game'; newGameButton.style.display = 'block'; newGameButton.style.marginTop = '10px'; body.appendChild(newGameButton); } 33:T7bd,function initGame() { console.log('InitGame ...'); createGameElements(); // Dynamically create DOM elements const guessArray = []; let currentRow = 0; const maxRows = 5; // Initialize target word and game area const targetWord = initPuzzle('target-word', true); createPuzzleGrid('puzzle-container', 5, 5); createKeyboard('keyboard-container', (letter) => handleKeyboardClick(letter, guessArray, currentRow, targetWord) ); removeWinnerAnimation(); // Attach event listeners document.getElementById('enter-button').addEventListener('click', () => { console.log('Submit button clicked from initGamefunction'); if (step2_submitGuess(guessArray, targetWord, 'puzzle-container', currentRow)) { console.log(`Submitted guess that worked!!!: ${guessArray.join('')}`); currentRow++; guessArray.length = 0; // Reset guess array resetKeyboardButtonState(targetWord); // Reset states and disable wrong buttons displayScoreboardMessage('WINNER!'); document.getElementById('clear-button').disabled = true; document.getElementById('enter-button').disabled = true; } else { console.log(`Submitted guess that did not work: ${guessArray.join('')}`); currentRow++; guessArray.length = 0; // Reset guess array resetKeyboardButtonState(targetWord); // Reset states and disable wrong buttons displayScoreboardMessage('Incorrect Guess', true); document.getElementById('clear-button').disabled = true; document.getElementById('enter-button').disabled = true; //console.warn('Guess submission failed'); } }); document.getElementById('new-game-button').addEventListener('click', () => { console.log('New game button clicked'); initGame(); const scoreboard = document.getElementById('scoreboard'); if (scoreboard) { scoreboard.innerHTML = ''; // Clear scoreboard messages } }); console.log('Game initialized successfully.'); return true; } 34:T8e5,function createKeyboard(containerId, clickHandler) { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const container = document.getElementById(containerId); if (!container) { console.error(`No element found with id: ${containerId}`); return; } // Clear existing content container.innerHTML = ''; container.style.display = 'grid'; container.style.gridTemplateColumns = 'repeat(10, 1fr)'; // 10 columns for tight spacing container.style.gap = '5px'; container.style.maxWidth = '400px'; // Create letter buttons letters.split('').forEach((letter) => { const button = document.createElement('button'); button.textContent = letter; button.dataset.letter = letter; // Add data-letter attribute button.style.width = '100%'; button.style.height = '40px'; button.style.fontSize = '16px'; button.style.cursor = 'pointer'; button.style.border = '1px solid black'; button.style.backgroundColor = 'white'; button.addEventListener('click', () => clickHandler(letter)); container.appendChild(button); }); // Add Clear button const clearButton = document.createElement('button'); clearButton.textContent = 'Clear'; clearButton.dataset.letter = 'CLEAR'; clearButton.id = 'clear-button'; clearButton.style.gridColumn = 'span 2'; // Twice as wide clearButton.style.width = '100%'; clearButton.style.height = '50px'; clearButton.style.backgroundColor = '#ffcccc'; clearButton.style.cursor = 'pointer'; clearButton.disabled = true; clearButton.addEventListener('click', () => clickHandler('CLEAR')); container.appendChild(clearButton); // Add Submit button const submitButton = document.createElement('button'); submitButton.textContent = 'Submit'; submitButton.dataset.letter = 'SUBMIT'; submitButton.id = 'enter-button'; submitButton.style.gridColumn = 'span 2'; // Twice as wide submitButton.style.width = '100%'; submitButton.style.height = '50px'; submitButton.style.backgroundColor = '#b3e0ff'; submitButton.style.cursor = 'pointer'; submitButton.disabled = true; submitButton.addEventListener('click', () => clickHandler('SUBMIT')); container.appendChild(submitButton); console.log('Keyboard created with Clear and Submit buttons sized appropriately.'); } 35:T4ad,// Main game initialization function startPuzzleGame() { const guessArray = []; let currentRow = 0; const maxRows = 5; console.log('Starting startPuzzleGame'); // Step 1: Setup containers and initialize game const targetWord = initPuzzle('target-word', true); // Hide target word createPuzzleGrid('puzzle-container', 5, 5); createKeyboard('keyboard-container', (letter) => step1_clickLetter(letter, guessArray)); // Step 2: Add click listener for "Enter" button document.getElementById('enter-button').addEventListener('click', () => { if (step2_submitGuess(guessArray, targetWord, 'puzzle-container', currentRow)) { currentRow = step3_evaluateGuess(currentRow, maxRows, targetWord); // Check win condition if (guessArray.join('') === targetWord) { console.log('Congratulations! You guessed the word.'); alert('You win!'); return; } // Reset guess array for the next attempt //guessArray.length = 0; // Game over condition if (currentRow >= maxRows) { console.log('Game Over. The correct word was:', targetWord); alert(`Game Over! The word was: ${targetWord}`); } } }); }36:T48f,function handleKeyboardClick(letter, guessArray, currentRow, targetWord) { console.log(`Handling keyboard click: ${letter}`); console.log(`Handling keyboard click guess array: ${guessArray}`); console.log(`Handling keyboard click target word: ${targetWord}`); const clearButton = document.getElementById('clear-button'); const submitButton = document.getElementById('enter-button'); if (letter === 'CLEAR') { clearLastLetter(guessArray, currentRow); clearSelectedKeyboardButton(guessArray); } else if (guessArray.length < 5) { updateGuessGrid(guessArray, currentRow, letter); updateSelectedKeyboardButton(letter); } else { console.warn('No more room in current guess to add letters'); } // Update button states // console.log(`Clear button state before update: ${clearButton.disabled}`); clearButton.disabled = guessArray.length === 0; // console.log(`Clear button state after update: ${clearButton.disabled}`); // console.log(`Submit button state before update: ${submitButton.disabled}`); submitButton.disabled = guessArray.length < 5; // console.log(`Submit button state after update: ${submitButton.disabled}`); }37:T43b,function displayWinnerAnimation() { const existingWinnerText = document.getElementById('winner-text'); if (existingWinnerText) { existingWinnerText.remove(); // Remove existing animation if any } const puzzleContainer = document.getElementById('puzzle-container'); if (!puzzleContainer) { console.error('Puzzle container not found for winner animation.'); return; } // Create winner text element const winnerText = document.createElement('div'); winnerText.id = 'winner-text'; winnerText.textContent = 'WINNER!'; winnerText.style.position = 'absolute'; winnerText.style.right = '-150px'; winnerText.style.top = '50%'; winnerText.style.transform = 'translateY(-50%)'; winnerText.style.fontSize = '10px'; winnerText.style.fontWeight = 'bold'; winnerText.style.color = 'green'; winnerText.style.transition = 'font-size 1s ease, right 1s ease'; puzzleContainer.parentElement.appendChild(winnerText); // Trigger animation setTimeout(() => { winnerText.style.fontSize = '50px'; winnerText.style.right = '10px'; }, 100); }38:T43f,function displayScoreboardMessage(message, isError = false) { const scoreboard = document.getElementById('scoreboard'); if (!scoreboard) { console.error('Scoreboard not found for displaying message.'); return; } // Create message element const messageElement = document.createElement('div'); messageElement.textContent = message; messageElement.style.position = 'relative'; messageElement.style.fontSize = '10px'; messageElement.style.fontWeight = 'bold'; messageElement.style.color = isError ? 'red' : 'green'; messageElement.style.transition = 'font-size 1s ease, opacity 1s ease'; messageElement.style.opacity = '1'; scoreboard.appendChild(messageElement); console.log('Message added to scoreboard:', message); // Trigger animation setTimeout(() => { messageElement.style.fontSize = '30px'; }, 100); // Remove message after 5 seconds setTimeout(() => { messageElement.style.opacity = '0'; setTimeout(() => { messageElement.remove(); console.log('Message removed from scoreboard.'); }, 1000); }, 5000); } 39:T146b, wordPuzzleOntology = ( { "nodes": [ { "id": 1, "type": "Puzzle", "name": "WordGuessPuzzle", "group": "Core", "description": "A word-guessing puzzle where users attempt to match a challenge word in limited attempts." }, { "id": 2, "type": "Group", "name": "Constraints()", "group": "Constraints", "description": "The constraints that govern the puzzle gameplay." }, { "id": 3, "type": "Constraint", "name": "MaxAttempts", "group": "Constraints", "description": "The player has a maximum of 5 guesses to solve the puzzle." }, { "id": 4, "type": "Constraint", "name": "WordLength", "group": "Constraints", "description": "The challenge word consists of exactly 5 letters." }, { "id": 5, "type": "Objective", "name": "GuessChallengeWord", "group": "Objectives", "description": "The objective is to guess the challenge word correctly within the allowed attempts." }, { "id": 6, "type": "Group", "name": "Domains()", "group": "Domains", "description": "The components and elements used in the puzzle." }, { "id": 7, "type": "Domain", "name": "ChallengeWord", "group": "Domains", "description": "The word to be guessed, which changes for each puzzle round." }, { "id": 8, "type": "Domain", "name": "UserInput", "group": "Domains", "description": "The letters and guesses input by the user." }, { "id": 9, "type": "Domain", "name": "Feedback", "group": "Domains", "description": "Color-coded feedback on guessed letters: green (correct), yellow (in word), and gray (incorrect)." }, { "id": 10, "type": "Group", "name": "PuzzleSequence", "group": "GameFlow", "description": "The sequence of steps that define the puzzle flow." }, { "id": 11, "type": "Step", "name": "Step1_ClickLetter", "group": "GameFlow", "description": "User clicks letters on the keyboard to form a guess." }, { "id": 12, "type": "Step", "name": "Step2_SubmitGuess", "group": "GameFlow", "description": "User submits a guess by clicking the 'Enter' button." }, { "id": 13, "type": "Step", "name": "Step3_EvaluateGuess", "group": "GameFlow", "description": "The submitted guess is evaluated and feedback is provided." }, { "id": 14, "type": "Mechanic", "name": "ProvideFeedback", "group": "Mechanics", "description": "Color feedback is provided for each letter in the guess." }, { "id": 15, "type": "Method", "name": "createKeyboard()", "group": "CodeObjects", "description": "Generates a clickable keyboard for letter selection." }, { "id": 16, "type": "Method", "name": "createPuzzleGrid()", "group": "CodeObjects", "description": "Creates a 5x5 grid to display guesses and feedback." }, { "id": 17, "type": "Method", "name": "step1_clickLetter()", "group": "CodeObjects", "description": "Records the user's selected letters for a guess." }, { "id": 18, "type": "Method", "name": "step2_submitGuess()", "group": "CodeObjects", "description": "Submits the current user guess and evaluates input length." }, { "id": 19, "type": "Method", "name": "step3_evaluateGuess()", "group": "CodeObjects", "description": "Evaluates the guess and moves to the next step or ends the game." }, { "id": 20, "type": "Method", "name": "handleGuess()", "group": "CodeObjects", "description": "Applies feedback to the puzzle grid for a submitted guess." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "HasConstraints" }, { "source": 2, "target": 3, "edgeName": "IncludesConstraint" }, { "source": 2, "target": 4, "edgeName": "IncludesConstraint" }, { "source": 1, "target": 5, "edgeName": "HasObjective" }, { "source": 1, "target": 6, "edgeName": "UsesDomains" }, { "source": 6, "target": 7, "edgeName": "IncludesDomain" }, { "source": 6, "target": 8, "edgeName": "IncludesDomain" }, { "source": 6, "target": 9, "edgeName": "IncludesDomain" }, { "source": 1, "target": 10, "edgeName": "HasSequence" }, { "source": 10, "target": 11, "edgeName": "IncludesStep" }, { "source": 10, "target": 12, "edgeName": "IncludesStep" }, { "source": 10, "target": 13, "edgeName": "IncludesStep" }, { "source": 10, "target": 14, "edgeName": "UsesMechanic" }, { "source": 1, "target": 15, "edgeName": "ImplementsMethod" }, { "source": 1, "target": 16, "edgeName": "ImplementsMethod" }, { "source": 1, "target": 17, "edgeName": "ImplementsMethod" }, { "source": 1, "target": 18, "edgeName": "ImplementsMethod" }, { "source": 1, "target": 19, "edgeName": "ImplementsMethod" }, { "source": 1, "target": 20, "edgeName": "ImplementsMethod" } ] } ) 3a:Ta17,cardPuzzle = ( { "nodes": [ { "id": 1, "type": "Puzzle", "name": "Card Sorting Puzzle", "group": "Core" }, { "id": 2, "type": "Group", "name": "Constraints()", "group": "Constraints" }, { "id": 3, "type": "Constraint", "name": "Special Deck Constraint", "group": "Constraints" }, { "id": 4, "type": "Constraint", "name": "Attribute-Based Constraint", "group": "Constraints" }, { "id": 5, "type": "Group", "name": "Domains()", "group": "Domains" }, { "id": 6, "type": "Domain", "name": "Playing Cards Ontology", "group": "Domains" }, { "id": 7, "type": "Domain", "name": "Card Game Ontology", "group": "Domains" }, { "id": 8, "type": "Objective", "name": "Sequence Objective", "group": "Objectives" }, { "id": 9, "type": "Group", "name": "Game Mechanics()", "group": "Game Mechanics" }, { "id": 10, "type": "Pile", "name": "Dealer Stack", "group": "Game Mechanics" }, { "id": 11, "type": "Pile", "name": "Active Pile", "group": "Game Mechanics" }, { "id": 12, "type": "Group", "name": "Game Sequence()", "group": "Game Mechanics" }, { "id": 13, "type": "Step", "name": "Step 1", "group": "Game Mechanics", "description": "Deal 1 card from the Dealer Stack to the Active Pile." }, { "id": 14, "type": "Step", "name": "Step 2", "group": "Game Mechanics", "description": "Burn 3 cards to the bottom of the Dealer Stack." }, { "id": 15, "type": "Step", "name": "Step 3", "group": "Game Mechanics", "description": "Repeat the sequence until the Dealer Stack is empty." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "HasConstraints" }, { "source": 2, "target": 3, "edgeName": "IncludesConstraint" }, { "source": 2, "target": 4, "edgeName": "IncludesConstraint" }, { "source": 1, "target": 5, "edgeName": "UsesDomains" }, { "source": 5, "target": 6, "edgeName": "IncludesDomain" }, { "source": 5, "target": 7, "edgeName": "IncludesDomain" }, { "source": 1, "target": 8, "edgeName": "HasObjective" }, { "source": 1, "target": 9, "edgeName": "HasGameMechanics" }, { "source": 9, "target": 10, "edgeName": "IncludesPile" }, { "source": 9, "target": 11, "edgeName": "IncludesPile" }, { "source": 9, "target": 12, "edgeName": "HasGameSequence" }, { "source": 12, "target": 13, "edgeName": "IncludesStep" }, { "source": 12, "target": 14, "edgeName": "IncludesStep" }, { "source": 12, "target": 15, "edgeName": "IncludesStep" }, { "source": 13, "target": 11, "edgeName": "ModifiesPile" }, { "source": 14, "target": 10, "edgeName": "ModifiesPile" } ] } )3b:T103d,cardPuzzle2 = ( { "nodes": [ { "id": 1, "type": "Puzzle", "name": "Card Sorting Puzzle", "group": "Core", "description": "Arrange Cards in your dealer stack such that when you follow the dealing constraint 'Deal 1 to active pile, Burn 3 to bottom of deck, and repeat until dealer stack is empty', the resulting cards in the active pile are sequenced Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10." }, { "id": 2, "type": "Group", "name": "Constraints()", "group": "Constraints", "description": "The constraints that must be followed in the puzzle." }, { "id": 3, "type": "Constraint", "name": "Special Deck Constraint", "group": "Constraints", "description": "The cards can be any suit but must be a distinct list of card values from Ace to Ten." }, { "id": 4, "type": "Group", "name": "Card Game Constraints()", "group": "Constraints", "description": "The rules governing card game mechanics for this puzzle." }, { "id": 5, "type": "Objective", "name": "Objective", "group": "Objectives", "description": "The resulting cards in the active pile are sequenced Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10." }, { "id": 6, "type": "Group", "name": "Domains()", "group": "Domains", "description": "The domains used in this puzzle." }, { "id": 7, "type": "Domain", "name": "Playing Cards Ontology", "group": "Domains", "description": "Describes the structure and attributes of a deck of playing cards, including suits, ranks, and colors." }, { "id": 8, "type": "Domain", "name": "Card Game Ontology", "group": "Domains", "description": "Describes the mechanics and actions possible in card games, such as dealing, shuffling, and sorting." }, { "id": 9, "type": "Pile", "name": "Active Pile", "group": "Game Mechanics", "description": "The pile where dealt cards are placed during the puzzle." }, { "id": 10, "type": "Pile", "name": "Dealer Stack", "group": "Game Mechanics", "description": "The stack of cards controlled by the dealer from which cards are dealt." }, { "id": 11, "type": "Group", "name": "Game Sequence()", "group": "Sequence", "description": "The sequence of steps to be followed in the game." }, { "id": 12, "type": "Step", "name": "Step 1", "group": "Sequence", "description": "Deal 1 card from the Dealer Stack to the Active Pile." }, { "id": 13, "type": "Step", "name": "Step 2", "group": "Sequence", "description": "Burn 3 cards to the bottom of the Dealer Stack." }, { "id": 14, "type": "Step", "name": "Step 3", "group": "Sequence", "description": "Repeat the sequence until the Dealer Stack is empty." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "HasConstraints" }, { "source": 2, "target": 3, "edgeName": "IncludesConstraint" }, { "source": 2, "target": 4, "edgeName": "IncludesConstraint" }, { "source": 1, "target": 5, "edgeName": "HasObjective" }, { "source": 1, "target": 6, "edgeName": "UsesDomains" }, { "source": 6, "target": 7, "edgeName": "IncludesDomain" }, { "source": 6, "target": 8, "edgeName": "IncludesDomain" }, { "source": 2, "target": 6, "edgeName": "UsesConceptsFrom" }, { "source": 5, "target": 6, "edgeName": "UsesConceptsFrom" }, { "source": 4, "target": 10, "edgeName": "AppliesToDealerStack" }, { "source": 4, "target": 9, "edgeName": "ProducesActivePile" }, { "source": 1, "target": 11, "edgeName": "HasGameSequence" }, { "source": 11, "target": 12, "edgeName": "IncludesStep" }, { "source": 11, "target": 13, "edgeName": "IncludesStep" }, { "source": 11, "target": 14, "edgeName": "IncludesStep" }, { "source": 12, "target": 9, "edgeName": "Modifies" }, { "source": 13, "target": 10, "edgeName": "Modifies" } ] } )3c:[] 30:{"id":"cbef7b7f89f65371","slug":"expertle-puzzle","title":"Expertle Puzzle","thumbnail":"fea17e96709fa1ca898c8a9ba4474168ceab6c423314d3f3c27e040a1f8c4568","access_level":"public","create_time":"$D2024-12-18T04:40:20.058Z","update_time":"$D2024-12-19T01:10:17.637Z","view_time":null,"first_public_time":"$D2024-12-19T03:36:03.250Z","has_unpublished_edits":null,"fork":{"id":"cf9604c8ee147ef8","slug":"card-game-puzzle","title":"Card Game Puzzle","owner":{"id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","bio":""},"version":1535,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"bio":""}],"members":[{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Expertle Puzzle","cells":[{"id":0,"value":"# Expertle Puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1243,"value":"viewof newGameButton = html``;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"## Guesses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1495,"value":"viewof guessGrid = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"## Keyboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1231,"value":"viewof keyboardContainer = html`

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1277,"value":"// Execute the game initialization\n initGame();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"// Function to turn off winner animation\nfunction removeWinnerAnimation() {\n const winnerText = document.getElementById('winner-text');\n if (winnerText) {\n winnerText.remove();\n console.log('Winner animation removed.');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"function initPuzzle(targetWordContainerId, hidden = true) {\n const container = document.getElementById(targetWordContainerId);\n if (!container) {\n console.error(`No element found with id: ${targetWordContainerId}`);\n return;\n }\n\n // Define or randomize the target word\n const words = ['APPLE', 'GRAPE', 'MANGO', 'BERRY', 'PEACH'];\n const targetWord = words[Math.floor(Math.random() * words.length)];\n container.textContent = targetWord; // For validation\n container.style.display = hidden ? 'none' : 'block';\n\n console.log('Puzzle initialized with target word:', targetWord);\n return targetWord;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"// Function to create the puzzle display grid\nfunction createPuzzleGrid(containerId, rows = 5, columns = 5) {\n console.log('Starting Create Puzzle Grid');\n const container = document.getElementById(containerId);\n if (!container) {\n console.error(`No element found with id: ${containerId}`);\n return;\n }\n\n // Clear and style container\n container.innerHTML = '';\n container.style.display = 'grid';\n container.style.gridTemplateColumns = `repeat(${columns}, 50px)`;\n container.style.gridGap = '5px';\n\n // Generate empty boxes\n for (let i = 0; i < rows * columns; i++) {\n const box = document.createElement('div');\n box.style.width = '50px';\n box.style.height = '50px';\n box.style.border = '1px solid #ccc';\n box.style.textAlign = 'center';\n box.style.lineHeight = '50px';\n box.style.fontSize = '20px';\n box.style.backgroundColor = 'white';\n container.appendChild(box);\n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"function step1_clickLetter(letter, guessArray) {\n if (letter === 'CLEAR') {\n guessArray.length = 0;\n console.log('Guess cleared');\n } else if (guessArray.length < 5 && letter !== 'submit') {\n guessArray.push(letter);\n console.log(`Selected letter: ${letter}`);\n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"// Step 2: User submits a guess\nfunction step2_submitGuess(guessArray, targetWord, gridContainerId, currentRow) {\n const word = guessArray.join('');\n if (word.length === 5) {\n return handleGuess(word, targetWord, gridContainerId, currentRow);\n //return true; // Guess successfully submitted\n }\n console.log('Incomplete guess. Please select 5 letters.');\n return false;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"// Step 3: Evaluate the guess and provide feedback\nfunction step3_evaluateGuess(currentRow, maxRows, correctWord) {\n if (currentRow >= maxRows) {\n console.log('Game over. Maximum attempts reached.');\n } else {\n console.log();\n }\n return currentRow + 1;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"// Function to handle guess submission\nfunction handleGuess(word, targetWord, gridContainerId, rowIndex) {\n console.log(\"handling guess\");\n console.log(\"word\",word);\n console.log(\"targetWord\",targetWord);\n \n const gridContainer = document.getElementById(gridContainerId);\n const boxes = gridContainer.children;\n\n for (let i = 0; i < word.length; i++) {\n const letter = word[i];\n const targetLetter = targetWord[i];\n const box = boxes[rowIndex * word.length + i];\n box.textContent = letter;\n\n if (letter === targetLetter) {\n box.style.backgroundColor = 'green';\n console.log(\"green letter:\",letter);\n } else if (targetWord.includes(letter)) {\n console.log(\"yellow:\",letter);\n box.style.backgroundColor = 'yellow';\n } else {\n console.log(\"lightgray:\",letter);\n box.style.backgroundColor = 'lightgray';\n }\n }\nreturn word === targetWord;\n \n resetKeyboardButtonState(targetWord); \n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"function updateGuessGrid(guessArray, currentRow, letter) {\n console.log(`Updating grid with letter: ${letter}`);\n console.log(`guess array before: ${guessArray}`);\n const grid = document.getElementById('puzzle-container').children;\n if (guessArray.length < 5) {\n guessArray.push(letter);\n const targetCell = grid[currentRow * 5 + guessArray.length - 1];\n if (targetCell) {\n console.log(`Placing letter '${letter}' in grid cell`);\n targetCell.textContent = letter;\n } else {\n console.warn('Target cell not found in grid');\n }\n } else {\n console.warn('Guess array is already full');\n }\n console.log(`guess array after: ${guessArray}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"function clearLastLetter(guessArray, currentRow) {\n if (guessArray.length > 0) {\n console.log('Clearing last letter');\n const removedLetter = guessArray.pop();\n const grid = document.getElementById('puzzle-container').children;\n grid[currentRow * 5 + guessArray.length].textContent = '';\n console.log(`Removed letter: ${removedLetter}`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"function resetKeyboardButtonState(targetWord) {\n console.log(\"resetting keyboarbuttonstate\");\n const buttons = document.querySelectorAll('#keyboard-container button');\n console.log(\"buttons\",buttons);\n buttons.forEach(button => {\n const letter = button.dataset.letter;\n if (button.dataset.state === 'disabled') {\n button.style.backgroundColor = 'gray'; // Keep disabled buttons gray\n button.disabled = true;\n } else {\n button.style.backgroundColor = 'white'; // Reset to default state\n button.style.border = '1px solid black';\n button.disabled = false; // Re-enable button\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"function updateSelectedKeyboardButton(letter) {\n console.log(\"Updating selected keyboard button\");\n console.log(\"letter\",letter);\n console.log(`#keyboard-container button[data-letter='${letter}']`);\n const targetButton = document.querySelector(`#keyboard-container button[data-letter='${letter}']`);\n console.log(\"targetButton:\",targetButton);\n if (targetButton) {\n targetButton.style.border = '3px solid blue'; // Indicate selection\n targetButton.dataset.state = 'selected';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"function clearSelectedKeyboardButton(guessArray) {\n const buttons = document.querySelectorAll('#keyboard-container button');\n buttons.forEach(button => {\n if (button.dataset.state === 'selected' && !guessArray.includes(button.textContent)) {\n button.style.border = '1px solid black';\n button.dataset.state = '';\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"function updateKeyboardButtonState(letter, targetWord, index) {\n console.log(\"updatingkeyboardbuttonstate\");\n const targetButton = document.querySelector(`#keyboard-container button[data-letter='${letter}']`);\n if (!targetButton) return;\n\n if (letter === targetWord[index]) {\n targetButton.style.backgroundColor = 'green'; // Correct letter and position\n targetButton.dataset.state = 'correct';\n } else if (targetWord.includes(letter)) {\n if (targetButton.dataset.state !== 'correct') {\n targetButton.style.backgroundColor = 'yellow'; // Correct letter, wrong position\n targetButton.dataset.state = 'present';\n }\n } else {\n targetButton.style.backgroundColor = 'gray'; // Disable button for wrong letters\n targetButton.dataset.state = 'disabled';\n targetButton.disabled = true; // Disable the button\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"document.addEventListener('DOMContentLoaded', () => {\n startPuzzleGame;\n console.log('adding event Listener after DOM CONTENT LOADED');\n}) ?? true;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"## Domain Explorer for Puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"viewof selectedInfo = html`

Click on a node or link to see details.

`;\n const toggleButton = html``;\n const graphContainer = html`

`;\n\n // Append the graph and button\n container.appendChild(toggleButton);\n container.appendChild(graphContainer);\n\n // Render the graph\n const renderedGraph = forceGraph_Bruce({\n nodes,\n links,\n nodeId: d => d.id,\n nodeTitle: d => d.id,\n width: 800,\n height: 600,\n });\n graphContainer.appendChild(renderedGraph);\n\n // Toggle visibility\n let isGraphVisible = true;\n toggleButton.addEventListener(\"click\", () => {\n isGraphVisible = !isGraphVisible;\n graphContainer.style.display = isGraphVisible ? \"block\" : \"none\";\n toggleButton.textContent = isGraphVisible ? \"Hide Graph\" : \"Show Graph\";\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"## DATA FOR VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"Copy Paste a new Ontology into this space. Ensure that each object always includes id, type, name, group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"ontology=wordPuzzleOntology;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"isOntologyValid = validateOntology(ontology);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"## CODE FOR VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"root = d3.hierarchy(ontology);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"nodes = ontology.nodes;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"links = ontology.edges;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"import {Swatches} from \"@d3/color-legend\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"## IMPORTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"import { forceGraphStyles, stickyDrag, distinct, forceGraph_Bruce, showAllLabels, validateOntology } from \"@bcrock/ontology-explorer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"import {cardGameOntology} from \"@bcrock/card-game-ontology\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import {deckOfCardsOntology} from \"@bcrock/deck-of-cards-ontology\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"import { css, collapsedCSS } from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"//import {forceGraph} from \"@bcrock/ontology-visualizations-extended\"\n//import {forceGraph} from \"@austince/ontology-visualizations-core\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"style = document.createElement('style');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"style.innerHTML = `\n .card {\n cursor: grab;\n transition: stroke 0.2s ease;\n }\n .card:hover rect {\n stroke: #ccc;\n }\n .card.dragging {\n cursor: grabbing;\n }\n\n`;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"