Grading desk
A React block (a whole screen) in Beamline's Education app.
Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's chosen answers against the key with right, wrong, partly right or needs your grade in icon and word, attempts of the same learner kept apart, a question edited since said; its result is Awaiting grade while anything waits and Graded when there is no pass mark, never Not passed; a waiting question is scored in place. A written answer sits beside its rubric: items applied or not with their points, an adjustment for this answer alone, the total computed and Not graded until something is applied; comments are placed on a paragraph and linked to a rubric item without applying its points (linked and applied, linked with points not applied, unlinked: three states), reused from a library; grading the confirmed group names every member and leaves out anyone with their own adjustment; a refused save keeps the marks, a grade saved by someone else meanwhile is said. Answer groups show the app's suggestions apart from confirmed groups and the answers in none, with real counts and a grouping job's progress or failure; each answer moves by its own picker, a group merges into another from its menu, a new member asks a confirmed group to be confirmed again. Review requests queue by learner, question and grader; one opens with the learner's words, a reply and an adjustment for this answer kept apart from changing the rubric item (its reach said); closing reports the grade and the notice apart. With the question prop each written answer sits under what the learner was asked (its words and the chart or passage it refers to); the class list says how many are graded; a paragraph's comment button shows when the paragraph is pointed at or focused.
Use it for
- Teachers and teaching assistants grading quiz attempts and written answers against a shared rubric, in groups of similar answers, and answering requests to look again.
- Any review where a person scores submissions against criteria with comments tied to the evidence (interview scorecards, compliance checks, code review against a checklist).
Not for
- The course's overview of results (course-dashboard).
- Writing the questions (question-builder).
- A document's review and approval (document-review).
Anatomy
- head: the assignment and Grade / Answer groups / Review requests
- submissions: avatar, learner, Not graded or points of max; the open learner marked
- quiz: questions numbered, each with its outcome and points, the options with Chosen and Correct answer tags, a note when edited since, a points field and Save score when it waits; the summary with the learner, handed in, the attempt picker, Score, Result and the pass mark
- written: the learner and attempt; the answer by paragraph, each with a comment button in its margin and its comments below (text, link state, Unlink, Delete); the rail: Total, the rubric items as checkboxes with signed points, the adjustment, the scope (this answer or the group, with the names applied and left out), Next ungraded and Save grade
- comment popover: the comment, Reuse a comment, Link to a rubric item, Add comment
- groups: the job's progress or failure, confirmed and not-in-a-group counts, a card per group (name, Suggested / Confirmed / new answers since, a menu to merge into another, members with a Move to picker, Confirm group) and the answers in no group
- requests: search, rows (learner, question and grader, Waiting or Resolved); the open request: question, learner, date, grader, their words, the current grade, the response, Adjust this answer only, Change the rubric item instead with its reach, Close and respond; resolved: the outcome and a failed notice with Send the notice again
States
- quiz: submitted, automatic result, awaiting manual grade, graded, no pass mark, passed, not passed, missing question version (edited since), score refused
- written: ungraded despite a default total, applied criteria, individual adjustment, group scope with member count, individual override left out, read-only rubric with grading allowed, changed meanwhile, saving, save refused, saved
- comments: unlinked, linked and applied, linked with points not applied, reused
- groups: processing with real counts, suggested, confirmed, invalidated by new members, answers in no group, grouping failed with work kept
- requests: open window, requests closed, waiting, reply draft, rubric change with its reach, closing, close refused, resolved unchanged, resolved changed, notice failed
Keyboard
- Tab to the view switch (arrow keys between views), the submissions and the open answer
- a paragraph's comment button: Enter opens the comment popover; Escape closes it
- rubric items: Space applies or removes; the adjustment takes ↑/↓ in half points
- an answer's Move to picker: Enter opens, arrows choose, Enter moves it; a group's menu: Merge into…
- requests: Enter on a row opens it beside the list (in place of it on a phone, with All requests back)
Motion
Views and rows change in place; popovers and menus on the motion tokens. Nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title (required) | string | — | The assignment or quiz, in your words. |
submissions (required) | Submission[] | — | |
rubric | Rubric | null | — | The rubric written answers are graded against. |
question | { prompt: string; figure?: ReactNode } | — | What written answers were asked, shown above each answer: the question's words and what it refers to (a chart, a passage), as the learner saw it. |
commentLibrary | string[] | — | Comments saved before, offered for reuse on any answer. |
view | GradingView | — | |
defaultView | GradingView | — | |
onViewChange | ((view: GradingView) => void) | — | |
selected | string | null | — | The submission open. Default: the first not graded. |
defaultSelected | string | null | — | |
onSelectedChange | ((id: string | null) => void) | — | |
onGrade | ((grade: SaveGrade) => void | Promise<unknown>) | — | Saves a grade for one answer or a group; resolve once saved (the app updates submissions), reject with why. |
onScoreQuestion | ((score: { submissionId: string; questionId: string; points: number; }) => void | Promi… | — | Scores a quiz question that waits for a person; resolve once saved (the app updates the answer), reject with why. |
groups | AnswerGroup[] | — | Answer groups (written answers); omit to hide the view. |
groupingJob | GroupingJob | null | — | |
onGroupsChange | ((groups: AnswerGroup[]) => void) | — | |
onRegroup | (() => void) | — | |
requests | ReviewRequest[] | — | Review requests; omit to hide the view. |
requestsOpen | boolean | — | Requests are open for this assignment. |
onResolveRequest | ((resolve: ResolveRequest) => Promise<{ notified: boolean; }>) | — | Closes a request; resolve with whether the learner's notice was sent, reject with why nothing changed. |
onNotifyAgain | ((requestId: string) => void) | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
AttemptHead.submission (required) | Submission | — | |
AttemptHead.attempts (required) | Submission[] | — | |
AttemptHead.onAttempt (required) | (id: string) => void | — |
Built from
- segmented-control
- select
- checkbox
- number-field
- radio-group
- popover
- textarea
- dropdown-menu
- progress
- search-field
- avatar
- badge
- button
- alert
- empty-state
Dependencies
lucide-react
Import
import { GradingDesk, AttemptHead } from "@beamline/grading-desk";Get it
Grading desk is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Education
- Course builder: Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you…
- Program modules: A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision…
- Question builder: Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become…
- Course dashboard: A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and…
- Course home: A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a…
- Volunteer rota: Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their…
- Gift desk: A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an…
- Gift batches: Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered…