Add sketch board functionality for unit quizzes and related tests

- Implemented a new sketch board feature in static/math-board.js, allowing users to draw and submit answers for unit quizzes.
- Added tests in tests/test_board_browser.py to verify the functionality of the sketch board, including drawing, erasing, and submitting sketches.
- Enhanced existing unit tests in tests/test_unit_quiz.py to ensure proper integration of the sketch board with quiz questions.

static/index.html

@@ -29,6 +29,7 @@
   <script src="/static/math-tex.js"></script>
   <script src="/static/math-sky.js"></script>
   <script src="/static/science.js"></script>
+  <script src="/static/math-board.js"></script>
   <script src="/static/math.js"></script>
 </body>
 </html>

static/math-board.js

@@ -0,0 +1,379 @@
+/* Mathly's sketch board: a whiteboard beside an exercise, on a desktop screen only (see math.css).
+   Used by a skill's exercise, the practice exam and the unit quiz. The student turns it on from the sheet's header;
+   this browser remembers the choice. Each question keeps its own sketch for as long as the page is open.
+   Nothing is sent anywhere.
+
+   Everything on the board is an element that can be moved or erased: a pen stroke (with a pen's pressure),
+   a straight line, a circle (dragged from the center), and a copy of the question (its text and figures).
+   Line ends and circle centers snap to the ends and centers already drawn, so a triangle closes neatly;
+   lines that meet that way move together. The eraser removes the lines and circles it touches and cuts pen strokes;
+   it leaves the question's copy alone (select it and delete it instead).
+   The paper is endless downwards: the mouse wheel over the board scrolls it.
+   A sheet can let the board hand in a question's answer (the unit quiz): the sketch becomes a picture. */
+(()=>{
+const PREF="mathly.board";
+const isOn=()=>{ try{ return localStorage.getItem(PREF)==="on"; }catch{ return false; } };
+const setOn=on=>{ try{ localStorage.setItem(PREF,on?"on":"off"); }catch{} };
+
+const INKS=[["#1B2140","שחור"],["#2563D9","כחול"],["#D3455B","אדום"]];
+const ERASERS=[[16,"קטן"],[40,"בינוני"],[90,"גדול"]];
+const TOOLS=[["move","✋","הזזה"],["pen","✏️","עט"],["line","╱","קו ישר"],["circle","◯","עיגול"],["eraser","🧽","מחק"]];
+const PEN=2.6, SHAPE=2.4, SNAP=12, GRAB=9, STEP=2, HISTORY=100;
+const PAPER_INK="#1B2140", PAPER_FAINT="#C5CBDF", SELECT="#2563D9";
+const FONT='500 17px Rubik, system-ui, "Segoe UI", sans-serif', LINE_H=27, CARD_PAD=14;
+
+/* sketch key -> {marks, past}: marks are drawn in order; past holds copies of marks for undo */
+const sketches=new Map(), images=new Map();
+let el=null, canvas=null, ctx=null, key="", base="", pages=0, page=0, layer=null, source=null, hand=null, onPage=null;
+let tool="pen", ink=INKS[0][0], eraser=ERASERS[1][0];
+let draft=null, drag=null, rub=null, selection=[];
+
+const sketch=()=>{ if(!sketches.has(key)) sketches.set(key,{marks:[],past:[],y:0}); return sketches.get(key); };   // y: how far down the paper is scrolled
+const marks=()=>sketch().marks;
+const copy=list=>JSON.parse(JSON.stringify(list));
+function remember(before=copy(marks())){ const s=sketch(); s.past.push(before); if(s.past.length>HISTORY) s.past.shift(); }
+const shown=()=>!!el?.isConnected&&canvas.clientWidth>0;
+const dist=(a,b)=>Math.hypot(a[0]-b[0],a[1]-b[1]);
+const same=(a,b)=>dist(a,b)<.5;
+
+function build(){
+  el=document.createElement("aside"); el.className="mx-board"; el.setAttribute("aria-label","לוח טיוטה");
+  el.innerHTML=`<div class="mx-board-bar" role="toolbar" aria-label="כלי הלוח">
+      <span class="mx-board-group">${TOOLS.map(([t,icon,name])=>`<button type="button" data-tool="${t}" aria-pressed="${t===tool}" title="${name}"><i aria-hidden="true">${icon}</i><span>${name}</span></button>`).join("")}</span>
+      <span class="mx-board-group mx-board-inks">${INKS.map(([c,name])=>`<button type="button" data-ink="${c}" aria-pressed="${c===ink}" aria-label="${name}" title="${name}" style="--dot:${c}"></button>`).join("")}</span>
+      <span class="mx-board-group mx-board-sizes">${ERASERS.map(([w,name])=>`<button type="button" data-eraser="${w}" aria-pressed="${w===eraser}" aria-label="מחק ${name}" title="מחק ${name}" style="--d:${Math.round(6+w/6)}px"></button>`).join("")}</span>
+      <span class="mx-board-gap"></span>
+      <button type="button" data-do="question" title="העתקת השאלה לראש הלוח"><i aria-hidden="true">📋</i><span>השאלה</span></button>
+      <button type="button" data-do="undo" title="ביטול (Ctrl+Z)"><i aria-hidden="true">↶</i></button>
+      <button type="button" data-do="clear" title="ניקוי הלוח"><i aria-hidden="true">🗑</i></button>
+      <button type="button" data-do="hide" aria-label="סגירת הלוח" title="סגירת הלוח">✕</button>
+    </div><div class="mx-board-row"><div class="mx-board-pages" role="tablist" aria-label="הדף של כל שאלה"></div>
+      <button type="button" data-do="send" class="mx-board-send" hidden></button></div>
+    <div class="mx-board-stage"><canvas></canvas>
+      <button type="button" data-do="delete" class="mx-board-del" title="מחיקת מה שנבחר (Delete)" hidden>✕ מחיקה</button>
+      <button type="button" data-do="top" class="mx-board-top" hidden>⇡ לראש הדף</button></div>`;
+  canvas=el.querySelector("canvas"); ctx=canvas.getContext("2d");
+  el.addEventListener("click",e=>{
+    const b=e.target.closest("button"); if(!b) return;
+    if(b.dataset.tool) setTool(b.dataset.tool);
+    if(b.dataset.ink){ ink=b.dataset.ink; if(tool==="eraser"||tool==="move") setTool("pen"); pressed("[data-ink]",b); }
+    if(b.dataset.eraser){ eraser=+b.dataset.eraser; setTool("eraser"); pressed("[data-eraser]",b); }
+    if(b.dataset.page){ turn(+b.dataset.page); onPage?.(page); }
+    const act=b.dataset.do;
+    if(act==="undo") undo();
+    if(act==="clear"&&marks().length){ remember(); marks().length=0; select([]); paint(); drawPages(); }
+    if(act==="delete") removeSelection();
+    if(act==="question") copyQuestion();
+    if(act==="send") send();
+    if(act==="top"){ sketch().y=0; paint(); }
+    if(act==="hide") toggle();
+  });
+  canvas.addEventListener("pointerdown",down);
+  canvas.addEventListener("pointermove",move);
+  canvas.addEventListener("pointerup",up);
+  canvas.addEventListener("pointercancel",up);
+  canvas.addEventListener("contextmenu",e=>e.preventDefault());
+  canvas.addEventListener("wheel",e=>{   // endless paper: scrolls down as far as needed, never above the top
+    if(e.ctrlKey) return;   // the browser's zoom
+    e.preventDefault(); const s=sketch(), dy=e.deltaMode===1?e.deltaY*24:e.deltaMode===2?e.deltaY*canvas.clientHeight:e.deltaY;
+    s.y=Math.max(0,s.y+dy); paint();
+  },{passive:false});   // the pen's side button: no browser menu over the board
+  new ResizeObserver(fit).observe(canvas);
+  setTool(tool);
+}
+function pressed(sel,b){ el.querySelectorAll(sel).forEach(x=>x.setAttribute("aria-pressed",x===b)); }
+function reset(){ draft=drag=rub=null; select([]); }
+function setTool(t){
+  tool=t; el.querySelectorAll("[data-tool]").forEach(x=>x.setAttribute("aria-pressed",x.dataset.tool===t));
+  el.dataset.tool=t; if(t!=="move"&&selection.length){ select([]); paint(); }
+  // the eraser's cursor is a ring its own size, so the student sees what it will wipe
+  const r=eraser/2, svg=`<svg xmlns='http://www.w3.org/2000/svg' width='${eraser+2}' height='${eraser+2}'><circle cx='${r+1}' cy='${r+1}' r='${r}' fill='rgba(255,255,255,.35)' stroke='%231B2140' stroke-width='1.2'/></svg>`;
+  canvas.style.cursor=t==="eraser"?`url("data:image/svg+xml,${svg.replace(/</g,"%3C").replace(/>/g,"%3E")}") ${r+1} ${r+1}, cell`:t==="move"?"default":"";
+}
+function select(list){ selection=list; }
+function turn(p){ page=p; key=`${base}:${page}`; reset(); drawPages(); drawSend(); paint(); }
+function drawSend(){
+  const b=el.querySelector(".mx-board-send"); b.hidden=!hand; el.querySelector(".mx-board-row").hidden=pages<2&&!hand; if(!hand) return;
+  b.disabled=false; b.innerHTML=`<i aria-hidden="true">📤</i><span>הגשה לשאלה ${page+1}</span>`; b.title=`הגשת הלוח כתשובה לשאלה ${page+1}`;
+}
+function drawPages(){
+  const box=el.querySelector(".mx-board-pages"); el.querySelector(".mx-board-row").hidden=pages<2&&!hand;
+  box.innerHTML=pages<2?"":`<span>שאלה</span>${Array.from({length:pages},(_,i)=>{
+    const has=(sketches.get(`${base}:${i}`)?.marks||[]).length>0;
+    return `<button type="button" role="tab" data-page="${i}" aria-selected="${i===page}" class="${has?"has":""}">${i+1}</button>`; }).join("")}`;
+}
+
+/* ---------- drawing ---------- */
+function fit(){
+  if(!shown()) return;
+  const d=devicePixelRatio||1, w=Math.round(canvas.clientWidth*d), h=Math.round(canvas.clientHeight*d);
+  if(canvas.width!==w||canvas.height!==h){ canvas.width=w; canvas.height=h; }
+  paint();
+}
+function paint(){
+  if(!ctx) return;
+  const d=devicePixelRatio||1, y=sketch().y; ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,canvas.width,canvas.height); ctx.setTransform(d,0,0,d,0,-y*d);
+  canvas.style.backgroundPosition=`0 ${-y}px`;   // the grid scrolls with the paper
+  el.querySelector(".mx-board-top").hidden=y<1;
+  marks().forEach(draw);
+  if(draft?.kind==="circle") guide(draft);
+  if(selection.length) outline(selection);
+  const del=el.querySelector(".mx-board-del"); del.hidden=!selection.length||!!drag?.before;
+  if(selection.length){ const [x0,y0]=edges(selection); del.style.left=`${Math.max(4,x0)}px`; const top=y0-y; del.style.top=`${top>40?top-36:Math.max(4,top+4)}px`; }
+}
+function draw(m){
+  ctx.save(); ctx.strokeStyle=m.color; ctx.lineCap="round"; ctx.lineJoin="round";
+  if(m.kind==="line"){ ctx.lineWidth=SHAPE; ctx.beginPath(); ctx.moveTo(...m.a); ctx.lineTo(...m.b); ctx.stroke(); }
+  else if(m.kind==="circle"){ ctx.lineWidth=SHAPE; ctx.beginPath(); ctx.arc(m.a[0],m.a[1],dist(m.a,m.b),0,Math.PI*2); ctx.stroke(); }
+  else if(m.kind==="card") card(m);
+  else{ for(let i=1;i<m.pts.length;i++) segment(m,i); if(m.pts.length===1) segment(m,0); }
+  ctx.restore();
+}
+// one piece of a pen stroke, from point i-1 to point i; a pen's pressure sets the width
+function segment(m,i){
+  const a=m.pts[Math.max(0,i-1)], b=m.pts[i];
+  ctx.lineWidth=PEN*(.35+1.3*(a[2]+b[2])/2);
+  ctx.beginPath(); ctx.moveTo(a[0],a[1]); ctx.lineTo(b[0]+(i?0:.01),b[1]); ctx.stroke();
+}
+// while a circle is dragged: its center and radius, faintly, so it can be placed exactly
+function guide(m){
+  ctx.save(); ctx.strokeStyle=ctx.fillStyle="rgb(27 33 64/.45)"; ctx.lineWidth=1; ctx.setLineDash([4,4]);
+  ctx.beginPath(); ctx.moveTo(...m.a); ctx.lineTo(...m.b); ctx.stroke();
+  ctx.setLineDash([]); ctx.beginPath(); ctx.arc(m.a[0],m.a[1],2.5,0,Math.PI*2); ctx.fill(); ctx.restore();
+}
+function card(m){
+  ctx.fillStyle="#EEF1FB"; ctx.strokeStyle=PAPER_FAINT; ctx.lineWidth=1;
+  ctx.beginPath(); ctx.roundRect(m.x,m.y,m.w,m.h,12); ctx.fill(); ctx.stroke();
+  ctx.fillStyle=PAPER_INK; ctx.font=FONT; ctx.direction="rtl"; ctx.textAlign="right"; ctx.textBaseline="top";
+  m.lines.forEach((line,i)=>ctx.fillText(line,m.x+m.w-CARD_PAD,m.y+CARD_PAD+i*LINE_H+4));
+  for(const f of m.figs){ const img=picture(f.src); if(img.complete&&img.naturalWidth) ctx.drawImage(img,m.x+f.x,m.y+f.y,f.w,f.h); }
+}
+function picture(src){
+  if(!images.has(src)){ const img=new Image(); img.onload=()=>paint(); img.src=src; images.set(src,img); }
+  return images.get(src);
+}
+function box(m){
+  if(m.kind==="card") return [m.x,m.y,m.x+m.w,m.y+m.h];
+  if(m.kind==="circle"){ const r=dist(m.a,m.b); return [m.a[0]-r,m.a[1]-r,m.a[0]+r,m.a[1]+r]; }
+  const pts=m.kind==="line"?[m.a,m.b]:m.pts, xs=pts.map(p=>p[0]), ys=pts.map(p=>p[1]);
+  return [Math.min(...xs),Math.min(...ys),Math.max(...xs),Math.max(...ys)];
+}
+// the box around the elements, a little outside their ink
+function edges(list){ const bs=list.map(box); return [Math.min(...bs.map(b=>b[0]))-6,Math.min(...bs.map(b=>b[1]))-6,Math.max(...bs.map(b=>b[2]))+6,Math.max(...bs.map(b=>b[3]))+6]; }
+function outline(list){
+  const [x0,y0,x1,y1]=edges(list);
+  ctx.save(); ctx.strokeStyle=SELECT; ctx.lineWidth=1.5; ctx.setLineDash([6,4]); ctx.strokeRect(x0,y0,x1-x0,y1-y0); ctx.restore();
+}
+
+/* ---------- geometry ---------- */
+function toSegment(p,a,b){
+  const dx=b[0]-a[0], dy=b[1]-a[1], l=dx*dx+dy*dy, t=l?Math.max(0,Math.min(1,((p[0]-a[0])*dx+(p[1]-a[1])*dy)/l)):0;
+  return Math.hypot(p[0]-a[0]-t*dx,p[1]-a[1]-t*dy);
+}
+// how far p is from the element's ink
+function reach(m,p){
+  if(m.kind==="line") return toSegment(p,m.a,m.b);
+  if(m.kind==="circle") return Math.min(Math.abs(dist(p,m.a)-dist(m.a,m.b)),dist(p,m.a));
+  if(m.kind==="card"){ const [x0,y0,x1,y1]=box(m); return p[0]>=x0&&p[0]<=x1&&p[1]>=y0&&p[1]<=y1?0:Infinity; }
+  if(m.pts.length===1) return dist(p,m.pts[0]);
+  let d=Infinity; for(let i=1;i<m.pts.length;i++) d=Math.min(d,toSegment(p,m.pts[i-1],m.pts[i])); return d;
+}
+const hit=p=>{ const all=marks(); for(let i=all.length-1;i>=0;i--) if(reach(all[i],p)<=GRAB) return all[i]; return null; };
+const joints=m=>m.kind==="line"?[m.a,m.b]:m.kind==="circle"?[m.a]:[];
+// an element and everything joined to it by a shared end or center: a triangle moves as one
+function group(m){
+  const out=new Set([m]), todo=[m];
+  while(todo.length){ const cur=todo.pop();
+    for(const o of marks()) if(!out.has(o)&&joints(cur).some(p=>joints(o).some(q=>same(p,q)))){ out.add(o); todo.push(o); } }
+  return [...out];
+}
+// a line's ends and a circle's center pull to the ends and centers already on the board
+function snap(p,skip){
+  let best=null, d=SNAP;
+  for(const m of marks()){ if(m===skip) continue; for(const q of joints(m)){ const k=dist(p,q); if(k<d){ d=k; best=q; } } }
+  return best?[best[0],best[1]]:[p[0],p[1]];
+}
+function shift(m,dx,dy){
+  const by=p=>{ p[0]+=dx; p[1]+=dy; };
+  if(m.kind==="card"){ m.x+=dx; m.y+=dy; } else if(m.kind==="free") m.pts.forEach(by); else { by(m.a); by(m.b); }
+}
+// the eraser at p: lines and circles it touches go; pen strokes are cut; the question's copy stays
+function rubOut(p){
+  const r=eraser/2, all=marks(); let changed=false;
+  for(let i=all.length-1;i>=0;i--){ const m=all[i];
+    if(m.kind==="line"||m.kind==="circle"){ if(reach(m,p)<=r+SHAPE/2){ all.splice(i,1); changed=true; } continue; }
+    if(m.kind!=="free") continue;
+    const gone=m.pts.map(q=>dist(p,q)<=r+PEN); if(!gone.some(Boolean)) continue;
+    const runs=[]; let run=[]; m.pts.forEach((q,k)=>{ if(gone[k]){ if(run.length) runs.push(run); run=[]; } else run.push(q); }); if(run.length) runs.push(run);
+    all.splice(i,1,...runs.map(pts=>({kind:"free",color:m.color,pts}))); changed=true;
+  }
+  return changed;
+}
+// points along a to b, close enough that nothing between two of them is skipped
+function along(a,b,step){ const n=Math.max(1,Math.ceil(dist(a,b)/step)), out=[]; for(let k=1;k<=n;k++) out.push([a[0]+(b[0]-a[0])*k/n,a[1]+(b[1]-a[1])*k/n,a[2]+((b[2]??a[2])-a[2])*k/n]); return out; }
+
+/* ---------- the pointer ---------- */
+const at=e=>{ const r=canvas.getBoundingClientRect(); return [e.clientX-r.left,e.clientY-r.top+sketch().y,e.pointerType==="pen"?e.pressure:.5]; };   // a point on the paper, not on the screen
+function down(e){
+  if(e.button!==0&&e.button!==5) return;   // 5: the pen's eraser end
+  const p=at(e), use=e.button===5||(e.buttons&32)>0?"eraser":tool;
+  canvas.setPointerCapture(e.pointerId); e.preventDefault();
+  if(use==="move"){
+    const m=hit(p);
+    if(!m){ select([]); return paint(); }
+    if(!selection.includes(m)) select(group(m));
+    drag={id:e.pointerId,last:p,before:null}; return paint();
+  }
+  if(use==="eraser"){ rub={id:e.pointerId,last:p,before:copy(marks()),changed:rubOut(p)}; return paint(); }
+  remember();
+  draft=use==="pen"?{kind:"free",color:ink,pts:[p]}:{kind:use,color:ink,a:snap(p),b:null};
+  if(draft.b===null) draft.b=[...draft.a];
+  draft.id=e.pointerId; marks().push(draft); paint();
+}
+function move(e){
+  if(tool==="move"&&!drag&&!e.buttons) canvas.style.cursor=hit(at(e))?"move":"default";
+  if(drag&&e.pointerId===drag.id){
+    const p=at(e), dx=p[0]-drag.last[0], dy=p[1]-drag.last[1]; if(!dx&&!dy) return;
+    if(!drag.before){ drag.before=true; remember(); }
+    selection.forEach(m=>shift(m,dx,dy)); drag.last=p; return paint();
+  }
+  if(rub&&e.pointerId===rub.id){
+    const p=at(e); for(const q of along(rub.last,p,eraser/4)) rub.changed=rubOut(q)||rub.changed;
+    rub.last=p; return paint();
+  }
+  if(!draft||e.pointerId!==draft.id) return;
+  if(draft.kind==="free"){
+    for(const c of e.getCoalescedEvents?.()||[e]){ const p=at(c); draft.pts.push(...along(draft.pts.at(-1),p,STEP)); }
+    ctx.save(); ctx.strokeStyle=draft.color; ctx.lineCap=ctx.lineJoin="round";
+    for(let i=Math.max(1,draft.drawn||1);i<draft.pts.length;i++) segment(draft,i);
+    draft.drawn=draft.pts.length; ctx.restore(); return;
+  }
+  const p=at(e); draft.b=draft.kind==="line"?snap(p,draft):[p[0],p[1]]; paint();
+}
+function up(e){
+  if(drag&&e.pointerId===drag.id){ drag=null; return paint(); }
+  if(rub&&e.pointerId===rub.id){ if(rub.changed) remember(rub.before); rub=null; paint(); return pages>1&&drawPages(); }
+  if(!draft||e.pointerId!==draft.id) return;
+  const m=draft; draft=null; delete m.id; delete m.drawn;
+  if(m.kind!=="free"&&dist(m.a,m.b)<3){ marks().pop(); sketch().past.pop(); }   // a tap, not a shape
+  paint(); if(pages>1) drawPages();
+}
+function undo(){ const s=sketch(); if(!s.past.length) return; s.marks=s.past.pop(); reset(); paint(); if(pages>1) drawPages(); }
+function removeSelection(){
+  if(!selection.length) return;
+  remember(); const all=marks(); for(const m of selection) all.splice(all.indexOf(m),1);
+  select([]); paint(); if(pages>1) drawPages();
+}
+
+/* ---------- the question's copy ---------- */
+// the question's words, with each piece of math kept left to right and in one piece
+function words(node){
+  const out=[]; let word="";
+  const flush=()=>{ if(word) out.push(word); word=""; };
+  (function walk(n){
+    for(const c of n.childNodes){
+      if(c.nodeType===3){ for(const ch of c.textContent){ if(/\s/.test(ch)) flush(); else word+=ch; } }
+      else if(c.nodeName==="BR"){ flush(); out.push("\n"); }
+      else if(c.classList?.contains("m")) word+="⁦"+c.textContent.trim()+"⁩";   // math kept left to right, stuck to the brackets and marks around it
+      else walk(c);
+    }
+  })(node);
+  flush(); return out;
+}
+function wrap(tokens,width){
+  ctx.save(); ctx.font=FONT; ctx.direction="rtl";
+  const lines=[]; let line="";
+  for(const t of tokens){
+    if(t==="\n"){ lines.push(line); line=""; continue; }
+    const next=line?line+" "+t:t;
+    if(line&&ctx.measureText(next).width>width){ lines.push(line); line=t; } else line=next;
+  }
+  if(line) lines.push(line); ctx.restore(); return lines;
+}
+// a figure drawn for the dark sheet, redrawn in ink for the white board
+function paperColor(c){
+  const m=String(c).match(/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?/); if(!m) return c;
+  if(m[4]!==undefined&&+m[4]===0) return "none";
+  const l=(.299*m[1]+.587*m[2]+.114*m[3])/255;
+  return l>.55?PAPER_INK:l<.3?PAPER_FAINT:c;
+}
+const STYLE=["fill","stroke","stroke-width","stroke-dasharray","stroke-linecap","stroke-linejoin","opacity","font-size","font-family","font-weight","font-style","text-anchor","dominant-baseline"];
+function paperFigure(svg){
+  const r=svg.getBoundingClientRect(); if(!r.width||!r.height) return null;
+  const clone=svg.cloneNode(true), from=[svg,...svg.querySelectorAll("*")], to=[clone,...clone.querySelectorAll("*")];
+  from.forEach((n,i)=>{ const cs=getComputedStyle(n);
+    for(const prop of STYLE){ let v=cs.getPropertyValue(prop); if(prop==="fill"||prop==="stroke") v=paperColor(v); if(v) to[i].style.setProperty(prop,v); } });
+  clone.setAttribute("xmlns","http://www.w3.org/2000/svg"); clone.setAttribute("width",r.width); clone.setAttribute("height",r.height);
+  clone.removeAttribute("class"); clone.style.background="none";
+  return {src:"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(new XMLSerializer().serializeToString(clone)),w:r.width,h:r.height};
+}
+function copyQuestion(){
+  const q=source?.(page); if(!q||!shown()) return;
+  const text=q.querySelector(".mx-uq-text")||q.querySelector(":scope > p");
+  const W=Math.min(canvas.clientWidth-32,600), inner=W-2*CARD_PAD;
+  const lines=text?wrap(words(text),inner):[];
+  let y=CARD_PAD+lines.length*LINE_H+(lines.length?6:0);
+  const figs=[];
+  for(const svg of q.querySelectorAll("svg")){
+    if(svg.closest("button")) continue;   // the answers' buttons are not part of the question
+    const f=paperFigure(svg); if(!f) continue;
+    const s=Math.min(1,inner/f.w), w=f.w*s, h=f.h*s;
+    figs.push({src:f.src,x:(W-w)/2,y,w,h}); y+=h+8;
+  }
+  if(!lines.length&&!figs.length) return;
+  remember();
+  const m={kind:"card",x:canvas.clientWidth-16-W,y:sketch().y+16,w:W,h:y+CARD_PAD-(figs.length?8:0),lines,figs};
+  marks().push(m); setTool("move"); select([m]); paint(); if(pages>1) drawPages();
+}
+
+/* ---------- handing in ---------- */
+// the whole sketch as a picture on white paper: as wide as the board, as tall as what is drawn
+function snapshot(){
+  const all=marks(); if(!all.some(m=>m.kind!=="card")) return null;
+  const [,y0,,y1]=edges(all), top=Math.max(0,y0-24), W=canvas.clientWidth, H=Math.min(y1+24-top,8000), k=2;
+  const out=document.createElement("canvas"); out.width=W*k; out.height=Math.round(H*k);
+  const keep=ctx; ctx=out.getContext("2d");
+  try{ ctx.fillStyle="#fff"; ctx.fillRect(0,0,out.width,out.height); ctx.setTransform(k,0,0,k,0,-top*k); all.forEach(draw); }
+  finally{ ctx=keep; }
+  return new Promise(ok=>out.toBlob(ok,"image/png"));
+}
+async function send(){
+  const b=el.querySelector(".mx-board-send"), p=page, say=t=>{ if(page===p) b.innerHTML=t; };
+  const blob=await snapshot();
+  if(!blob){ say(`<span>הלוח ריק: אין מה להגיש</span>`); return setTimeout(()=>page===p&&drawSend(),2500); }
+  b.disabled=true; say(`<span>מגישים…</span>`);
+  let r; try{ r=await hand(p,blob); }catch(e){ r={error:e.message}; }
+  b.disabled=false; say(r?.error?`<span>⚠ ${r.error}</span>`:`<i aria-hidden="true">✓</i><span>הוגשה לשאלה ${p+1}</span>`);
+  setTimeout(()=>page===p&&!b.disabled&&drawSend(),3000);
+}
+
+document.addEventListener("keydown",e=>{
+  if(!shown()||e.target.closest?.("input,textarea,[contenteditable]")) return;
+  if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="z"&&!e.shiftKey){ e.preventDefault(); undo(); }
+  else if((e.key==="Delete"||e.key==="Backspace")&&selection.length){ e.preventDefault(); removeSelection(); }
+});
+
+/* Shows the board in the sheet's layer when the student has it on, and takes it away when not.
+   sketchKey names the sketch; with pages>1 (a sheet with several questions at once) the board has a tab per question.
+   question(page) gives the element the question is shown in, for the board's copy of it. */
+function mount(sheetLayer,sketchKey,{pages:n=1,question=null,submit=null,turned=null}={}){
+  layer=sheetLayer; source=question; hand=submit; onPage=turned;
+  if(sketchKey!==base||n!==pages){ base=sketchKey; pages=n; page=0; }
+  key=pages>1?`${base}:${page}`:base;
+  const sheet=layer.querySelector(".mx-sheet"), on=isOn();
+  layer.querySelector("[data-board-toggle]")?.setAttribute("aria-pressed",on);
+  sheet?.classList.toggle("with-board",on);
+  if(on) sheet?.removeAttribute("aria-modal"); else sheet?.setAttribute("aria-modal","true");   // the board is outside the dialog: still reachable
+  if(!on){ el?.remove(); return; }
+  if(!el) build();
+  reset(); drawPages(); drawSend(); layer.append(el); fit();
+}
+const again=()=>mount(layer,base,{pages,question:source,submit:hand,turned:onPage});
+function toggle(){ setOn(!isOn()); if(layer) again(); }
+// opens the board on one question's page (the unit quiz's own button under each question)
+function show(p){ setOn(true); if(!layer) return; again(); if(pages>1&&p!==page) turn(p); }
+// the header's switch: shown on a desktop screen only (math.css)
+const button=()=>`<button class="mx-board-btn" data-board-toggle aria-pressed="${isOn()}" title="לוח טיוטה ליד התרגיל">✏️ לוח</button>`;
+
+window.MathlyBoard={button,mount,toggle,show,isOn};
+})();

static/math.css

@@ -657,3 +657,53 @@ button.sky-chip.flame{padding:6px 11px;color:var(--ink)}
 .mx-star.fix{box-shadow:0 0 0 3px var(--gold),0 0 14px color-mix(in srgb,var(--gold) 55%,transparent)}
 .mx-lbl.l-fix em{background:var(--gold);color:#2A1B00}
 .mx-pattern-note{display:block;margin-top:6px;padding:8px 10px;border-inline-start:3px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--ink);font-size:13.5px}
+
+/* the sketch board beside a skill's exercise (static/math-board.js): a desktop screen with a mouse or a pen only */
+.mx-shacts{display:flex;align-items:center;gap:6px}
+.mx-board-btn,.mx-board,.mx-board-only{display:none}
+.mx-board-btn{border:1px solid var(--line);background:none;color:var(--muted);font:700 14px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer}
+.mx-board-btn[aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
+@media (min-width:1000px) and (any-pointer:fine){
+  .mx-board-btn,.mx-board-only{display:inline-block}
+  .mx-sheet.with-board{inset:16px 16px 16px auto;width:min(600px,42vw);max-height:none;border-radius:20px}
+  .mx-board{display:flex;flex-direction:column;position:fixed;z-index:62;top:16px;bottom:16px;left:16px;right:calc(min(600px,42vw) + 32px);
+    background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 30px rgb(0 0 0/.25)}
+}
+.mx-board-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
+.mx-board-bar button{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;background:none;color:var(--muted);
+  font:500 14px/1 var(--f-body);padding:7px 10px;border-radius:10px;cursor:pointer;min-height:34px}
+.mx-board-bar button i{font-style:normal;font-size:16px;line-height:1}
+.mx-board-bar button:hover{color:var(--ink);background:var(--surface-2)}
+.mx-board-bar button[hidden]{display:none}
+.mx-board-bar button[aria-pressed="true"]{color:var(--ink);border-color:var(--mx-accent);background:var(--mx-accent-soft)}
+@media (max-width:1280px){.mx-board-bar button span{display:none}}   /* a narrower board: icons only, names stay as tooltips */
+.mx-board-group{display:inline-flex;align-items:center;gap:3px}
+.mx-board-inks,.mx-board-sizes{padding-inline:6px;border-inline-start:1px solid var(--line)}
+.mx-board-inks button,.mx-board-sizes button{width:34px;padding:0;justify-content:center}
+.mx-board-inks button::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px #fff}
+.mx-board-sizes button::before{content:"";width:var(--d);height:var(--d);border-radius:50%;border:1.5px solid currentColor}
+.mx-board:not([data-tool="eraser"]) .mx-board-sizes{display:none}   /* the sizes show with the eraser */
+.mx-board-gap{flex:1}
+.mx-board-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
+.mx-board-row[hidden]{display:none}
+.mx-board-pages{display:flex;align-items:center;gap:4px;flex:1;color:var(--muted);font-size:13px}
+.mx-board-pages span{margin-inline-end:4px}
+.mx-board-pages button{min-width:30px;height:28px;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;font:700 13px/1 var(--f-body);cursor:pointer}
+.mx-board-pages button.has{color:var(--ink)}
+.mx-board-pages button[aria-selected="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
+.mx-board-stage{position:relative;flex:1;min-height:0}
+.mx-board canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;
+  background-color:#F8F7F2;background-image:linear-gradient(rgb(27 33 64/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(27 33 64/.07) 1px,transparent 1px);
+  background-size:28px 28px}
+.mx-board-del{position:absolute;z-index:1;border:1px solid #E7B3BB;background:#FFF1F3;color:#B4233A;font:700 13px/1 var(--f-body);
+  padding:7px 11px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
+.mx-board-del[hidden]{display:none}
+
+.mx-board-send{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent);
+  font:700 14px/1 var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
+.mx-board-send[hidden]{display:none}
+.mx-board-send:disabled{opacity:.7;cursor:progress}
+.mx-board-top{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);border:1px solid #C5CBDF;background:#fff;color:#1B2140;
+  font:700 13px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
+.mx-board-top[hidden]{display:none}
+.mx-uq-q{scroll-margin-top:90px}   /* a question scrolled to from the board's tabs shows below the quiz's sticky head */

static/math.js

@@ -55,7 +55,7 @@ function mergeProgress(a,b){
   out.updated=Math.max(+a.updated||0,+b.updated||0);
   return out;
 }
-const synced=()=>false;
+const synced=()=>!!(AUTH_URL&&CFG.token);
 let pushTimer=null;
 async function pullProgress(){
   if(!synced()) return null;
@@ -161,7 +161,8 @@ async function show(){
   }
   const remote=await pullProgress();
   P=window.MathlySky.ensure(Object.assign({done:{},tries:{},solved:{},at:{},set:{}},remote?mergeProgress(load(),remote):load()));
-  if(remote){ try{ localStorage.setItem(key(),JSON.stringify(P)); }catch{} queuePush(); }   // this device's own work goes up too if(!P.set||typeof P.set!=="object") P.set={}; SHOWN=new Set(shownUnits().map(u=>u.id));
+  if(remote){ try{ localStorage.setItem(key(),JSON.stringify(P)); }catch{} queuePush(); }   // this device's own work goes up too
+  if(!P.set||typeof P.set!=="object") P.set={}; SHOWN=new Set(shownUnits().map(u=>u.id));
   hasExams()?drawSubjectPicker():selectSubject("מתמטיקה");   // no exams yet: straight to math, science is a tap away
   window.MathlyAnswers?.configure({api,account:CFG.userId,enabled:CFG.answerScans,root,onGraded:({questionId,grading})=>{
     if(grading.result.verdict!=="correct"||P.done[questionId])return;
@@ -433,7 +434,7 @@ function open(id){
     <div class="mx-sheet u-${s.unit}" role="dialog" aria-modal="true" aria-labelledby="mxTitle">
       <div class="mx-shtop"><div><span class="mx-uchip">${esc(unit.name)}</span>${s.core?' <span class="mx-core">ליבה 5 יח״ל</span>':""}
         <h3 id="mxTitle">${fmt(s.name)}</h3><small class="mx-src">${s.month?`בפריסה: ${esc(s.month)}`:esc(unit.source)}${st==="done"?" · הושלמה ✓":""}</small></div>
-        <button class="mx-x" data-act="close" aria-label="סגירה">✕</button></div>
+        <div class="mx-shacts">${window.MathlyBoard?.button()||""}<button class="mx-x" data-act="close" aria-label="סגירה">✕</button></div></div>
       <p>${fmt(s.description)}</p>
       <div class="mx-q">${n>1?`<div class="mx-qprog"><span>שאלה ${r.indexOf(curQ)+1} מתוך ${n}</span><span class="mx-qdots" aria-label="נפתרו ${gotN} מתוך ${n}">${r.map(i=>`<i class="${got.has(i)?"ok":""}${i===curQ?" now":""}"></i>`).join("")}</span></div>`:""}
         <p>${fmt(q.question)}</p>${figures(q)}
@@ -443,6 +444,7 @@ function open(id){
       <div class="mx-sec"><h4>פותחת</h4><div class="mx-chips">${chips(POST[id])}</div></div>
     </div>`;
   sheet.hidden=false; sheet.querySelector(".mx-sheet").scrollTop=0;
+  window.MathlyBoard?.mount(sheet,`${id}:${curQ}`,{question:()=>sheet.querySelector(".mx-q")});   // the sketch board beside the exercise, when the student has it on
   sheet.querySelector(".mx-x").focus({preventScroll:true});
   if(openEnded&&st!=="off")window.MathlyAnswers?.mountQuestion(sheet.querySelector(".mx-answer"),id,s.question_version);
 }
@@ -705,13 +707,14 @@ function quizShow(){
     <div class="mx-sheet mx-quiz-sheet" role="dialog" aria-modal="true" aria-labelledby="mxTitle">
       <div class="mx-shtop"><div><span class="mx-uchip">מבחן תרגול</span><h3 id="mxTitle">שאלה ${i+1} מתוך ${items.length}</h3>
         <small class="mx-src">⏱ <span class="mx-quiz-clock">${mmss(Date.now()-QZ.started)}</span></small></div>
-        <button class="mx-x" data-act="quiz-quit" aria-label="יציאה מהמבחן">✕</button></div>
+        <div class="mx-shacts">${window.MathlyBoard?.button()||""}<button class="mx-x" data-act="quiz-quit" aria-label="יציאה מהמבחן">✕</button></div></div>
       <div class="mx-quiz-dots">${items.map((x,k)=>`<button data-quiz-go="${k}" class="${x.pick!=null?"done":""}${k===i?" now":""}" aria-label="שאלה ${k+1}${x.pick!=null?", נענתה":""}">${k+1}</button>`).join("")}</div>
       <div class="mx-q"><p>${fmt(q.question)}</p>${figures(q)}
         <div class="mx-choices">${it.order.map(k=>{ const c=q.choices[k]; return `<button data-choice="${k}" data-m="${c.correct?"":esc(c.mistake)}"${c.correct?" data-right":""} aria-pressed="${it.pick===k}">${fmt(c.text)}</button>`; }).join("")}</div></div>
       <div class="mx-quiz-nav"><button class="mx-btn" data-act="quiz-prev"${i?"":" disabled"}>הקודמת</button>
         ${last?`<button class="mx-btn solid" data-act="quiz-submit">הגשה</button>`:`<button class="mx-btn solid" data-act="quiz-next">הבאה</button>`}</div></div>`;
   sheet.hidden=false; sheet.querySelector(".mx-sheet").scrollTop=0;
+  window.MathlyBoard?.mount(sheet,`quiz:${QZ.started}:${i}`,{question:()=>sheet.querySelector(".mx-q")});   // a sketch per exam question
 }
 // a choice is only marked; it can be changed until the exam is handed in
 function quizPick(btn){
@@ -849,7 +852,7 @@ function uqOpen(uid){
     <div class="mx-sheet mx-uq-sheet mx-uq-paper u-${uid}" role="dialog" aria-modal="true" aria-labelledby="mxTitle">
       <div class="mx-uq-head"><div><span class="mx-uchip">${esc(u.name)}</span><h3 id="mxTitle">בוחן מסכם</h3></div>
         <div class="mx-uq-clock" role="timer" aria-live="off"></div>
-        <button class="mx-x" data-act="close" aria-label="יציאה (השעון ממשיך)">✕</button></div>
+        <div class="mx-shacts">${window.MathlyBoard?.button()||""}<button class="mx-x" data-act="close" aria-label="יציאה (השעון ממשיך)">✕</button></div></div>
       <p class="mx-uq-banner" aria-live="polite"></p>
       <ol class="mx-uq-qs">${u.quiz.questions.map((q,i)=>`<li class="mx-uq-q" id="uq-q${i}">
         <div class="mx-uq-qhead"><b>שאלה ${i+1}</b><span>${q.points} נק׳</span></div>
@@ -858,6 +861,13 @@ function uqOpen(uid){
       <div class="mx-quiz-nav"><span class="mx-small" data-uq-count></span><button class="mx-btn solid" data-act="uq-submit">הגשת הבוחן</button></div>
       <input type="file" accept="image/*" capture="environment" hidden data-uq-file></div>`;
   sheet.hidden=false; sheet.querySelector(".mx-sheet").scrollTop=0;
+  // all the questions on one paper: the board has a page per question, and hands in that page as the question's answer
+  window.MathlyBoard?.mount(sheet,`uq:${uid}:${sit.started}`,{pages:u.quiz.questions.length,question:i=>sheet.querySelector(`#uq-q${i}`),
+    submit:async(i,picture)=>{
+      if(UQ?.uid!==uid||uqState(uid).sitting?.submitted) return {error:"הבוחן כבר הוגש"};
+      await uqUpload(i,picture); return UQ?.msg[i]?{error:UQ.msg[i]}:{};
+    },
+    turned:i=>sheet.querySelector(`#uq-q${i}`)?.scrollIntoView({block:"start",behavior:"smooth"})});
   sheet.querySelector("[data-uq-file]").onchange=e=>{ const f=e.target.files[0]; e.target.value=""; if(f&&UQ?.pick!=null) uqUpload(UQ.pick,f); };
   uqTick(); UQ.clock=setInterval(uqTick,1000);
   sit.attempts.forEach((_,i)=>uqRefresh(i));
@@ -894,7 +904,7 @@ function uqDrawAnswer(i){
   const phoneBtn=touch?"":window.MathlyAnswers.phoneLive(has?null:r?.scan,`data-uq-phone="${i}"`,`data-uq-cancel="${i}"`,has?"צילום מחדש בטלפון":"צילום בטלפון",!!busy);
   box.innerHTML=`${has?`<img class="mx-uq-img" alt="התשובה המצולמת לשאלה ${i+1}" src="${UQ.images[i]||""}">`:""}
     <p class="mx-small" role="status">${busy?esc(busy):UQ.msg[i]?esc(UQ.msg[i]):has?"✓ התשובה נשמרה":phone?"":st==="declined"?"הבקשה נדחתה בטלפון":st==="expired"?"בקשת הצילום פגה":"עוד לא צולמה תשובה"}</p>
-    <span class="mx-chips">${phoneBtn}<button class="mx-btn${has||!touch?"":" solid"}" data-uq-photo="${i}"${busy?" disabled":""}>${has&&touch?"צילום מחדש":touch?"צילום התשובה":"העלאת תמונה מהמחשב"}</button></span>`;
+    <span class="mx-chips">${window.MathlyBoard?`<button class="mx-btn mx-board-only" data-uq-board="${i}"${busy?" disabled":""}>✏️ פתרון בלוח</button>`:""}${phoneBtn}<button class="mx-btn${has||!touch?"":" solid"}" data-uq-photo="${i}"${busy?" disabled":""}>${has&&touch?"צילום מחדש":touch?"צילום התשובה":"העלאת תמונה מהמחשב"}</button></span>`;
   const done=Object.values(UQ.res).filter(x=>x?.attachment).length, n=uqState(UQ.uid).sitting.attempts.length;
   const c=sheet.querySelector("[data-uq-count]"); if(c) c.textContent=`צולמו ${done} מתוך ${n} תשובות`;
 }
@@ -1008,6 +1018,7 @@ async function uqResult(uid,h,check=false){
 function onClick(e){
   const t=e.target.closest("button,[data-act]"); if(!t||!root.contains(t)) return;
   if(t.dataset.choice!=null) return answer(t);
+  if(t.dataset.boardToggle!=null) return window.MathlyBoard?.toggle();
   if(t.dataset.quizUnit) return quizToggle(t.dataset.quizUnit);
   if(t.dataset.quizGo!=null) return quizGo(+t.dataset.quizGo);
   if(t.dataset.uquiz) return uqIntro(t.dataset.uquiz);   // a sitting in progress opens straight on its paper
@@ -1015,6 +1026,7 @@ function onClick(e){
   if(t.dataset.uqPhoto!=null){ UQ.pick=+t.dataset.uqPhoto; return sheet.querySelector("[data-uq-file]").click(); }
   if(t.dataset.uqPhone!=null) return uqPhone(+t.dataset.uqPhone);
   if(t.dataset.uqCancel!=null) return uqCancel(+t.dataset.uqCancel);
+  if(t.dataset.uqBoard!=null) return window.MathlyBoard?.show(+t.dataset.uqBoard);
   if(t.dataset.subject) return selectSubject(t.dataset.subject);
   if(t.dataset.view){ closeSheet(); return setView(t.dataset.view,t.dataset.unit); }
   if(t.dataset.comet) return showComet(t.dataset.comet);

tests/test_board_browser.py

@@ -0,0 +1,262 @@
+"""Browser checks of the sketch board beside a skill's exercise (static/math-board.js).
+Optional, like the other browser tests: pip install playwright && playwright install chromium."""
+import re
+import socket
+import threading
+import time
+
+import pytest
+import uvicorn
+
+from app.main import create_app
+
+playwright = pytest.importorskip("playwright.sync_api")
+
+
+@pytest.fixture(scope="module")
+def server():
+    app = create_app()
+    with socket.socket() as sock:
+        sock.bind(("127.0.0.1", 0))
+        srv = uvicorn.Server(uvicorn.Config(app, log_level="error"))
+        thread = threading.Thread(target=srv.run, kwargs={"sockets": [sock]}, daemon=True)
+        thread.start()
+        try:
+            deadline = time.monotonic() + 5
+            while not srv.started:
+                assert thread.is_alive() and time.monotonic() < deadline
+                time.sleep(.01)
+            yield f"http://127.0.0.1:{sock.getsockname()[1]}"
+        finally:
+            srv.should_exit = True
+            thread.join(timeout=5)
+
+
+@pytest.fixture(scope="module")
+def browser():
+    with playwright.sync_playwright() as p:
+        b = p.chromium.launch()
+        yield b
+        b.close()
+
+
+def open_skill(browser, server, width, height):
+    ctx = browser.new_context(viewport={"width": width, "height": height})
+    ctx.route("https://cdn.jsdelivr.net/**", lambda route: route.abort())
+    ctx.route("https://fonts.googleapis.com/**", lambda route: route.abort())
+    ctx.add_init_script("try{localStorage.setItem('mathly.sound','off')}catch{}")
+    page = ctx.new_page()
+    errors = []
+    page.on("pageerror", lambda e: errors.append(str(e)))
+    page.goto(server)
+    playwright.expect(page.locator(".mx-trail")).to_be_visible()
+    page.locator(".mx-star.st-next").click()
+    playwright.expect(page.locator(".mx-sheet")).to_be_visible()
+    return page, errors
+
+
+def ink_pixels(page):
+    return page.evaluate("""()=>{ const c=document.querySelector('.mx-board canvas'), d=c.getContext('2d').getImageData(0,0,c.width,c.height).data;
+      let n=0; for(let i=3;i<d.length;i+=4) if(d[i]) n++; return n; }""")
+
+
+def draw_line(page):
+    box = page.locator(".mx-board canvas").bounding_box()
+    x, y = box["x"] + 60, box["y"] + 60
+    page.mouse.move(x, y)
+    page.mouse.down()
+    for k in range(1, 12):
+        page.mouse.move(x + k * 15, y + k * 6)
+    page.mouse.up()
+
+
+def test_board_off_by_default_and_hidden_on_a_phone(browser, server):
+    page, errors = open_skill(browser, server, 390, 844)
+    playwright.expect(page.locator("[data-board-toggle]")).to_be_hidden()
+    assert page.locator(".mx-board").count() == 0
+    assert errors == []
+
+
+def test_board_turns_on_draws_undoes_and_is_remembered(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    toggle = page.locator("[data-board-toggle]")
+    playwright.expect(toggle).to_be_visible()
+    playwright.expect(toggle).to_have_attribute("aria-pressed", "false")
+    toggle.click()
+    playwright.expect(page.locator(".mx-board")).to_be_visible()
+    playwright.expect(page.locator(".mx-sheet")).to_have_class(re.compile(r"\bwith-board\b"))
+
+    # the board and the exercise sit side by side, not on top of each other
+    board, sheet = page.locator(".mx-board").bounding_box(), page.locator(".mx-sheet").bounding_box()
+    assert board["x"] + board["width"] <= sheet["x"]
+
+    draw_line(page)
+    assert ink_pixels(page) > 50
+    page.keyboard.press("Control+z")
+    assert ink_pixels(page) == 0
+
+    draw_line(page)
+    page.locator(".mx-board [data-do=clear]").click()
+    assert ink_pixels(page) == 0
+    page.locator(".mx-board [data-do=undo]").click()   # a clear can be undone
+    assert ink_pixels(page) > 50
+
+    # closed and opened again: the board is still on and the same question keeps its sketch
+    page.locator(".mx-x").click()
+    page.locator(".mx-star.st-next").click()
+    playwright.expect(page.locator(".mx-board")).to_be_visible()
+    assert ink_pixels(page) > 50
+
+    page.locator(".mx-board [data-do=hide]").click()
+    playwright.expect(page.locator(".mx-board")).to_have_count(0)
+    playwright.expect(page.locator("[data-board-toggle]")).to_have_attribute("aria-pressed", "false")
+    assert page.evaluate("localStorage.getItem('mathly.board')") == "off"
+    assert errors == []
+
+
+def alpha_near(page, x, y):
+    """The most ink in the 3x3 board pixels around (x, y), in CSS pixels from the board's corner."""
+    return page.evaluate("""([x,y])=>{ const c=document.querySelector('.mx-board canvas'), d=devicePixelRatio||1;
+      const px=c.getContext('2d').getImageData(Math.round(x*d)-1,Math.round(y*d)-1,3,3).data; let m=0;
+      for(let i=3;i<px.length;i+=4) m=Math.max(m,px[i]); return m; }""", [x, y])
+
+
+def drag(page, a, b, steps=10):
+    box = page.locator(".mx-board canvas").bounding_box()
+    page.mouse.move(box["x"] + a[0], box["y"] + a[1])
+    page.mouse.down()
+    for k in range(1, steps + 1):
+        page.mouse.move(box["x"] + a[0] + (b[0] - a[0]) * k / steps, box["y"] + a[1] + (b[1] - a[1]) * k / steps)
+    page.mouse.up()
+
+
+def board_on(page):
+    page.locator("[data-board-toggle]").click()
+    playwright.expect(page.locator(".mx-board")).to_be_visible()
+
+
+def test_lines_snap_circles_and_a_bigger_eraser(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+
+    page.locator(".mx-board [data-tool=line]").click()
+    drag(page, (100, 100), (300, 100))
+    assert alpha_near(page, 200, 100) > 0
+    drag(page, (305, 108), (305, 300))   # starts near the first line's end: it starts exactly there
+    assert alpha_near(page, 300, 120) > 0 and alpha_near(page, 306, 120) == 0
+
+    page.locator(".mx-board [data-tool=circle]").click()
+    drag(page, (450, 300), (530, 300))   # from the center out to the radius
+    assert alpha_near(page, 450, 380) > 0 and alpha_near(page, 450, 300) == 0
+
+    # the eraser's sizes show only with the eraser; the big one wipes what the small one misses
+    playwright.expect(page.locator(".mx-board-sizes")).to_be_hidden()
+    page.locator(".mx-board [data-tool=eraser]").click()
+    playwright.expect(page.locator(".mx-board-sizes")).to_be_visible()
+    page.locator(".mx-board [data-eraser='16']").click()
+    drag(page, (150, 125), (250, 125))
+    assert alpha_near(page, 200, 100) > 0
+    page.locator(".mx-board [data-eraser='90']").click()
+    drag(page, (150, 125), (250, 125))
+    assert alpha_near(page, 200, 100) == 0
+    assert errors == []
+
+
+def test_the_practice_exam_has_a_board_with_a_sketch_per_question(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    page.locator(".mx-x").click()
+    page.locator(".mx-quiz-card").click()
+    page.locator("[data-act=quiz-start]").click()
+    playwright.expect(page.locator(".mx-quiz-sheet")).to_be_visible()
+    board_on(page)
+    draw_line(page)
+    assert ink_pixels(page) > 50
+    page.locator("[data-act=quiz-next]").click()
+    playwright.expect(page.locator(".mx-board")).to_be_visible()   # still on for the next question, on a clean page
+    assert ink_pixels(page) == 0
+    page.locator("[data-act=quiz-prev]").click()
+    assert ink_pixels(page) > 50
+    assert errors == []
+
+
+def test_elements_move_together_when_joined_and_can_be_deleted(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+    page.locator(".mx-board [data-tool=line]").click()
+    drag(page, (100, 300), (300, 300))
+    drag(page, (302, 302), (200, 150))   # snaps to the first line's end
+    drag(page, (198, 148), (102, 298))   # and closes the triangle
+    page.locator(".mx-board [data-tool=circle]").click()
+    drag(page, (500, 250), (550, 250))
+
+    page.locator(".mx-board [data-tool=move]").click()
+    drag(page, (200, 300), (200, 400))   # grab the base: the whole triangle moves
+    assert alpha_near(page, 200, 300) == 0 and alpha_near(page, 200, 400) > 0
+    assert alpha_near(page, 200, 250) > 0   # the top corner came along (was at 150)
+    assert alpha_near(page, 550, 250) > 0   # the circle stayed
+
+    drag(page, (550, 250), (550, 450))   # the circle alone
+    assert alpha_near(page, 550, 250) == 0 and alpha_near(page, 550, 450) > 0
+    playwright.expect(page.locator(".mx-board-del")).to_be_visible()
+    page.keyboard.press("Delete")
+    assert alpha_near(page, 550, 450) == 0
+    page.keyboard.press("Control+z")   # a delete can be undone, and so can a move
+    assert alpha_near(page, 550, 450) > 0
+    page.keyboard.press("Control+z")
+    assert alpha_near(page, 550, 250) > 0
+    assert errors == []
+
+
+def test_the_eraser_cuts_a_pen_stroke_and_a_moved_shape_comes_whole(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+    drag(page, (100, 200), (500, 200), steps=30)   # a pen stroke
+    page.locator(".mx-board [data-tool=eraser]").click()
+    page.locator(".mx-board [data-eraser='40']").click()
+    drag(page, (300, 150), (300, 250))   # cut through the middle
+    assert alpha_near(page, 300, 200) == 0
+    assert alpha_near(page, 150, 200) > 0 and alpha_near(page, 450, 200) > 0
+
+    page.locator(".mx-board [data-tool=move]").click()
+    drag(page, (150, 200), (150, 400))   # the left piece is an element of its own
+    assert alpha_near(page, 150, 400) > 0 and alpha_near(page, 450, 200) > 0
+    assert errors == []
+
+
+def test_the_question_is_copied_to_the_top_of_the_board(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+    width = page.locator(".mx-board canvas").bounding_box()["width"]
+    assert alpha_near(page, width - 40, 30) == 0
+    page.locator(".mx-board [data-do=question]").click()
+    assert alpha_near(page, width - 40, 30) > 0   # a card at the top
+    playwright.expect(page.locator(".mx-board [data-tool=move]")).to_have_attribute("aria-pressed", "true")
+    drag(page, (width - 40, 30), (width - 40, 430))   # it moves like anything else
+    assert alpha_near(page, width - 40, 30) == 0 and alpha_near(page, width - 40, 430) > 0
+    page.locator(".mx-board-del").click()
+    assert ink_pixels(page) == 0
+    assert errors == []
+
+
+def test_the_wheel_scrolls_an_endless_paper(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+    drag(page, (100, 100), (300, 100))
+    box = page.locator(".mx-board canvas").bounding_box()
+    page.mouse.move(box["x"] + 300, box["y"] + 300)
+    page.mouse.wheel(0, -500)   # never above the top
+    page.wait_for_timeout(100)
+    assert alpha_near(page, 200, 100) > 0
+    page.mouse.wheel(0, 2000)
+    page.wait_for_timeout(100)
+    assert alpha_near(page, 200, 100) == 0   # scrolled out of sight
+    playwright.expect(page.locator(".mx-board-top")).to_be_visible()
+    drag(page, (100, 300), (300, 300))   # drawn far down the paper
+    page.locator(".mx-board-top").click()
+    assert alpha_near(page, 200, 100) > 0 and alpha_near(page, 200, 300) == 0
+    page.mouse.move(box["x"] + 300, box["y"] + 300)
+    page.mouse.wheel(0, 2000)
+    page.wait_for_timeout(100)
+    assert alpha_near(page, 200, 300) > 0
+    playwright.expect(page.locator(".mx-board-send")).to_be_hidden()   # handing in is the unit quiz's
+    assert errors == []

tests/test_unit_quiz.py

@@ -216,3 +216,56 @@ def test_when_the_time_and_the_photo_minutes_are_over_the_quiz_is_handed_in(quiz
             assert len(calls) == 1 and not errors
         finally:
             browser.close()
+
+
+def test_the_unit_quiz_has_a_board_with_a_tab_per_question(quiz_server):
+    from test_board_browser import draw_line, ink_pixels
+    url, _ = quiz_server
+    with playwright.sync_playwright() as p:
+        browser, page, errors = signed_in(p, url, mobile=False)
+        try:
+            page.set_viewport_size({"width": 1440, "height": 900})
+            page.locator('.mx-uquiz[data-uquiz="t"]').click()
+            page.locator("[data-act=uq-start]").click()
+            playwright.expect(page.locator(".mx-uq-paper .mx-uq-q")).to_have_count(4)
+            page.locator("[data-board-toggle]").click()
+            tabs = page.locator(".mx-board-pages [data-page]")
+            playwright.expect(tabs).to_have_count(4)
+            draw_line(page)
+            assert ink_pixels(page) > 50
+            tabs.nth(1).click()
+            assert ink_pixels(page) == 0
+            playwright.expect(tabs.nth(0)).to_have_class("has")   # the tab with a sketch stands out
+            tabs.nth(0).click()
+            assert ink_pixels(page) > 50
+            assert errors == []
+        finally:
+            browser.close()
+
+
+def test_a_unit_quiz_answer_is_handed_in_from_the_board(quiz_server):
+    from test_board_browser import draw_line
+    url, _ = quiz_server
+    with playwright.sync_playwright() as p:
+        browser, page, errors = signed_in(p, url, mobile=False)
+        try:
+            page.set_viewport_size({"width": 1440, "height": 900})
+            page.locator('.mx-uquiz[data-uquiz="t"]').click()
+            page.locator("[data-act=uq-start]").click()
+            page.locator('[data-uq-board="2"]').click()   # each question opens the board on its own page
+            playwright.expect(page.locator(".mx-board")).to_be_visible()
+            playwright.expect(page.locator('.mx-board-pages [data-page="2"]')).to_have_attribute("aria-selected", "true")
+            send = page.locator(".mx-board-send")
+            playwright.expect(send).to_have_text("📤הגשה לשאלה 3")
+            send.click()   # an empty page is not handed in
+            playwright.expect(send).to_contain_text("הלוח ריק")
+            draw_line(page)
+            page.wait_for_timeout(2600)
+            send.click()
+            playwright.expect(page.locator('[data-uq-i="2"] [role=status]')).to_have_text("✓ התשובה נשמרה", timeout=10000)
+            playwright.expect(page.locator('[data-uq-i="2"] img.mx-uq-img')).to_be_visible()
+            playwright.expect(send).to_contain_text("הוגשה לשאלה 3")
+            playwright.expect(page.locator("[data-uq-count]")).to_have_text("צולמו 1 מתוך 4 תשובות")
+            assert errors == []
+        finally:
+            browser.close()