Laat medewerkers veilig oefenen met herkenbare twijfel.

/* De pagina-inhoud van het thema is 760px breed; het spel breekt daar zelf uit, zodat het thema hiervoor niet aangepast hoeft te worden. */ #pw-spel{width:min(1120px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)} /* Het thema hangt een lime blokje en een lijn boven elke h2 in de inhoud. Binnen het spel hoort dat niet. */ #pw-spel h2::before,#pw-spel h2::after{content:none!important;display:none!important} #pw-spel .start h2,#pw-spel .poort h3,#pw-spel .bev h3{border-top:0!important;padding-top:0!important} #pw-spel .start h2{margin-top:18px!important} #pw-spel .g{--ink:#0B0D12;--text:#2A2E38;--muted:#6A7080;--line:#E8E4D8;--line2:#F1EEE4; --paper:#FBF9F2;--edge:#F4F0E4;--lime:#B6F23E;--rood:#DC2C2C; width:1060px;max-width:100%} #pw-spel .bar{display:flex;align-items:center;gap:13px;height:56px;padding:0 22px} #pw-spel .bar__mark{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.02em} #pw-spel .bar__mark i{width:22px;height:22px;border-radius:7px;background:var(--lime);flex:none} #pw-spel .bar__ronde{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#7A7F89;padding-left:14px;border-left:1px solid #23252C} #pw-spel .bar__rechts{margin-left:auto;display:flex;align-items:center;gap:18px} #pw-spel .bar__pips{display:flex;gap:4px} #pw-spel .bar__pips i{width:18px;height:4px;border-radius:2px;background:#24262D;transition:background .25s} #pw-spel .bar__pips i.goed{background:var(--lime)} #pw-spel .bar__pips i.mis{background:var(--rood)} #pw-spel .bar__pips i.nu{background:#5A5D65} #pw-spel .klok{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--lime);letter-spacing:.04em;min-width:52px;text-align:right} #pw-spel .klok.straf{color:var(--rood)} #pw-spel .status{display:none;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap} #pw-spel .status.toon{display:flex} #pw-spel .status__ronde{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted)} #pw-spel .status .bar__pips{display:flex;gap:4px;margin-left:auto} #pw-spel .status .bar__pips i{width:18px;height:4px;border-radius:2px;background:#DCD7C9;transition:background .25s} #pw-spel .status .bar__pips i.goed{background:var(--lime)} #pw-spel .status .bar__pips i.mis{background:var(--rood)} #pw-spel .status .bar__pips i.nu{background:#A8A395} #pw-spel .status .klok{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);min-width:auto;text-align:right} #pw-spel .status .klok.straf{color:var(--rood)} #pw-spel .canvas{background:var(--paper);border:1px solid var(--line);border-radius:16px;display:grid; grid-template-columns:minmax(0,1fr) 330px;min-height:466px} #pw-spel .canvas.enkel{grid-template-columns:minmax(0,1fr)} #pw-spel .werkbank{padding:30px 32px 28px;min-width:0;display:flex;flex-direction:column} #pw-spel .opdracht{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} #pw-spel .context{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} #pw-spel .context__naam{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.015em} #pw-spel .context__tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:4px 8px;background:#fff} #pw-spel .preparaat{margin-top:14px;display:flex;flex-wrap:wrap;gap:2px;align-items:stretch;user-select:none} #pw-spel .cel{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:500;line-height:1;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:7px;padding:12px 6px;min-width:30px;text-align:center; cursor:pointer;transition:transform .12s,background .18s,border-color .18s,color .18s} #pw-spel .cel.vast{cursor:default;background:var(--edge);color:var(--muted);border-color:transparent} #pw-spel .cel:not(.vast):hover{border-color:#B7B2A2;transform:translateY(-2px)} #pw-spel .cel.raak{background:var(--rood);border-color:var(--rood);color:#fff;transform:translateY(-3px)} #pw-spel .cel.schoon{background:var(--lime);border-color:var(--lime);color:var(--ink)} #pw-spel .cel.mis{animation:pwsSchud .32s} #pw-spel .cel.segment{font-size:19px;padding:16px 12px;letter-spacing:-.01em} #pw-spel .preparaat.klaar .cel:not(.raak):not(.schoon){opacity:.42} #pw-spel .klopt{margin-top:16px;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:9px; border:1px solid #CFCBBC;background:#fff;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer; align-self:flex-start;transition:border-color .18s} #pw-spel .klopt:hover{border-color:#9C978A} #pw-spel .klopt b{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;color:var(--muted); border:1px solid var(--line);border-radius:4px;padding:2px 6px} #pw-spel .klopt.weg{display:none} #pw-spel .hint{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:52ch;min-height:44px} #pw-spel .hint b{color:var(--text);font-weight:600} #pw-spel .onderwerp{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)} #pw-spel .onderwerp u{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted)} #pw-spel .onderwerp p{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin-top:6px} #pw-spel .mailbody{font-size:13.5px;line-height:1.7;color:#5C616D;margin-top:10px;max-width:60ch} #pw-spel .volgende{display:none;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:10px; background:var(--ink);color:#fff;font-size:14.5px;font-weight:600;margin-top:22px;border:0;font-family:inherit; cursor:pointer;align-self:flex-start} #pw-spel .volgende.toon{display:inline-flex} #pw-spel .bev{background:var(--ink);border-radius:14px;margin:14px 14px 14px 0;padding:22px 20px;color:#fff; display:flex;flex-direction:column} #pw-spel .bev h3{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#7A7F89} #pw-spel .bev__leeg{margin-top:16px;font-size:13px;line-height:1.6;color:#6E737D} #pw-spel .bev__lijst{margin-top:14px;display:grid;gap:8px} #pw-spel .bev__rij{background:#14171F;border:1px solid #22252E;border-radius:9px;padding:9px 11px;animation:pwsOpkomst .3s ease both} #pw-spel .bev__rij u{text-decoration:none;display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace; font-size:15px;color:#fff} #pw-spel .bev__rij u i{font-style:normal;width:22px;height:22px;border-radius:5px;background:var(--rood);color:#fff; display:grid;place-items:center;font-size:12px;flex:none} #pw-spel .bev__rij.ok u i{background:var(--lime);color:var(--ink)} #pw-spel .bev__rij span{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em; color:#8B909A;margin-top:4px} #pw-spel .bev__rij em{display:block;font-style:normal;font-size:12px;color:#C8CCD4;margin-top:5px;line-height:1.5} #pw-spel .bev__uit{margin-top:auto;padding-top:16px;border-top:1px solid #23262E;display:none} #pw-spel .bev__uit.toon{display:block} #pw-spel .bev__uit u{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:#7A7F89} #pw-spel .bev__uit code{display:block;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--lime); margin-top:8px;word-break:break-all;line-height:1.4} #pw-spel .bev__uit small{display:block;font-size:11.5px;color:#6E737D;margin-top:9px;line-height:1.5} #pw-spel .start{padding:44px 44px 46px} #pw-spel .start__kicker{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} #pw-spel .start__kicker::before{content:"";width:9px;height:9px;background:var(--lime);flex:none} #pw-spel .start h2{border-top:0;padding-top:0;font-size:50px;font-weight:400;line-height:1.05;letter-spacing:-.035em;color:var(--ink);margin-top:18px;max-width:16ch} #pw-spel .start h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 93%,transparent 93%)} #pw-spel .start__lead{font-size:17px;line-height:1.6;color:var(--text);margin-top:18px;max-width:56ch} #pw-spel .start__proef{margin-top:28px;display:flex;flex-wrap:wrap;gap:2px;align-items:center} #pw-spel .start__proef .cel{cursor:default;font-size:26px} #pw-spel .start__proef .cel:hover{transform:none;border-color:var(--line)} #pw-spel .start__na{margin-top:14px;font-size:13.5px;color:var(--muted);max-width:56ch;line-height:1.6} #pw-spel .start__na b{color:var(--text);font-weight:600;font-family:'JetBrains Mono',monospace} #pw-spel .start__knop{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:11px; background:var(--ink);color:#fff;font-size:15.5px;font-weight:600;margin-top:26px;border:0;font-family:inherit;cursor:pointer} #pw-spel .start__meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} #pw-spel .uit{padding:40px 44px 44px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start} #pw-spel .score__cijfer{display:flex;align-items:baseline;gap:8px} #pw-spel .score__cijfer strong{font-size:82px;font-weight:400;letter-spacing:-.05em;color:var(--ink);line-height:.9} #pw-spel .score__cijfer span{font-size:26px;color:var(--muted);letter-spacing:-.02em} #pw-spel .score__zin{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:14px} #pw-spel .score__sub{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.6;max-width:46ch} #pw-spel .trucs{margin-top:24px;border-top:1px solid var(--line)} #pw-spel .trucs__rij{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:13.5px} #pw-spel .trucs__rij i{width:9px;height:9px;flex:none;background:var(--lime)} #pw-spel .trucs__rij i.is-mis{background:var(--rood)} #pw-spel .trucs__rij span{color:var(--text)} #pw-spel .trucs__rij em{margin-left:auto;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)} #pw-spel .poort{background:var(--ink);border-radius:14px;padding:26px 24px;color:#fff} #pw-spel .poort h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#fff} #pw-spel .poort p{font-size:13.5px;line-height:1.6;color:#9AA0AC;margin-top:10px} #pw-spel .poort label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:#7A7F89;margin-top:20px} #pw-spel .poort input{width:100%;height:48px;border-radius:9px;border:1px solid #2C2F38;background:#141720; color:#fff;font:inherit;font-size:14.5px;padding:0 14px;margin-top:8px} #pw-spel .poort input:focus{outline:2px solid var(--lime);outline-offset:1px} #pw-spel .poort button{width:100%;height:50px;border:0;border-radius:9px;background:var(--lime);color:var(--ink); font:inherit;font-size:15px;font-weight:700;margin-top:12px;cursor:pointer} #pw-spel .poort button[disabled]{opacity:.55;cursor:default} #pw-spel .poort small{display:block;font-size:11.5px;color:#6E737D;margin-top:12px;line-height:1.5} #pw-spel .poort__lijst{margin-top:18px;padding-top:16px;border-top:1px solid #23262E;display:grid;gap:9px} #pw-spel .poort__lijst div{display:flex;gap:10px;font-size:13px;color:#C8CCD4} #pw-spel .poort__lijst div b{color:var(--lime);font-weight:600} #pw-spel .poort__lijst div::before{content:"";width:7px;height:7px;background:var(--lime);flex:none;margin-top:6px} #pw-spel .poort__melding{margin-top:12px;font-size:13px;line-height:1.55;display:none;color:#9AA0AC} #pw-spel .poort__melding.toon{display:block} #pw-spel .poort__melding.goed{color:var(--lime)} #pw-spel .poort__melding.fout{color:#FF8A7A} #pw-spel .honing{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} #pw-spel .opnieuw{margin-top:20px;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:10px; border:1px solid #CFCBBC;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer} @keyframes pwsSchud{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} @keyframes pwsOpkomst{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (max-width: 900px){ #pw-spel .canvas{grid-template-columns:minmax(0,1fr);min-height:0} #pw-spel .bev{margin:0 14px 14px;min-height:0} #pw-spel .werkbank{padding:24px 20px 22px} #pw-spel .start, #pw-spel .uit{padding:26px 20px 28px} #pw-spel .uit{grid-template-columns:minmax(0,1fr);gap:26px} #pw-spel .start h2{font-size:34px} #pw-spel .cel{font-size:22px;min-width:26px;padding:10px 5px;border-radius:6px} #pw-spel .cel.segment{font-size:15px;padding:12px 9px} #pw-spel .start__proef .cel{font-size:20px} #pw-spel .bar{height:auto;padding:14px 18px 12px;flex-wrap:wrap;row-gap:8px} #pw-spel .bar__ronde{border-left:0;padding-left:0} #pw-spel .bar__rechts{width:100%;justify-content:space-between} #pw-spel .hint{min-height:0} #pw-spel .score__cijfer strong{font-size:62px} } (function () { var CYR = /[Ѐ-ӿ]/; var preparaten = [ { truc: 'Cyrillische letters', naam: 'Apple Support', soort: 'afzenderadres', adres: 'security@аррӏе.com', onderwerp: 'Je Apple ID is vanuit een nieuw apparaat gebruikt', body: 'We zagen een aanmelding vanaf een apparaat in Warschau. Was jij dit niet, bevestig dan binnen 24 uur je gegevens.', hint: 'Eén van deze tekens is niet de letter die je denkt te lezen.', eenheid: 'teken', verdacht: function (c) { return CYR.test(c); }, uitLabel: 'De browser leest', noot: 'Chrome en Safari tonen deze punycode in de adresbalk zodra schriften gemengd zijn. Die onleesbare regel is je bewijs.' }, { truc: 'Cijfer in plaats van letter', naam: 'Microsoft 365 Security', soort: 'afzenderadres', adres: '[email protected]', onderwerp: 'Actie vereist: je wachtwoord verloopt binnen 24 uur', body: 'Je wachtwoord voor Microsoft 365 verloopt vandaag. Verleng het nu, anders verlies je toegang tot je mail en bestanden.', hint: 'Geen ander schrift dit keer. Er staat iets tussen dat er alleen maar uitziet als een letter.', eenheid: 'teken', verdacht: function (c, i, s) { return c === '0' && /[a-z]/i.test(s[i - 1] || ''); }, uitLabel: 'Waarom de browser zwijgt', noot: 'Een nul is een geldig teken in een domeinnaam. Geen enkele browser waarschuwt hiervoor — alleen jij ziet het.' }, { truc: 'Echt domein staat rechts', naam: 'Microsoft Account', soort: 'domein, lees van rechts', adres: '[email protected]', onderwerp: 'Ongebruikelijke aanmelding op je account', body: 'Er is ingelogd vanaf een onbekend IP-adres. Bevestig dat jij dit was, of zet je wachtwoord om via onderstaande pagina.', hint: 'Alle woorden kloppen. Het gaat om de volgorde: welk deel bepaalt echt van wie dit domein is?', eenheid: 'segment', uitLabel: 'Het registreerbare deel', noot: 'Een domein lees je van rechts naar links. Alles links van login-verify.ru is door de aanvaller zelf verzonnen.' }, { truc: 'Dit adres was echt', naam: 'KPN', soort: 'afzenderadres', schoon: true, adres: '[email protected]', onderwerp: 'Je factuur van september staat klaar', body: 'Je maandelijkse factuur is beschikbaar in Mijn KPN. Inloggen doe je zoals altijd via de app of de site.', hint: 'Kijk goed. Niet elke mail die om aandacht vraagt is nep.', eenheid: 'teken', uitLabel: 'Het registreerbare deel', noot: 'Eén woord, één bekend topniveaudomein, geen extra delen ervoor. Dit klopt.' }, { truc: 'rn leest als m', naam: 'MijnOverheid', soort: 'afzenderadres', adres: '[email protected]', onderwerp: 'Er staat een nieuw bericht voor je klaar', body: 'In je Berichtenbox staat een bericht van de Belastingdienst. Log in met DigiD om het te lezen.', hint: 'Twee letters naast elkaar doen samen alsof ze er één zijn.', eenheid: 'teken', verdacht: function (c, i, s) { return (i === 0 && c === 'r' && s[1] === 'n') || (i === 1 && c === 'n' && s[0] === 'r'); }, bevinding: { kop: 'rn', detail: 'twee tekens, geen m', extra: 'In veel lettertypen zijn r en n samen nauwelijks van een m te onderscheiden. In mono wél.' }, uitLabel: 'Waarom de browser zwijgt', noot: 'rnijnoverheid.nl is een volstrekt geldige domeinnaam. Alleen je oog wordt bedrogen, je browser niet.' }, { truc: 'Koppelteken in plaats van punt', naam: 'Belastingdienst', soort: 'domein, lees van rechts', adres: '[email protected]', onderwerp: 'Je hebt recht op een teruggave van 428,60 euro', body: 'Uit de herberekening blijkt dat je te veel hebt betaald. Geef je rekeningnummer door om het bedrag te ontvangen.', hint: 'Er hoort hier een punt te staan waar nu iets anders staat.', eenheid: 'segment', uitLabel: 'Het registreerbare deel', noot: 'belastingdienst-nl.com is één woord dat iemand kon kopen. De echte dienst zit op belastingdienst.nl.' }, { truc: 'Dit adres was echt', naam: 'DocuSign', soort: 'afzenderadres', schoon: true, adres: '[email protected]', onderwerp: 'Contract Volexco-Q4 wacht op je handtekening', body: 'Er is een document naar je gestuurd ter ondertekening. Je kunt het bekijken voordat je tekent.', hint: 'Een ander topniveaudomein dan .com maakt een adres niet vals.', eenheid: 'teken', uitLabel: 'Het registreerbare deel', noot: 'docusign.net is het echte domein van DocuSign. Niet elk ongewoon achtervoegsel is een truc.' }, { truc: 'Echt domein staat rechts', naam: 'PostNL', soort: 'domein, lees van rechts', adres: '[email protected]', onderwerp: 'Je pakket kon niet bezorgd worden', body: 'Betaal 1,95 euro aan verzendkosten om een nieuwe bezorgpoging in te plannen. Anders sturen we het pakket retour.', hint: 'postnl.nl staat er wel degelijk. Maar staat het op de plek die telt?', eenheid: 'segment', uitLabel: 'Het registreerbare deel', noot: 'Alleen de laatste twee delen tellen. postnl.nl is hier niet meer dan een verzonnen subdomein.' } ]; var el = function (id) { return document.getElementById(id); }; var index = 0, seconden = 0, totaalSeconden = 0, klaar = false, tikker = null, missers = 0; var resultaten = []; function tijd(s) { return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); } function tekenNaam(c) { var cp = c.codePointAt(0); var script = 'Latijn'; if (cp >= 0x0400 && cp = 0x0370 && cp = '0' && c <= '9') script = 'cijfer'; return { hex: 'U+' + cp.toString(16).toUpperCase().padStart(4, '0'), script: script }; } function registreerbaar(domein) { return domein.split('.').slice(-2).join('.'); } function pips() { el('pws-pips').innerHTML = preparaten.map(function (_, i) { var k = resultaten[i] ? (resultaten[i].goed ? 'goed' : 'mis') : (i === index ? 'nu' : ''); return ''; }).join(''); } function straf() { seconden += 2; missers++; el('pws-klok').textContent = tijd(seconden); el('pws-klok').classList.add('straf'); setTimeout(function () { el('pws-klok').classList.remove('straf'); }, 420); } function bevindingToe(kop, detail, extra, ok) { el('pws-bevLeeg').style.display = 'none'; var rij = document.createElement('div'); rij.className = 'bev__rij' + (ok ? ' ok' : ''); var u = document.createElement('u'); var i = document.createElement('i'); i.textContent = ok ? '✓' : '!'; u.appendChild(i); u.appendChild(document.createTextNode(kop)); rij.appendChild(u); var s = document.createElement('span'); s.textContent = detail; rij.appendChild(s); if (extra) { var e = document.createElement('em'); e.textContent = extra; rij.appendChild(e); } el('pws-bevLijst').appendChild(rij); } function toonAlles(p, bak, tekens, domein) { var cellen = bak.querySelectorAll('.cel'); tekens.forEach(function (t, j) { if (p.verdacht(t, j, domein)) cellen[j + 1].classList.add('raak'); }); if (p.bevinding) { bevindingToe(p.bevinding.kop, p.bevinding.detail, p.bevinding.extra); return; } tekens.forEach(function (t, j) { if (!p.verdacht(t, j, domein)) return; var info = tekenNaam(t); var eerste = el('pws-bevLijst').children.length === 0; bevindingToe(t, info.hex + ' · ' + info.script, eerste ? (info.script === 'cijfer' ? 'Je las een letter. Er staat een cijfer.' : 'Elk van deze ziet eruit als Latijn, maar is het niet.') : ''); }); } function rondeKlaar(p, goed) { klaar = true; clearInterval(tikker); totaalSeconden += seconden; resultaten[index] = { truc: p.truc, goed: goed, seconden: seconden }; el('pws-preparaat').classList.add('klaar'); el('pws-kloptKnop').classList.add('weg'); var domein = p.adres.split('@')[1], waarde; if (p.schoon || p.eenheid === 'segment') waarde = registreerbaar(domein); else { try { waarde = new URL('https://' + domein).hostname; } catch (e) { waarde = domein; } if (waarde === domein) waarde = domein + ' (ongewijzigd)'; } el('pws-bevUitLabel').textContent = p.uitLabel; el('pws-bevUitWaarde').textContent = waarde; el('pws-bevUitNoot').textContent = p.noot; el('pws-bevUit').classList.add('toon'); if (goed) { el('pws-hint').innerHTML = missers === 0 ? 'Goed gezien. ' + tijd(seconden) + ', geen misklik.' : 'Goed gezien. ' + missers + ' misklik' + (missers === 1 ? '' : 'ken') + ' · ' + (missers * 2) + ' seconden straf.'; } else { el('pws-hint').innerHTML = 'Deze ging mis. ' + (p.schoon ? 'Dit adres was echt.' : 'Er zat wel degelijk iets fout.'); } el('pws-volgende').classList.add('toon'); el('pws-volgendeTekst').textContent = index < preparaten.length - 1 ? 'Volgende afzender' : 'Bekijk je uitslag'; pips(); } function bouw() { var p = preparaten[index]; klaar = false; missers = 0; seconden = 0; el('pws-rondeLabel').textContent = 'Afzender ' + (index + 1) + ' van ' + preparaten.length; el('pws-weergavenaam').textContent = p.naam; el('pws-soort').textContent = p.soort; el('pws-onderwerp').textContent = p.onderwerp; el('pws-mailbody').textContent = p.body; el('pws-hint').textContent = p.hint; el('pws-bevLijst').innerHTML = ''; el('pws-bevLeeg').style.display = ''; el('pws-bevUit').classList.remove('toon'); el('pws-bevUitWaarde').textContent = ''; el('pws-bevUitNoot').textContent = ''; el('pws-volgende').classList.remove('toon'); el('pws-kloptKnop').classList.remove('weg'); el('pws-klok').textContent = '0:00'; var bak = el('pws-preparaat'); bak.className = 'preparaat'; bak.innerHTML = ''; var deel = p.adres.split('@'), lokaal = deel[0], domein = deel[1]; var vast = document.createElement('span'); vast.className = 'cel vast' + (p.eenheid === 'segment' ? ' segment' : ''); vast.textContent = lokaal + '@'; bak.appendChild(vast); if (p.eenheid === 'segment') { var delen = domein.split('.'); var juist = delen.length - 2; delen.forEach(function (d, i) { var cel = document.createElement('span'); cel.className = 'cel segment'; cel.textContent = d + (i < delen.length - 1 ? '.' : ''); cel.addEventListener('click', function () { if (klaar) return; if (i === juist) { cel.classList.add('raak'); bevindingToe(registreerbaar(domein), 'het registreerbare domein', 'Dit is het enige deel dat iemand moest kópen. De rest is er gratis voorgezet.'); rondeKlaar(p, true); } else { cel.classList.remove('mis'); void cel.offsetWidth; cel.classList.add('mis'); straf(); } }); bak.appendChild(cel); }); return; } var tekens = Array.prototype.slice.call(domein); tekens.forEach(function (c, i) { var cel = document.createElement('span'); cel.className = 'cel'; cel.textContent = c; cel.addEventListener('click', function () { if (klaar) return; if (!p.schoon && p.verdacht(c, i, domein)) { toonAlles(p, bak, tekens, domein); rondeKlaar(p, true); } else { cel.classList.remove('mis'); void cel.offsetWidth; cel.classList.add('mis'); straf(); } }); bak.appendChild(cel); }); } function kloptGeklikt() { if (klaar) return; var p = preparaten[index]; var domein = p.adres.split('@')[1]; if (p.schoon) { Array.prototype.forEach.call(el('pws-preparaat').querySelectorAll('.cel:not(.vast)'), function (c) { c.classList.add('schoon'); }); bevindingToe(registreerbaar(domein), 'het registreerbare domein', 'Dit adres klopt. Goed dat je het niet zomaar afschreef.', true); rondeKlaar(p, true); return; } if (p.eenheid === 'segment') { var delen = domein.split('.'); Array.prototype.forEach.call(el('pws-preparaat').querySelectorAll('.cel.segment:not(.vast)'), function (c, i) { if (i === delen.length - 2) c.classList.add('raak'); }); bevindingToe(registreerbaar(domein), 'het registreerbare domein', 'Hier zat de truc.'); } else { toonAlles(p, el('pws-preparaat'), Array.prototype.slice.call(domein), domein); } rondeKlaar(p, false); } function start() { clearInterval(tikker); tikker = setInterval(function () { if (klaar) return; seconden++; el('pws-klok').textContent = tijd(seconden); }, 1000); pips(); } function toonUitslag() { clearInterval(tikker); el('pws-schermSpel').style.display = 'none'; el('pws-schermUit').style.display = ''; el('pws-rondeLabel').textContent = 'Uitslag'; el('pws-klok').textContent = tijd(totaalSeconden); var goed = resultaten.filter(function (r) { return r.goed; }).length; var gemist = resultaten.filter(function (r) { return !r.goed; }); el('pws-scoreCijfer').textContent = goed; el('pws-scoreTotaal').textContent = '/ ' + preparaten.length; el('pws-scoreZin').textContent = goed === preparaten.length ? 'Alles goed.' : goed + ' van de ' + preparaten.length + ' goed.'; el('pws-scoreSub').textContent = gemist.length === 0 ? 'Je herkende elke truc en liet de twee echte adressen met rust. Totaaltijd ' + tijd(totaalSeconden) + '.' : 'Je miste er ' + gemist.length + '. Totaaltijd ' + tijd(totaalSeconden) + '.'; el('pws-trucs').innerHTML = ''; resultaten.forEach(function (r) { var rij = document.createElement('div'); rij.className = 'trucs__rij'; var i = document.createElement('i'); if (!r.goed) i.className = 'is-mis'; var s = document.createElement('span'); s.textContent = r.truc; var e = document.createElement('em'); e.textContent = (r.goed ? 'goed' : 'gemist') + ' · ' + r.seconden + ' sec'; rij.appendChild(i); rij.appendChild(s); rij.appendChild(e); el('pws-trucs').appendChild(rij); }); } el('pws-beginKnop').addEventListener('click', function () { el('pws-schermStart').style.display = 'none'; el('pws-schermSpel').style.display = ''; el('pws-statusRij').classList.add('toon'); bouw(); start(); }); el('pws-kloptKnop').addEventListener('click', kloptGeklikt); el('pws-volgende').addEventListener('click', function () { if (index < preparaten.length - 1) { index++; bouw(); start(); } else { toonUitslag(); } }); el('pws-opnieuw').addEventListener('click', function () { index = 0; resultaten = []; totaalSeconden = 0; el('pws-schermUit').style.display = 'none'; el('pws-schermSpel').style.display = ''; el('pws-poortMelding').className = 'poort__melding'; el('pws-poortKnop').disabled = false; el('pws-poortEmail').value = ''; bouw(); start(); }); document.addEventListener('keydown', function (e) { if (el('pws-schermSpel').style.display === 'none') return; if (e.key === 'k' || e.key === 'K') kloptGeklikt(); if (e.key === 'Enter' && el('pws-volgende').classList.contains('toon')) el('pws-volgende').click(); }); el('pws-poortKnop').addEventListener('click', function () { var adres = el('pws-poortEmail').value.trim(); var melding = el('pws-poortMelding'); if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(adres)) { melding.className = 'poort__melding toon fout'; melding.textContent = 'Vul een geldig e-mailadres in.'; return; } el('pws-poortKnop').disabled = true; melding.className = 'poort__melding toon'; melding.textContent = 'Bezig…'; fetch('/wp-json/pw/v1/lead', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: adres, website: el('pws-poortHoning').value, score: resultaten.filter(function (r) { return r.goed; }).length, totaal: preparaten.length, seconden: totaalSeconden, gemist: resultaten.filter(function (r) { return !r.goed; }).map(function (r) { return r.truc; }), pagina: location.href }) }).then(function (r) { return r.json(); }).then(function (d) { if (!d || !d.ok) throw new Error(d && d.fout ? d.fout : 'onbekende fout'); melding.className = 'poort__melding toon goed'; melding.textContent = 'Bedankt. We nemen contact met je op via ' + adres + '.'; }).catch(function (fout) { melding.className = 'poort__melding toon fout'; melding.textContent = 'Het versturen lukte niet (' + fout.message + '). Probeer het zo nog eens.'; el('pws-poortKnop').disabled = false; }); }); (function proef() { var domein = preparaten[0].adres.split('@')[1]; var bak = el('pws-proef'); var vast = document.createElement('span'); vast.className = 'cel vast'; vast.textContent = 'security@'; bak.appendChild(vast); Array.prototype.slice.call(domein).forEach(function (c) { var cel = document.createElement('span'); cel.className = 'cel'; cel.textContent = c; bak.appendChild(cel); }); var puny; try { puny = new URL('https://' + domein).hostname; } catch (e) { puny = domein; } el('pws-proefNa').innerHTML = 'Je browser leest hier ' + puny + '. Vijf van deze letters zijn Cyrillisch.'; })(); pips(); })();