Skip to content

Elements for question.html

PrairieLearn questions are built from pl-* tags inside question.html ("elements"). These elements define the behavior of the question: what the student sees, what they input, and how it is graded. This page lists every element grouped by what you're trying to do. If you don't find the element / behavior you are looking for, consider using a custom grade function (recommended) or building a custom element.

Tip

Already know which element you want? Use the navigation menu on the side, or see the alphabetical reference below.

The elements you choose will depend on the type and complexity of your question. A simple question may consist of a question panel prompt (using pl-question-panel) followed by a single submission element. For more complex prompts, you may need to include display elements such as figures, code, and sectioning. To provide additional feedback to students and graders, additional content can be displayed conditionally in different panels and contexts.

Submission elements

Submission elements collect a response from the student. Within each subsection, elements are listed in roughly the order you should reach for them.

What is the student submitting?SelectionNumeric inputText & symbolic inputDrawings & imagesCode & files Pick or arrangefrom a fixed setA number, vector,or matrixFree text, essay,or math expressionDrawing, photo,or scanCode or uploaded file

Selection

When students pick or arrange items from a fixed set.

Decision flowchart

How many items can be picked?pl-multiple-choicepl-checkboxpl-matchingpl-order-blocks OneSeveralfrom a listOne per prompt,from a shared listA subset of them,in a particular order

Numeric input

When the response is a number — integer, decimal, value with units, or a matrix.

  • pl-number-input: Fill in a numerical value within a specific tolerance such as 3.14, -1.921, and so on.
  • pl-integer-input: Fill in an integer value such as -71, 0, 5, 21, and so on.
  • pl-units-input: Fill in a number with units such as "1.5 m", "14 ms", "6.3 ft", and so on.
  • pl-matrix-component-input: Fill in a matrix using a grid with one input per cell.
  • pl-matrix-input: Supply a matrix in a supported programming language format.
Decision flowchart

What kind of number?pl-integer-inputpl-units-inputpl-number-inputHow should the matrix be entered?pl-matrix-component-inputpl-matrix-input IntegerNumberwith a unitDecimal, real or complex numberMatrix or vectorOne inputper cellAs code(MATLAB / Python literal)

Text & symbolic input

When the response is a string, an essay, or a math expression.

  • pl-string-input: Fill in a string value such as "Illinois", "GATTACA", "computer", and so on.
  • pl-rich-text-editor: Provide an in-browser formattable text editor for open-ended responses and essays.
  • pl-file-editor: Provide an in-browser editor for longer-form code or raw text (also listed under Code and files).
  • pl-symbolic-input: Fill in a symbolic expression such as x^2, sin(z), mc^2, and so on.
  • pl-big-o-input: Fill in a symbolic value representing asymptotic complexity.
Decision flowchart

What kind of text?pl-string-inputWhat kind of long-form input?pl-rich-text-editorpl-file-editorWhat kind of expression?pl-big-o-inputpl-symbolic-input Short-formplain textLong-formtext or codeMath expressionFlexible essay(formatting, math, etc.)Structured language(code, Markdown, Latex. etc.)Big-O / asymptoticGeneral algebra / calculus

Drawings & images

When the response is a drawing, diagram, or photo of handwritten work.

  • pl-drawing: Create an auto-gradable canvas from a pre-defined collection of graphic objects.
  • pl-image-capture: Capture images of handwritten work from a local camera or external device such as a phone or tablet.
  • pl-excalidraw: Draw a vector diagram using Excalidraw.
  • pl-sketch: Auto-gradable sketches of curves and other mathematical objects (e.g., points, asymptotes, polygons).
  • pl-file-upload: Accept an image or document produced with an external tool (also listed under Code and files).
Decision flowchart

Where does the drawing come from?pl-image-capturepl-file-uploadWhat kind of diagram?pl-excalidrawpl-sketchpl-drawing Photo of handwritten workUploaded image(e.g., from external tools)Drawn in the browserFreeform vector drawingMathematical curves/ sketchesGeometric shapes /FBD-style objects

Code and files

When the response is code or a file, written in the browser or uploaded from disk.

  • pl-file-upload: Provide a submission area to obtain a file with a specific naming scheme.
  • pl-file-editor: Provide an in-browser code editor for writing and submitting code.

For code that needs a richer environment (multiple files, a terminal, an IDE, or a build/run loop), use a workspace with the <pl-workspace> element to embed the workspace launcher in the question.

Decision flowchart

Where does the file come from?What kind of editor do students need?pl-file-editorWorkspace(see workspaces docs)pl-file-upload Written in the browserUploaded from diskInline in the questionDedicated environment(IDE, terminal, etc.)

Display elements

Display elements render content to students — figures, code, data, files, and layout wrappers — without capturing any submission.

Media & figures

For showing images, plots, graphs, or downloadable files alongside the question.

Code, data & variables

For showing pre-formatted code snippets, data frames, matrices, or Python variable values.

Layout & content wrappers

For wrapping or templating content rather than rendering a specific data type.

  • pl-card: Display content within a card-styled component.
  • pl-template: Display content from mustache templates.
  • pl-overlay: Layer elements on top of one another at specific positions — commonly used to place input fields over a pl-figure or pl-drawing for labeled-diagram questions.
  • pl-hidden-hints: Reveal hints in the question prompt progressively as a student submits more on the current variant.

Question flow and feedback

These elements determine what students see at each stage of the question lifecycle — the question prompt, the submitted answer, and any feedback shown after grading.

Standard question panels

The three primary content panels shown to students throughout the question lifecycle.

  • pl-question-panel: Content to only show in the question panel. The actual question prompt should be placed here.
  • pl-submission-panel: Content to only show in the submission panel. Additional feedback should be placed here.
  • pl-answer-panel: Content to only show in the answer panel. Additional details about the correct answer should be placed here.
What the panels look like

Question panels

Conditional visibility

For making content appear in only some panels, or only during specific grading workflows.

Submission feedback

For showing what the student submitted and the results that come back from grading.

Reference

Element Type Purpose
pl-answer-panel Panel Show only in the answer panel.
pl-big-o-input Submission Asymptotic complexity expression.
pl-card Display Card-styled content wrapper.
pl-checkbox Submission Select multiple options from a list/dropdown.
pl-code Display Syntax-highlighted code.
pl-dataframe Display Render a DataFrame.
pl-drawing Submission Auto-gradable graphical canvas.
pl-dropdown Deprecated See migration.
pl-excalidraw Submission Draw a free-form diagram via Excalidraw.
pl-external-grader-results Panel External grader output.
pl-external-grader-variables Display Expected/given vars for external grading.
pl-figure Display Display an image.
pl-file-download Display Provide downloadable files.
pl-file-editor Submission In-browser code editor.
pl-file-preview Display Preview submitted files.
pl-file-upload Submission Upload files by name.
pl-graph Display Render a graph (DOT, networkx, adjacency).
pl-hidden-hints Panel Reveal hints progressively.
pl-hide-in-manual-grading Panel Hide content during manual grading.
pl-hide-in-panel Panel Hide content in selected panels.
pl-image-capture Submission Capture image from camera or device.
pl-integer-input Submission Integer value.
pl-manual-grading-only Panel Show only during manual grading.
pl-matching Submission Match each entry to an option.
pl-matrix-component-input Submission Matrix entered cell-by-cell.
pl-matrix-input Submission Matrix in programming language syntax.
pl-matrix-latex Display Matrix as LaTeX.
pl-multiple-choice Submission Select one option from a list.
pl-number-input Submission Numeric value with tolerance.
pl-order-blocks Submission Arrange blocks of code or text.
pl-overlay Display Layer elements at specified positions.
pl-prairiedraw-figure Deprecated See migration.
pl-python-variable Display Format a Python variable.
pl-question-panel Panel Show only in the question panel.
pl-rich-text-editor Submission Formattable text editor for essays.
pl-sketch Submission Sketch curves and math objects.
pl-string-input Submission String value.
pl-submission-panel Panel Show only in the submission panel.
pl-symbolic-input Submission Symbolic math expression.
pl-template Display Render a mustache template.
pl-units-input Submission Number with units.
pl-variable-output Display Matrix as code in supported languages.
pl-variable-score Deprecated See migration.
pl-xss-safe Display Sanitize HTML content.

Deprecated elements

Warning

The elements below are still supported for backwards compatibility but should not be used in new questions.

Element Use instead
pl-dropdown pl-multiple-choice with display="dropdown", or pl-matching for multiple linked dropdowns sharing the same options
pl-prairiedraw-figure pl-drawing
pl-variable-score Not needed, all submission elements include score display options.