Skip to content

Misconception Correction Cycle

This interactive diagram illustrates the four-stage framework for correcting learner misconceptions through MicroSim design. The cycle emphasizes that effective misconception correction requires deliberate activation, cognitive conflict, resolution with a better model, and ongoing consolidation.

About This MicroSim

The circular workflow shows four key stages, each with a distinct purpose and color:

  1. ACTIVATE (Yellow) - Surface the existing belief by asking prediction questions and having learners commit to an answer
  2. CONFLICT (Red) - Create cognitive dissonance by showing evidence that contradicts the prediction
  3. RESOLVE (Green) - Provide a better alternative model that explains everything including the conflict
  4. CONSOLIDATE (Blue) - Practice and reinforce by applying the new model to multiple examples

Hover over each stage to see detailed guidance for that phase of the correction process.

Fullscreen

Key Design Principles

  • Activation is essential - Learners must explicitly hold and commit to the misconception before it can be challenged
  • Conflict must be felt - The misconception must visibly fail; abstract contradiction is not enough
  • Resolution requires superiority - The new model must explain MORE than the old one, not just be labeled "correct"
  • Consolidation prevents relapse - Misconceptions regrow without regular reinforcement

Applying the Cycle to MicroSim Design

When designing a MicroSim to address misconceptions:

Stage MicroSim Design Element
Activate Include prediction prompts before revealing behavior
Conflict Design scenarios where the misconception leads to wrong predictions
Resolve Provide clear visual explanations of the correct model
Consolidate Offer multiple practice scenarios with varied contexts

p5.js Editor Template

You can experiment with this code in the p5.js web editor.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// Misconception Correction Cycle MicroSim
// Circular workflow showing the four stages of misconception correction

let canvasWidth = 400;
let canvasHeight = 450;
let drawHeight = 450;
let controlHeight = 50;

// Stage data
let stages = [];
let hoveredStage = -1;
let centerHovered = false;

// Colors for each stage
let activateColor, conflictColor, resolveColor, consolidateColor;
let bgColor, textColor, arrowColor;

function setup() {
  canvasWidth = min(windowWidth - 40, 500);
  canvasHeight = drawHeight + controlHeight;
  createCanvas(canvasWidth, canvasHeight);

  // Define colors for each stage
  activateColor = color(251, 191, 36);      // Yellow - illumination
  conflictColor = color(239, 68, 68);       // Red - tension
  resolveColor = color(34, 197, 94);        // Green - solution
  consolidateColor = color(59, 130, 246);   // Blue - stability
  bgColor = color(248, 250, 252);           // Light background
  textColor = color(30, 41, 59);            // Dark text
  arrowColor = color(156, 163, 175);        // Gray arrows

  // Define the 4 stages with their details
  let stageData = [
    {
      name: "ACTIVATE",
      description: "Surface the existing belief",
      actions: "Ask prediction questions, have learner commit to an answer",
      hoverText: "Don't skip this! Learners must explicitly hold the misconception before it can be challenged.",
      icon: "lightbulb",
      color: activateColor,
      nextLabel: "Commitment made"
    },
    {
      name: "CONFLICT",
      description: "Create cognitive dissonance",
      actions: "Show evidence that contradicts prediction, demonstrate boundary failure",
      hoverText: "The misconception must visibly FAIL. Learners must feel the contradiction.",
      icon: "lightning",
      color: conflictColor,
      nextLabel: "Dissonance created"
    },
    {
      name: "RESOLVE",
      description: "Provide better alternative",
      actions: "Introduce correct model, show how it explains everything including the conflict",
      hoverText: "The new model must explain MORE than the old one, not just be 'correct.'",
      icon: "puzzle",
      color: resolveColor,
      nextLabel: "Alternative accepted"
    },
    {
      name: "CONSOLIDATE",
      description: "Practice and reinforce",
      actions: "Apply new model to multiple examples, revisit potential misconception triggers",
      hoverText: "Misconceptions regrow! Regular reinforcement prevents relapse.",
      icon: "checkmark",
      color: consolidateColor,
      nextLabel: "Test with new contexts"
    }
  ];

  // Calculate positions in a circle (4 stages)
  let centerX = canvasWidth / 2;
  let centerY = drawHeight / 2;
  let radius = min(canvasWidth, drawHeight) / 2 - 85;

  for (let i = 0; i < 4; i++) {
    let angle = -PI / 2 + (TWO_PI / 4) * i; // Start from top
    stages.push({
      ...stageData[i],
      x: centerX + cos(angle) * radius,
      y: centerY + sin(angle) * radius,
      angle: angle
    });
  }

  textAlign(CENTER, CENTER);
  textFont('Arial');
}

function draw() {
  background(bgColor);

  let centerX = canvasWidth / 2;
  let centerY = drawHeight / 2;
  let radius = min(canvasWidth, drawHeight) / 2 - 85;

  // Draw title
  fill(textColor);
  noStroke();
  textSize(18);
  textStyle(BOLD);
  text("Misconception Correction Cycle", centerX, 22);

  // Draw connecting arrows with labels
  drawArrowsWithLabels(centerX, centerY, radius);

  // Draw center element
  drawCenter(centerX, centerY);

  // Draw stage nodes
  for (let i = 0; i < stages.length; i++) {
    drawStage(stages[i], i === hoveredStage);
  }

  // Draw hover information
  if (hoveredStage >= 0) {
    drawHoverInfo(stages[hoveredStage]);
  } else if (centerHovered) {
    drawCenterHoverInfo(centerX, centerY);
  }
}

// Additional helper functions would go here...
// See full implementation in the MicroSim files

References