Add Skip button and redesign share images

Skip button lets users skip questions they're unsure about:
- Observes skip at 50% knowledge (prior mean) with halved RBF length scale
- Yellow fast-forward icon in tooltip for skipped questions
- Automatically advances to next question regardless of auto-advance setting
- Persists is_skipped field in exports, infers it on import for older data

Share image now matches full map rendering:
- Bilinear interpolated heatmap at 100 cells with 0.45 alpha
- Wikipedia articles as 1px gray dots
- Answered questions with black outline + colored fill (green/red/yellow)

Fixes flat map bug caused by skip responses being treated as incorrect
on import (selected=null was filtered out by validation).

Co-Authored-By: Claude (claude-opus-4-6) <noreply@anthropic.com>

Author: jeremymanning

src/app.js

@@ -21,6 +21,8 @@ import { ParticleSystem } from './viz/particles.js';
 import * as controls from './ui/controls.js';
 import * as quiz from './ui/quiz.js';
 import * as modes from './ui/modes.js';
+
+const SKIP_LENGTH_SCALE_FACTOR = 0.5;
 import * as insights from './ui/insights.js';
 import * as share from './ui/share.js';
 import { showDownload, hideDownload, updateConfidence, initConfidence } from './ui/progress.js';
@@ -125,6 +127,7 @@ async function boot() {
 
   modes.init(quizPanel);
   modes.onModeSelect(handleModeSelect);
+  modes.onSkip(handleSkip);
   insights.init();
   initConfidence(quizPanel);
 
@@ -173,7 +176,7 @@ async function boot() {
     const responses = $responses.get();
     const answeredQuestions = responses
       .filter(r => r.x != null && r.y != null)
-      .map(r => ({ x: r.x, y: r.y, isCorrect: r.is_correct }));
+      .map(r => ({ x: r.x, y: r.y, isCorrect: r.is_correct, isSkipped: !!r.is_skipped }));
     return { estimateGrid: grid, articles, answeredQuestions };
   });
 
@@ -258,13 +261,17 @@ function responsesToAnsweredDots(responses, qIndex) {
   for (const [qid, r] of latest) {
     const q = qIndex.get(qid);
     if (!q) continue;
+    const isSkipped = !!r.is_skipped;
     dots.push({
       x: r.x,
       y: r.y,
       questionId: qid,
       title: q.question_text,
       isCorrect: r.is_correct,
-      color: r.is_correct ? [0, 105, 62, 200] : [157, 22, 46, 200],
+      isSkipped,
+      color: isSkipped ? [212, 160, 23, 200]
+           : r.is_correct ? [0, 105, 62, 200]
+           : [157, 22, 46, 200],
     });
   }
   return dots;
@@ -459,6 +466,46 @@ function handleAnswer(selectedKey, question) {
   }
 }
 
+function handleSkip() {
+  const question = quiz.getCurrentQuestion();
+  if (!question || !currentDomainBundle) return;
+
+  const activeDomainId = $activeDomain.get() || 'all';
+
+  const response = {
+    question_id: question.id,
+    domain_id: activeDomainId,
+    selected: null,
+    is_correct: false,
+    is_skipped: true,
+    timestamp: Date.now(),
+    x: question.x,
+    y: question.y,
+  };
+
+  const current = $responses.get();
+  const filtered = current.filter(r => r.question_id !== question.id);
+  const isReanswer = filtered.length < current.length;
+  $responses.set([...filtered, response]);
+
+  const skipLengthScale = UNIFORM_LENGTH_SCALE * SKIP_LENGTH_SCALE_FACTOR;
+  estimator.observeSkip(question.x, question.y, skipLengthScale);
+  globalEstimator.observeSkip(question.x, question.y, skipLengthScale);
+  const estimates = estimator.predict();
+  $estimates.set(estimates);
+
+  if (!isReanswer) {
+    domainQuestionCount++;
+    modes.updateAvailability(domainQuestionCount);
+    updateInsightButtons($responses.get().length);
+  }
+
+  renderer.setAnsweredQuestions(responsesToAnsweredDots($responses.get(), questionIndex));
+
+  announce('Skipped. Moving to next question.');
+  selectAndShowNextQuestion();
+}
+
 function handleReset() {
   if (!confirm('Are you sure? This will clear all progress.')) return;
   resetAll();
@@ -528,8 +575,15 @@ function handleImport(data) {
   }
 
   const valid = responses.filter(r =>
-    r.question_id && r.domain_id && r.selected && typeof r.is_correct === 'boolean'
-  );
+    r.question_id && r.domain_id && typeof r.is_correct === 'boolean'
+    && (r.selected || r.is_skipped || r.selected === null)
+  ).map(r => {
+    // Infer is_skipped for older exports that lack the field
+    if (!r.is_skipped && r.selected === null) {
+      return { ...r, is_skipped: true };
+    }
+    return r;
+  });
 
   if (valid.length === 0) {
     alert('No valid responses found in the imported file.');

src/learning/estimator.js

@@ -87,6 +87,17 @@ export class Estimator {
     this._recompute();
   }
 
+  /**
+   * Record a skipped question — labels knowledge at 50% with reduced spatial influence.
+   * @param {number} x - Normalized x coordinate
+   * @param {number} y - Normalized y coordinate
+   * @param {number} lengthScale - Reduced RBF width for skip observations
+   */
+  observeSkip(x, y, lengthScale) {
+    this._observations.push({ x, y, value: PRIOR_MEAN, lengthScale: lengthScale || this._lengthScale });
+    this._recompute();
+  }
+
   /**
    * Get estimates for all cells (or viewport subset).
    * Returns CellEstimate[] per contracts/active-learner.md.
@@ -240,11 +251,12 @@ export class Estimator {
 
     for (const r of responses) {
       if (r.x != null && r.y != null) {
+        const isSkipped = !!r.is_skipped;
         this._observations.push({
           x: r.x,
           y: r.y,
-          value: r.is_correct ? 1.0 : 0.0,
-          lengthScale: ls,
+          value: isSkipped ? PRIOR_MEAN : (r.is_correct ? 1.0 : 0.0),
+          lengthScale: isSkipped ? ls * 0.5 : ls,
         });
       }
     }

src/state/persistence.js

@@ -28,6 +28,7 @@ export function exportResponses() {
       domain_id: r.domain_id,
       selected: r.selected,
       is_correct: r.is_correct,
+      is_skipped: r.is_skipped || false,
       timestamp: r.timestamp,
       x: r.x,
       y: r.y,

src/ui/modes.js

@@ -16,8 +16,10 @@ let buttons = new Map();
 let activeMode = 'auto';
 let currentAnswerCount = 0;
 let onSelectCb = null;
+let onSkipCb = null;
 let autoAdvance = false;
 let autoAdvanceToggleEl = null;
+let skipBtnEl = null;
 
 export function init(container) {
   if (!container) return;
@@ -131,6 +133,26 @@ export function init(container) {
       .auto-advance-track.on .auto-advance-thumb {
         transform: translateX(14px);
       }
+      .skip-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        padding: 0.35rem 0.6rem;
+        border: 1px solid #d4a017;
+        border-radius: 16px;
+        background: var(--color-surface-raised);
+        cursor: pointer;
+        font-size: 0.75rem;
+        font-family: var(--font-body);
+        color: #b8860b;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+      }
+      .skip-btn:hover {
+        background: #d4a017;
+        color: #ffffff;
+        box-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
+      }
     `;
     document.head.appendChild(style);
   }
@@ -159,6 +181,16 @@ export function init(container) {
     wrapper.appendChild(btn);
   }
 
+  // Skip button
+  skipBtnEl = document.createElement('button');
+  skipBtnEl.className = 'skip-btn';
+  skipBtnEl.innerHTML = '<i class="fa-solid fa-forward"></i> Skip';
+  skipBtnEl.dataset.tooltip = "Not sure of the answer? Don't guess, just press skip!";
+  skipBtnEl.addEventListener('click', () => {
+    if (onSkipCb) onSkipCb();
+  });
+  wrapper.appendChild(skipBtnEl);
+
   // Auto-advance toggle
   const toggleWrap = document.createElement('div');
   toggleWrap.className = 'auto-advance-wrap';
@@ -206,6 +238,10 @@ export function onModeSelect(callback) {
   onSelectCb = callback;
 }
 
+export function onSkip(callback) {
+  onSkipCb = callback;
+}
+
 export function updateAvailability(responseCount) {
   currentAnswerCount = responseCount;
   for (const mode of ALL_MODES) {

src/ui/quiz.js

@@ -379,6 +379,10 @@ export function onNext(callback) {
   nextCallback = callback;
 }
 
+export function getCurrentQuestion() {
+  return currentQuestion;
+}
+
 /**
  * Replaces $...$ with KaTeX rendered HTML.
  * Heuristic: if content between $ signs contains only numbers/punctuation, treat as currency.

src/ui/share.js

@@ -66,54 +66,70 @@ function generateShareImage(data) {
   canvas.height = H;
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = '#f8fafc';
+  ctx.fillStyle = '#ffffff';
   ctx.fillRect(0, 0, W, H);
 
   const { estimateGrid, articles, answeredQuestions } = data;
   const N = 50;
 
+  // Draw heatmap grid matching the full-map renderer style:
+  // bilinear interpolation at higher resolution with proper opacity
   if (estimateGrid && estimateGrid.length === N * N) {
-    ctx.globalAlpha = 0.1;
-    const cellW = W / N;
-    const cellH = H / N;
-    for (let gy = 0; gy < N; gy++) {
-      for (let gx = 0; gx < N; gx++) {
-        const val = estimateGrid[gy * N + gx];
+    const CELLS = 100;
+    const cellW = W / CELLS;
+    const cellH = H / CELLS;
+
+    function sampleGrid(gxf, gyf) {
+      const gx0 = Math.max(0, Math.min(N - 1, Math.floor(gxf)));
+      const gy0 = Math.max(0, Math.min(N - 1, Math.floor(gyf)));
+      const gx1 = Math.min(N - 1, gx0 + 1);
+      const gy1 = Math.min(N - 1, gy0 + 1);
+      const fx = gxf - gx0;
+      const fy = gyf - gy0;
+      const v00 = estimateGrid[gy0 * N + gx0];
+      const v10 = estimateGrid[gy0 * N + gx1];
+      const v01 = estimateGrid[gy1 * N + gx0];
+      const v11 = estimateGrid[gy1 * N + gx1];
+      const top = v00 + (v10 - v00) * fx;
+      const bot = v01 + (v11 - v01) * fx;
+      return top + (bot - top) * fy;
+    }
+
+    ctx.globalAlpha = 0.45;
+    for (let sy = 0; sy < CELLS; sy++) {
+      for (let sx = 0; sx < CELLS; sx++) {
+        const gxf = ((sx + 0.5) / CELLS) * N - 0.5;
+        const gyf = ((sy + 0.5) / CELLS) * N - 0.5;
+        const val = sampleGrid(gxf, gyf);
         const [r, g, b] = shareImageColor(val);
         ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
-        ctx.fillRect(gx * cellW, gy * cellH, cellW + 0.5, cellH + 0.5);
+        ctx.fillRect(sx * cellW, sy * cellH, cellW + 0.5, cellH + 0.5);
       }
     }
     ctx.globalAlpha = 1;
   }
 
+  // Draw Wikipedia articles as 1px gray dots
   if (articles && articles.length > 0) {
+    ctx.fillStyle = 'rgba(148, 163, 184, 0.35)';
     for (const a of articles) {
-      const px = a.x * W;
-      const py = a.y * H;
-      const gx = Math.floor(a.x * N);
-      const gy = Math.floor(a.y * N);
-      let val = 0.5;
-      if (estimateGrid && gx >= 0 && gx < N && gy >= 0 && gy < N) {
-        val = estimateGrid[gy * N + gx];
-      }
-      const [r, g, b] = shareImageColor(val);
-      ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
-      ctx.fillRect(px - 0.5, py - 0.5, 1, 1);
+      ctx.fillRect(a.x * W - 0.5, a.y * H - 0.5, 1, 1);
     }
   }
 
+  // Draw answered questions as slightly larger dots with outline
   if (answeredQuestions && answeredQuestions.length > 0) {
     for (const q of answeredQuestions) {
       const px = q.x * W;
       const py = q.y * H;
       ctx.beginPath();
-      ctx.arc(px, py, 4, 0, Math.PI * 2);
-      ctx.fillStyle = q.isCorrect ? '#00693e' : '#9d162e';
+      ctx.arc(px, py, 5, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(px, py, 3.5, 0, Math.PI * 2);
+      ctx.fillStyle = q.isSkipped ? '#d4a017' : q.isCorrect ? '#00693e' : '#9d162e';
       ctx.fill();
-      ctx.strokeStyle = '#000000';
-      ctx.lineWidth = 1;
-      ctx.stroke();
     }
   }
 

src/viz/renderer.js

@@ -995,9 +995,12 @@ export class Renderer {
   _buildTooltipHTML(hit) {
     if (hit.questionId) {
       const q = this._questionMap.get(hit.questionId);
+      const isSkipped = hit.isSkipped;
       const isCorrect = hit.isCorrect;
-      const borderColor = isCorrect ? '#00693e' : '#9d162e';
-      const icon = isCorrect
+      const borderColor = isSkipped ? '#d4a017' : isCorrect ? '#00693e' : '#9d162e';
+      const icon = isSkipped
+        ? '<i class="fa-solid fa-forward" style="font-size:0.85em;"></i>'
+        : isCorrect
         ? '<i class="fa-solid fa-check" style="font-size:0.85em;"></i>'
         : '<i class="fa-solid fa-xmark" style="font-size:0.85em;"></i>';
       const text = hit.title || 'Question';