Original four-screen rehearsal with navigation and a preparation scaffold

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="nos-demo-layout" content="responsive-lab"><title>Four morning meeting prompts</title><style>body{margin:0;background:#f8f1e6;color:#332d40;font:18px/1.55 system-ui}main{max-width:850px;margin:auto;padding:24px}h1{font-size:clamp(28px,5vw,40px);line-height:1.15}nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}button{font:inherit;padding:10px 16px;border:2px solid #4b3e65;border-radius:5px;background:white;color:#332d40}button:disabled{opacity:.45}#slide{background:white;border-top:8px solid #bc713c;padding:24px;margin:20px 0;min-height:200px}#prompt{font-size:clamp(26px,4vw,35px);line-height:1.3}aside{border-left:4px solid #7d6a9b;padding:12px 16px;background:#f0eaf7}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:white;padding:18px;font:16px/1.6 system-ui}@media print{nav{display:none}}</style></head><body><main><p>Original fictional teacher rehearsal. Class and date not supplied.</p><h1>One prompt for the next part of the meeting</h1><nav aria-label="Presentation navigation"><button id="previous" type="button">Previous</button><span id="position" aria-live="polite"></span><button id="next" type="button">Next</button></nav><section id="slide" aria-live="polite"><h2 id="heading"></h2><p id="prompt"></p></section><aside><strong>Leader note</strong><p id="note"></p></aside><p>This local presentation has four screens. It does not record answers, attendance or participation. The adult leads the actual meeting.</p><h2>Prepare your actual meeting</h2><pre>Class / date / actual next learning task: __________
Greeting and participation options: __________
Sharing prompt and listening instruction: __________
Activity / materials / checked answer: __________
Teacher's morning message / next action: __________
Leader notes and access arrangements: __________</pre></main><script>const slides=[{title:'Greeting',prompt:'Good morning. Greet the next person by name.',note:'Confirm the class’s agreed participation options, including how a learner can indicate their name or pass a turn.'},{title:'Sharing',prompt:'Name one thing you noticed on your way here.',note:'Model a short, ordinary observation and invite a listening response. Do not require a personal disclosure.'},{title:'Group activity',prompt:'Circle, triangle, square, circle. Which shape appears twice?',note:'Authored answer: circle appears twice; triangle and square each appear once. Invite an explanation using the displayed words or actual classroom materials.'},{title:'Morning message',prompt:'Today we will compare shapes before we count them. Date: ______.',note:'Replace this proposed task with the real day’s learning task and explain what learners should do after the meeting.'}];let current=0;function draw(){const s=slides[current];document.querySelector('#heading').textContent=s.title;document.querySelector('#prompt').textContent=s.prompt;document.querySelector('#note').textContent=s.note;document.querySelector('#position').textContent='Screen '+(current+1)+' of '+slides.length;document.querySelector('#previous').disabled=current===0;document.querySelector('#next').disabled=current===slides.length-1;window.currentSlide={index:current,title:s.title};}document.querySelector('#previous').addEventListener('click',()=>{current=Math.max(0,current-1);draw()});document.querySelector('#next').addEventListener('click',()=>{current=Math.min(slides.length-1,current+1);draw()});draw();</script></body></html>