-
Notifications
You must be signed in to change notification settings - Fork 1
Manual Capture
The automated capture script (scripts/capture-wiki-screenshots.mjs in this wiki repo) handles 38 of the 51 screenshots in the checklist. The 13 remaining ones can't be automated from a plain dev server: they need a browser permission (microphone), an open native <select>, a live Supabase instance, or an OS-level dialog.
This page walks through each one. General rules first:
-
File name & folder — save as
images/<name>.pngexactly as the placeholder in Screenshots says, then commit and push. The placeholder is replaced automatically. - Resolution — resize to ~1280px wide, crop to the relevant part of the UI.
- Sample data — if you don't want to build content by hand, use Settings → Administration → "Load sample data" (dev builds only) as a starting point, then add only what the shot needs.
- Privacy — fictional names and sample scores only.
- After capturing, flip the row in Screenshots.md from ⬜ to ✅ (or run the capture script with
--only <name>afterwards — it will mark it done).
Needs: browser microphone permission (cannot be granted from a headless script).
| Where | Grading page — #/rubrics/<rubricId>/grade/<studentId>
|
| What to show | The feedback/comment field with the microphone button active (recording state: red dot / pulsing) |
| Steps | 1. Open any student's grading page. 2. Click the mic button next to a comment field. 3. Allow the microphone permission prompt. 4. Wait for the "recording…" indicator. 5. Capture; click the button again to stop. |
Needs: a native <select> open — Playwright cannot keep a real dropdown open for a screenshot.
| Where | Test Builder — #/tests → New test (or edit an existing one) |
| What to show | The question-editor's type dropdown expanded, showing the full list (Multiple choice, Multiple response, True / False, Short answer, Open / essay, Fill in the gap, Matching, Ordering, Categorise, …) |
| Steps | 1. Open the Test Builder and add a question. 2. Click the question-type <select> so the OS dropdown opens. 3. Capture while it's open. 4. Press Escape to close it. |
Needs: the rich-text editor's gap-pill interaction (only insertable by clicking inside the prompt).
| Where | Test Builder — question type Fill in the gap |
| What to show | A cloze prompt with a highlighted gap pill (e.g. [____] or ___) inserted inside the sentence |
| Steps | 1. Add a question and set its type to Fill in the gap (text). 2. In the prompt editor, click the insert gap button/toolbar action so a gap pill appears in the sentence. 3. Capture. |
Needs: a live share-link flow — the student test page (#/test/<code>) resolves assignments through the Supabase edge function.
| Where | Student share link — #/test/<code>
|
| What to show | The student's test-taking view: question palette, timer, current question, answer controls |
| Steps | 1. Connect the app to Supabase (Settings → Database). 2. In the Test List, open a test → Share / assign and generate a student link. 3. Open the link in a fresh browser (or incognito). 4. Start the test and capture. 5. If an offline link with the test embedded was generated, it also works — but the live flow is the realistic one. |
Needs: an in-progress session with presence + proctoring flags.
| Where |
#/essays/<assignmentId>/monitor (from the Essay Builder's Live monitor button) |
| What to show | The monitor grid: student tiles with presence dots, progress, and proctoring flags (tab switches, copy/paste) |
| Steps | 1. Connect to Supabase. 2. Create an essay assignment and share the link with two or three students. 3. Have them open the link and type/answer so presence appears. 4. (Optional) switch tabs in a student window to trigger a proctoring flag. 5. Open the monitor and capture. |
Needs: an existing deck (the capture script seeds a list, not an editor state with a deck open).
| Where |
#/flashcards/<deckId> — click any deck in the Flashcards list |
| What to show | The deck editor: card list with front/back, phonetic / part-of-speech fields, CEFR level, and the import/export actions |
| Steps | 1. Create a deck (or use "Load sample data" + the seeded extras from the capture script). 2. Open it. 3. Click Add card and fill front + back; the phonetic/POS fields show on vocabulary decks. 4. Capture the card editor. |
Needs: an assigned deck + a portal session.
| Where | Student portal — #/portal/<studentId>/flashcards/<deckId>
|
| What to show | The study view with a card and the Again / Hard / Good / Easy buttons |
| Steps | 1. Assign a deck to a student (Flashcards list → deck → Assign). 2. Open the student portal for that student (seeded students work — see scripts/capture-wiki-screenshots.mjs for the student mode). 3. Go to Assignments → deck and start studying. 4. Capture the review card. |
Needs: a connected Supabase instance with user rows (the tab reads the DB, not local storage).
| Where |
#/admin → Users tab |
| What to show | The users table with roles (teacher / student / admin) and account status |
| Steps | 1. Connect Supabase and sign in with an admin account. 2. Open Admin → Users. 3. Capture the table. 4. No Supabase? The tab shows the "offline" message — that's a valid alternative shot, but the populated table is the goal. |
Needs: a connected Supabase instance with audit entries.
| Where |
#/admin → Audit tab |
| What to show | The audit log with filters (action type, date range) and a few entries |
| Steps | 1. Connect Supabase as admin. 2. Do a couple of actions that get logged (export a rubric, create a test). 3. Open Admin → Audit and capture with the filters visible. |
Needs: a school + cloud sync (listings come from the DB).
| Where | #/marketplace |
| What to show | The marketplace with the type filter tabs (Rubrics / Tests / Decks / Question bank) and listing cards with upvote counts |
| Steps | 1. Connect Supabase and join/select a school. 2. Publish one or two rubrics/tests from your library (or rely on existing school listings). 3. Open the marketplace and capture the filtered view. |
Needs: the share-link essay flow (Supabase), which drives the focus-mode layout.
| Where | Student share link — #/essay/<code>
|
| What to show | The essay editor in focus mode: distraction-free writing area with the prompt/tips in the sidebar |
| Steps | 1. Create an essay assignment (Essay Builder) and open its share link. 2. If focus mode isn't on by default, toggle it (usually a "focus" icon in the editor toolbar). 3. Capture. |
Needs: the PDF rendered in a viewer (the browser's PDF viewer, not the web app).
| Where | Export page — #/export → select students → Print to PDF
|
| What to show | A completed PDF report page: student header, rubric table with levels and scores, comments |
| Steps | 1. On the Export page, select one or two students with graded rubrics. 2. Click the PDF export button. 3. When the PDF opens in the browser's viewer, capture a page of it. 4. Alternatively, open the downloaded .pdf in a PDF reader and capture a page. |
Needs: a live Supabase connection (the panel shows sync status only when connected).
| Where |
#/settings → Database (or #/admin → Database) |
| What to show | The database panel showing a connected instance: project URL, connected-as account, last-sync time, Pull/Push buttons enabled |
| Steps | 1. Connect Supabase in Settings → Database and complete a sync. 2. Capture the connected state (URL + account + sync status). 3. Contrast shot (optional): sign out to show the "connect" empty state — but the connected state is the required one. |
-
Commit the PNG to
images/and push. -
Flip the row in Screenshots.md to ✅ — or simply run:
# from the app repo, dev server running node ../RubricMaker.wiki/scripts/capture-wiki-screenshots.mjs --only <name-without-.png>
The script detects the existing file and marks the row captured for you.