🧠 Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play
Bayes' Theorem Game
This game helps you understand Bayes' Theorem:
You're a doctor testing for a disease. Fill in the values:
Explanation:
- P(A) = probability of the disease
- P(B|A) = probability of a positive test given disease
- P(B|¬A) = probability of a positive test without disease
- P(B) = total probability of a positive test
- P(A|B) = probability of having the disease if the test is positive
Visualize the Effect of Each Variable
🧠 Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play
Bayes' Theorem is a powerful tool in probability theory that helps us reason about uncertain events. While it's often introduced with abstract equations, the best way to understand it is through interactive learning.
That’s exactly what this game does: it helps users visualize how probability changes when we tweak the variables in Bayes' formula.
📘 What Is Bayes' Theorem?
Bayes' Theorem relates the conditional and marginal probabilities of random events:
Where:
-
: Probability of A given B (posterior)
-
: Likelihood of B given A
-
: Prior probability of A
-
: Total probability of B
🕹 How This Game Works
You play the role of a doctor trying to interpret test results for a rare disease.
You input:
-
P(Disease) — how likely someone has the disease (prior)
-
P(Positive | Disease) — accuracy of the test when the disease is present
-
P(Positive | No Disease) — false positive rate
Then, the program calculates:
-
P(Disease | Positive) — how likely it is that someone truly has the disease if their test is positive.
It also displays dynamic line charts that let you explore how the outcome changes when one of the values is varied while the others stay fixed.
💻 Full Source Code
Below is the complete HTML and JavaScript source for the game. You can copy and paste this into any .html file and run it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bayes' Theorem Game</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 800px; margin: auto; }
.equation { font-size: 20px; margin: 20px 0; }
.question { margin: 20px 0; }
input[type="number"] { width: 80px; }
button { margin-top: 10px; padding: 5px 10px; }
.result { margin-top: 15px; font-weight: bold; }
canvas { margin-top: 30px; }
</style>
</head>
<body>
<div class="container">
<h1>Bayes' Theorem Game</h1>
<p>This game helps you understand Bayes' Theorem:</p>
<div class="equation">
<strong>P(A|B) = [P(B|A) × P(A)] / P(B)</strong>
</div>
<div class="question">
<p>You're a doctor testing for a disease. Fill in the values:</p>
<label>P(Disease): <input type="number" step="0.01" id="pA" value="0.01"></label><br>
<label>P(Positive | Disease): <input type="number" step="0.01" id="pBgA" value="0.99"></label><br>
<label>P(Positive | No Disease): <input type="number" step="0.01" id="pBgNotA" value="0.05"></label><br>
<button onclick="calculateBayes()">Calculate P(Disease | Positive)</button>
<div class="result" id="result"></div>
</div>
<div>
<p><strong>Explanation:</strong></p>
<ul>
<li>P(A) = probability of the disease</li>
<li>P(B|A) = probability of a positive test given disease</li>
<li>P(B|¬A) = probability of a positive test without disease</li>
<li>P(B) = total probability of a positive test</li>
<li>P(A|B) = probability of having the disease if the test is positive</li>
</ul>
<p><strong>How to calculate P(B):</strong></p>
<p>
P(B) is calculated using the law of total probability:<br>
<strong>P(B) = P(B|A) × P(A) + P(B|¬A) × (1 − P(A))</strong><br>
This means we consider both true positives and false positives:
<ul>
<li>P(B|A) × P(A): positive result when the person actually has the disease</li>
<li>P(B|¬A) × (1 − P(A)): positive result when the person does not have the disease</li>
</ul>
Add these together to get the total chance of a positive test.
</p>
</div>
<h2>Visualize the Effect of Each Variable</h2>
<canvas id="chartPA" width="400" height="200"></canvas>
<canvas id="chartPBgA" width="400" height="200"></canvas>
<canvas id="chartPBgNotA" width="400" height="200"></canvas>
</div>
<script>
function calculateBayesManual(pA, pBgA, pBgNotA) {
const pNotA = 1 - pA;
const pB = (pBgA * pA) + (pBgNotA * pNotA);
return (pBgA * pA) / pB;
}
function calculateBayes() {
const pA = parseFloat(document.getElementById('pA').value);
const pBgA = parseFloat(document.getElementById('pBgA').value);
const pBgNotA = parseFloat(document.getElementById('pBgNotA').value);
const result = calculateBayesManual(pA, pBgA, pBgNotA);
document.getElementById('result').textContent =
`P(Disease | Positive) = ${(result * 100).toFixed(2)}%`;
}
function generateData() {
const steps = 100;
const x = Array.from({length: steps}, (_, i) => (i + 1) / steps);
const data1 = x.map(pA => calculateBayesManual(pA, 0.99, 0.05));
const data2 = x.map(pBgA => calculateBayesManual(0.01, pBgA, 0.05));
const data3 = x.map(pBgNotA => calculateBayesManual(0.01, 0.99, pBgNotA));
return { x, data1, data2, data3 };
}
function drawChart(canvasId, label, data, x) {
const ctx = document.getElementById(canvasId).getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: x,
datasets: [{
label: label,
data: data,
borderWidth: 2,
fill: false,
borderColor: 'blue'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
max: 1
}
}
}
});
}
const { x, data1, data2, data3 } = generateData();
drawChart("chartPA", "P(Disease | Positive) vs P(Disease)", data1, x);
drawChart("chartPBgA", "P(Disease | Positive) vs P(Positive | Disease)", data2, x);
drawChart("chartPBgNotA", "P(Disease | Positive) vs P(Positive | No Disease)", data3, x);
</script>
</body>
</html>
🌟 Why This Matters
People often misinterpret test results, especially when the disease is rare. A positive result doesn't necessarily mean the person has the disease. This tool makes that intuition crystal clear.
If you’re a student, teacher, or just curious about probability—try playing with this interactive game and watch how your beliefs should change.
Comments
Post a Comment