choosing classes

static/math.css

@@ -212,6 +212,13 @@ html.math-on, html.math-on body{overflow:hidden}
 .mx-class-form input[type="text"],.mx-class-form input[name="name"],.mx-class-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit}
 .mx-class-form textarea{min-height:110px;resize:vertical;text-align:left}
 .mx-class-form fieldset{margin:0}
+.mx-subject-picks{--exam:var(--mx-accent);display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
+.mx-subject-picks label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:9px 10px;cursor:pointer}
+.mx-subject-picks label:has(input:checked),.mx-subject-picks label:has(input:indeterminate){border-color:var(--exam);background:color-mix(in srgb,var(--exam) 14%,var(--surface))}
+.mx-subject-picks .mx-subject-icon{width:34px;height:34px;border-radius:10px;font-size:18px}
+.mx-subject-picks label>span:last-child{display:flex;flex-direction:column;gap:2px;font-weight:700}
+.mx-subject-picks label small{color:var(--muted);font-size:11px;font-weight:500}
+.mx-subject-units[hidden],.mx-no-subject[hidden]{display:none}
 .mx-unit-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .mx-unit-picks label{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:10px;cursor:pointer}
 .mx-unit-picks label:has(input:checked){border-color:var(--mx-accent);background:var(--mx-accent-soft)}
@@ -263,7 +270,7 @@ html.math-on, html.math-on body{overflow:hidden}
 .mx-qdots i.now{outline:2px solid var(--mx-accent);outline-offset:1px}
 .mx-count{font:700 11px/1 var(--f-body);padding:4px 7px;border-radius:999px;background:var(--bg);color:var(--muted)}
 .mx-content-subject{display:flex;flex-direction:column;gap:8px;margin-top:14px}
-.mx-content-subject>h5{display:flex;align-items:baseline;gap:8px;margin:0;font-size:18px;color:var(--exam,var(--mx-accent))}
+.mx-content-subject>h5{display:flex;align-items:baseline;gap:8px;margin:0;font-size:18px;color:var(--exam)}
 .mx-content-subject>h5 small{color:var(--muted);font-size:13px;font-weight:500}
 .mx-content-unit{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
 .mx-content-unit summary{display:flex;flex-direction:column;gap:3px;padding:12px;cursor:pointer}

static/math.js

@@ -402,19 +402,45 @@ function manageClassAction(action,id){
 
 function openClassEditor(row){
   const box=sheet.querySelector(".mx-management"), creating=!row;
-  const selected=new Set(row?.lessons||G.units.map(unit=>unit.id));
+  const selected=new Set(row?.lessons||[]);   // a new class starts with no subject chosen
+  const subjects=[...new Set(G.units.map(unit=>unit.subject))], subjectUnits=subject=>G.units.filter(unit=>unit.subject===subject);
   box.innerHTML=`<div class="mx-manage-title"><h4>${creating?"כיתה חדשה":`עריכת ${esc(row.name)}`}</h4><button class="mx-btn" type="button" data-class-action="cancel">חזרה לכיתות</button></div>
     <form class="mx-class-form"><label>שם הכיתה<input name="name" required maxlength="80" autocomplete="off" placeholder="למשל: ט׳ 1" value="${esc(row?.name||"")}"></label>
-      <fieldset><legend>יחידות הלימוד<small>התלמידים יראו במסלול רק את המיומנויות של היחידות שסומנו. מקצוע היחידה קובע אילו מבחנים יוצגו במסלול.</small></legend>${[...new Set(G.units.map(unit=>unit.subject))].map(subject=>`<h6 class="mx-pick-subject">${esc(subject)}</h6><div class="mx-unit-picks">${G.units.filter(unit=>unit.subject===subject).map(unit=>{const skills=unitSkills(unit.id);return `<label class="u-${unit.id}"><input type="checkbox" name="unit" value="${esc(unit.id)}"${selected.has(unit.id)?" checked":""}><span>${esc(unit.name)}<small>${skills.length} תת־נושאים · ${questionCount(skills)} שאלות</small></span></label>`}).join("")}</div>`).join("")}</fieldset>
+      <fieldset><legend>מקצועות<small>בחרו את המקצועות שהכיתה לומדת. בחירת מקצוע מסמנת את כל יחידות הלימוד שלו, ואפשר לבטל יחידות שהכיתה לא לומדת.</small></legend>
+        <div class="mx-subject-picks">${subjects.map(subject=>{const [icon,tone]=examLooks[subject]||["●","other"], units=subjectUnits(subject);
+          return `<label class="exam-${tone}"><input type="checkbox" name="subject" value="${esc(subject)}"><span aria-hidden="true" class="mx-subject-icon">${icon}</span><span>${esc(subject)}<small>${units.length} יחידות</small></span></label>`}).join("")}</div></fieldset>
+      <fieldset class="mx-unit-fieldset"><legend>יחידות הלימוד<small>התלמידים יראו במסלול רק את המיומנויות של היחידות שסומנו. מקצוע היחידה קובע אילו מבחנים יוצגו במסלול.</small></legend>
+        <p class="mx-note mx-no-subject">בחרו מקצוע כדי לראות את יחידות הלימוד שלו.</p>
+        ${subjects.map(subject=>`<section class="mx-subject-units" data-subject-units="${esc(subject)}"><h6 class="mx-pick-subject">${esc(subject)}</h6><div class="mx-unit-picks">${subjectUnits(subject).map(unit=>{const skills=unitSkills(unit.id);return `<label class="u-${unit.id}"><input type="checkbox" name="unit" value="${esc(unit.id)}" data-subject="${esc(subject)}"${selected.has(unit.id)?" checked":""}><span>${esc(unit.name)}<small>${skills.length} תת־נושאים · ${questionCount(skills)} שאלות</small></span></label>`}).join("")}</div></section>`).join("")}</fieldset>
       <label>התלמידים<small>כתובת דוא״ל אחת בכל שורה. תלמיד יכול להשתייך ליותר מכיתה אחת.</small><textarea name="emails" dir="ltr" spellcheck="false" placeholder="student@example.com">${esc((row?.emails||[]).join("\n"))}</textarea></label>
       <label>מורי הכיתה<small>כתובת דוא״ל אחת בכל שורה. למורים תהיה גישה לכיתה הזו.</small><textarea name="teachers" dir="ltr" spellcheck="false" placeholder="teacher@example.com">${esc((row?.teachers||[]).join("\n"))}</textarea></label>
       <div class="mx-class-form-actions"><button class="mx-btn solid" type="submit">${creating?"פתיחת הכיתה":"שמירת השינויים"}</button><button class="mx-btn" type="button" data-class-action="cancel">ביטול</button><span role="status" aria-live="polite"></span></div></form>`;
   const form=box.querySelector("form"), message=form.querySelector('[role="status"]');
+  const unitBoxes=subject=>[...form.querySelectorAll('input[name="unit"]')].filter(input=>input.dataset.subject===subject);
+  // a subject is chosen while any of its units is; a subject's units stay in view from choosing it until it is cleared
+  const open=new Set(subjects.filter(subject=>subjectUnits(subject).some(unit=>selected.has(unit.id))));
+  const syncSubjects=()=>{
+    form.querySelectorAll('input[name="subject"]').forEach(input=>{
+      const boxes=unitBoxes(input.value), on=boxes.filter(box=>box.checked).length;
+      input.checked=on>0; input.indeterminate=on>0&&on<boxes.length;
+      form.querySelector(`[data-subject-units="${CSS.escape(input.value)}"]`).hidden=!open.has(input.value);
+    });
+    form.querySelector(".mx-no-subject").hidden=open.size>0;
+  };
+  form.addEventListener("change",event=>{
+    const input=event.target;
+    if(input.name==="subject"){
+      unitBoxes(input.value).forEach(box=>box.checked=input.checked);
+      if(input.checked) open.add(input.value); else open.delete(input.value);
+    }
+    if(input.name==="subject"||input.name==="unit") syncSubjects();
+  });
+  syncSubjects();
   form.querySelector('input[name="name"]').focus();
   form.onsubmit=async event=>{
     event.preventDefault();
     const lessons=[...form.querySelectorAll('input[name="unit"]:checked')].map(input=>input.value);
-    if(!lessons.length){message.textContent="בחרו לפחות יחידת לימוד אחת.";return;}
+    if(!lessons.length){message.textContent="בחרו לפחות מקצוע אחד.";return;}
     const lines=name=>form.elements[name].value.split(/[\n,;]+/).map(value=>value.trim().toLowerCase()).filter(Boolean);
     const body={name:form.elements.name.value.trim(),emails:lines("emails"),teachers:lines("teachers"),lessons};
     const buttons=form.querySelectorAll("button"); buttons.forEach(button=>button.disabled=true); message.textContent=creating?"פותחים את הכיתה…":"שומרים…";

tests/test_phone_browser.py

@@ -152,7 +152,21 @@ def test_class_management_geometry_and_permissions(phone_server, manager):
             playwright.expect(page.locator(".mx-exam-countdown time")).to_contain_text("16 בנובמבר 2026")
             button.click()
             playwright.expect(page.locator(".mx-exam-board")).to_contain_text("מתמטיקה")
+            page.get_by_role("button", name="+ כיתה חדשה").click()
+            subject = page.locator('input[name="subject"][value="מתמטיקה"]')
+            units = page.locator('input[name="unit"][data-subject="מתמטיקה"]')
+            playwright.expect(subject).not_to_be_checked()
+            playwright.expect(page.locator('[data-subject-units="מתמטיקה"]')).to_be_hidden()
+            subject.check()
+            playwright.expect(page.locator('[data-subject-units="מתמטיקה"]')).to_be_visible()
+            assert units.count() > 1 and all(units.nth(i).is_checked() for i in range(units.count()))
+            units.first.uncheck()
+            assert subject.evaluate("input => input.checked && input.indeterminate")
+            subject.uncheck()
+            assert not any(units.nth(i).is_checked() for i in range(units.count()))
+            page.get_by_role("button", name="ביטול").click()
             page.get_by_role("button", name="עריכה").click()
+            playwright.expect(page.locator('input[name="subject"][value="מתמטיקה"]')).to_be_checked()
             geometry = page.locator('input[name="unit"][value="a"]')
             geometry.check()
             page.get_by_role("button", name="שמירת השינויים").click()