Files
intranet/web/intranet_repo/projects/brandschutz/brandschutz.php
T

3071 lines
140 KiB
PHP

<?php /* Name: brandschutz.php
Beschreibung: Interaktive Brandschutzunterweisung, 5 Säulen des Brandschutzes */
require_once $_SERVER['DOCUMENT_ROOT'].'/intranet_repo/general_files/initialise.php';
// Schulung abschließen (POST-Request)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['bs_complete_training'])) {
$userId = (int)$_SESSION['user_id'];
// Prüfen ob der Nutzer die Brandschutz-Rolle hat
$stmtCheck = $pdo->prepare("SELECT \"Brandschutz\" FROM user_permissions WHERE user_id = ?");
$stmtCheck->execute([$userId]);
$hasBrandschutz = $stmtCheck->fetchColumn();
if ((int)$hasBrandschutz === 1) {
$today = date('Y-m-d');
// Tracking-Eintrag aktualisieren oder anlegen
$stmtUpsert = $pdo->prepare("INSERT INTO brandschutz_training (user_id, last_training_date, reminder_count, admin_reminder_count) VALUES (?, ?, 0, 0) ON CONFLICT (user_id) DO UPDATE SET last_training_date = EXCLUDED.last_training_date, reminder_count = 0, admin_reminder_count = 0");
$stmtUpsert->execute([$userId, $today]);
// Bestätigungsmail an den Nutzer senden
require_once $_SERVER['DOCUMENT_ROOT'].'/intranet_repo/general_files/ini/send_mail.php';
$userName = trim(($user['first_name'] ?? '') . ' ' . ($user['last_name'] ?? ''));
$greeting = !empty($user['first_name']) ? "Hallo {$user['first_name']}" : "Hallo";
$mailSubject = "Brandschutzunterweisung erfolgreich absolviert";
$mailMessage = "{$greeting},\n\nSie haben die Brandschutzunterweisung am " . date('d.m.Y') . " erfolgreich absolviert.\n\nIhre nächste Unterweisung ist bis zum " . date('d.m.Y', strtotime('+365 days')) . " fällig.\n\nVielen Dank für Ihre Teilnahme!";
send_intranet_mail($user['mail'], $mailSubject, $mailMessage);
// Systemnachricht ins Admin-Postfach (erledigt)
if (empty($userName)) $userName = $user['mail'] ?? 'Unbekannt';
$sysSubject = "Brandschutzschulung absolviert: {$userName}";
$sysMessage = "{$userName} hat die Brandschutzunterweisung am " . date('d.m.Y') . " erfolgreich absolviert.";
$senderMail = $user['mail'] ?? '';
$stmtMsg = $pdo->prepare("INSERT INTO admin_messages (type, sender_name, sender_email, subject, message, status, processed_at, created_at) VALUES ('system', ?, ?, ?, ?, 'done', NOW(), NOW())");
$stmtMsg->execute([$userName, $senderMail, $sysSubject, $sysMessage]);
header("Location: /intranet_repo/projects/intranet/index.php?message=8");
exit();
}
}
?>
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<?php require_once $_SERVER['DOCUMENT_ROOT'].'/intranet_repo/projects/_central/php/html_head.php'; ?>
<title>Brandschutzunterweisung</title>
</head>
<body class="theme-orange">
<?php require_once $_SERVER['DOCUMENT_ROOT'].'/intranet_repo/projects/_central/php/header.php'; ?>
<?php include $g_phpSnippetsPath.'overlay_message.php'; ?>
<div class="header_title ht_orange" id="header_title">
<span class="header_title_text">Brandschutzunterweisung</span>
</div>
<style>
/* ══════════════════════════════════════
BRANDSCHUTZ, Variables & Base
══════════════════════════════════════ */
:root {
--bs-primary: #f08200;
--bs-primary-hover: #d97400;
--bs-primary-light: #fff4e6;
--bs-primary-shadow: rgba(240,130,0,0.35);
--bs-red: #d21400;
--bs-red-light: #ffeaea;
--bs-green: #2e7d32;
--bs-green-light: #e8f5e9;
}
/* ══════════════════════════════════════
WIZARD CONTAINER
══════════════════════════════════════ */
.bs-page-wrapper {
margin-top: calc(var(--header-height) + var(--header-title-height));
min-height: calc(100vh - var(--header-height) - var(--header-title-height) - var(--footer-height));
background: linear-gradient(135deg, var(--gray-50) 0%, hsl(30, 80%, 95%) 100%);
padding: var(--space-lg) 0 var(--space-3xl);
}
.bs-wizard {
max-width: 1400px;
width: 90%;
margin: 0 auto;
background: #ffffff;
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* ══════════════════════════════════════
MAIN PROGRESS BAR (Sections)
══════════════════════════════════════ */
.bs-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 20px 28px 16px;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
flex-wrap: wrap;
}
.bs-progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
cursor: default;
transition: opacity 150ms;
}
.bs-progress-step:hover { opacity: 1; }
.bs-progress-circle {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--gray-500);
background: var(--gray-200);
border: 2px solid var(--gray-300);
transition: all 250ms ease;
}
.bs-progress-step.active .bs-progress-circle {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #ffffff;
box-shadow: 0 2px 8px var(--bs-primary-shadow);
}
.bs-progress-step.done .bs-progress-circle {
background: #ffffff;
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.bs-progress-label {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--gray-500);
white-space: nowrap;
transition: color 250ms ease;
max-width: 80px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.bs-progress-step.active .bs-progress-label,
.bs-progress-step.done .bs-progress-label {
color: var(--bs-primary);
}
.bs-progress-line {
flex: 1;
height: 2px;
min-width: 16px;
max-width: 50px;
background: var(--gray-300);
margin: 0 6px;
margin-bottom: 20px;
transition: background 250ms ease;
}
.bs-progress-line.done {
background: var(--bs-primary);
}
/* ══════════════════════════════════════
BODY & SECTION CONTENT
══════════════════════════════════════ */
.bs-body {
padding: 28px 32px 20px;
}
.bs-section-title {
margin: 0 0 16px 0;
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gray-600);
}
.bs-section-header {
text-align: center;
padding: 12px 20px;
background: var(--bs-primary-light);
border-bottom: 1px solid #fde0b0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--bs-primary-hover);
letter-spacing: 0.3px;
}
.bs-chapter-title {
font-size: 1.6rem;
font-weight: 600;
color: var(--gray-900);
margin: 0 0 8px 0;
}
.bs-chapter-subtitle {
font-size: var(--font-size-base);
color: var(--gray-600);
margin: 0 0 24px 0;
line-height: 1.6;
}
.bs-text {
font-size: var(--font-size-base);
color: var(--gray-800);
line-height: 1.7;
margin-bottom: 16px;
}
.bs-text strong { color: var(--gray-900); }
.bs-text a,
.bs-wizard label a {
text-decoration: none;
pointer-events: auto;
position: relative;
z-index: 1;
}
/* ══════════════════════════════════════
5 PILLAR VISUAL
══════════════════════════════════════ */
.bs-pillar-visual {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 12px;
margin: 32px 0;
padding: 24px 16px;
background: linear-gradient(180deg, #fff9f0 0%, #fff 100%);
border: 1px solid #fde0b0;
min-height: 260px;
}
.bs-pillar-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
flex: 1;
max-width: 160px;
cursor: pointer;
transition: transform 200ms;
}
.bs-pillar-col:hover { transform: translateY(-4px); }
.bs-pillar-top {
width: 100%;
padding: 10px 6px;
background: var(--bs-primary);
color: #ffffff;
font-size: 0.72rem;
font-weight: 600;
text-align: center;
line-height: 1.3;
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
}
.bs-pillar-shaft {
width: 100%;
background: #fde0b0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: var(--bs-primary);
min-height: 120px;
border-left: 2px solid var(--bs-primary);
border-right: 2px solid var(--bs-primary);
}
.bs-pillar-base {
width: 110%;
height: 12px;
background: var(--bs-primary);
}
.bs-pillar-roof {
width: 100%;
text-align: center;
padding: 6px 0;
font-size: 0.65rem;
font-weight: 600;
color: var(--bs-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ══════════════════════════════════════
ACTIONS BAR
══════════════════════════════════════ */
.bs-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 16px 28px 20px;
border-top: 1px solid var(--gray-200);
}
.bs-actions-left,
.bs-actions-right {
display: flex;
gap: 8px;
}
.bs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 18px;
font-size: var(--font-size-sm);
font-weight: 600;
font-family: var(--font-primary);
border: 1px solid var(--gray-300);
background: #ffffff;
color: var(--gray-800);
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
white-space: nowrap;
}
.bs-btn:hover {
background: var(--gray-100);
transform: translateY(-1px);
}
.bs-btn-primary {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #ffffff;
}
.bs-btn-primary:hover {
background: var(--bs-primary-hover);
border-color: var(--bs-primary-hover);
}
.bs-btn-locked {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.bs-btn-check-disabled {
opacity: 0.4;
pointer-events: none;
}
.bs-btn-success {
background: var(--bs-green);
border-color: var(--bs-green);
color: #ffffff;
}
.bs-btn-success:hover {
background: var(--bs-green);
border-color: var(--bs-green);
transform: none;
}
.bs-btn-success.bs-btn-check-disabled {
opacity: 1;
}
.bs-btn-failed {
background: var(--bs-red);
border-color: var(--bs-red);
color: #ffffff;
}
.bs-btn-failed.bs-btn-check-disabled {
opacity: 1;
}
.bs-quiz-btn-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ══════════════════════════════════════
INFO BOX / TIP BOX / WARNING BOX
══════════════════════════════════════ */
.bs-infobox {
padding: 16px 20px;
margin: 16px 0;
border-left: 4px solid var(--bs-primary);
background: var(--bs-primary-light);
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
}
.bs-infobox-title {
font-weight: 600;
margin-bottom: 6px;
color: var(--bs-primary);
}
.bs-warnbox {
padding: 16px 20px;
margin: 16px 0;
border-left: 4px solid var(--bs-red);
background: var(--bs-red-light);
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
}
.bs-warnbox-title {
font-weight: 600;
margin-bottom: 6px;
color: var(--bs-red);
}
.bs-successbox {
padding: 16px 20px;
margin: 16px 0;
border-left: 4px solid var(--bs-green);
background: var(--bs-green-light);
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
}
/* ══════════════════════════════════════
LIST STYLES
══════════════════════════════════════ */
.bs-list {
list-style: none;
padding: 0;
margin: 12px 0;
}
.bs-list li {
padding: 8px 0 8px 28px;
position: relative;
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
border-bottom: 1px solid var(--gray-100);
}
.bs-list li:last-child { border-bottom: none; }
.bs-list li::before {
content: '';
position: absolute;
left: 6px;
top: 14px;
width: 8px;
height: 8px;
background: var(--bs-primary);
}
.bs-list-numbered {
list-style: none;
padding: 0;
margin: 12px 0;
counter-reset: bs-counter;
}
.bs-list-numbered li {
padding: 10px 0 10px 40px;
position: relative;
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
border-bottom: 1px solid var(--gray-100);
counter-increment: bs-counter;
}
.bs-list-numbered li:last-child { border-bottom: none; }
.bs-list-numbered li::before {
content: counter(bs-counter);
position: absolute;
left: 0;
top: 8px;
width: 26px;
height: 26px;
background: var(--bs-primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ══════════════════════════════════════
QUIZ / INTERACTIVE ELEMENTS
══════════════════════════════════════ */
.bs-quiz {
margin: 20px 0;
padding: 20px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
}
.bs-quiz-question {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--gray-900);
margin-bottom: 14px;
line-height: 1.5;
}
.bs-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.bs-quiz-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #ffffff;
border: 2px solid var(--gray-200);
cursor: pointer;
transition: all 150ms;
font-size: var(--font-size-sm);
color: var(--gray-800);
}
.bs-quiz-option:hover { border-color: var(--bs-primary); background: var(--bs-primary-light); }
.bs-quiz-locked .bs-quiz-option { pointer-events: none; }
.bs-quiz-option.selected { border-color: var(--bs-primary); background: var(--bs-primary-light); }
.bs-quiz-option.correct { border-color: var(--bs-green); background: var(--bs-green-light); }
.bs-quiz-option.wrong { border-color: var(--bs-red); background: var(--bs-red-light); }
.bs-quiz-option input[type="checkbox"] { display: none; }
.bs-quiz-indicator {
width: 20px;
height: 20px;
border: 2px solid var(--gray-400);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: transparent;
}
.bs-quiz-option.selected .bs-quiz-indicator {
border-color: var(--bs-primary);
background: var(--bs-primary);
color: #ffffff;
}
.bs-quiz-option.correct .bs-quiz-indicator {
border-color: var(--bs-green);
background: var(--bs-green);
color: #ffffff;
}
.bs-quiz-option.wrong .bs-quiz-indicator {
border-color: var(--bs-red);
background: var(--bs-red);
color: #ffffff;
}
.bs-quiz-feedback,
.bs-feedback {
margin-top: 12px;
padding: 10px 14px;
font-size: var(--font-size-sm);
font-weight: 600;
display: none;
}
.bs-quiz-feedback.show,
.bs-feedback.show { display: block; }
.bs-quiz-feedback.correct,
.bs-feedback.correct {
background: var(--bs-green-light);
color: var(--bs-green);
border-left: 4px solid var(--bs-green);
}
.bs-quiz-feedback.wrong,
.bs-feedback.wrong {
background: var(--bs-red-light);
color: var(--bs-red);
border-left: 4px solid var(--bs-red);
}
.bs-quiz-check {
margin-top: 12px;
}
/* ══════════════════════════════════════
DRAG & DROP SORTING
══════════════════════════════════════ */
.bs-drag-container {
margin: 16px 0;
}
.bs-drag-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #ffffff;
border: 2px solid var(--gray-200);
margin-bottom: 6px;
cursor: grab;
transition: all 150ms;
font-size: var(--font-size-sm);
color: var(--gray-800);
user-select: none;
}
.bs-drag-item:active { cursor: grabbing; }
.bs-drag-item:hover { border-color: var(--bs-primary); }
.bs-drag-item.dragging { opacity: 0.4; border-style: dashed; }
.bs-drag-item.correct { border-color: var(--bs-green); background: var(--bs-green-light); }
.bs-drag-item.wrong { border-color: var(--bs-red); background: var(--bs-red-light); }
.bs-drag-handle {
color: var(--gray-400);
font-size: 1.1rem;
flex-shrink: 0;
}
.bs-drag-number {
width: 24px;
height: 24px;
background: var(--gray-200);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.75rem;
color: var(--gray-600);
flex-shrink: 0;
}
.bs-drag-item.correct .bs-drag-number { background: var(--bs-green); color: #fff; }
.bs-drag-item.wrong .bs-drag-number { background: var(--bs-red); color: #fff; }
/* ══════════════════════════════════════
MATCHING EXERCISE
══════════════════════════════════════ */
.bs-match-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 16px 0;
}
.bs-match-item {
padding: 12px 16px;
background: #ffffff;
border: 2px solid var(--gray-200);
font-size: var(--font-size-sm);
color: var(--gray-800);
cursor: pointer;
transition: all 150ms;
text-align: center;
}
.bs-match-item:hover { border-color: var(--bs-primary); }
.bs-match-item.selected { border-color: var(--bs-primary); background: var(--bs-primary-light); }
.bs-match-item.matched { border-color: var(--bs-green); background: var(--bs-green-light); cursor: default; }
.bs-match-item.wrong-match { border-color: var(--bs-red); background: var(--bs-red-light); }
/* Dropdown matching */
.bs-dropdown-match { margin: 16px 0; }
.bs-dropdown-match-row {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #ffffff;
border: 2px solid var(--gray-200);
margin-bottom: 8px;
transition: border-color 150ms;
}
.bs-dropdown-match-row.correct { border-color: var(--bs-green); background: var(--bs-green-light); }
.bs-dropdown-match-row.wrong { border-color: var(--bs-red); background: var(--bs-red-light); }
.bs-dropdown-match-label { flex: 1; font-weight: 600; color: var(--gray-800); }
.bs-dropdown-match-select {
padding: 8px 12px;
border: 2px solid var(--gray-200);
font-size: var(--font-size-sm);
color: var(--gray-800);
background: #fff;
min-width: 200px;
}
.bs-dropdown-match-select:focus { border-color: var(--bs-primary); outline: none; }
/* ══════════════════════════════════════
SCENARIO CARD
══════════════════════════════════════ */
.bs-scenario {
margin: 20px 0;
border: 1px solid var(--gray-200);
overflow: hidden;
}
.bs-scenario-header {
padding: 14px 20px;
background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-hover));
color: #ffffff;
font-weight: 600;
font-size: var(--font-size-sm);
}
.bs-scenario-body {
padding: 20px;
}
.bs-scenario-text {
font-size: var(--font-size-sm);
color: var(--gray-800);
line-height: 1.6;
margin-bottom: 16px;
font-style: italic;
}
/* ══════════════════════════════════════
CHECKLIST
══════════════════════════════════════ */
.bs-checklist { list-style: none; padding: 0; margin: 16px 0; }
.bs-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--gray-100);
font-size: var(--font-size-sm);
color: var(--gray-800);
cursor: pointer;
}
.bs-checklist li:last-child { border-bottom: none; }
.bs-check-box {
width: 22px;
height: 22px;
border: 2px solid var(--gray-300);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: transparent;
transition: all 150ms;
margin-top: 1px;
}
.bs-checklist li.checked .bs-check-box {
border-color: var(--bs-green);
background: var(--bs-green);
color: #ffffff;
}
.bs-checklist li.checked { color: var(--gray-500); }
/* ══════════════════════════════════════
SCORE DISPLAY
══════════════════════════════════════ */
.bs-score {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 24px;
margin: 20px 0;
background: var(--gray-50);
border: 1px solid var(--gray-200);
}
.bs-score-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--bs-primary);
}
.bs-score-label {
font-size: var(--font-size-sm);
color: var(--gray-600);
font-weight: 500;
}
/* ══════════════════════════════════════
FILL-IN-THE-BLANK
══════════════════════════════════════ */
.bs-fill-input {
display: inline-block;
border: none;
border-bottom: 2px solid var(--bs-primary);
background: transparent;
font-family: var(--font-primary);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--gray-900);
padding: 2px 6px;
width: 120px;
outline: none;
transition: border-color 200ms;
}
.bs-fill-input:focus { border-color: var(--bs-primary-hover); }
.bs-fill-input.correct { border-color: var(--bs-green); color: var(--bs-green); }
.bs-fill-input.wrong { border-color: var(--bs-red); color: var(--bs-red); }
/* ══════════════════════════════════════
ACCORDION / EXPANDABLE
══════════════════════════════════════ */
.bs-accordion {
margin: 16px 0;
border: 1px solid var(--gray-200);
}
.bs-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--gray-50);
cursor: pointer;
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--gray-800);
transition: background 150ms;
}
.bs-accordion-header:hover { background: var(--gray-100); }
.bs-accordion-arrow {
transition: transform 250ms;
font-size: 0.8rem;
color: var(--gray-500);
}
.bs-accordion.open .bs-accordion-arrow { transform: rotate(180deg); }
.bs-accordion-content {
display: none;
padding: 16px 18px;
font-size: var(--font-size-sm);
color: var(--gray-700);
line-height: 1.6;
border-top: 1px solid var(--gray-200);
}
.bs-accordion.open .bs-accordion-content { display: block; }
/* ══════════════════════════════════════
PLACEHOLDER (Säule 5)
══════════════════════════════════════ */
.bs-placeholder {
padding: 60px 20px;
text-align: center;
color: var(--gray-500);
}
.bs-placeholder-icon {
font-size: 3rem;
margin-bottom: 16px;
}
.bs-placeholder-text {
font-size: var(--font-size-base);
font-weight: 500;
}
/* ══════════════════════════════════════
INTRO HERO / 5 SÄULEN ERKLÄRUNG
══════════════════════════════════════ */
.bs-intro-hero {
margin: 16px 0 24px;
background: linear-gradient(180deg, #fff9f0 0%, #ffffff 100%);
border: 1px solid #fde0b0;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
overflow: hidden;
}
.bs-intro-image-wrap {
padding: 18px 18px 0;
text-align: center;
}
.bs-intro-image {
width: 100%;
max-width: 980px;
height: auto;
display: block;
margin: 0 auto;
}
.bs-intro-card {
margin: 18px 18px 18px;
padding: 18px 20px 20px;
background: #ffffff;
border-top: 4px solid var(--bs-primary);
box-shadow: 0 -6px 18px rgba(0,0,0,0.05);
text-align: left;
}
.bs-intro-lead {
margin: 0 0 16px 0;
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--gray-800);
}
.bs-intro-lead strong { color: var(--bs-primary-hover); }
.bs-intro-pillars {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.bs-intro-pillar {
padding: 12px 10px;
background: var(--bs-primary-light);
border: 1px solid #fde0b0;
text-align: center;
transition: transform 150ms ease, box-shadow 150ms ease;
}
.bs-intro-pillar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(240,130,0,0.16);
}
.bs-intro-pillar-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-bottom: 8px;
background: var(--bs-primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
}
.bs-intro-pillar-title {
display: block;
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--gray-900);
line-height: 1.35;
}
/* ══════════════════════════════════════
SCORE / PROGRESS PAGE
══════════════════════════════════════ */
.bs-score-bar-wrap {
margin: 24px 0;
}
.bs-score-bar {
width: 100%;
height: 24px;
background: var(--gray-200);
overflow: hidden;
}
.bs-score-bar-fill {
height: 100%;
transition: width 600ms ease;
}
.bs-score-bar-label {
margin-top: 8px;
font-size: var(--font-size-sm);
color: var(--gray-600);
font-weight: 500;
text-align: center;
}
.bs-score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin: 20px 0;
}
.bs-score-card {
padding: 20px 16px;
text-align: center;
background: var(--gray-50);
border: 1px solid var(--gray-200);
}
.bs-score-card-num {
font-size: 1.8rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 4px;
}
.bs-score-card-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bs-score-correct .bs-score-card-num { color: var(--bs-green); }
.bs-score-wrong .bs-score-card-num { color: var(--bs-red); }
.bs-score-open .bs-score-card-num { color: var(--bs-primary); }
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 600px) {
.bs-wizard { margin: 0; width: 100%; }
.bs-progress { padding: 14px 8px 10px; }
.bs-progress-step[data-section="0"],
.bs-progress-step[data-section="0"] + .bs-progress-line {
display: none;
}
.bs-progress-label { font-size: 0.6rem; max-width: 48px; }
.bs-progress-circle { width: 26px; height: 26px; font-size: 0.7rem; }
.bs-progress-line { min-width: 8px; max-width: 20px; margin-bottom: 16px; }
.bs-body { padding: 16px; }
.bs-actions { padding: 12px 16px 16px; flex-wrap: wrap; }
.bs-pillar-visual { flex-wrap: wrap; gap: 8px; padding: 16px 8px; }
.bs-pillar-col { max-width: 100px; }
.bs-pillar-shaft { min-height: 80px; font-size: 1.5rem; }
.bs-match-grid { grid-template-columns: 1fr; }
.bs-dropdown-match-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.bs-dropdown-match-select { min-width: unset; width: 100%; }
.bs-chapter-title { font-size: 1.3rem; }
.bs-intro-image-wrap { padding: 10px 10px 0; }
.bs-intro-card { margin: 10px 10px 10px; padding: 14px; }
.bs-intro-pillars { grid-template-columns: 1fr; }
.bs-intro-pillar { display: flex; align-items: center; gap: 10px; text-align: left; }
.bs-intro-pillar-number { margin-bottom: 0; flex-shrink: 0; }
.bs-score-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
<div class="bs-page-wrapper">
<div class="bs-wizard">
<!-- ═══════════════════════════════════════════
MAIN PROGRESS BAR
═══════════════════════════════════════════ -->
<div class="bs-progress" id="bsMainProgress">
<div class="bs-progress-step active" data-section="0">
<div class="bs-progress-circle">0</div>
<span class="bs-progress-label">Einleitung</span>
</div>
<div class="bs-progress-line"></div>
<div class="bs-progress-step" data-section="1">
<div class="bs-progress-circle">1</div>
<span class="bs-progress-label">Brandverhütung</span>
</div>
<div class="bs-progress-line"></div>
<div class="bs-progress-step" data-section="2">
<div class="bs-progress-circle">2</div>
<span class="bs-progress-label">Brandfall</span>
</div>
<div class="bs-progress-line"></div>
<div class="bs-progress-step" data-section="3">
<div class="bs-progress-circle">3</div>
<span class="bs-progress-label">vBsU</span>
</div>
<div class="bs-progress-line"></div>
<div class="bs-progress-step" data-section="4">
<div class="bs-progress-circle">4</div>
<span class="bs-progress-label">Feuerlöscher</span>
</div>
<div class="bs-progress-line"></div>
<div class="bs-progress-step" data-section="5">
<div class="bs-progress-circle">5</div>
<span class="bs-progress-label">Gemeinde</span>
</div>
</div>
<div class="bs-section" id="bsSection0">
<div class="bs-body">
<div class="bs-chapter-title">Willkommen zur Brandschutzunterweisung</div>
<div class="bs-text">
Brandschutz geht uns alle an. Diese Unterweisung vermittelt Ihnen das notwendige Wissen, um Brände zu vermeiden,
im Ernstfall richtig zu handeln und Ihre Aufgaben im Rahmen des Brandschutzes wahrzunehmen.
Die Schulung vermittelt die Inhalte der für uns geltenden <strong><a href="/intranet_repo/projects/brandschutz/Brandschutzordnung.pdf" target="_blank">Brandschutzordnung</a> nach DIN 14096</strong> und ist in fünf Säulen gegliedert.
Die Schulung dauert nur etwa <strong>20 Minuten</strong> und kann bequem vom Handy oder PC aus durchgeführt werden.
</div>
<div class="bs-intro-hero">
<div class="bs-intro-card">
<p class="bs-intro-lead">
Unser Brandschutz steht auf <strong>fünf Säulen</strong>: Brände vermeiden, im Brandfall richtig handeln,
sicherheitsrelevante Aufgaben pflichtbewusst erledigen, Feuerlöscher sicher einsetzen und die besonderen Gegebenheiten
unserer Kirchengemeinde kennen. Jede Säule trägt dazu bei, Menschen zu schützen, Sachschäden zu verhindern
und im Ernstfall klare Orientierung zu geben.
</p>
<div class="bs-intro-pillars" aria-label="Übersicht der fünf Säulen des Brandschutzes">
<div class="bs-intro-pillar">
<span class="bs-intro-pillar-number">1</span>
<span class="bs-intro-pillar-title">Brände vermeiden</span>
</div>
<div class="bs-intro-pillar">
<span class="bs-intro-pillar-number">2</span>
<span class="bs-intro-pillar-title">Im Brandfall richtig handeln</span>
</div>
<div class="bs-intro-pillar">
<span class="bs-intro-pillar-number">3</span>
<span class="bs-intro-pillar-title">Aufgaben des vBsU</span>
</div>
<div class="bs-intro-pillar">
<span class="bs-intro-pillar-number">4</span>
<span class="bs-intro-pillar-title">Feuerlöscher nutzen</span>
</div>
<div class="bs-intro-pillar">
<span class="bs-intro-pillar-number">5</span>
<span class="bs-intro-pillar-title">Unsere Kircheneinrichtung kennen</span>
</div>
</div>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left"></div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsGoToSection(1)">Schulung starten ></button>
</div>
</div>
</div>
<div class="bs-section" id="bsSection1" style="display:none;">
<div class="bs-section-header">Säule 1: Maßnahmen zur Vermeidung von Bränden</div>
<div class="bs-substep" id="bsSub1_1">
<div class="bs-body">
<div class="bs-chapter-title">Grundlagen der Brandverhütung</div>
<div class="bs-text">
Die beste Brandbekämpfung ist die Brandverhütung. Durch Ordnung, Sauberkeit und umsichtiges Verhalten lassen sich die meisten Brände vermeiden.
Die folgenden Regeln gelten für <strong>alle Räumlichkeiten</strong> unserer Kirchengemeinde.
</div>
<div class="bs-warnbox">
<div class="bs-warnbox-title">Grundregel</div>
Es besteht <strong>Rauchverbot</strong> in allen Gebäudeteilen. Brennbare Abfälle dürfen nicht in Gebäuden gelagert werden.
</div>
<ul class="bs-list">
<li><strong>Ordnung und Sauberkeit</strong>: Fluchtwege, Treppen und Verkehrsflächen müssen stets freigehalten werden.</li>
<li><strong>Brennbare Abfälle</strong> müssen regelmäßig und ordnungsgemäß entsorgt werden. Keine Lagerung in Gebäuden.</li>
<li><strong>Brandbekämpfungseinrichtungen</strong>: Feuerlöscher, Brandmeldeeinrichtungen, Notausgänge, Hauptschalter und Absperrschieber müssen ständig freizugänglich und gekennzeichnet sein. Bei Mängeln sofort den Gemeindevorsteher informieren.</li>
<li><strong>Flucht- und Rettungswege</strong> dürfen niemals zugestellt oder versperrt werden. Sicherheitsschilder und Fluchtpläne dürfen nicht entfernt, verdeckt oder zugestellt werden.</li>
<li><strong>Brennbare Flüssigkeiten und Gase</strong> müssen getrennt und sicher gelagert werden (nur in zugelassenen Behältern).</li>
</ul>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsGoToSection(0)">< Einleitung</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(1,2)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub1_2" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Sichere Nutzung elektrischer Geräte</div>
<div class="bs-text">
Elektrische Defekte zählen zu den häufigsten Brandursachen. Die folgenden Regeln sind strikt einzuhalten:
</div>
<ul class="bs-list">
<li><strong>Geräte abschalten</strong>: Alle elektrischen Geräte müssen nach Gebrauch abgeschaltet oder vom Netz getrennt werden.</li>
<li><strong>Stand-by-Betrieb</strong>: Geräte dürfen nur im Stand-by laufen, wenn sie unter Aufsicht stehen.</li>
<li><strong>Defekte Geräte</strong>: Beschädigte Kabel, Stecker oder Geräte sofort außer Betrieb nehmen und melden.</li>
<li><strong>Mehrfachsteckdosen</strong> nicht hintereinanderschalten. Maximale Belastung beachten.</li>
<li><strong>Private Elektrogeräte</strong> nur nach Genehmigung verwenden.</li>
</ul>
<div class="bs-infobox">
<div class="bs-infobox-title">Tipp</div>
Beim Verlassen eines Raumes immer prüfen: Sind alle Geräte ausgeschaltet? Sind Kaffeemaschine, Wasserkocher und Heizlüfter vom Netz getrennt?
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(1,1)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(1,3)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub1_3" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Kerzen und Dekoration</div>
<div class="bs-text">
Offenes Feuer ist eine der häufigsten Brandursachen in Versammlungsräumen. Für unsere Kirchengemeinde gelten besondere Regeln:
</div>
<ul class="bs-list">
<li><strong>Adventskränze und -gestecke</strong> nur mit elektrischen Kerzen erlaubt.</li>
<li><strong>Kerzen am Altar</strong> dürfen nur unter ständiger Aufsicht brennen. Löschgerät in Griffweite bereithalten.</li>
<li><strong>Dekoration</strong> nur aus schwerentflammbarem Material. Abstand zu Wärmequellen einhalten.</li>
<li><strong>Schweiß- und Trennschleifarbeiten</strong> nur mit schriftlicher Genehmigung und festgelegten Brandschutzmaßnahmen.</li>
</ul>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(1,2)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(1,4)">Weiter zum Quiz ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub1_4" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Testen Sie Ihr Wissen</div>
<div class="bs-quiz" id="quiz1_1">
<div class="bs-quiz-question">1. Welche Aussage zur Lagerung brennbarer Materialien ist korrekt?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Brennbare Abfälle dürfen kurzzeitig im Flur gelagert werden.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Brennbare Flüssigkeiten und Gase müssen getrennt und in zugelassenen Behältern gelagert werden.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Brennbare Materialien dürfen neben Feuerlöschern abgestellt werden.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="quiz1_1_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_quiz1_1" onclick="bsCheckIndividualQuiz('quiz1_1')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="quiz1_2">
<div class="bs-quiz-question">2. Was gilt für Adventskränze in unseren Kirchenräumen?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Echte Kerzen sind erlaubt, wenn jemand daneben steht.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Nur elektrische Kerzen sind auf Adventskränzen und -gestecken erlaubt.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Kerzen auf Adventskränzen sind generell verboten, auch elektrische.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="quiz1_2_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_quiz1_2" onclick="bsCheckIndividualQuiz('quiz1_2')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="quiz1_3">
<div class="bs-quiz-question">3. Wann dürfen Schweiß- und Trennschleifarbeiten durchgeführt werden?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Jederzeit, wenn ein Feuerlöscher in der Nähe steht.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Nur mit schriftlicher Genehmigung und festgelegten Brandschutzmaßnahmen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Nur am Wochenende, wenn niemand im Gebäude ist.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="quiz1_3_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_quiz1_3" onclick="bsCheckIndividualQuiz('quiz1_3')">Antwort prüfen</button>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(1,3)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS1Q" onclick="bsShowSectionScore(1, function(){ bsGoToSection(2); })">Weiter zu Säule 2 ></button>
</div>
</div>
</div>
</div>
<div class="bs-section" id="bsSection2" style="display:none;">
<div class="bs-section-header">Säule 2: Verhalten im Brandfall</div>
<div class="bs-substep" id="bsSub2_1">
<div class="bs-body">
<div class="bs-chapter-title">Sofortmaßnahmen bei Brandentdeckung</div>
<div class="bs-text">
Wird ein Brand entdeckt, ist <strong>schnelles, aber besonnenes Handeln</strong> entscheidend.
Panik ist der größte Feind, bleiben Sie ruhig und handeln Sie systematisch.
</div>
<div class="bs-warnbox">
<div class="bs-warnbox-title">Oberste Regel</div>
<strong>Ruhe bewahren!</strong> Überlegtes Handeln rettet Leben. Panik führt zu Fehlentscheidungen und gefährdet Sie und andere.
</div>
<div class="bs-text">
Folgende Sofortmaßnahmen sind bei Brandentdeckung zu ergreifen und sollten bei Möglichkeit an mehrere Personen delegiert werden.
</div>
<ol class="bs-list-numbered">
<li><strong>A Alarmieren</strong>: Feuerwehr über Notruf <strong>112</strong> alarmieren.</li>
<li><strong>L Leute warnen</strong>: Alle Anwesenden informieren, laut und deutlich warnen.</li>
<li><strong>A Assistieren</strong>: Gefährdete und hilfebedürftige Personen unterstützen.</li>
<li><strong>R Räumen</strong>: Gebäude über die gekennzeichneten Fluchtwege verlassen, Aufzug nicht benutzen und Sammelstelle aufsuchen.</li>
<li><strong>M Möglichst löschen</strong>: Entstehungsbrand nur bekämpfen, wenn dies gefahrlos möglich ist; Feuerlöscher einsetzen.</li>
</ol>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsGoToSection(1)">< Säule 1</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(2,2)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub2_2" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Der Notruf und die 5 W-Fragen</div>
<div class="bs-text">
Die Feuerwehr benötigt bei jedem Notruf klare Informationen. Merken Sie sich die <strong>5 W-Fragen</strong>:
</div>
<ol class="bs-list-numbered">
<li><strong>Wo</strong> brennt es? (Adresse, Gebäudeteil, Stockwerk)</li>
<li><strong>Was</strong> brennt? (Art und Umfang des Brandes)</li>
<li><strong>Wie viele</strong> Personen sind betroffen/verletzt?</li>
<li><strong>Welche</strong> Verletzungen liegen vor?</li>
<li><strong>Warten</strong> auf Rückfragen der Leitstelle!</li>
</ol>
<div class="bs-infobox">
<div class="bs-infobox-title">Unsere Adresse für den Notruf</div>
<strong>Klixstraße 17, 13403 Berlin</strong><br>
Diese Adresse findest du innen an der rechten Tür des Haupteingangs (Fluchttür).
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(2,1)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(2,3)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub2_3" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Evakuierung und Flucht</div>
<div class="bs-text">
Im Brandfall ist die geordnete Evakuierung aller Personen oberstes Ziel.
</div>
<ul class="bs-list">
<li><strong>Fluchtweg nutzen</strong>: Immer die gekennzeichneten Fluchtwege verwenden. Aufzüge nicht benutzen!</li>
<li><strong>Türen schließen</strong>: Brandabschnittstüren und Rauchschutztüren schließen (nicht abschließen!).</li>
<li><strong>Sammelplatz aufsuchen</strong>: Am vereinbarten Sammelplatz einfinden und auf Vollzähligkeitsprüfung warten.</li>
<li><strong>Verrauchte Bereiche meiden</strong>: Bei Rauch: Gebückt gehen, Rauch steigt nach oben.</li>
<li><strong>Einweiser für Feuerwehr</strong>: Wenn möglich, eine Person zur Einweisung der Feuerwehr abstellen.</li>
</ul>
<div class="bs-infobox">
<div class="bs-infobox-title">Warum Türen schließen?</div>
<strong>Geschlossene Türen bremsen Feuer und Rauch und halten Fluchtwege länger nutzbar.</strong>
Türen sollten deshalb geschlossen gehalten werden, aber nicht verkeilt oder blockiert werden!
</div>
<div class="bs-infobox">
<div class="bs-infobox-title">Was tun, wenn der Fluchtweg versperrt ist?
</div>
Wenn ein Fluchtweg durch Rauch oder Feuer versperrt ist: Gehen Sie in einen rauchfreien Raum,
schließen Sie die Tür, dichten Sie Ritzen mit nassen Tüchern ab und machen Sie sich am Fenster
bemerkbar. Warten Sie auf die Feuerwehr. Springen Sie niemals aus oberen Stockwerken!
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(2,2)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(2,4)">Weiter zu den Übungen ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub2_4" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Szenario-Übung</div>
<div class="bs-scenario">
<div class="bs-scenario-header">Rauch im Treppenhaus</div>
<div class="bs-scenario-body">
<div class="bs-scenario-text">
<strong>Szenario:</strong> Sie bemerken nach dem Gottesdienst Rauch im Treppenhaus. Mehrere Gemeindemitglieder,
darunter zwei ältere Personen mit Gehilfe, befinden sich noch im ersten Stock. Was tun Sie?
</div>
<div class="bs-quiz" id="scenario2_1">
<div class="bs-quiz-question">
Welche Verhaltensweisen sind hier <u>falsch</u>? Wählen Sie alle Antworten aus, die man <u>nicht</u> tun sollte.
</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" name="sc2_1" value="a" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Schnell durch das verrauchte Treppenhaus laufen, um die älteren Personen herunterzubringen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" name="sc2_1" value="b" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Ruhe bewahren, 112 anrufen, alle warnen, mit den älteren Personen in einem rauchfreien Raum warten und sich am Fenster bemerkbar machen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" name="sc2_1" value="c" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Durch das verrauchte Treppenhaus gehen und versuchen, den Brand selbst zu löschen.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="scenario2_1_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_scenario2_1" onclick="bsCheckIndividualQuiz('scenario2_1')">Antwort prüfen</button>
</div>
</div>
</div>
</div>
<div class="bs-quiz" id="fill2" style="margin-top: 20px;">
<div class="bs-quiz-question">Ergänzen Sie die Lücken:</div>
<div class="bs-text" style="line-height: 2.2;">
Die Notrufnummer lautet <input type="text" class="bs-fill-input" data-answer="112" id="fill2_1" style="width:60px;"> .
Die Adresse unserer Kirchengemeinde lautet <input type="text" class="bs-fill-input" data-answer="Klixstraße 17" id="fill2_2" style="width:150px;">
mit Postleitzahl <input type="text" class="bs-fill-input" data-answer="13403" id="fill2_3" style="width:100px;">.
</div>
<div class="bs-quiz-feedback" id="fill2_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_fill2" onclick="bsCheckIndividualQuiz('fill2')">Antwort prüfen</button>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(2,3)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS2Q" onclick="bsShowSectionScore(2, function(){ bsGoToSection(3); })">Weiter zu Säule 3 ></button>
</div>
</div>
</div>
</div>
<div class="bs-section" id="bsSection3" style="display:none;">
<div class="bs-section-header">Säule 3: Aufgaben des/der vBsU</div>
<div class="bs-substep" id="bsSub3_1">
<div class="bs-body">
<div class="bs-chapter-title">Wer ist der/die vBsU?</div>
<div class="bs-text">
Der/die <strong>verantwortliche Brandschutzunterwiesene (vBsU)</strong> ist die Person, die bei einer Veranstaltung
in der Kirchengemeinde die Verantwortung für den Brandschutz übernimmt. Diese Rolle ist essenziell für die
Sicherheit aller Anwesenden.
</div>
<div class="bs-infobox">
<div class="bs-infobox-title">Kernaufgabe</div>
Der/die vBsU ist <strong>30 Minuten vor Veranstaltungsbeginn</strong> anwesend und führt vor Ort eine Reihe von
Prüfungen und Vorbereitungen durch, um die Sicherheit zu gewährleisten.
</div>
<div class="bs-accordion">
<div class="bs-accordion-header" onclick="this.closest('.bs-accordion').classList.toggle('open')">
<span>Wer kann vBsU werden?</span>
<span class="bs-accordion-arrow">&#9660;</span>
</div>
<div class="bs-accordion-content">
Jedes volljährige Gemeindemitglied, das diese Brandschutzunterweisung erfolgreich absolviert hat und bereit ist,
die Verantwortung zu übernehmen. Eine Liste der aktuellen vBsU liegt beim Gemeindevorsteher aus.
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsGoToSection(2)">< Säule 2</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(3,2)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub3_2" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Vor der Veranstaltung</div>
<div class="bs-text">
Der/die vBsU führt 30 Minuten vor Beginn folgende Prüfungen durch:
</div>
<ul class="bs-checklist" id="bsChecklist3_2">
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Fluchtwege und Notausgänge frei und benutzbar?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Feuerlöscher vorhanden und zugänglich?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Notbeleuchtung funktionsfähig?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Sammelplatz (Bürgersteig, Parkplatz) bekannt und zugänglich?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Hilfebedürftige Personen identifiziert?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Helfer eingeteilt (Evakuierung, Notruf, Einweisung)?</span>
</li>
<li onclick="this.classList.toggle('checked'); bsUpdateChecklistNext('bsChecklist3_2', 'bsNextSub3_2')">
<span class="bs-check-box">&#x25CF;</span>
<span>Durchsagetext und Notrufadressen griffbereit?</span>
</li>
</ul>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(3,1)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextSub3_2" onclick="bsSubStep(3,3)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub3_3" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Im Notfall</div>
<div class="bs-text">
Im Brandfall übernimmt der/die vBsU die Koordination aller Maßnahmen:
</div>
<ol class="bs-list-numbered">
<li><strong>Evakuierung einleiten</strong>: Durchsage vom Pult verlesen (rotes, laminiertes DIN-A4-Blatt).</li>
<li><strong>Notruf veranlassen</strong>: 112 anrufen oder delegieren.</li>
<li><strong>Helfer koordinieren</strong>: Aufgaben an vorher eingeteilte Helfer vergeben.</li>
<li><strong>Gebäude kontrollieren</strong>: Sicherstellen, dass alle Räume geräumt sind.</li>
<li><strong>Vollzähligkeitsprüfung</strong>: Am Sammelplatz die Anwesenheit prüfen.</li>
<li><strong>Feuerwehr einweisen</strong>: Informationen zu Brandort, vermissten Personen und Gefahren geben.</li>
</ol>
<div class="bs-warnbox">
<div class="bs-warnbox-title">Durchsage im Notfall</div>
Der vorbereitete Text zur Räumung des Gebäudes wird vom Pult aus verlesen. So hören alle Anwesenden
gleichzeitig die gleiche, klare Ansage. Der Text liegt als rotes, laminiertes DIN-A4-Blatt bereit.
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(3,2)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(3,4)">Weiter zu den Übungen ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub3_4" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Zuordnungsübung und Quiz</div>
<div class="bs-text"><strong>Übung:</strong> Ordnen Sie jede Aufgabe der richtigen Phase zu.</div>
<div class="bs-dropdown-match" id="match3">
<div class="bs-dropdown-match-row">
<span class="bs-dropdown-match-label">Fluchtwege prüfen</span>
<select class="bs-dropdown-match-select" data-correct="vor">
<option value="">-- Bitte wählen --</option>
<option value="vor">Vor der Veranstaltung</option>
<option value="notfall">Im Notfall</option>
</select>
</div>
<div class="bs-dropdown-match-row">
<span class="bs-dropdown-match-label">Evakuierungsdurchsage</span>
<select class="bs-dropdown-match-select" data-correct="notfall">
<option value="">-- Bitte wählen --</option>
<option value="vor">Vor der Veranstaltung</option>
<option value="notfall">Im Notfall</option>
</select>
</div>
<div class="bs-dropdown-match-row">
<span class="bs-dropdown-match-label">Hilfebedürftige identifizieren</span>
<select class="bs-dropdown-match-select" data-correct="vor">
<option value="">-- Bitte wählen --</option>
<option value="vor">Vor der Veranstaltung</option>
<option value="notfall">Im Notfall</option>
</select>
</div>
<div class="bs-dropdown-match-row">
<span class="bs-dropdown-match-label">Vollzähligkeitsprüfung</span>
<select class="bs-dropdown-match-select" data-correct="notfall">
<option value="">-- Bitte wählen --</option>
<option value="vor">Vor der Veranstaltung</option>
<option value="notfall">Im Notfall</option>
</select>
</div>
</div>
<div class="bs-quiz-feedback" id="match3_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_match3" onclick="bsCheckIndividualQuiz('match3')">Antwort prüfen</button>
</div>
<div class="bs-quiz" id="quiz3_1" style="margin-top: 24px;">
<div class="bs-quiz-question">Wie lange vor Veranstaltungsbeginn muss der/die vBsU anwesend sein?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>15 Minuten vorher</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>30 Minuten vorher</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>60 Minuten vorher</span>
</label>
</div>
<div class="bs-quiz-feedback" id="quiz3_1_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_quiz3_1" onclick="bsCheckIndividualQuiz('quiz3_1')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="quiz3_2">
<div class="bs-quiz-question">Was ist die erste Handlung des/der vBsU im Brandfall?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Den Brand selbst löschen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Die Evakuierung einleiten und per Durchsage alle Anwesenden warnen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Warten, bis die Feuerwehr eintrifft.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="quiz3_2_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_quiz3_2" onclick="bsCheckIndividualQuiz('quiz3_2')">Antwort prüfen</button>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(3,3)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS3Q" onclick="bsShowSectionScore(3, function(){ bsGoToSection(4); })">Weiter zu Säule 4 ></button>
</div>
</div>
</div>
</div>
<div class="bs-section" id="bsSection4" style="display:none;">
<div class="bs-section-header">Säule 4: Hinweise zur Nutzung von Feuerlöschern</div>
<div class="bs-substep" id="bsSub4_1">
<div class="bs-body">
<div class="bs-chapter-title">Grundsätze der Brandbekämpfung</div>
<div class="bs-text">
Feuerlöscher sind für die <strong>Bekämpfung von Entstehungsbränden</strong> gedacht, also für kleine,
gerade entstandene Brände. Bei einem ausgedehnten Brand ist sofortige Evakuierung Pflicht!
</div>
<div class="bs-warnbox">
<div class="bs-warnbox-title">Wichtigster Grundsatz</div>
<strong>Personenrettung geht IMMER vor Brandbekämpfung!</strong><br>
Bringen Sie zuerst alle Personen in Sicherheit, bevor Sie versuchen, einen Brand zu löschen.
</div>
<ul class="bs-list">
<li><strong>Rückzugsweg freihalten</strong>: Löschen Sie immer mit dem Rücken zum Ausgang, damit Sie jederzeit fliehen können.</li>
<li><strong>Feuerlöscher erst am Brandherd aktivieren</strong>: Nicht schon auf dem Weg zum Brand auslösen (begrenzte Löschdauer: ca. 10-15 Sekunden).</li>
<li><strong>Windrichtung beachten</strong>: Immer mit dem Wind löschen, nicht gegen den Wind.</li>
<li><strong>Stoßweise löschen</strong>: Kurze, gezielte Stöße sind effektiver als Dauerbetrieb.</li>
<li><strong>Nicht in Flammen spritzen</strong>: An der Basis des Feuers ansetzen, von vorne nach hinten und von unten nach oben.</li>
</ul>
<div class="bs-infobox">
<div class="bs-infobox-title">Wussten Sie?</div>
Ein handelsüblicher 6-kg-Pulverlöscher hat nur ca. 10-15 Sekunden Löschdauer. Daher: Erst am Brand aktivieren und gezielt einsetzen!
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsGoToSection(3)">< Säule 3</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(4,2)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub4_2" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Richtige Löschtechnik</div>
<div class="bs-text">Die richtige Anwendung entscheidet über den Löscherfolg:</div>
<div class="bs-accordion">
<div class="bs-accordion-header" onclick="this.closest('.bs-accordion').classList.toggle('open')">
<span>Mehrere Löscher einsetzen</span>
<span class="bs-accordion-arrow">&#9660;</span>
</div>
<div class="bs-accordion-content">
Wenn verfügbar, mehrere Feuerlöscher gleichzeitig (nicht nacheinander!) einsetzen.
Die Löschwirkung vervielfacht sich dadurch.
</div>
</div>
<div class="bs-accordion">
<div class="bs-accordion-header" onclick="this.closest('.bs-accordion').classList.toggle('open')">
<span>Flächenbrände (z.B. ausgelaufene Flüssigkeit)</span>
<span class="bs-accordion-arrow">&#9660;</span>
</div>
<div class="bs-accordion-content">
Von vorne nach hinten löschen. An der vorderen Kante des Feuers beginnen und
das Löschmittel gleichmäßig über die Fläche verteilen.
</div>
</div>
<div class="bs-accordion">
<div class="bs-accordion-header" onclick="this.closest('.bs-accordion').classList.toggle('open')">
<span>Tropf- und Fließbrände</span>
<span class="bs-accordion-arrow">&#9660;</span>
</div>
<div class="bs-accordion-content">
Von oben nach unten löschen. Der Schwerkraft folgen.
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(4,1)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(4,3)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub4_3" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Besonderheiten und Gefahren</div>
<ul class="bs-list">
<li><strong>Elektrobrände</strong>: Niemals mit Wasser löschen! CO2-Löscher oder Pulverlöscher verwenden. Gerät wenn möglich vom Netz trennen.</li>
<li><strong>Fettbrände</strong>: Niemals mit Wasser löschen (Fettexplosion)! Deckel drauf, Löschdecke oder speziellen Fettbrandlöscher verwenden.</li>
<li><strong>Nach dem Löschen</strong>: Brandstelle nicht verlassen, Rückzündung möglich. Feuerwehr informieren. Benutzten Feuerlöscher nicht wieder aufhängen, sondern sofort zur Neubefüllung melden.</li>
</ul>
<div class="bs-infobox">
<div class="bs-infobox-title">Nach dem Löschen</div>
Einen benutzten Feuerlöscher immer sofort als benutzt kennzeichnen und die Neubefüllung veranlassen, auch wenn er nur kurz ausgelöst wurde.
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(4,2)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(4,4)">Weiter zum Quiz ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub4_4" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Testen Sie Ihr Wissen</div>
<div class="bs-quiz" id="tf4">
<div class="bs-quiz-question">Welche der folgenden Aussagen sind richtig? (Mehrere Antworten möglich)</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Personenrettung hat immer Vorrang vor der Brandbekämpfung.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Bei einem Elektrobrand kann man bedenkenlos Wasser zum Löschen verwenden.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Einen benutzten Feuerlöscher kann man einfach wieder aufhängen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Mehrere Feuerlöscher sollten gleichzeitig, nicht nacheinander eingesetzt werden.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Brennendes Fett in der Pfanne kann sicher mit Wasser gelöscht werden.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="tf4_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_tf4" onclick="bsCheckIndividualQuiz('tf4')">Antwort prüfen</button>
</div>
</div>
<div class="bs-scenario" style="margin-top: 24px;">
<div class="bs-scenario-header">Brand im Gemeindesaal</div>
<div class="bs-scenario-body">
<div class="bs-scenario-text">
<strong>Szenario:</strong> Sie entdecken einen kleinen Brand an einer Steckdosenleiste im Gemeindesaal.
Die Steckdosenleiste steht unter Strom. In der Nähe befinden sich ein CO2-Löscher
und ein Eimer Wasser. Was tun Sie?
</div>
<div class="bs-quiz" id="scenario4_1">
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Den Eimer Wasser über die Steckdosenleiste schütten, Wasser löscht am besten.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Einen CO2-Löscher verwenden, da bei Elektrobränden kein Wasser eingesetzt werden darf.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Den Raum sofort verlassen und nichts unternehmen.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="scenario4_1_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_scenario4_1" onclick="bsCheckIndividualQuiz('scenario4_1')">Antwort prüfen</button>
</div>
</div>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(4,3)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS4Q" onclick="bsShowSectionScore(4, function(){ bsGoToSection(5); })">Weiter zu Säule 5 ></button>
</div>
</div>
</div>
</div>
<div class="bs-section" id="bsSection5" style="display:none;">
<div class="bs-section-header">Säule 5: Brandschutz in unserer Kirchengemeinde</div>
<div class="bs-substep" id="bsSub5_1">
<div class="bs-body">
<div class="bs-chapter-title">Unsere Räumlichkeiten und Ausstattung</div>
<div class="bs-text">
In den vorangegangenen Säulen hast du die allgemeinen Grundlagen des Brandschutzes kennengelernt.
Jetzt wird es konkret: Wir schauen uns an, wie der Brandschutz <strong>in unserer Kirchengemeinde</strong>
organisiert ist, wo sich Feuerlöscher und Notleuchten befinden, wie die Räumung abläuft und
welche Besonderheiten unsere Rettungswege haben.
</div>
<div class="bs-infobox">
<strong>Unsere Gemeinde auf einen Blick:</strong><br>
Unsere Kirchengemeinde fasst <strong>180 bis 200 Personen</strong>. Wir verfügen über
<strong>keine Brandmeldeanlage</strong>, umso wichtiger ist es, dass jeder die Abläufe
im Brandfall kennt und weiß, wo sich die wichtigsten Hilfsmittel befinden.
</div>
<div class="bs-text" style="margin-top: 16px;">
<strong>Standorte der Feuerlöscher:</strong>
</div>
<ul class="bs-list">
<li>Vorraum am seitlichen Ausgang</li>
<li>Treppenhaus 1. OG</li>
<li>Hinterer Kirchenanbau neben der Toilette</li>
</ul>
<div class="bs-text" style="margin-top: 16px;">
<strong>Wichtig:</strong> Die Adresse unserer Kirchengemeinde (für den Notruf) findest du
innen an der rechten Tür des Haupteingangs (Fluchttür): <strong>Klixstraße 17, 13403 Berlin</strong>.
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsGoToSection(4)">< Säule 4</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(5,2)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub5_2" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Rettungswege und Gefahrenstellen</div>
<div class="bs-text">
<strong>Ausgänge aus dem Kirchenschiff:</strong>
</div>
<ul class="bs-list">
<li><strong>Haupteingang</strong> (Achtung: Stufen!)</li>
<li><strong>Hinterer Kirchenanbau</strong> (Achtung: Stufen!)</li>
<li><strong>Seitlicher Eingang</strong> (Achtung: Gegenverkehr von der Empore!)</li>
</ul>
<div class="bs-text" style="margin-top: 16px;">
<strong>Potenzielle Gefahrenstellen auf den Rettungswegen:</strong>
</div>
<ul class="bs-list">
<li>Stufen zwischen Kirchenschiff und Anbau</li>
<li>Stufen vor dem Haupteingang</li>
<li>Treppenhaus an der Empore (Gegenverkehr)</li>
</ul>
<div class="bs-text" style="margin-top: 16px;">
<strong>Koordination im Brandfall:</strong> Die unmittelbaren Aktionen werden
ausschließlich durch die zuständige vBsU koordiniert. Eine klare Zuständigkeit
verhindert Chaos und widersprüchliche Anweisungen. An den potenziellen Gefahrendstellen sollte im Brandfall bei Möglichkeit eine BsU positioniert werden.
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(5,1)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary" onclick="bsSubStep(5,3)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub5_3" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Quiz Teil 1</div>
<div class="bs-quiz" id="bs5q1">
<div class="bs-quiz-question">Wo befinden sich die Feuerlöscher in unserer Kirchengemeinde? (Mehrere Antworten möglich)</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Vorraum am seitlichen Ausgang</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Treppenhaus 1. OG</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Auf der Empore</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Hinterer Kirchenanbau neben der Toilette</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>In der Sakristei</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q1_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q1" onclick="bsCheckIndividualQuiz('bs5q1')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q2">
<div class="bs-quiz-question">Welche Rettungswege stehen aus dem Kirchenschiff zur Verfügung? (Mehrere Antworten möglich)</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Haupteingang</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Hinterer Kirchenanbau</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Seitlicher Eingang</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Fenster im Kirchenschiff</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q2_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q2" onclick="bsCheckIndividualQuiz('bs5q2')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q3">
<div class="bs-quiz-question">Verfügt unsere Kirchengemeinde über eine Brandmeldeanlage?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Nein, wir haben keine Brandmeldeanlage.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Ja, in jedem Raum sind Rauchmelder installiert.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Ja, aber nur im Kirchenschiff.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q3_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q3" onclick="bsCheckIndividualQuiz('bs5q3')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q4">
<div class="bs-quiz-question">Wo findest du die Adresse der Kirchengemeinde für den Notruf?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Innen an der Haupteingangstür.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Auf dem Altar.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Im Treppenhaus 1. OG.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q4_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q4" onclick="bsCheckIndividualQuiz('bs5q4')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q5">
<div class="bs-quiz-question">Wie viele Personen fasst unser Kirchenschiff?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>180 bis 200 Personen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>200 bis 230 Personen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>150 bis 180 Personen.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q5_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q5" onclick="bsCheckIndividualQuiz('bs5q5')">Antwort prüfen</button>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(5,2)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS5P1" onclick="bsSubStep(5,4)">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub5_4" style="display:none;">
<div class="bs-body">
<div class="bs-chapter-title">Quiz Teil 2</div>
<div class="bs-quiz" id="bs5q6">
<div class="bs-quiz-question">Welche Gefahrenstellen gibt es auf den Rettungswegen? (Mehrere Antworten möglich)</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Stufen zwischen Kirchenschiff und Anbau</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Stufen vor dem Haupteingang</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Treppenhaus an der Empore (Gegenverkehr)</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Rampe am Seiteneingang</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q6_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q6" onclick="bsCheckIndividualQuiz('bs5q6')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q7">
<div class="bs-quiz-question">Wer koordiniert im Brandfall die Aktionen?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Die zuständige vBsU.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Der Gemeindevorsteher.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Anwesende BsU gemeinsam.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q7_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q7" onclick="bsCheckIndividualQuiz('bs5q7')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q8">
<div class="bs-quiz-question">Wo befinden sich die Notleuchten? (Mehrere Antworten möglich)</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Sakristei</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Unterm Altar</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Letzte seitliche Klappen im Kirchenschiff</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Empore (Tisch)</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Eltern-Kind-Raum (Schrank unter TV)</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Vorraum ("Diakonie-Schrank")</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Toiletten</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q8_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q8" onclick="bsCheckIndividualQuiz('bs5q8')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q9">
<div class="bs-quiz-question">Wie wird die Räumung eingeleitet?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Der vorbereitete Text wird vom Pult aus verlesen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Es gibt eine Alarmsirene.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Die anwesenden BsU koordinieren die Räumung in ihrem erreichbaren Umfeld.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q9_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q9" onclick="bsCheckIndividualQuiz('bs5q9')">Antwort prüfen</button>
</div>
</div>
<div class="bs-quiz" id="bs5q10">
<div class="bs-quiz-question">Wer übernimmt die weitere Erste Hilfe im Brandfall?</div>
<div class="bs-quiz-options">
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="true">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Anwesende Ersthelfer*innen.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Die vBsU.</span>
</label>
<label class="bs-quiz-option" onclick="bsToggleCheckbox(this)">
<input type="checkbox" data-correct="false">
<span class="bs-quiz-indicator">&#x25CF;</span>
<span>Niemand, wir warten auf den Rettungsdienst.</span>
</label>
</div>
<div class="bs-quiz-feedback" id="bs5q10_fb"></div>
<div class="bs-quiz-btn-group">
<button type="button" class="bs-btn bs-btn-primary" id="bsCheck_bs5q10" onclick="bsCheckIndividualQuiz('bs5q10')">Antwort prüfen</button>
</div>
</div>
</div>
<div class="bs-actions">
<div class="bs-actions-left">
<button type="button" class="bs-btn" onclick="bsSubStep(5,3)">< Zurück</button>
</div>
<div class="bs-actions-right">
<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsNextS5P2" onclick="bsFinalResultAction()">Weiter ></button>
</div>
</div>
</div>
<div class="bs-substep" id="bsSub5_5" style="display:none;">
<div class="bs-body"></div>
</div>
</div>
<div class="bs-section" id="bsSectionScore" style="display:none;">
<div class="bs-section-header">Zwischenstand</div>
<div class="bs-body"></div>
<div class="bs-actions">
<div class="bs-actions-left"></div>
<div class="bs-actions-right"></div>
</div>
</div>
</div><!-- end .bs-wizard -->
</div><!-- end .bs-page-wrapper -->
<script>
/* ══════════════════════════════════════
NAVIGATION
══════════════════════════════════════ */
var bsCurrentSection = 0;
var bsTotalSections = 6; // 0=intro, 1-5=pillars
var bsCurrentSub = {}; // track sub-steps per section
// Init sub-step tracking
for (var i = 1; i <= 5; i++) bsCurrentSub[i] = 1;
function bsGoToSection(section) {
var scoreEl = document.getElementById('bsSectionScore');
if (scoreEl) scoreEl.style.display = 'none';
// Hide all sections
for (var i = 0; i < bsTotalSections; i++) {
var el = document.getElementById('bsSection' + i);
if (el) el.style.display = 'none';
}
// Show target section
var target = document.getElementById('bsSection' + section);
if (target) target.style.display = '';
bsCurrentSection = section;
bsUpdateMainProgress(section);
// Reset to first sub-step when entering a section
if (section >= 1 && section <= 5) {
bsCurrentSub[section] = 1;
bsShowSubStep(section, 1);
}
bsScrollToTop();
}
function bsUpdateMainProgress(section) {
var steps = document.querySelectorAll('#bsMainProgress .bs-progress-step');
var lines = document.querySelectorAll('#bsMainProgress .bs-progress-line');
steps.forEach(function(el, idx) {
el.classList.remove('active', 'done');
if (idx === section) el.classList.add('active');
else if (idx < section) el.classList.add('done');
});
lines.forEach(function(el, idx) {
el.classList.toggle('done', idx < section);
});
}
/* ── Sub-step navigation ── */
function bsSubStep(section, step) {
bsCurrentSub[section] = step;
bsShowSubStep(section, step);
bsScrollToTop();
}
function bsShowSubStep(section, step) {
// Count sub-steps
var maxSub = document.querySelectorAll('#bsSection' + section + ' .bs-substep').length;
for (var i = 1; i <= maxSub; i++) {
var el = document.getElementById('bsSub' + section + '_' + i);
if (el) el.style.display = (i === step) ? '' : 'none';
}
}
function bsScrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
var headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 64;
var elemHeaderMenue = document.getElementById('header_menue');
var elemHeaderTitle = document.getElementById('header_title');
if (elemHeaderMenue) elemHeaderMenue.style.top = '0';
if (elemHeaderTitle) elemHeaderTitle.style.top = headerHeight + 'px';
}
/* ══════════════════════════════════════
DRAG & DROP
══════════════════════════════════════ */
var bsDraggedEl = null;
function bsDragStart(e) {
bsDraggedEl = e.target.closest('.bs-drag-item');
bsDraggedEl.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
}
function bsDragOver(e) {
e.preventDefault();
var target = e.target.closest('.bs-drag-item');
if (!target || target === bsDraggedEl) return;
var container = target.closest('.bs-drag-container');
var items = Array.from(container.querySelectorAll('.bs-drag-item'));
var dragIdx = items.indexOf(bsDraggedEl);
var targetIdx = items.indexOf(target);
if (dragIdx < targetIdx) {
target.parentNode.insertBefore(bsDraggedEl, target.nextSibling);
} else {
target.parentNode.insertBefore(bsDraggedEl, target);
}
}
function bsDrop(e) {
e.preventDefault();
}
function bsDragEnd(e) {
if (bsDraggedEl) bsDraggedEl.classList.remove('dragging');
bsDraggedEl = null;
// Update numbers
var container = e.target.closest('.bs-drag-container');
if (container) {
container.querySelectorAll('.bs-drag-item').forEach(function(item, idx) {
item.querySelector('.bs-drag-number').textContent = idx + 1;
});
}
}
function bsCheckDrag(containerId) {
var container = document.getElementById(containerId);
var items = container.querySelectorAll('.bs-drag-item');
var correct = 0;
var total = items.length;
items.forEach(function(item, idx) {
var correctPos = parseInt(item.dataset.correct);
item.classList.remove('correct', 'wrong');
if (correctPos === idx + 1) {
item.classList.add('correct');
correct++;
} else {
item.classList.add('wrong');
}
});
var fb = document.getElementById(containerId + 'Feedback');
if (fb) {
fb.classList.remove('correct', 'wrong');
fb.classList.add('show');
if (correct === total) {
fb.classList.add('correct');
fb.textContent = 'Richtig: Perfekt! Alle Elemente in der richtigen Reihenfolge!';
} else {
fb.classList.add('wrong');
fb.textContent = correct + ' von ' + total + ' richtig. Grün markierte sind korrekt, rote müssen verschoben werden.';
}
}
return correct === total;
}
/* ══════════════════════════════════════
MATCHING EXERCISE
══════════════════════════════════════ */
var bsMatchState = {};
function bsMatchSelect(el, matchId) {
if (el.classList.contains('matched')) return;
if (!bsMatchState[matchId]) bsMatchState[matchId] = { left: null, right: null };
var state = bsMatchState[matchId];
var side = el.dataset.side;
// Deselect previous on same side
if (state[side]) state[side].classList.remove('selected');
el.classList.add('selected');
state[side] = el;
// Check if both sides selected
if (state.left && state.right) {
var leftMatch = state.left.dataset.match;
var rightMatch = state.right.dataset.match;
if (leftMatch === rightMatch) {
state.left.classList.remove('selected');
state.right.classList.remove('selected');
state.left.classList.add('matched');
state.right.classList.add('matched');
// Show feedback
var fb = document.getElementById(matchId + 'Feedback');
var total = document.querySelectorAll('#' + matchId + ' .bs-match-item[data-side="left"]').length;
var matched = document.querySelectorAll('#' + matchId + ' .bs-match-item[data-side="left"].matched').length;
if (fb && matched === total) {
fb.classList.add('show', 'correct');
fb.textContent = 'Richtig: Alle Zuordnungen korrekt! Gut gemacht!';
}
} else {
state.left.classList.add('wrong-match');
state.right.classList.add('wrong-match');
var l = state.left;
var r = state.right;
setTimeout(function() {
l.classList.remove('selected', 'wrong-match');
r.classList.remove('selected', 'wrong-match');
}, 800);
}
state.left = null;
state.right = null;
}
}
/* ── Dropdown Matching ── */
function bsCheckDropdownMatch() {
var container = document.getElementById('match3');
var rows = container.querySelectorAll('.bs-dropdown-match-row');
var correct = 0;
var total = rows.length;
rows.forEach(function(row) {
var select = row.querySelector('select');
row.classList.remove('correct', 'wrong');
if (select.value === select.dataset.correct) {
row.classList.add('correct');
correct++;
} else {
row.classList.add('wrong');
}
});
var fb = document.getElementById('match3_fb');
if (correct === total) {
fb.className = 'bs-quiz-feedback show correct';
fb.textContent = 'Richtig: Alle Zuordnungen korrekt! Gut gemacht!';
} else {
fb.className = 'bs-quiz-feedback show wrong';
fb.textContent = correct + ' von ' + total + ' richtig. Bitte überprüfen Sie Ihre Auswahl.';
}
return correct === total;
}
/* ══════════════════════════════════════
FILL-IN-THE-BLANK
══════════════════════════════════════ */
function bsCheckFill(ids) {
var correct = 0;
var total = ids.length;
ids.forEach(function(id) {
var input = document.getElementById(id);
var answer = input.dataset.answer.toLowerCase().trim();
var value = input.value.toLowerCase().trim();
input.classList.remove('correct', 'wrong');
if (value === answer) {
input.classList.add('correct');
correct++;
} else {
input.classList.add('wrong');
}
});
// Find feedback element near the button
var fb = document.getElementById('fill2_fb');
if (fb) {
fb.classList.remove('correct', 'wrong');
fb.classList.add('show');
if (correct === total) {
fb.classList.add('correct');
fb.textContent = 'Richtig: Alle Lücken richtig ausgefüllt!';
} else {
fb.classList.add('wrong');
fb.textContent = correct + ' von ' + total + ' richtig. Korrekte Antworten: 112, Klixstraße 17, 13403';
}
}
return correct === total;
}
/* ══════════════════════════════════════
MULTI-SELECT CHECKBOX QUIZ
══════════════════════════════════════ */
function bsToggleCheckbox(optionEl) {
var cb = optionEl.querySelector('input[type="checkbox"]');
cb.checked = !cb.checked;
optionEl.classList.toggle('selected', cb.checked);
}
function bsCheckMultiGeneric(quizId, correctMsg, wrongMsg) {
var quiz = document.getElementById(quizId);
var options = quiz.querySelectorAll('.bs-quiz-option');
var allCorrect = true;
options.forEach(function(opt) {
var cb = opt.querySelector('input[type="checkbox"]');
var isCorrect = cb.dataset.correct === 'true';
opt.classList.remove('correct', 'wrong');
if (isCorrect && cb.checked) {
opt.classList.add('correct');
} else if (isCorrect && !cb.checked) {
opt.classList.add('correct');
allCorrect = false;
} else if (!isCorrect && cb.checked) {
opt.classList.add('wrong');
allCorrect = false;
}
});
var fb = document.getElementById(quizId + '_fb');
fb.classList.remove('correct', 'wrong');
fb.classList.add('show');
if (allCorrect) {
fb.classList.add('correct');
fb.textContent = correctMsg;
} else {
fb.classList.add('wrong');
fb.textContent = wrongMsg;
}
return allCorrect;
}
/* ══════════════════════════════════════
INDIVIDUAL QUIZ GATES
══════════════════════════════════════ */
var bsQuizPassed = {};
var bsQuizAttempts = {};
var bsQuizCorrect = {}; // true = answered correctly, false = failed after 3 attempts
var bsSectionQuizIds = {
1: ['quiz1_1', 'quiz1_2', 'quiz1_3'],
2: ['scenario2_1', 'fill2'],
3: ['match3', 'quiz3_1', 'quiz3_2'],
4: ['tf4', 'scenario4_1'],
5: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5', 'bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10']
};
var bsQuizConfigs = {
quiz1_1: {
nextBtnId: 'bsNextS1Q',
pageQuizIds: ['quiz1_1', 'quiz1_2', 'quiz1_3'],
check: function() { return bsCheckMultiGeneric('quiz1_1', 'Richtig!', 'Falsch: Leider falsch. Die richtige Antwort ist markiert.'); },
reset: function() { bsResetQuizContainer('quiz1_1'); }
},
quiz1_2: {
nextBtnId: 'bsNextS1Q',
pageQuizIds: ['quiz1_1', 'quiz1_2', 'quiz1_3'],
check: function() { return bsCheckMultiGeneric('quiz1_2', 'Richtig!', 'Falsch: Leider falsch. Die richtige Antwort ist markiert.'); },
reset: function() { bsResetQuizContainer('quiz1_2'); }
},
quiz1_3: {
nextBtnId: 'bsNextS1Q',
pageQuizIds: ['quiz1_1', 'quiz1_2', 'quiz1_3'],
check: function() { return bsCheckMultiGeneric('quiz1_3', 'Richtig!', 'Falsch: Leider falsch. Die richtige Antwort ist markiert.'); },
reset: function() { bsResetQuizContainer('quiz1_3'); }
},
scenario2_1: {
nextBtnId: 'bsNextS2Q',
pageQuizIds: ['scenario2_1', 'fill2'],
check: function() {
return bsCheckMultiGeneric(
'scenario2_1',
'Richtig! Nicht durch das verrauchte Treppenhaus gehen und keinen Löschversuch im Rauch unternehmen. Richtig ist: 112 anrufen, warnen, in einem rauchfreien Raum bleiben und sich am Fenster bemerkbar machen.',
'Falsch. Gesucht sind die Verhaltensweisen, die man nicht tun sollte: durch das verrauchte Treppenhaus laufen oder im verrauchten Bereich selbst löschen.'
);
},
reset: function() { bsResetQuizContainer('scenario2_1'); }
},
fill2: {
nextBtnId: 'bsNextS2Q',
pageQuizIds: ['scenario2_1', 'fill2'],
check: function() { return bsCheckFill(['fill2_1', 'fill2_2', 'fill2_3']); },
reset: function() { bsResetQuizContainer('fill2'); }
},
match3: {
nextBtnId: 'bsNextS3Q',
pageQuizIds: ['match3', 'quiz3_1', 'quiz3_2'],
check: function() { return bsCheckDropdownMatch(); },
reset: function() {
bsResetQuizContainer('match3');
bsClearFeedback(['match3_fb']);
}
},
quiz3_1: {
nextBtnId: 'bsNextS3Q',
pageQuizIds: ['match3', 'quiz3_1', 'quiz3_2'],
check: function() { return bsCheckMultiGeneric('quiz3_1', 'Richtig!', 'Falsch: Leider falsch. Die richtige Antwort ist markiert.'); },
reset: function() { bsResetQuizContainer('quiz3_1'); }
},
quiz3_2: {
nextBtnId: 'bsNextS3Q',
pageQuizIds: ['match3', 'quiz3_1', 'quiz3_2'],
check: function() { return bsCheckMultiGeneric('quiz3_2', 'Richtig!', 'Falsch: Leider falsch. Die richtige Antwort ist markiert.'); },
reset: function() { bsResetQuizContainer('quiz3_2'); }
},
tf4: {
nextBtnId: 'bsNextS4Q',
pageQuizIds: ['tf4', 'scenario4_1'],
check: function() {
return bsCheckMultiGeneric('tf4', 'Richtig: Alle Antworten richtig! Ausgezeichnet!', 'Nicht ganz richtig. Die korrekten Antworten sind markiert.');
},
reset: function() { bsResetQuizContainer('tf4'); }
},
scenario4_1: {
nextBtnId: 'bsNextS4Q',
pageQuizIds: ['tf4', 'scenario4_1'],
check: function() {
return bsCheckMultiGeneric('scenario4_1', 'Richtig! Bei Elektrobränden niemals Wasser verwenden, Stromschlaggefahr! Der CO₂-Löscher ist die richtige Wahl.', 'Falsch. Bei Elektrobränden darf kein Wasser verwendet werden (Stromschlaggefahr). Ein CO₂-Löscher ist hier das richtige Löschmittel.');
},
reset: function() { bsResetQuizContainer('scenario4_1'); }
},
bs5q1: {
nextBtnId: 'bsNextS5P1',
pageQuizIds: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5'],
check: function() { return bsCheckMultiGeneric('bs5q1', 'Richtig! Die Feuerlöscher befinden sich im Vorraum am seitlichen Ausgang, im Treppenhaus 1. OG und im hinteren Kirchenanbau neben der Toilette.', 'Falsch: Nicht ganz. Die korrekten Standorte sind: Vorraum am seitlichen Ausgang, Treppenhaus 1. OG und hinterer Kirchenanbau neben der Toilette.'); },
reset: function() { bsResetQuizContainer('bs5q1'); }
},
bs5q2: {
nextBtnId: 'bsNextS5P1',
pageQuizIds: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5'],
check: function() { return bsCheckMultiGeneric('bs5q2', 'Richtig! Alle drei Ausgänge stehen zur Verfügung: Haupteingang, hinterer Kirchenanbau und seitlicher Eingang. Achte auf die Stufen und den Gegenverkehr von der Empore!', 'Falsch: Nicht ganz. Die korrekten Rettungswege sind: Haupteingang (Stufen!), hinterer Kirchenanbau (Stufen!) und seitlicher Eingang (Emporenverkehr!). Fenster sind keine Rettungswege.'); },
reset: function() { bsResetQuizContainer('bs5q2'); }
},
bs5q3: {
nextBtnId: 'bsNextS5P1',
pageQuizIds: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5'],
check: function() {
return bsCheckMultiGeneric('bs5q3', 'Richtig! Wir haben keine Brandmeldeanlage. Deshalb ist es besonders wichtig, dass alle Anwesenden wachsam sind und die Abläufe kennen.', 'Falsch. Wir haben keine Brandmeldeanlage, daher müssen wir uns umso mehr auf geschultes Verhalten und aufmerksame Personen verlassen.');
},
reset: function() { bsResetQuizContainer('bs5q3'); }
},
bs5q4: {
nextBtnId: 'bsNextS5P1',
pageQuizIds: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5'],
check: function() {
return bsCheckMultiGeneric('bs5q4', 'Richtig! Die Adresse für den Notruf findest du innen an der rechten Tür des Haupteingangs. Merke dir diesen Ort!', 'Falsch. Die Adresse befindet sich innen an der rechten Tür des Haupteingangs (Fluchttür), nicht auf dem Altar oder im Treppenhaus.');
},
reset: function() { bsResetQuizContainer('bs5q4'); }
},
bs5q5: {
nextBtnId: 'bsNextS5P1',
pageQuizIds: ['bs5q1', 'bs5q2', 'bs5q3', 'bs5q4', 'bs5q5'],
check: function() {
return bsCheckMultiGeneric('bs5q5', 'Richtig! Unsere Kirchengemeinde fasst 180 bis 200 Personen.', 'Falsch. Unsere Kirchengemeinde fasst 180 bis 200 Personen, nicht mehr.');
},
reset: function() { bsResetQuizContainer('bs5q5'); }
},
bs5q6: {
nextBtnId: 'bsNextS5P2',
pageQuizIds: ['bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10'],
check: function() {
return bsCheckMultiGeneric('bs5q6', 'Richtig! Die Gefahrenstellen sind: Stufen zum Anbau, Stufen am Haupteingang und das Treppenhaus an der Empore (Gegenverkehr).', 'Falsch: Nicht ganz. Die Gefahrenstellen sind: Stufen zwischen Kirchenschiff und Anbau, Stufen vor dem Haupteingang und das Treppenhaus an der Empore. Die Rampe ist keine Gefahrenstelle.');
},
reset: function() { bsResetQuizContainer('bs5q6'); }
},
bs5q7: {
nextBtnId: 'bsNextS5P2',
pageQuizIds: ['bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10'],
check: function() {
return bsCheckMultiGeneric('bs5q7', 'Richtig! Die zuständige vBsU koordiniert, eine klare Zuständigkeit verhindert Chaos und widersprüchliche Anweisungen.', 'Falsch. Nur die zuständige vBsU koordiniert die Aktionen. Das verhindert widersprüchliche Anweisungen und sorgt für eine geordnete Evakuierung.');
},
reset: function() { bsResetQuizContainer('bs5q7'); }
},
bs5q8: {
nextBtnId: 'bsNextS5P2',
pageQuizIds: ['bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10'],
check: function() {
return bsCheckMultiGeneric('bs5q8', 'Richtig! Notleuchten befinden sich an sechs Standorten: Sakristei, unterm Altar, seitliche Klappen, Empore, Eltern-Kind-Raum und Vorraum.', 'Falsch: Nicht ganz. Die Notleuchten befinden sich an: Sakristei, unterm Altar, letzte seitliche Klappen im Kirchenschiff, Empore (Tisch), Eltern-Kind-Raum (Schrank unter TV) und „Diakonie-Schrank" im Vorraum.');
},
reset: function() { bsResetQuizContainer('bs5q8'); }
},
bs5q9: {
nextBtnId: 'bsNextS5P2',
pageQuizIds: ['bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10'],
check: function() {
return bsCheckMultiGeneric('bs5q9', 'Richtig! Der vorbereitete Text wird vom Pult aus verlesen, so erreicht die Information alle Anwesenden gleichzeitig und klar verständlich.', 'Falsch. Die Räumung wird eingeleitet, indem der vorbereitete Text „zur Räumung des Gebäudes" vom Pult aus verlesen wird (rotes, laminiertes DIN-A4-Blatt). So wird sichergestellt, dass alle die gleiche, klare Ansage hören.');
},
reset: function() { bsResetQuizContainer('bs5q9'); }
},
bs5q10: {
nextBtnId: 'bsNextS5P2',
pageQuizIds: ['bs5q6', 'bs5q7', 'bs5q8', 'bs5q9', 'bs5q10'],
check: function() {
return bsCheckMultiGeneric('bs5q10', 'Richtig! Anwesende Ersthelfer*innen übernehmen die weitere Erste Hilfe. Die vBsU koordiniert die Evakuierung, nicht die medizinische Versorgung.', 'Falsch. Für die weitere Erste Hilfe sind die anwesenden Ersthelfer*innen zuständig, nicht die vBsU. Für weitergehende Erste Hilfe ist eine gesonderte Schulung notwendig. Die erste Hilfeleistung ist natürlich von jedem erwünscht und gesetzlich vorgeschrieben.');
},
reset: function() { bsResetQuizContainer('bs5q10'); }
}
};
function bsGetScoreStats() {
var allIds = [];
for (var s = 1; s <= 5; s++) {
allIds = allIds.concat(bsSectionQuizIds[s]);
}
var total = allIds.length;
var correct = 0;
var wrong = 0;
var open = 0;
allIds.forEach(function(id) {
if (bsQuizCorrect[id] === true) correct++;
else if (bsQuizCorrect[id] === false) wrong++;
else open++;
});
var percent = total > 0 ? Math.round((correct / total) * 100) : 0;
return { correct: correct, wrong: wrong, open: open, total: total, percent: percent };
}
function bsShowSectionScore(completedSection, nextAction) {
var stats = bsGetScoreStats();
var answered = stats.correct + stats.wrong;
var maxReachable = stats.total > 0 ? 100 - Math.round((stats.wrong / stats.total) * 100) : 100;
var scoreEl = document.getElementById('bsSectionScore');
var body = scoreEl.querySelector('.bs-body');
var barColor = maxReachable >= 70 ? 'var(--bs-green)' : 'var(--bs-red)';
body.innerHTML =
'<div class="bs-chapter-title">Zwischenstand nach Säule ' + completedSection + '</div>' +
'<div class="bs-score-bar-wrap">' +
'<div class="bs-score-bar"><div class="bs-score-bar-fill" style="width:' + maxReachable + '%;background:' + barColor + '"></div></div>' +
'<div class="bs-score-bar-label">Max. erreichbar: ' + maxReachable + '% (mindestens 70% erforderlich)</div>' +
'</div>' +
'<div class="bs-score-grid">' +
'<div class="bs-score-card bs-score-correct"><div class="bs-score-card-num">' + stats.correct + '</div><div class="bs-score-card-label">Richtig</div></div>' +
'<div class="bs-score-card bs-score-wrong"><div class="bs-score-card-num">' + stats.wrong + '</div><div class="bs-score-card-label">Falsch</div></div>' +
'<div class="bs-score-card bs-score-open"><div class="bs-score-card-num">' + stats.open + '</div><div class="bs-score-card-label">Offen</div></div>' +
'<div class="bs-score-card"><div class="bs-score-card-num">' + answered + '/' + stats.total + '</div><div class="bs-score-card-label">Gesamt</div></div>' +
'</div>';
var actionsRight = scoreEl.querySelector('.bs-actions-right');
actionsRight.innerHTML = '';
if (typeof nextAction === 'function') {
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'bs-btn bs-btn-primary';
btn.textContent = completedSection < 5 ? 'Weiter zu Säule ' + (completedSection + 1) + ' >' : 'Zum Ergebnis >';
btn.onclick = nextAction;
actionsRight.appendChild(btn);
}
var actionsLeft = scoreEl.querySelector('.bs-actions-left');
actionsLeft.innerHTML = '<button type="button" class="bs-btn" onclick="bsGoToSection(' + completedSection + ')">< Zurück zu Säule ' + completedSection + '</button>';
for (var i = 0; i < 6; i++) {
var el = document.getElementById('bsSection' + i);
if (el) el.style.display = 'none';
}
scoreEl.style.display = '';
bsScrollToTop();
}
function bsFinalResultAction() {
document.getElementById('bsSectionScore').style.display = 'none';
bsShowFinalResult();
document.getElementById('bsSection5').style.display = '';
bsCurrentSub[5] = 5;
bsShowSubStep(5, 5);
bsScrollToTop();
}
function bsShowFinalResult() {
var stats = bsGetScoreStats();
var passed = stats.percent >= 70;
var section = document.getElementById('bsSub5_5');
var body = section.querySelector('.bs-body');
var barColor = passed ? 'var(--bs-green)' : 'var(--bs-red)';
var html = '<div class="bs-chapter-title">' + (passed ? 'Schulung bestanden!' : 'Schulung nicht bestanden') + '</div>';
html += '<div class="bs-score-bar-wrap">' +
'<div class="bs-score-bar"><div class="bs-score-bar-fill" style="width:' + stats.percent + '%;background:' + barColor + '"></div></div>' +
'<div class="bs-score-bar-label">' + stats.percent + '% richtig (' + stats.correct + ' von ' + stats.total + ' Fragen)</div>' +
'</div>';
html += '<div class="bs-score-grid">' +
'<div class="bs-score-card bs-score-correct"><div class="bs-score-card-num">' + stats.correct + '</div><div class="bs-score-card-label">Richtig</div></div>' +
'<div class="bs-score-card bs-score-wrong"><div class="bs-score-card-num">' + stats.wrong + '</div><div class="bs-score-card-label">Falsch</div></div>' +
'</div>';
if (passed) {
html += '<div class="bs-successbox" style="margin-top:20px;">' +
'<strong>Herzlichen Glückwunsch!</strong> Du hast die Brandschutzunterweisung erfolgreich absolviert. ' +
'Du kennst jetzt die Grundlagen der Brandverhütung, weißt, wie du dich im Brandfall verhältst, ' +
'kennst die Aufgaben der vBsU, kannst einen Feuerlöscher richtig einsetzen und weißt, wo sich die wichtigsten ' +
'Einrichtungen in unserer Kirchengemeinde befinden.' +
'</div>';
html += '<div style="margin-top:24px;padding:20px;background:var(--gray-50);border:1px solid var(--gray-200);">' +
'<label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;">' +
'<input type="checkbox" id="bsConfirmCheckbox" onchange="bsToggleConfirm()" style="width:20px;height:20px;margin-top:2px;">' +
'<span style="font-size:var(--font-size-sm);color:var(--gray-800);line-height:1.6;">' +
'Ich bestätige, dass ich die Inhalte der <a href="/intranet_repo/projects/brandschutz/Brandschutzordnung.pdf" target="_blank" onclick="event.stopPropagation();">Brandschutzordnung</a> verstanden und verinnerlicht habe. ' +
'Ich bin bereit, die Aufgaben als vBsU zu übernehmen, sofern ich dazu eingeteilt werde.' +
'</span>' +
'</label>' +
'</div>';
html += '<button type="button" class="bs-btn bs-btn-primary bs-btn-locked" id="bsFinishBtn" onclick="bsFinishTraining()" style="margin-top:24px;width:100%;padding:16px;font-size:var(--font-size-md);">Schulung abschließen</button>';
} else {
html += '<div class="bs-warnbox" style="margin-top:20px;">' +
'<div class="bs-warnbox-title">Leider nicht bestanden</div>' +
'Du hast ' + stats.percent + '% der Fragen richtig beantwortet. Zum Bestehen sind mindestens 70% erforderlich. ' +
'Bitte wiederhole die Schulung, um alle Inhalte zu verinnerlichen.' +
'</div>';
html += '<button type="button" class="bs-btn bs-btn-primary" onclick="bsRestartTraining()" style="margin-top:24px;width:100%;padding:16px;font-size:var(--font-size-md);">Schulung neu starten</button>';
}
body.innerHTML = html;
}
function bsSetQuizButtonState(quizId, state) {
var btn = document.getElementById('bsCheck_' + quizId);
if (!btn) return;
btn.classList.remove('bs-btn-success', 'bs-btn-failed', 'bs-btn-check-disabled');
if (state === 'passed') {
btn.textContent = 'Richtig';
btn.classList.add('bs-btn-success', 'bs-btn-check-disabled');
btn.onclick = null;
return;
}
if (state === 'failed') {
btn.textContent = 'Falsch';
btn.classList.add('bs-btn-failed', 'bs-btn-check-disabled');
btn.onclick = null;
return;
}
btn.textContent = 'Antwort prüfen';
btn.onclick = function() { bsCheckIndividualQuiz(quizId); };
}
function bsUpdatePageGate(nextBtnId, quizIds) {
var nextBtn = document.getElementById(nextBtnId);
if (!nextBtn) return;
var allPassed = quizIds.every(function(id) { return !!bsQuizPassed[id]; });
nextBtn.classList.toggle('bs-btn-locked', !allPassed);
}
/* Validate quiz without marking options */
function bsValidateQuiz(quizId) {
var quiz = document.getElementById(quizId);
if (!quiz) return false;
// Checkbox-based quizzes
var cbOptions = quiz.querySelectorAll('.bs-quiz-option input[type="checkbox"]');
if (cbOptions.length > 0) {
var ok = true;
cbOptions.forEach(function(cb) {
var isCorrect = cb.dataset.correct === 'true';
if ((isCorrect && !cb.checked) || (!isCorrect && cb.checked)) ok = false;
});
return ok;
}
// Fill-in-the-blank
var fills = quiz.querySelectorAll('.bs-fill-input');
if (fills.length > 0) {
var ok = true;
fills.forEach(function(input) {
if (input.value.toLowerCase().trim() !== input.dataset.answer.toLowerCase().trim()) ok = false;
});
return ok;
}
// Dropdown matching
var selects = quiz.querySelectorAll('.bs-dropdown-match-select');
if (selects.length > 0) {
var ok = true;
selects.forEach(function(sel) {
if (sel.value !== sel.dataset.correct) ok = false;
});
return ok;
}
return false;
}
function bsCheckIndividualQuiz(quizId) {
var config = bsQuizConfigs[quizId];
if (!config) return;
if (!bsQuizAttempts[quizId]) bsQuizAttempts[quizId] = 0;
bsQuizAttempts[quizId]++;
var attempt = bsQuizAttempts[quizId];
var passed = bsValidateQuiz(quizId);
if (passed) {
// Correct — show markings and lock
config.check();
bsQuizPassed[quizId] = true;
bsQuizCorrect[quizId] = true;
bsSetQuizButtonState(quizId, 'passed');
document.getElementById(quizId).classList.add('bs-quiz-locked');
} else if (attempt >= 3) {
// Third wrong attempt — show solution, lock as failed
config.check();
bsQuizPassed[quizId] = true; // done (failed but completed)
bsQuizCorrect[quizId] = false;
bsSetQuizButtonState(quizId, 'failed');
document.getElementById(quizId).classList.add('bs-quiz-locked');
} else {
// Wrong but retries left — show hint, keep selections
var remaining = 3 - attempt;
var fb = document.getElementById(quizId + '_fb');
if (fb) {
fb.classList.remove('correct', 'wrong');
fb.classList.add('show', 'wrong');
fb.textContent = 'Leider falsch. Du hast noch ' + remaining + (remaining === 1 ? ' Versuch.' : ' Versuche.');
}
}
bsUpdatePageGate(config.nextBtnId, config.pageQuizIds);
}
function bsClearFeedback(ids) {
ids.forEach(function(id) {
var fb = document.getElementById(id);
if (!fb) return;
fb.classList.remove('show', 'correct', 'wrong');
fb.textContent = '';
});
}
function bsResetQuizContainer(containerId) {
var container = document.getElementById(containerId);
if (!container) return;
container.querySelectorAll('input[type="checkbox"]').forEach(function(input) {
input.checked = false;
});
container.querySelectorAll('.bs-quiz-option').forEach(function(opt) {
opt.classList.remove('correct', 'wrong', 'selected');
});
container.querySelectorAll('select').forEach(function(select) {
select.selectedIndex = 0;
});
container.querySelectorAll('.bs-dropdown-match-row').forEach(function(row) {
row.classList.remove('correct', 'wrong');
});
container.querySelectorAll('input[type="text"]').forEach(function(input) {
input.value = '';
input.classList.remove('correct', 'wrong');
});
container.querySelectorAll('.bs-quiz-feedback, .bs-feedback').forEach(function(fb) {
fb.classList.remove('show', 'correct', 'wrong');
fb.textContent = '';
});
}
function bsUpdateChecklistNext(checklistId, buttonId) {
const checklist = document.getElementById(checklistId);
const button = document.getElementById(buttonId);
if (!checklist || !button) return;
const items = checklist.querySelectorAll('li');
const checkedItems = checklist.querySelectorAll('li.checked');
const allChecked = items.length > 0 && items.length === checkedItems.length;
button.classList.toggle('bs-btn-locked', !allChecked);
}
function bsRestartTraining() {
bsQuizPassed = {};
bsQuizAttempts = {};
bsQuizCorrect = {};
for (var s = 1; s <= 5; s++) {
bsSectionQuizIds[s].forEach(function(id) {
bsResetQuizContainer(id);
bsSetQuizButtonState(id, 'default');
var quiz = document.getElementById(id);
if (quiz) quiz.classList.remove('bs-quiz-locked');
});
}
['bsNextS1Q', 'bsNextS2Q', 'bsNextS3Q', 'bsNextS4Q', 'bsNextS5P1', 'bsNextS5P2'].forEach(function(id) {
var btn = document.getElementById(id);
if (btn) btn.classList.add('bs-btn-locked');
});
var checklist = document.getElementById('bsChecklist3_2');
if (checklist) {
checklist.querySelectorAll('li.checked').forEach(function(li) { li.classList.remove('checked'); });
var clBtn = document.getElementById('bsNextSub3_2');
if (clBtn) clBtn.classList.add('bs-btn-locked');
}
bsGoToSection(0);
}
/* ══════════════════════════════════════
ABSCHLUSS, BESTÄTIGUNG
══════════════════════════════════════ */
function bsToggleConfirm() {
var checkbox = document.getElementById('bsConfirmCheckbox');
var finishBtn = document.getElementById('bsFinishBtn');
if (checkbox.checked) {
finishBtn.classList.remove('bs-btn-locked');
} else {
finishBtn.classList.add('bs-btn-locked');
}
}
function bsFinishTraining() {
// POST-Request senden um die Schulung zu registrieren
var form = document.createElement('form');
form.method = 'POST';
form.action = '/intranet_repo/projects/brandschutz/brandschutz.php';
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'bs_complete_training';
input.value = '1';
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
/* ══════════════════════════════════════
SHUFFLE QUIZ OPTIONS ON LOAD
══════════════════════════════════════ */
(function() {
var quizBlocks = document.querySelectorAll('.bs-quiz-options');
quizBlocks.forEach(function(container) {
var options = Array.from(container.querySelectorAll(':scope > .bs-quiz-option'));
if (options.length < 2) return;
// Fisher-Yates shuffle
for (var i = options.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = options[i];
options[i] = options[j];
options[j] = temp;
}
options.forEach(function(opt) { container.appendChild(opt); });
});
})();
</script>
</div><!-- end .content#base -->
<?php require_once $_SERVER['DOCUMENT_ROOT'].'/intranet_repo/projects/_central/php/footer.php'; ?>
</body>
</html>