WordFind CODE Development

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Te Reo Word Find</title>

<style>

body {

font-family: 'Arial', sans-serif;

background: linear-gradient(to bottom, #f4f4f9, #e0e7ff);

margin: 0;

padding: 20px;

}

.container {

max-width: 1400px;

margin: 0 auto;

display: flex;

gap: 20px;

}

.main-content {

flex: 3;

}

#wordsearch {

border-collapse: collapse;

margin: 20px 0;

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

background: white;

touch-action: none; /* Prevent default touch behaviors like scrolling */

}

#wordsearch td {

width: 35px;

height: 35px;

text-align: center;

font-size: 22px;

border: 2px solid #333;

cursor: pointer;

user-select: none;

transition: background-color 0.3s;

box-sizing: border-box;

}

.selected {

background-color: #FFFF99 !important;

color: black !important;

}

.highlighted {

background-color: #FFFF99 !important;

color: black !important;

}

.found0 { background-color: #6495ED !important; color: white !important; }

.found1 { background-color: #FF7F50 !important; color: white !important; }

.found2 { background-color: #9ACD32 !important; color: white !important; }

.found3 { background-color: #FFC0CB !important; color: black !important; }

.found4 { background-color: #DAA520 !important; color: white !important; }

.found5 { background-color: #BA55D3 !important; color: white !important; }

.found6 { background-color: #40E0D0 !important; color: black !important; }

.found7 { background-color: #FFD700 !important; color: black !important; }

.found8 { background-color: #B0C4DE !important; color: black !important; }

.found9 { background-color: #DEB887 !important; color: black !important; }

.found10 { background-color: #F08080 !important; color: white !important; }

.found11 { background-color: #7B68EE !important; color: white !important; }

.found12 { background-color: #00FF7F !important; color: black !important; }

.found13 { background-color: #9370DB !important; color: white !important; }

.found14 { background-color: #FFA500 !important; color: black !important; }

.found15 { background-color: #8A2BE2 !important; color: white !important; }

.found16 { background-color: #CD5C5C !important; color: white !important; }

.found17 { background-color: #20B2AA !important; color: white !important; }

.found18 { background-color: #4682B4 !important; color: white !important; }

.found19 { background-color: #FF6347 !important; color: white !important; }

.found-word-color {

font-weight: bold;

}

.word-count {

font-size: 14px;

font-weight: normal;

margin-left: 5px;

}

.lists {

display: flex;

justify-content: space-between;

gap: 20px;

flex: 1;

}

.find, .found {

width: 48%;

background: white;

padding: 15px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

h1 {

font-size: 2.5em;

color: #333;

text-align: center;

margin-bottom: 20px;

text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

}

h2 {

font-size: 1.5em;

color: #444;

margin-bottom: 10px;

}

ul {

list-style-type: none;

padding: 0;

}

li {

margin: 8px 0;

font-size: 18px;

padding: 5px;

border-radius: 4px;

transition: background-color 0.3s;

}

li:hover {

background-color: #f0f0f0;

}

.alphabet-panel {

width: 220px;

background: white;

padding: 15px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

.alphabet-panel h2 {

font-size: 1.5em;

color: #444;

margin-bottom: 10px;

}

.alphabet-button {

display: inline-block;

width: 35px;

height: 35px;

margin: 3px;

text-align: center;

line-height: 35px;

font-size: 18px;

border: 2px solid #333;

cursor: pointer;

background-color: #f0f0f0;

border-radius: 4px;

transition: background-color 0.3s;

}

.alphabet-button.active {

background-color: #FFFF99;

font-weight: bold;

}

.alphabet-button:hover {

background-color: #e0e0e0;

}

.clear-button, .cheat-button {

display: block;

width: 100%;

padding: 10px;

margin-top: 10px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

text-align: center;

transition: background-color 0.3s;

}

.clear-button {

background-color: #dc3545;

color: white;

}

.clear-button:hover {

background-color: #c82333;

}

.cheat-button {

background-color: #6f42c1;

color: white;

}

.cheat-button:hover {

background-color: #5a32a3;

}

.cheat-button:disabled {

background-color: #a89fc7;

cursor: not-allowed;

}

</style>

</head>

<body>

<div class="container">

<div class="main-content">

<h1>Te Reo Word Find #1</h1>

<table id="wordsearch">

<tr><td data-row="0" data-col="0">W</td><td data-row="0" data-col="1">A</td><td data-row="0" data-col="2">H</td><td data-row="0" data-col="3">A</td><td data-row="0" data-col="4">T</td><td data-row="0" data-col="5">U</td><td data-row="0" data-col="6">A</td><td data-row="0" data-col="7">R</td><td data-row="0" data-col="8">Ā</td><td data-row="0" data-col="9">Ē</td><td data-row="0" data-col="10">Ū</td><td data-row="0" data-col="11">M</td><td data-row="0" data-col="12">I</td><td data-row="0" data-col="13">W</td><td data-row="0" data-col="14">Ē</td></tr>

<tr><td data-row="1" data-col="0">A</td><td data-row="1" data-col="1">R</td><td data-row="1" data-col="2">E</td><td data-row="1" data-col="3">R</td><td data-row="1" data-col="4">O</td><td data-row="1" data-col="5">P</td><td data-row="1" data-col="6">U</td><td data-row="1" data-col="7">K</td><td data-row="1" data-col="8">U</td><td data-row="1" data-col="9">Ā</td><td data-row="1" data-col="10">I</td><td data-row="1" data-col="11">N</td><td data-row="1" data-col="12">G</td><td data-row="1" data-col="13">H</td><td data-row="1" data-col="14">E</td></tr>

<tr><td data-row="2" data-col="0">R</td><td data-row="2" data-col="1">I</td><td data-row="2" data-col="2">N</td><td data-row="2" data-col="3">G</td><td data-row="2" data-col="4">A</td><td data-row="2" data-col="5">K</td><td data-row="2" data-col="6">A</td><td data-row="2" data-col="7">N</td><td data-row="2" data-col="8">O</td><td data-row="2" data-col="9">H</td><td data-row="2" data-col="10">I</td><td data-row="2" data-col="11">Ū</td><td data-row="2" data-col="12">R</td><td data-row="2" data-col="13">N</td><td data-row="2" data-col="14">G</td></tr>

<tr><td data-row="3" data-col="0">I</td><td data-row="3" data-col="1">H</td><td data-row="3" data-col="2">U</td><td data-row="3" data-col="3">M</td><td data-row="3" data-col="4">Ā</td><td data-row="3" data-col="5">O</td><td data-row="3" data-col="6">W</td><td data-row="3" data-col="7">H</td><td data-row="3" data-col="8">I</td><td data-row="3" data-col="9">K</td><td data-row="3" data-col="10">E</td><td data-row="3" data-col="11">N</td><td data-row="3" data-col="12">G</td><td data-row="3" data-col="13">R</td><td data-row="3" data-col="14">Ā</td></tr>

<tr><td data-row="4" data-col="0">R</td><td data-row="4" data-col="1">I</td><td data-row="4" data-col="2">N</td><td data-row="4" data-col="3">G</td><td data-row="4" data-col="4">A</td><td data-row="4" data-col="5">R</td><td data-row="4" data-col="6">I</td><td data-row="4" data-col="7">N</td><td data-row="4" data-col="8">G</td><td data-row="4" data-col="9">A</td><td data-row="4" data-col="10">H</td><td data-row="4" data-col="11">E</td><td data-row="4" data-col="12">M</td><td data-row="4" data-col="13">Ū</td><td data-row="4" data-col="14">I</td></tr>

<tr><td data-row="5" data-col="0">W</td><td data-row="5" data-col="1">A</td><td data-row="5" data-col="2">E</td><td data-row="5" data-col="3">W</td><td data-row="5" data-col="4">A</td><td data-row="5" data-col="5">E</td><td data-row="5" data-col="6">R</td><td data-row="5" data-col="7">Ō</td><td data-row="5" data-col="8">T</td><td data-row="5" data-col="9">P</td><td data-row="5" data-col="10">I</td><td data-row="5" data-col="11">K</td><td data-row="5" data-col="12">Ā</td><td data-row="5" data-col="13">N</td><td data-row="5" data-col="14">G</td></tr>

<tr><td data-row="6" data-col="0">U</td><td data-row="6" data-col="1">P</td><td data-row="6" data-col="2">O</td><td data-row="6" data-col="3">K</td><td data-row="6" data-col="4">O</td><td data-row="6" data-col="5">Ā</td><td data-row="6" data-col="6">E</td><td data-row="6" data-col="7">I</td><td data-row="6" data-col="8">M</td><td data-row="6" data-col="9">Ū</td><td data-row="6" data-col="10">R</td><td data-row="6" data-col="11">H</td><td data-row="6" data-col="12">O</td><td data-row="6" data-col="13">W</td><td data-row="6" data-col="14">H</td></tr>

<tr><td data-row="7" data-col="0">M</td><td data-row="7" data-col="1">A</td><td data-row="7" data-col="2">I</td><td data-row="7" data-col="3">K</td><td data-row="7" data-col="4">U</td><td data-row="7" data-col="5">K</td><td data-row="7" data-col="6">U</td><td data-row="7" data-col="7">T</td><td data-row="7" data-col="8">E</td><td data-row="7" data-col="9">Ō</td><td data-row="7" data-col="10">P</td><td data-row="7" data-col="11">I</td><td data-row="7" data-col="12">N</td><td data-row="7" data-col="13">G</td><td data-row="7" data-col="14">Ā</td></tr>

<tr><td data-row="8" data-col="0">W</td><td data-row="8" data-col="1">A</td><td data-row="8" data-col="2">E</td><td data-row="8" data-col="3">W</td><td data-row="8" data-col="4">A</td><td data-row="8" data-col="5">E</td><td data-row="8" data-col="6">R</td><td data-row="8" data-col="7">A</td><td data-row="8" data-col="8">R</td><td data-row="8" data-col="9">O</td><td data-row="8" data-col="10">M</td><td data-row="8" data-col="11">Ū</td><td data-row="8" data-col="12">I</td><td data-row="8" data-col="13">H</td><td data-row="8" data-col="14">E</td></tr>

<tr><td data-row="9" data-col="0">T</td><td data-row="9" data-col="1">A</td><td data-row="9" data-col="2">R</td><td data-row="9" data-col="3">I</td><td data-row="9" data-col="4">N</td><td data-row="9" data-col="5">G</td><td data-row="9" data-col="6">A</td><td data-row="9" data-col="7">K</td><td data-row="9" data-col="8">Ō</td><td data-row="9" data-col="9">E</td><td data-row="9" data-col="10">T</td><td data-row="9" data-col="11">Ā</td><td data-row="9" data-col="12">I</td><td data-row="9" data-col="13">W</td><td data-row="9" data-col="14">H</td></tr>

<tr><td data-row="10" data-col="0">H</td><td data-row="10" data-col="1">O</td><td data-row="10" data-col="2">P</td><td data-row="10" data-col="3">E</td><td data-row="10" data-col="4">R</td><td data-row="10" data-col="5">Ā</td><td data-row="10" data-col="6">U</td><td data-row="10" data-col="7">M</td><td data-row="10" data-col="8">I</td><td data-row="10" data-col="9">K</td><td data-row="10" data-col="10">E</td><td data-row="10" data-col="11">Ō</td><td data-row="10" data-col="12">H</td><td data-row="10" data-col="13">N</td><td data-row="10" data-col="14">G</td></tr>

<tr><td data-row="11" data-col="0">T</td><td data-row="11" data-col="1">U</td><td data-row="11" data-col="2">R</td><td data-row="11" data-col="3">I</td><td data-row="11" data-col="4">P</td><td data-row="11" data-col="5">O</td><td data-row="11" data-col="6">K</td><td data-row="11" data-col="7">O</td><td data-row="11" data-col="8">H</td><td data-row="11" data-col="9">I</td><td data-row="11" data-col="10">W</td><td data-row="11" data-col="11">I</td><td data-row="11" data-col="12">K</td><td data-row="11" data-col="13">U</td><td data-row="11" data-col="14">P</td></tr>

<tr><td data-row="12" data-col="0">K</td><td data-row="12" data-col="1">A</td><td data-row="12" data-col="2">R</td><td data-row="12" data-col="3">U</td><td data-row="12" data-col="4">N</td><td data-row="12" data-col="5">I</td><td data-row="12" data-col="6">N</td><td data-row="12" data-col="7">I</td><td data-row="12" data-col="8">H</td><td data-row="12" data-col="9">O</td><td data-row="12" data-col="10">T</td><td data-row="12" data-col="11">E</td><td data-row="12" data-col="12">Ā</td><td data-row="12" data-col="13">W</td><td data-row="12" data-col="14">H</td></tr>

<tr><td data-row="13" data-col="0">K</td><td data-row="13" data-col="1">A</td><td data-row="13" data-col="2">K</td><td data-row="13" data-col="3">Ī</td><td data-row="13" data-col="4">Ū</td><td data-row="13" data-col="5">E</td><td data-row="13" data-col="6">T</td><td data-row="13" data-col="7">O</td><td data-row="13" data-col="8">M</td><td data-row="13" data-col="9">I</td><td data-row="13" data-col="10">H</td><td data-row="13" data-col="11">Ā</td><td data-row="13" data-col="12">N</td><td data-row="13" data-col="13">G</td><td data-row="13" data-col="14">R</td></tr>

<tr><td data-row="14" data-col="0">M</td><td data-row="14" data-col="1">A</td><td data-row="14" data-col="2">T</td><td data-row="14" data-col="3">I</td><td data-row="14" data-col="4">M</td><td data-row="14" data-col="5">A</td><td data-row="14" data-col="6">T</td><td data-row="14" data-col="7">I</td><td data-row="14" data-col="8">H</td><td data-row="14" data-col="9">E</td><td data-row="14" data-col="10">Ū</td><td data-row="14" data-col="11">R</td><td data-row="14" data-col="12">N</td><td data-row="14" data-col="13">G</td><td data-row="14" data-col="14">Ā</td></tr>

</table>

<div class="lists">

<div class="find">

<h2>Words to Find</h2>

<ul id="find-list">

<li data-word-index="0">WAHA</li>

<li data-word-index="1">ARERO</li>

<li data-word-index="2">RINGA</li>

<li data-word-index="3">IHU</li>

<li data-word-index="4">RINGARINGA</li>

<li data-word-index="5">WAEWAE</li>

<li data-word-index="6">UPOKO</li>

<li data-word-index="7">MAIKUKU</li>

<li data-word-index="8">WAEWAERARO</li>

<li data-word-index="9">TARINGA</li>

<li data-word-index="10">HOPE</li>

<li data-word-index="11">TURI</li>

<li data-word-index="12">KARU</li>

<li data-word-index="13">KAKĪ</li>

<li data-word-index="14">MATIMATI</li>

<li data-word-index="15">TUARĀ</li>

<li data-word-index="16">POKOHIWI</li>

<li data-word-index="17">PUKU</li>

<li data-word-index="18">KANOHI</li>

<li data-word-index="19">NIHO</li>

</ul>

</div>

<div class="found">

<h2>Found Words</h2>

<ul id="found-list"></ul>

</div>

<div class="alphabet-panel">

<h2>Māori Alphabet</h2>

<div id="alphabet-buttons"></div>

<button class="clear-button" onclick="clearHighlight()">Clear Highlights</button>

<button class="cheat-button" onclick="showSolution()">Cheat</button>

</div>

<script>

const table = document.getElementById('wordsearch');

const cells = [];

for (let row of table.rows) {

let r = [];

for (let cell of row.cells) {

r.push(cell);

}

cells.push(r);

}

const wordData = [

{ word: "WAHA", translation: "Mouth", coords: [[0,0],[0,1],[0,2],[0,3]], count: 0 },

{ word: "ARERO", translation: "Tongue", coords: [[1,0],[1,1],[1,2],[1,3],[1,4]], count: 0 },

{ word: "RINGA", translation: "Hand", coords: [[2,0],[2,1],[2,2],[2,3],[2,4]], count: 0 },

{ word: "IHU", translation: "Nose", coords: [[3,0],[3,1],[3,2]], count: 0 },

{ word: "RINGARINGA", translation: "Hands", coords: [[4,0],[4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9]], count: 0 },

{ word: "WAEWAE", translation: "Feet", coords: [[5,0],[5,1],[5,2],[5,3],[5,4],[5,5]], count: 0 },

{ word: "UPOKO", translation: "Head", coords: [[6,0],[6,1],[6,2],[6,3],[6,4]], count: 0 },

{ word: "MAIKUKU", translation: "Fingernail Toenail", coords: [[7,0],[7,1],[7,2],[7,3],[7,4],[7,5],[7,6]], count: 0 },

{ word: "WAEWAERARO", translation: "Legs", coords: [[8,0],[8,1],[8,2],[8,3],[8,4],[8,5],[8,6],[8,7],[8,8],[8,9]], count: 0 },

{ word: "TARINGA", translation: "Ear", coords: [[9,0],[9,1],[9,2],[9,3],[9,4],[9,5],[9,6]], count: 0 },

{ word: "HOPE", translation: "Waist", coords: [[10,0],[10,1],[10,2],[10,3]], count: 0 },

{ word: "TURI", translation: "Knee", coords: [[11,0],[11,1],[11,2],[11,3]], count: 0 },

{ word: "KARU", translation: "Eye", coords: [[12,0],[12,1],[12,2],[12,3]], count: 0 },

{ word: "KAKĪ", translation: "Neck", coords: [[13,0],[13,1],[13,2],[13,3]], count: 0 },

{ word: "MATIMATI", translation: "Fingers", coords: [[14,0],[14,1],[14,2],[14,3],[14,4],[14,5],[14,6],[14,7]], count: 0 },

{ word: "TUARĀ", translation: "Back", coords: [[0,4],[0,5],[0,6],[0,7],[0,8]], count: 0 },

{ word: "POKOHIWI", translation: "Shoulder", coords: [[11,4],[11,5],[11,6],[11,7],[11,8],[11,9],[11,10],[11,11]], count: 0 },

{ word: "PUKU", translation: "Stomach", coords: [[1,5],[1,6],[1,7],[1,8]], count: 0 },

{ word: "KANOHI", translation: "Face", coords: [[2,5],[2,6],[2,7],[2,8],[2,9],[2,10]], count: 0 },

{ word: "NIHO", translation: "Teeth", coords: [[12,6],[12,7],[12,8],[12,9]], count: 0 }

];

const words = wordData.map(d => d.word);

const wordIndexes = {};

words.forEach((w, i) => wordIndexes[w] = i);

const colorValues = ['#6495ED', '#FF7F50', '#9ACD32', '#FFC0CB', '#DAA520', '#BA55D3', '#40E0D0', '#FFD700', '#B0C4DE', '#DEB887', '#F08080', '#7B68EE', '#00FF7F', '#9370DB', '#FFA500', '#8A2BE2', '#CD5C5C', '#20B2AA', '#4682B4', '#FF6347'];

const maoriAlphabet = ['A', 'Ā', 'E', 'Ē', 'I', 'Ī', 'O', 'Ō', 'U', 'Ū', 'H', 'K', 'M', 'N', 'P', 'R', 'T', 'W', 'NG', 'WH'];

let highlightedLetters = new Set();

let startCell = null;

let selectedCells = [];

let isDragging = false;

let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

let touchStartTime = 0;

let touchStartCell = null;

let cheatTimeout = null;

function getCellsInLine(startRow, startCol, endRow, endCol) {

const cellsInLine = [];

let currentRow = startRow;

let currentCol = startCol;

const dx = Math.sign(endCol - startCol);

const dy = Math.sign(endRow - startRow);

while (true) {

if (cells[currentRow] && cells[currentRow][currentCol]) {

cellsInLine.push(cells[currentRow][currentCol]);

} else {

break;

}

if (currentRow === endRow && currentCol === endCol) {

break;

}

currentRow += dy;

currentCol += dx;

}

return cellsInLine;

}

function addToSelection(cell) {

cell.classList.add('selected');

selectedCells.push(cell);

}

function clearSelection() {

selectedCells.forEach(c => c.classList.remove('selected'));

selectedCells = [];

}

function checkWord() {

if (selectedCells.length < 2) {

clearSelection();

return;

}

let wordStr = selectedCells.map(c => c.innerText).join('');

let foundWordIndex = -1;

const foundWord = words.find(w => w === wordStr || w === [...wordStr].reverse().join(''));

if (foundWord) {

foundWordIndex = words.indexOf(foundWord);

}

if (foundWordIndex !== -1) {

const originalWord = words[foundWordIndex];

wordData[foundWordIndex].count++;

const findLi = document.querySelector(`#find-list li[data-word-index="${foundWordIndex}"]`);

if (findLi) {

findLi.remove();

}

let foundLi = document.querySelector(`#found-list li[data-word-index="${foundWordIndex}"]`);

if (!foundLi) {

foundLi = document.createElement('li');

foundLi.dataset.wordIndex = foundWordIndex;

foundLi.innerText = `${originalWord} (${wordData[foundWordIndex].translation})`;

foundLi.style.color = colorValues[foundWordIndex];

document.getElementById('found-list').appendChild(foundLi);

}

selectedCells.forEach(c => {

c.classList.remove('selected');

c.classList.remove('highlighted');

c.classList.add(`found${foundWordIndex}`);

});

} else {

clearSelection();

}

// Mouse/Touch Event Handlers

function handleStart(e) {

e.preventDefault();

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

clearSelection();

startCell = cell;

isDragging = true;

addToSelection(startCell);

if (e.type === 'touchstart') {

touchStartTime = Date.now();

touchStartCell = cell;

}

// console.log('Start event:', e.type); // Uncomment for debugging

}

function handleMove(e) {

if (!isDragging) return;

e.preventDefault();

const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;

const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;

const currentCell = document.elementFromPoint(clientX, clientY);

if (!currentCell || !currentCell.matches('#wordsearch td')) return;

const startRow = parseInt(startCell.dataset.row);

const startCol = parseInt(startCell.dataset.col);

const endRow = parseInt(currentCell.dataset.row);

const endCol = parseInt(currentCell.dataset.col);

const dy = Math.abs(endRow - startRow);

const dx = Math.abs(endCol - startCol);

if ((dy === dx) || (dy === 0) || (dx === 0)) {

clearSelection();

selectedCells = getCellsInLine(startRow, startCol, endRow, endCol);

selectedCells.forEach(cell => cell.classList.add('selected'));

} else {

clearSelection();

}

// console.log('Move event:', e.type); // Uncomment for debugging

}

function handleEnd(e) {

if (!isDragging) return;

isDragging = false;

if (e.type === 'touchend') {

const duration = Date.now() - touchStartTime;

if (duration < 200 && selectedCells.length === 1 && touchStartCell === selectedCells[0]) {

clearSelection();

return;

}

checkWord();

// console.log('End event:', e.type); // Uncomment for debugging

}

function handleClick(e) {

if (e.type === 'touchstart') return; // Ignore touch clicks to avoid conflicts

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

if (startCell && startCell !== cell) {

const startRow = parseInt(startCell.dataset.row);

const startCol = parseInt(startCell.dataset.col);

const endRow = parseInt(cell.dataset.row);

const endCol = parseInt(cell.dataset.col);

const dy = Math.abs(endRow - startRow);

const dx = Math.abs(endCol - startCol);

if ((dy === dx) || (dy === 0) || (dx === 0)) {

clearSelection();

selectedCells = getCellsInLine(startRow, startCol, endRow, endCol);

selectedCells.forEach(c => c.classList.add('selected'));

checkWord();

startCell = null;

return;

}

clearSelection();

startCell = cell;

addToSelection(cell);

// console.log('Click event:', e.type); // Uncomment for debugging

}

table.addEventListener('mousedown', handleStart);

table.addEventListener('mousemove', handleMove);

document.addEventListener('mouseup', handleEnd);

table.addEventListener('touchstart', handleStart);

table.addEventListener('touchmove', handleMove);

document.addEventListener('touchend', handleEnd);

table.addEventListener('click', handleClick);

function showSolution() {

const cheatButton = document.querySelector('.cheat-button');

if (cheatTimeout || cheatButton.disabled) return;

cheatButton.disabled = true;

const originalClasses = new Map();

cells.forEach((row, r) => {

row.forEach((cell, c) => {

originalClasses.set(cell, cell.className || '');

cell.classList.remove('selected', 'highlighted');

for (let i = 0; i < wordData.length; i++) {

cell.classList.remove(`found${i}`);

}

});

wordData.forEach((word, index) => {

console.log(`Highlighting ${word.word} at coords: ${JSON.stringify(word.coords)}`); // Debug log

word.coords.forEach(([r, c]) => {

if (cells[r] && cells[r][c]) {

cells[r][c].classList.add(`found${index}`);

}

});

cheatTimeout = setTimeout(() => {

cells.forEach(row => row.forEach(cell => {

cell.className = originalClasses.get(cell) || '';

}));

cheatButton.disabled = false;

cheatTimeout = null;

console.log('Cheat timeout completed'); // Debug log

}, 2000);

}

function createAlphabetButtons() {

const panel = document.getElementById('alphabet-buttons');

maoriAlphabet.forEach(letter => {

const button = document.createElement('div');

button.classList.add('alphabet-button');

button.innerText = letter;

button.addEventListener('click', () => {

if (highlightedLetters.has(letter)) {

highlightedLetters.delete(letter);

button.classList.remove('active');

} else {

highlightedLetters.add(letter);

button.classList.add('active');

}

updateHighlights();

});

panel.appendChild(button);

});

}

function updateHighlights() {

cells.forEach(row => row.forEach(cell => {

if (!cell.classList.toString().includes('found')) {

cell.classList.remove('highlighted');

}

}));

highlightedLetters.forEach(letter => {

if (letter.length === 2) {

const firstLetter = letter[0];

const secondLetter = letter[1];

cells.forEach((row, rIdx) => {

row.forEach((cell, cIdx) => {

if (cIdx < row.length - 1 && cell.innerText === firstLetter && row[cIdx + 1].innerText === secondLetter) {

if (!cell.classList.toString().includes('found')) {

cell.classList.add('highlighted');

row[cIdx + 1].classList.add('highlighted');

}

});

} else {

cells.forEach(row => {

row.forEach(cell => {

if (cell.innerText === letter && !cell.classList.toString().includes('found')) {

cell.classList.add('highlighted');

}

});

}

});

}

function clearHighlight() {

highlightedLetters.clear();

document.querySelectorAll('.alphabet-button').forEach(button => button.classList.remove('active'));

updateHighlights();

}

createAlphabetButtons();

</script>

</body>

</html>

OK - THIS GOT PASTED TO GROK, AND IT ACTUALLY WORKED, SO keeping the "prompt" for future reverence (the painful code is deleted, always keeping the best code ready for the next step): current bugs - the CHEAT highlights words that are not words and not on the list, only about half the words are selectable & findable. However, there is some working code. What is needed? A complete reset of the puzzle grid, showing the end puzzle highlighting the correct words - this is a good starting point. Then I suspect the other code will work. To get this fixed I may have to do it in sections - not expect AI to do it, as it just makes things worse, not better. Step by step is required. I wonder if I can create code to create the answer, then give that answer to AI to generate code. Maybe I need to start with the WORKING code, then add the NEW features "CHEAT" to that code, then I have a NEW START POINT - Then try to create a NEW wordfind from that point. At the moment I seem to have tried copilot (hopeless, can not even give it the code), Grok, struggling, Gemini struggles and ChatGPT struggles. I do not get how hard this is for them, I think the code is too big and they do not understand which parts to change. So while fixing one thing they muck up another, it is at the edge of what they can actually do, This is why AIprompting is so tricky, you need to understand what is possible in order to create what you want to create the best way, and you are doing this is a very fast changing environment, unpredictable & random. Strange that one of the puzzles has words placed various ways - was this a good day with Grok? No idea.

Prompt stored (as limit reached):

Ok, you used the cell row 0, col 4 (if there is a 0) for the ē and this is where the "t" for tuarā was - can you move tuāra to where you keep highlighting for the answer - the top right cnr? or otherwise fix this issue, that you have failed to fix at least twice. Interesting that the incorrect placement of the CHEAT highlight is exactly 5 letters - the same as the missed out word 'tuarā' that was previously selectable - but no longer exists.

Message limit reachedSign up to continue with GrokEnjoy higher rate limits, history, attachments, private chats, and more when you sign up for freeHow can Grok help?

SO I actually fixed it quickly myself- simply by correcting the placement of Tuarā in the code. [Learning when to manually code moment].

<!DOCTYPE html>

<head>

<style>

body { font-family: Arial, sans-serif; }

.container { max-width: 1400px; margin: 0 auto; display: flex; }

#wordsearch { border-collapse: collapse; margin: 20px 0; }

#wordsearch td { width: 30px; height: 30px; text-align: center; font-size: 20px; border: 1px solid black; cursor: pointer; user-select: none; }

.selected { background-color: #32CD32 !important; color: black !important; }

.highlighted { background-color: #FFFF99 !important; color: black !important; }

.found0 { background-color: #6495ED !important; color: white !important; }

.found1 { background-color: #FF7F50 !important; color: white !important; }

.found2 { background-color: #9ACD32 !important; color: white !important; }

.found3 { background-color: #FFC0CB !important; color: black !important; }

.found4 { background-color: #DAA520 !important; color: white !important; }

.found5 { background-color: #BA55D3 !important; color: white !important; }

.found6 { background-color: #40E0D0 !important; color: black !important; }

.found7 { background-color: #FFD700 !important; color: black !important; }

.found8 { background-color: #B0C4DE !important; color: black !important; }

.found9 { background-color: #DEB887 !important; color: black !important; }

.found10 { background-color: #F08080 !important; color: white !important; }

.found11 { background-color: #7B68EE !important; color: white !important; }

.found12 { background-color: #00FF7F !important; color: black !important; }

.found13 { background-color: #9370DB !important; color: white !important; }

.found14 { background-color: #FFA500 !important; color: black !important; }

.found15 { background-color: #8A2BE2 !important; color: white !important; }

.found16 { background-color: #CD5C5C !important; color: white !important; }

.found17 { background-color: #20B2AA !important; color: white !important; }

.found18 { background-color: #4682B4 !important; color: black !important; }

.found19 { background-color: #FF6347 !important; color: white !important; }

.found20 { background-color: #FF4500 !important; color: white !important; }

.found-word-color { font-weight: bold; }

.word-count { font-size: 14px; font-weight: normal; margin-left: 5px; }

.lists { display: flex; justify-content: space-around; flex: 1; }

.find, .found { width: 45%; }

ul { list-style-type: none; padding: 0; }

li { margin: 5px 0; font-size: 18px; }

.alphabet-panel { width: 200px; margin-left: 20px; }

.alphabet-panel h2 { font-size: 18px; margin-bottom: 10px; }

.alphabet-button { display: inline-block; width: 30px; height: 30px; margin: 2px; text-align: center; line-height: 30px; font-size: 16px; border: 1px solid black; cursor: pointer; background-color: #f0f0f0; }

.alphabet-button.active { background-color: #FFFF99; }

.clear-button, .cheat-button { display: block; width: 100%; padding: 10px; margin-top: 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; text-align: center; }

.clear-button { background-color: #dc3545; color: white; }

.clear-button:hover { background-color: #c82333; }

.cheat-button { background-color: #6f42c1; color: white; }

.cheat-button:hover { background-color: #5a32a3; }

</style>

</head>

<body>

</table>

<h2>Words to Find</h2>

<li data-word-index="0">AROHA</li>

<li data-word-index="3">TĒNĀKOE</li>

<li data-word-index="4">HAEREMAI</li>

<li data-word-index="5">KIAORA</li>

<li data-word-index="6">WHĀNAU</li>

<li data-word-index="7">HĀNGI</li>

<li data-word-index="9">AOTEAROA</li>

<li data-word-index="10">PŌWHIRI</li>

<li data-word-index="11">MĀORI</li>

<li data-word-index="12">MANUHIRI</li>

<li data-word-index="13">KŌRERO</li>

<li data-word-index="15">MARAE</li>

<li data-word-index="16">TAMARIKI</li>

<li data-word-index="18">WHARE</li>

<li data-word-index="19">TĒNĀKOUTOU</li>

<li data-word-index="20">MARAMA</li>

</ul>

</div>

<h2>Found Words</h2>

</div>

<h2>Māori Alphabet</h2>

<button class="clear-button" onclick="clearHighlight()">Clear Highlights</button>

<button class="cheat-button" onclick="showSolution()">Cheat</button>

</div>

<script>

const table = document.getElementById('wordsearch');

const cells = [];

for (let row of table.rows) {

let r = [];

for (let cell of row.cells) {

r.push(cell);

}

cells.push(r);

}

const wordData = [

{ word: "AROHA", coords: [[0,6],[0,7],[0,8],[0,9],[0,10]], count: 0 },

{ word: "KAI", coords: [[6,2],[6,3],[6,4]], count: 0 },

{ word: "WAI", coords: [[2,9],[2,10],[2,11]], count: 0 },

{ word: "TĒNĀKOE", coords: [[10,1],[10,2],[10,3],[10,4],[10,5],[10,6],[10,7]], count: 0 },

{ word: "HAEREMAI", coords: [[13,7],[13,8],[13,9],[13,10],[13,11],[13,12],[13,13],[13,14]], count: 0 },

{ word: "KIAORA", coords: [[12,6],[12,7],[12,8],[12,9],[12,10],[12,11]], count: 0 },

{ word: "WHĀNAU", coords: [[11,0],[11,1],[11,2],[11,3],[11,4],[11,5]], count: 0 },

{ word: "HĀNGI", coords: [[8,2],[8,3],[8,4],[8,5],[8,6]], count: 0 },

{ word: "MAHI", coords: [[5,8],[5,9],[5,10],[5,11]], count: 0 },

{ word: "AOTEAROA", coords: [[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9]], count: 0 },

{ word: "PŌWHIRI", coords: [[11,7],[11,8],[11,9],[11,10],[11,11],[11,12],[11,13]], count: 0 },

{ word: "MĀORI", coords: [[5,1],[5,2],[5,3],[5,4],[5,5]], count: 0 },

{ word: "MANUHIRI", coords: [[2,1],[2,2],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8]], count: 0 },

{ word: "KŌRERO", coords: [[1,9],[1,10],[1,11],[1,12],[1,13],[1,14]], count: 0 },

{ word: "HAKA", coords: [[7,2],[7,3],[7,4],[7,5]], count: 0 },

{ word: "MARAE", coords: [[3,1],[3,2],[3,3],[3,4],[3,5]], count: 0 },

{ word: "TAMARIKI", coords: [[9,4],[9,5],[9,6],[9,7],[9,8],[9,9],[9,10],[9,11]], count: 0 },

{ word: "WAKA", coords: [[12,0],[12,1],[12,2],[12,3]], count: 0 },

{ word: "WHARE", coords: [[6,5],[6,6],[6,7],[6,8],[6,9]], count: 0 },

{ word: "TĒNĀKOUTOU", coords: [[14,2],[14,3],[14,4],[14,5],[14,6],[14,7],[14,8],[14,9],[14,10],[14,11]], count: 0 },

{ word: "MARAMA", coords: [[7,8],[7,9],[7,10],[7,11],[7,12],[7,13]], count: 0 }

];

const words = wordData.map(d => d.word);

const wordIndexes = {};

words.forEach((w, i) => wordIndexes[w] = i);

const colorValues = ['#6495ED', '#FF7F50', '#9ACD32', '#FFC0CB', '#DAA520', '#BA55D3', '#40E0D0', '#FFD700', '#B0C4DE', '#DEB887', '#F08080', '#7B68EE', '#00FF7F', '#9370DB', '#FFA500', '#8A2BE2', '#CD5C5C', '#20B2AA', '#4682B4', '#FF6347', '#FF4500'];

const maoriAlphabet = ['A', 'Ā', 'E', 'Ē', 'I', 'Ī', 'O', 'Ō', 'U', 'Ū', 'H', 'K', 'M', 'N', 'P', 'R', 'T', 'W', 'NG', 'WH'];

let highlightedLetters = new Set();

let selectedCells = [];

let isDragging = false;

let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

let touchStartTime = 0;

let touchStartCell = null;

let cheatTimeout = null;

function clearSelection() {

document.querySelectorAll('.selected').forEach(c => c.classList.remove('selected'));

selectedCells = [];

}

function getCellsBetween(start, end) {

const startRow = parseInt(start.dataset.row);

const startCol = parseInt(start.dataset.col);

const endRow = parseInt(end.dataset.row);

const endCol = parseInt(end.dataset.col);

const dy = endRow - startRow;

const dx = endCol - startCol;

if (Math.abs(dy) !== Math.abs(dx) && dx !== 0 && dy !== 0) {

return null;

}

const newSelection = [];

const length = Math.max(Math.abs(dy), Math.abs(dx));

const stepY = dy === 0 ? 0 : dy / length;

const stepX = dx === 0 ? 0 : dx / length;

for (let i = 0; i <= length; i++) {

const r = Math.round(startRow + i * stepY);

const c = Math.round(startCol + i * stepX);

if (cells[r] && cells[r][c]) {

newSelection.push(cells[r][c]);

} else {

return null;

}

return newSelection;

}

function isAdjacent(cell1, cell2) {

const r1 = parseInt(cell1.dataset.row);

const c1 = parseInt(cell1.dataset.col);

const r2 = parseInt(cell2.dataset.row);

const c2 = parseInt(cell2.dataset.col);

return Math.abs(r1 - r2) <= 1 && Math.abs(c1 - c2) <= 1;

}

function handleStart(e) {

e.preventDefault();

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

isDragging = true;

clearSelection();

cell.classList.add('selected');

selectedCells = [cell];

if (e.type === 'touchstart') {

touchStartTime = Date.now();

touchStartCell = cell;

}

// console.log('Start event:', e.type); // Uncomment for debugging

}

function handleMove(e) {

if (!isDragging) return;

e.preventDefault();

const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;

const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;

const currentCell = document.elementFromPoint(clientX, clientY);

if (!currentCell || !currentCell.matches('#wordsearch td')) return;

const path = getCellsBetween(selectedCells[0], currentCell);

if (path) {

clearSelection();

path.forEach(cell => cell.classList.add('selected'));

selectedCells = path;

}

// console.log('Move event:', e.type); // Uncomment for debugging

}

function handleEnd(e) {

if (!isDragging) return;

isDragging = false;

if (e.type === 'touchend') {

const duration = Date.now() - touchStartTime;

if (duration < 200 && selectedCells.length === 1 && touchStartCell === selectedCells[0]) {

clearSelection();

return;

}

checkWord();

clearSelection();

// console.log('End event:', e.type); // Uncomment for debugging

}

function handleClick(e) {

if (e.type === 'touchstart') return; // Ignore touch clicks to avoid conflicts

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

if (selectedCells.length === 1) {

const twoClickSelection = getCellsBetween(selectedCells[0], cell);

if (twoClickSelection) {

clearSelection();

twoClickSelection.forEach(c => c.classList.add('selected'));

selectedCells = twoClickSelection;

checkWord();

clearSelection();

return;

}

clearSelection();

cell.classList.add('selected');

selectedCells = [cell];

// console.log('Click event:', e.type); // Uncomment for debugging

}

table.addEventListener('mousedown', handleStart);

table.addEventListener('mousemove', handleMove);

document.addEventListener('mouseup', handleEnd);

table.addEventListener('touchstart', handleStart);

table.addEventListener('touchmove', handleMove);

document.addEventListener('touchend', handleEnd);

table.addEventListener('click', handleClick);

function checkWord() {

if (!selectedCells || selectedCells.length < 2) {

clearSelection();

return;

}

let wordStr = selectedCells.map(c => c.innerText).join('');

let revStr = [...wordStr].reverse().join('');

let foundWordIndex = -1;

const normalize = str => str.replace(/[ĀĒĪ�OŪ]/g, c => ({'Ā': 'A', 'Ē': 'E', 'Ī': 'I', 'Ō': 'O', 'Ū': 'U'}[c]));

const normalizedWordStr = normalize(wordStr);

const normalizedRevStr = normalize(revStr);

const normalizedWords = words.map(normalize);

if (normalizedWords.includes(normalizedWordStr)) {

foundWordIndex = normalizedWords.indexOf(normalizedWordStr);

} else if (normalizedWords.includes(normalizedRevStr)) {

foundWordIndex = normalizedWords.indexOf(normalizedRevStr);

}

if (foundWordIndex !== -1) {

const foundWord = wordData[foundWordIndex].word;

wordData[foundWordIndex].count++;

let foundLi = document.querySelector(`#found-list li[data-word-index="${foundWordIndex}"]`);

if (foundLi) {

const countSpan = foundLi.querySelector('.word-count');

countSpan.innerText = wordData[foundWordIndex].count > 1 ? `(+${wordData[foundWordIndex].count - 1})` : '';

} else {

let newLi = document.createElement('li');

newLi.dataset.wordIndex = foundWordIndex;

newLi.innerText = foundWord;

newLi.style.color = colorValues[foundWordIndex];

const countSpan = document.createElement('span');

countSpan.classList.add('word-count');

countSpan.innerText = wordData[foundWordIndex].count > 1 ? `(+${wordData[foundWordIndex].count - 1})` : '';

newLi.appendChild(countSpan);

document.getElementById('found-list').appendChild(newLi);

const findLi = document.querySelector(`#find-list li[data-word-index="${foundWordIndex}"]`);

if (findLi) {

findLi.remove();

}

selectedCells.forEach(c => {

c.classList.remove('selected');

c.classList.add(`found${foundWordIndex}`);

});

} else {

clearSelection();

}

function showSolution() {

if (cheatTimeout) {

clearTimeout(cheatTimeout);

}

const originalClasses = new Map();

cells.forEach((row, r) => {

row.forEach((cell, c) => {

originalClasses.set(cell, cell.className || '');

});

cells.forEach(row => row.forEach(cell => {

cell.classList.remove('selected', 'highlighted');

for (let i = 0; i <= 20; i++) {

cell.classList.remove(`found${i}`);

}

}));

wordData.forEach((word, index) => {

word.coords.forEach(([r, c]) => {

if (cells[r] && cells[r][c]) {

cells[r][c].classList.add(`found${index}`);

}

});

cheatTimeout = setTimeout(() => {

cells.forEach(row => row.forEach(cell => {

cell.className = originalClasses.get(cell) || '';

}));

// console.log('Cheat timeout completed'); // Uncomment for debugging

cheatTimeout = null;

}, 2000);

}

function createAlphabetButtons() {

const panel = document.getElementById('alphabet-buttons');

maoriAlphabet.forEach(letter => {

const button = document.createElement('div');

button.classList.add('alphabet-button');

button.innerText = letter;

button.addEventListener('click', () => {

if (highlightedLetters.has(letter)) {

highlightedLetters.delete(letter);

button.classList.remove('active');

clearLetterHighlight(letter);

} else {

highlightedLetters.add(letter);

button.classList.add('active');

highlightLetter(letter);

}

});

panel.appendChild(button);

});

}

function highlightLetter(letter) {

if (letter === 'NG' || letter === 'WH') {

cells.forEach(row => {

row.forEach((cell, cIdx) => {

if (cIdx < row.length - 1) {

if ((letter === 'NG' && cell.innerText === 'N' && row[cIdx + 1].innerText === 'G') ||

(letter === 'WH' && cell.innerText === 'W' && row[cIdx + 1].innerText === 'H')) {

cell.classList.add('highlighted');

row[cIdx + 1].classList.add('highlighted');

}

});

} else {

cells.forEach(row => {

row.forEach(cell => {

if (cell.innerText === letter) {

cell.classList.add('highlighted');

}

});

}

function clearLetterHighlight(letter) {

if (letter === 'NG' || letter === 'WH') {

cells.forEach(row => {

row.forEach((cell, cIdx) => {

if (cIdx < row.length - 1) {

if ((letter === 'NG' && cell.innerText === 'N' && row[cIdx + 1].innerText === 'G') ||

(letter === 'WH' && cell.innerText === 'W' && row[cIdx + 1].innerText === 'H')) {

cell.classList.remove('highlighted');

row[cIdx + 1].classList.remove('highlighted');

}

});

} else {

cells.forEach(row => {

row.forEach(cell => {

if (cell.innerText === letter) {

cell.classList.remove('highlighted');

}

});

}

function clearHighlight() {

highlightedLetters.forEach(letter => clearLetterHighlight(letter));

highlightedLetters.clear();

document.querySelectorAll('.alphabet-button').forEach(button => button.classList.remove('active'));

}

createAlphabetButtons();

</script>

</body>

</html>