implement-custom-d3-question

asmith7013's avatarfrom asmith7013

Create D3 questions with unique, non-standard interactions. Fallback skill for questions not fitting standard patterns.

⭐0stars🔀1forks📁View on GitHub🕐Updated Jan 3, 2026
[Quizzes and Practice Sets]

When & Why to Use This Skill

This Claude skill facilitates the development of sophisticated, custom D3.js interactive questions for educational platforms. It provides a comprehensive framework for implementing non-standard visualizations and complex user interactions, ensuring consistent state management, interactivity locking, and message protocol compliance for seamless integration into digital learning environments.

Use Cases

  • Designing unique data visualization assessments that require students to interact with SVG-based diagrams in non-traditional ways.
  • Developing complex interactive exercises where standard question templates (like multiple choice or simple sliders) are insufficient for the learning objectives.
  • Implementing robust state-handling for advanced educational widgets to ensure student progress is accurately saved and restored across sessions.
  • Building bespoke interactive charts that require custom event listeners and message protocols to communicate with a parent learning management system.
nameImplement Custom D3 Question
descriptionCreate D3 questions with unique, non-standard interactions. Fallback skill for questions not fitting standard patterns.

Implement Custom D3 Question

Use this skill when creating questions that don't fit standard patterns. For unique visualizations or complex custom interactions.

When to Use This Pattern

Use when:

  • Question requires truly unique interactions
  • None of the standard patterns fit
  • Complex custom visualization needed
  • Multiple interaction types combined in novel ways

Try standard patterns first:

Components Available

All components in .claude/skills/question-types/snippets/ can be mixed and matched:

  • cards/ - Standard cards, video players, explanation cards
  • form-inputs.js - Buttons, inputs, textareas
  • tables.js - D3 tables
  • drag-match.js - Drag-and-drop system
  • svg-basics.js - SVG shapes and diagrams

Core Architecture Requirements

All D3 questions MUST implement these patterns:

1. State Management

function createDefaultState() {
  return {
    // All student response data
  };
}

let chartState = createDefaultState();

2. Message Protocol

function sendChartState() {
  sendMessage("response_updated", {
    // Send complete state
  });
}

// Call after EVERY state change

3. Interactivity Locking

let interactivityLocked = false;

function setInteractivity(enabled) {
  interactivityLocked = !enabled;
  // Update all interactive elements
}

4. State Restoration

function applyInitialState(payload) {
  if (!payload) return;
  // Restore state from payload
  chartState = { ...createDefaultState(), ...payload };
}

5. Message Handlers

window.addEventListener("message", (event) => {
  const { data } = event;
  if (!data || typeof data !== "object") return;

  if (data.type === "setInitialState") {
    applyInitialState(data.payload);
    renderFromState(d3);
  }

  if (data.type === "set_lock") {
    setInteractivity(data.payload === false);
  }

  if (data.type === "check_answer") {
    sendChartState();
  }
});

Implementation Guide

See PATTERN.md for detailed custom implementation guide.

Reference Example

Study existing questions for patterns:

# Find all D3 questions
find courses/ -name "chart.js" -type f

# Look for unique patterns
grep -r "createChart" courses/ | head -5

Checklist

  • Defined createDefaultState()
  • Implemented sendChartState() with complete payload
  • Called sendChartState() after every state change
  • Implemented setInteractivity(enabled)
  • Implemented applyInitialState(payload)
  • Set up message event listeners
  • Implemented window.clearChart()
  • Implemented window.getSvg() (if using SVG)
  • Tested state restoration
  • Tested interactivity locking
  • Verified message protocol

Tips

  1. Start simple - Build incrementally
  2. Borrow liberally - Copy patterns from existing questions
  3. Test frequently - Use chart.html for local testing
  4. Document state - Comment what each state field represents
  5. Inline components - All components must be inlined in chart.js
  • create-d3-question - Parent workflow skill
  • All other question-type skills for standard patterns

Additional Resources