oefenhub_leerling_06_geschiedenis_details_v2_1.html
Korte beschrijving
Deze mockup toont de resultatenpopup die boven de geschiedenis- of oefenpagina verschijnt na het openen van een afgeronde oefenrun.
De popup bevat samenvatting, vraagresultaten, statistieken, duplicaatmelding en acties zoals opnieuw maken, delen of PDF downloaden. Dit scherm is bewust een modal over de pagina en heeft daarom geen eigen breadcrumb of footer.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/leerling/oefenhub_leerling_06_geschiedenis_details_v2_1.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OefenHub - Rekenen - Optellen - Geschiedenis details</title>
<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;
--red-soft: #f8caca;
--red-text: #b74d4d;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.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(1220px, 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: 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); }
.submenu {
position: absolute; top: calc(100% + 8px); left: 0; width: 172px; padding: 8px;
border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 12px 24px rgba(17,79,149,.16);
border: 1px solid rgba(17,79,149,.08); display: none; z-index: 30;
}
.nav-item:hover .submenu, .nav-item.open .submenu { display: block; }
.submenu a {
display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none;
color: var(--text); background: #f5fbff; border-radius: 12px; padding: 8px 10px; margin-bottom: 6px;
font-size: 13px; font-weight: 700; border: 1px solid rgba(17,79,149,.06);
}
.submenu a:last-child { margin-bottom: 0; }
.submenu a.active { background: linear-gradient(180deg, rgba(255,187,77,.24), rgba(255,150,32,.22)); }
.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-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 { padding: 24px 0 42px; }
.history-shell {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.94));
border-radius: 34px; box-shadow: var(--shadow); overflow: hidden;
}
.history-breadcrumb {
background: linear-gradient(180deg, rgba(91,179,255,.22), rgba(91,179,255,.10));
padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500;
color: #0d5db8;
}
.history-breadcrumb span { opacity: .7; padding: 0 8px; }
.history-content { padding: 22px 22px 26px; }
.history-topbar {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
.history-title-wrap h1 {
margin: 0 0 10px; font-size: 24px; line-height: 1.08; color: #0d5db8;
}
.history-title-wrap p {
margin: 0; max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--text);
}
.back-button {
border: 0; border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 800; white-space: nowrap;
background: linear-gradient(180deg, #ffffff, #f2f8ff); color: var(--blue-4); box-shadow: var(--shadow-soft);
}
.history-panel {
background: rgba(255,255,255,.78); border-radius: 26px; border: 1px solid rgba(17,79,149,.08); padding: 18px;
}
.history-filters {
display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 14px; margin-bottom: 16px;
}
.history-filters a, .history-filters span { color: var(--text); text-decoration: none; }
.history-filters .active { color: #0a0a0a; font-weight: 800; }
.history-table-wrap {
border-radius: 18px; overflow: hidden; border: 1px solid rgba(17,79,149,.08); background: rgba(255,255,255,.96);
}
.history-table { width: 100%; border-collapse: collapse; }
.history-table thead th {
background: linear-gradient(180deg, rgba(91,179,255,.20), rgba(91,179,255,.08)); color: var(--blue-4); font-size: 12px;
text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(17,79,149,.10);
}
.history-table tbody td {
padding: 5px 14px; font-size: 14px; color: var(--text); border-bottom: 1px solid rgba(17,79,149,.07);
}
.history-table tbody tr.selected td {
background: linear-gradient(180deg, rgba(255,187,77,.18), rgba(255,150,32,.12)); font-weight: 700;
}
.history-table th:nth-child(3), .history-table th:nth-child(4), .history-table th:nth-child(5), .history-table th:nth-child(6),
.history-table td:nth-child(3), .history-table td:nth-child(4), .history-table td:nth-child(5), .history-table td:nth-child(6) { text-align: center; }
.history-footer {
margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.page-size { font-size: 14px; font-weight: 700; color: var(--text); }
.page-size select {
margin-left: 8px; border-radius: 12px; border: 1px solid rgba(17,79,149,.18); padding: 7px 10px; color: var(--blue-4);
font-size: 14px; font-weight: 700; background: #fff;
}
.pagination { display: flex; gap: 8px; align-items: center; }
.page-pill {
display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 12px; text-decoration: none;
background: #fff; color: var(--blue-4); font-size: 14px; font-weight: 800; box-shadow: var(--shadow-soft);
}
.page-pill.active { background: linear-gradient(180deg, #2f88ea, #176acc); color: #fff; }
.page-overlay {
position: fixed; inset: 0; background: rgba(13,93,184,.16); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
padding: 6px; z-index: 1000; overflow: hidden;
}
.result-modal {
width: min(1220px, calc(100% - 12px)); max-height: calc(100vh - 12px); display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98));
border-radius: 28px; box-shadow: 0 28px 70px rgba(17,79,149,.22); border: 1px solid rgba(17,79,149,.08); overflow: hidden;
}
.result-head {
position: relative; padding: 18px 24px 12px; text-align: center; border-bottom: 1px solid rgba(17,79,149,.08);
background: linear-gradient(180deg, rgba(91,179,255,.18), rgba(255,255,255,.30));
}
.close-btn {
position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
background: linear-gradient(180deg, #ffffff, #eef6ff); color: var(--blue-4); font-size: 22px; box-shadow: var(--shadow-soft);
}
.result-head h2 { margin: 0; font-size: 24px; color: #0d5db8; }
.result-subtitle { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.summary-grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px 24px 0;
}
.summary-card { min-width: 0; }
.summary-card {
background: rgba(255,255,255,.9); border: 1px solid rgba(17,79,149,.08); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow-soft);
}
.summary-label { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.summary-value { margin-top: 3px; font-size: 16px; font-weight: 900; color: var(--blue-4); line-height: 1.2; }
.summary-value.small { font-size: 14px; line-height: 1.25; font-weight: 700; color: var(--text); }
.summary-value.good { color: var(--green-3); }
.summary-value.bad { color: var(--red-text); }
.summary-value.idea { color: #8b6ab9; }
.result-body { padding: 0px 24px 12px; flex: 1 1 auto; overflow: auto; min-height: 0;
margin-top: 18px;}
.section-title {
margin: 6px 0 10px; font-size: 18px; font-weight: 900; color: #0d5db8;
}
.results-table-wrap {
border: 1px solid rgba(17,79,149,.08); border-radius: 18px; overflow: hidden; background: #fff;
}
.results-table-scroll {
max-height: 318px; overflow-y: auto; overflow-x: hidden; margin-top: 0;
}
.results-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.results-table col.col-num { width: 54px; }
.results-table col.col-question { width: 24%; }
.results-table col.col-answer, .results-table col.col-correct { width: 18%; }
.results-table col.col-result, .results-table col.col-marked { width: 14%; }
.results-table thead th {
position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(91,179,255,.22), rgba(91,179,255,.11));
padding: 10px 12px; font-size: 12px; color: var(--blue-4); text-align: left; white-space: normal; border-bottom: 1px solid rgba(17,79,149,.10);
}
.results-table tbody td {
padding: 5px 12px; font-size: 14px; color: var(--text); border-bottom: 1px solid rgba(17,79,149,.07);
vertical-align: top; overflow-wrap: anywhere;
}
.results-table tbody tr:last-child td { border-bottom: 0; }
.center { text-align: center; }
.results-table tbody td:nth-child(3),
.results-table tbody td:nth-child(4),
.results-table tbody td:nth-child(5),
.results-table tbody td:nth-child(6) { text-align: center; }
.check, .cross, .dunno {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; font-weight: 900; font-size: 15px;
}
.check { background: rgba(87,186,60,.14); color: var(--green-3); }
.cross { background: rgba(231,91,91,.14); color: var(--red-text); }
.dunno { background: rgba(246,170,7,.18); color: #9a6a05; }
.stats-panel {
margin-top: 12px; background: rgba(255,255,255,.85); border: 1px solid rgba(17,79,149,.08); border-radius: 20px; padding: 12px 14px;
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.stat-chip {
border-radius: 16px; background: #fff; border: 1px solid rgba(17,79,149,.08); padding: 11px 12px;
}
.stat-chip strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.stat-chip span { font-size: 15px; font-weight: 800; color: var(--blue-4); }
.outliers {
margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.outlier-box {
border-radius: 16px; background: #fff; border: 1px solid rgba(17,79,149,.08); padding: 12px 14px; font-size: 14px; line-height: 1.5;
}
.outlier-box strong { color: var(--muted); display: block; margin-bottom: 4px; font-size: 12px; }
.callout-row {
display: grid; grid-template-columns: 1.1fr .95fr; gap: 10px; margin: 10px 0 12px;
}
.callout {
border-radius: 18px; padding: 14px 16px; border: 1px solid rgba(17,79,149,.08); background: rgba(255,255,255,.9);
box-shadow: var(--shadow-soft);
}
.callout strong { display: block; margin-bottom: 6px; font-size: 13px; color: var(--blue-4); }
.callout p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.callout.duplicate {
background: linear-gradient(180deg, rgba(255,187,77,.16), rgba(255,255,255,.96));
}
.callout.share {
background: linear-gradient(180deg, rgba(87,186,60,.10), rgba(255,255,255,.96));
}
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-btn {
border: 0; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 800; cursor: pointer;
box-shadow: var(--shadow-soft); color: #fff;
}
.mini-btn.green { background: linear-gradient(180deg, #79cf59, #45a834); }
.mini-btn.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.modal-actions {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 14px 24px 18px; align-items: center;
}
.btn {
border: 0; border-radius: 16px; padding: 11px 16px; font-size: 14px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-soft);
}
.btn-secondary { background: linear-gradient(180deg, #ffffff, #edf6ff); color: var(--blue-4); }
.btn-primary { background: linear-gradient(180deg, #2f88ea, #176acc); color: #fff; }
.btn-accent { background: linear-gradient(180deg, #ffbb4d, #ff8d17); color: #fff; }
.align-left { justify-self: start; }
.align-center { justify-self: center; }
.align-right { justify-self: end; }
.site-footer {
margin-top: 28px; background: rgba(255,255,255,.86); border-radius: 30px 30px 0 0; box-shadow: var(--shadow); overflow: hidden;
}
.footer-grid {
display: grid; grid-template-columns: 1.15fr .9fr .9fr; gap: 26px; padding: 28px 28px 18px;
}
.footer-col h4 { margin: 0 0 10px; font-size: 18px; color: #0d5db8; }
.footer-col p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-bottom {
border-top: 1px solid rgba(17,79,149,.08); padding: 14px 28px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between;
}
@media (max-height: 820px) {
.result-head { padding: 14px 22px 10px; }
.result-head h2 { font-size: 22px; }
.result-subtitle { font-size: 13px; }
.summary-grid { gap: 6px; padding-top: 8px; }
.summary-card { padding: 7px 10px; }
.summary-label { font-size: 10px; }
.summary-value { font-size: 15px; }
.summary-value.small { font-size: 13px; }
.result-body { margin-top: 10px; }
.stats-panel { margin-top: 10px; padding: 10px 12px; }
.modal-actions { padding-top: 10px; padding-bottom: 12px; }
}
@media (max-width: 1180px) {
.summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-actions { grid-template-columns: 1fr; }
.align-left, .align-center, .align-right { justify-self: stretch; }
.footer-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-x: auto; padding-bottom: 4px; }
.history-topbar, .history-footer { flex-direction: column; align-items: stretch; }
.page-overlay { padding: 10px 8px 10px; }
.summary-grid, .stats-grid, .outliers, .callout-row { grid-template-columns: 1fr; }
.history-table-wrap { overflow: auto; }
.history-table { min-width: 760px; }
.history-content { padding: 16px; }
.result-head { padding: 22px 18px 16px; }
.result-body, .modal-actions, .summary-grid { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
.result-modal { width: calc(100% - 4px); max-height: calc(100vh - 8px); border-radius: 22px; }
.summary-grid { grid-template-columns: 1fr; gap: 8px; padding-top: 8px; }
.summary-card { padding: 8px 10px; }
.summary-label { font-size: 10px; }
.summary-value { font-size: 15px; }
.summary-value.small { font-size: 13px; }
.close-btn { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 18px; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="welcome-text">Welkom terug, Emma</div>
</div>
<nav class="nav-pills" aria-label="Categorieën">
<div class="nav-item open">
<button class="pill orange">Rekenen</button>
<div class="submenu">
<a class="active" href="#">Optellen <span>›</span></a>
<a href="#">Aftrekken <span>›</span></a>
<a href="#">Vermenigvuldigen <span>›</span></a>
<a href="#">Delen <span>›</span></a>
</div>
</div>
<button class="pill blue">Taal</button>
<button class="pill yellow">Topografie</button>
<button class="pill green">Engels</button>
</nav>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="badge">3</span></button>
<button class="profile-chip" aria-label="Profiel"><span class="avatar">E</span></button>
</div>
</div>
</div>
</header>
<main class="wrap">
<section class="history-shell">
<div class="history-breadcrumb">Rekenen <span>›</span> Optellen</div>
<div class="history-content">
<div class="history-topbar">
<div class="history-title-wrap">
<h1>Geschiedenis</h1>
<p>Hier zie je jouw eerder afgeronde oefeningen binnen <strong>Rekenen > Optellen</strong>. Klik op een regel om het volledige resultaat van die oefening te bekijken.</p>
</div>
<button class="back-button" type="button">Terug naar Optellen</button>
</div>
<div class="history-panel">
<div class="history-filters" aria-label="Periodefilter geschiedenis">
<a href="#">Afgelopen week</a>
<span class="active">Huidige maand</span>
<a href="#">Vorige maand</a>
<a href="#">Huidige jaar</a>
<a href="#">Alles</a>
</div>
<div class="history-table-wrap">
<table class="history-table">
<thead>
<tr>
<th>Nr.</th>
<th>Afgerond</th>
<th>Aantal oefeningen</th>
<th>Aantal goed</th>
<th>Aantal fout</th>
<th>Aantal ‘Geen idee’</th>
</tr>
</thead>
<tbody>
<tr class="selected"><td>1</td><td>18-03-2026 · 16:42</td><td>15</td><td>13</td><td>2</td><td>1</td></tr>
<tr><td>2</td><td>17-03-2026 · 19:08</td><td>20</td><td>16</td><td>3</td><td>1</td></tr>
<tr><td>3</td><td>16-03-2026 · 15:27</td><td>15</td><td>12</td><td>2</td><td>1</td></tr>
<tr><td>4</td><td>14-03-2026 · 10:14</td><td>10</td><td>9</td><td>1</td><td>0</td></tr>
</tbody>
</table>
</div>
<div class="history-footer">
<label class="page-size">Toon per pagina
<select aria-label="Aantal regels per pagina">
<option selected>20</option><option>40</option><option>60</option><option>Alles</option>
</select>
</label>
<div class="pagination" aria-label="Paginering geschiedenis">
<a class="page-pill active" href="#">1</a><a class="page-pill" href="#">2</a><a class="page-pill" href="#">3</a>
</div>
<button class="back-button" type="button">Terug naar Optellen</button>
</div>
</div>
</div>
<div class="page-overlay" aria-hidden="false">
<section class="result-modal" aria-label="Resultaat oefening">
<div class="result-head">
<button class="close-btn" type="button" aria-label="Sluit resultaat">×</button>
<h2>Resultaat oefening</h2>
<div class="result-subtitle">Rekenen - Optellen</div>
</div>
<div class="result-body">
<div class="summary-grid">
<div class="summary-card">
<div class="summary-label">Naam</div>
<div class="summary-value small">Emma de Vries</div>
</div>
<div class="summary-card">
<div class="summary-label">Datum</div>
<div class="summary-value small">18-03-2026 · 16:42</div>
</div>
<div class="summary-card">
<div class="summary-label">Aantal oefeningen</div>
<div class="summary-value">15</div>
</div>
<div class="summary-card">
<div class="summary-label">Aantal goed</div>
<div class="summary-value good">13</div>
</div>
<div class="summary-card">
<div class="summary-label">Aantal fout / Geen idee</div>
<div class="summary-value bad">2 / 1</div>
</div>
</div>
<h3 class="section-title">Resultaten per vraag</h3>
<div class="results-table-wrap">
<table class="results-table">
<colgroup>
<col class="col-num"><col class="col-question"><col class="col-answer"><col class="col-correct"><col class="col-result"><col class="col-marked">
</colgroup>
<thead>
<tr>
<th>#</th>
<th>Vraag</th>
<th>Gegeven antwoord</th>
<th>Juiste antwoord</th>
<th class="center">Resultaat</th>
<th class="center">Gemarkeerd</th>
</tr>
</thead>
</table>
<div class="results-table-scroll">
<table class="results-table">
<colgroup>
<col class="col-num"><col class="col-question"><col class="col-answer"><col class="col-correct"><col class="col-result"><col class="col-marked">
</colgroup>
<tbody>
<tr><td>1</td><td>17 + 9</td><td>26</td><td>26</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>2</td><td>12 + 8</td><td>20</td><td>20</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>3</td><td>19 + 7</td><td>25</td><td>26</td><td class="center"><span class="cross">✕</span></td><td class="center">–</td></tr>
<tr><td>4</td><td>14 + 11</td><td>25</td><td>25</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>5</td><td>9 + 13</td><td>22</td><td>22</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>6</td><td>18 + 6</td><td>24</td><td>24</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>7</td><td>7 + 16</td><td>23</td><td>23</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>8</td><td>15 + 15</td><td>30</td><td>30</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>9</td><td>11 + 12</td><td>23</td><td>23</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>10</td><td>8 + 17</td><td>25</td><td>25</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>11</td><td>13 + 14</td><td>27</td><td>27</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>12</td><td>16 + 9</td><td>24</td><td>25</td><td class="center"><span class="cross">✕</span></td><td class="center">–</td></tr>
<tr><td>13</td><td>10 + 19</td><td>29</td><td>29</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>14</td><td>6 + 18</td><td>24</td><td>24</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>15</td><td>9 + 12</td><td>21</td><td>21</td><td class="center"><span class="cross">✕</span></td><td class="center"><span class="dunno">?</span></td></tr>
<tr><td>16</td><td>18 + 14</td><td>32</td><td>32</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>17</td><td>22 + 6</td><td>29</td><td>28</td><td class="center"><span class="cross">✕</span></td><td class="center">–</td></tr>
<tr><td>18</td><td>11 + 19</td><td>30</td><td>30</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>19</td><td>5 + 17</td><td>22</td><td>22</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>20</td><td>14 + 14</td><td>28</td><td>28</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>21</td><td>23 + 7</td><td>30</td><td>30</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>22</td><td>9 + 9</td><td>18</td><td>18</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
<tr><td>23</td><td>8 + 12</td><td>20</td><td>20</td><td class="center"><span class="check">✓</span></td><td class="center">–</td></tr>
</tbody>
</table>
</div>
</div>
<div class="stats-panel">
<h3 class="section-title">Statistieken</h3>
<div class="stats-grid">
<div class="stat-chip"><strong>Gemiddelde tijd per vraag</strong><span>8,7 sec</span></div>
<div class="stat-chip"><strong>Nauwkeurigheid</strong><span>86,7%</span></div>
<div class="stat-chip"><strong>Totale doorlooptijd</strong><span>5min 23sec</span></div>
<div class="stat-chip"><strong>Uitschieters</strong><span>2 totaal</span></div>
<div class="stat-chip"><strong>Ondergrens</strong><span>0 sec</span></div>
<div class="stat-chip"><strong>Snelste vraag</strong><span>4 sec</span></div>
<div class="stat-chip"><strong>Bovengrens</strong><span>17,25 sec</span></div>
<div class="stat-chip"><strong>Langzaamste vraag</strong><span>19 sec</span></div>
</div>
<div class="outliers">
<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>
<div class="callout-row">
<div class="callout duplicate">
<strong>Duplicaatmelding</strong>
<p>Deze oefening is een duplicaat binnen een reeks van 3 onderling gekoppelde oefeningen.</p>
</div>
<div class="callout share">
<strong>Deel deze oefening</strong>
<p>Maak een exacte kopie van deze vragen en deel die als nieuwe oefening met een andere leerling. De volgorde van de vragen blijft daarbij gelijk.</p>
<div class="share-actions">
<button class="mini-btn green" type="button">Deel oefening met een leerling</button>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-secondary align-left" type="button">Maak deze oefening opnieuw</button>
<button class="btn btn-accent align-center" type="button">Download als PDF</button>
<button class="btn btn-primary align-right" type="button">Sluit resultaat</button>
</div>
</section>
</div>
</section>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meld een probleem</a>
</div>
</div>
</div>
<div class="footer-bottom"><span>© 2026 OefenHub</span></div>
</footer>
</main>
<script>
(function () {
const navItem = document.querySelector('.nav-item');
const trigger = navItem?.querySelector('.pill');
if (!navItem || !trigger) return;
trigger.addEventListener('click', function (event) {
event.preventDefault();
navItem.classList.toggle('open');
});
document.addEventListener('click', function (event) {
if (!navItem.contains(event.target)) navItem.classList.remove('open');
});
})();
</script>
</body>
</html>