oefenhub_leerling_module_optellen_en_aftrekken_simpel_v4_1.html
Korte beschrijving
Deze mockup toont de standaard leerlingweergave van de oefenmodule Optellen & Aftrekken (simpel). In deze view maakt de leerling een oefening door vragen één voor één te beantwoorden.
De pagina bevat de actuele som, een invoerveld voor het antwoord en een voortgangsweergave. De inhoud van de vragen wordt dynamisch gegenereerd op basis van de instellingen die door de docent zijn geconfigureerd.
Deze view vormt de basis van de oefenflow en wordt aangevuld met feedbackstates zoals correcte en foutieve antwoorden.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/modules/oefenhub_leerling_module_optellen_en_aftrekken_simpel_v4_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 - Oefening</title>
<style>
:root {
--blue-4: #0d5db8;
--text: #114f95;
--muted: #5f7ea5;
--orange-1: #ffbb4d;
--orange-3: #f87400;
--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; padding-top: 100px; }
.exercise-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 18px;
align-items: stretch;
}
.exercise-card {
background: linear-gradient(180deg, rgba(70,147,226,.98), rgba(35,112,196,.98));
border-radius: 28px;
padding: 16px;
box-shadow: var(--shadow-soft);
color: #fff;
display: flex;
flex-direction: column;
min-height: 430px;
max-width: 860px;
}
.exercise-top {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.question-zone {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
border-radius: 24px;
padding: 22px;
}
.question-inner { text-align: center; width: min(100%, 560px); }
.sum {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
font-size: clamp(44px, 7vw, 76px);
font-weight: 900;
line-height: 1;
}
.answer-input {
width: 140px;
height: 78px;
border: 0;
border-radius: 20px;
text-align: center;
outline: none;
font-size: 34px;
font-weight: 900;
color: var(--blue-4);
background: linear-gradient(180deg, #ffffff, #eef6ff);
box-shadow: 0 10px 18px rgba(19,74,140,.18);
}
.answer-input::placeholder { color: #8db2d9; }
.exercise-actions {
margin-top: 16px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
min-height: 40px;
padding: 0 22px;
font-size: 13px;
font-weight: 900;
text-decoration: none;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #fff; background: linear-gradient(180deg, var(--orange-1), var(--orange-3)); }
.side-panel {
background: linear-gradient(180deg, #ffffff, #fafdff);
border-radius: 28px;
padding: 16px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 12px;
}
.side-title { margin: 0; font-size: 20px; color: #0d5db8; }
.info-card {
border-radius: 18px;
padding: 12px 14px;
background: linear-gradient(180deg, #f8fbff, #eef6ff);
border: 1px solid rgba(57,132,206,.10);
}
.info-label { font-size: 12px; color: var(--muted); font-weight: 800; margin-bottom: 5px; }
.info-value { font-size: 15px; color: #1c5b9f; font-weight: 800; line-height: 1.35; }
.mini-progress {
height: 12px;
border-radius: 999px;
background: #d8ecff;
overflow: hidden;
margin-top: 8px;
}
.mini-progress > span {
display: block;
width: 7%;
height: 100%;
border-radius: 999px;
background: linear-gradient(180deg, #ffbb4d, #ff7f12);
}
.tip { font-size: 13px; line-height: 1.45; color: #2866aa; font-weight: 600; margin: 0; }
@media (max-width: 980px) {
.exercise-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.exercise-card, .side-panel { border-radius: 24px; }
.sum { gap: 12px; }
.answer-input { width: 112px; height: 66px; font-size: 28px; }
.exercise-actions { align-items: stretch; }
.exercise-actions .btn { width: 100%; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="exercise-grid">
<section class="exercise-card" aria-label="Oefening">
<div class="exercise-top">
</div>
<div class="question-zone">
<div class="question-inner">
<div class="sum">
<span>17</span>
<span>+</span>
<span>9</span>
<span>=</span>
<input class="answer-input" type="text" inputmode="numeric" aria-label="Antwoord invullen" placeholder="?" />
</div>
</div>
</div>
<div class="exercise-actions">
<button class="btn btn-primary">Volgende vraag</button>
</div>
</section>
<aside class="side-panel" aria-label="Voortgang en informatie">
<h2 class="side-title">Jouw voortgang</h2>
<div class="info-card">
<div class="info-label">Subcategorie</div>
<div class="info-value">Optellen tot en met 50</div>
</div>
<div class="info-card">
<div class="info-label">Voortgang</div>
<div class="info-value">1 van de 15 vragen beantwoord</div>
<div class="mini-progress"><span></span></div>
</div>
<div class="info-card">
<div class="info-label">Tip</div>
<p class="tip">Je antwoord wordt opgeslagen zodra je naar de volgende vraag gaat.</p>
<p class="tip">Verlaat je de pagina tussendoor? Dan blijft deze oefening bewaard en kun je later verdergaan via <strong>Verder gaan</strong>.</p>
</div>
</aside>
</div>
</div>
</body>
</html>