Require editable inputs in writable activity sections

apps/api/src/routes/adt-preview.ts

@@ -64,6 +64,28 @@ function getMimeType(filePath: string): string {
   return MIME_TYPES[path.extname(filePath).toLowerCase()] ?? "application/octet-stream"
 }
 
+/** Highest mtime across base.js + everything under modules/ — used to detect
+ *  when the pre-built bundle is out of date relative to its sources. */
+function maxSourceMtime(webAssetsDir: string): number {
+  let max = 0
+  const baseJs = path.join(webAssetsDir, "base.js")
+  if (fs.existsSync(baseJs)) max = Math.max(max, fs.statSync(baseJs).mtimeMs)
+  const modulesDir = path.join(webAssetsDir, "modules")
+  if (!fs.existsSync(modulesDir)) return max
+  const walk = (dir: string) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name)
+      if (entry.isDirectory()) walk(full)
+      else if (entry.isFile()) {
+        const m = fs.statSync(full).mtimeMs
+        if (m > max) max = m
+      }
+    }
+  }
+  walk(modulesDir)
+  return max
+}
+
 // ---------------------------------------------------------------------------
 // Caches (built lazily per book)
 // ---------------------------------------------------------------------------
@@ -443,21 +465,28 @@ export function createAdtPreviewRoutes(
       throw new HTTPException(403, { message: "Forbidden" })
     }
 
-    // Auto-build base.bundle.min.js on-the-fly if it doesn't exist (dev mode).
-    // The file is gitignored and normally pre-built by `pnpm --filter @adt/api bundle`.
-    if (!fs.existsSync(resolved) && assetPath === "base.bundle.min.js") {
+    // Auto-build base.bundle.min.js on-the-fly if it's missing OR stale relative
+    // to its source modules (dev mode). The file is gitignored and normally
+    // pre-built by `pnpm --filter @adt/api bundle`. Skip in packaged mode
+    // (ADT_RESOURCES_ZIP) where esbuild isn't available inside the pkg'd binary.
+    if (assetPath === "base.bundle.min.js" && !process.env.ADT_RESOURCES_ZIP) {
       const entryPoint = path.join(webAssetsDir, "base.js")
       if (fs.existsSync(entryPoint)) {
-        const esbuild = await import("esbuild")
-        await esbuild.build({
-          entryPoints: [entryPoint],
-          bundle: true,
-          minify: true,
-          sourcemap: true,
-          format: "esm",
-          target: "es2020",
-          outfile: resolved,
-        })
+        const bundleMtime = fs.existsSync(resolved) ? fs.statSync(resolved).mtimeMs : 0
+        const isStale =
+          bundleMtime === 0 || maxSourceMtime(webAssetsDir) > bundleMtime
+        if (isStale) {
+          const esbuild = await import("esbuild")
+          await esbuild.build({
+            entryPoints: [entryPoint],
+            bundle: true,
+            minify: true,
+            sourcemap: true,
+            format: "esm",
+            target: "es2020",
+            outfile: resolved,
+          })
+        }
       }
     }
 

assets/adt/modules/activities/fill_in_the_blank.js

@@ -37,7 +37,7 @@ export const hydrateFitbSentences = (container) => {
 
             const hydratedHtml = html.replace(
                 /\[\[blank:item-(\d+)(?::([^\]]+))?\]\]/g,
-                (_match, itemNum, hint) => {
+                (match, itemNum, hint, offset, source) => {
                     ariaCounter++;
                     const placeholderAttr = hint
                         ? ` placeholder="${hint.replace(/"/g, '"')}"`
@@ -49,13 +49,49 @@ export const hydrateFitbSentences = (container) => {
                     const label = blankLabel.startsWith('fitb-')
                         ? (totalBlanks > 1 ? `Blank ${ariaCounter} of ${totalBlanks}` : 'Blank')
                         : blankLabel;
-                    // Size the input to roughly fit the expected answer.
-                    // Use the hint length when available, otherwise a sensible default.
-                    const charWidth = hint ? Math.max(hint.length + 2, 6) : 8;
+                    // Detect word-internal blanks — the marker sits INSIDE a word rather
+                    // than between words (e.g. "en[[blank:item-1]]ro" for a missing-letter
+                    // exercise). Used for tighter spacing, and as a fallback for sizing
+                    // when no answer is available yet (e.g. preview before answers gen).
+                    const WORD_CHAR = /\p{L}/u;
+                    const prevChar = source[offset - 1] || '';
+                    const nextChar = source[offset + match.length] || '';
+                    const isWordInternal =
+                        !hint && (WORD_CHAR.test(prevChar) || WORD_CHAR.test(nextChar));
+                    // Look up the correct answer for this blank (injected as a global by
+                    // package-web). Pipe-separated alternatives use the longest variant so
+                    // every acceptable answer fits. Size to answer length + 1 for safety.
+                    const answer = typeof window !== 'undefined'
+                        ? window.correctAnswers?.[`item-${itemNum}`]
+                        : undefined;
+                    const answerLength = typeof answer === 'string' && answer.length > 0
+                        ? answer.split('|').reduce((max, a) => Math.max(max, a.length), 0)
+                        : 0;
+                    // Size priority:
+                    //   1. Explicit hint in the marker (`[[blank:item-N:hint]]`) — hint IS the answer shape
+                    //   2. Known answer from window.correctAnswers — size to answer length + 1
+                    //   3. Word-internal heuristic — narrow single-letter slot
+                    //   4. Fallback — default word-sized slot
+                    let charWidth;
+                    let minWidth;
+                    if (hint) {
+                        charWidth = Math.max(hint.length + 2, 6);
+                        minWidth = '4ch';
+                    } else if (answerLength > 0) {
+                        charWidth = Math.max(answerLength + 1, 2);
+                        minWidth = answerLength <= 2 ? '1.5ch' : '4ch';
+                    } else if (isWordInternal) {
+                        charWidth = 2;
+                        minWidth = '1.5ch';
+                    } else {
+                        charWidth = 8;
+                        minWidth = '4ch';
+                    }
+                    const spacingClasses = isWordInternal ? 'mx-px' : 'mx-1';
                     return `<input type="text" `
                         + `id="fitb-input-${itemNum}" `
-                        + `class="fitb-inline-input inline-block mx-1 px-1 py-0.5 border-b-2 border-gray-400 bg-transparent text-center focus:border-blue-500 focus:outline-none" `
-                        + `style="width: ${charWidth}ch; min-width: 4ch; max-width: 100%;" `
+                        + `class="fitb-inline-input inline-block ${spacingClasses} px-1 py-0.5 border-b-2 border-gray-400 bg-transparent text-center focus:border-blue-500 focus:outline-none" `
+                        + `style="width: ${charWidth}ch; min-width: ${minWidth}; max-width: 100%;" `
                         + `aria-label="${label.replace(/"/g, '&quot;')}" `
                         + `aria-invalid="false" `
                         + `autocomplete="off" `

assets/adt/tailwind_css.css

@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/*
+ * Ruled-paper styling for open-ended-answer textareas.
+ * The fixed line-height is required so the dotted background lines up
+ * with each row of typed text; without it, text would drift off the lines.
+ */
+section[data-section-type="activity_open_ended_answer"] textarea {
+    line-height: 1.75rem;
+    background-image: radial-gradient(circle, #d1d5db 1px, transparent 1.5px);
+    background-size: 6px 1.75rem;
+    background-position: 0 0.875rem;
+    background-repeat: repeat;
+    background-attachment: local;
+}