De Driehoek van Vergeven – Interactieve Analyse
https://cdn.tailwindcss.com
https://cdn.jsdelivr.net/npm/chart.js

body { font-family: ‘Lato’, sans-serif; background-color: #f5f5f4; color: #44403c; }
h1, h2, h3 { font-family: ‘Playfair Display’, serif; }
.chart-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; height: 350px; max-height: 400px; }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.active-tab { border-bottom: 3px solid #a8a29e; font-weight: 700; color: #292524; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #78716c; cursor: pointer; border-radius: 50%; }
.slider-thumb::-moz-range-thumb { width: 20px; height: 20px; background: #78716c; cursor: pointer; border-radius: 50%; }

Experience/Reflect -> Analyze -> Conclude.
–>

// State Management
const state = {
scores: [5, 5, 5],
labels: [
‘Anderen Vergeven’,
‘Jezelf (naar anderen)’,
‘Jezelf (naar jezelf)’
]
};

// — Visualization & Content Choices —
// Chart.js Radar Chart
// Why: Radar charts (spider webs) are ideal for multivariate data with a cyclical or closed nature, like a triangle of concepts.
// It visually demonstrates “balance” vs “skew” immediately.

let radarChart;

function initChart() {
const ctx = document.getElementById(‘forgivenessChart’).getContext(‘2d’);

radarChart = new Chart(ctx, {
type: ‘radar’,
data: {
labels: state.labels,
datasets: [{
label: ‘Jouw Balans’,
data: state.scores,
fill: true,
backgroundColor: ‘rgba(120, 113, 108, 0.2)’, // Stone-500 with opacity
borderColor: ‘rgba(87, 83, 78, 1)’, // Stone-700
pointBackgroundColor: ‘rgba(87, 83, 78, 1)’,
pointBorderColor: ‘#fff’,
pointHoverBackgroundColor: ‘#fff’,
pointHoverBorderColor: ‘rgba(87, 83, 78, 1)’
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
elements: {
line: { borderWidth: 3 }
},
scales: {
r: {
angleLines: { color: ‘rgba(0,0,0,0.1)’ },
grid: { color: ‘rgba(0,0,0,0.05)’ },
pointLabels: {
font: { size: 12, family: “‘Lato’, sans-serif”, weight: ‘bold’ },
color: ‘#44403c’
},
suggestedMin: 0,
suggestedMax: 10,
ticks: { display: false, stepSize: 2 }
}
},
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: ‘rgba(68, 64, 60, 0.9)’,
titleFont: { family: “‘Playfair Display’, serif” },
bodyFont: { family: “‘Lato’, sans-serif” },
callbacks: {
label: function(context) {
return `Score: ${context.raw}/10`;
}
}
}
}
}
});
}

// — Interaction Logic —

function updateChart() {
// Get values from inputs
const v1 = parseInt(document.getElementById(‘input-1’).value);
const v2 = parseInt(document.getElementById(‘input-2’).value);
const v3 = parseInt(document.getElementById(‘input-3’).value);

// Update UI text
document.getElementById(‘val-1’).innerText = v1 + “/10”;
document.getElementById(‘val-2’).innerText = v2 + “/10”;
document.getElementById(‘val-3’).innerText = v3 + “/10”;

// Update State
state.scores = [v1, v2, v3];

// Update Chart
radarChart.data.datasets[0].data = state.scores;
radarChart.update();

// Dynamic Feedback
updateAnalysisText(v1, v2, v3);
}

function updateAnalysisText(v1, v2, v3) {
const el = document.getElementById(‘analysis-text’);
const avg = (v1 + v2 + v3) / 3;
const range = Math.max(v1, v2, v3) – Math.min(v1, v2, v3);

let msg = “”;

if (range > 4) {
msg = “Er is een sterke disbalans. De driehoek is uit vorm, wat kan leiden tot innerlijke wrijving.”;
} else if (avg > 8) {
msg = “Een krachtige, ruime driehoek. Je ervaart waarschijnlijk veel innerlijke vrijheid.”;
} else if (avg < 4) {
msg = "De driehoek is klein. Er is veel ruimte voor groei en bevrijding.";
} else {
msg = "Je bent op weg naar balans, maar er is nog werk te verrichten aan specifieke zijden.";
}

// Specific Low Point advice
if (v3 < v1 && v3 < v2) {
msg += "
(Tip: Wees zachter voor jezelf. Jezelf vergeven is vaak de sleutel tot de rest.)“;
} else if (v1 < v2 && v1 < v3) {
msg += "
(Tip: Wrok naar anderen houdt vooral jouzelf gevangen.)“;
}

el.innerHTML = msg;
}

function selectPoint(id) {
// UI Logic for Card Selection
// Reset all cards
[1, 2, 3].forEach(i => {
document.getElementById(`detail-${i}`).classList.add(‘hidden’);
document.getElementById(`card-${i}`).classList.remove(‘ring-2’, ‘ring-stone-400’, ‘bg-stone-50’);
document.getElementById(`card-${i}`).classList.add(‘bg-white’);
});

// Activate selected
document.getElementById(`detail-${id}`).classList.remove(‘hidden’);
document.getElementById(`card-${id}`).classList.add(‘ring-2’, ‘ring-stone-400’, ‘bg-stone-50’);
document.getElementById(`card-${id}`).classList.remove(‘bg-white’);

// Contextual Message
const insights = [
“”,
“Zijde 1: De externe projectie loslaten.”,
“Zijde 2: De interne schuld loslaten.”,
“Zijde 3: De innerlijke vrede herstellen.”
];
document.getElementById(‘model-insight’).innerText = insights[id];
}

// Initialize on Load
window.addEventListener(‘DOMContentLoaded’, () => {
initChart();
});