Image: Jordan Kay
Test your local knowledge by sorting these 16 words into four themed groups. Each group consists of four items, no repeats, and relates to Seattle in some way.
const solutions = [ ["Apple", "Banana", "Grape", "Orange"], ["Violin", "Piano", "Guitar", "Drums"], ["Mercury", "Venus", "Earth", "Mars"], ["Red", "Blue", "Green", "Yellow"]];
const grid = document.getElementById("grid");const message = document.getElementById("message");let selected = [];
function renderGrid() { grid.innerHTML = ""; words.forEach(word => { const div = document.createElement("div"); div.textContent = word; div.className = "word"; div.onclick = () => toggleSelect(div); grid.appendChild(div); });}
function toggleSelect(div) { if (div.classList.contains("grouped")) return; div.classList.toggle("selected"); if (div.classList.contains("selected")) { selected.push(div.textContent); } else { selected = selected.filter(w => w !== div.textContent); }}
document.getElementById("checkBtn").onclick = () => { if (selected.length !== 4) { message.textContent = "Select exactly 4 words."; return; } let correct = solutions.some(group => group.every(w => selected.includes(w))); if (correct) { document.querySelectorAll(".selected").forEach(div => { div.classList.remove("selected"); div.classList.add("grouped"); }); message.textContent = "✅ Correct group!"; } else { document.querySelectorAll(".selected").forEach(div => div.classList.remove("selected")); message.textContent = "❌ Try again."; } selected = [];};
renderGrid();
Published in the The Innovation Issue issue of Seattle Met.
|
|
|