oefenhub_docent_05_bekijk_geschiedenis_v1_13.html
Korte beschrijving
Mockup van de geschiedenispagina waarin de docent oefenresultaten en afgeronde runs binnen de eigen docentcontext kan bekijken.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/docent/oefenhub_docent_05_bekijk_geschiedenis_v1_13.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Docent Voortgang van leerling bekijken</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);
--shadow-soft:0 8px 18px rgba(35,100,177,.08);
--shadow:0 12px 28px rgba(35,100,177,.12);
}
*{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,.footer-wrap{width:min(1220px,calc(100% - 48px));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: 1;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
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: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-item { position: relative; display: inline-flex; align-items: center; }
.pill {
border: 0;
border-radius: 12px;
padding: 9px 14px;
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: var(--shadow-soft);
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.purple { background: linear-gradient(180deg, #BF67DF, #863DBA); }
.pill.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 306px;
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);
filter: drop-shadow(0 -1px 0 rgba(170, 204, 238, .45));
}
.dropdown-menu.align-right { left: auto; right: 0; width: 306px; }
.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 auto;
align-items: center;
gap: 9px;
padding: 8px 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);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover,
.menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-link:hover { transform: translateX(2px); }
.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.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-arrow { color: #18518f; font-size: 22px; line-height: 1; font-weight: 700; }
.menu-link.no-arrow { grid-template-columns: auto 1fr; }
.menu-link.no-arrow .menu-arrow { display: none; }
.pill-icon { font-size: 14px; line-height: 1; }
.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;
}
.mail-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.wrap { padding: 22px 0 0; }
.page-shell{background:transparent;border-radius:0;box-shadow:none;overflow:visible;display:grid;gap:14px;padding:0}
.hero-card,.list-card{background:rgba(255,255,255,.90);border:1px solid rgba(170,204,238,.62);border-radius:28px;box-shadow:var(--shadow-soft)}
.hero-card{padding:18px 22px}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e9f4ff;color:#1d5a9c;font-weight:900;border-radius:999px;padding:6px 12px;font-size:13px}h1{margin:14px 0 10px;color:#1659a6;font-size:31px;line-height:1.1}.hero-card p{margin:0;color:#315d91;font-size:15px;line-height:1.55}.page-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0 2px;font-size:13px;font-weight:800;color:#5f7ea5}.page-breadcrumb a{color:#18518f;text-decoration:none}.page-breadcrumb a:hover{text-decoration:underline}.page-breadcrumb-sep{color:#88a7cb}.context-note{margin-top:6px;display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(47,136,234,.14);color:#1659a6;font-size:12px;font-weight:900}
.filters{margin-top:18px;display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:12px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;font-weight:800;color:#3a6695}.field input,.field select{width:100%;height:50px;border-radius:16px;border:1px solid rgba(17,79,149,.14);background:#fff;padding:0 16px;font-size:15px;color:var(--text)}
.list-card{margin-top:18px;padding:16px}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.card-title-row h2{margin:0;color:#1659a6;font-size:21px}.card-title-row p{margin:4px 0 0;color:#5f7ea5;font-size:14px;line-height:1.45}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;background:#eef6ff;color:#1659a6;font-weight:900}
.student-list{display:flex;flex-direction:column;gap:9px;max-height:620px;overflow:auto;padding-right:6px}.student-item{border:1px solid rgba(170,204,238,.62);background:#f9fcff;border-radius:18px;padding:12px 13px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.student-main{min-width:0}.student-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.student-name{font-size:16px;font-weight:900;color:#1659a6}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.online{background:#4fcb5f;box-shadow:0 0 0 3px rgba(79,203,95,.18)}.away{background:#ffb020;box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.student-meta{margin-top:4px;color:#5e7ca0;font-size:13px;line-height:1.4}
.student-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.action-btn{border:none;border-radius:14px;padding:10px 12px;font-weight:900;font-size:13px;cursor:pointer}.primary{background:linear-gradient(180deg,#1e82e4,#155daa);color:#fff}.secondary{background:#eef5ff;color:#1659a6}.disabled{background:#eef2f7;color:#97a8bd;cursor:not-allowed}
.site-footer{margin-top:26px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));border-top:1px solid rgba(170,204,238,.62);box-shadow:var(--shadow);border-radius:26px 26px 0 0;padding:22px 28px 0;overflow:visible}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:36px;align-items:start;padding:0}.footer-col h4{margin:0 0 12px;font-size:15px;color:#0d5db8;font-weight:900;padding-bottom:8px;border-bottom:1px solid rgba(170,204,238,.62)}.footer-col p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);font-weight:600}.footer-links{display:flex;flex-direction:column;gap:10px}.footer-links a{color:#18518f;text-decoration:none;font-size:13px;font-weight:700;transition:color .18s ease}.footer-links a:hover{color:var(--blue-4);text-decoration:underline}.footer-bottom{margin-top:18px;padding:14px 0 0;border-top:1px solid rgba(170,204,238,.62);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.hero-card{padding:16px 22px 18px;border-radius:26px;background:rgba(255,255,255,.94);border:1px solid rgba(170,204,238,.62);box-shadow:var(--shadow-soft)}
.hero-card .eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(51,123,205,.12);color:#1b63b2;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.hero-card h1{margin:10px 0 8px;font-size:24px;color:#1659a6}
.hero-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;font-weight:600}
.context-grid{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.card{padding:14px 16px;border-radius:24px;background:rgba(255,255,255,.94);border:1px solid rgba(170,204,238,.62);box-shadow:var(--shadow-soft)}
.card-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.card-title-row h2{margin:0;color:#1659a6;font-size:18px}
.card-title-row p{margin:4px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:6px 10px;border-radius:999px;background:rgba(47,136,234,.14);color:#1b63b2;font-size:12px;font-weight:900}
.student-summary{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffd04d,#f4ab08);color:#fff;font-weight:900;font-size:20px;box-shadow:var(--shadow-soft)}
.student-name{font-size:18px;font-weight:900;color:#1659a6}
.student-meta{font-size:13px;color:var(--muted);font-weight:600;line-height:1.5}.student-level{display:block}.student-context{display:inline-flex;align-items:center;margin-top:6px;padding:6px 10px;border-radius:999px;background:rgba(47,136,234,.14);color:#1659a6;font-size:12px;font-weight:900}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:0;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:900;line-height:1;cursor:pointer;box-shadow:var(--shadow-soft)}
.btn.blue{background:linear-gradient(180deg,#2f88ea,#176acc);color:#fff}.btn.orange{background:linear-gradient(180deg,#ffbb4d,#ff7f12);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{padding:12px 14px;border-radius:18px;background:rgba(245,250,255,.95);border:1px solid rgba(17,79,149,.08)}
.stat-label{font-size:12px;color:#6f89a9;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.stat-value{margin-top:6px;font-size:20px;color:#1659a6;font-weight:900;line-height:1}.stat-sub{margin-top:4px;font-size:12px;color:var(--muted);font-weight:600}
.filters{display:grid;grid-template-columns:1.2fr .9fr .9fr .9fr;gap:12px}.field label{display:block;margin:0 0 6px;font-size:12px;color:#5d7ea6;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select{width:100%;border:1px solid rgba(17,79,149,.16);background:#fff;border-radius:14px;padding:11px 12px;font:600 13px "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--text);outline:none}
.history-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.history-list{display:grid;gap:8px;max-height:430px;overflow:auto;padding-right:4px}
.history-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 13px;border-radius:18px;background:#fff;border:1px solid rgba(170,204,238,.62);box-shadow:0 4px 14px rgba(35,100,177,.05)}
.history-item-main{display:grid;gap:4px}.history-item-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.history-run{font-size:14px;font-weight:900;color:#1659a6}.history-pill{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(47,136,234,.12);color:#1b63b2;font-size:11px;font-weight:900}
.history-meta{font-size:12px;color:var(--muted);font-weight:600;line-height:1.45}.history-totals{display:flex;gap:8px;flex-wrap:wrap}
.mini{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:rgba(17,79,149,.06);font-size:11px;color:#285d96;font-weight:800}
.history-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px}.link-btn{border:0;background:transparent;color:#1b63b2;font-size:12px;font-weight:900;cursor:pointer;padding:0;text-align:right}
.detail-panel{display:grid;gap:12px}.detail-panel .card{display:flex;flex-direction:column;height:630px;min-height:630px;max-height:630px;overflow:hidden}.detail-panel .card .card-title-row{flex:0 0 auto}.detail-scroll{display:block;height:552px;min-height:552px;max-height:552px;overflow-y:scroll;overflow-x:hidden;padding-right:10px;flex:1 1 auto;min-width:0;min-height:0}.detail-scroll::-webkit-scrollbar{width:10px}.detail-scroll::-webkit-scrollbar-thumb{background:rgba(17,79,149,.18);border-radius:999px}.detail-box{padding:13px 14px;border-radius:18px;background:#fff;border:1px solid rgba(170,204,238,.62);margin-bottom:12px}.detail-box h3{margin:0 0 8px;font-size:15px;color:#1659a6}
.detail-box.collapsible{padding:0;overflow:hidden}
.collapse-head{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;font-size:15px;font-weight:900;color:#1659a6}
.collapse-head::-webkit-details-marker{display:none}.collapse-head::after{content:"▾";font-size:15px;color:#5d7ea6;transition:transform .18s ease}.detail-box.collapsible:not([open]) .collapse-head::after{transform:rotate(-90deg)}
.collapse-content{padding:0 14px 14px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.detail-row small{display:block;font-size:11px;color:#6f89a9;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.detail-row div{font-size:13px;color:var(--text);font-weight:700;line-height:1.45}
.question-table{display:block;height:350px !important;min-height:350px !important;max-height:350px !important;overflow-y:scroll;overflow-x:hidden;padding-right:4px}.question-table::-webkit-scrollbar{width:10px}.question-table::-webkit-scrollbar-thumb{background:rgba(17,79,149,.18);border-radius:999px}.question-head,.question-row{display:grid;grid-template-columns:46px 1.2fr 1fr 56px;gap:10px;align-items:center}
.question-head{padding:0 2px 4px;font-size:11px;color:#6f89a9;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.question-row{padding:8px 10px;border-radius:14px;background:rgba(245,250,255,.95);border:1px solid rgba(17,79,149,.07);font-size:12px;color:#285d96;font-weight:700}
.question-head .blank{text-indent:-9999px;overflow:hidden}
.result-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;font-size:14px;font-weight:900}
.result-icon.good{background:rgba(87,186,60,.14);color:#2c9348}.result-icon.bad{background:rgba(231,91,91,.14);color:#b74d4d}.result-icon.unknown{background:rgba(246,170,7,.18);color:#9a6a05}
.stats-grid.detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.outlier-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.outlier-box{padding:11px 12px;border-radius:16px;background:rgba(245,250,255,.95);border:1px solid rgba(17,79,149,.08);font-size:12px;color:#285d96;font-weight:700;line-height:1.45}.outlier-box strong{display:block;margin-bottom:4px;font-size:11px;color:#6f89a9;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:1080px){.context-grid,.history-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:1fr 1fr}.detail-grid,.stats-grid.detail-stats,.outlier-grid{grid-template-columns:1fr}}
@media (max-width:860px){.header-row{grid-template-columns:1fr}.brand{min-width:0}.nav-pills{justify-content:flex-start;overflow:auto;padding-bottom:4px}.header-actions{justify-content:flex-end}.filters{grid-template-columns:1fr}.student-summary{grid-template-columns:auto 1fr}.quick-actions{justify-content:flex-start}.question-head,.question-row{grid-template-columns:40px 1.1fr 1fr 48px}.footer-grid{grid-template-columns:1fr;gap:24px}}
@media (max-width:700px){.wrap,.footer-wrap{width:min(100%,calc(100% - 18px))}.site-footer .footer-wrap{padding:20px 18px 0}.footer-bottom{justify-content:flex-start}}
</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, Eva</div>
</div>
<div class="nav-pills teacher-nav">
<button class="pill purple long">🧩 Oefenaanbod</button>
<button class="pill blue long">👥 Leerlingen</button>
<button class="pill green long">🟢 Online</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="mail-badge">3</span></button>
<div class="nav-item profile-nav" data-menu="profielmenu">
<button class="profile-chip" type="button" aria-label="Gebruikersmenu" aria-haspopup="true" aria-expanded="false">
<span class="avatar">E</span>
</button>
<div class="dropdown-menu align-right" role="menu" aria-label="Gebruikersmenu">
<div class="menu-list">
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">👤</span><span>Profiel</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon green">⚙</span><span>Voorkeuren</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon yellow">Aa</span><span>Toegankelijkheid</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon purple" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path class="stroke-current" d="M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle class="stroke-current" cx="9.5" cy="7" r="3" stroke-width="2"/><path class="stroke-current" d="M21 19v-1a4 4 0 0 0-3-3.87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path class="stroke-current" d="M16 4.13a4 4 0 0 1 0 7.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span>Relaties</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon red">!</span><span>Meld een probleem</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">↪</span><span>Uitloggen</span><span class="menu-arrow">›</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<section class="page-shell">
<nav class="page-breadcrumb" aria-label="Kruimelpad"><a href="#">Home</a><span class="page-breadcrumb-sep">›</span><a href="#">Leerlingen</a><span class="page-breadcrumb-sep">›</span><span>Mila de Groot</span><span class="page-breadcrumb-sep">›</span><span aria-current="page">Geschiedenis</span></nav>
<section class="hero-card">
<h1>Voortgang van leerling bekijken</h1>
<p>Bekijk de geschiedenis van afgeronde oefeningen van één leerling binnen jouw docentcontext. Je ziet alleen resultaten van niveaus die jij zelf aan deze leerling hebt geautoriseerd.</p>
</section>
<section class="context-grid">
<article class="card">
<div class="student-summary">
<div class="avatar">M</div>
<div>
<div class="student-name">Mila de Groot</div>
<div class="student-meta"><span class="student-level">Gekoppeld als leerling · Huidig niveau: Groep 7 – Rekenen</span><span class="student-context">Alleen jouw geautoriseerde niveaus en resultaten</span></div>
</div>
</div>
</article>
<article class="card">
<div class="card-title-row"><div><h2>Samenvatting</h2><p>Op basis van de huidige filters.</p></div></div>
<div class="stats-grid">
<div class="stat"><div class="stat-label">Afgerond</div><div class="stat-value">37</div><div class="stat-sub">in geselecteerde periode</div></div>
<div class="stat"><div class="stat-label">Gem. score</div><div class="stat-value">78%</div><div class="stat-sub">goed beantwoorde vragen</div></div>
<div class="stat"><div class="stat-label">Geen idee</div><div class="stat-value">21</div><div class="stat-sub">totaal gemarkeerd</div></div>
<div class="stat"><div class="stat-label">Gem. tijd</div><div class="stat-value">14s</div><div class="stat-sub">per vraag</div></div>
</div>
</article>
</section>
<section class="filters card">
<div class="field"><label>Zoek in geschiedenis</label><input type="text" placeholder="Zoek op categorie, oefening of niveau"></div>
<div class="field"><label>Niveau</label><select><option>Alleen jouw niveaus</option><option selected>Groep 7 – Rekenen</option><option>Groep 7 – Taal</option><option>Plusklas 2026</option></select></div>
<div class="field"><label>Categorie</label><select><option>Alle categorieën</option><option selected>Rekenen</option><option>Taal</option><option>Engels</option></select></div>
<div class="field"><label>Periode</label><select><option>Afgelopen 7 dagen</option><option selected>Afgelopen 30 dagen</option><option>Dit jaar</option><option>Alles</option></select></div>
</section>
<section class="history-layout">
<article class="card">
<div class="card-title-row"><div><h2>Afgeronde oefeningen</h2><p>Alleen resultaten die binnen jouw docentautorisaties vallen.</p></div></div>
<div class="history-list">
<div class="history-item"><div class="history-item-main"><div class="history-item-title"><span class="history-run">Rekenen · Breuken</span></div><div class="history-meta">Afgerond op 24 mrt 2026 · 14:21 · Niveau: Groep 7 – Rekenen</div><div class="history-totals"><span class="mini">10 vragen</span><span class="mini">7 goed</span><span class="mini">2 fout</span><span class="mini">1 geen idee</span></div></div><div class="history-actions"><button class="link-btn">Bekijk details</button></div></div>
<div class="history-item"><div class="history-item-main"><div class="history-item-title"><span class="history-run">Rekenen · Tafels</span></div><div class="history-meta">Afgerond op 23 mrt 2026 · 10:08 · Niveau: Groep 7 – Rekenen</div><div class="history-totals"><span class="mini">15 vragen</span><span class="mini">13 goed</span><span class="mini">2 fout</span><span class="mini">0 geen idee</span></div></div><div class="history-actions"><button class="link-btn">Bekijk details</button></div></div>
<div class="history-item"><div class="history-item-main"><div class="history-item-title"><span class="history-run">Rekenen · Kommagetallen</span></div><div class="history-meta">Afgerond op 21 mrt 2026 · 16:42 · Niveau: Groep 7 – Rekenen</div><div class="history-totals"><span class="mini">12 vragen</span><span class="mini">8 goed</span><span class="mini">3 fout</span><span class="mini">1 geen idee</span></div></div><div class="history-actions"><button class="link-btn">Bekijk details</button></div></div>
<div class="history-item"><div class="history-item-main"><div class="history-item-title"><span class="history-run">Rekenen · Breuken</span></div><div class="history-meta">Afgerond op 19 mrt 2026 · 11:31 · Niveau: Groep 7 – Rekenen</div><div class="history-totals"><span class="mini">10 vragen</span><span class="mini">9 goed</span><span class="mini">1 fout</span><span class="mini">0 geen idee</span></div></div><div class="history-actions"><button class="link-btn">Bekijk details</button></div></div>
<div class="history-item"><div class="history-item-main"><div class="history-item-title"><span class="history-run">Rekenen · Meten</span></div><div class="history-meta">Afgerond op 18 mrt 2026 · 09:54 · Niveau: Groep 7 – Rekenen</div><div class="history-totals"><span class="mini">8 vragen</span><span class="mini">6 goed</span><span class="mini">1 fout</span><span class="mini">1 geen idee</span></div></div><div class="history-actions"><button class="link-btn">Bekijk details</button></div></div>
</div>
</article>
<aside class="detail-panel">
<article class="card">
<div class="card-title-row"><div><h2>Resultaatdetails</h2><p>Geselecteerde oefening</p></div></div>
<div class="detail-scroll">
<details class="detail-box collapsible" open>
<summary class="collapse-head">Samenvatting</summary>
<div class="collapse-content">
<div class="detail-grid">
<div class="detail-row"><small>Niveau</small><div>Groep 7 – Rekenen</div></div>
<div class="detail-row"><small>Oefening</small><div>Breuken</div></div>
<div class="detail-row"><small>Totaal vragen</small><div>10</div></div>
<div class="detail-row"><small>Goed / fout / geen idee</small><div>7 / 2 / 1</div></div>
<div class="detail-row"><small>Run van totaal runs</small><div>#34 / 37</div></div>
<div class="detail-row"><small>Afgerond op</small><div>24 mrt 2026 · 14:21</div></div>
</div>
</div>
</details>
<details class="detail-box collapsible" open>
<summary class="collapse-head">Vragen en antwoorden</summary>
<div class="collapse-content">
<div class="question-table">
<div class="question-head"><div>Nr</div><div>Som</div><div>Gegeven antwoord</div><div class="blank">.</div></div>
<div class="question-row"><div>1</div><div>3/4 + 0/4</div><div>3/4</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>2</div><div>1/4 + 1/4</div><div>1/2</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>3</div><div>5/8 + 1/8</div><div>5/8</div><div><span class="result-icon bad" title="Het juiste antwoord is: 6/8">✕</span></div></div>
<div class="question-row"><div>4</div><div>4/10 + 3/10</div><div>Geen idee</div><div><span class="result-icon unknown" title="Het juiste antwoord is: 7/10">?</span></div></div>
<div class="question-row"><div>5</div><div>2/5 + 2/5</div><div>4/5</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>6</div><div>1/3 + 1/3</div><div>2/3</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>7</div><div>2/6 + 1/6</div><div>3/6</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>8</div><div>6/10 + 1/10</div><div>7/10</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>9</div><div>3/8 + 2/8</div><div>5/8</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>10</div><div>1/2 + 1/4</div><div>3/4</div><div><span class="result-icon bad" title="Het juiste antwoord is: 2/4">✕</span></div></div>
<div class="question-row"><div>11</div><div>4/9 + 4/9</div><div>8/9</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>12</div><div>2/7 + 3/7</div><div>5/7</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>13</div><div>3/5 + 1/5</div><div>4/5</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>14</div><div>1/6 + 4/6</div><div>5/6</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
<div class="question-row"><div>15</div><div>1/10 + 8/10</div><div>9/10</div><div><span class="result-icon good" title="Goed">✓</span></div></div>
</div>
</div>
</details>
<details class="detail-box collapsible" open>
<summary class="collapse-head">Statistieken</summary>
<div class="collapse-content">
<div class="stats-grid detail-stats">
<div class="stat">
<div class="stat-label">Gemiddelde tijd per vraag</div>
<div class="stat-value">8,7 sec</div>
<div class="stat-sub">over deze run</div>
</div>
<div class="stat">
<div class="stat-label">Nauwkeurigheid</div>
<div class="stat-value">86,7%</div>
<div class="stat-sub">goed beantwoorde vragen</div>
</div>
<div class="stat">
<div class="stat-label">Totale doorlooptijd</div>
<div class="stat-value">5m 23s</div>
<div class="stat-sub">van start tot afronding</div>
</div>
<div class="stat">
<div class="stat-label">Uitschieters</div>
<div class="stat-value">2</div>
<div class="stat-sub">buiten bovengrens</div>
</div>
<div class="stat">
<div class="stat-label">Langzaamste vraag</div>
<div class="stat-value">21 sec</div>
<div class="stat-sub">vraag 15</div>
</div>
<div class="stat">
<div class="stat-label">Snelste vraag</div>
<div class="stat-value">4 sec</div>
<div class="stat-sub">vraag 2</div>
</div>
<div class="stat">
<div class="stat-label">Ondergrens</div>
<div class="stat-value">0 sec</div>
<div class="stat-sub">geen onderschrijdingen</div>
</div>
<div class="stat">
<div class="stat-label">Bovengrens</div>
<div class="stat-value">17,25 sec</div>
<div class="stat-sub">statistische grens</div>
</div>
</div>
<div class="outlier-grid">
<div class="outlier-box"><strong>Uitschieters ondergrens (0)</strong>Geen</div>
<div class="outlier-box"><strong>Uitschieters bovengrens (2)</strong>Vraag 3 · 19 sec, Vraag 15 · 21 sec</div>
</div>
</div>
</details>
</div>
</article>
</aside>
</section>
</section>
<footer class="site-footer">
<div class="footer-wrap">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>Docentomgeving voor het beheren van leerlingen en het bekijken van voortgang, afgeronde oefeningen en resultaatdetails.</p>
</div>
<div class="footer-col">
<h4>Snelle links</h4>
<div class="footer-links">
<a href="#">Leerlingen</a>
<a href="#">Bekijk geschiedenis</a>
<a href="#">Online</a>
</div>
</div>
<div class="footer-col">
<h4>Ondersteuning</h4>
<div class="footer-links">
<a href="#">Handleiding voor docenten</a>
<a href="#">Meld een probleem</a>
<a href="#">Privacy & veiligheid</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
</main>
</body>
</html>