Fixes local deployment for jsPsych experiments

The local (non-JATOS) deployment had three issues preventing it from
running: ESM export statements in scripts loaded as classic <script>
tags, JATOS-dependent initialization in the local code path, and
missing plugin scripts and CSS. Adds ESM export stripping in the
generator, conditional JATOS/local initialization in the experiment
template, gallery bundle copying, plugin type resolution, and
forced-choice CSS.

Author: aaronstevenwhite

bead/deployment/jspsych/generator.py

@@ -7,6 +7,7 @@
 from __future__ import annotations
 
 import json
+import re
 from pathlib import Path
 from uuid import UUID
 
@@ -203,6 +204,7 @@ def generate(
         self._generate_experiment_script()
         self._generate_config_file()
         self._copy_list_distributor_script()
+        self._copy_gallery_bundle()
 
         # copy slopit bundle if enabled
         if self.config.slopit.enabled:
@@ -395,6 +397,11 @@ def _write_distribution_config(self) -> None:
                 f"Strategy type: {self.config.distribution_strategy.strategy_type}"
             ) from e
 
+    @staticmethod
+    def _strip_esm_exports(content: str) -> str:
+        """Strip ESM export statements so the file works as a classic <script>."""
+        return re.sub(r"^export\s*\{[^}]*\}\s*;?\s*$", "", content, flags=re.MULTILINE)
+
     def _copy_list_distributor_script(self) -> None:
         """Copy list_distributor.js from compiled dist/ to js/ directory.
 
@@ -416,13 +423,33 @@ def _copy_list_distributor_script(self) -> None:
             )
 
         try:
-            output_path.write_text(dist_path.read_text())
+            content = self._strip_esm_exports(dist_path.read_text())
+            output_path.write_text(content)
         except OSError as e:
             raise OSError(
                 f"Failed to copy list_distributor.js to {output_path}: {e}. "
                 f"Check write permissions."
             ) from e
 
+    def _copy_gallery_bundle(self) -> None:
+        """Copy gallery-bundle.js (IIFE) from dist/ to js/ directory."""
+        dist_path = Path(__file__).parent / "dist" / "gallery-bundle.global.js"
+        output_path = self.output_dir / "js" / "gallery-bundle.js"
+
+        if not dist_path.exists():
+            raise FileNotFoundError(
+                f"gallery-bundle.global.js not found at {dist_path}. "
+                f"Run 'npm run build:gallery' in the jspsych directory."
+            )
+
+        try:
+            output_path.write_text(dist_path.read_text())
+        except OSError as e:
+            raise OSError(
+                f"Failed to copy gallery-bundle.js to {output_path}: {e}. "
+                f"Check write permissions."
+            ) from e
+
     def _create_directory_structure(self) -> None:
         """Create output directory structure.
 
@@ -606,7 +633,7 @@ def _copy_slopit_bundle(self) -> None:
 
         output_path = self.output_dir / "js" / "slopit-bundle.js"
         try:
-            output_path.write_text(bundle_path.read_text())
+            output_path.write_text(self._strip_esm_exports(bundle_path.read_text()))
         except OSError as e:
             raise OSError(
                 f"Failed to copy slopit bundle to {output_path}: {e}. "
@@ -699,5 +726,5 @@ def _copy_span_plugin_scripts(self, include_wikidata: bool = False) -> None:
             src_path = dist_dir / src_name
             dest_path = self.output_dir / dest_name
             if src_path.exists():
-                dest_path.write_text(src_path.read_text())
+                dest_path.write_text(self._strip_esm_exports(src_path.read_text()))
             # silently skip if not built yet (TypeScript may not be compiled)

bead/deployment/jspsych/templates/experiment.css

@@ -1,5 +1,23 @@
 /* Minimal custom styles - let jsPsych handle the layout */
 
+/* === Forced choice styles === */
+
+.bead-forced-choice-container { max-width: 720px; margin: 0 auto; }
+.bead-forced-choice-prompt { font-size: 1.3em; font-weight: 500; text-align: center; margin-bottom: 24px; color: #212121; }
+
+.bead-forced-choice-alternatives.bead-layout-horizontal { display: flex; gap: 24px; justify-content: center; align-items: stretch; }
+.bead-forced-choice-alternatives.bead-layout-vertical { display: flex; flex-direction: column; gap: 16px; align-items: center; }
+
+.bead-card.bead-alternative { background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 24px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; flex: 1; max-width: 320px; text-align: center; }
+.bead-card.bead-alternative:hover { border-color: #90CAF9; box-shadow: 0 2px 12px rgba(25, 118, 210, 0.15); transform: translateY(-2px); }
+.bead-card.bead-alternative.selected { border-color: #1976D2; box-shadow: 0 2px 16px rgba(25, 118, 210, 0.25); background: #E3F2FD; }
+
+.bead-alternative-label { font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; color: #9E9E9E; margin-bottom: 8px; font-weight: 600; }
+.bead-alternative-content { font-size: 1.1em; line-height: 1.5; color: #424242; margin-bottom: 16px; }
+
+.bead-button.bead-choice-button { background: #1976D2; color: white; border: none; border-radius: 6px; padding: 8px 24px; font-size: 0.95em; font-weight: 500; cursor: pointer; transition: background 0.2s; }
+.bead-button.bead-choice-button:hover { background: #1565C0; }
+
 /* === Span labeling styles === */
 
 /* Token grid */

bead/deployment/jspsych/templates/experiment.js.template

@@ -27,14 +27,22 @@ async function runExperiment() {
         // Load items from JSONL
         const items = await loadItems('data/items.jsonl');
 
-        // Initialize list distributor
+        {% if use_jatos %}
+        // Initialize list distributor (JATOS batch session)
         distributor = new ListDistributor(distConfig, lists);
 
         // Assign list to this participant
         const listIndex = await distributor.initialize();
         const assignedList = distributor.getAssignedList();
 
         console.log(`Assigned to list: ${assignedList.name} (index: ${listIndex})`);
+        {% else %}
+        // Local mode: use the first (only) list directly
+        const listIndex = 0;
+        const assignedList = lists[0];
+
+        console.log(`Local mode - using list: ${assignedList.name}`);
+        {% endif %}
 
         {% if slopit_enabled %}
         // Initialize slopit extension
@@ -57,10 +65,12 @@ async function runExperiment() {
             on_trial_start: jatos.addAbortButton,
             {% endif %}
             on_finish: async function() {
+                {% if use_jatos %}
                 // Mark as completed in batch session
                 if (distributor) {
                     await distributor.markCompleted();
                 }
+                {% endif %}
 
                 {% if use_jatos %}
                 // Submit data and end study
@@ -235,9 +245,30 @@ async function runExperiment() {
             );
         }
 
-        // Add pre-generated trials to timeline
+        // Map plugin name strings to actual plugin classes
+        const pluginRegistry = {
+            'bead-forced-choice': BeadForcedChoicePlugin,
+            'bead-rating': BeadRatingPlugin,
+            'bead-binary-choice': BeadBinaryChoicePlugin,
+            'bead-slider-rating': BeadSliderRatingPlugin,
+            'bead-cloze-multi': BeadClozeMultiPlugin,
+            'bead-span-label': BeadSpanLabelPlugin,
+            'bead-categorical': BeadCategoricalPlugin,
+            'bead-magnitude': BeadMagnitudePlugin,
+            'bead-free-text': BeadFreeTextPlugin,
+            'bead-multi-select': BeadMultiSelectPlugin,
+        };
+
+        // Add pre-generated trials to timeline, resolving plugin types
         for (const trial of listTrials) {
-            timeline.push(trial);
+            const pluginClass = pluginRegistry[trial.type];
+            if (!pluginClass) {
+                throw new Error(
+                    `Unknown plugin type: "${trial.type}". ` +
+                    `Available: ${Object.keys(pluginRegistry).join(', ')}`
+                );
+            }
+            timeline.push({ ...trial, type: pluginClass });
         }
 
         // Completion

bead/deployment/jspsych/templates/index.html

@@ -34,6 +34,9 @@
     <script src="jatos.js"></script>
     {% endif %}
 
+    <!-- Bead plugins -->
+    <script src="js/gallery-bundle.js"></script>
+
     <!-- List distribution system -->
     <script src="js/list_distributor.js"></script>