@jspsych/plugin-tobii-validation 0.1.1

package/dist/index.js

@@ -0,0 +1,1000 @@
+import { ParameterType } from 'jspsych';
+
+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: ParameterType.INT,
+      default: 9
+    },
+    /** Size of validation points in pixels */
+    point_size: {
+      type: ParameterType.INT,
+      default: 20
+    },
+    /** Color of validation points */
+    point_color: {
+      type: ParameterType.STRING,
+      default: "#00ff00"
+    },
+    /** Duration to collect data at each point (ms) */
+    collection_duration: {
+      type: ParameterType.INT,
+      default: 1e3
+    },
+    /** Show progress indicator */
+    show_progress: {
+      type: ParameterType.BOOL,
+      default: true
+    },
+    /** Custom validation points */
+    custom_points: {
+      type: ParameterType.COMPLEX,
+      default: null
+    },
+    /** Show visual feedback */
+    show_feedback: {
+      type: ParameterType.BOOL,
+      default: true
+    },
+    /** Instructions text */
+    instructions: {
+      type: 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: ParameterType.STRING,
+      default: "#808080"
+    },
+    /** Primary button color */
+    button_color: {
+      type: ParameterType.STRING,
+      default: "#28a745"
+    },
+    /** Primary button hover color */
+    button_hover_color: {
+      type: ParameterType.STRING,
+      default: "#218838"
+    },
+    /** Retry button color */
+    retry_button_color: {
+      type: ParameterType.STRING,
+      default: "#dc3545"
+    },
+    /** Retry button hover color */
+    retry_button_hover_color: {
+      type: ParameterType.STRING,
+      default: "#c82333"
+    },
+    /** Success message color */
+    success_color: {
+      type: ParameterType.STRING,
+      default: "#28a745"
+    },
+    /** Error message color */
+    error_color: {
+      type: ParameterType.STRING,
+      default: "#dc3545"
+    },
+    /** Normalized tolerance for acceptable accuracy (0-1 scale, validation passes if average error <= this) */
+    tolerance: {
+      type: ParameterType.FLOAT,
+      default: 0.05
+    },
+    /** Maximum number of retry attempts allowed on validation failure */
+    max_retries: {
+      type: ParameterType.INT,
+      default: 1
+    },
+    /** Duration of zoom in/out animations in ms */
+    zoom_duration: {
+      type: ParameterType.INT,
+      default: 300
+    }
+  },
+  data: {
+    /** Validation success status */
+    validation_success: {
+      type: ParameterType.BOOL
+    },
+    /** Average accuracy */
+    average_accuracy: {
+      type: ParameterType.FLOAT
+    },
+    /** Average precision */
+    average_precision: {
+      type: ParameterType.FLOAT
+    },
+    /** Number of validation points used */
+    num_points: {
+      type: ParameterType.INT
+    },
+    /** Full validation result data */
+    validation_data: {
+      type: ParameterType.COMPLEX
+    },
+    /** Normalized tolerance used for pass/fail determination */
+    tolerance: {
+      type: ParameterType.FLOAT
+    },
+    /** Number of validation attempts made */
+    num_attempts: {
+      type: 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));
+  }
+}
+
+export { TobiiValidationPlugin as default };
+//# sourceMappingURL=index.js.map