oefenhub_beheerder_13_docent_ondersteuning_V1_9.html
Korte beschrijving
Mockup van de beheerpagina voor docentondersteuning binnen OefenHub. Deze pagina ondersteunt beheerders bij het aanbieden of beheren van ondersteuning, hulpinformatie en gerelateerde docentfunctionaliteiten.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/beheerder/oefenhub_beheerder_13_docent_ondersteuning_V1_9.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub Beheer - Docent ondersteuning</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
--blue-1:#8fd0ff; --blue-2:#5bb3ff; --blue-3:#1f82e9; --blue-4:#0d5db8;
--text:#114f95; --muted:#5f7ea5; --line:rgba(17,79,149,.12);
--orange-1:#ffbb4d; --orange-2:#ff9620; --orange-3:#f87400;
--green-1:#8adf67; --green-2:#57ba3c; --green-3:#2c9348;
--yellow-1:#ffd04e; --yellow-2:#f6aa07; --purple-1:#8d6cff; --purple-2:#6248d8;
--red-1:#ff8f8f; --red-2:#df4949;
--shadow:0 12px 28px rgba(35,100,177,.12); --shadow-soft:0 8px 18px rgba(35,100,177,.08);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color:var(--text);
background:
radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
min-height:100vh;
}
.wrap { width:min(1240px, calc(100% - 30px)); margin:0 auto; }
.header {
padding:10px 0 12px; background:linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom:1px solid rgba(255,255,255,.38); box-shadow:0 8px 20px rgba(28,100,177,.08);
position:relative; z-index:10;
}
.header-row { display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(160px,1fr); align-items:center; gap:10px; }
.brand { display:flex; flex-direction:column; align-items:flex-start; min-width:250px; }
.brand img { display:block; height:46px; width:auto; }
.welcome-text { font-size:12px; color:rgba(17,79,149,.82); font-weight:700; margin-top:-10px; margin-left:53px; }
.nav-pills { display:flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; }
.nav-item { position:relative; }
.pill { border:0; border-radius:12px; padding:10px 16px; color:#fff; font-size:13px; font-weight:900; box-shadow:var(--shadow-soft); cursor:pointer; }
.pill.blue { background:linear-gradient(180deg, #2f88ea, #176acc); }
.pill.orange { background:linear-gradient(180deg, #ffbb4d, #ff7f12); }
.pill.green { background:linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.has-chevron { display:inline-flex; align-items:center; gap:8px; }
.dropdown-menu {
position:absolute; top:calc(100% + 8px); left:0; width:304px; background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
border-radius:20px; box-shadow:0 12px 24px rgba(35,100,177,.16); border:1px solid rgba(170,204,238,.55); padding:10px 12px;
z-index:40; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dropdown-menu::before { content:""; position:absolute; top:-10px; left:36px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(255,255,255,.97); }
.dropdown-menu.align-right { left:auto; right:0; width:294px; }
.dropdown-menu.align-right::before { left:auto; right:20px; }
.nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu, .nav-item.open .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.menu-list { display:flex; flex-direction:column; gap:0; }
.menu-link { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:9px 11px; border-radius:13px; text-decoration:none; color:#18518f; font-size:15px; font-weight:900; box-shadow:inset 0 -1px 0 rgba(17,79,149,.10); }
.menu-link:last-child { box-shadow:none; }
.menu-link:hover, .menu-link.is-active { background:linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-icon { width:23px; height:23px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:900; box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10); }
.menu-icon.orange { background:linear-gradient(180deg, #ffbb4d, #ff7f12); }
.menu-icon.blue { background:linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.green { background:linear-gradient(180deg, #8add68, #4baa35); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:120px; }
.mail-btn, .profile-chip { border:0; box-shadow:var(--shadow-soft); cursor:pointer; }
.mail-btn { position:relative; width:40px; height:40px; border-radius:999px; background:linear-gradient(180deg, #ffffff, #eef6ff); color:var(--blue-4); font-size:17px; }
.badge { position:absolute; right:-2px; bottom:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e23838; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.profile-nav { position:relative; }
.profile-chip { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:linear-gradient(180deg, #ffffff, #edf6ff); padding:0; }
.avatar { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:900; background:linear-gradient(180deg, #ffb247, #ff8120); }
main.page-shell { padding:22px 0 30px; }
.breadcrumb { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; color:#34679f; font-size:13px; font-weight:800; }
.breadcrumb strong { color:#0d5db8; }
.crumb-sep { opacity:.55; }
.hero-card, .panel-card, .tabs-card, .detail-card { background:rgba(255,255,255,.92); border:1px solid rgba(17,79,149,.08); border-radius:26px; box-shadow:var(--shadow-soft); }
.hero-card { padding:20px 22px; margin-bottom:18px; }
.hero-title { margin:0 0 10px; font-size:22px; line-height:1.1; color:#0d5db8; }
.hero-text { margin:0; font-size:15px; line-height:1.65; max-width:980px; }
.selection-grid { display:grid; grid-template-columns:minmax(0, 1.18fr) minmax(290px, .82fr); gap:18px; align-items:start; }
.panel-card { padding:18px 20px; min-width:0; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:14px; }
.panel-title { margin:0; font-size:19px; color:#0d5db8; }
.panel-copy { margin:6px 0 0; font-size:13px; line-height:1.5; color:#6280a3; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.search-input, .text-input { width:100%; border:1px solid rgba(17,79,149,.14); background:rgba(255,255,255,.98); border-radius:16px; padding:13px 14px; font:inherit; color:#134f92; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.toolbar .search-wrap { flex:1 1 240px; min-width:220px; }
.overview-list { display:grid; gap:10px; max-height:445px; overflow:auto; padding-right:6px; }
.overview-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 15px; border:1px solid rgba(132,186,236,.35); background:linear-gradient(180deg, rgba(246,250,255,.96), rgba(235,244,255,.92)); border-radius:20px; min-width:0; }
.overview-main { min-width:0; }
.docent-copy strong { display:block; font-size:15px; color:#0d5db8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docent-copy span { display:block; margin-top:4px; font-size:13px; color:#5a7ea6; line-height:1.45; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:900; }
.tag.blue { background:#dceeff; color:#216ab9; } .tag.green { background:#e3f7ea; color:#23804a; } .tag.orange { background:#fff0d8; color:#c27209; } .tag.grey { background:#edf3f8; color:#6a84a2; } .tag.purple { background:#f0ebff; color:#5b3ca8; }
.btn { border:0; border-radius:15px; min-height:44px; padding:0 16px; font:inherit; font-size:14px; font-weight:900; cursor:pointer; box-shadow:var(--shadow-soft); }
.btn-primary { background:linear-gradient(180deg, #ffbc4b, #ff9621); color:#fff; }
.btn-secondary { background:linear-gradient(180deg, #eef6ff, #dcecff); color:#0d5db8; }
.btn-danger { background:linear-gradient(180deg,#ef6b6b,#cf3e3e); color:#fff; }
.btn-ghost { background:#fff; color:#0d5db8; border:1px solid rgba(17,79,149,.14); box-shadow:none; }
.readonly-grid { display:grid; gap:0px; }
.readonly-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; padding:10px 0; border-top:1px solid rgba(17,79,149,.08); }
.readonly-row:first-child { border-top:0; padding-top:0; }
.readonly-row span { color:#6381a4; font-size:13px; }
.readonly-row strong { color:#184f90; font-size:14px; text-align:right; }
.quick-history { margin-top:14px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10); max-height:305px; overflow:auto; padding-right:6px; }
.quick-history h3 { margin:0 0 10px; font-size:15px; color:#0d5db8; }
.history-mini-item { padding:10px 12px; border-radius:16px; background:#f7fbff; border:1px solid rgba(17,79,149,.08); margin-bottom:8px; }
.history-mini-item:last-child { margin-bottom:0; }
.history-mini-item strong { display:block; font-size:13px; color:#184f90; }
.history-mini-item span { display:block; margin-top:4px; font-size:12px; color:#6381a4; line-height:1.45; }
.actions-row { display:flex; justify-content:center; flex-wrap:wrap; margin-top:15px; padding-top:15px; border-top:1px solid rgba(17,79,149,.10); }
.manage-stage { display:none; margin-top:18px; }
.manage-stage.open { display:block; }
.manage-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.manage-title { margin:0; font-size:20px; color:#0d5db8; }
.tabs-card { padding:16px 18px 20px; }
.tab-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin:0px; }
.tab-btn {
border:1px solid rgba(140,197,242,1); border-bottom:0; border-radius:18px 18px 0 0;
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));
color:#235b99; font-weight:900; font-size:13px; padding:0 20px; min-height:25px;
display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 -3px 12px rgba(35,100,177,.05);
}
.tab-btn.active { background:linear-gradient(180deg,#4ea5ff,#1f79dc); color:#fff; border-color:#2f88ea; }
.tab-pane {
display:none; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));
border:1px solid rgb(140 197 242); border-radius:0 24px 24px 24px; padding:18px; box-shadow:var(--shadow-soft); min-height:560px;
}
.tab-pane.active { display:block; }
.tab-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.intro-box, .detail-card, .history-card { padding:18px 20px; border-radius:24px; background:#fff; border:1px solid rgba(17,79,149,.08); box-shadow:var(--shadow-soft); }
.intro-box h3, .detail-card h3, .history-card h3 { margin:0 0 10px; font-size:18px; color:#0d5db8; }
.intro-box p, .detail-card p, .history-card p { margin:0; font-size:14px; line-height:1.6; color:#5f7ea5; }
.top-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.summary-box { border:1px solid #d5e5f7; background:#f8fbff; border-radius:24px; padding:8px 15px; }
.summary-box strong { display:block; color:#1a4f8f; font-size:19px; margin-bottom:8px; }
.summary-box span { color:#5f80a8; font-size:12px; line-height:1.55; display:block; }
.meta-card-list { display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
.meta-card { border:1px solid #d5e5f7; background:#f8fbff; border-radius:24px; padding:8px 15px; display:grid; gap:4px; align-items:start; }
.meta-card strong { color:#5374a0; font-size:13px; display:block; }
.meta-card span { color:#1a4f8f; font-size:14px; line-height:1.45; display:block; }
.structure-layout { display:grid; grid-template-columns:minmax(0, 1.15fr) 360px; gap:18px; align-items:start; }
.structure-card, .exercise-card, .access-card, .contributors-card { padding:18px 20px; border-radius:24px; background:#fff; border:1px solid rgba(17,79,149,.08); box-shadow:var(--shadow-soft); }
.structure-card { min-height:520px; }
.structure-toolbar { display:flex; gap:10px; margin:14px 0 16px; }
.tree-list { display:grid; gap:12px; max-height:435px; overflow:auto; padding-right:6px; }
.level-card { border:1px solid #d7e5f6; background:#fff; border-radius:22px; padding:14px 16px; }
.level-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.level-head strong { display:block; color:#1c4f8b; font-size:16px; }
.level-head span { display:block; color:#607fa6; font-size:13px; margin-top:4px; line-height:1.45; }
.level-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.category-list { display:grid; gap:10px; margin-top:14px; }
.category-card { border:1px solid #e1ecf8; background:#f8fbff; border-radius:18px; padding:12px 14px; }
.category-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.category-head strong { display:block; color:#184f90; font-size:14px; }
.exercise-list { display:grid; gap:8px; margin-top:10px; }
.exercise-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; background:#fff; border:1px solid #dbe8f7; border-radius:16px; padding:10px 12px; }
.exercise-item.active { border-color:#5e93d9; box-shadow:0 0 0 3px rgba(88,139,212,.12); background:linear-gradient(180deg,#ffffff 0%,#f3f8fe 100%); }
.exercise-item strong { display:block; color:#184f90; font-size:14px; }
.exercise-item span { display:block; color:#6988ad; font-size:12px; margin-top:2px; }
.link-btn { border:0; background:transparent; color:#1b5ca0; font-size:13px; font-weight:900; cursor:pointer; padding:0; }
.exercise-card { min-height:520px; display:flex; flex-direction:column; }
.exercise-state { margin-top:14px; padding:14px 16px; border-radius:18px; background:#f7fbff; border:1px solid rgba(17,79,149,.08); }
.exercise-state strong { display:block; color:#184f90; font-size:14px; margin-bottom:4px; }
.note-box { margin-top:14px; padding:14px 16px; border-radius:16px; background:rgba(255,187,77,.18); border:1px solid rgba(246,170,7,.22); color:#6c561a; font-size:13px; line-height:1.55; }
.action-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.action-links a { color:#1b5ca0; font-size:13px; font-weight:900; text-decoration:none; }
.plain-list { display:grid; gap:12px; max-height:490px; overflow:auto; padding-right:6px; }
.plain-item { border:1px solid #dbe8f7; border-radius:20px; background:#f8fbff; padding:14px 16px; }
.plain-item strong { display:block; color:#184f90; font-size:15px; }
.plain-item span { display:block; color:#6988ad; font-size:13px; margin-top:4px; line-height:1.5; }
.two-col-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.level-head.clickable, .category-head.clickable, .exercise-item.clickable { cursor:pointer; transition:background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.level-head.clickable:hover, .category-head.clickable:hover { background:#f3f8fe; border-radius:16px; }
.exercise-item.clickable:hover { background:#eef6ff; }
.structure-pane { display:none; }
.structure-pane.active { display:block; }
.history-card { height:520px; display:flex; flex-direction:column; }
.history-scroll { margin-top:16px; overflow:auto; flex:1 1 auto; }
.history-table { width:100%; border-collapse:separate; border-spacing:0 10px; }
.history-table th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6a84a2; padding:0 12px 2px; position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.98)); z-index:2; }
.history-table td { background:#f8fbff; border-top:1px solid #dce9f8; border-bottom:1px solid #dce9f8; padding:12px; font-size:13px; color:#184f90; vertical-align:top; }
.history-table td:first-child { border-left:1px solid #dce9f8; border-radius:14px 0 0 14px; }
.history-table td:last-child { border-right:1px solid #dce9f8; border-radius:0 14px 14px 0; }
.card-title { margin:0 0 10px; font-size:18px; color:#0d5db8; }
.card-copy { margin:0; font-size:14px; line-height:1.6; color:#5f7ea5; }
.selected-docent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.selected-docent-grid .readonly-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; padding:10px 0; border-top:1px solid rgba(17,79,149,.08); }
.selected-docent-grid .readonly-row.full { grid-column:1 / -1; }
.selected-docent-grid .readonly-row:first-child,
.selected-docent-grid .readonly-row.full + .readonly-row.full,
.selected-docent-grid .readonly-row.full:first-child { border-top:0; }
.intro-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.intro-box, .detail-card { height:100%; }
.intro-summary-grid .summary-box.full { grid-column:1 / -1; }
.config-card { margin-top:auto; padding-top:14px; }
.cta-row { display:flex; justify-content:center; }
.two-panel-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:stretch; }
.level-list-panel, .level-detail-panel, .owner-card, .contributors-card, .access-card, .exercise-card, .structure-card { height:520px; display:flex; flex-direction:column; }
.level-list-panel, .level-detail-panel, .owner-card, .contributors-card, .access-card, .exercise-card, .structure-card { padding:14px 20px 18px; }
.support-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.support-tag { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; }
.support-tag.blue { background:#dceeff; color:#216ab9; }
.support-table-wrap { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.support-scroll { max-height:none; overflow:auto; padding-right:6px; margin-top:10px; flex:1 1 auto; min-height:0; }
.select-list { flex:1 1 auto; min-height:0; max-height:none; }
.table-row-linked td { background:#e6f6ea !important; }
.table-row-available td { background:#f8fbff; }
.owner-current { margin-top:8px; padding:10px 12px; border-radius:16px; background:#f7fbff; border:1px solid rgba(17,79,149,.08); display:flex; align-items:center; gap:8px; color:#184f90; font-size:14px; }
.owner-current strong { font-size:14px; color:#5374a0; }
.owner-current span { font-weight:800; }
.modal-overlay { position:fixed; inset:0; background:rgba(18,50,88,.34); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px; z-index:120; }
.modal-overlay.open { display:flex; }
.modal-card { width:min(920px, 100%); background:#fff; border-radius:24px; box-shadow:0 22px 44px rgba(13,56,110,.22); border:1px solid rgba(17,79,149,.1); max-height:min(86vh, 920px); overflow:hidden; display:flex; flex-direction:column; }
.modal-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:20px 22px 14px; border-bottom:1px solid rgba(17,79,149,.08); position:sticky; top:0; background:#fff; z-index:2; }
.modal-head h3 { margin:0; font-size:20px; color:#0d5db8; }
.modal-close { border:0; background:#eef6ff; color:#0d5db8; width:38px; height:38px; border-radius:999px; cursor:pointer; font-size:20px; font-weight:700; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px 20px; border-top:1px solid rgba(17,79,149,.08); position:sticky; bottom:0; background:#fff; z-index:2; }
.muted-warning { margin-top:0; padding:12px 14px; border-radius:16px; background:#fdeaea; border:1px solid rgba(223,73,73,.18); color:#a64646; font-size:13px; line-height:1.55; }
.modal-two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.modal-panel { border:1px solid rgba(17,79,149,.08); border-radius:20px; background:#f8fbff; padding:16px; }
.modal-panel .select-list { max-height:250px; margin-top:12px; }
.modal-panel .field { margin-top:0; }
.accordion-list { display:grid; gap:12px; margin-top:14px; }
.accordion-card { border:1px solid rgba(17,79,149,.10); border-radius:18px; background:#f8fbff; overflow:hidden; }
.accordion-head { width:100%; border:0; background:linear-gradient(180deg,#ffffff,#f5f9ff); padding:14px 16px; display:flex; justify-content:space-between; align-items:center; color:#0d5db8; font-size:16px; font-weight:900; cursor:pointer; }
.accordion-head span:last-child { color:#5f7ea5; font-size:18px; }
.accordion-body { padding:0 16px 16px; display:block; }
.config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.config-grid .field-full { grid-column:1 / -1; }
.modal-card .field label { font-size:13px; font-weight:900; color:#235790; }
.modal-card .readonly-display { min-height:46px; }
.modal-body { padding:18px 22px; overflow:auto; flex:1 1 auto; min-height:0; }
.force-linked td { background:#e6f6ea !important; }
.force-available td { background:#f8fbff; }
.owner-candidate td { background:#f8fbff; }
.modal-card.config-modal { width:min(1080px, 100%); max-height:min(88vh, 980px); }
.config-modal .modal-head h3 { font-size:18px; color:#0d5db8; }
.config-modal .modal-body { padding:18px 22px 16px; }
.config-modal .card-copy { margin:0 0 14px; font-size:14px; line-height:1.55; color:#5f7ea5; }
.accordion-list { display:grid; gap:14px; margin-top:14px; }
.generic-block, .config-section { border:1px solid rgba(17,79,149,.10); border-radius:18px; background:#f8fbff; overflow:hidden; box-shadow:var(--shadow-soft); }
.generic-block { padding:16px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-title h2 { margin:0; font-size:18px !important; color:#0d5db8; }
.config-section > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:14px 16px; background:linear-gradient(180deg,#ffffff,#f5f9ff); color:#0d5db8; font-size:16px; font-weight:900; }
.config-section > summary::-webkit-details-marker { display:none; }
.summary-arrow { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; color:#5f7ea5; font-size:18px; transform:rotate(-90deg); transition:transform .18s ease; }
.config-section[open] > summary .summary-arrow { transform:rotate(90deg); }
.config-content { padding:0 16px 16px; }
.config-modal .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.config-modal .field, .config-modal .field-full { display:grid; gap:8px; }
.config-modal .field-full { grid-column:1 / -1; }
.config-modal label { font-size:13px; font-weight:900; color:#235790; }
.config-modal input[type="text"], .config-modal input[type="number"], .config-modal select, .config-modal textarea {
width:100%; border:1px solid rgba(17,79,149,.14); background:rgba(255,255,255,.98);
border-radius:16px; padding:13px 14px; font:inherit; color:#134f92; box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.intro-helper { margin-top:14px; padding:14px 16px; border-radius:16px; background:#eef5fd; border:1px solid rgba(140,197,242,1); }
.intro-helper-label { font-size:12px; font-weight:900; color:#5374a0; text-transform:uppercase; letter-spacing:.04em; }
.intro-helper-text { margin-top:6px; font-size:13px; line-height:1.55; color:#5f7ea5; }
.intro-helper-formula { margin-top:10px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid rgba(17,79,149,.08); color:#184f90; font-size:16px; font-weight:900; text-align:center; }
.icon-pick { display:flex; flex-wrap:wrap; gap:10px; }
.icon-pick .icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid rgba(17,79,149,.12); box-shadow:var(--shadow-soft); font-size:18px; }
.icon-pick .icon.active { background:linear-gradient(180deg,#4ea5ff,#1f79dc); color:#fff; border-color:#2f88ea; }
.subcard { background:#fff; border:1px solid rgba(17,79,149,.08); border-radius:18px; padding:14px; box-shadow:var(--shadow-soft); }
.subcard h5 { margin:0 0 10px; font-size:15px; color:#0d5db8; }
.choice-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:12px; }
.choice-row label, .radio-row label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#184f90; }
.align-right-first { justify-content:space-between; }
.right-choice { margin-left:auto; }
.split-config { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:14px; align-items:start; }
.stack { display:grid; gap:12px; }
.split-divider { background:rgba(17,79,149,.10); border-radius:999px; min-height:100%; }
.helper { font-size:12px; color:#5f7ea5; line-height:1.5; margin-bottom:10px; }
.disabled-look { opacity:.55; }
.tag-selector { display:flex; flex-wrap:wrap; gap:8px; }
.number-tag { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:999px; background:#eef5fd; color:#1b5ca0; font-size:12px; font-weight:900; border:1px solid rgba(140,197,242,1); }
.number-tag.active { background:linear-gradient(180deg,#4ea5ff,#1f79dc); color:#fff; border-color:#2f88ea; }
.warning { padding:12px 14px; border-radius:16px; background:#fff0d8; border:1px solid rgba(246,170,7,.24); color:#7b5c22; font-size:13px; line-height:1.55; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.setting-card { background:#fff; border:1px solid rgba(17,79,149,.08); border-radius:18px; padding:14px; box-shadow:var(--shadow-soft); }
.setting-card.full { grid-column:1 / -1; }
.setting-card h6 { margin:0 0 10px; font-size:14px; color:#0d5db8; }
.setting-card p { margin:10px 0 0; font-size:13px; line-height:1.55; color:#5f7ea5; }
.range-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.range-row input[type="range"] { width:100%; }
.range-value { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border-radius:999px; background:#eef5fd; color:#1b5ca0; font-size:12px; font-weight:900; min-width:64px; }
.helper-box { padding:12px 14px; border-radius:16px; background:#eef5fd; border:1px solid rgba(140,197,242,1); color:#5f7ea5; font-size:13px; line-height:1.55; }
.radio-row { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
@media (max-width:760px) {
.config-modal .form-grid, .split-config, .settings-grid { grid-template-columns:1fr; }
.split-divider { display:none; }
.align-right-first { justify-content:flex-start; }
.right-choice { margin-left:0; }
}
.structure-item-link { cursor:pointer; }
.structure-item-link:hover { box-shadow:0 0 0 3px rgba(88,139,212,.12); }
.detail-pane { display:none; }
.detail-pane.active { display:block; }
.structure-actions { display:flex; justify-content:center; margin-top:16px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10); }
.detail-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.detail-metric { padding:10px 14px; border-radius:18px; background:#f8fbff; border:1px solid #d5e5f7; }
.detail-metric strong { display:block; color:#1a4f8f; font-size:18px; margin-bottom:4px; }
.detail-metric span { display:block; color:#5f80a8; font-size:12px; line-height:1.45; }
.site-footer { margin-top:24px; padding:24px 0 22px; background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92)); border-top:1px solid rgba(170,204,238,.62); border-radius:26px 26px 0 0; box-shadow:0 -10px 24px rgba(35,100,177,.06); }
.footer-grid { width:min(1240px, calc(100% - 30px)); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:22px; }
.footer-col h4 { margin:0 0 8px; font-size:16px; color:#0f4d91; }
.footer-col p { margin:0; color:#5e7ea6; font-size:14px; line-height:1.55; }
.footer-links { display:flex; flex-direction:column; gap:7px; }
.footer-links a { color:#2364a7; text-decoration:none; font-weight:700; font-size:14px; }
.footer-bottom { width:min(1240px, calc(100% - 30px)); margin:18px auto 0; padding-top:14px; border-top:1px solid rgba(170,204,238,.56); color:#6b86aa; font-size:13px; font-weight:700; }
.selection-grid.hidden { display:none; }
.inline-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.inline-actions.center { justify-content:center; }
.action-note { margin-top:12px; padding:12px 14px; border-radius:16px; background:#f7fbff; border:1px solid rgba(17,79,149,.08); color:#5f7ea5; font-size:13px; line-height:1.55; }
.two-panel-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start; }
.level-list-panel, .level-detail-panel, .owner-card, .contributors-card, .access-card, .exercise-card, .structure-card { border-radius:24px; background:#fff; border:1px solid rgba(17,79,149,.08); box-shadow:var(--shadow-soft); }
.select-list { max-height:420px; overflow:auto; padding-right:6px; margin-top:14px; }
.select-item { min-height:0; padding:12px 14px; border-radius:18px; background:#f8fbff; border:1px solid #dbe8f7; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden; margin-bottom:13px; }
.select-item.active { border-color:#5e93d9; box-shadow:0 0 0 3px rgba(88,139,212,.12); background:linear-gradient(180deg,#ffffff 0%,#f3f8fe 100%); }
.select-item strong { display:block; color:#1c4f8b; font-size:15px; }
.select-item span { display:block; margin-top:4px; color:#607fa6; font-size:13px; line-height:1.45; }
.level-stats { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.compact-note { margin-top:12px; color:#5f7ea5; font-size:13px; line-height:1.55; }
.link-group { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.link-group a { color:#18518f; text-decoration:none; font-size:14px; font-weight:800; }
.link-group a:hover { text-decoration:underline; }
.support-table { width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:12px; }
.support-table th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6a84a2; padding:0 12px 2px; }
.support-table td { background:#f8fbff; border-top:1px solid #dce9f8; border-bottom:1px solid #dce9f8; padding:12px; font-size:13px; color:#184f90; vertical-align:top; }
.support-table td:first-child { border-left:1px solid #dce9f8; border-radius:14px 0 0 14px; }
.support-table td:last-child { border-right:1px solid #dce9f8; border-radius:0 14px 14px 0; }
.support-scroll { max-height:360px; overflow:auto; padding-right:6px; margin-top:10px; }
.section-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
@media (max-width:1100px) {
.header-row { grid-template-columns:1fr; gap:14px; } .brand { justify-self:center; align-items:center; min-width:0; } .welcome-text { margin-left:0; margin-top:-6px; } .header-actions { justify-content:center; } .nav-pills { overflow-x:auto; justify-content:flex-start; padding-bottom:2px; width:100%; }
.selection-grid, .tab-layout, .structure-layout { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:760px) {
.wrap { width:min(100%, calc(100% - 18px)); } .overview-item, .exercise-item, .level-head, .category-head { grid-template-columns:1fr; display:block; } .readonly-row { grid-template-columns:1fr; } .readonly-row strong { text-align:left; } .top-summary, .two-col-meta, .intro-summary-grid, .selected-docent-grid { grid-template-columns:1fr; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
<div class="welcome-text">Welkom terug, Noor</div>
</div>
<nav class="nav-pills" aria-label="Hoofdmenu">
<div class="nav-item"><button class="pill blue">Site instellingen</button></div>
<div class="nav-item">
<button class="pill orange has-chevron">Content <span>▾</span></button>
<div class="dropdown-menu">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon orange">C</span><span>Categorieën beheren</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">M</span><span>Modules beheren</span></a>
<a class="menu-link is-active" href="#"><span class="menu-icon green">D</span><span>Docent ondersteuning</span></a>
</div>
</div>
</div>
<div class="nav-item"><button class="pill green">Accounts</button></div>
</nav>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉<span class="badge">3</span></button>
<div class="nav-item profile-nav">
<button class="profile-chip" aria-label="Profielmenu"><span class="avatar">N</span></button>
<div class="dropdown-menu align-right">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon blue">P</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon orange">V</span><span>Voorkeuren</span></a>
<a class="menu-link" href="#"><span class="menu-icon green">T</span><span>Toegankelijkheid</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">M</span><span>Meldingen</span></a>
<a class="menu-link" href="#"><span class="menu-icon orange">U</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="page-shell">
<div class="wrap">
<div class="breadcrumb"><span>Home</span><span class="crumb-sep">›</span><span>Content</span><span class="crumb-sep">›</span><strong>Docent ondersteuning</strong></div>
<section class="hero-card">
<h1 class="hero-title">Docent ondersteuning</h1>
<p class="hero-text">Zoek een docent, bekijk de volledige docentstructuur en ondersteun gericht binnen de context van die docent. Vanuit deze pagina werk je niet met centrale categorie- of moduleobjecten, maar met de inrichting zoals de docent die zelf heeft opgebouwd: niveaus, onderliggende categorieën, concrete oefeningen, leerlingtoegang en collaborators.</p>
</section>
<section class="selection-grid" id="selectionStage">
<article class="panel-card">
<div class="panel-head">
<div>
<h2 class="panel-title">Overzicht docenten</h2>
<p class="panel-copy">Zoek op naam van docent, niveau, categorie of oefening. De zoekfunctie kijkt in de docentstructuur en helpt bij het terugvinden van relevante ondersteuningscases.</p>
</div>
</div>
<div class="toolbar"><div class="search-wrap"><input class="search-input" type="text" value="rekenen" aria-label="Zoek docent"/></div></div>
<div class="overview-list" style="margin-top:14px;">
<div class="overview-item">
<div class="overview-main">
<div class="docent-copy"><strong>Tom van Dijk</strong><span>Docent · Basisschool De Horizon · Laatste activiteit: vandaag 08:14</span></div>
<div class="meta-row"><span class="tag blue">3 niveaus</span><span class="tag green">7 categorieën</span><span class="tag orange">18 oefeningen</span><span class="tag purple">26 leerlingen</span></div>
</div>
<button class="btn btn-secondary">Selecteer</button>
</div>
<div class="overview-item">
<div class="overview-main">
<div class="docent-copy"><strong>Noëlle Janssen</strong><span>Docent · Zoekmatch in oefening: Tafels sprint</span></div>
<div class="meta-row"><span class="tag blue">2 niveaus</span><span class="tag green">5 categorieën</span><span class="tag orange">11 oefeningen</span><span class="tag grey">6 collaborators</span></div>
</div>
<button class="btn btn-secondary">Selecteer</button>
</div>
<div class="overview-item">
<div class="overview-main">
<div class="docent-copy"><strong>Marit de Boer</strong><span>Docent · Zoekmatch in categorie: Breuken</span></div>
<div class="meta-row"><span class="tag blue">4 niveaus</span><span class="tag green">9 categorieën</span><span class="tag orange">24 oefeningen</span><span class="tag purple">41 leerlingen</span></div>
</div>
<button class="btn btn-secondary">Selecteer</button>
</div>
<div class="overview-item">
<div class="overview-main">
<div class="docent-copy"><strong>Iris Koster</strong><span>Docent · Laatste wijziging: gisteren 16:42</span></div>
<div class="meta-row"><span class="tag blue">1 niveau</span><span class="tag green">3 categorieën</span><span class="tag orange">8 oefeningen</span><span class="tag grey">0 collaborators</span></div>
</div>
<button class="btn btn-secondary">Selecteer</button>
</div>
</div>
</article>
<aside class="panel-card">
<div class="panel-head">
<div>
<h2 class="panel-title">Geselecteerde docent</h2>
<p class="panel-copy">Readonly kerninformatie van de docent en de actuele structuurimpact.</p>
</div>
</div>
<div class="selected-docent-grid">
<div class="readonly-row full"><span>Naam</span><strong>Tom van Dijk</strong></div>
<div class="readonly-row full"><span>Accountstatus</span><strong>Actief</strong></div>
<div class="readonly-row full"><span>Actieve rollen</span><strong>Docent, Ouder/voogd</strong></div>
<div class="readonly-row"><span>Aantal niveaus</span><strong>3</strong></div>
<div class="readonly-row"><span>Actieve categorieën</span><strong>7</strong></div>
<div class="readonly-row"><span>Actieve oefeningen</span><strong>18</strong></div>
<div class="readonly-row"><span>Collaborators</span><strong>2</strong></div>
<div class="readonly-row"><span>Leerlingen met toegang</span><strong>26</strong></div>
<div class="readonly-row"><span></span><strong></strong></div>
</div>
<div class="quick-history">
<h3>Recente wijzigingen (laatste 30 dagen)</h3>
<div class="history-mini-item"><strong>Categorie “Breuken” toegevoegd aan niveau Groep 7</strong><span>03-04-2026 · Tom van Dijk</span></div>
<div class="history-mini-item"><strong>Oefening “Breuken sprint” in onderhoud gezet</strong><span>01-04-2026 · Tom van Dijk</span></div>
<div class="history-mini-item"><strong>Leerlingtoegang aangepast voor niveau Groep 6</strong><span>29-03-2026 · Tom van Dijk</span></div>
</div>
<div class="actions-row"><button class="btn btn-primary" id="openSupportBtn">Ondersteun docent</button></div>
</aside>
</section>
<section class="manage-stage" id="supportStage">
<div class="manage-head">
<h2 class="manage-title">Docent ondersteuning - Tom van Dijk</h2>
<button class="btn btn-danger" id="closeSupportBtn">Terug naar overzicht</button>
</div>
<div class="tabs-card">
<div class="tab-row">
<button class="tab-btn active" data-tab="intro">Intro / uitleg</button>
<button class="tab-btn" data-tab="structuur">Structuur</button>
<button class="tab-btn" data-tab="leerlingtoegang">Leerlingtoegang</button>
<button class="tab-btn" data-tab="collaborators">Collaborators</button>
<button class="tab-btn" data-tab="eigenaar">Eigenaar</button>
<button class="tab-btn" data-tab="geschiedenis">Geschiedenis</button>
</div>
<section class="tab-pane active" id="tab-intro">
<div class="tab-layout">
<article class="intro-box">
<h3 class="card-title">Wat kun je hier doen?</h3>
<p class="card-copy">Deze ondersteuningsweergave volgt de docentcontext. Je bekijkt en onderzoekt de structuur zoals de docent die ook beleeft: per niveau met onderliggende categorieën en concrete oefeningen. Vanuit deze pagina kun je snel zien waar een oefening hangt, welke leerlingen toegang hebben, wie als collaborator meewerkt en welke recente wijzigingen er zijn gedaan.</p>
<div class="intro-summary-grid">
<div class="summary-box"><strong>3 actieve niveaus</strong><span>De geselecteerde docent heeft momenteel drie niveaus in eigendom.</span></div>
<div class="summary-box"><strong>18 concrete oefeningen</strong><span>Actieve en in onderhoud staande oefeningen binnen alle niveaus samen.</span></div>
<div class="summary-box"><strong>2 collaborators</strong><span>Twee docenten werken actief mee op één of meerdere niveaus.</span></div>
<div class="summary-box"><strong>26 leerlingen met toegang</strong><span>Leerlingen met actieve niveautoegang binnen deze docentstructuur.</span></div>
<div class="summary-box full"><strong>Laatst gewijzigd</strong><span>03-04-2026 · Tom van Dijk</span></div>
</div>
</article>
<aside class="detail-card">
<h3 class="card-title">Ondersteuningsfocus</h3>
<p>Kies in <strong>Structuur</strong> een niveau, categorie of oefening om de context te onderzoeken. Klik je op een oefening, dan zie je rechts direct de concrete details van die oefening binnen de docentstructuur. Voor leerlingrelaties blijft een doorklik naar Accounts › Relatiebeheer mogelijk.</p>
<div class="note-box">Deze pagina is bedoeld voor inzien, troubleshooten en ondersteunen. Centrale categorie- en moduleacties blijven beschikbaar via de aparte beheerpagina’s onder Content.</div>
</aside>
</div>
</section>
<section class="tab-pane" id="tab-structuur">
<div class="structure-layout">
<article class="structure-card">
<h3 class="card-title">Structuur van de docent</h3>
<p class="card-copy">Niveaus met daaronder de gebruikte categorieën en concrete oefeningen. Het zoekveld hieronder zoekt over de namen van niveau, categorie en oefening heen.</p>
<div class="structure-toolbar"><input class="search-input" type="text" value="breuk" aria-label="Zoek in structuur"/></div>
<div class="tree-list">
<div class="level-card">
<div class="level-head clickable" data-structure-type="level">
<div><strong>Groep 7</strong><span>Eigenaar · 3 categorieën · 8 oefeningen</span></div>
<div class="level-meta"><span class="tag blue">12 leerlingen</span><span class="tag green">1 collaborator</span></div>
</div>
<div class="category-list">
<div class="category-card">
<div class="category-head clickable" data-structure-type="category"><div><strong>Breuken</strong></div><div class="meta-row"><span class="tag green">3 oefeningen</span></div></div>
<div class="exercise-list">
<div class="exercise-item active clickable" data-structure-type="exercise">
<div><strong>Breuken sprint</strong><span>Module: Basisrekenen V2.3.1 · Status: Actief</span></div>
<button class="link-btn" type="button">Bekijk details</button>
</div>
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Breuken oefenen</strong><span>Module: Basisrekenen V2.3.1 · Status: In onderhoud</span></div><button class="link-btn" type="button">Bekijk details</button></div>
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Vergelijk breuken</strong><span>Module: Visuele breuken V1.9.0 · Status: Actief</span></div><button class="link-btn" type="button">Bekijk details</button></div>
</div>
</div>
<div class="category-card">
<div class="category-head clickable" data-structure-type="category"><div><strong>Rekenen algemeen</strong></div><div class="meta-row"><span class="tag green">2 oefeningen</span></div></div>
<div class="exercise-list">
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Tafels sprint</strong><span>Module: Tafels tempo V4.0.2 · Status: Actief</span></div><button class="link-btn" type="button">Bekijk details</button></div>
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Hoofdrekenen mix</strong><span>Module: Rekenmix V3.1.4 · Status: Actief</span></div><button class="link-btn" type="button">Bekijk details</button></div>
</div>
</div>
</div>
</div>
<div class="level-card">
<div class="level-head clickable" data-structure-type="level">
<div><strong>Groep 6</strong><span>Eigenaar · 2 categorieën · 6 oefeningen</span></div>
<div class="level-meta"><span class="tag blue">9 leerlingen</span><span class="tag grey">0 collaborator</span></div>
</div>
<div class="category-list">
<div class="category-card">
<div class="category-head clickable" data-structure-type="category"><div><strong>Breuken</strong></div><div class="meta-row"><span class="tag green">2 oefeningen</span></div></div>
<div class="exercise-list">
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Breuken basis</strong><span>Module: Visuele breuken V1.9.0 · Status: Actief</span></div><button class="link-btn" type="button">Bekijk details</button></div>
<div class="exercise-item clickable" data-structure-type="exercise"><div><strong>Breuk op getallenlijn</strong><span>Module: Visuele breuken V1.9.0 · Status: Actief</span></div><button class="link-btn" type="button">Bekijk details</button></div>
</div>
</div>
</div>
</div>
</div>
</article>
<aside class="exercise-card">
<div id="structureLevelPane" class="structure-pane">
<h3 class="card-title">Geselecteerd niveau</h3>
<p class="card-copy">Ondersteuningscontext van het geselecteerde niveau binnen deze docentstructuur.</p>
<div class="exercise-state">
<strong>Groep 7</strong>
<span>Huidige eigenaar: Eva Bos</span>
<span style="display:block;margin-top:4px;color:#6988ad;font-size:13px;">3 categorieën · 8 oefeningen · 12 leerlingen met toegang</span>
</div>
<div class="two-col-meta">
<div class="summary-box"><strong>Open</strong><span>Zichtbaarheid van dit niveau</span></div>
<div class="summary-box"><strong>1 collaborator</strong><span>Actief gekoppeld op dit niveau</span></div>
</div>
<div class="meta-card-list">
<div class="meta-card"><strong>Laatst gewijzigd</strong><span>03-04-2026 · Tom van Dijk</span></div>
<div class="meta-card"><strong>Ondersteuning</strong><span>Gebruik de tabs Leerlingtoegang, Collaborators en Eigenaar voor niveaugebonden acties.</span></div>
</div>
</div>
<div id="structureCategoryPane" class="structure-pane">
<h3 class="card-title">Geselecteerde categorie</h3>
<p class="card-copy">Readonly ondersteuningsdetail van de categorie binnen de docentstructuur.</p>
<div class="exercise-state">
<strong>Breuken</strong>
<span>Niveau: Groep 7</span>
<span style="display:block;margin-top:4px;color:#6988ad;font-size:13px;">3 oefeningen binnen dit niveau · centrale categorie actief</span>
</div>
<div class="two-col-meta">
<div class="summary-box"><strong>Zichtbaar</strong><span>Voor leerlingen via actieve oefeningen</span></div>
<div class="summary-box"><strong>3 oefeningen</strong><span>Gekoppeld in dit niveau</span></div>
</div>
<div class="meta-card-list">
<div class="meta-card"><strong>Centrale categorie</strong><span>Breuken · icoon en kleur worden centraal beheerd</span></div>
<div class="meta-card"><strong>Doorklik</strong><span>Gebruik Categorieën beheren voor centrale wijzigingen of migraties.</span></div>
</div>
</div>
<div id="structureExercisePane" class="structure-pane active">
<h3 class="card-title">Geselecteerde oefening</h3>
<p class="card-copy">Concrete detailcontext van de geselecteerde oefening binnen deze docentstructuur.</p>
<div class="exercise-state">
<strong>Breuken sprint</strong>
<span>Niveau: Groep 7</span>
<span style="display:block;margin-top:4px;color:#6988ad;font-size:13px;">Categorie: Breuken · Module: Basisrekenen V2.3.1</span>
</div>
<div class="two-col-meta">
<div class="summary-box"><strong>Actief</strong><span>Status van deze concrete oefening</span></div>
<div class="summary-box"><strong>12 leerlingen</strong><span>Hebben toegang via niveau Groep 7</span></div>
</div>
<div class="meta-card-list">
<div class="meta-card"><strong>Laatst gewijzigd</strong><span>02-04-2026 · Tom van Dijk</span></div>
<div class="meta-card"><strong>Gebruik</strong><span>4 onafgemaakte runs · 31 afgeronde runs</span></div>
</div>
<div class="config-card">
<div class="cta-row"><button class="btn btn-primary" id="openExerciseConfigModalBtn">Open oefeningconfiguratie</button></div>
</div>
</div>
</aside>
</div>
</section>
<section class="tab-pane" id="tab-leerlingtoegang">
<div class="two-panel-layout">
<article class="level-list-panel">
<h3 class="card-title">Kies een niveau</h3>
<p class="card-copy">Selecteer eerst een niveau. Daarna zie je rechts alle gekoppelde leerlingen van dat niveau en kun je gericht ontkoppelen of een leerling toevoegen.</p>
<div class="select-list">
<div class="select-item active"><strong>Groep 7</strong><span>12 gekoppelde leerlingen</span></div>
<div class="select-item"><strong>Groep 6</strong><span>9 gekoppelde leerlingen</span></div>
<div class="select-item"><strong>Rekentest 2026</strong><span>5 gekoppelde leerlingen</span></div>
</div>
</article>
<aside class="level-detail-panel">
<div class="support-head">
<div>
<h3 class="card-title">Geselecteerd niveau - Groep 7</h3>
<p class="card-copy">Alle gekoppelde leerlingen van dit niveau. Vanuit hier kun je bestaande toegang intrekken of een nieuwe leerling toevoegen aan dit niveau.</p>
</div>
<span class="support-tag blue">12 actieve leerlingen</span>
</div>
<div class="support-table-wrap">
<div class="support-scroll">
<table class="support-table">
<thead><tr><th>Leerling</th><th>Relatie</th><th>Niveautoegang</th><th>Actie</th></tr></thead>
<tbody>
<tr><td>Lars Meijer</td><td>Docent-leerling · sinds 12-02-2026</td><td>Actief</td><td><a href="#">Ontkoppel</a></td></tr>
<tr><td>Sophie Janssen</td><td>Docent-leerling · sinds 08-01-2026</td><td>Actief</td><td><a href="#">Ontkoppel</a></td></tr>
<tr><td>Noah Vermeer</td><td>Docent-leerling · sinds 04-03-2026</td><td>Actief</td><td><a href="#">Ontkoppel</a></td></tr>
<tr><td>Julia van Loon</td><td>Docent-leerling · sinds 21-03-2026</td><td>Actief</td><td><a href="#">Ontkoppel</a></td></tr>
<tr><td>Milan Vos</td><td>Docent-leerling · sinds 19-01-2026</td><td>Actief</td><td><a href="#">Ontkoppel</a></td></tr>
</tbody>
</table>
</div>
</div>
<div class="section-actions"><button class="btn btn-secondary" id="openStudentModalBtn">Leerling toevoegen aan niveau</button></div>
</aside>
</div>
</section>
<section class="tab-pane" id="tab-collaborators">
<div class="two-panel-layout">
<article class="level-list-panel">
<h3 class="card-title">Kies een niveau</h3>
<p class="card-copy">Collaborators worden per niveau beheerd. Selecteer een niveau om rechts de actieve collaborators te zien en te beheren.</p>
<div class="select-list">
<div class="select-item active"><strong>Groep 7</strong><span>Eigenaar: Tom van Dijk · 1 collaborator</span></div>
<div class="select-item"><strong>Groep 6</strong><span>Eigenaar: Tom van Dijk · 0 collaborators</span></div>
<div class="select-item"><strong>Rekentest 2026</strong><span>Eigenaar: Tom van Dijk · 1 collaborator</span></div>
</div>
</article>
<aside class="level-detail-panel">
<h3 class="card-title">Collaborators voor Groep 7</h3>
<p class="card-copy">Beheer per niveau welke docenten al collaborator zijn en welke docenten via een bestaande docent-docentrelatie toegevoegd kunnen worden. Forceren van een compleet nieuwe docent is alleen mogelijk wanneer de huidige docent eigenaar van dit niveau is.</p>
<div class="support-table-wrap">
<div class="support-scroll">
<table class="support-table">
<thead><tr><th>Docent</th><th>Status</th><th>Actie</th></tr></thead>
<tbody>
<tr class="force-linked"><td>Eva Bos · sinds 14-02-2026</td><td>Actieve collaborators</td><td><a href="#">Verwijder</a></td></tr>
<tr class="table-row-available"><td>Mark Peters · sinds 28-03-2026</td><td>Beschikbaar via docent-docentrelatie</td><td><a href="#">Voeg toe</a></td></tr>
<tr class="table-row-available"><td>Noëlle Janssen · sinds 11-01-2026</td><td>Beschikbaar via docent-docentrelatie</td><td><a href="#">Voeg toe</a></td></tr>
<tr class="table-row-available"><td>Daan Kuiper · sinds 07-09-2025</td><td>Beschikbaar via docent-docentrelatie</td><td><a href="#">Voeg toe</a></td></tr>
</tbody>
</table>
</div>
</div>
<div class="section-actions"><button class="btn btn-primary" id="openForceContributorBtn">Forceer toegang nieuwe docent</button></div>
</aside>
</div>
</section>
<section class="tab-pane" id="tab-eigenaar">
<div class="two-panel-layout">
<article class="level-list-panel">
<h3 class="card-title">Niveaus in eigendom</h3>
<p class="card-copy">Selecteer een niveau waarvan deze docent eigenaar is. Rechts kun je het eigenaarschap overzetten naar één van de bestaande collaborators van dat niveau.</p>
<div class="select-list">
<div class="select-item active"><strong>Groep 7</strong><span>Eigenaar sinds 05-09-2025 · 1 collaborator</span></div>
<div class="select-item"><strong>Groep 6</strong><span>Eigenaar sinds 05-09-2025 · 0 collaborators</span></div>
<div class="select-item"><strong>Rekentest 2026</strong><span>Eigenaar sinds 14-01-2026 · 1 collaborator</span></div>
</div>
</article>
<aside class="level-detail-panel">
<h3 class="card-title">Eigenaarschap overzetten - Groep 7</h3>
<p class="card-copy">Na eigendomsoverdracht wordt de nieuwe docent eigenaar van het niveau en blijft de oude eigenaar standaard als collaborator gekoppeld.</p>
<div class="owner-current"><strong>Huidige eigenaar:</strong><span>Tom van Dijk</span></div>
<div class="support-table-wrap">
<div class="support-scroll">
<table class="support-table">
<thead><tr><th>Collaborator</th><th>Status</th><th>Actie</th></tr></thead>
<tbody>
<tr class="owner-candidate"><td>Eva Bos · sinds 14-02-2026</td><td>Actieve collaborator</td><td><a href="#">Maak eigenaar</a></td></tr>
<tr class="owner-candidate"><td>Mark Peters · sinds 28-03-2026</td><td>Actieve collaborator</td><td><a href="#">Maak eigenaar</a></td></tr>
</tbody>
</table>
</div>
</div>
</aside>
</div>
</section>
<section class="tab-pane" id="tab-geschiedenis">
<article class="history-card">
<h3 class="card-title">Geschiedenis van deze docentcontext</h3>
<p class="card-copy">Samengevoegde ondersteuningshistorie van wijzigingen aan niveaus, categoriekoppelingen, oefeningen, leerlingtoegang en collaborators.</p>
<div class="history-scroll">
<table class="history-table">
<thead>
<tr><th>Datum</th><th>Onderdeel</th><th>Actie</th><th>Uitgevoerd door</th></tr>
</thead>
<tbody>
<tr><td>03-04-2026 14:12</td><td>Groep 7 › Breuken</td><td>Oefening “Breuken sprint” bijgewerkt</td><td>Tom van Dijk</td></tr>
<tr><td>03-04-2026 09:31</td><td>Groep 7</td><td>Categorie “Breuken” gekoppeld</td><td>Tom van Dijk</td></tr>
<tr><td>01-04-2026 16:04</td><td>Groep 6</td><td>Leerlingtoegang gewijzigd</td><td>Tom van Dijk</td></tr>
<tr><td>28-03-2026 11:40</td><td>Rekentest 2026</td><td>Collaborator toegevoegd</td><td>Tom van Dijk</td></tr>
<tr><td>21-03-2026 08:58</td><td>Groep 7 › Rekenen algemeen</td><td>Oefening “Tafels sprint” in onderhoud gezet</td><td>Tom van Dijk</td></tr>
</tbody>
</table>
</div>
</article>
</section>
</div>
</section>
</div>
</main>
<div class="modal-overlay" id="studentAccessModal">
<div class="modal-card">
<div class="modal-head"><h3>Leerling toevoegen aan niveau</h3><button class="modal-close" data-close-modal="studentAccessModal">×</button></div>
<div class="modal-body">
<p>Selecteer één leerling met een bestaande docent-leerlingrelatie tot Tom van Dijk die nog geen toegang heeft tot <strong>Groep 7</strong>. Geef ook een reden op voor deze beheeractie.</p>
<div class="field" style="margin-top:14px;"><label>Kies leerling</label><select class="mini-select" style="width:100%; min-width:0;"><option>Lotte Smit</option><option>Finn de Jong</option><option>Emma Kok</option></select></div>
<div class="field" style="margin-top:14px;"><label>Reden van toevoegen</label><textarea class="text-input" style="min-height:120px;">Ondersteuningsactie door beheer na controle van bestaande docent-leerlingrelatie.</textarea></div>
</div>
<div class="modal-actions"><button class="btn btn-ghost" data-close-modal="studentAccessModal">Annuleren</button><button class="btn btn-primary">Voeg leerling toe</button></div>
</div>
</div>
<div class="modal-overlay" id="forceContributorModal">
<div class="modal-card">
<div class="modal-head"><h3>Forceer toegang nieuwe docent</h3><button class="modal-close" data-close-modal="forceContributorModal">×</button></div>
<div class="modal-body">
<p class="muted-warning">Waarschuwing: je forceert direct een docent-docentrelatie en maakt de gekozen docent meteen collaborator op dit niveau. De nieuwe docent hoeft dit niet eerst goed te keuren.</p>
<p>Na uitvoeren ontvangt de huidige geselecteerde docent hierover een systeembericht.</p>
<div class="modal-two-col" style="margin-top:14px;">
<div class="modal-panel">
<div class="field"><label>Zoek docent</label><input class="text-input" type="text" value="an"/></div>
<div class="select-list">
<div class="select-item active"><strong>Anouk de Vries</strong><span>Docent · Nog geen docent-docentrelatie</span></div>
<div class="select-item"><strong>Sanne Visser</strong><span>Docent · Nog geen docent-docentrelatie</span></div>
<div class="select-item"><strong>Anna de Groot</strong><span>Docent · Nog geen docent-docentrelatie</span></div>
</div>
</div>
<div class="modal-panel">
<div class="field"><label>Reden</label><textarea class="text-input" style="min-height:260px;">Ondersteuningsactie door beheer. Nieuwe docent krijgt direct collaborator-toegang op dit niveau.</textarea></div>
</div>
</div>
</div>
<div class="modal-actions"><button class="btn btn-ghost" data-close-modal="forceContributorModal">Annuleren</button><button class="btn btn-primary">Maak collaborator</button></div>
</div>
</div>
<div class="modal-overlay" id="exerciseConfigModal">
<div class="modal-card config-modal">
<div class="modal-head"><h3>Module configureren</h3><button class="modal-close" data-close-modal="exerciseConfigModal">×</button></div>
<div class="modal-body">
<p class="card-copy">Ondersteuningsweergave van de concrete docent-oefening <strong>Breuken sprint</strong> binnen <strong>Groep 7 › Breuken</strong>.</p>
<div class="accordion-list">
<div class="generic-block">
<div class="section-title" style="margin-bottom:10px;"><h2 style="font-size:22px;">Algemene oefeninggegevens</h2></div>
<div class="form-grid">
<div class="field">
<label>Geef de naam op voor deze oefening</label>
<input type="text" value="Optellen en aftrekken t/m 20">
</div>
<div class="field">
<label>Selecteer een icoontje voor deze oefening</label>
<div class="icon-pick">
<div class="icon">➕</div>
<div class="icon active">🧮</div>
<div class="icon">✏️</div>
<div class="icon">🔢</div>
<div class="icon">📘</div>
</div>
</div>
<div class="field">
<label>Wat gaat de oefening inhouden?</label>
<select>
<option>Allebei</option>
<option>Alleen optellen</option>
<option>Alleen aftrekken</option>
</select>
</div>
</div>
<div class="intro-helper">
<div class="intro-helper-label">Getallen posities gedefinieerd</div>
<div class="intro-helper-text">In de instellingen wordt verwezen naar “getal 1” en “getal 2”, hier laten we zien waar welk getal in de som komt te staan.</div>
<div class="intro-helper-formula"><getal 1> + <getal 2> of <getal 1> - <getal 2></div>
</div>
</div>
<details class="config-section" open="">
<summary><span>Optellen configureren</span><span class="summary-arrow">›</span></summary>
<div class="config-content">
<div class="subcard">
<h5>Getal 1 configureren</h5>
<div class="choice-row align-right-first">
<label><input type="radio" name="add_num1_mode" checked=""> Stel een min/max in</label>
<label class="right-choice"><input type="radio" name="add_num1_mode"> Exacte getallen gebruiken</label>
</div>
<div class="split-config">
<div class="stack">
<div class="field"><label>Wat is de minimale waarde van het eerste getal?</label><input type="number" value="1"></div>
<div class="field"><label>Wat is de maximale waarde van het eerste getal?</label><input type="number" value="20"></div>
</div>
<div class="split-divider"></div>
<div class="disabled-look">
<div class="helper">Selecteer de specifieke getallen die gebruikt mogen worden.</div>
<div class="tag-selector">
<span class="number-tag">1</span><span class="number-tag">2</span><span class="number-tag">3</span><span class="number-tag">4</span><span class="number-tag">5</span>
<span class="number-tag active">6</span><span class="number-tag">7</span><span class="number-tag">8</span><span class="number-tag">9</span><span class="number-tag">10</span>
<span class="number-tag">11</span><span class="number-tag">12</span><span class="number-tag">13</span><span class="number-tag">14</span><span class="number-tag">15</span>
<span class="number-tag">16</span><span class="number-tag">17</span><span class="number-tag">18</span><span class="number-tag">19</span><span class="number-tag">20</span>
</div>
</div>
</div>
</div>
<div class="subcard" style="margin-top:14px;">
<h5>Getal 2 configureren</h5>
<div class="choice-row align-right-first">
<label><input type="radio" name="add_num2_mode"> Stel een min/max in</label>
<label class="right-choice"><input type="radio" name="add_num2_mode" checked=""> Exacte getallen gebruiken</label>
</div>
<div class="split-config">
<div class="stack disabled-look">
<div class="field"><label>Wat is de minimale waarde van het tweede getal?</label><input type="number" value="1"></div>
<div class="field"><label>Wat is de maximale waarde van het tweede getal?</label><input type="number" value="20"></div>
</div>
<div class="split-divider"></div>
<div>
<div class="helper">Selecteer de specifieke getallen die gebruikt mogen worden.</div>
<div class="tag-selector">
<span class="number-tag active">1</span><span class="number-tag active">2</span><span class="number-tag">3</span><span class="number-tag active">4</span><span class="number-tag">5</span>
<span class="number-tag active">6</span><span class="number-tag">7</span><span class="number-tag active">8</span><span class="number-tag">9</span><span class="number-tag">10</span>
<span class="number-tag">11</span><span class="number-tag">12</span><span class="number-tag">13</span><span class="number-tag">14</span><span class="number-tag">15</span>
<span class="number-tag">16</span><span class="number-tag">17</span><span class="number-tag">18</span><span class="number-tag">19</span><span class="number-tag">20</span>
</div>
</div>
</div>
</div>
<div class="subcard" style="margin-top:14px;">
<h5>Uitkomst configureren</h5>
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="field"><label>Wat is de minimale waarde van het antwoord?</label><input type="number" value="2"></div>
<div class="field"><label>Wat is de maximale waarde van het antwoord?</label><input type="number" value="40"></div>
</div>
</div>
</div>
</details>
<details class="config-section" open="">
<summary><span>Aftrekken configureren</span><span class="summary-arrow">›</span></summary>
<div class="config-content">
<div class="subcard">
<h5>Getal 1 configureren</h5>
<div class="choice-row align-right-first">
<label><input type="radio" name="sub_num1_mode" checked=""> Stel een min/max in</label>
<label class="right-choice"><input type="radio" name="sub_num1_mode"> Exacte getallen gebruiken</label>
</div>
<div class="split-config">
<div class="stack">
<div class="field"><label>Wat is de minimale waarde van het eerste getal?</label><input type="number" value="5"></div>
<div class="field"><label>Wat is de maximale waarde van het eerste getal?</label><input type="number" value="20"></div>
</div>
<div class="split-divider"></div>
<div class="disabled-look">
<div class="helper">Selecteer de specifieke getallen die gebruikt mogen worden.</div>
<div class="tag-selector">
<span class="number-tag">1</span><span class="number-tag">2</span><span class="number-tag">3</span><span class="number-tag">4</span><span class="number-tag">5</span>
<span class="number-tag">6</span><span class="number-tag">7</span><span class="number-tag">8</span><span class="number-tag">9</span><span class="number-tag">10</span>
<span class="number-tag">11</span><span class="number-tag">12</span><span class="number-tag">13</span><span class="number-tag">14</span><span class="number-tag">15</span>
<span class="number-tag">16</span><span class="number-tag">17</span><span class="number-tag">18</span><span class="number-tag">19</span><span class="number-tag">20</span>
</div>
</div>
</div>
</div>
<div class="subcard" style="margin-top:14px;">
<h5>Getal 2 configureren</h5>
<div class="choice-row align-right-first">
<label><input type="radio" name="sub_num2_mode" checked=""> Stel een min/max in</label>
<label class="right-choice"><input type="radio" name="sub_num2_mode"> Exacte getallen gebruiken</label>
</div>
<div class="split-config">
<div class="stack">
<div class="field"><label>Wat is de minimale waarde van het tweede getal?</label><input type="number" value="1"></div>
<div class="field"><label>Wat is de maximale waarde van het tweede getal?</label><input type="number" value="15"></div>
</div>
<div class="split-divider"></div>
<div class="disabled-look">
<div class="helper">Selecteer de specifieke getallen die gebruikt mogen worden.</div>
<div class="tag-selector">
<span class="number-tag">1</span><span class="number-tag">2</span><span class="number-tag">3</span><span class="number-tag">4</span><span class="number-tag">5</span>
<span class="number-tag">6</span><span class="number-tag">7</span><span class="number-tag">8</span><span class="number-tag">9</span><span class="number-tag">10</span>
<span class="number-tag">11</span><span class="number-tag">12</span><span class="number-tag">13</span><span class="number-tag">14</span><span class="number-tag">15</span>
<span class="number-tag">16</span><span class="number-tag">17</span><span class="number-tag">18</span><span class="number-tag">19</span><span class="number-tag">20</span>
</div>
</div>
</div>
</div>
<div class="subcard" style="margin-top:14px;">
<h5>Uitkomst configureren</h5>
<div class="warning" style="margin-bottom:14px;">Vul als minimale waarde tenminste 0 in zodat je voorkomt dat er een som met negatieve uitkomst gegenereerd wordt.</div>
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="field"><label>Wat is de minimale waarde van het antwoord?</label><input type="number" value="0"></div>
<div class="field"><label>Wat is de maximale waarde van het antwoord?</label><input type="number" value="20"></div>
</div>
</div>
</div>
</details>
<details class="config-section" open="">
<summary><span>Optellen en Aftrekken balans configureren</span><span class="summary-arrow">›</span></summary>
<div class="config-content">
<div class="settings-grid disabled-section">
<div class="setting-card">
<h6>Hoeveel procent optel sommen?</h6>
<div class="range-row">
<input id="addBalanceRange" type="range" min="10" max="50" step="5" value="40">
<div id="addBalanceValue" class="range-value">40%</div>
</div>
</div>
<div class="setting-card">
<h6>Hoeveel procent aftrek sommen?</h6>
<div class="range-row">
<input id="subBalanceRange" type="range" min="10" max="50" step="5" value="40">
<div id="subBalanceValue" class="range-value">40%</div>
</div>
</div>
<div class="setting-card full">
<div class="helper-box">De percentages worden gebruikt op het moment dat de vragen gegenereert worden om te kijken dat tenminste een bepaalde hoeveel vragen van een bepaald type zijn. Het restant aan vragen zal random opgegevuld worden. Je kunt nooit meer dan 50% van een bepaald type opgeven. Dus als je 50% voor de ene instelt en 10% voor de andere, heb je 40% onvoorspelbare/random opvulling.</div>
</div>
</div>
</div>
</details>
<details class="config-section" open="">
<summary><span>Oefening instellingen</span><span class="summary-arrow">›</span></summary>
<div class="config-content">
<div class="settings-grid">
<div class="setting-card">
<h6>Voorkom te veel sommen met “1 + x” of “y + 1”</h6>
<div class="radio-row"><label><input type="radio" name="limit_one_bias"> Ja</label><label><input type="radio" name="limit_one_bias" checked=""> Nee</label></div>
<p>Er is niet te voorspellen wat er “random” gegenereerd wordt. Als je hier voor ja kiest, zijn er maximaal 2 sommen waar of getal 1 of getal 2 een “1” bevat.</p>
</div>
<div class="setting-card">
<h6>Voorkom te veel sommen met hele tientallen</h6>
<div class="radio-row"><label><input type="radio" name="limit_tens_bias"> Ja</label><label><input type="radio" name="limit_tens_bias" checked=""> Nee</label></div>
<p>Er is niet te voorspellen wat er “random” gegenereerd wordt. Als je hier voor ja kiest, zijn er maximaal 4 sommen waar of getal 1 of getal 2 een heel tiental bevat.</p>
</div>
<div class="setting-card">
<h6>De standaard waarde voor het aantal oefeningen</h6>
<input type="number" value="15">
<p>Als een leerling een oefening wil starten kan het aantal te genereren sommen opgegeven worden. Deze waarde wordt daar gebruikt, maar een leerling kan dit altijd aanpassen.</p>
</div>
<div class="setting-card">
<h6>De minimale waarde voor het aantal oefeningen</h6>
<input type="number" value="10">
<p>Om te voorkomen dat leerlingen grappig zijn en maar 1 som in een oefening laten genereren, kun je als docent forceren hoeveel het er minimaal moeten zijn.</p>
</div>
<div class="setting-card">
<h6>De maximale waarde voor het aantal oefeningen</h6>
<input type="number" value="40">
<p>Soms moeten mensen beschermd worden tegen zichzelf, het systeemlimiet is 100.</p>
</div>
<div class="setting-card">
<h6>Is de “Geen idee” knop beschikbaar?</h6>
<div class="radio-row"><label><input type="radio" name="allow_dunno"> Ja</label><label><input type="radio" name="allow_dunno" checked=""> Nee</label></div>
<p>Je geeft hiermee de leerling een knop onder elke vraag om aan te geven dat ze het niet weten. De vraag wordt wel als fout gerekend, maar achteraf in de resultaten is dit wel gemarkeerd om hier naar te kunnen kijken.</p>
</div>
<div class="setting-card full">
<h6>Toon antwoord direct na vraag?</h6>
<div class="radio-row"><label><input type="radio" name="show_answer_after_submit"> Ja</label><label><input type="radio" name="show_answer_after_submit" checked=""> Nee</label></div>
<p>In het geval van nee, ziet een leerling pas aan het einde het resultaat. Als je voor ja kiest wordt na het geven van een antwoord zichtbaar gemaakt of deze goed of fout was, voordat ze verder gaan naar de volgende vraag.</p>
</div>
</div>
</div>
</details>
</div>
</div>
<div class="modal-actions"><button class="btn btn-ghost" data-close-modal="exerciseConfigModal">Sluit</button><button class="btn btn-primary">Opslaan</button></div>
</div>
</div></div>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col"><h4>OefenHub beheer</h4><p>Ondersteuningsomgeving voor beheerders. Controleer docentstructuren, onderzoek niveau-inhoud en begeleid vragen over toegang, samenwerking en concrete oefeningen.</p></div>
<div class="footer-col"><h4>Snel naar</h4><div class="footer-links"><a href="#">Site instellingen</a><a href="#">Content</a><a href="#">Accounts</a></div></div>
<div class="footer-col"><h4>Ondersteuning</h4><div class="footer-links"><a href="#">Documentatie</a><a href="#">Openstaande meldingen</a><a href="#">Contact beheerteam</a></div></div>
</div>
<div class="footer-bottom">© 2026 OefenHub · Beheeromgeving</div>
</footer>
<script>
const openBtn = document.getElementById('openSupportBtn');
const closeBtn = document.getElementById('closeSupportBtn');
const stage = document.getElementById('supportStage');
const selectionStage = document.getElementById('selectionStage');
openBtn?.addEventListener('click', () => { stage.classList.add('open'); selectionStage?.classList.add('hidden'); });
closeBtn?.addEventListener('click', () => { stage.classList.remove('open'); selectionStage?.classList.remove('hidden'); });
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
const key = btn.dataset.tab;
document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b === btn));
document.querySelectorAll('.tab-pane').forEach(p => p.classList.toggle('active', p.id === 'tab-' + key));
});
});
const openModal = id => document.getElementById(id)?.classList.add('open');
const closeModal = id => document.getElementById(id)?.classList.remove('open');
document.getElementById('openStudentModalBtn')?.addEventListener('click', () => openModal('studentAccessModal'));
document.getElementById('openForceContributorBtn')?.addEventListener('click', () => openModal('forceContributorModal'));
document.getElementById('openExerciseConfigModalBtn')?.addEventListener('click', () => openModal('exerciseConfigModal'));
document.querySelectorAll('[data-close-modal]').forEach(btn => btn.addEventListener('click', () => closeModal(btn.dataset.closeModal)));
document.querySelectorAll('.accordion-head').forEach(btn => {
btn.addEventListener('click', () => {
const body = btn.nextElementSibling;
const open = body.style.display !== 'none';
body.style.display = open ? 'none' : 'block';
btn.querySelector('span:last-child').textContent = open ? '▸' : '▾';
});
});
document.querySelectorAll('.modal-overlay').forEach(overlay => overlay.addEventListener('click', e => { if (e.target === overlay) overlay.classList.remove('open'); }));
function setStructurePane(type){
['level','category','exercise'].forEach(function(key){
var pane=document.getElementById('structure'+key.charAt(0).toUpperCase()+key.slice(1)+'Pane');
if(pane){ pane.classList.toggle('active', key===type); }
});
}
document.querySelectorAll('[data-structure-type]').forEach(function(el){
el.addEventListener('click', function(){ setStructurePane(this.getAttribute('data-structure-type')); });
});
function activateSupportTab(tabId){
document.querySelectorAll('.tab-btn').forEach(function(btn){ btn.classList.remove('active'); });
document.querySelectorAll('.tab-pane').forEach(function(pane){ pane.classList.remove('active'); });
var pane=document.getElementById(tabId); if(pane){ pane.classList.add('active'); }
var btn=document.querySelector('[data-tab-target="'+tabId+'"]'); if(btn){ btn.classList.add('active'); }
}
</script>
</body>
</html>