Kies je eigen leerjaar uit.

• GonioMeester

  body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, sans-serif; } .fade-in { animation: fadeIn 0.35s ease-out both; } .pop-in { animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } .slide-up { animation: slideUp 0.4s ease-out both; } @keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes popIn { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } } @keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } .progress-bar { transition: width 0.6s ease; } .btn-hover:hover { transform: scale(1.05); } .btn-tap:active { transform: scale(0.95); } .step-fade { transition: opacity 0.4s, transform 0.4s; } .step-fade.inactive { opacity: 0.3; transform: scale(0.97); pointer-events: none; }

  const { useState, useRef } = React; /* ===================== ICONS (inline SVG) ===================== */ const Ic = ({ children, className = “” }) => ( ); const BookOpen = ({className}) => ; const GraduationCap = ({className}) => ; const PlayIcon = ({className}) => ; const ChevronRight = ({className}) => ; const ChevronLeft = ({className}) => ; const HomeIcon = ({className}) => ; const HelpCircle = ({className}) => ; const RotateCcw = ({className}) => ; const CheckCircle2 = ({className}) => ; const AlertCircle = ({className}) => ; const Calculator = ({className}) => ; const InfoIcon = ({className}) => ; const XIcon = ({className}) => ; /* ===================== EXERCISES DATA ===================== */ // Tangens-only oefeningen: driehoeken met correcte verhoudingen (tan = overstaand/aanliggend) // SVG points berekend zodat hoeken kloppen: bv. 5-12-13 → angle ≈ 22,6° const exercisesTan = [ // TAN LEVEL 1: Hoek berekenen. Opg 1-3: alleen overstaand+aanliggend, invoer zijdenaam. Opg 4-7: alle zijdes, leerling kiest. // Alle driehoeken: tangens gebruikt ALLEEN de twee rechthoekszijden (overstaand + aanliggend), NOOIT de schuine zijde. { id:’t1-1′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:0, triangle:{ points:[[50,250],[350,125],[350,250]], labels:{A:’A’,B:’B’,C:’C’}, values:{BC:5,AC:12,angleC:90}, targetAngle:’A’, rightAngle:’C’ }, given:{ sides:{BC:5,AC:12} }, target:{ type:’hoek’, label:’hoek A’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’BC’, aanliggendLabel:’AC’, steps:[“tan(A) = BC / AC = 5 / 12″,”A = tan⁻¹(5/12) ≈ 22,6°”], finalValue:22.6 }, hints:[“Kijk naar hoek A. BC ligt tegenover, AC ligt aan de hoek.”,”BC is overstaand (5), AC is aanliggend (12).”] }, { id:’t1-2′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:90, triangle:{ points:[[50,250],[350,90],[350,250]], labels:{K:’K’,L:’L’,M:’M’}, values:{LM:8,KM:15,angleM:90}, targetAngle:’K’, rightAngle:’M’ }, given:{ sides:{LM:8,KM:15} }, target:{ type:’hoek’, label:’hoek K’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’LM’, aanliggendLabel:’KM’, steps:[“tan(K) = LM / KM = 8 / 15″,”K = tan⁻¹(8/15) ≈ 28,1°”], finalValue:28.1 }, hints:[“Kijk naar hoek K. LM ligt tegenover, KM ligt aan de hoek.”,”LM is overstaand (8), KM is aanliggend (15).”] }, { id:’t1-3′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:180, triangle:{ points:[[50,250],[350,40],[350,250]], labels:{P:’P’,Q:’Q’,R:’R’}, values:{QR:7,PR:10,angleR:90}, targetAngle:’P’, rightAngle:’R’ }, given:{ sides:{QR:7,PR:10} }, target:{ type:’hoek’, label:’hoek P’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’QR’, aanliggendLabel:’PR’, steps:[“tan(P) = QR / PR = 7 / 10″,”P = tan⁻¹(7/10) ≈ 35,0°”], finalValue:35.0 }, hints:[“QR is overstaand (7), PR is aanliggend (10).”,”tan(P) = 7 / 10″] }, { id:’t1-4′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:90, triangle:{ points:[[50,250],[350,25],[350,250]], labels:{D:’D’,E:’E’,F:’F’}, values:{EF:3,DF:4,angleF:90}, targetAngle:’D’, rightAngle:’F’ }, given:{ sides:{EF:3,DF:4} }, target:{ type:’hoek’, label:’hoek D’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’EF’, aanliggendLabel:’DF’, steps:[“tan(D) = EF / DF = 3 / 4″,”D = tan⁻¹(3/4) ≈ 36,9°”], finalValue:36.9 }, hints:[“EF is overstaand (3), DF is aanliggend (4).”] }, { id:’t1-5′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:45, triangle:{ points:[[50,250],[350,100],[350,250]], labels:{X:’X’,Y:’Y’,Z:’Z’}, values:{YZ:9,XZ:12,angleZ:90}, targetAngle:’X’, rightAngle:’Z’ }, given:{ sides:{YZ:9,XZ:12} }, target:{ type:’hoek’, label:’hoek X’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’YZ’, aanliggendLabel:’XZ’, steps:[“tan(X) = YZ / XZ = 9 / 12″,”X = tan⁻¹(9/12) ≈ 36,9°”], finalValue:36.9 }, hints:[“YZ is overstaand (9), XZ is aanliggend (12).”] }, { id:’t1-6′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:0, triangle:{ points:[[50,250],[200,50],[50,50]], labels:{S:’S’,T:’T’,U:’U’}, values:{TU:12,SU:16,angleU:90}, targetAngle:’S’, rightAngle:’U’ }, given:{ sides:{TU:12,SU:16} }, target:{ type:’hoek’, label:’hoek S’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’TU’, aanliggendLabel:’SU’, steps:[“tan(S) = TU / SU = 12 / 16″,”S = tan⁻¹(12/16) ≈ 36,9°”], finalValue:36.9 }, hints:[“TU is overstaand (12), SU is aanliggend (16).”] }, { id:’t1-7′, level:1, type:’hoek’, mode:’tan’, inputMode:’type’, rotation:0, triangle:{ points:[[350,250],[50,25],[50,250]], labels:{G:’G’,H:’H’,I:’I’}, values:{HI:6,GI:8,angleI:90}, targetAngle:’G’, rightAngle:’I’ }, given:{ sides:{HI:6,GI:8} }, target:{ type:’hoek’, label:’hoek G’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’HI’, aanliggendLabel:’GI’, steps:[“tan(G) = HI / GI = 6 / 8″,”G = tan⁻¹(6/8) ≈ 36,9°”], finalValue:36.9 }, hints:[“HI is overstaand (6), GI is aanliggend (8).”] }, // TAN LEVEL 2: Zijde berekenen (alleen tangens, overstaand+aanliggend) { id:’t2-1′, level:2, type:’zijde’, mode:’tan’, rotation:90, triangle:{ points:[[50,250],[350,125],[350,250]], labels:{A:’A’,B:’B’,C:’C’}, values:{BC:’?’,AC:12,AB:13,angleA:22.6,angleC:90}, targetAngle:’A’, rightAngle:’C’ }, given:{ angle:22.6, sides:{AC:12} }, target:{ type:’zijde’, label:’BC’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’BC’, aanliggendLabel:’AC’, steps:[“tan(22,6°) = BC / 12″,”BC = tan(22,6°) × 12″,”BC ≈ 5”], finalValue:5 }, hints:[“BC is overstaand, AC is aanliggend. tan(22,6°) = BC / 12”] }, { id:’t2-2′, level:2, type:’zijde’, mode:’tan’, rotation:180, triangle:{ points:[[50,250],[350,90],[350,250]], labels:{K:’K’,L:’L’,M:’M’}, values:{LM:’?’,KM:15,KL:17,angleK:28.1,angleM:90}, targetAngle:’K’, rightAngle:’M’ }, given:{ angle:28.1, sides:{KM:15} }, target:{ type:’zijde’, label:’LM’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’LM’, aanliggendLabel:’KM’, steps:[“tan(28,1°) = LM / 15″,”LM = tan(28,1°) × 15″,”LM ≈ 8”], finalValue:8 }, hints:[“LM is overstaand, KM is aanliggend.”] }, { id:’t2-3′, level:2, type:’zijde’, mode:’tan’, rotation:270, triangle:{ points:[[50,250],[350,40],[350,250]], labels:{P:’P’,Q:’Q’,R:’R’}, values:{QR:’?’,PR:10,PQ:12.2,angleP:35,angleR:90}, targetAngle:’P’, rightAngle:’R’ }, given:{ angle:35, sides:{PR:10} }, target:{ type:’zijde’, label:’QR’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’QR’, aanliggendLabel:’PR’, steps:[“tan(35°) = QR / 10″,”QR = tan(35°) × 10″,”QR ≈ 7”], finalValue:7 }, hints:[“QR is overstaand, PR is aanliggend.”] }, { id:’t2-4′, level:2, type:’zijde’, mode:’tan’, rotation:0, triangle:{ points:[[50,250],[350,25],[350,250]], labels:{D:’D’,E:’E’,F:’F’}, values:{EF:’?’,DF:4,DE:5,angleD:36.9,angleF:90}, targetAngle:’D’, rightAngle:’F’ }, given:{ angle:36.9, sides:{DF:4} }, target:{ type:’zijde’, label:’EF’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’EF’, aanliggendLabel:’DF’, steps:[“tan(36,9°) = EF / 4″,”EF = tan(36,9°) × 4″,”EF ≈ 3”], finalValue:3 }, hints:[“EF is overstaand, DF is aanliggend.”] }, { id:’t2-5′, level:2, type:’zijde’, mode:’tan’, rotation:135, triangle:{ points:[[50,250],[350,125],[350,250]], labels:{A:’A’,B:’B’,C:’C’}, values:{AC:’?’,BC:5,AB:13,angleA:22.6,angleC:90}, targetAngle:’A’, rightAngle:’C’ }, given:{ angle:22.6, sides:{BC:5} }, target:{ type:’zijde’, label:’AC’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, overstaandLabel:’BC’, aanliggendLabel:’AC’, steps:[“tan(22,6°) = 5 / AC”,”AC = 5 / tan(22,6°)”,”AC ≈ 12″], finalValue:12 }, hints:[“BC is overstaand, AC is aanliggend. Gebruik de 6-3-2 regel: AC = 5 ÷ tan(22,6°).”] }, ]; const exercises = [ // —- LEVEL 1: Hoek berekenen —- { id:’l1-1′, level:1, type:’hoek’, rotation:0, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{A:’A’,B:’B’,C:’C’}, values:{BC:6,AB:10,angleC:90}, targetAngle:’A’, rightAngle:’C’ }, given:{ sides:{BC:6,AB:10} }, target:{ type:’hoek’, label:’hoek A’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“Kijk vanuit hoek A.”,”BC is overstaand (6).”,”AB is schuin (10).”,”sin(A) = 6/10″,”A = sin⁻¹(0,6) ≈ 36,9°”], finalValue:36.9 }, hints:[“Kijk naar hoek A.”,”BC is overstaand, AB is schuin.”,”Gebruik SOS.”] }, { id:’l1-2′, level:1, type:’hoek’, rotation:90, triangle:{ points:[[50,250],[350,100],[50,100]], labels:{K:’K’,M:’M’,L:’L’}, values:{KL:12,LM:5,angleL:90}, targetAngle:’K’, rightAngle:’L’ }, given:{ sides:{KL:12,LM:5} }, target:{ type:’hoek’, label:’hoek K’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“Kijk vanuit hoek K.”,”LM is overstaand (5).”,”KL is aanliggend (12).”,”tan(K) = 5/12″,”K = tan⁻¹(5/12) ≈ 22,6°”], finalValue:22.6 }, hints:[“Kijk naar hoek K.”,”LM is overstaand, KL is aanliggend.”,”Gebruik TOA.”] }, { id:’l1-3′, level:1, type:’hoek’, rotation:180, triangle:{ points:[[350,150],[50,250],[350,250]], labels:{Z:’Z’,X:’X’,Y:’Y’}, values:{XZ:12,YZ:9,angleY:90}, targetAngle:’Z’, rightAngle:’Y’ }, given:{ sides:{XZ:12,YZ:9} }, target:{ type:’hoek’, label:’hoek Z’ }, solution:{ ratio:’cos’, sides:{numerator:’aanliggend’,denominator:’schuin’}, steps:[“Kijk vanuit hoek Z.”,”YZ is aanliggend (9).”,”XZ is schuin (12).”,”cos(Z) = 9/12 = 0,75″,”Z = cos⁻¹(0,75) ≈ 41,4°”], finalValue:41.4 }, hints:[“Kijk naar hoek Z.”,”YZ is aanliggend, XZ is schuin.”,”Gebruik CAS.”] }, { id:’l1-4′, level:1, type:’hoek’, rotation:270, triangle:{ points:[[300,250],[50,50],[50,250]], labels:{R:’R’,P:’P’,Q:’Q’}, values:{PQ:8,QR:15,angleQ:90}, targetAngle:’R’, rightAngle:’Q’ }, given:{ sides:{PQ:8,QR:15} }, target:{ type:’hoek’, label:’hoek R’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“Kijk vanuit hoek R.”,”PQ is overstaand (8).”,”QR is aanliggend (15).”,”tan(R) = 8/15″,”R = tan⁻¹(8/15) ≈ 28,1°”], finalValue:28.1 }, hints:[“Kijk naar hoek R.”,”PQ is overstaand, QR is aanliggend.”,”Gebruik TOA.”] }, { id:’l1-5′, level:1, type:’hoek’, rotation:45, triangle:{ points:[[300,250],[50,100],[50,250]], labels:{B:’B’,C:’C’,A:’A’}, values:{AC:7,BC:12,angleA:90}, targetAngle:’B’, rightAngle:’A’ }, given:{ sides:{AC:7,BC:12} }, target:{ type:’hoek’, label:’hoek B’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“Kijk vanuit hoek B.”,”AC is overstaand (7).”,”BC is schuin (12).”,”sin(B) = 7/12″,”B = sin⁻¹(7/12) ≈ 35,7°”], finalValue:35.7 }, hints:[“Kijk naar hoek B.”,”AC is overstaand, BC is schuin.”,”Gebruik SOS.”] }, { id:’l1-6′, level:1, type:’hoek’, rotation:135, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{D:’D’,F:’F’,E:’E’}, values:{DE:14,DF:18,angleE:90}, targetAngle:’D’, rightAngle:’E’ }, given:{ sides:{DE:14,DF:18} }, target:{ type:’hoek’, label:’hoek D’ }, solution:{ ratio:’cos’, sides:{numerator:’aanliggend’,denominator:’schuin’}, steps:[“Kijk vanuit hoek D.”,”DE is aanliggend (14).”,”DF is schuin (18).”,”cos(D) = 14/18″,”D = cos⁻¹(14/18) ≈ 38,9°”], finalValue:38.9 }, hints:[“Kijk naar hoek D.”,”DE is aanliggend, DF is schuin.”,”Gebruik CAS.”] }, { id:’l1-7′, level:1, type:’hoek’, rotation:0, triangle:{ points:[[50,250],[350,100],[350,250]], labels:{S:’S’,U:’U’,T:’T’}, values:{TU:10,ST:24,angleT:90}, targetAngle:’S’, rightAngle:’T’ }, given:{ sides:{TU:10,ST:24} }, target:{ type:’hoek’, label:’hoek S’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“Kijk vanuit hoek S.”,”TU is overstaand (10).”,”ST is aanliggend (24).”,”tan(S) = 10/24″,”S = tan⁻¹(10/24) ≈ 22,6°”], finalValue:22.6 }, hints:[“Kijk naar hoek S.”,”TU is overstaand, ST is aanliggend.”,”Gebruik TOA.”] }, // —- LEVEL 2: Zijde berekenen —- { id:’l2-1′, level:2, type:’zijde’, rotation:90, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{A:’A’,B:’B’,C:’C’}, values:{BC:8,AB:’?’,angleA:30,angleC:90}, targetAngle:’A’, rightAngle:’C’ }, given:{ angle:30, sides:{BC:8} }, target:{ type:’zijde’, label:’AB’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“sin(30°) = 8 / AB”,”AB = 8 / sin(30°)”,”AB = 8 / 0,5 = 16″], finalValue:16 }, hints:[“Kijk vanuit hoek A.”,”BC is overstaand, AB is schuin.”,”Gebruik SOS en de 6-3-2 regel.”] }, { id:’l2-2′, level:2, type:’zijde’, rotation:180, triangle:{ points:[[50,250],[350,100],[50,100]], labels:{K:’K’,M:’M’,L:’L’}, values:{KL:12,LM:’?’,angleK:25,angleL:90}, targetAngle:’K’, rightAngle:’L’ }, given:{ angle:25, sides:{KL:12} }, target:{ type:’zijde’, label:’LM’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(25°) = LM / 12″,”LM = tan(25°) * 12″,”LM ≈ 0,466 * 12 ≈ 5,6”], finalValue:5.6 }, hints:[“Kijk vanuit hoek K.”,”LM is overstaand, KL is aanliggend.”,”Gebruik TOA en de 6-3-2 regel.”] }, { id:’l2-3′, level:2, type:’zijde’, rotation:270, triangle:{ points:[[350,150],[50,250],[350,250]], labels:{Z:’Z’,X:’X’,Y:’Y’}, values:{XZ:20,YZ:’?’,angleZ:40,angleY:90}, targetAngle:’Z’, rightAngle:’Y’ }, given:{ angle:40, sides:{XZ:20} }, target:{ type:’zijde’, label:’YZ’ }, solution:{ ratio:’cos’, sides:{numerator:’aanliggend’,denominator:’schuin’}, steps:[“cos(40°) = YZ / 20″,”YZ = cos(40°) * 20″,”YZ ≈ 0,766 * 20 ≈ 15,3”], finalValue:15.3 }, hints:[“Kijk vanuit hoek Z.”,”YZ is aanliggend, XZ is schuin.”,”Gebruik CAS.”] }, { id:’l2-4′, level:2, type:’zijde’, rotation:45, triangle:{ points:[[300,250],[50,50],[50,250]], labels:{R:’R’,P:’P’,Q:’Q’}, values:{PQ:’?’,PR:25,angleR:35,angleQ:90}, targetAngle:’R’, rightAngle:’Q’ }, given:{ angle:35, sides:{PR:25} }, target:{ type:’zijde’, label:’PQ’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“sin(35°) = PQ / 25″,”PQ = sin(35°) * 25″,”PQ ≈ 0,574 * 25 ≈ 14,3”], finalValue:14.3 }, hints:[“Kijk vanuit hoek R.”,”PQ is overstaand, PR is schuin.”,”Gebruik SOS.”] }, { id:’l2-5′, level:2, type:’zijde’, rotation:135, triangle:{ points:[[300,250],[50,100],[50,250]], labels:{B:’B’,C:’C’,A:’A’}, values:{AC:10,BC:’?’,angleB:50,angleA:90}, targetAngle:’B’, rightAngle:’A’ }, given:{ angle:50, sides:{AC:10} }, target:{ type:’zijde’, label:’BC’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“sin(50°) = 10 / BC”,”BC = 10 / sin(50°)”,”BC ≈ 10 / 0,766 ≈ 13,1″], finalValue:13.1 }, hints:[“Kijk vanuit hoek B.”,”AC is overstaand, BC is schuin.”,”Gebruik SOS.”] }, { id:’l2-6′, level:2, type:’zijde’, rotation:0, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{D:’D’,F:’F’,E:’E’}, values:{DE:’?’,DF:30,angleD:20,angleE:90}, targetAngle:’D’, rightAngle:’E’ }, given:{ angle:20, sides:{DF:30} }, target:{ type:’zijde’, label:’DE’ }, solution:{ ratio:’cos’, sides:{numerator:’aanliggend’,denominator:’schuin’}, steps:[“cos(20°) = DE / 30″,”DE = cos(20°) * 30″,”DE ≈ 0,940 * 30 ≈ 28,2”], finalValue:28.2 }, hints:[“Kijk vanuit hoek D.”,”DE is aanliggend, DF is schuin.”,”Gebruik CAS.”] }, { id:’l2-7′, level:2, type:’zijde’, rotation:90, triangle:{ points:[[50,250],[350,100],[350,250]], labels:{S:’S’,U:’U’,T:’T’}, values:{ST:18,TU:’?’,angleS:55,angleT:90}, targetAngle:’S’, rightAngle:’T’ }, given:{ angle:55, sides:{ST:18} }, target:{ type:’zijde’, label:’TU’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(55°) = TU / 18″,”TU = tan(55°) * 18″,”TU ≈ 1,428 * 18 ≈ 25,7”], finalValue:25.7 }, hints:[“Kijk vanuit hoek S.”,”TU is overstaand, ST is aanliggend.”,”Gebruik TOA.”] }, // —- LEVEL 3: Gemengd —- { id:’l3-1′, level:3, type:’zijde’, rotation:180, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{D:’D’,F:’F’,E:’E’}, values:{DE:15,EF:’?’,DF:17,angleD:35,angleE:90}, targetAngle:’D’, rightAngle:’E’ }, given:{ angle:35, sides:{DE:15} }, target:{ type:’zijde’, label:’EF’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(35°) = EF / 15″,”EF = tan(35°) * 15″,”EF ≈ 10,5”], finalValue:10.5 }, hints:[“Kijk vanuit hoek D.”,”DE is aanliggend, EF is overstaand.”,”Gebruik TOA.”] }, { id:’l3-2′, level:3, type:’hoek’, rotation:270, triangle:{ points:[[350,100],[50,250],[350,250]], labels:{C:’C’,A:’A’,B:’B’}, values:{AB:12,BC:5,AC:13,angleB:90}, targetAngle:’C’, rightAngle:’B’ }, given:{ sides:{AB:12,BC:5} }, target:{ type:’hoek’, label:’hoek C’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(C) = 12 / 5 = 2,4″,”C = tan⁻¹(2,4) ≈ 67,4°”], finalValue:67.4 }, hints:[“Kijk vanuit hoek C.”,”AB is overstaand, BC is aanliggend.”,”Gebruik TOA.”] }, { id:’l3-3′, level:3, type:’zijde’, rotation:45, triangle:{ points:[[50,100],[300,250],[50,250]], labels:{Z:’Z’,Y:’Y’,X:’X’}, values:{XY:’?’,XZ:14,YZ:18,angleX:90,angleZ:50}, targetAngle:’Z’, rightAngle:’X’ }, given:{ angle:50, sides:{XZ:14} }, target:{ type:’zijde’, label:’XY’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(50°) = XY / 14″,”XY = tan(50°) * 14″,”XY ≈ 16,7”], finalValue:16.7 }, hints:[“Kijk vanuit hoek Z.”,”XY is overstaand, XZ is aanliggend.”,”Gebruik TOA.”] }, { id:’l3-4′, level:3, type:’hoek’, rotation:135, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{K:’K’,M:’M’,L:’L’}, values:{KL:20,KM:25,LM:15,angleL:90}, targetAngle:’K’, rightAngle:’L’ }, given:{ sides:{KL:20,KM:25} }, target:{ type:’hoek’, label:’hoek K’ }, solution:{ ratio:’cos’, sides:{numerator:’aanliggend’,denominator:’schuin’}, steps:[“cos(K) = 20 / 25 = 0,8″,”K = cos⁻¹(0,8) ≈ 36,9°”], finalValue:36.9 }, hints:[“Kijk vanuit hoek K.”,”KL is aanliggend, KM is schuin.”,”Gebruik CAS.”] }, { id:’l3-5′, level:3, type:’zijde’, rotation:0, triangle:{ points:[[350,150],[50,250],[350,250]], labels:{P:’P’,R:’R’,Q:’Q’}, values:{PQ:22,QR:’?’,PR:26,angleQ:90,angleP:42}, targetAngle:’P’, rightAngle:’Q’ }, given:{ angle:42, sides:{PQ:22} }, target:{ type:’zijde’, label:’QR’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(42°) = QR / 22″,”QR = tan(42°) * 22″,”QR ≈ 19,8”], finalValue:19.8 }, hints:[“Kijk vanuit hoek P.”,”QR is overstaand, PQ is aanliggend.”,”Gebruik TOA.”] }, { id:’l3-6′, level:3, type:’hoek’, rotation:90, triangle:{ points:[[300,250],[50,50],[50,250]], labels:{C:’C’,A:’A’,B:’B’}, values:{AB:10,BC:24,AC:26,angleB:90}, targetAngle:’C’, rightAngle:’B’ }, given:{ sides:{AB:10,AC:26} }, target:{ type:’hoek’, label:’hoek C’ }, solution:{ ratio:’sin’, sides:{numerator:’overstaand’,denominator:’schuin’}, steps:[“sin(C) = 10 / 26″,”C = sin⁻¹(10/26) ≈ 22,6°”], finalValue:22.6 }, hints:[“Kijk vanuit hoek C.”,”AB is overstaand, AC is schuin.”,”Gebruik SOS.”] }, { id:’l3-7′, level:3, type:’zijde’, rotation:180, triangle:{ points:[[50,250],[350,50],[350,250]], labels:{U:’U’,S:’S’,T:’T’}, values:{ST:’?’,TU:12,SU:15,angleT:90,angleU:53}, targetAngle:’U’, rightAngle:’T’ }, given:{ angle:53, sides:{TU:12} }, target:{ type:’zijde’, label:’ST’ }, solution:{ ratio:’tan’, sides:{numerator:’overstaand’,denominator:’aanliggend’}, steps:[“tan(53°) = ST / 12″,”ST = tan(53°) * 12″,”ST ≈ 15,9”], finalValue:15.9 }, hints:[“Kijk vanuit hoek U.”,”ST is overstaand, TU is aanliggend.”,”Gebruik TOA.”] } ]; /* ===================== TRIANGLE VISUAL ===================== */ function TriangleVisual({ exercise, highlightedSides = [], showLabels = true }) { const { points, labels, values, targetAngle, rightAngle } = exercise.triangle; const rot = exercise.rotation || 0; const cx = (points[0][0]+points[1][0]+points[2][0])/3, cy = (points[0][1]+points[1][1]+points[2][1])/3; const pA = points[0], pB = points[1], pC = points[2]; const labelKeys = Object.keys(labels); const scale = rot ? 0.82 : 1; const vbCx = 200, vbCy = 150; const transformPoint = (p) => { if (!rot) return p; const rad = rot * Math.PI / 180; const cos = Math.cos(rad), sin = Math.sin(rad); const dx = (p[0] – cx) * scale, dy = (p[1] – cy) * scale; return [vbCx + dx*cos – dy*sin, vbCy + dx*sin + dy*cos]; }; const getMidpoint = (p1, p2) => [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2]; const getPointByLabel = (lbl) => points[labelKeys.indexOf(lbl)]; const pRight = getPointByLabel(rightAngle); const pTarget = getPointByLabel(targetAngle); const getAngle = (p1, p2) => Math.atan2(p2[1]-p1[1], p2[0]-p1[0]); const getSideLabel = (p1Idx, p2Idx) => { const ri = labelKeys.indexOf(rightAngle); const ti = labelKeys.indexOf(targetAngle); if (p1Idx !== ri && p2Idx !== ri) return ‘schuin’; if (p1Idx !== ti && p2Idx !== ti) return ‘overstaand’; if ((p1Idx===ti&&p2Idx===ri)||(p1Idx===ri&&p2Idx===ti)) return ‘aanliggend’; return null; }; const getLabelPos = (p1, p2) => { const mid = getMidpoint(p1, p2); const dx = p2[0]-p1[0], dy = p2[1]-p1[1]; const len = Math.sqrt(dx*dx+dy*dy); let nx = -dy/len, ny = dx/len; const tp = points.find(p => p !== p1 && p !== p2); if (nx*(tp[0]-mid[0]) + ny*(tp[1]-mid[1]) > 0) { nx=-nx; ny=-ny; } return [mid[0]+nx*25, mid[1]+ny*25]; }; const geomTransform = rot ? `translate(${vbCx},${vbCy}) scale(${scale}) rotate(${rot}) translate(${-cx},${-cy})` : undefined; const rightAngleMarker = (() => { const ri = labelKeys.indexOf(rightAngle); const others = [0,1,2].filter(i=>i!==ri); const p1 = points[others[0]], p2 = points[others[1]]; const v1x=p1[0]-pRight[0], v1y=p1[1]-pRight[1]; const v2x=p2[0]-pRight[0], v2y=p2[1]-pRight[1]; const l1=Math.sqrt(v1x*v1x+v1y*v1y), l2=Math.sqrt(v2x*v2x+v2y*v2y); const s=15; const u1x=(v1x/l1)*s, u1y=(v1y/l1)*s; const u2x=(v2x/l2)*s, u2y=(v2y/l2)*s; return ; })(); const targetArcData = (() => { const ti = labelKeys.indexOf(targetAngle); const others = [0,1,2].filter(i=>i!==ti); const p1=points[others[0]], p2=points[others[1]]; let a1=getAngle(pTarget,p1), a2=getAngle(pTarget,p2); let diff=a2-a1; while(diff Math.PI) diff-=2*Math.PI; const r=32; const sx=pTarget[0]+Math.cos(a1)*r, sy=pTarget[1]+Math.sin(a1)*r; const ex=pTarget[0]+Math.cos(a1+diff)*r, ey=pTarget[1]+Math.sin(a1+diff)*r; const sweep=diff>0?1:0; const tr=r+20, mid=a1+diff/2; const tx=pTarget[0]+Math.cos(mid)*tr, ty=pTarget[1]+Math.sin(mid)*tr; const angleText=exercise.given.angle?`${String(exercise.given.angle).replace(‘.’,’,’)}°`:’?°’; return { path: `M ${sx} ${sy} A ${r} ${r} 0 0 ${sweep} ${ex} ${ey}`, tx, ty, angleText }; })(); const sideLabelData = showLabels ? [ {p1:points[0],p2:points[1],val:values[labelKeys[0]+labelKeys[1]]||values[labelKeys[1]+labelKeys[0]],type:getSideLabel(0,1)}, {p1:points[1],p2:points[2],val:values[labelKeys[1]+labelKeys[2]]||values[labelKeys[2]+labelKeys[1]],type:getSideLabel(1,2)}, {p1:points[0],p2:points[2],val:values[labelKeys[0]+labelKeys[2]]||values[labelKeys[2]+labelKeys[0]],type:getSideLabel(0,2)}, ] : []; const pointLabelData = points.map((p,i)=>({ p, lbl: Object.values(labels)[i], i })); return (

  ); } /* ===================== TAN FRACTION BUILDER (Level 1 tangens) ===================== */ function TanFractionBuilder({ exercise, overstaandVal, aanliggendVal, onCorrect }) { const [topVal, setTopVal] = useState(null); const [bottomVal, setBottomVal] = useState(null); const [feedback, setFeedback] = useState(null); const correctTop = overstaandVal; const correctBottom = aanliggendVal; const opts = [correctTop, correctBottom]; const handleSlot = (slot, val) => { if(slot===’top’){ setTopVal(val); if(bottomVal!==null) check(val, bottomVal); } else{ setBottomVal(val); if(topVal!==null) check(topVal, val); } }; const check = (t,b) => { if(Number(t)===correctTop && Number(b)===correctBottom){ setFeedback({ok:true}); setTimeout(onCorrect, 1500); } else { setFeedback({ok:false}); setTimeout(()=>{ setTopVal(null); setBottomVal(null); setFeedback(null); }, 2000); } }; return (

  Vul de formule in met de juiste getallen. Zet overstaand boven de streep en aanliggend eronder.

  tan({exercise.target.label.replace(‘hoek ‘,”)}) =

  overstaand

  {topVal||’?’}

  {bottomVal||’?’}

  aanliggend

  {opts.map((v,i)=>( topVal===null?handleSlot(’top’,v):bottomVal===null?handleSlot(‘bottom’,v):null} className=”px-6 py-3 rounded-2xl font-black bg-white border-2 border-amber-200 text-amber-800 hover:border-amber-400 btn-hover btn-tap”> {v} ))} { setTopVal(null); setBottomVal(null); setFeedback(null); }} className=”px-4 py-3 rounded-2xl font-bold bg-gray-100 text-gray-500 btn-hover btn-tap”>Reset

  {feedback&&(

  {feedback.ok? Perfect! De breuk staat goed. Overstaand boven, aanliggend onder. Probeer opnieuw. )}

  ); } /* ===================== TAN SIDE FRACTION BUILDER (Level 2 tangens) ===================== */ // Vul verhouding in: hoek (graden), onbekende zijde = zijdenaam, bekende zijde = getal function TanSideFractionBuilder({ exercise, onCorrect }) { const [angleVal, setAngleVal] = useState(”); const [numVal, setNumVal] = useState(”); const [denVal, setDenVal] = useState(”); const [feedback, setFeedback] = useState(null); const sol = exercise.solution; const ovLbl = (sol.overstaandLabel||”).toUpperCase().replace(/\s/g,”); const avLbl = (sol.aanliggendLabel||”).toUpperCase().replace(/\s/g,”); const knownSides = exercise.given.sides || {}; const ovNum = knownSides[ovLbl] ?? knownSides[ovLbl.split(”).reverse().join(”)]; const avNum = knownSides[avLbl] ?? knownSides[avLbl.split(”).reverse().join(”)]; const correctAngle = exercise.given.angle; const norm = (s) => (s||”).trim().toUpperCase().replace(/\s/g,”); const check = () => { const a = angleVal.trim().replace(‘,’,’.’); const n = norm(numVal), d = norm(denVal); const aNum = parseFloat(a); const angleOk = !isNaN(aNum) && Math.abs(aNum – correctAngle) setFeedback(null), 2000); return; } if (!angleOk) { setFeedback({ok:false, msg:”De hoek klopt niet. Vul het aantal graden in (bijv. 22,6).”}); setTimeout(()=>{ setAngleVal(”); setFeedback(null); }, 2500); return; } if (nOk && dOk) { setFeedback({ok:true}); setTimeout(onCorrect, 1500); } else { setFeedback({ok:false, msg:”Nog niet goed. Onbekende zijde = letters (bijv. BC). Bekende zijde = getal.”}); setTimeout(()=>{ setNumVal(”); setDenVal(”); setFeedback(null); }, 2500); } }; return (

  Vul in: hoek (graden), zijdenaam of getal. Onbekend = letters, bekend = getal.

  tan(

  hoek° setAngleVal(e.target.value)} placeholder=”22,6″ className=”w-14 h-11 rounded-xl border-2 border-amber-300 text-center text-base font-bold focus:border-amber-500 outline-none” onKeyDown={e=>e.key===’Enter’&&check()}/>

  °) =

  overst. setNumVal(e.target.value)} placeholder=”BC” className=”w-14 h-11 rounded-xl border-2 border-amber-300 text-center text-base font-bold focus:border-amber-500 outline-none” onKeyDown={e=>e.key===’Enter’&&check()}/>

  /

  aanlig. setDenVal(e.target.value)} placeholder=”12″ className=”w-14 h-11 rounded-xl border-2 border-amber-300 text-center text-base font-bold focus:border-amber-500 outline-none” onKeyDown={e=>e.key===’Enter’&&check()}/>

  Controleer

  {feedback&&(

  {feedback.ok? Perfect! {feedback.msg} )}

  ); } /* ===================== FORMULA CARD ===================== */ const colorMap = { emerald:{ border:’#059669′, text:’#065f46′ }, amber: { border:’#f59e0b’, text:’#92400e’ }, blue: { border:’#3b82f6′, text:’#1e40af’ }, red: { border:’#ef4444′, text:’#991b1b’ }, }; function FormulaCard({ title, content, color=”emerald” }) { const c = colorMap[color]||colorMap.emerald; return (

  {title}

  {content}

  ); } /* ===================== FORMULA BUILDER ===================== */ // chosenRatio: door leerling gekozen ratio (sin/cos/tan) // knownValue: numerieke waarde van de bekende zijde // isMultiply: true = ×, false = ÷ function FormulaBuilder({ exercise, chosenRatio, knownValue, isMultiply, onCorrect }) { const [slots, setSlots] = useState([null,null,null]); const [feedback, setFeedback] = useState(null); const targetSide = exercise.target.label; const angle = exercise.given.angle; const ratioPart = `${chosenRatio}(${angle}°)`; const knownStr = String(knownValue); const options = [ratioPart, knownStr, ‘×’, ‘÷’]; const checkFormula = (currentSlots) => { if(currentSlots.includes(null)) return; const [p1,op,p2] = currentSlots; let correct = false; if(isMultiply && op===’×’ && ((p1===ratioPart&&p2===knownStr)||(p1===knownStr&&p2===ratioPart))) correct=true; if(!isMultiply && op===’÷’ && p1===knownStr && p2===ratioPart) correct=true; if(correct){ setFeedback({ msg:”Perfect! De formule staat goed.”, ok:true }); setTimeout(onCorrect, 1500); } else { setFeedback({ msg:”Nog niet helemaal. Denk aan de 6-3-2 regel.”, ok:false }); setTimeout(()=>{ setSlots([null,null,null]); setFeedback(null); }, 2000); } }; const handleClick = (opt) => { const newSlots=[…slots]; const isOp = opt===’×’||opt===’÷’; if(isOp){ newSlots[1]=opt; } else { const empty = newSlots[0]===null?0:(newSlots[2]===null?2:-1); if(empty!==-1) newSlots[empty]=opt; } setSlots(newSlots); if(!newSlots.includes(null)) checkFormula(newSlots); }; return (

  6

  De 6-3-2 Regel

  3

  {chosenRatio.toUpperCase()}

  =

  6

  2

  Zoek je de BOVENKANT (6)?

  3 × 2

  Zoek je de ONDERKANT (2)?

  6 ÷ 3

  {targetSide} =

  {[0,1,2].map(i=>(

  {slots[i]||(i===1?’?’:’…’)}

  ))}

  Klik de onderdelen in de vakjes

  {options.map((opt,i)=>( handleClick(opt)} className={`px-5 py-3 rounded-2xl font-bold transition-all shadow-sm border-2 btn-hover btn-tap ${opt===’×’||opt===’÷’?’bg-amber-50 border-amber-200 text-amber-700 hover:bg-amber-100′:’bg-white border-gray-200 text-gray-700 hover:border-emerald-500 hover:text-emerald-600′}`} >{opt} ))} { setSlots([null,null,null]); setFeedback(null); }} className=”px-5 py-3 rounded-2xl font-bold bg-gray-100 text-gray-500 hover:bg-gray-200 transition-all border-2 border-transparent btn-hover btn-tap”> Reset

  {feedback && (

  {feedback.ok?:} {feedback.msg}

  )}

  ); } /* ===================== HEADER ===================== */ function Header({ onHome, onBackToChoice }) { return (

  GonioMeester

  {onBackToChoice && ( Andere modus )} Home

  ); } /* ===================== MAIN APP ===================== */ function App() { const [mode, setMode] = useState(‘choice’); // ‘choice’ | ’tan’ | ‘all’ const [view, setView] = useState(‘home’); const [level, setLevel] = useState(1); const [exIdx, setExIdx] = useState(0); const [degWarn, setDegWarn] = useState(true); const [step, setStep] = useState(‘IDENTIFY_SIDES’); const [sel, setSel] = useState({ sides:[], ratio:null, calculation:”, sideInputOverstaand:”, sideInputAanliggend:” }); const [fb, setFb] = useState({ message:”, type:null }); const [showHint, setShowHint] = useState(false); const [hintIdx, setHintIdx] = useState(0); const [showNumberPopup, setShowNumberPopup] = useState(false); const isTanMode = mode === ’tan’; const exercisePool = isTanMode ? exercisesTan : exercises; const levelExercises = exercisePool.filter(e=>e.level===level); const currentEx = levelExercises[exIdx] || levelExercises[0]; const reset = () => { setStep(‘IDENTIFY_SIDES’); setSel({ sides:[], ratio:null, calculation:”, sideInputOverstaand:”, sideInputAanliggend:” }); setShowNumberPopup(false); setFb({ message:”, type:null }); setShowHint(false); setHintIdx(0); }; const handleLevelSelect = (l) => { setLevel(l); setExIdx(0); reset(); setView(‘exercise’); }; const handleModeSelect = (m) => { setMode(m); setLevel(1); setExIdx(0); reset(); setView(‘home’); }; /* —- HELPERS: dynamische zijde-waarden en ratio-matching —- */ // Geeft een map terug van { overstaand: waarde, aanliggend: waarde, schuin: waarde } // op basis van de driehoeksdata van de opgave. function getSideValues(ex) { const { points, labels, values, targetAngle, rightAngle } = ex.triangle; const lk = Object.keys(labels); const ri = lk.indexOf(rightAngle); const ti = lk.indexOf(targetAngle); const result = {}; [[0,1],[1,2],[0,2]].forEach(([i,j]) => { const isHyp = i !== ri && j !== ri; const isOpp = i !== ti && j !== ti; const type = isHyp ? ‘schuin’ : isOpp ? ‘overstaand’ : ‘aanliggend’; const v = values[lk[i]+lk[j]] !== undefined ? values[lk[i]+lk[j]] : values[lk[j]+lk[i]]; if (v !== undefined && v !== ‘?’ && String(v) !== ‘?’) result[type] = parseFloat(v); }); return result; } // Geeft terug welke zijdes wel een waarde hebben in de driehoek (getal of ?) – alleen die tonen bij stap 1 function getVisibleSides(ex) { const { points, labels, values, targetAngle, rightAngle } = ex.triangle; const lk = Object.keys(labels); const ri = lk.indexOf(rightAngle); const ti = lk.indexOf(targetAngle); const result = []; [[0,1],[1,2],[0,2]].forEach(([i,j]) => { const isHyp = i !== ri && j !== ri; const isOpp = i !== ti && j !== ti; const type = isHyp ? ‘schuin’ : isOpp ? ‘overstaand’ : ‘aanliggend’; const v = values[lk[i]+lk[j]] !== undefined ? values[lk[i]+lk[j]] : values[lk[j]+lk[i]]; if (v !== undefined) result.push(type); // heeft getal of ? }); return result; } // Geeft de juiste verhouding terug voor een paar zijdes function getRatioForSides(sides) { const s = sides.slice().sort().join(‘-‘); if (s === ‘overstaand-schuin’) return ‘sin’; if (s === ‘aanliggend-schuin’) return ‘cos’; if (s === ‘aanliggend-overstaand’) return ’tan’; return null; } // Geeft terug of de formule een × of ÷ is op basis van doelzijde en bekende zijde function getOperation(targetType, knownType) { if ((targetType===’overstaand’ && knownType===’schuin’) || (targetType===’aanliggend’ && knownType===’schuin’) || (targetType===’overstaand’ && knownType===’aanliggend’)) return ‘×’; return ‘÷’; } // Bereken de verwachte uitkomst voor een zijde-opgave op basis van gekozen aanpak function computeZijdeAnswer(angle, targetType, knownType, knownVal) { const r = angle * Math.PI / 180; if (targetType===’overstaand’ && knownType===’schuin’) return knownVal * Math.sin(r); if (targetType===’aanliggend’ && knownType===’schuin’) return knownVal * Math.cos(r); if (targetType===’overstaand’ && knownType===’aanliggend’) return knownVal * Math.tan(r); if (targetType===’schuin’ && knownType===’overstaand’) return knownVal / Math.sin(r); if (targetType===’schuin’ && knownType===’aanliggend’) return knownVal / Math.cos(r); if (targetType===’aanliggend’ && knownType===’overstaand’) return knownVal / Math.tan(r); return null; } const nextStep = () => { const tanHoekSteps = [‘IDENTIFY_SIDES’,’WRITE_FORMULA’,’CALCULATE’,’FINISHED’]; const tanZijdeSteps = [‘IDENTIFY_SIDES’,’WRITE_FORMULA_ZIJDE’,’REARRANGE’,’CALCULATE’,’FINISHED’]; const normalSteps = [‘IDENTIFY_SIDES’,’CHOOSE_RATIO’,’REARRANGE’,’CALCULATE’,’FINISHED’]; const steps = (isTanMode && currentEx.type===’hoek’) ? tanHoekSteps : (isTanMode && level===2 && currentEx.type===’zijde’) ? tanZijdeSteps : normalSteps; let ni = steps.indexOf(step)+1; if(steps[ni]===’REARRANGE’ && currentEx.type===’hoek’) ni++; if(ni({…p, ratio:’tan’, sides:[‘overstaand’,’aanliggend’]})); setFb({ message:”, type:null }); }; const checkSides = (side) => { if(sel.sides.includes(side)){ setSel(p=>({…p, sides:p.sides.filter(s=>s!==side)})); return; } const newSides=[…sel.sides,side]; setSel(p=>({…p, sides:newSides})); if(newSides.length===2){ const sv = getSideValues(currentEx); const visibleSides = (!isTanMode&&(level===2||level===3)&&currentEx.type===’zijde’) ? getVisibleSides(currentEx) : null; if(currentEx.type===’hoek’){ if(newSides.every(s=>sv[s]!==undefined)){ setFb({ message:”Goed zo! Je hebt de juiste zijdes gekozen.”, type:’success’ }); setTimeout(nextStep, 1500); } else { setFb({ message:”Niet helemaal. Kies twee zijdes waarvan je de waarde weet.”, type:’error’ }); setTimeout(()=>{ setSel(p=>({…p,sides:[]})); setFb({message:”,type:null}); }, 2000); } } else { // Bij level 2/3 “alles”: alleen zijdes uit het figuur (getal of ?) goedkeuren if(visibleSides && !newSides.every(s=>visibleSides.includes(s))){ setFb({ message:”Kies alleen zijdes die in het figuur staan (met getal of ?).”, type:’error’ }); setTimeout(()=>{ setSel(p=>({…p,sides:[]})); setFb({message:”,type:null}); }, 2000); return; } // Zijde-opgaven: één onbekende (de doelzijde) + één bekende const unknownCount = newSides.filter(s=>sv[s]===undefined).length; const knownCount = newSides.filter(s=>sv[s]!==undefined).length; if(unknownCount===1 && knownCount===1){ setFb({ message:”Goed zo! Je hebt de juiste zijdes gekozen.”, type:’success’ }); setTimeout(nextStep, 1500); } else if(unknownCount===0){ setFb({ message:”Kies ook de onbekende zijde die je wilt berekenen.”, type:’error’ }); setTimeout(()=>{ setSel(p=>({…p,sides:[]})); setFb({message:”,type:null}); }, 2000); } else { setFb({ message:”Niet helemaal. Kies één bekende en één onbekende zijde.”, type:’error’ }); setTimeout(()=>{ setSel(p=>({…p,sides:[]})); setFb({message:”,type:null}); }, 2000); } } } }; const checkSideInput = () => { const ov = (sel.sideInputOverstaand||”).trim().toUpperCase().replace(/\s/g,”); const av = (sel.sideInputAanliggend||”).trim().toUpperCase().replace(/\s/g,”); const hasNumbers = /\d/.test(ov) || /\d/.test(av); if(hasNumbers){ setShowNumberPopup(true); return; } const correctOv = (currentEx.solution.overstaandLabel||”).toUpperCase().replace(/\s/g,”); const correctAv = (currentEx.solution.aanliggendLabel||”).toUpperCase().replace(/\s/g,”); if(!ov||!av){ setFb({ message:”Vul beide zijdenamen in.”, type:’error’ }); return; } const ovOk = (ov===correctOv||ov===correctOv.split(”).reverse().join(”)); const avOk = (av===correctAv||av===correctAv.split(”).reverse().join(”)); if(ovOk&&avOk){ setSel(p=>({…p,sides:[‘overstaand’,’aanliggend’]})); setFb({ message:`Goed! ${currentEx.solution.overstaandLabel} is overstaand, ${currentEx.solution.aanliggendLabel} is aanliggend.`, type:’success’ }); setTimeout(nextStep, 1500); } else { setFb({ message:”Niet helemaal. Kijk goed: welke zijde ligt tegenover de hoek? Welke ligt aan de hoek?”, type:’error’ }); setTimeout(()=>setFb({message:”,type:null}), 2500); } }; const checkRatio = (ratio) => { setSel(p=>({…p,ratio})); // De juiste verhouding wordt altijd bepaald door de gekozen zijdes (SOS/CAS/TOA) const expectedRatio = getRatioForSides(sel.sides); if(ratio===expectedRatio){ setFb({ message:`Correct! Voor ${sel.sides[0]} en ${sel.sides[1]} gebruik je ${ratio.toUpperCase()}.`, type:’success’ }); setTimeout(nextStep, 1500); } else { setFb({ message:`Nee, denk aan SOS CAS TOA. Welke regel hoort bij ${sel.sides[0]} en ${sel.sides[1]}?`, type:’error’ }); setTimeout(()=>{ setSel(p=>({…p,ratio:null})); setFb({message:”,type:null}); }, 2000); } }; const checkCalculation = () => { const val=parseFloat(sel.calculation.replace(‘,’,’.’)); if(isNaN(val)){ setFb({ message:”Vul een geldig getal in.”, type:’error’ }); return; } const sv = getSideValues(currentEx); let expected = currentEx.solution.finalValue; if(currentEx.type===’hoek’ && sel.sides.length===2 && sel.ratio){ const o=sv[‘overstaand’], a=sv[‘aanliggend’], s=sv[‘schuin’]; const R2D = 180/Math.PI; if(sel.ratio===’sin’ && o!==undefined && s!==undefined) expected = Math.asin(o/s)*R2D; if(sel.ratio===’cos’ && a!==undefined && s!==undefined) expected = Math.acos(a/s)*R2D; if(sel.ratio===’tan’ && o!==undefined && a!==undefined) expected = Math.atan(o/a)*R2D; } else if(currentEx.type===’zijde’ && sel.sides.length===2 && sel.ratio){ const targetType = sel.sides.find(s=>sv[s]===undefined); const knownType = sel.sides.find(s=>sv[s]!==undefined); if(targetType && knownType){ const computed = computeZijdeAnswer(currentEx.given.angle, targetType, knownType, sv[knownType]); if(computed!==null) expected = computed; } } if(Math.abs(val – expected) < 0.5){ setFb({ message:"Helemaal goed! Nu nog even afronden.", type:'success' }); setTimeout(nextStep, 1500); } else { setFb({ message:"Dat klopt niet helemaal. Heb je de juiste formule gebruikt? Staat je rekenmachine op GRADEN (DEG)?", type:'error' }); } }; /* —- STEP NUMBER LABEL —- */ const stepNum = (isTanMode&&currentEx.type==='hoek') ? (step==='IDENTIFY_SIDES'?1:step==='WRITE_FORMULA'?2:step==='CALCULATE'?3:step==='FINISHED'?'✓':'') : (isTanMode&&level===2&&currentEx.type==='zijde') ? (step==='IDENTIFY_SIDES'?1:step==='WRITE_FORMULA_ZIJDE'?2:step==='REARRANGE'?3:step==='CALCULATE'?4:step==='FINISHED'?'✓':'') : (step==='IDENTIFY_SIDES'?1:step==='CHOOSE_RATIO'?2:step==='REARRANGE'?3:step==='CALCULATE'?(currentEx.type==='hoek'?3:4):step==='FINISHED'?'✓':''); /* —- MODE CHOICE VIEW (eerste scherm) —- */ if(view==='choice' || mode==='choice') return (

  GonioMeester

  Waar wil je mee oefenen?

  Kies wat bij jou past.

  handleModeSelect(’tan’)} className=”flex items-center gap-4 p-8 bg-amber-50 border-2 border-amber-200 rounded-3xl text-left hover:bg-amber-100 hover:border-amber-300 transition-all btn-hover btn-tap”>

  tan

  Alleen met de tangens

  Eerst goed oefenen met tangens. Level 1: hoek berekenen. Level 2: zijde berekenen.

  handleModeSelect(‘all’)} className=”flex items-center gap-4 p-8 bg-white border-2 border-gray-200 rounded-3xl text-left hover:bg-gray-50 hover:border-emerald-300 transition-all btn-hover btn-tap”>

  sin cos tan

  Met tangens, cosinus en sinus

  Alles door elkaar. Level 1: hoeken. Level 2: zijdes. Level 3: gemengd.

  ); /* —- HOME VIEW —- */ if(view===’home’) return (

  setView(‘home’)} onBackToChoice={mode!==’choice’?()=>setMode(‘choice’):null}/>

  {isTanMode?’Tangens oefenen’:’Goniometrie voor Beginners’}

  {isTanMode?’Oefen stap voor stap met de tangens. Eerst hoeken berekenen, daarna zijdes.’ :’Welkom bij GonioMeester. We gaan stap voor stap leren hoe je hoeken en zijdes berekent in een rechthoekige driehoek.’}

  {(isTanMode ? [ { id:1, title:”Level 1″, desc:”Hoek berekenen met tangens”, icon:, color:”bg-amber-500″ }, { id:2, title:”Level 2″, desc:”Zijde berekenen met tangens”, icon:, color:”bg-amber-600″ }, ] : [ { id:1, title:”Level 1″, desc:”Hoeken berekenen”, icon:, color:”bg-blue-500″ }, { id:2, title:”Level 2″, desc:”Zijdes berekenen”, icon:, color:”bg-emerald-500″ }, { id:3, title:”Level 3″, desc:”Alles door elkaar”, icon:, color:”bg-purple-500″ }, ]).map((l,i)=>(

  handleLevelSelect(l.id)} className=”bg-white p-8 rounded-3xl shadow-xl border border-gray-100 cursor-pointer group hover:shadow-2xl transition-all btn-hover btn-tap fade-in” style={{animationDelay:`${i*0.1}s`}}>

  {l.icon}

  {l.title}

  {l.desc}

  Starten

  ))}

  setView(’theory’)} className=”flex items-center justify-center gap-3 p-6 bg-gray-900 text-white rounded-2xl font-bold hover:bg-gray-800 transition-colors btn-hover btn-tap”> Bekijk de Theorie setView(‘examples’)} className=”flex items-center justify-center gap-3 p-6 bg-white border-2 border-gray-900 text-gray-900 rounded-2xl font-bold hover:bg-gray-50 transition-colors btn-hover btn-tap”> Bekijk Voorbeelden

  {degWarn&&(

  Let op: Zet je rekenmachine op GRADEN (DEG)! setDegWarn(false)} className=”ml-2 p-1 hover:bg-white/10 rounded-full transition-colors”>

  )}

  ); /* —- THEORY VIEW —- */ if(view===’theory’) return (

  setView(‘home’)} onBackToChoice={mode!==’choice’?()=>setMode(‘choice’):null}/>

  setView(‘home’)} className=”flex items-center gap-2 text-gray-500 mb-8 hover:text-gray-900″> Terug naar Home

  De Basis van Goniometrie

  De Namen van de Zijdes

  In een rechthoekige driehoek hebben de zijdes namen die afhangen van de hoek waar je naar kijkt.

  SOS CAS TOA

  Dit is het belangrijkste ezelsbruggetje om te onthouden welke formule je nodig hebt.

  SOS

  Sinus = Overstaand / Schuin

  CAS

  Cosinus = Aanliggend / Schuin

  TOA

  Tangens = Overstaand / Aanliggend

  De 6-3-2 Regel

  Als je een zijde moet berekenen, moet je de formule vaak omschrijven. Gebruik dit simpele voorbeeld als hulp:

  6 = 3 × 2

  Zoek je de bovenkant? (6)

  Dan doe je de andere twee keer elkaar:
  3 × 2 = 6

  Zoek je de onderkant? (2)

  Dan deel je de bovenkant door de rest:
  6 ÷ 3 = 2

  ); /* —- EXAMPLES VIEW —- */ if(view===’examples’) return (

  setView(‘home’)} onBackToChoice={mode!==’choice’?()=>setMode(‘choice’):null}/>

  setView(‘home’)} className=”flex items-center gap-2 text-gray-500 mb-8 hover:text-gray-900″> Terug naar Home

  Uitgewerkte Voorbeelden

  {[ { title:”Hoek berekenen (Level 1)”, desc:”Je weet de overstaande zijde (6) en de schuine zijde (10).”, steps:[“Stap 1: Welke zijdes heb je? Overstaand en Schuin.”,”Stap 2: Welke regel? SOS (Sinus = Overstaand / Schuin).”,”Stap 3: Invullen: sin(A) = 6 / 10.”,”Stap 4: Hoek berekenen: A = sin⁻¹(0,6).”,”Stap 5: Antwoord: hoek A ≈ 36,9°.”] }, { title:”Zijde berekenen (Level 2) – Bovenkant”, desc:”Je weet hoek A (30°) en de aanliggende zijde (10). Je zoekt de overstaande zijde.”, steps:[“Stap 1: Welke regel? TOA (tan(30°) = overstaand / 10).”,”Stap 2: Omschrijven met 6-3-2: 6 = 3 * 2.”,”Stap 3: overstaand = tan(30°) * 10.”,”Stap 4: Uitkomst: overstaand ≈ 0,577 * 10 ≈ 5,8.”] }, { title:”Zijde berekenen (Level 2) – Onderkant”, desc:”Je weet hoek A (40°) en de overstaande zijde (5). Je zoekt de aanliggende zijde.”, steps:[“Stap 1: Welke regel? TOA (tan(40°) = 5 / aanliggend).”,”Stap 2: Omschrijven met 6-3-2: 2 = 6 / 3.”,”Stap 3: aanliggend = 5 / tan(40°).”,”Stap 4: Uitkomst: aanliggend ≈ 5 / 0,839 ≈ 6,0.”] } ].map((ex,i)=>(

  {ex.title}

  {ex.desc}

  {ex.steps.map((s,j)=>(

  •

  {s}

  ))}

  ))}

  ); /* —- EXERCISE VIEW —- */ const totalEx = levelExercises.length; return (

  setView(‘home’)} onBackToChoice={mode!==’choice’?()=>setMode(‘choice’):null}/>

  {/* Nav bar */}

  setView(‘home’)} className=”p-2 hover:bg-gray-100 rounded-xl transition-colors text-gray-500″ title=”Terug naar menu”>

  Level {level} Opgave {exIdx+1} van {totalEx}

  { setExIdx(p=>p-1); reset(); }} className=”p-2 hover:bg-gray-100 rounded-xl transition-colors disabled:opacity-30 disabled:cursor-not-allowed”>

  {levelExercises.map((_,i)=>(

  ))}

  { setExIdx(p=>p+1); reset(); }} className=”p-2 hover:bg-gray-100 rounded-xl transition-colors disabled:opacity-30 disabled:cursor-not-allowed”>

  {/* Left: Triangle + buttons */}

  {currentEx.type===’hoek’?’Bereken ‘:’Bereken zijde ‘} {currentEx.target.label}.

  setShowHint(true)} className=”flex items-center gap-2 px-6 py-3 bg-amber-50 text-amber-700 rounded-2xl font-bold hover:bg-amber-100 transition-colors btn-hover btn-tap”> Hint nodig? Opnieuw setFb({ message:currentEx.solution.steps.join(‘\n’), type:’info’ })} className=”flex items-center gap-2 px-6 py-3 bg-blue-50 text-blue-700 rounded-2xl font-bold hover:bg-blue-100 transition-colors btn-hover btn-tap”> Toon uitwerking

  {showHint&&(

  setShowHint(false)} className=”absolute top-4 right-4 text-amber-400 hover:text-amber-600″>

  Hint {hintIdx+1}

  {currentEx.hints[hintIdx]}

  {hintIdx<currentEx.hints.length-1&&( setHintIdx(p=>p+1)} className=”bg-amber-200 text-amber-800 px-6 py-2 rounded-xl font-bold hover:bg-amber-300 transition-colors btn-hover btn-tap”>Nog een hint )}

  )}

  {/* Right: Stepplan (breder bij Tangens level 2) */}

  Stappenplan

  Stap {stepNum}

  {/* Step 1 */}

  1

  {((isTanMode&&currentEx.type===’hoek’) || (isTanMode&&level===2&&currentEx.type===’zijde’)) ?’Vul de naam in van de overstaande en aanliggende zijde’ :’Welke zijdes weet je?’}

  {step===’IDENTIFY_SIDES’&&(

  {((isTanMode&&currentEx.type===’hoek’) || (isTanMode&&level===2&&currentEx.type===’zijde’)) ? (

  Typ de letters van de zijde (bijv. BC of CB), niet de getallen.

  Overstaande zijde setSel(p=>({…p,sideInputOverstaand:e.target.value}))} placeholder=”bijv. BC” className=”w-full p-4 border-2 border-gray-200 rounded-2xl focus:border-emerald-500 outline-none font-mono text-lg” onKeyDown={e=>e.key===’Enter’&&checkSideInput()}/>

  Aanliggende zijde setSel(p=>({…p,sideInputAanliggend:e.target.value}))} placeholder=”bijv. AC” className=”w-full p-4 border-2 border-gray-200 rounded-2xl focus:border-emerald-500 outline-none font-mono text-lg” onKeyDown={e=>e.key===’Enter’&&checkSideInput()}/>

  Controleer

  {(isTanMode&&level===2 ? [‘overstaand’,’aanliggend’] : [‘overstaand’,’aanliggend’,’schuin’]).map(s=>( checkSides(s)} className={`p-4 rounded-2xl border-2 text-left transition-all ${sel.sides.includes(s)?’border-emerald-500 bg-emerald-50 text-emerald-700 font-bold shadow-inner’:’border-gray-100 hover:border-gray-200 bg-gray-50/50′}`}>

  {s.charAt(0).toUpperCase()+s.slice(1)} {sel.sides.includes(s)&&}

  ))}

  {isTanMode&&level===2 ? ‘Selecteer overstaand en aanliggend (alleen tangens).’ : (!isTanMode&&(level===2||level===3)&&currentEx.type===’zijde’) ? ‘Selecteer twee zijdes. Alleen zijdes uit het figuur (getal of ?) worden goedgekeurd.’ : ‘Selecteer de twee zijdes die je gaat gebruiken.’}

  )}

  {/* Step 2: WRITE_FORMULA (alleen tangens Level 1) */} {(isTanMode&&currentEx.type===’hoek’)&&(

  2

  Vul de formule in met de juiste getallen

  {step===’WRITE_FORMULA’&&(()=>{ const sv = getSideValues(currentEx); return ; })()}

  )} {/* Step 2: WRITE_FORMULA_ZIJDE (alleen tangens Level 2) */} {(isTanMode&&level===2&&currentEx.type===’zijde’)&&(

  2

  Vul in: hoek (°), overstaand en aanliggend

  {step===’WRITE_FORMULA_ZIJDE’&&( )}

  )} {/* Step 2: CHOOSE_RATIO (niet bij tangens Level 1, niet bij tangens Level 2) */} {!(isTanMode&&currentEx.type===’hoek’)&&!(isTanMode&&level===2&&currentEx.type===’zijde’)&&(

  2

  Welke verhouding?

  {step===’CHOOSE_RATIO’&&(

  {[‘sin’,’cos’,’tan’].map(r=>( checkRatio(r)} className={`p-4 rounded-2xl border-2 text-center font-black transition-all btn-hover btn-tap ${sel.ratio===r?’border-emerald-500 bg-emerald-50 text-emerald-700 shadow-inner’:’border-gray-100 hover:border-gray-200 bg-gray-50/50′}`}> {r.toUpperCase()} ))}

  )}

  )} {/* Step 3: Rearrange (Level 2/3, zijde only) */} {(level===2||level===3)&&currentEx.type===’zijde’&&(

  3

  Formule omschrijven

  {step===’REARRANGE’&&(()=>{ const sv = getSideValues(currentEx); const targetType = sel.sides.find(s=>sv[s]===undefined) || currentEx.solution.sides.numerator; const knownType = sel.sides.find(s=>sv[s]!==undefined) || currentEx.solution.sides.denominator; const knownVal = sv[knownType] ?? Object.values(currentEx.given.sides)[0]; const op = getOperation(targetType, knownType); return ; })()}

  )} {/* Step 4: Calculate */}

  {(isTanMode&&currentEx.type===’hoek’)?3:(level===1?3:4)}

  Reken het uit

  {step===’CALCULATE’&&(()=>{ const sv4 = getSideValues(currentEx); let formulaLine = null; if(currentEx.type===’zijde’ && sel.sides.length===2){ const tgt4 = sel.sides.find(s=>sv4[s]===undefined); const kn4 = sel.sides.find(s=>sv4[s]!==undefined); if(tgt4 && kn4){ const op4 = getOperation(tgt4, kn4); const kv4 = sv4[kn4]; const r4 = sel.ratio||’?’; const ang4 = currentEx.given.angle; formulaLine = `${currentEx.target.label} = ${kv4} ${op4} ${r4}(${ang4}°)`; } } else if(currentEx.type===’hoek’ && sel.ratio){ const o=sv4[‘overstaand’], a=sv4[‘aanliggend’], s=sv4[‘schuin’]; const r4=sel.ratio, lbl4=currentEx.target.label; if(r4===’sin’&&o!==undefined&&s!==undefined) formulaLine=`${lbl4} = sin⁻¹(${o} / ${s})`; else if(r4===’cos’&&a!==undefined&&s!==undefined) formulaLine=`${lbl4} = cos⁻¹(${a} / ${s})`; else if(r4===’tan’&&o!==undefined&&a!==undefined) formulaLine=`${lbl4} = tan⁻¹(${o} / ${a})`; } return (

  {(isTanMode&&currentEx.type===’hoek’&&level===1&&(exIdx===0||exIdx===1)) ? (

  Gebruik tan⁻¹ op je rekenmachine:

  1. Deel eerst overstaand door aanliggend (bijv. {sv4.overstaand}/{sv4.aanliggend} = {(sv4.overstaand/sv4.aanliggend).toFixed(3).replace(‘.’,’,’)})
  2. Druk op 2nd of SHIFT
  3. Druk daarna op tan (je ziet nu tan⁻¹)
  4. Typ de uitkomst van de breuk (bijv. {(sv4.overstaand/sv4.aanliggend).toFixed(3).replace(‘.’,’,’)})
  5. Druk op = → je krijgt de hoek in graden

  tan⁻¹({(sv4.overstaand/sv4.aanliggend).toFixed(3).replace(‘.’,’,’)}) ≈ {currentEx.solution.finalValue}°

  ) : (isTanMode&&currentEx.type===’hoek’) ? (

  Bereken de hoek met tan⁻¹ op je rekenmachine. Deel overstaand door aanliggend, druk dan 2nd+tan.

  ) : formulaLine ? (

  Bereken met je rekenmachine:

  {formulaLine}

  ) : (

  {currentEx.type===’hoek’ ? `Bereken de hoek met de inverse functie: ${sel.ratio||’sin’}⁻¹(…)` : ‘Bereken de zijde met je rekenmachine.’}

  )}

  Jouw antwoord

  setSel(p=>({…p,calculation:e.target.value}))} onKeyDown={e=>e.key===’Enter’&&checkCalculation()} placeholder=”Bijv. 36.9″ className=”flex-grow p-4 border-2 border-gray-100 rounded-2xl focus:border-emerald-500 outline-none text-xl font-bold transition-all shadow-sm”/> Check

  { const sv=getSideValues(currentEx); let ans=currentEx.solution.finalValue; if(currentEx.type===’hoek’&&sel.ratio){ const o=sv[‘overstaand’],a=sv[‘aanliggend’],s=sv[‘schuin’],R2D=180/Math.PI; if(sel.ratio===’sin’&&o&&s) ans=Math.asin(o/s)*R2D; if(sel.ratio===’cos’&&a&&s) ans=Math.acos(a/s)*R2D; if(sel.ratio===’tan’&&o&&a) ans=Math.atan(o/a)*R2D; } else if(currentEx.type===’zijde’&&sel.sides.length===2){ const tgt=sel.sides.find(s=>sv[s]===undefined); const kn=sel.sides.find(s=>sv[s]!==undefined); if(tgt&&kn){const c=computeZijdeAnswer(currentEx.given.angle,tgt,kn,sv[kn]);if(c!==null)ans=c;} } setFb({message:`Het antwoord is: ${Math.round(ans*10)/10}`,type:’info’}); }} className=”text-xs font-bold text-emerald-600 hover:underline”>Klik hier voor het antwoord

  Rond af op 1 decimaal.

  ); })()}

  {/* Finished */} {step===’FINISHED’&&(

  Lekker bezig!

  Je hebt deze opgave perfect opgelost.

  { if(exIdxp+1); reset(); } else { setView(‘home’); } }} className=”w-full bg-emerald-600 text-white py-5 rounded-3xl font-black text-xl hover:bg-emerald-700 shadow-xl transition-all btn-tap flex items-center justify-center gap-3″> {exIdx<totalEx-1?Volgende Opgave

  )}

  {/* Feedback */} {fb.message&&(

  {fb.type===’success’?:fb.type===’error’?:}

  {fb.message}

  )}

  {showNumberPopup&&(

  setShowNumberPopup(false)}>

  e.stopPropagation()}>

  Geen getallen!

  Vul de namen van de zijdes in (de letters, bijv. BC of AC), niet de getallen.

  setShowNumberPopup(false)} className=”w-full bg-amber-500 text-white py-3 rounded-xl font-bold hover:bg-amber-600 transition-colors”> Oké, ik vul de letters in

  )} {degWarn&&(

  Let op: Zet je rekenmachine op GRADEN (DEG)! setDegWarn(false)} className=”ml-2 p-1 hover:bg-white/10 rounded-full transition-colors”>

  )}

  ); } ReactDOM.createRoot(document.getElementById(‘root’)).render();

• Heksenketel

  :root { –accent: #6d28d9; –accent2: #9333ea; –border: #dbe7ff; –shadow: 0 10px 24px rgba(80,70,150,0.12); } * { box-sizing: border-box; } body { margin: 0; font-family: “Segoe UI”, Arial, sans-serif; background: radial-gradient(circle at 15% 10%, #ecf6ff 0%, #f8fbff 45%, #f5efff 100%); color: #1f2a37; line-height: 1.45; } .container { max-width: 860px; margin: 24px auto; padding: 16px; } .card { background: #fff; border: 2px solid var(–border); border-radius: 18px; padding: 24px; box-shadow: var(–shadow); } h1 { margin: 0 0 16px; font-size: clamp(1.4rem, 3vw, 2rem); color: #3f238f; text-align: center; } /* Status pills */ .status { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-weight: 600; font-size: 1rem; } .pill { background: #eef2ff; border: 1px solid #cdd8ff; border-radius: 999px; padding: 7px 14px; } /* Vraag */ .question { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: #351b7a; text-align: center; margin: 0 0 18px; } /* Invulrij */ .input-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; } input[type=”text”] { width: 100%; font-size: 1.2rem; padding: 12px 14px; border: 2px solid #c8d5ff; border-radius: 10px; outline: none; } input[type=”text”]:focus { border-color: var(–accent); box-shadow: 0 0 0 4px rgba(109,40,217,0.12); } /* Knoppen */ button { border: none; border-radius: 10px; padding: 12px 18px; font-size: 1rem; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(–accent) 0%, var(–accent2) 100%); transition: transform 0.06s ease; min-height: 46px; } button:hover { transform: translateY(-1px); } button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-hint { background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%); } #nextBtn { display: none; margin-top: 10px; } /* Feedback */ .feedback { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 1rem; } .feedback.ok { display: block; background: #ecfff2; border: 2px solid #b9f2cb; color: #0d7e45; font-weight: 700; } .feedback.err { display: block; background: #fff8eb; border: 2px solid #ffe3b0; color: #8a5a07; } .feedback.info { display: block; background: #eef6ff; border: 2px solid #cde4ff; color: #1d4f91; } .steps { margin: 8px 0 0; padding-left: 20px; } .steps li { margin: 4px 0; } /* Hint */ .hint { display: none; margin-top: 14px; border: 2px dashed #b8caf9; background: #f3f7ff; border-radius: 12px; padding: 14px; } .hint h2 { margin: 0 0 8px; font-size: 1.1rem; color: #224a96; } .hint h3 { margin: 12px 0 6px; font-size: 1rem; color: #224a96; } .hint ul { margin: 4px 0 10px; padding-left: 22px; } .hint li { margin: 4px 0; } .hint p { margin: 8px 0; } /* Eindscherm */ .result { display: none; margin-top: 16px; border: 2px solid #d4c9ff; background: linear-gradient(135deg, #f5f0ff 0%, #eef6ff 100%); border-radius: 18px; padding: 28px 24px; text-align: center; } .result-title { margin: 0 0 18px; font-size: 1.6rem; font-weight: 900; color: #3f238f; } .result-cijfer { display: inline-block; font-size: clamp(3.5rem, 10vw, 5.5rem); font-weight: 900; color: #fff; background: linear-gradient(135deg, var(–accent), var(–accent2)); border-radius: 20px; padding: 16px 36px; margin: 0 0 18px; box-shadow: 0 8px 24px rgba(109,40,217,0.3); line-height: 1; } .result-score { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; color: #3f238f; margin: 0 0 10px; } .result-formula { font-size: 0.95rem; color: #6b7280; margin: 0 0 16px; } .result-boodschap { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; color: #166534; background: #ecfff2; border: 2px solid #b9f2cb; border-radius: 12px; padding: 12px 18px; margin: 0 0 20px; display: inline-block; } @media (max-width: 680px) { .input-row { grid-template-columns: 1fr; } button { width: 100%; } .result { padding: 20px 14px; } }

  Heksenketel: rekenen met negatieve getallen

  Opgave 1 van 35 Punten: 0 / 35

  Hint

  Uitleg: twee soorten sommen

  Temperatuursommen (enkel + of −)

  Denk aan een thermometer. De uitkomst stijgt of daalt.

  • Enkel +: het wordt warmer → uitkomst gaat omhoog.
  • Enkel −: het wordt kouder → uitkomst gaat omlaag.

  Voorbeeld: 10 − 13 → het wordt 13 graden kouder → uitkomst is −3.

  Heksenketelsommen (tekencombinatie)

  Bij sommen met twee tekens achter elkaar (zoals −+, +−, −−) denk je in blokjes:

  • Warme blokjes = positief, koude blokjes = negatief.
  • In de ketel doen = optellen, uit de ketel halen = aftrekken.
  • Warme blokjes erbij → warmer → omhoog.
  • Koude blokjes erbij → kouder → omlaag.
  • Warme blokjes eruit → kouder → omlaag.
  • Koude blokjes eruit → warmer → omhoog.

  Voorbeeld: 8 − −10 = 18 → je haalt 10 koude blokjes eruit → warmer → omhoog.

  Voorbeeld: 9 − +1 = 8 → je haalt 1 warm blokje eruit → kouder → omlaag.

  Controleer Volgende opgave

  Ronde klaar!

  Opnieuw spelen

  // ── OPGAVEN ────────────────────────────────────────────────────────────── // Eerste 30 originele sommen + 5 nieuwe – + varianten. // Wil je sommen toevoegen? Voeg gewoon een object toe: { som: “…”, antwoord: getal } const opgaven = [ { som: “7 + -12”, antwoord: -5 }, { som: “8 – -10”, antwoord: 18 }, { som: “-6 + 9”, antwoord: 3 }, { som: “15 – 22”, antwoord: -7 }, { som: “-4 – 11”, antwoord: -15 }, { som: “13 + -8”, antwoord: 5 }, { som: “-9 – -7”, antwoord: -2 }, { som: “5 – +10”, antwoord: -5 }, { som: “-12 + 5”, antwoord: -7 }, { som: “18 + -20”, antwoord: -2 }, { som: “-3 – -9”, antwoord: 6 }, { som: “14 – -6”, antwoord: 20 }, { som: “-15 + 4”, antwoord: -11 }, { som: “6 + -6”, antwoord: 0 }, { som: “-8 – 5”, antwoord: -13 }, { som: “20 – -4”, antwoord: 24 }, { som: “-11 + -7”, antwoord: -18 }, { som: “9 – 13”, antwoord: -4 }, { som: “-2 – -8”, antwoord: 6 }, { som: “17 + -3”, antwoord: 14 }, { som: “-14 – -2”, antwoord: -12 }, { som: “4 + -15”, antwoord: -11 }, { som: “-7 + 12”, antwoord: 5 }, { som: “10 – -10”, antwoord: 20 }, { som: “-20 + 9”, antwoord: -11 }, { som: “16 – 19”, antwoord: -3 }, { som: “-5 – -5”, antwoord: 0 }, { som: “3 + -14”, antwoord: -11 }, { som: “-13 – 6”, antwoord: -19 }, { som: “11 + -17”, antwoord: -6 }, // 5 nieuwe – + sommen { som: “9 – +1”, antwoord: 8 }, { som: “-4 – +5”, antwoord: -9 }, { som: “12 – +7”, antwoord: 5 }, { som: “-10 – +3”, antwoord: -13 }, { som: “6 – +8”, antwoord: -2 } ]; const totaal = opgaven.length; let index = 0; let punten = 0; let gecontroleerd = false; const progressEl = document.getElementById(“progress”); const scoreEl = document.getElementById(“score”); const questionEl = document.getElementById(“questionText”); const inputEl = document.getElementById(“answerInput”); const checkBtn = document.getElementById(“checkBtn”); const nextBtn = document.getElementById(“nextBtn”); const feedbackEl = document.getElementById(“feedback”); const hintBtn = document.getElementById(“hintBtn”); const hintBox = document.getElementById(“hintBox”); const gameBox = document.getElementById(“gameBox”); const resultBox = document.getElementById(“resultBox”); const resCijfer = document.getElementById(“resultCijfer”); const resScore = document.getElementById(“resultScore”); const resFormula = document.getElementById(“resultFormula”); const resBoodschap= document.getElementById(“resultBoodschap”); const restartBtn = document.getElementById(“restartBtn”); // ── STATUS ──────────────────────────────────────────────────────────────── function updateStatus() { progressEl.textContent = “Opgave ” + (index + 1) + ” van ” + totaal; scoreEl.textContent = “Punten: ” + punten + ” / ” + totaal; } // ── VRAAG TONEN ─────────────────────────────────────────────────────────── function toonVraag() { gecontroleerd = false; feedbackEl.className = “feedback”; feedbackEl.innerHTML = “”; nextBtn.style.display = “none”; checkBtn.disabled = false; inputEl.disabled = false; inputEl.value = “”; questionEl.textContent = opgaven[index].som + ” = ?”; updateStatus(); inputEl.focus(); } // ── UITLEG BEPALEN ──────────────────────────────────────────────────────── // Detecteer of de som een tekencombinatie heeft (bv. – +, + -, – -, + +). // Dat is het geval als het tweede getal een expliciete + of – als teken heeft // in de originele tekst, dus: “8 – -10”, “9 – +1”, “7 + -12”. // Een enkele operator zonder tekenvoor het tweede getal = temperatuursom: // “15 – 22”, “-6 + 9”, “-8 – 5”. function parseSom(tekst) { const t = tekst.trim(); // Tekencombinatie: tweede getal heeft expliciete sign (+ of -) // Patroon: [getal] [+-] [+-getal] waarbij het tweede getal met + of – begint let m = t.match(/^([+-]?\d+)\s*([+-])\s*([+-]\d+)$/); if (m) return { start: +m[1], op: m[2], tweede: +m[3], combo: true }; // Enkele operator: tweede getal is gewoon positief (geen teken) m = t.match(/^([+-]?\d+)\s*([+-])\s*(\d+)$/); if (m) return { start: +m[1], op: m[2], tweede: +m[3], combo: false }; return null; } // Meervoud/enkelvoud helper voor blokjes function blokjesTekst(n, warm) { const soort = warm ? (n === 1 ? “warm” : “warme”) : (n === 1 ? “koud” : “koude”); const stuk = n === 1 ? “blokje” : “blokjes”; return n + ” ” + soort + ” ” + stuk; } // Uitleg voor HEKSENKETEL-sommen (tekencombinatie aanwezig) function uitlegHeksenketel(d, uitkomst) { const n = Math.abs(d.tweede); const warm = d.tweede > 0; // +n = warm, -n = koud if (d.op === “+”) { // Optellen: blokjes erbij const type = warm ? “warme” : “koude”; const gevolg = warm ? “warmer” : “kouder”; const richt = warm ? “omhoog” : “omlaag”; return [ “Je begint met ” + d.start + “.”, “Je doet er ” + blokjesTekst(n, warm) + ” bij.”, “Meer ” + type + ” blokjes betekent: ” + gevolg + “.”, “Daarom gaat de uitkomst ” + n + ” ” + richt + “.”, “Antwoord: ” + uitkomst + “.” ]; } else { // Aftrekken: blokjes eruit const type = warm ? “warme” : “koude”; const gevolg = warm ? “kouder” : “warmer”; const richt = warm ? “omlaag” : “omhoog”; return [ “Je begint met ” + d.start + “.”, “Je haalt ” + blokjesTekst(n, warm) + ” uit de ketel.”, “Minder ” + type + ” blokjes betekent: ” + gevolg + “.”, “Daarom gaat de uitkomst ” + n + ” ” + richt + “.”, “Antwoord: ” + uitkomst + “.” ]; } } // Uitleg voor TEMPERATUUR-sommen (enkel + of -) function uitlegTemperatuur(d, uitkomst) { const n = d.tweede; // altijd positief bij temperatuursom const warmer = d.op === “+”; return [ “Je begint bij ” + d.start + ” graden.”, warmer ? “Er komen ” + n + ” graden bij.” : “Er gaan ” + n + ” graden af.”, warmer ? “Het wordt ” + n + ” graden warmer.” : “Het wordt ” + n + ” graden kouder.”, “Je komt uit op ” + uitkomst + ” graden.” ]; } // Kies automatisch de juiste uitlegvorm function bouwUitleg(somTekst, uitkomst) { const d = parseSom(somTekst); if (!d) { return [ “Kijk rustig naar de som.”, “Gebruik de regels van de heksenketel.”, “Antwoord: ” + uitkomst + “.” ]; } return d.combo ? uitlegHeksenketel(d, uitkomst) : uitlegTemperatuur(d, uitkomst); } // ── FEEDBACK ────────────────────────────────────────────────────────────── function toonFeedback(type, html) { feedbackEl.className = “feedback ” + type; feedbackEl.innerHTML = html; } // ── CONTROLEER ──────────────────────────────────────────────────────────── function controleer() { if (gecontroleerd) return; const invoer = inputEl.value.replace(/\s+/g, “”); if (!/^[-+]?\d+$/.test(invoer)) { toonFeedback(“info”, “Typ een heel getal, bijvoorbeeld −3, 0 of 12.”); return; } gecontroleerd = true; inputEl.disabled = true; checkBtn.disabled = true; const leerling = Number(invoer); const goed = opgaven[index].antwoord; if (leerling === goed) { punten++; toonFeedback(“ok”, “Goed gedaan!”); } else { const stappen = bouwUitleg(opgaven[index].som, goed) .map(function(s) { return “
• ” + s + “
“; }).join(“”); toonFeedback(“err”, “Niet goed. Geeft niks, kijk naar de stappen:” + “
” + stappen + “
“); } updateStatus(); nextBtn.style.display = “inline-block”; nextBtn.focus(); } // ── VOLGENDE ────────────────────────────────────────────────────────────── function volgende() { if (!gecontroleerd) { toonFeedback(“info”, “Klik eerst op Controleer, dan gaan we verder.”); return; } index++; if (index >= totaal) toonResultaat(); else toonVraag(); } // ── EINDSCHERM ──────────────────────────────────────────────────────────── function toonResultaat() { gameBox.style.display = “none”; resultBox.style.display = “block”; const rawCijfer = (punten / totaal) * 9 + 1; const cijfer = Math.round(rawCijfer * 10) / 10; const cijferTekst = cijfer.toFixed(1).replace(“.”, “,”); resCijfer.textContent = cijferTekst; resScore.textContent = “Je score: ” + punten + ” van ” + totaal + ” punten”; resFormula.textContent = “(” + punten + ” \u00f7 ” + totaal + “) \u00d7 9 + 1 = ” + cijferTekst; const boodschap = cijfer >= 9.0 ? “\uD83C\uDF1F Uitmuntend! Geweldig gedaan!” : cijfer >= 7.0 ? “\uD83D\uDC4F Goed gedaan! Dat ging prima.” : cijfer >= 5.5 ? “\uD83D\uDE0A Voldoende, maar oefen nog even verder.” : “\uD83D\uDCAA Blijf oefenen, je komt er wel!”; resBoodschap.textContent = boodschap; progressEl.textContent = “Opgave ” + totaal + ” van ” + totaal; scoreEl.textContent = “Punten: ” + punten + ” / ” + totaal; } // ── OPNIEUW ─────────────────────────────────────────────────────────────── function opnieuw() { index = 0; punten = 0; gameBox.style.display = “block”; resultBox.style.display = “none”; toonVraag(); } // ── EVENTS ──────────────────────────────────────────────────────────────── hintBtn.addEventListener(“click”, function() { const open = hintBox.style.display === “block”; hintBox.style.display = open ? “none” : “block”; hintBtn.textContent = open ? “Hint” : “Hint verbergen”; }); checkBtn.addEventListener(“click”, controleer); nextBtn.addEventListener(“click”, volgende); restartBtn.addEventListener(“click”, opnieuw); inputEl.addEventListener(“keydown”, function(e) { if (e.key === “Enter”) { e.preventDefault(); controleer(); } }); toonVraag();