/**
* 🔄 IHK BPMN 2.0 & EPK INTERAKTIVER TRAINER 🔄
* ============================================
* Interaktiver Trainer zur Geschäftsprozessmodellierung:
* 1. Gateway-Logik (XOR, AND, OR) und Pfad-Entscheidungen
* 2. Pool & Lane Regeln (Sequenzfluss vs. Nachrichtenfluss)
* 3. EPK-Syntaxregeln (Ereignis-Funktions-Alternation, Konnektoren)
*/
class BpmnTrainer {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.currentTask = 0;
this.tasks = [
{
title: "Aufgabe 1: BPMN 2.0 Gateway-Auswahl für IT-Support",
scenario: "Ein Kunde meldet ein Softwareproblem im Ticketsystem. Der First-Level-Support analysiert die Anfrage. Wenn das Problem durch Standardwissen gelöst werden kann, wird sofort eine Lösung an den Kunden geschickt. Falls Spezialwissen erforderlich ist, wird das Ticket an das Entwicklerteam eskaliert. Es wird EXAKT EINER dieser beiden Pfade gewählt.",
question: "Welches BPMN 2.0 Gateway muss für diese Verzweigung eingesetzt werden?",
options: [
{ text: "Exklusives Gateway (XOR) - Raute mit 'X' oder leer", correct: true, hint: "Richtig! XOR (Exclusive OR) schlägt genau einen Alternativpfad basierend auf Bedingungen ein." },
{ text: "Paralleles Gateway (AND) - Raute mit '+'", correct: false, hint: "Falsch. AND würde BEIDE Pfade gleichzeitig auslösen." },
{ text: "Inklusives Gateway (OR) - Raute mit 'O'", correct: false, hint: "Falsch. OR erlaubt eine beliebige Kombination (1 bis alle Pfade)." },
{ text: "Ereignisbasiertes Gateway - Raute mit Doppelkreis und Fünfeck", correct: false, hint: "Falsch. Ein event-basiertes Gateway wartet auf externe Ereignisse, nicht auf Datenbedingungen." }
]
},
{
title: "Aufgabe 2: Sequenzfluss vs. Nachrichtenfluss über Pool-Grenzen",
scenario: "Ein Onlineshop (Pool 'Webshop AG') kommuniziert mit einem externen Logistikdienstleister (Pool 'LogiTrans GmbH'). Eine Bestellung wurde abgeschlossen und soll an LogiTrans übertragen werden.",
question: "Welche Verbindungslinie ist zwischen zwei getrennten Pools (Blackbox oder Whitebox) nach BPMN 2.0-Standard zulässig?",
options: [
{ text: "Durchgezogene Linie mit gefülltem Pfeil (Sequenzfluss)", correct: false, hint: "Regelverstoß! Ein Sequenzfluss darf NIEMALS eine Pool-Grenze überschreiten." },
{ text: "Gestrichelte Linie mit offenem Pfeil und Kreis am Ursprung (Nachrichtenfluss)", correct: true, hint: "Perfekt! Nachrichtenflüsse (Message Flow) sind das EINZIGE Mittel zur Kommunikation zwischen getrennten Pools." },
{ text: "Gepunktete Linie ohne Pfeilspitze (Assoziation)", correct: false, hint: "Assoziationen verbinden lediglich Datenobjekte oder Textanmerkungen mit Elementen." },
{ text: "Doppelte durchgezogene Linie", correct: false, hint: "Dieses Symbol existiert im BPMN 2.0 Standard nicht." }
]
},
{
title: "Aufgabe 3: EPK Syntaxregeln (Ereignisgesteuerte Prozesskette)",
scenario: "Ein Auszubildender zeichnet eine EPK für die Serverüberwachung. Nach dem Ereignis 'Server ausgefallen' setzt er direkt einen XOR-Konnektor, um zwischen zwei Folgeaktionen zu verzweigen.",
question: "Ist diese Konstruktion nach den formalen Syntaxregeln einer EPK zulässig?",
options: [
{ text: "Nein! Ein Ereignis hat keine Entscheidungskraft. Eine XOR- oder ODER-Verzweigung darf nur nach einer FUNKTION erfolgen.", correct: true, hint: "Hervorragend! Ein Ereignis ist ein passiver Zustand ohne logische Intelligenz. Nur Funktionen treffen Entscheidungen, die danach mit XOR/ODER verzweigen dürfen." },
{ text: "Ja, jedes Element darf beliebig mit Konnektoren verzweigen.", correct: false, hint: "Falsch. Die Konnektorenregeln der EPK verbieten XOR/ODER direkt nach einem einzelnen Ereignis." },
{ text: "Nein, Konnektoren dürfen in EPKs grundsätzlich nur zur Zusammenführung, nie zur Verzweigung genutzt werden.", correct: false, hint: "Falsch. Konnektoren können sowohl verzweigen als auch zusammenführen." },
{ text: "Ja, solange das Ereignis ein Sechseck ist.", correct: false, hint: "Falsch. Die geometrische Form ändert nichts an den logischen Verknüpfungsregeln." }
]
}
];
this.init();
}
init() {
if (!this.container) return;
this.render();
}
render() {
const t = this.tasks[this.currentTask];
this.container.innerHTML = `
`;
document.getElementById("btn-check-bpmn").addEventListener("click", () => this.check());
document.getElementById("btn-next-bpmn").addEventListener("click", () => {
if (this.currentTask < this.tasks.length - 1) {
this.switchTask(this.currentTask + 1);
}
});
}
selectOption(index) {
const radios = document.getElementsByName("bpmn-radio");
if (radios[index]) radios[index].checked = true;
}
switchTask(index) {
this.currentTask = index;
this.render();
}
check() {
const t = this.tasks[this.currentTask];
const radios = document.getElementsByName("bpmn-radio");
let selected = -1;
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selected = i;
break;
}
}
const box = document.getElementById("bpmn-feedback");
box.style.display = "block";
if (selected === -1) {
box.innerHTML = `⚠️ Bitte wählen Sie eine Antwort aus.`;
return;
}
const chosen = t.options[selected];
t.options.forEach((opt, idx) => {
const card = document.getElementById(`bpmn-opt-${idx}`);
if (opt.correct) {
card.style.borderColor = "#22c55e";
card.style.background = "rgba(34, 197, 94, 0.15)";
} else if (idx === selected) {
card.style.borderColor = "#ef4444";
card.style.background = "rgba(239, 68, 68, 0.15)";
}
});
if (chosen.correct) {
box.innerHTML = `
🎉 Ausgezeichnet!
${chosen.hint}
`;
} else {
box.innerHTML = `
❌ Nicht ganz:
${chosen.hint}
`;
}
}
}
document.addEventListener("DOMContentLoaded", () => {
if (document.getElementById("bpmn-trainer-container")) {
window.bpmnTrainer = new BpmnTrainer("bpmn-trainer-container");
}
});