Paradigm Selection Simulator
Interactive Learning Module for Paradigm Decision-Making
Document ID: E1-PARADIGM-SIMULATOR
Version: 1.0
Category: P5 - Interactive Learning
Format: React JSX Component
Component Overview
The Paradigm Selection Simulator is an interactive learning tool that presents real-world scenarios and guides users through the paradigm selection decision process. Users receive immediate feedback on their choices and learn the reasoning behind optimal paradigm selection.
Learning Objectives
- Understand the four agentic paradigms (LSR, GS, EP, VE)
- Apply decision criteria to real-world scenarios
- Recognize patterns that indicate specific paradigm fit
- Develop intuition for hybrid paradigm combinations
JSX Component
import React, { useState, useEffect } from 'react';
import { CheckCircle, XCircle, HelpCircle, ChevronRight, RotateCcw, Trophy, BookOpen } from 'lucide-react';
const ParadigmSimulator = () => {
const [currentScenario, setCurrentScenario] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [showFeedback, setShowFeedback] = useState(false);
const [score, setScore] = useState(0);
const [completed, setCompleted] = useState([]);
const [mode, setMode] = useState('learn'); // 'learn' or 'quiz'
const paradigms = {
LSR: {
name: 'Latent Space Reasoner',
color: 'purple',
description: 'Creative synthesis using model knowledge',
strengths: ['Creativity', 'Speed', 'Novel ideas'],
weaknesses: ['No citations', 'Hallucination risk', 'No actions']
},
GS: {
name: 'Grounded Synthesizer',
color: 'emerald',
description: 'Evidence-based reasoning with citations',
strengths: ['Accuracy', 'Citations', 'Verification'],
weaknesses: ['Slower', 'Limited to sources', 'Retrieval bottlenecks']
},
EP: {
name: 'Emergent Planner',
color: 'amber',
description: 'Adaptive multi-step execution with learning',
strengths: ['Flexibility', 'Learning', 'Complex tasks'],
weaknesses: ['Unpredictable', 'Resource intensive', 'Action hallucination']
},
VE: {
name: 'Verifiable Executor',
color: 'blue',
description: 'Protocol-driven execution with audit trails',
strengths: ['Compliance', 'Auditability', 'Consistency'],
weaknesses: ['Rigidity', 'Edge case handling', 'Protocol dependency']
}
};
const scenarios = [
{
id: 1,
title: "Marketing Campaign Copy",
description: "Your marketing team needs creative ad copy for a new product launch. They want fresh, engaging content that captures attention.",
context: "No specific sources required. Speed is important. Brand voice guidelines exist but creativity is encouraged.",
requirements: ["Creative output", "Fast turnaround", "Brand aligned"],
correctAnswer: "LSR",
explanation: "LSR excels at creative synthesis tasks where factual accuracy isn't critical. The model's parametric knowledge can generate engaging, novel content quickly.",
difficulty: "easy"
},
{
id: 2,
title: "Regulatory Compliance Report",
description: "The compliance team needs to generate a quarterly regulatory report with specific citations to regulations and accurate data.",
context: "Must cite specific regulations. Data accuracy is critical. Audit trail required.",
requirements: ["Accurate citations", "Regulatory compliance", "Audit trail"],
correctAnswer: "VE",
explanation: "VE is ideal for compliance tasks requiring defined protocols, accurate execution, and full audit trails. The protocol-driven approach ensures consistency and traceability.",
difficulty: "easy"
},
{
id: 3,
title: "Investment Research Report",
description: "An analyst needs a research report on a company, including financial data, market analysis, and competitive positioning with source citations.",
context: "Must cite financial sources. Accuracy critical for investment decisions. Multiple data sources needed.",
requirements: ["Factual accuracy", "Multiple sources", "Citations required"],
correctAnswer: "GS",
explanation: "GS is optimal when factual accuracy and source citation are required. It retrieves and synthesizes from multiple sources while maintaining an evidence chain.",
difficulty: "easy"
},
{
id: 4,
title: "Customer Support Troubleshooting",
description: "A support agent needs help resolving a complex technical issue that requires trying multiple diagnostic steps and adapting based on results.",
context: "Issue is novel. Multiple potential solutions. Need to adapt based on what works.",
requirements: ["Adaptive approach", "Multiple attempts", "Learning from outcomes"],
correctAnswer: "EP",
explanation: "EP's reflexion capabilities make it ideal for troubleshooting where the solution isn't known upfront. It can try approaches, learn from failures, and adapt.",
difficulty: "medium"
},
{
id: 5,
title: "Insurance Claims Processing",
description: "An insurance company wants to automate routine claims processing with consistent decision-making and compliance documentation.",
context: "Defined claim types. Regulatory requirements. High volume processing needed.",
requirements: ["Consistent decisions", "Compliance documentation", "High throughput"],
correctAnswer: "VE",
explanation: "VE's protocol-driven approach ensures consistent claim decisions with full documentation. The audit trail satisfies regulatory requirements.",
difficulty: "medium"
},
{
id: 6,
title: "Legal Contract Analysis",
description: "A legal team needs to analyze a complex contract, identify risks, and compare terms against standard playbook while citing specific clauses.",
context: "Need to cite specific contract clauses. Compare against playbook. Risk assessment required.",
requirements: ["Clause citation", "Playbook comparison", "Risk identification"],
correctAnswer: "GS",
hybridNote: "GS + VE hybrid often used for playbook compliance checking",
explanation: "GS provides evidence-based analysis with citations to specific clauses. In practice, this is often combined with VE for playbook compliance checking.",
difficulty: "medium"
},
{
id: 7,
title: "Strategic Brainstorming Session",
description: "Executive team wants AI assistance for a strategy session to generate innovative business ideas and explore unconventional approaches.",
context: "No right answers. Creativity valued. Exploring possibilities.",
requirements: ["Novel ideas", "Creative thinking", "Diverse perspectives"],
correctAnswer: "LSR",
explanation: "LSR's creative synthesis capabilities make it ideal for brainstorming where the goal is generating novel ideas rather than verified facts.",
difficulty: "easy"
},
{
id: 8,
title: "Fraud Investigation",
description: "A fraud team needs to investigate a suspicious transaction, gathering evidence from multiple sources and adapting the investigation based on findings.",
context: "Unknown fraud type. Need to follow leads. Actions may be required. Audit trail needed.",
requirements: ["Adaptive investigation", "Evidence gathering", "Action capability", "Audit trail"],
correctAnswer: "EP",
hybridNote: "EP + VE hybrid for investigation with compliant response",
explanation: "EP's adaptive planning suits investigation work where the path isn't predefined. Often combined with VE for compliant response actions.",
difficulty: "hard"
},
{
id: 9,
title: "Scientific Literature Review",
description: "A researcher needs a comprehensive review of recent publications on a topic, synthesized with proper academic citations.",
context: "Academic rigor required. Must cite sources. Synthesis across many papers.",
requirements: ["Academic citations", "Source verification", "Comprehensive coverage"],
correctAnswer: "GS",
explanation: "GS excels at literature review with its ability to retrieve, verify, and synthesize from multiple academic sources while maintaining citation chains.",
difficulty: "easy"
},
{
id: 10,
title: "Loan Origination Workflow",
description: "A bank wants to automate loan processing from application through decision, including data gathering, credit analysis, and document generation.",
context: "Regulated process. Multiple steps. Data from multiple sources. Compliance critical.",
requirements: ["Multi-step process", "Compliance", "Data integration", "Decision consistency"],
correctAnswer: "VE",
hybridNote: "GS for data gathering + VE for decision and documentation",
explanation: "While VE drives the protocol execution, this is typically implemented as GS + VE hybrid: GS gathers and verifies data, VE executes the decision protocol.",
difficulty: "hard"
},
{
id: 11,
title: "Product Description Writing",
description: "E-commerce team needs unique, engaging product descriptions for 1,000 new items based on basic product specs.",
context: "High volume. Creative writing. Speed important. Basic accuracy needed.",
requirements: ["Creative content", "High volume", "Fast processing"],
correctAnswer: "LSR",
explanation: "LSR can generate creative product descriptions quickly at scale. While basic facts should be checked, the creative aspect benefits from parametric knowledge.",
difficulty: "easy"
},
{
id: 12,
title: "Complex Data Pipeline Debugging",
description: "An engineer needs help debugging a data pipeline that's producing incorrect results. The root cause is unknown and may require testing multiple hypotheses.",
context: "Unknown root cause. Need to test hypotheses. May require code execution. Learning from each attempt.",
requirements: ["Hypothesis testing", "Adaptive approach", "Tool use", "Learning"],
correctAnswer: "EP",
explanation: "EP's reflexion and adaptive planning capabilities make it ideal for debugging unknown issues. It can form hypotheses, test them, learn from results, and iterate.",
difficulty: "medium"
}
];
const handleAnswer = (paradigm) => {
setSelectedAnswer(paradigm);
setShowFeedback(true);
const scenario = scenarios[currentScenario];
if (paradigm === scenario.correctAnswer) {
setScore(score + 1);
}
if (!completed.includes(currentScenario)) {
setCompleted([...completed, currentScenario]);
}
};
const nextScenario = () => {
if (currentScenario < scenarios.length - 1) {
setCurrentScenario(currentScenario + 1);
setSelectedAnswer(null);
setShowFeedback(false);
}
};
const resetSimulator = () => {
setCurrentScenario(0);
setSelectedAnswer(null);
setShowFeedback(false);
setScore(0);
setCompleted([]);
};
const scenario = scenarios[currentScenario];
const progress = ((currentScenario + 1) / scenarios.length) * 100;
const getParadigmColor = (paradigm) => {
const colors = {
LSR: 'bg-purple-100 border-purple-500 text-purple-700',
GS: 'bg-emerald-100 border-emerald-500 text-emerald-700',
EP: 'bg-amber-100 border-amber-500 text-amber-700',
VE: 'bg-blue-100 border-blue-500 text-blue-700'
};
return colors[paradigm];
};
const getSelectedStyle = (paradigm) => {
if (!showFeedback) {
return selectedAnswer === paradigm ? 'ring-2 ring-offset-2 ring-gray-400' : '';
}
if (paradigm === scenario.correctAnswer) {
return 'ring-2 ring-offset-2 ring-green-500 bg-green-50';
}
if (selectedAnswer === paradigm && paradigm !== scenario.correctAnswer) {
return 'ring-2 ring-offset-2 ring-red-500 bg-red-50';
}
return 'opacity-50';
};
return (
<div className="max-w-4xl mx-auto p-6 bg-white">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between mb-4">
<h1 className="text-2xl font-bold text-gray-800">Paradigm Selection Simulator</h1>
<div className="flex items-center gap-4">
<span className="text-sm text-gray-500">
Score: {score}/{completed.length}
</span>
<button
onClick={resetSimulator}
className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
>
<RotateCcw className="w-4 h-4" />
Reset
</button>
</div>
</div>
{/* Progress Bar */}
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>Scenario {currentScenario + 1} of {scenarios.length}</span>
<span>{scenario.difficulty.toUpperCase()}</span>
</div>
</div>
{/* Scenario Card */}
<div className="bg-gray-50 rounded-lg p-6 mb-6">
<h2 className="text-xl font-semibold text-gray-800 mb-2">{scenario.title}</h2>
<p className="text-gray-600 mb-4">{scenario.description}</p>
<div className="bg-white rounded p-4 mb-4">
<h3 className="text-sm font-medium text-gray-500 mb-2">Context</h3>
<p className="text-gray-700">{scenario.context}</p>
</div>
<div className="flex flex-wrap gap-2">
{scenario.requirements.map((req, idx) => (
<span
key={idx}
className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"
>
{req}
</span>
))}
</div>
</div>
{/* Paradigm Selection */}
<div className="mb-6">
<h3 className="text-lg font-medium text-gray-700 mb-4">
Which paradigm is best suited for this scenario?
</h3>
<div className="grid grid-cols-2 gap-4">
{Object.entries(paradigms).map(([key, paradigm]) => (
<button
key={key}
onClick={() => !showFeedback && handleAnswer(key)}
disabled={showFeedback}
className={`p-4 rounded-lg border-2 text-left transition-all ${getParadigmColor(key)} ${getSelectedStyle(key)}`}
>
<div className="flex items-center justify-between mb-2">
<span className="font-bold">{key}</span>
{showFeedback && key === scenario.correctAnswer && (
<CheckCircle className="w-5 h-5 text-green-600" />
)}
{showFeedback && selectedAnswer === key && key !== scenario.correctAnswer && (
<XCircle className="w-5 h-5 text-red-600" />
)}
</div>
<p className="text-sm font-medium">{paradigm.name}</p>
<p className="text-xs opacity-75 mt-1">{paradigm.description}</p>
</button>
))}
</div>
</div>
{/* Feedback */}
{showFeedback && (
<div className={`rounded-lg p-6 mb-6 ${
selectedAnswer === scenario.correctAnswer
? 'bg-green-50 border border-green-200'
: 'bg-amber-50 border border-amber-200'
}`}>
<div className="flex items-start gap-3">
{selectedAnswer === scenario.correctAnswer ? (
<CheckCircle className="w-6 h-6 text-green-600 flex-shrink-0 mt-1" />
) : (
<HelpCircle className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
)}
<div>
<h4 className="font-semibold text-gray-800 mb-2">
{selectedAnswer === scenario.correctAnswer ? 'Correct!' : 'Not quite right'}
</h4>
<p className="text-gray-700 mb-3">{scenario.explanation}</p>
{scenario.hybridNote && (
<div className="bg-white rounded p-3 text-sm">
<span className="font-medium text-gray-600">Pro Tip: </span>
<span className="text-gray-600">{scenario.hybridNote}</span>
</div>
)}
</div>
</div>
</div>
)}
{/* Navigation */}
<div className="flex justify-between items-center">
<div className="text-sm text-gray-500">
{completed.length} scenarios completed
</div>
{showFeedback && currentScenario < scenarios.length - 1 && (
<button
onClick={nextScenario}
className="flex items-center gap-2 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
Next Scenario
<ChevronRight className="w-4 h-4" />
</button>
)}
{showFeedback && currentScenario === scenarios.length - 1 && (
<div className="flex items-center gap-3">
<Trophy className="w-6 h-6 text-yellow-500" />
<span className="font-semibold">
Complete! Final Score: {score}/{scenarios.length}
</span>
</div>
)}
</div>
{/* Paradigm Reference (Collapsible) */}
<details className="mt-8 bg-gray-50 rounded-lg">
<summary className="p-4 cursor-pointer flex items-center gap-2 text-gray-700 font-medium">
<BookOpen className="w-5 h-5" />
Paradigm Quick Reference
</summary>
<div className="p-4 pt-0 grid grid-cols-2 gap-4">
{Object.entries(paradigms).map(([key, paradigm]) => (
<div key={key} className={`p-3 rounded border ${getParadigmColor(key)}`}>
<h4 className="font-bold">{key}: {paradigm.name}</h4>
<p className="text-sm mt-1">{paradigm.description}</p>
<div className="mt-2">
<span className="text-xs font-medium">Strengths: </span>
<span className="text-xs">{paradigm.strengths.join(', ')}</span>
</div>
<div className="mt-1">
<span className="text-xs font-medium">Weaknesses: </span>
<span className="text-xs">{paradigm.weaknesses.join(', ')}</span>
</div>
</div>
))}
</div>
</details>
</div>
);
};
export default ParadigmSimulator;
Usage Instructions
Installation
- Include the component in your React application
- Import required icons from
lucide-react - Ensure Tailwind CSS is configured
Integration Points
// App.jsx
import ParadigmSimulator from './components/ParadigmSimulator';
function LearningPlatform() {
return (
<div className="learning-container">
<ParadigmSimulator />
</div>
);
}
Customization
Adding New Scenarios:
const newScenario = {
id: 13,
title: "Your Scenario Title",
description: "Detailed description of the situation",
context: "Additional context about constraints and requirements",
requirements: ["Requirement 1", "Requirement 2"],
correctAnswer: "GS", // LSR, GS, EP, or VE
explanation: "Why this paradigm is the best choice",
hybridNote: "Optional note about hybrid approaches",
difficulty: "easy" // easy, medium, or hard
};
Learning Metrics Tracking
The component can be extended to track:
- Time spent per scenario
- Accuracy by difficulty level
- Paradigm confusion patterns
- Learning progression over time
Component maintained by CODITECT Education Team. Feedback: education@coditect.com