@jspsych/plugin-tobii-validation 0.1.1

package/dist/index.browser.js

@@ -0,0 +1,1003 @@
+var jsPsychTobiiValidation = (function (jspsych) {
+  'use strict';
+
+  var version = "0.1.1";
+
+  class ValidationDisplay {
+    constructor(displayElement, params) {
+      this.displayElement = displayElement;
+      this.params = params;
+      this.currentPoint = null;
+      this.progressElement = null;
+      this.currentX = 0.5;
+      this.currentY = 0.5;
+      this.container = this.createContainer();
+      this.displayElement.appendChild(this.container);
+      if (params.show_progress) {
+        this.progressElement = this.createProgressIndicator();
+        this.displayElement.appendChild(this.progressElement);
+      }
+    }
+    createContainer() {
+      const container = document.createElement("div");
+      container.className = "tobii-validation-container";
+      return container;
+    }
+    createProgressIndicator() {
+      const progress = document.createElement("div");
+      progress.className = "tobii-validation-progress";
+      progress.setAttribute("role", "status");
+      progress.setAttribute("aria-live", "polite");
+      return progress;
+    }
+    async showInstructions() {
+      const wrapper = document.createElement("div");
+      wrapper.className = "tobii-validation-instructions";
+      wrapper.setAttribute("role", "dialog");
+      wrapper.setAttribute("aria-label", "Eye tracker validation instructions");
+      const content = document.createElement("div");
+      content.className = "instructions-content";
+      const heading = document.createElement("h2");
+      heading.textContent = "Eye Tracker Validation";
+      content.appendChild(heading);
+      const paragraph = document.createElement("p");
+      paragraph.innerHTML = this.params.instructions || "Look at each point to validate calibration accuracy.";
+      content.appendChild(paragraph);
+      const button = document.createElement("button");
+      button.className = "validation-start-btn";
+      button.textContent = "Start Validation";
+      content.appendChild(button);
+      wrapper.appendChild(content);
+      this.container.appendChild(wrapper);
+      return new Promise((resolve) => {
+        button.addEventListener("click", () => {
+          wrapper.remove();
+          resolve();
+        });
+      });
+    }
+    /**
+     * Initialize the traveling point at screen center
+     */
+    async initializePoint() {
+      if (this.currentPoint)
+        return;
+      this.currentPoint = document.createElement("div");
+      this.currentPoint.className = "tobii-validation-point";
+      this.currentPoint.setAttribute("role", "img");
+      this.currentPoint.setAttribute("aria-label", "Validation target point");
+      const x = 0.5 * window.innerWidth;
+      const y = 0.5 * window.innerHeight;
+      this.currentX = 0.5;
+      this.currentY = 0.5;
+      Object.assign(this.currentPoint.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${this.params.point_size || 20}px`,
+        height: `${this.params.point_size || 20}px`,
+        backgroundColor: this.params.point_color || "#00ff00",
+        transition: "none"
+      });
+      this.container.appendChild(this.currentPoint);
+      await this.delay(this.params.zoom_duration || 300);
+    }
+    /**
+     * Travel to the next point location with smooth animation
+     */
+    async travelToPoint(point, index, total) {
+      if (!this.currentPoint) {
+        await this.initializePoint();
+      }
+      if (this.progressElement) {
+        this.progressElement.textContent = `Point ${index + 1} of ${total}`;
+      }
+      this.currentPoint.setAttribute("aria-label", `Validation target point ${index + 1} of ${total}`);
+      const dx = point.x - this.currentX;
+      const dy = point.y - this.currentY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const travelDuration = Math.max(150, Math.min(400, 150 + distance * 200));
+      const x = point.x * window.innerWidth;
+      const y = point.y * window.innerHeight;
+      this.currentPoint.style.transition = `left ${travelDuration}ms ease-in-out, top ${travelDuration}ms ease-in-out`;
+      this.currentPoint.classList.remove("animation-zoom-out", "animation-zoom-in");
+      this.currentPoint.style.left = `${x}px`;
+      this.currentPoint.style.top = `${y}px`;
+      this.currentX = point.x;
+      this.currentY = point.y;
+      await this.delay(travelDuration);
+    }
+    /**
+     * Play zoom out animation (point grows larger)
+     */
+    async playZoomOut() {
+      if (!this.currentPoint)
+        return;
+      this.currentPoint.style.transition = "none";
+      this.currentPoint.classList.remove("animation-zoom-in");
+      this.currentPoint.classList.add("animation-zoom-out");
+      await this.delay(this.params.zoom_duration || 300);
+    }
+    /**
+     * Play zoom in animation (point shrinks to fixation size)
+     */
+    async playZoomIn() {
+      if (!this.currentPoint)
+        return;
+      this.currentPoint.classList.remove("animation-zoom-out");
+      this.currentPoint.classList.add("animation-zoom-in");
+      await this.delay(this.params.zoom_duration || 300);
+    }
+    /**
+     * Reset point state after data collection (keeps element for continued travel)
+     */
+    async resetPointForTravel() {
+      if (!this.currentPoint)
+        return;
+      this.currentPoint.classList.remove("animation-zoom-out", "animation-zoom-in");
+      this.currentPoint.style.transform = "translate(-50%, -50%) scale(1)";
+      await this.delay(50);
+    }
+    async hidePoint() {
+      if (this.currentPoint) {
+        this.currentPoint.remove();
+        this.currentPoint = null;
+      }
+      await this.delay(200);
+    }
+    /**
+     * Show validation result
+     * @param success Whether validation passed
+     * @param averageAccuracyNorm Average accuracy in normalized units
+     * @param averagePrecisionNorm Average precision in normalized units
+     * @param pointData Per-point validation data
+     * @param tolerance Tolerance threshold
+     * @param canRetry Whether a retry button should be shown on failure
+     * @returns 'retry' if user chose to retry, 'continue' otherwise
+     */
+    async showResult(success, averageAccuracyNorm, _averagePrecisionNorm, pointData, tolerance, canRetry = false) {
+      const result = document.createElement("div");
+      result.className = "tobii-validation-result";
+      result.setAttribute("role", "alert");
+      result.setAttribute("aria-live", "assertive");
+      let feedbackHTML = "";
+      if (this.params.show_feedback && pointData) {
+        feedbackHTML = this.createVisualFeedback(pointData, tolerance);
+      }
+      const statusClass = success ? "success" : "error";
+      const statusText = success ? "Validation Passed" : "Validation Failed";
+      let buttonsHTML;
+      if (success) {
+        buttonsHTML = `<button class="validation-continue-btn">Continue</button>`;
+      } else if (canRetry) {
+        buttonsHTML = `<button class="validation-retry-btn">Retry</button>
+        <button class="validation-continue-btn" style="margin-left: 10px;">Continue</button>`;
+      } else {
+        buttonsHTML = `<button class="validation-continue-btn">Continue</button>`;
+      }
+      result.innerHTML = `
+      <div class="tobii-validation-result-content ${statusClass}">
+        <h2>${statusText}</h2>
+        <p>Average error: ${((averageAccuracyNorm || 0) * 100).toFixed(1)}% (tolerance: ${((tolerance || 0) * 100).toFixed(0)}%)</p>
+        ${feedbackHTML}
+        ${buttonsHTML}
+      </div>
+    `;
+      this.container.appendChild(result);
+      return new Promise((resolve) => {
+        const retryBtn = result.querySelector(".validation-retry-btn");
+        const continueBtn = result.querySelector(".validation-continue-btn");
+        retryBtn?.addEventListener("click", () => {
+          result.remove();
+          resolve("retry");
+        });
+        continueBtn?.addEventListener("click", () => {
+          result.remove();
+          resolve("continue");
+        });
+      });
+    }
+    /**
+     * Reset display state for a retry attempt
+     */
+    resetForRetry() {
+      this.container.innerHTML = "";
+      this.currentPoint = null;
+      this.currentX = 0.5;
+      this.currentY = 0.5;
+    }
+    createVisualFeedback(pointData, tolerance) {
+      const tol = tolerance || 0.05;
+      const targetMarkers = pointData.map((data, idx) => {
+        const x = data.point.x * 100;
+        const y = data.point.y * 100;
+        return `
+        <div class="feedback-target" style="
+          left: ${x}%;
+          top: ${y}%;
+        " title="Target ${idx + 1}">
+          <span class="target-label">${idx + 1}</span>
+        </div>
+      `;
+      }).join("");
+      const gazeMarkers = pointData.map((data, idx) => {
+        if (!data.meanGaze)
+          return "";
+        const x = data.meanGaze.x * 100;
+        const y = data.meanGaze.y * 100;
+        const withinTolerance = data.accuracyNorm <= tol;
+        const colorClass = withinTolerance ? "gaze-pass" : "gaze-fail";
+        const statusSymbol = withinTolerance ? "\u2713" : "\u2717";
+        const statusLabel = withinTolerance ? "pass" : "fail";
+        return `
+        <div class="feedback-gaze ${colorClass}" style="
+          left: ${x}%;
+          top: ${y}%;
+        " title="Point ${idx + 1}: ${statusLabel}, error ${(data.accuracyNorm * 100).toFixed(1)}%"
+           aria-label="Point ${idx + 1}: ${statusLabel}, error ${(data.accuracyNorm * 100).toFixed(1)}%">
+          <span class="gaze-label">${statusSymbol}</span>
+        </div>
+      `;
+      }).join("");
+      const connectionLines = pointData.map((data) => {
+        if (!data.meanGaze)
+          return "";
+        const x1 = data.point.x * 100;
+        const y1 = data.point.y * 100;
+        const x2 = data.meanGaze.x * 100;
+        const y2 = data.meanGaze.y * 100;
+        const withinTolerance = data.accuracyNorm <= tol;
+        const lineColor = withinTolerance ? "#4ade80" : "#f87171";
+        return `
+        <svg class="feedback-line" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;">
+          <line x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%"
+                stroke="${lineColor}" stroke-width="2" stroke-dasharray="5,3" opacity="0.7"/>
+        </svg>
+      `;
+      }).join("");
+      const gazeSampleDots = pointData.map((data) => {
+        if (!data.gazeSamples)
+          return "";
+        const withinTolerance = data.accuracyNorm <= tol;
+        const sampleClass = withinTolerance ? "sample-pass" : "sample-fail";
+        return data.gazeSamples.map((sample) => {
+          const x = sample.x * 100;
+          const y = sample.y * 100;
+          return `<div class="feedback-sample ${sampleClass}" style="left: ${x}%; top: ${y}%;"></div>`;
+        }).join("");
+      }).join("");
+      const aspectRatio = window.innerWidth / window.innerHeight;
+      const canvas = `
+      <div class="validation-feedback">
+        <div class="feedback-canvas-fullscreen" style="aspect-ratio: ${aspectRatio.toFixed(3)};">
+          ${connectionLines}
+          ${gazeSampleDots}
+          ${targetMarkers}
+          ${gazeMarkers}
+        </div>
+        <div class="feedback-legend">
+          <span><span class="legend-color target-legend"></span> Target</span>
+          <span><span class="legend-color gaze-pass-legend"></span> Pass (\u2713)</span>
+          <span><span class="legend-color gaze-fail-legend"></span> Fail (\u2717)</span>
+        </div>
+      </div>
+    `;
+      return canvas;
+    }
+    clear() {
+      this.container.innerHTML = "";
+      if (this.progressElement) {
+        this.progressElement.textContent = "";
+      }
+    }
+    delay(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+  }
+
+  const info = {
+    name: "tobii-validation",
+    version,
+    parameters: {
+      /** Number of validation points (5 or 9) */
+      validation_points: {
+        type: jspsych.ParameterType.INT,
+        default: 9
+      },
+      /** Size of validation points in pixels */
+      point_size: {
+        type: jspsych.ParameterType.INT,
+        default: 20
+      },
+      /** Color of validation points */
+      point_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#00ff00"
+      },
+      /** Duration to collect data at each point (ms) */
+      collection_duration: {
+        type: jspsych.ParameterType.INT,
+        default: 1e3
+      },
+      /** Show progress indicator */
+      show_progress: {
+        type: jspsych.ParameterType.BOOL,
+        default: true
+      },
+      /** Custom validation points */
+      custom_points: {
+        type: jspsych.ParameterType.COMPLEX,
+        default: null
+      },
+      /** Show visual feedback */
+      show_feedback: {
+        type: jspsych.ParameterType.BOOL,
+        default: true
+      },
+      /** Instructions text */
+      instructions: {
+        type: jspsych.ParameterType.STRING,
+        default: "Look at each point as it appears on the screen to validate calibration accuracy."
+      },
+      /** Background color of the validation container */
+      background_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#808080"
+      },
+      /** Primary button color */
+      button_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#28a745"
+      },
+      /** Primary button hover color */
+      button_hover_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#218838"
+      },
+      /** Retry button color */
+      retry_button_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#dc3545"
+      },
+      /** Retry button hover color */
+      retry_button_hover_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#c82333"
+      },
+      /** Success message color */
+      success_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#28a745"
+      },
+      /** Error message color */
+      error_color: {
+        type: jspsych.ParameterType.STRING,
+        default: "#dc3545"
+      },
+      /** Normalized tolerance for acceptable accuracy (0-1 scale, validation passes if average error <= this) */
+      tolerance: {
+        type: jspsych.ParameterType.FLOAT,
+        default: 0.05
+      },
+      /** Maximum number of retry attempts allowed on validation failure */
+      max_retries: {
+        type: jspsych.ParameterType.INT,
+        default: 1
+      },
+      /** Duration of zoom in/out animations in ms */
+      zoom_duration: {
+        type: jspsych.ParameterType.INT,
+        default: 300
+      }
+    },
+    data: {
+      /** Validation success status */
+      validation_success: {
+        type: jspsych.ParameterType.BOOL
+      },
+      /** Average accuracy */
+      average_accuracy: {
+        type: jspsych.ParameterType.FLOAT
+      },
+      /** Average precision */
+      average_precision: {
+        type: jspsych.ParameterType.FLOAT
+      },
+      /** Number of validation points used */
+      num_points: {
+        type: jspsych.ParameterType.INT
+      },
+      /** Full validation result data */
+      validation_data: {
+        type: jspsych.ParameterType.COMPLEX
+      },
+      /** Normalized tolerance used for pass/fail determination */
+      tolerance: {
+        type: jspsych.ParameterType.FLOAT
+      },
+      /** Number of validation attempts made */
+      num_attempts: {
+        type: jspsych.ParameterType.INT
+      }
+    }
+  };
+  class TobiiValidationPlugin {
+    constructor(jsPsych) {
+      this.jsPsych = jsPsych;
+    }
+    static {
+      this.info = info;
+    }
+    static removeStyles() {
+      const el = document.getElementById("tobii-validation-styles");
+      if (el) {
+        el.remove();
+      }
+    }
+    injectStyles(trial) {
+      TobiiValidationPlugin.removeStyles();
+      const css = `
+      .tobii-validation-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: ${trial.background_color};
+        font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+        z-index: 9999;
+      }
+
+      .tobii-validation-instructions {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        padding: 40px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        max-width: 600px;
+      }
+
+      .tobii-validation-instructions h2 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-size: 24px;
+        color: #333;
+      }
+
+      .tobii-validation-instructions p {
+        margin-bottom: 20px;
+        font-size: 16px;
+        line-height: 1.5;
+        color: #666;
+      }
+
+      .validation-start-btn,
+      .validation-continue-btn,
+      .validation-retry-btn {
+        background-color: ${trial.button_color};
+        color: white;
+        border: none;
+        padding: 12px 30px;
+        font-size: 16px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .validation-start-btn:hover,
+      .validation-continue-btn:hover {
+        background-color: ${trial.button_hover_color};
+      }
+
+      .validation-retry-btn {
+        background-color: ${trial.retry_button_color};
+      }
+
+      .validation-retry-btn:hover {
+        background-color: ${trial.retry_button_hover_color};
+      }
+
+      .tobii-validation-point {
+        position: absolute;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      }
+
+      .tobii-validation-point.animation-zoom-out {
+        animation: tobii-validation-zoom-out ${trial.zoom_duration / 1e3}s ease-out forwards;
+      }
+
+      @keyframes tobii-validation-zoom-out {
+        0% {
+          transform: translate(-50%, -50%) scale(1);
+        }
+        100% {
+          transform: translate(-50%, -50%) scale(2.5);
+        }
+      }
+
+      .tobii-validation-point.animation-zoom-in {
+        animation: tobii-validation-zoom-in ${trial.zoom_duration / 1e3}s ease-out forwards;
+      }
+
+      @keyframes tobii-validation-zoom-in {
+        0% {
+          transform: translate(-50%, -50%) scale(2.5);
+        }
+        100% {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+
+      .tobii-validation-progress {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        font-size: 14px;
+        z-index: 10000;
+      }
+
+      .tobii-validation-result {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        padding: 30px 40px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        width: 60vw;
+        max-width: 800px;
+        max-height: 85vh;
+        overflow-y: auto;
+      }
+
+      .tobii-validation-result-content h2 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-size: 24px;
+      }
+
+      .tobii-validation-result-content.success h2 {
+        color: ${trial.success_color};
+      }
+
+      .tobii-validation-result-content.error h2 {
+        color: ${trial.error_color};
+      }
+
+      .tobii-validation-result-content p {
+        margin-bottom: 15px;
+        font-size: 16px;
+        color: #666;
+      }
+
+      .validation-feedback {
+        margin: 30px 0;
+      }
+
+      .validation-feedback h3 {
+        margin-bottom: 15px;
+        font-size: 18px;
+        color: #333;
+      }
+
+      .feedback-canvas {
+        position: relative;
+        width: 100%;
+        height: 300px;
+        background-color: #f0f0f0;
+        border: 2px solid #ddd;
+        border-radius: 5px;
+        margin-bottom: 15px;
+      }
+
+      .feedback-point {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        border: 2px solid #333;
+        cursor: help;
+      }
+
+      .feedback-legend {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        font-size: 14px;
+        color: #666;
+      }
+
+      .feedback-legend span {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      .legend-color {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        border: 1px solid #333;
+      }
+
+      .target-legend {
+        background-color: transparent;
+        border: 3px solid #333;
+      }
+
+      .feedback-canvas-fullscreen {
+        position: relative;
+        width: 100%;
+        background-color: #2a2a2a;
+        border: 2px solid #444;
+        border-radius: 5px;
+        margin-bottom: 15px;
+        overflow: hidden;
+      }
+
+      .feedback-target {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        border: 3px solid #fff;
+        background-color: transparent;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .target-label {
+        color: #fff;
+        font-size: 10px;
+        font-weight: bold;
+      }
+
+      .feedback-gaze {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        border: 2px solid;
+        z-index: 11;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: help;
+      }
+
+      .gaze-label {
+        color: #000;
+        font-size: 9px;
+        font-weight: bold;
+      }
+
+      .feedback-sample {
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        background-color: rgba(100, 100, 255, 0.4);
+        z-index: 5;
+      }
+
+      .accuracy-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 15px;
+        font-size: 13px;
+        text-align: left;
+      }
+
+      .accuracy-table th,
+      .accuracy-table td {
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+      }
+
+      .accuracy-table th {
+        background-color: #f5f5f5;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .accuracy-table tr:nth-child(even) {
+        background-color: #fafafa;
+      }
+
+      .accuracy-table td {
+        color: #555;
+      }
+
+      .saccade-note {
+        font-size: 12px;
+        color: #888;
+        font-style: italic;
+        margin-top: 10px;
+      }
+
+      .tolerance-info {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .gaze-pass-legend {
+        background-color: #4ade80;
+      }
+
+      .gaze-fail-legend {
+        background-color: #f87171;
+      }
+
+      .feedback-gaze.gaze-pass {
+        background-color: #4ade80;
+        border-color: #22c55e;
+      }
+
+      .feedback-gaze.gaze-fail {
+        background-color: #f87171;
+        border-color: #ef4444;
+      }
+
+      .feedback-sample.sample-pass {
+        background-color: rgba(74, 222, 128, 0.5);
+      }
+
+      .feedback-sample.sample-fail {
+        background-color: rgba(248, 113, 113, 0.5);
+      }
+    `;
+      const styleElement = document.createElement("style");
+      styleElement.id = "tobii-validation-styles";
+      styleElement.textContent = css;
+      document.head.appendChild(styleElement);
+    }
+    async trial(display_element, trial) {
+      this.injectStyles(trial);
+      const tobiiExt = this.jsPsych.extensions.tobii;
+      if (!tobiiExt) {
+        throw new Error("Tobii extension not initialized");
+      }
+      if (!tobiiExt.isConnected()) {
+        throw new Error("Not connected to Tobii server");
+      }
+      const validationDisplay = new ValidationDisplay(
+        display_element,
+        trial
+      );
+      await validationDisplay.showInstructions();
+      let points;
+      if (trial.custom_points) {
+        points = this.validateCustomPoints(trial.custom_points);
+      } else {
+        points = this.getValidationPoints(trial.validation_points);
+      }
+      const maxAttempts = 1 + trial.max_retries;
+      let attempt = 0;
+      let validationPassed = false;
+      let avgAccuracyNorm = 0;
+      let avgPrecisionNorm = 0;
+      let validationResult = { success: false };
+      try {
+        while (attempt < maxAttempts) {
+          attempt++;
+          const retriesRemaining = maxAttempts - attempt;
+          await tobiiExt.startValidation();
+          await tobiiExt.startTracking();
+          await validationDisplay.initializePoint();
+          for (let i = 0; i < points.length; i++) {
+            const point = points[i];
+            await validationDisplay.travelToPoint(point, i, points.length);
+            await validationDisplay.playZoomOut();
+            await validationDisplay.playZoomIn();
+            const collectionStartTime = performance.now();
+            await this.delay(trial.collection_duration);
+            const collectionEndTime = performance.now();
+            const gazeSamples = await tobiiExt.getGazeData(collectionStartTime, collectionEndTime);
+            await tobiiExt.collectValidationPoint(point.x, point.y, gazeSamples);
+            if (i < points.length - 1) {
+              await validationDisplay.resetPointForTravel();
+            }
+          }
+          await validationDisplay.hidePoint();
+          await tobiiExt.stopTracking();
+          validationResult = await tobiiExt.computeValidation();
+          avgAccuracyNorm = validationResult.averageAccuracyNorm || 0;
+          avgPrecisionNorm = validationResult.averagePrecisionNorm || 0;
+          validationPassed = validationResult.success && avgAccuracyNorm <= trial.tolerance;
+          const userChoice = await validationDisplay.showResult(
+            validationPassed,
+            avgAccuracyNorm,
+            avgPrecisionNorm,
+            validationResult.pointData || [],
+            trial.tolerance,
+            retriesRemaining > 0
+          );
+          if (userChoice === "continue") {
+            break;
+          }
+          validationDisplay.resetForRetry();
+        }
+      } finally {
+        validationDisplay.clear();
+        display_element.innerHTML = "";
+        TobiiValidationPlugin.removeStyles();
+      }
+      const trial_data = {
+        validation_success: validationPassed,
+        average_accuracy: avgAccuracyNorm,
+        average_precision: avgPrecisionNorm,
+        tolerance: trial.tolerance,
+        num_points: points.length,
+        validation_data: validationResult,
+        num_attempts: attempt
+      };
+      this.jsPsych.finishTrial(trial_data);
+    }
+    /**
+     * Validate custom validation points
+     */
+    validateCustomPoints(points) {
+      if (!Array.isArray(points) || points.length === 0) {
+        throw new Error("custom_points must be a non-empty array");
+      }
+      const validated = [];
+      for (let i = 0; i < points.length; i++) {
+        const point = points[i];
+        if (typeof point !== "object" || point === null || typeof point.x !== "number" || typeof point.y !== "number") {
+          throw new Error(`Invalid validation point at index ${i}: must have numeric x and y`);
+        }
+        if (point.x < 0 || point.x > 1 || point.y < 0 || point.y > 1) {
+          throw new Error(
+            `Validation point at index ${i} out of range: x and y must be between 0 and 1`
+          );
+        }
+        validated.push({ x: point.x, y: point.y });
+      }
+      return validated;
+    }
+    /**
+     * Get standard validation points for the given grid size
+     */
+    getValidationPoints(count) {
+      switch (count) {
+        case 5:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        case 9:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.5, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.1, y: 0.5 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.9, y: 0.5 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.5, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        case 13:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.5, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.3, y: 0.3 },
+            { x: 0.7, y: 0.3 },
+            { x: 0.1, y: 0.5 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.9, y: 0.5 },
+            { x: 0.3, y: 0.7 },
+            { x: 0.7, y: 0.7 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.5, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        case 15:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.5, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.1, y: 0.3 },
+            { x: 0.5, y: 0.3 },
+            { x: 0.9, y: 0.3 },
+            { x: 0.1, y: 0.5 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.9, y: 0.5 },
+            { x: 0.1, y: 0.7 },
+            { x: 0.5, y: 0.7 },
+            { x: 0.9, y: 0.7 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.5, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        case 19:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.5, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.1, y: 0.3 },
+            { x: 0.3, y: 0.3 },
+            { x: 0.5, y: 0.3 },
+            { x: 0.7, y: 0.3 },
+            { x: 0.9, y: 0.3 },
+            { x: 0.1, y: 0.5 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.9, y: 0.5 },
+            { x: 0.1, y: 0.7 },
+            { x: 0.3, y: 0.7 },
+            { x: 0.5, y: 0.7 },
+            { x: 0.7, y: 0.7 },
+            { x: 0.9, y: 0.7 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.5, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        case 25:
+          return [
+            { x: 0.1, y: 0.1 },
+            { x: 0.3, y: 0.1 },
+            { x: 0.5, y: 0.1 },
+            { x: 0.7, y: 0.1 },
+            { x: 0.9, y: 0.1 },
+            { x: 0.1, y: 0.3 },
+            { x: 0.3, y: 0.3 },
+            { x: 0.5, y: 0.3 },
+            { x: 0.7, y: 0.3 },
+            { x: 0.9, y: 0.3 },
+            { x: 0.1, y: 0.5 },
+            { x: 0.3, y: 0.5 },
+            { x: 0.5, y: 0.5 },
+            { x: 0.7, y: 0.5 },
+            { x: 0.9, y: 0.5 },
+            { x: 0.1, y: 0.7 },
+            { x: 0.3, y: 0.7 },
+            { x: 0.5, y: 0.7 },
+            { x: 0.7, y: 0.7 },
+            { x: 0.9, y: 0.7 },
+            { x: 0.1, y: 0.9 },
+            { x: 0.3, y: 0.9 },
+            { x: 0.5, y: 0.9 },
+            { x: 0.7, y: 0.9 },
+            { x: 0.9, y: 0.9 }
+          ];
+        default:
+          throw new Error(
+            `Unsupported validation_points value: ${count}. Use 5, 9, 13, 15, 19, or 25, or provide custom_points.`
+          );
+      }
+    }
+    /**
+     * Delay helper
+     */
+    delay(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+  }
+
+  return TobiiValidationPlugin;
+
+})(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-tobii-validation@0.1.1/dist/index.browser.js.map