Timer op de quizdia, gids bijgewerkt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C1fnCyt5tXipCcJteKwxne

presentatie.html

@@ -63,8 +63,10 @@ body.notes aside{display:block;position:fixed;left:0;right:0;bottom:0;max-height
 </section>
 
 <section class="slide" id="quiz" data-transition="fade" style="background:#FFFFFF;color:#333333;font-family:'Figtree', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:56px">
+<div style="display:flex;flex-direction:column;gap:56px;width:1300px">
 <p style="font-size:24px;font-weight:700;color:#A35400;letter-spacing:2px;text-transform:uppercase">Blok 1 · de quiz</p>
 <h2 style="font-family:'Figtree', Arial, sans-serif;font-size:72px;font-weight:700;line-height:1.1;color:#333333">Laptops dicht. Antwoord in je hoofd.</h2>
+</div>
 <div style="display:flex;flex-direction:column;gap:0px">
 <div style="display:flex;gap:48px;align-items:center;padding:32px 0px;border-top:2px solid #D6D6D6">
 <p style="font-family:'Figtree', Arial, sans-serif;font-size:72px;font-weight:700;color:#A35400;width:80px">1</p>
@@ -83,6 +85,23 @@ body.notes aside{display:block;position:fixed;left:0;right:0;bottom:0;max-height
 </div>
 </div>
 <p style="position:absolute;left:128px;bottom:64px;width:1440px;font-size:24px;color:#5C5C5C">Eerst een halve minuut stil nadenken. Dan per helft, op mijn teken.</p>
+<iframe style="position:absolute;right:128px;top:112px;width:320px;height:176px;border:0" sandbox="allow-scripts" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;style&gt;
+html,body{margin:0;height:100%;background:transparent;font-family:Figtree,&quot;Segoe UI&quot;,Arial,sans-serif;overflow:hidden}
+#b{box-sizing:border-box;height:100%;border-radius:24px;background:#F3EEFB;border:3px solid #8056C5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .4s,border-color .4s}
+#t{font-size:84px;font-weight:800;color:#442578;line-height:1;font-variant-numeric:tabular-nums}
+#l{font-size:24px;font-weight:700;color:#5E369E;letter-spacing:1px;text-transform:uppercase}
+#bar{width:240px;height:8px;background:#D6D6D6;border-radius:4px;overflow:hidden;margin-top:6px}#f{height:100%;width:100%;background:#8056C5}
+.w #b{border-color:#FF8300}.w #f{background:#FF8300}.e #b{background:#FF8300;border-color:#FF8300}.e #t,.e #l{color:#333}
+&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;b&quot;&gt;&lt;div id=&quot;t&quot;&gt;2:00&lt;/div&gt;&lt;div id=&quot;l&quot;&gt;stil nadenken&lt;/div&gt;&lt;div id=&quot;bar&quot;&gt;&lt;div id=&quot;f&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
+var T=120,D=30,start=null,raf=null,t=document.getElementById(&#x27;t&#x27;),l=document.getElementById(&#x27;l&#x27;),f=document.getElementById(&#x27;f&#x27;);
+function fmt(s){s=Math.max(0,Math.ceil(s));return Math.floor(s/60)+&#x27;:&#x27;+(&#x27;0&#x27;+s%60).slice(-2)}
+function tick(){var el=(Date.now()-start)/1000,left=T-el;t.textContent=fmt(left);f.style.width=Math.max(0,left/T*100)+&#x27;%&#x27;;
+l.textContent=left&lt;=0?&#x27;tijd!&#x27;:(el&lt;D?&#x27;stil nadenken&#x27;:&#x27;per helft&#x27;);
+document.body.className=left&lt;=0?&#x27;e&#x27;:(left&lt;=20?&#x27;w&#x27;:&#x27;&#x27;);if(left&gt;0)raf=setTimeout(tick,200)}
+function go(){if(start)return;start=Date.now();tick()}
+function reset(){clearTimeout(raf);start=null;t.textContent=fmt(T);l.textContent=&#x27;stil nadenken&#x27;;f.style.width=&#x27;100%&#x27;;document.body.className=&#x27;&#x27;}
+try{new IntersectionObserver(function(e){e.forEach(function(x){x.isIntersecting&amp;&amp;x.intersectionRatio&gt;0.6?go():reset()})},{threshold:[0,0.6,1]}).observe(document.body)}catch(err){go()}
+&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe>
 <div role="img" aria-label="LeX Consultancy" style="position:absolute;right:128px;bottom:56px;width:84px;height:48px;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcyIgogICB3aWR0aD0iMzc3Ljk1MyIKICAgaGVpZ2h0PSIyMTUuOTUwNjciCiAgIHZpZXdCb3g9IjAgMCAzNzcuOTUzMDEgMjE1Ljk1MDY3IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM2IiAvPgogIDxnCiAgICAgaWQ9Imc4IgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDIxNS45NTA2NikiPgogICAgPGcKICAgICAgIGlkPSJnMTAiCiAgICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMSkiPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDMyMy45MjYsMTYxLjk2MSBWIDE0NTcuNjcgYyAwLDg5LjQ1IC03Mi41MTIsMTYxLjk2IC0xNjEuOTYxLDE2MS45NiBDIDcyLjUxNTYsMTYxOS42MyAwLDE1NDcuMTIgMCwxNDU3LjY3IFYgMTYxLjk2MSBDIDAsNzIuNTExNyA3Mi41MTU2LDAgMTYxLjk2NSwwIDI1MS40MTQsMCAzMjMuOTI2LDcyLjUxMTcgMzIzLjkyNiwxNjEuOTYxIgogICAgICAgICBzdHlsZT0iZmlsbDojODA1NmM1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDEyIiAvPgogICAgICA8cGF0aAogICAgICAgICBkPSJtIDE2MTkuNjMsNTY2Ljg3MSBjIDAsMC4wMDggMCwwLjAwOCAwLDAuMDIgdiAyMC4yMyBoIC0wLjUxIEMgMTYwOC40NCw4OTAuNzk3IDEzNTkuMDUsMTEzMy43NCAxMDUyLjc2LDExMzMuNzQgNzM5LjY4OCwxMTMzLjc0IDQ4NS44OTEsODc5Ljk0NSA0ODUuODkxLDU2Ni44NzEgNDg1Ljg5MSwyNTMuODAxIDczOS42ODgsMCAxMDUyLjc2LDAgdiAwIGggMjQyLjk1IHYgMCBjIDg5LjQ1LDAgMTYxLjk2LDcyLjUxMTcgMTYxLjk2LDE2MS45NjEgMCw4OS40NDkgLTcyLjUsMTYxLjk2MSAtMTYxLjk1LDE2MS45NjkgaCAtMjQyLjk2IHYgMCAwIDAgYyAtMTM0LjE3NCwwIC0yNDIuOTQ0LDEwOC43NjkgLTI0Mi45NDQsMjQyLjk0MSAwLDEzNC4xNzYgMTA4Ljc3LDI0Mi45NDUgMjQyLjk0NCwyNDIuOTQ1IDEzNC4xNywwIDI0Mi45NCwtMTA4Ljc2MSAyNDIuOTUsLTI0Mi45MjUgdiAtMC4wMiAtMC4wMTkgLTgwLjk2MSAtMzYuNDQyIC0yLjAyNyAtMi4wMjQgaCAzMjMuOTIgdiAyLjAyNCA3OC45NTcgNDAuNDczIGMgMCwwLjAwNyAwLDAuMDA3IDAsMC4wMTkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiM4MDU2YzU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoMTQiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Im0gMjc4Ny4wOSw4NTcuNDE0IGMgNjMuNDEsNjMuNDEgNjMuNDEsMTY2LjIyNiAwLDIyOS42MzYgLTYzLjQxLDYzLjQxIC0xNjYuMjMsNjMuNDEgLTIyOS42NCwwIEwgMjI2Ny40OSw3OTcuMDc4IDI0OTcuMTIsNTY3LjQ0OSBaIE0gMjQ5Ny4xMiw1NjcuNDQ5IDIyNjcuNDksMzM3LjgwOSAyNTU3LjQ1LDQ3LjgzOTggYyA2My40MSwtNjMuNDEwMSAxNjYuMjMsLTYzLjQxMDEgMjI5LjY0LDAgNjMuNDEsNjMuNDIyMiA2My40MSwxNjYuMjMwMiAwLDIyOS42NDAyIHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiM4MDU2YzU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoMTYiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMjQ5Ny4yLDU2Ny40NDkgMjI2Ny41Niw3OTcuMDc4IDE5NzcuNiwxMDg3LjA1IGMgLTYzLjQxLDYzLjQxIC0xNjYuMjIsNjMuNDEgLTIyOS42NCwwIC02My40MSwtNjMuNDEgLTYzLjQxLC0xNjYuMjI2IDAsLTIyOS42MzYgTCAyMDM3LjkzLDU2Ny40NDkgMTc0Ny45NiwyNzcuNDggYyAtNjMuNDEsLTYzLjQxIC02My40MSwtMTY2LjIxOCAwLC0yMjkuNjI4NCA2My40MiwtNjMuNDIxOSAxNjYuMjMsLTYzLjQyMTkgMjI5LjY0LDAgbCAyODkuOTYsMjg5Ljk1NzQgMjI5LjY0LDIyOS42NCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmODMwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgaWQ9InBhdGgxOCIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=');background-repeat:no-repeat;background-size:contain;background-position:right center"></div>
 
 </section>