b67fae4df3
- Added ihk_ap2_fiae (Anwendungsentwicklung: 12 modules, 4 tracks, Clean Architecture, GoF, UML 2.5, SOLID, O-Notation, 80h-Project guide) - Added ihk_ap2_fidp (Daten- & Prozessanalyse: 12 modules, 4 tracks, BPMN 2.0, ETL/CDC, Star Schema, ML-Evaluation, interactive confusion matrix calculator, 40h-Project guide) - Added ihk_ap2_fidv (Digitale Vernetzung: 12 modules, 4 tracks, CPS/RAMI 4.0, IO-Link, Profinet, TSN, OPC UA/MQTT, 5G Campus, IEC 62443, interactive Purdue trainer, 40h-Project guide) - Expanded authentic question bank to 207 questions with official ZPA expectation horizons - Registered all courses in courses_manifest.js, it_ausbildungen_manifest.js, server.py routes, and dashboard.html with button-only navigation
95 lines
5.1 KiB
JavaScript
95 lines
5.1 KiB
JavaScript
/**
|
|
* Interaktiver Konfusionsmatrix- & ML-Kennzahlen-Rechner für FIDP
|
|
* IHK ZPA Nord-West AP2
|
|
*/
|
|
(function() {
|
|
function renderConfusionMatrix(containerId) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
container.innerHTML = `
|
|
<div style="background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 20px; color: #f8fafc;">
|
|
<h4 style="color: #38bdf8; margin-top: 0; margin-bottom: 12px;">📊 Interaktiver Konfusionsmatrix-Rechner (FIDP)</h4>
|
|
<p style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 16px;">
|
|
Geben Sie die Werte der 2x2-Konfusionsmatrix ein, um Accuracy, Precision, Recall und F1-Score nach IHK-Formeln live zu berechnen:
|
|
</p>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 480px; margin-bottom: 20px;">
|
|
<div style="background: #1e293b; padding: 12px; border-radius: 6px; border-left: 4px solid #22c55e;">
|
|
<label style="font-size: 0.85rem; color: #4ade80; display: block; font-weight: 600;">True Positive (TP)</label>
|
|
<input type="number" id="cm_tp" value="80" min="0" class="ihk-input" style="width: 100%; margin-top: 6px;" />
|
|
</div>
|
|
<div style="background: #1e293b; padding: 12px; border-radius: 6px; border-left: 4px solid #f59e0b;">
|
|
<label style="font-size: 0.85rem; color: #fcd34d; display: block; font-weight: 600;">False Positive (FP - Alpha-Fehler)</label>
|
|
<input type="number" id="cm_fp" value="20" min="0" class="ihk-input" style="width: 100%; margin-top: 6px;" />
|
|
</div>
|
|
<div style="background: #1e293b; padding: 12px; border-radius: 6px; border-left: 4px solid #ef4444;">
|
|
<label style="font-size: 0.85rem; color: #f87171; display: block; font-weight: 600;">False Negative (FN - Beta-Fehler)</label>
|
|
<input type="number" id="cm_fn" value="10" min="0" class="ihk-input" style="width: 100%; margin-top: 6px;" />
|
|
</div>
|
|
<div style="background: #1e293b; padding: 12px; border-radius: 6px; border-left: 4px solid #3b82f6;">
|
|
<label style="font-size: 0.85rem; color: #60a5fa; display: block; font-weight: 600;">True Negative (TN)</label>
|
|
<input type="number" id="cm_tn" value="890" min="0" class="ihk-input" style="width: 100%; margin-top: 6px;" />
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; background: #1e293b; padding: 16px; border-radius: 6px;">
|
|
<div>
|
|
<div style="color: #94a3b8; font-size: 0.8rem;">Genauigkeit (Accuracy)</div>
|
|
<div id="res_acc" style="font-size: 1.3rem; font-weight: bold; color: #38bdf8;">-- %</div>
|
|
<div style="font-size: 0.75rem; color: #64748b;">(TP + TN) / Gesamt</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: #94a3b8; font-size: 0.8rem;">Präzision (Precision)</div>
|
|
<div id="res_prec" style="font-size: 1.3rem; font-weight: bold; color: #fcd34d;">-- %</div>
|
|
<div style="font-size: 0.75rem; color: #64748b;">TP / (TP + FP)</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: #94a3b8; font-size: 0.8rem;">Trefferquote (Recall)</div>
|
|
<div id="res_rec" style="font-size: 1.3rem; font-weight: bold; color: #4ade80;">-- %</div>
|
|
<div style="font-size: 0.75rem; color: #64748b;">TP / (TP + FN)</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: #94a3b8; font-size: 0.8rem;">Harmonisches Mittel (F1)</div>
|
|
<div id="res_f1" style="font-size: 1.3rem; font-weight: bold; color: #c084fc;">--</div>
|
|
<div style="font-size: 0.75rem; color: #64748b;">2 * (P * R) / (P + R)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
function update() {
|
|
const tp = parseFloat(document.getElementById('cm_tp').value) || 0;
|
|
const fp = parseFloat(document.getElementById('cm_fp').value) || 0;
|
|
const fn = parseFloat(document.getElementById('cm_fn').value) || 0;
|
|
const tn = parseFloat(document.getElementById('cm_tn').value) || 0;
|
|
const total = tp + fp + fn + tn;
|
|
|
|
if (total === 0) return;
|
|
|
|
const acc = ((tp + tn) / total) * 100;
|
|
const prec = (tp + fp > 0) ? (tp / (tp + fp)) * 100 : 0;
|
|
const rec = (tp + fn > 0) ? (tp / (tp + fn)) * 100 : 0;
|
|
const p = prec / 100;
|
|
const r = rec / 100;
|
|
const f1 = (p + r > 0) ? (2 * (p * r) / (p + r)) : 0;
|
|
|
|
document.getElementById('res_acc').textContent = acc.toFixed(2) + ' %';
|
|
document.getElementById('res_prec').textContent = prec.toFixed(2) + ' %';
|
|
document.getElementById('res_rec').textContent = rec.toFixed(2) + ' %';
|
|
document.getElementById('res_f1').textContent = f1.toFixed(3);
|
|
}
|
|
|
|
['cm_tp', 'cm_fp', 'cm_fn', 'cm_tn'].forEach(id => {
|
|
document.getElementById(id).addEventListener('input', update);
|
|
});
|
|
|
|
update();
|
|
}
|
|
|
|
window.renderConfusionMatrix = renderConfusionMatrix;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (document.getElementById('confusion-matrix-app')) {
|
|
renderConfusionMatrix('confusion-matrix-app');
|
|
}
|
|
});
|
|
})();
|