oefenhub_leerling_module_optellen_en_aftrekken_simpel_fout_v1_4.html
Korte beschrijving
Deze mockup toont de leerlingweergave van de oefenmodule Optellen & Aftrekken (simpel) in de state waarin een antwoord fout is beantwoord.
Na het invoeren en bevestigen van een onjuist antwoord wordt visuele feedback gegeven, waarbij het antwoord rood wordt weergegeven en een foutmelding wordt getoond.
Deze state maakt functioneel onderdeel uit van dezelfde oefenview als de standaard weergave en laat zien hoe de applicatie omgaat met incorrecte invoer.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/modules/oefenhub_leerling_module_optellen_en_aftrekken_simpel_fout_v1_4.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 {
position: relative;
text-align: center;
width: min(100%, 560px);
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.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-box {
width: 140px;
height: 78px;
border-radius: 20px;
text-align: center;
outline: none;
font-size: 34px;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bottom-feedback {
position: absolute;
top: 225px;
transform: translateX(-50%);
left: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
}
.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: 13.333%;
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; }
.exercise-actions { align-items: stretch; }
.exercise-actions .btn { width: 100%; }
}
.answer-box {
border: 5px solid #f2b7b7;
color: #b44949;
background: linear-gradient(180deg, #ffffff, #fff6f6);
box-shadow: 0 10px 18px rgba(180,73,73,.10);
}
.bottom-feedback { color: #e5a3aa; }
</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>
<div class="answer-box" aria-label="Gegeven antwoord">25</div>
</div>
<div class="bottom-feedback">Helaas het antwoord was niet goed</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">2 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>
</body>
</html>