Mark exams

Mark up an exam PDF with per-question score shapes and see the total tallied live.

import { useState } from 'react'
import 'tldraw/tldraw.css'
import './pdf-editor/pdf-editor.css'
import { PdfEditor } from './pdf-editor/PdfEditor'
import { Pdf, PdfPicker } from './pdf-editor/PdfPicker'

type State =
	| {
			phase: 'pick'
	  }
	| {
			phase: 'edit'
			pdf: Pdf
	  }

export default function ExamMarkingExample() {
	const [state, setState] = useState<State>({ phase: 'pick' })

	switch (state.phase) {
		case 'pick':
			return (
				<div className="PdfEditor">
					<PdfPicker onOpenPdf={(pdf) => setState({ phase: 'edit', pdf })} />
				</div>
			)
		case 'edit':
			return (
				<div className="PdfEditor">
					<PdfEditor pdf={state.pdf} />
				</div>
			)
	}
}

/*
This example is built on top of the pdf-editor example; a copy of those files lives in the
`pdf-editor` folder here. On top of that it adds:

- `add-mark-util.tsx`: the `exam-mark` shape, a numeric score input.
- `add-mark-tool.tsx`: a tool that places an exam mark where you click.
- `ExamScoreLabel.tsx`: a widget that sums every exam mark on the page.
- `ui-overrides.tsx`: adds the tool to the toolbar and keyboard shortcuts dialog.
*/

This builds on the pdf-editor example (a copy of it lives in the pdf-editor folder here) and adds:

  • An exam-mark custom shape: a small numeric input whose value is stored in the shape's score prop.
  • A mark tool that places an exam mark where you click, plus a select-tool override so double-clicking the canvas does the same.
  • A SharePanel widget that sums the scores of every exam-mark on the page with useValue, so it updates as marks are added, edited, or removed.
  • UI overrides that add the tool to the toolbar and the keyboard shortcuts dialog (shortcut M).

Try it: open the example exam, click on a question to drop a mark, type a score, and watch the total change.

Is this page helpful?
Prev
Fog of war
Next
Many shapes