nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add crossword puzzle item type

Browse Source 
Admin enters Across/Down words and clues; server auto-generates the grid
using a backtracking placement algorithm (longest-first, intersection-based).
Students fill in the interactive grid with click-to-select, direction toggle,
arrow-key navigation, and Tab-to-next-word. Auto-graded per word on submit,
with correct/wrong color highlighting on the results view. Includes a print
worksheet option for blank paper practice.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-08-01 17:56:46 -04:00
1 parent 60bfe3ca4a
commit 682534a061
6 files changed
+680 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/styles.css
+52
View File
@@ -925,3 +925,55 @@ body.theme-indigo { --accent: #5b6abf; --accent-dark: #4a57a0; --bg: #f4f5ff; }
#toast.toast-error { background: var(--bad); }
#toast.toast-out { opacity: 0; transform: translateY(0.5rem); }
.planner-pending { border: 2px dashed var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important; color: var(--accent) !important; opacity: 0.85; cursor: default; }
/* ---------- crossword ---------- */
.cw-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem; }
.cw-grid-wrap { overflow: auto; }
.cw-grid { display: grid; border: 2px solid #555; line-height: 1; width: fit-content; }
.cw-cell {
width: 34px; height: 34px;
background: #fff; border: 1px solid #999;
position: relative; box-sizing: border-box; flex-shrink: 0;
}
.cw-cell.black { background: #222; border-color: #222; }
.cw-cell.selected { background: color-mix(in srgb, var(--accent) 60%, #fff); }
.cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 25%, #fff); }
.cw-cell.correct-word { background: #c8f0c8; }
.cw-cell.wrong-word { background: #f8d0d0; }
.cw-num {
position: absolute; top: 1px; left: 2px;
font-size: 7px; line-height: 1; color: #333;
pointer-events: none; z-index: 1;
}
.cw-input {
position: absolute; inset: 0; width: 100%; height: 100%;
border: none; background: transparent; text-align: center;
font-size: 1rem; font-weight: 700; text-transform: uppercase;
font-family: monospace; cursor: pointer; color: inherit;
padding-top: 8px; caret-color: transparent; outline: none;
}
.cw-sidebar { flex: 1; min-width: 180px; max-width: 320px; }
.cw-clues { margin-bottom: 1rem; }
.cw-clues h3 { font-size: 0.9rem; margin-bottom: 0.35rem; }
.cw-clue-list { list-style: none; padding: 0; margin: 0; }
.cw-clue-list li {
padding: 0.2rem 0.35rem; font-size: 0.85rem;
border-radius: 4px; cursor: pointer; line-height: 1.35;
}
.cw-clue-list li.word-hi { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.cw-clue-list li.selected-clue { background: var(--accent); color: #fff; }
.cw-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* admin editor crossword rows */
.cw-entry-cols { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cw-clue-row { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; align-items: center; }
@media (prefers-color-scheme: dark) {
.cw-cell { background: #2a2a2a; border-color: #555; }
.cw-cell.black { background: #111; border-color: #111; }
.cw-num { color: #ccc; }
.cw-input { color: #eee; }
.cw-cell.selected { background: color-mix(in srgb, var(--accent) 50%, #2a2a2a); }
.cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 25%, #2a2a2a); }
.cw-cell.correct-word { background: #1a3a1a; }
.cw-cell.wrong-word { background: #3a1a1a; }
}