<!DOCTYPE html>

<head>

<title>Board Bias Check - Trustee Decision Tool</title>

<style>

.hidden { display: none; }

.step-indicator {

width: 32px;

height: 32px;

border-radius: 50%;

border: 2px solid #d1d5db;

display: flex;

align-items: center;

justify-content: center;

font-size: 14px;

font-weight: 500;

background: white;

color: #9ca3af;

}

.step-indicator.active {

background: #2563eb;

color: white;

border-color: #2563eb;

}

.step-indicator.completed {

background: #059669;

color: white;

border-color: #059669;

}

.step-line {

width: 48px;

height: 2px;

background: #d1d5db;

}

.step-line.completed {

background: #059669;

}

</style>

</head>

<h1 class="text-3xl font-bold text-gray-900">Board Bias Check</h1>

</div>

<p class="text-lg text-gray-600">A tool to help trustees examine their decision-making and identify potential confirmation bias before board meetings.</p>

</div>

<h2 class="text-xl font-semibold text-blue-900 mb-4">Step 1: Define the Issue</h2>

<p class="text-blue-700 mb-6">Start by clearly describing the challenge, problem, or opportunity your board will be discussing.</p>

<div>

What is the issue or decision before the board?

</label>

<textarea

id="issue"

placeholder="e.g., Whether to approve a $50M capital campaign for new science facilities"

class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[100px]"

></textarea>

</div>

<div>

Provide relevant context and background

</label>

<textarea

id="context"

placeholder="Include key facts, constraints, timeline, stakeholders involved, previous discussions, etc."

class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[120px]"

></textarea>

</div>

<button

id="next1"

onclick="goToStep(2)"

disabled

class="flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed"

Next: Initial Position

</svg>

</button>

</div>

<h1 class="text-3xl font-bold text-gray-900">Board Bias Check</h1>

</div>

<h3 class="font-medium text-gray-800 mb-2">Issue:</h3>

</div>

<h2 class="text-xl font-semibold text-green-900 mb-4">Step 2: Your Initial Position</h2>

<p class="text-green-700 mb-6">Share your current thinking and the reasoning behind your initial position.</p>

<div>

What is your initial position or leaning on this issue?

</label>

<textarea

id="position"

placeholder="Be specific about what you think the board should do and why"

class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 min-h-[100px]"

></textarea>

</div>

<div>

What reasoning and evidence supports your position?

</label>

<textarea

id="reasoning"

placeholder="Include the key factors, data, experiences, or principles that inform your thinking"

class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 min-h-[120px]"

></textarea>

</div>

<button

onclick="goToStep(1)"

class="flex items-center px-6 py-3 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50"

</svg>

Back

</button>

<button

id="next2"

onclick="goToStep(3)"

disabled

class="flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed"

Next: Challenge Your Thinking

</svg>

</button>

</div>

<h1 class="text-3xl font-bold text-gray-900">Board Bias Check</h1>

</div>

</svg>

<h2 class="text-xl font-semibold text-orange-900">Step 3: Devil's Advocate Questions</h2>

</div>

<p class="text-orange-700 mb-4">These questions are designed to challenge your thinking and help identify potential blind spots. Answer as many as feel relevant - even partial responses can be valuable.</p>

</div>

</div>

<strong>Progress:</strong> <span id="progress">0</span> of 6 questions answered

</p>

</div>

<button

onclick="goToStep(2)"

class="flex items-center px-6 py-3 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50"

</svg>

Back

</button>

<button

id="next3"

onclick="goToStep(4)"

disabled

class="flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed"

Generate Report

</svg>

</button>

</div>

<h1 class="text-3xl font-bold text-gray-900">Board Bias Check</h1>

</div>

</svg>

<h2 class="text-xl font-semibold text-purple-900">Your Pre-Meeting Report</h2>

</div>

<p class="text-purple-700">Review your refined thinking below. This summary can help guide your contributions to the board discussion.</p>

</div>

</div>

<button

onclick="goToStep(3)"

class="flex items-center px-6 py-3 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50"

</svg>

Back to Questions

</button>

<button

onclick="startOver()"

class="flex items-center px-6 py-3 bg-gray-600 text-white rounded-lg font-medium hover:bg-gray-700"

Start New Analysis

</button>

</div>

<p class="text-sm">Board Bias Check - A tool for thoughtful governance</p>

</div>

</footer>

// Application state

let currentStep = 1;

let formData = {

issue: '',

context: '',

position: '',

reasoning: '',

answers: {}

};

const questions = [

{

category: "Evidence Challenge",

question: "What concrete evidence contradicts your initial position? What data or facts might you be overlooking or dismissing?",

followUp: "How would a skeptical outsider interpret this same evidence?"

{

category: "Stakeholder Impact",

question: "Which stakeholders might be negatively affected by your proposed approach? Whose voices might not be represented in your current thinking?",

followUp: "What would those affected stakeholders say if they were in the room?"

{

category: "Alternative Solutions",

question: "What are three completely different approaches to this issue that you haven't seriously considered? Why might each be superior?",

followUp: "What would happen if you delayed this decision for 6 months?"

{

category: "Unintended Consequences",

question: "What could go wrong with your preferred approach? What second and third-order effects might emerge?",

followUp: "How might this decision look in 5 years if circumstances change?"

{

category: "Resource Reality",

question: "Are you being realistic about the true costs (financial, time, political capital) of your position? What are you not accounting for?",

followUp: "What would you sacrifice or delay to make this happen?"

{

category: "Institutional Precedent",

question: "What precedent does this decision set? How might future boards use this as justification for decisions you wouldn't support?",

followUp: "Would you be comfortable if your biggest institutional rival made the same decision?"

}

];

// Navigation functions

function goToStep(step) {

// Save current form data

saveCurrentStepData();

// Hide all steps

document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));

// Show target step

document.getElementById('step' + step).classList.remove('hidden');

currentStep = step;

// Update step-specific content

if (step === 2) {

document.getElementById('display-issue').textContent = formData.issue;

} else if (step === 3) {

populateQuestions();

} else if (step === 4) {

generateReport();

}

function saveCurrentStepData() {

if (currentStep === 1) {

formData.issue = document.getElementById('issue').value;

formData.context = document.getElementById('context').value;

} else if (currentStep === 2) {

formData.position = document.getElementById('position').value;

formData.reasoning = document.getElementById('reasoning').value;

} else if (currentStep === 3) {

// Save answers

questions.forEach((q, index) => {

const textarea = document.getElementById('answer-' + index);

if (textarea) {

formData.answers[index] = textarea.value;

}

});

}

function populateQuestions() {

const container = document.getElementById('questions-container');

container.innerHTML = '';

questions.forEach((item, index) => {

const questionDiv = document.createElement('div');

questionDiv.className = 'border border-gray-200 rounded-lg p-6';

questionDiv.innerHTML = `

${item.category}

</span>

<h3 class="text-lg font-medium text-gray-900 mb-2">${item.question}</h3>

<p class="text-sm text-gray-600 italic">${item.followUp}</p>

</div>

<textarea

id="answer-${index}"

placeholder="Take time to thoughtfully consider this question..."

class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 min-h-[100px]"

oninput="updateProgress()"

>${formData.answers[index] || ''}</textarea>

container.appendChild(questionDiv);

});

updateProgress();

}

function updateProgress() {

let answered = 0;

questions.forEach((q, index) => {

const textarea = document.getElementById('answer-' + index);

if (textarea && textarea.value.trim().length > 0) {

answered++;

}

});

document.getElementById('progress').textContent = answered;

// Enable/disable next button

const nextBtn = document.getElementById('next3');

if (answered > 0) {

nextBtn.disabled = false;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-orange-600 text-white hover:bg-orange-700';

} else {

nextBtn.disabled = true;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed';

}

function generateReport() {

let answeredQuestions = 0;

let insights = [];

questions.forEach((q, index) => {

const answer = formData.answers[index];

if (answer && answer.trim().length > 0) {

answeredQuestions++;

insights.push({

category: q.category,

question: q.question,

reflection: answer

});

}

});

const completionRate = Math.round((answeredQuestions / questions.length) * 100);

const reportContent = document.getElementById('report-content');

reportContent.innerHTML = `

<h3 class="text-lg font-semibold text-gray-900 mb-3">Issue Under Consideration</h3>

<p class="text-gray-700">${formData.issue}</p>

</div>

<h3 class="text-lg font-semibold text-gray-900 mb-3">Your Initial Position</h3>

<p class="text-gray-700 mb-4">${formData.position}</p>

<h4 class="font-medium text-gray-800 mb-2">Supporting Reasoning:</h4>

<p class="text-gray-600 text-sm">${formData.reasoning}</p>

</div>

Challenges Explored (${answeredQuestions} of ${questions.length})

</h3>

${insights.length > 0 ? `

${insights.map(insight => `

${insight.category}

</span>

</div>

<p class="text-sm text-gray-600 mb-2 italic">${insight.question}</p>

<p class="text-gray-800">${insight.reflection}</p>

</div>

`).join('')}

</div>

` : `

<p class="text-gray-500 italic">No challenges were explored. Consider going back to strengthen your analysis.</p>

</div>

<h3 class="text-lg font-semibold text-blue-900 mb-3">Preparation Complete</h3>

You've completed ${completionRate}% of the bias check process.

${completionRate >= 50

? "You're well-prepared to contribute thoughtfully to the board discussion."

: "Consider exploring additional challenges to strengthen your preparation."

}

</p>

<h4 class="font-medium text-blue-800 mb-2">For the Board Meeting:</h4>

<li>• Share key insights from your devil's advocate analysis</li>

<li>• Listen for perspectives that address your identified concerns</li>

<li>• Be open to changing your position based on new information</li>

<li>• Help ensure all stakeholder impacts are considered</li>

</ul>

</div>

}

function startOver() {

currentStep = 1;

formData = {

issue: '',

context: '',

position: '',

reasoning: '',

answers: {}

};

// Reset all form fields

document.getElementById('issue').value = '';

document.getElementById('context').value = '';

document.getElementById('position').value = '';

document.getElementById('reasoning').value = '';

goToStep(1);

}

// Form validation

function validateStep1() {

const issue = document.getElementById('issue').value.trim();

const context = document.getElementById('context').value.trim();

const nextBtn = document.getElementById('next1');

if (issue.length > 0 && context.length > 0) {

nextBtn.disabled = false;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-blue-600 text-white hover:bg-blue-700';

} else {

nextBtn.disabled = true;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed';

}

function validateStep2() {

const position = document.getElementById('position').value.trim();

const reasoning = document.getElementById('reasoning').value.trim();

const nextBtn = document.getElementById('next2');

if (position.length > 0 && reasoning.length > 0) {

nextBtn.disabled = false;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-green-600 text-white hover:bg-green-700';

} else {

nextBtn.disabled = true;

nextBtn.className = 'flex items-center px-6 py-3 rounded-lg font-medium bg-gray-300 text-gray-500 cursor-not-allowed';

}

// Event listeners

document.addEventListener('DOMContentLoaded', function() {

document.getElementById('issue').addEventListener('input', validateStep1);

document.getElementById('context').addEventListener('input', validateStep1);

document.getElementById('position').addEventListener('input', validateStep2);

document.getElementById('reasoning').addEventListener('input', validateStep2);

});

</script>

</body>

</html>