oefenhub_leerling_07_geschiedenis_alles_v1_5.html
Korte beschrijving
Deze mockup toont de brede profielpagina Geschiedenis, waarin een leerling alle afgeronde oefenruns over niveaus, categorieën en gedeelde oefeningen heen kan bekijken.
Filters helpen om de lijst te beperken op periode, niveau, categorie en type run. De pagina is bereikbaar via het profielmenu en gebruikt de breadcrumb Home > Profiel > Geschiedenis.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/leerling/oefenhub_leerling_07_geschiedenis_alles_v1_5.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OefenHub - Geschiedenis (alles)</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-3: #f87400;
--green-2: #57ba3c;
--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 {
min-height: 100vh;
overflow-x: hidden;
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%);
}
.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: 30;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 250px;
}
.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;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-item {
position: relative;
display: inline-flex;
align-items: center;
}
.pill {
border: 0;
border-radius: 14px;
padding: 10px 16px;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: var(--shadow-soft);
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
transition: transform .18s ease, filter .18s ease;
}
.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.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }
.pill:hover { filter: brightness(1.06); 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; }
.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-link.no-arrow { grid-template-columns: auto 1fr; }
.menu-link.no-arrow .menu-arrow { display: none; }
.menu-icon {
width: 23px;
height: 23px;
border-radius: 7px;
display: grid;
place-items: center;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: 0 6px 12px rgba(35,100,177,.12);
}
.menu-icon.green { background: linear-gradient(180deg, #89da69, #59bb3e); }
.menu-icon.blue { background: linear-gradient(180deg, #67baf4, #2f88ea); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45e, #f4ac10); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #9c7af2, #6b49dd); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-arrow { color: #0d5db8; font-size: 24px; 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;
transition: transform .18s ease, background .18s ease;
}
.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);
}
.mail-btn:hover,
.profile-chip:hover {
background: linear-gradient(180deg, #ffffff, #e4f1ff);
transform: translateY(-1px);
}
main.wrap { padding: 22px 0 42px; }
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
color: rgba(17,79,149,.72);
font-size: 13px;
font-weight: 700;
}
.breadcrumb-bar a {
color: rgba(17,79,149,.78);
text-decoration: none;
}
.breadcrumb-bar a:hover { color: var(--blue-4); text-decoration: underline; }
.breadcrumb-bar span { color: rgba(17,79,149,.45); font-weight: 900; }
.breadcrumb-bar strong { color: var(--blue-4); }
.history-all-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 18px;
align-items: start;
}
.history-intro-card,
.history-side-card,
.history-filters-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
min-width: 0;
}
.history-intro-card {
padding: 18px 22px 20px;
}
.history-side-card {
padding: 18px 18px 16px;
}
.history-filters-card {
grid-column: 1 / -1;
padding: 18px 20px 18px;
}
.history-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
}
.history-title {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.12;
color: #0d5db8;
font-weight: 900;
}
.history-intro {
margin: 0;
color: #18599e;
font-size: 14px;
line-height: 1.55;
max-width: 820px;
font-weight: 500;
}
.history-intro strong { color: #114f95; }
.side-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.side-title {
margin: 0;
font-size: 18px;
color: #0d5db8;
font-weight: 900;
}
.side-toggle {
display: none;
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(17,79,149,.12);
background: rgba(255,255,255,.92);
color: var(--text);
cursor: pointer;
box-shadow: var(--shadow-soft);
}
.summary-list {
display: grid;
gap: 8px;
}
.summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 14px;
color: #285d96;
}
.summary-row:first-child { border-top: 0; padding-top: 0; }
.summary-row strong { color: #0d5db8; text-align: right; }
.history-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.filter-field label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 900;
color: #235790;
}
.filter-field select,
.page-size select {
width: 100%;
height: 38px;
border-radius: 13px;
border: 1px solid rgba(170,204,238,.82);
padding: 0 11px;
font: inherit;
font-size: 13px;
color: var(--text);
background: linear-gradient(180deg, #ffffff, #f6fbff);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.history-toggle-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.toggle-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(170,204,238,.72);
background: linear-gradient(180deg, #ffffff, #f7fbff);
color: #18518f;
font-size: 13px;
font-weight: 800;
box-shadow: var(--shadow-soft);
}
.toggle-pill.active {
background: linear-gradient(180deg, #edf5ff, #dcecff);
color: #0d5db8;
border-color: rgba(47,143,236,.34);
}
.history-table-shell {
width: 100%;
max-width: 100%;
border: 1px solid rgba(170,204,238,.72);
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,.98);
box-shadow: var(--shadow-soft);
}
.history-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.history-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0;
}
.history-table thead th {
text-align: left;
padding: 12px 14px;
font-size: 12px;
color: #355f9d;
font-weight: 900;
background: linear-gradient(180deg, rgba(242,247,255,.98), rgba(232,241,255,.98));
border-bottom: 1px solid rgba(171,195,233,.95);
white-space: nowrap;
}
.history-table tbody td {
padding: 11px 14px;
font-size: 14px;
color: #214b8d;
font-weight: 700;
border-bottom: 1px solid rgba(180,201,235,.65);
background: rgba(255,255,255,.96);
white-space: nowrap;
}
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table tbody tr { cursor: pointer; transition: background .16s ease; }
.history-table tbody tr:hover td { background: rgba(236,245,255,.98); }
.history-table th:nth-child(6),
.history-table th:nth-child(7),
.history-table th:nth-child(8),
.history-table th:nth-child(9),
.history-table td:nth-child(6),
.history-table td:nth-child(7),
.history-table td:nth-child(8),
.history-table td:nth-child(9) {
text-align: center;
}
.history-table .good { color: #2a9150; font-weight: 900; }
.history-table .wrong { color: #c36c34; font-weight: 900; }
.history-table .idea { color: #7d63be; font-weight: 900; }
.history-table .level-cell,
.history-table .category-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.shared-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(137,87,199,.14);
color: #7343b4;
font-weight: 900;
font-size: 11px;
}
.history-note {
margin-top: 12px;
color: #5977a6;
font-size: 13px;
text-align: center;
font-weight: 700;
}
.history-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 14px;
}
.page-size {
display: inline-flex;
align-items: center;
gap: 8px;
color: #4f6e9e;
font-size: 13px;
font-weight: 800;
}
.page-size select { width: auto; min-width: 74px; }
.pagination {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.page-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(153,184,232,.92);
background: rgba(255,255,255,.98);
color: #214b8d;
text-decoration: none;
font-size: 13px;
font-weight: 900;
box-shadow: 0 6px 12px rgba(61,103,172,.08);
}
.page-pill.active {
color: #fff;
background: linear-gradient(180deg, #2f88ea, #176acc);
border-color: rgba(31,102,204,.95);
pointer-events: none;
}
.site-footer {
width: 100%;
margin-top: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top: 1px solid rgba(17,79,149,.10);
box-shadow: var(--shadow);
border-radius: 26px 26px 0 0;
padding: 22px 0 18px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 36px;
align-items: start;
}
.footer-col h4 {
margin: 0 0 12px;
font-size: 15px;
color: #0d5db8;
font-weight: 900;
padding-bottom: 8px;
border-bottom: 1px solid rgba(17,79,149,.14);
}
.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-top: 14px;
border-top: 1px solid rgba(17,79,149,.10);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: var(--muted);
font-weight: 600;
}
@media (max-width: 1120px) {
.header-row {
grid-template-columns: 1fr;
justify-items: center;
gap: 12px;
}
.brand { align-items: center; min-width: 0; }
.welcome-text { margin-left: 0; margin-top: -6px; }
.header-actions { min-width: 0; justify-content: center; }
.nav-pills {
width: 100%;
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 2px;
}
.history-all-layout { grid-template-columns: 1fr; }
.history-side-card { order: 2; }
.history-filters-card { grid-column: auto; order: 3; }
.history-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side-toggle { display: inline-grid; place-items: center; }
.history-side-card.is-collapsed .summary-list { display: none; }
.footer-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
.wrap { width: min(100%, calc(100% - 18px)); }
main.wrap { padding-top: 18px; }
.history-filter-grid { grid-template-columns: 1fr; }
.history-head { flex-direction: column; }
.history-title { font-size: 20px; }
.history-intro-card,
.history-side-card,
.history-filters-card { border-radius: 22px; }
.history-foot { align-items: flex-start; flex-direction: column; }
.site-footer { padding: 20px 0 16px; }
.dropdown-menu { width: min(276px, calc(100vw - 32px)); }
.dropdown-menu.align-right { right: auto; left: 0; }
.dropdown-menu.align-right::before { left: 36px; right: auto; }
}
</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, Emma</div>
</div>
<div class="nav-pills">
<div class="nav-item">
<button class="pill orange has-chevron" type="button" aria-expanded="false" aria-controls="rekenen-menu">🔢 Rekenen <span class="pill-caret">▾</span></button>
<div class="dropdown-menu" id="rekenen-menu">
<div class="menu-list">
<a href="#" class="menu-link is-active"><span class="menu-icon green">＋</span><span>Optellen</span><span class="menu-arrow">›</span></a>
<a href="#" class="menu-link"><span class="menu-icon blue">−</span><span>Aftrekken</span></a>
<a href="#" class="menu-link"><span class="menu-icon yellow">×</span><span>Vermenigvuldigen</span></a>
<a href="#" class="menu-link"><span class="menu-icon purple">÷</span><span>Delen</span></a>
</div>
</div>
</div>
<button class="pill blue">📖 Taal</button>
<button class="pill blue">🇬🇧 Engels</button>
<button class="pill yellow">✏️ Spelling</button>
<button class="pill green">🌍 Topografie</button>
</div>
<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" 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">👥</span><span>Relaties</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow is-active" href="#"><span class="menu-icon blue">🕘</span><span>Geschiedenis</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">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<a href="#">Home</a>
<span>›</span>
<a href="#">Profiel</a>
<span>›</span>
<strong>Geschiedenis</strong>
</nav>
<div class="history-all-layout">
<section class="history-intro-card">
<div class="history-head">
<div>
<h1 class="history-title">Geschiedenis (alles)</h1>
<p class="history-intro">Hier zie je je volledige <strong>afgeronde oefengeschiedenis</strong> over alle niveaus en categorieën heen. Ook <strong>gedeelde oefeningen</strong> worden hier meegenomen zodra je ze hebt afgerond. Niet-afgeronde oefeningen vallen buiten dit overzicht.</p>
</div>
</div>
</section>
<aside class="history-side-card" id="glance-card">
<div class="side-head">
<h2 class="side-title">In één oogopslag</h2>
<button class="side-toggle" type="button" aria-expanded="true" aria-label="Toon minder">▾</button>
</div>
<div class="summary-list">
<div class="summary-row"><span>Totaal afgerond</span><strong>41 runs</strong></div>
<div class="summary-row"><span>Waarvan gedeeld</span><strong>6 runs</strong></div>
</div>
</aside>
<section class="history-filters-card">
<div class="history-filter-grid">
<div class="filter-field">
<label for="periodFilter">Periode</label>
<select id="periodFilter">
<option>Afgelopen week</option>
<option selected>Huidige maand</option>
<option>Vorige maand</option>
<option>Huidige jaar</option>
<option>Alles</option>
</select>
</div>
<div class="filter-field">
<label for="levelFilter">Niveau</label>
<select id="levelFilter">
<option selected>Alle niveaus</option>
<option>Basisschool – Groep 7</option>
<option>Basisschool – Groep 8</option>
</select>
</div>
<div class="filter-field">
<label for="categoryFilter">Categorie</label>
<select id="categoryFilter">
<option selected>Alle categorieën</option>
<option>Rekenen</option>
<option>Taal</option>
<option>Engels</option>
<option>Spelling</option>
<option>Topografie</option>
</select>
</div>
<div class="filter-field">
<label for="typeFilter">Type</label>
<select id="typeFilter">
<option selected>Alles</option>
<option>Eigen oefeningen</option>
<option>Gedeelde oefeningen</option>
</select>
</div>
</div>
<div class="history-toggle-row" aria-label="Snelkeuze type geschiedenis">
<span class="toggle-pill active">Alle afgeronde oefeningen</span>
<span class="toggle-pill">Alleen gedeelde oefeningen</span>
</div>
<div class="history-table-shell">
<div class="history-table-wrap">
<table class="history-table">
<thead>
<tr>
<th>Nr.</th>
<th>Afgerond</th>
<th>Niveau</th>
<th>Categorie</th>
<th>Subcategorie</th>
<th>Aantal oefeningen</th>
<th>Aantal goed</th>
<th>Aantal fout</th>
<th>Aantal ‘Geen idee’</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr><td>41</td><td>21-03-2026 · 16:42</td><td class="level-cell">Basisschool – Groep 7</td><td class="category-cell">Rekenen</td><td>Optellen</td><td>15</td><td class="good">13</td><td class="wrong">2</td><td class="idea">0</td><td>Eigen</td></tr>
<tr><td>40</td><td>21-03-2026 · 15:17</td><td class="level-cell">Basisschool – Groep 7</td><td class="category-cell">Rekenen</td><td>Breuken</td><td>10</td><td class="good">8</td><td class="wrong">1</td><td class="idea">1</td><td><span class="shared-badge">🤝 Gedeeld</span></td></tr>
<tr><td>39</td><td>20-03-2026 · 18:06</td><td class="level-cell">Basisschool – Groep 8</td><td class="category-cell">Engels</td><td>Werkwoorden</td><td>20</td><td class="good">17</td><td class="wrong">2</td><td class="idea">1</td><td>Eigen</td></tr>
<tr><td>38</td><td>19-03-2026 · 14:51</td><td class="level-cell">Basisschool – Groep 7</td><td class="category-cell">Taal</td><td>Zinsdelen</td><td>15</td><td class="good">12</td><td class="wrong">2</td><td class="idea">1</td><td>Eigen</td></tr>
<tr><td>37</td><td>18-03-2026 · 19:08</td><td class="level-cell">Basisschool – Groep 7</td><td class="category-cell">Rekenen</td><td>Optellen</td><td>20</td><td class="good">16</td><td class="wrong">3</td><td class="idea">1</td><td>Eigen</td></tr>
<tr><td>36</td><td>18-03-2026 · 16:03</td><td class="level-cell">Basisschool – Groep 8</td><td class="category-cell">Topografie</td><td>Europa</td><td>15</td><td class="good">14</td><td class="wrong">1</td><td class="idea">0</td><td><span class="shared-badge">🤝 Gedeeld</span></td></tr>
<tr><td>35</td><td>17-03-2026 · 11:22</td><td class="level-cell">Basisschool – Groep 7</td><td class="category-cell">Spelling</td><td>Werkwoordspelling</td><td>15</td><td class="good">11</td><td class="wrong">3</td><td class="idea">1</td><td>Eigen</td></tr>
<tr><td>34</td><td>16-03-2026 · 09:44</td><td class="level-cell">Basisschool – Groep 8</td><td class="category-cell">Rekenen</td><td>Procenten</td><td>10</td><td class="good">9</td><td class="wrong">1</td><td class="idea">0</td><td>Eigen</td></tr>
</tbody>
</table>
</div>
</div>
<div class="history-note">Klik op een regel om het volledige resultaat van die oefening te openen. Gedeelde oefeningen worden na afronden op dezelfde manier in je geschiedenis opgenomen als je eigen oefeningen.</div>
<div class="history-foot">
<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>
<a class="page-pill" href="#">Volgende</a>
</div>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<div class="wrap">
<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>
</div>
</footer>
<script>
(function () {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(function (item) {
const trigger = item.querySelector('button');
const menu = item.querySelector('.dropdown-menu');
if (!trigger || !menu) return;
trigger.addEventListener('click', function (event) {
event.preventDefault();
const isOpen = item.classList.contains('open');
navItems.forEach(function (other) {
other.classList.remove('open');
const otherTrigger = other.querySelector('button');
if (otherTrigger) otherTrigger.setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
trigger.setAttribute('aria-expanded', 'true');
}
});
});
document.addEventListener('click', function (event) {
navItems.forEach(function (item) {
if (!item.contains(event.target)) {
item.classList.remove('open');
const trigger = item.querySelector('button');
if (trigger) trigger.setAttribute('aria-expanded', 'false');
}
});
});
const glanceCard = document.getElementById('glance-card');
const glanceToggle = glanceCard ? glanceCard.querySelector('.side-toggle') : null;
const glanceMq = window.matchMedia('(max-width: 1120px)');
function syncGlanceCard() {
if (!glanceCard || !glanceToggle) return;
if (glanceMq.matches) {
glanceCard.classList.add('is-collapsed');
glanceToggle.setAttribute('aria-expanded', 'false');
} else {
glanceCard.classList.remove('is-collapsed');
glanceToggle.setAttribute('aria-expanded', 'true');
}
}
if (glanceToggle) {
glanceToggle.addEventListener('click', function () {
if (!glanceMq.matches) return;
const collapsed = glanceCard.classList.toggle('is-collapsed');
glanceToggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
});
}
syncGlanceCard();
if (glanceMq.addEventListener) glanceMq.addEventListener('change', syncGlanceCard);
else if (glanceMq.addListener) glanceMq.addListener(syncGlanceCard);
})();
</script>
</body>
</html>