PrairieLearn Elements for use in question.html

When writing questions, there exists a core pool of elements that provides common structures associated with assessment items. These elements can be split into three distinct groups: submission, decorative, and conditional. Within this document, all of PrairieLearn's elements are displayed alongside links to sample elements within the example course. To build your own PrairieLearn element, please see Question Element Writing documentation.

Submission elements act as a way to receive a response or input from the student. These elements are traditionally referred to as form input fields. PrairieLearn presently provides the following templated input field elements:

• pl-big-o-input: Fill in a symbolic value representing asymptotic input.
• pl-checkbox: Selecting multiple options from a list.
• pl-dropdown: Select an answer from answers in a drop-down box.
• pl-file-editor: Provide an in-browser code editor for writing and submitting code.
• pl-file-upload: Provide a submission area to obtain a file with a specific naming scheme.
• pl-integer-input: Fill in an integer value such as -71, 0, 5, 21, and so on.
• pl-matching: Select a matching option for each entry in a group.
• pl-matrix-component-input: Fill in a matrix using grid that has an input area for each element.
• pl-matrix-input: Supply a matrix in a supported programming language format.
• pl-multiple-choice: Selecting only one option from a list.
• pl-number-input: Fill in a numerical value within a specific tolerance level such as 3.14, -1.921, and so on.
• pl-order-blocks: Select and arrange given blocks of code or text.
• pl-rich-text-editor: Provide an in-browser formattable text editor for writing and submitting code.
• pl-string-input: Fill in a string value such as "Illinois", "GATTACA", "computer", and so on.
• pl-symbolic-input: Fill in a symbolic value such as x^2, sin(z), mc^2, and so on.
• pl-threejs: Enables 3D scene display and problem submission.
• pl-units-input: Fill in a number and a unit such as "1.5 m", "14 ms", "6.3 ft", and so on.

Decorative elements are meant to improve how the question is displayed to students. Elements under this category include ways to specify question markup, images, files, and code display. The following decorative elements are available:

• pl-card: Displays content within a card-styled component.
• pl-code: Displays code rendered with the appropriate syntax highlighting.
• pl-dataframe: Display DataFrames with various options.
• pl-drawing: Creates an image from pre-defined collection of graphic objects
• pl-external-grader-variables: Displays expected and given variables for externally graded questions.
• pl-figure: Embed an image file in the question.
• pl-file-download: Enable file downloads for data-centric questions.
• pl-file-preview: Displays a preview of submitted files.
• pl-graph: Displays graphs, using GraphViz DOT notation, an adjacency matrix, or a networkx graph.
• pl-matrix-latex: Displays matrices using appropriate LaTeX commands for use in a mathematical expression.
• pl-overlay: Allows layering existing elements on top of one another in specified positions.
• pl-python-variable: Display formatted output of Python variables.
• pl-variable-output: Displays matrices in code form for supported programming languages.
• pl-template: Displays content from mustache templates.
• pl-xss-safe: Removes potentially unsafe code from HTML code.

Conditional elements are meant to improve the feedback and question structure. These elements conditionally render their content depending on the question state. The following Conditional elements are available:

• pl-answer-panel: Displays the correct answer to a given question.
• pl-external-grader-results: Displays results from questions that are externally graded.
• pl-hide-in-panel: Hides content in one or more display panels.
• pl-hide-in-manual-grading: Hides content in the manual grading page.
• pl-hidden-hints: Displays hints as a student submits more on the current variant.
• pl-manual-grading-only: Shows content only in manual grading.
• pl-question-panel: Displays the text of a question.
• pl-submission-panel: Displays the answer given by the student.

Note: PrairieLearn Elements listed next have been deprecated. These elements are still supported for backwards compatibility, but they should not be used in new questions.

• pl-prairiedraw-figure: Show a PrairieDraw figure.
  • Deprecated: use pl-drawing instead.
• pl-variable-score: Displays a partial score for a submitted element.
  • Deprecated as submission elements in v3 all have score display options.

Submission Elements

pl-big-o-input element

Fill in the blank field that allows for asymptotic mathematical input (i.e. big O, big Theta, etc.). Gives automated feedback in the case of improper asymptotic input.

question.html

<pl-big-o-input answers-name="ans" variable="n" correct-answer="n**2" size="10"></pl-big-o-input>

Customizations

Details

Correct answers must be specified as strings with Python syntax (e.g., n**2, 2**n, n * log(n)), with the same syntax as pl-symbolic-input. Only one variable is supported.

Example implementations

• element/bigOInput

See also

• pl-number-input for numeric input
• pl-integer-input for integer input
• pl-string-input for string input
• pl-symbolic-input for mathematical expression input

pl-checkbox element

A pl-checkbox element displays a subset of the answers in a random order as checkboxes.

Sample element

<pl-checkbox answers-name="vpos" weight="1">
  <pl-answer correct="true">A-B</pl-answer>
  <pl-answer correct="true">B-C</pl-answer>
  <pl-answer> C-D</pl-answer>
  <pl-answer correct="true">D-E</pl-answer>
  <pl-answer> E-F</pl-answer>
  <pl-answer> F-G</pl-answer>
</pl-checkbox>

Customizations

Inside the pl-checkbox element, each choice must be specified with a pl-answer that has attributes:

Partial credit grading

Three grading methods are available when using partial-credit="true":

• 'COV' (Coverage): in this method, the final score is calculated by multiplying the base score (the proportion of correct answers that are chosen) with the guessing factor (the proportion of chosen answers that are correct). Specifically, if t is the number of correct answers chosen, c is the total number of correct answers, and n is the total number of answers chosen, then the final score is (t / c) * (t / n). This grading scheme rewards submissions that include (i.e. "cover") all true options.

• 'EDC' (Every Decision Counts): in this method, the checkbox answers are considered as a list of true/false answers. If n is the total number of answers, each answer is assigned 1/n points. The total score is the summation of the points for every correct answer selected and every incorrect answer left unselected.

• 'PC' (Percent Correct): in this method, 1 point is added for each correct answer that is marked as correct and 1 point is subtracted for each incorrect answer that is marked as correct. The final score is the resulting summation of points divided by the total number of correct answers. The minimum final score is set to zero.

Using the detailed-help-text attribute

The detailed-help-text attribute can be used with min-correct and/or max-correct to help students select the correct options. If min-select is not specified, then setting detailed-help-text="true" ensures that the number of selected options in a valid submission is at least the value of min-correct. Similarly, if max-select is not specified, then setting detailed-help-text="true" ensures that the number of selected options in a valid submission is at most the value of max-correct. For example, if a checkbox question does not specify min-select or max-select, and specifies min-correct="2", max-correct="4", and detailed-help-text="true", then all valid submissions must select between 2 and 4 options. Thus, we help students by preventing them from selecting, say, five options. Indeed, if five options are selected, then at least one selected option is incorrect since there are at most four correct options.

Note that explicitly specifying min-select overrides the minimum number of options that must be selected, and similarly, explicitly specifying max-select overrides the maximum number of options that can be selected.

Restricting the number of options that can be selected

The min-select and max-select attributes determine the minimum and maximum number of options that can be selected in a valid submission. The value of min-select is computed using the following steps:

1. If the min-select attribute is explicitly set, then we use the specified value of min-select.
2. If min-select is not specified, but min-correct is specified along with detailed-help-text="true", then we use the specified value of min-correct.
3. If steps 1 and 2 do not apply, then we use a default value of 1.

To compute max-select, we use a similar algorithm (note the different default value in step 3):

1. If the max-select attribute is explicitly set, then we use the specified value of max-select.
2. If max-select is not specified, but max-correct is specified along with detailed-help-text="true", then we use the specified value of min-correct.
3. If steps 1 and 2 do not apply, then max-select defaults to the number of displayed checkbox options (i.e. students can select all displayed options by default).

Example implementations

• element/checkbox
• demo/randomCheckbox

See also

• pl-multiple-choice for allowing only one correct choice

pl-dropdown element

Select the correct answer from a drop-down select menu list of potential answers. The potential options are listed in the inner HTML of a element (ie. Possible Answer 1).

Sample element

question.html

<p>Select the correct word in the following quotes:</p>
The
<pl-dropdown answers-name="aristotle" blank="true">
  {{#params.aristotle}}
  <pl-answer correct="{{tag}}">{{ans}}</pl-answer>
  {{/params.aristotle}}
</pl-dropdown>
is more than the sum of its parts.
<p></p>

A
<pl-dropdown sort="ascend" answers-name="hume">
  <pl-answer correct="true">wise</pl-answer>
  <pl-answer correct="false">clumsy</pl-answer>
  <pl-answer correct="false">reckless</pl-answer>
</pl-dropdown>
man proportions his belief to the evidence.
<p></p>

server.py

def generate(data):

    QUESTION1 = "aristotle"

    data["params"][QUESTION1] = [
        {"tag": "true", "ans": "whole"},
        {"tag": "false", "ans": "part"},
        {"tag": "false", "ans": "inverse"}
    ]

    return data

Customizations

Example implementation

• demo/overlayDropdown
• element/dropdown

pl-file-editor element

Provides an in-browser file editor that's compatible with the other file elements and external grading system.

Sample element

<pl-file-editor
  file-name="fib.py"
  ace-mode="ace/mode/python"
  ace-theme="ace/theme/monokai"
>
def fib(n):
    pass
</pl-file-editor>

Customizations

Details

When using auto-resize, consider specifying a custom min-lines or pre-populating the code editor window with a code sample. This will initialize the editor area with a sufficient number of lines to display all of the code simultaneously without the need for scrolling.

The focus attribute defaults to "false". Setting this to true will cause the file editor element to automatically capture the cursor focus when the question page is loaded, which may also cause the page to scroll down so that the file editor is in view, bypassing any written introduction. This may have negative implications for accessibility with screen readers, so use caution. If you have multiple file editors on the same question page, only one element should have focus set to true, or else the behavior may be unpredictable.

Example implementations

• element/fileEditor
• demo/autograder/codeEditor

See also

• pl-file-upload to receive files as a submission
• pl-file-preview to display previously submitted files
• pl-external-grader-results to include output from autograded code
• pl-code to display blocks of code with syntax highlighting
• pl-string-input for receiving a single string value

pl-file-upload element

Provides a way to accept file uploads as part of an answer. They will be stored in the format expected by externally graded questions.

Sample element

<pl-file-upload file-names="foo.py, bar.c, filename with\, comma.txt"></pl-file-upload>

Customizations

Example implementations

• demo/autograder/codeUpload
• demo/manualGrade/codeUpload

See also

• pl-file-editor to provide an in-browser code environment
• pl-external-grader-results to include output from autograded code
• pl-code to display blocks of code with syntax highlighting
• pl-string-input for receiving a single string value

pl-integer-input element

Fill in the blank field that requires an integer input.

Sample element

question.html

<pl-integer-input answers-name="int_value" label="$y =$"></pl-integer-input>

server.py

import random

def generate(data):

    # Generate a random whole number
    x = random.randint(1, 10)

    # Answer to fill in the blank input
    data["correct_answers"]["int_value"] = x

Customizations

Specifying a non-trivial base

By default, the values are interpreted in base 10. The base argument may also be used, with a value between 2 and 36, to indicate a different base to interpret the student input, as well as to print the final result.

The base argument can also accept a special value of 0. In this case, the values will by default be interpreted in base 10, however the student has the option of using different prefixes to indicate a value in a different format:

• The prefixes 0x and 0X can be used for base-16 values (e.g., 0x1a);
• The prefixes 0b and 0B can be used for base-2 values (e.g., 0b1101);
• The prefixes 0o and 0O can be used for base-8 values (e.g., 0o777).

Integer range

pl-integer-input can accept integers of unbounded size, however the correct answer will only be stored as the Python int if it is between -9007199254740991 and +9007199254740991 (between -(2^53 - 1) and +(2^53 - 1)). Otherwise, the correct answer will be stored as a string. This distinction is important in server.py scripts for parse() and grade(), as well as downloaded assessment results.

Note that answers can include underscores which are ignored (i.e., 1_000 will be parsed as 1000).

Example implementations

• element/integerInput

See also

• pl-number-input for numeric input
• pl-symbolic-input for mathematical expression input
• pl-string-input for string input

pl-matching element

Given a list of statements, select a matching option for each entry from a drop-down list.

Sample element

question.html

<pl-matching answers-name="string_value">
  <pl-statement match="Washington, D.C.">United States</pl-statement>
  <pl-statement match="Mexico City">Mexico</pl-statement>
  <pl-statement match="Paris">France</pl-statement>

  <pl-option>New York City</pl-option>
</pl-matching>

Customizations

Inside the pl-matching element, a series of pl-statement and pl-option elements specify the questions the student must answer and the options to which they can be matched, respectively. Statements are displayed in the left column, and options in the right.

A total of number-statements statements will be randomly selected and displayed to the student. The corresponding matching options will be gathered; if number-options is larger than the number of options used by the selected statements, then random distractors will be selected from the remaining unused options. If the selected statements require more options than number-options, then none-of-the-above will automatically be set to true.

The content of a pl-statement can be any HTML element, including other PrairieLearn elements. A pl-statement must be specified with these attributes:

The content of a pl-option can be any HTML element, including other PrairieLearn elements. pl-option elements are optional; options are created by default based on the match attribute of each pl-statement. Additional pl-option elements can be added to serve as distractors (an option that is always incorrect, such as "New York City" in the example above), or to render formatted HTML/PrairieLearn elements instead of plain text (see the last question in the demo problem linked in the "Example implementations" below).

When the fixed-options-order feature is used, options are shown in the following order:

1. Any explicitly-defined pl-option elements are shown first, in the order they are declared.
2. Any implicitly-defined options defined by a pl-statement match attribute are shown next, in the order they are declared.

It is recommended to explicitly define pl-option elements when using fixed-options-order to have complete certainty on the order they will be shown.

A pl-option must be specified with these attributes:

Example implementations

• element/matching

pl-matrix-component-input element

A pl-matrix-component-input element displays a grid of input fields with the same shape of the variable stored in answers-name (only 2D arrays of real numbers can be stored in answers-name).

Sample element

question.html

<pl-matrix-component-input answers-name="matrixA" label="$A=$"></pl-matrix-component-input>

server.py

import prairielearn as pl
import numpy as np

def generate(data):

    # Generate a random 3x3 matrix
    mat = np.random.random((3, 3))

    # Answer to each matrix entry converted to JSON
    data["correct_answers"]["matrixA"] = pl.to_json(mat)

Customizations

Details

The question will only be graded when all matrix components are entered, unless the allow-blank attribute is enabled.

Example implementations

• element/matrixComponentInput

See also

• pl-matrix-input for a matrix formatted in an implemented programming language
• pl-number-input for a single numeric input
• pl-symbolic-input for a mathematical expression input

pl-matrix-input element

A pl-matrix-input element displays an input field that accepts a matrix (i.e., a 2-D array) expressed in a supported programming language format (either MATLAB or Python's numpy).

Sample element

question.html

<pl-matrix-input answers-name="matrixB" label="$B=$"></pl-matrix-input>

server.py

import prairielearn as pl
import numpy as np

def generate(data):
    # Randomly generate a 2x2 matrix
    matrixB = np.random.random((2, 2))

    # Answer exported to question.
    data["correct_answers"]["matrixB"] = pl.to_json(matrixB)

Customizations

Details

pl-matrix-input parses a matrix entered in either MATLAB or Python formats. The following are valid input format options:

MATLAB format:

[1.23; 4.56]

Python format:

[[1.23], [4.56]]

Note: A scalar will be accepted either as a matrix of size 1 x 1 (e.g., [1.23] or [[1.23]]) or just as a single number (e.g., 1.23).

In the answer panel, a pl-matrix-input element displays the correct answer, allowing the user to switch between matlab and python format.

In the submission panel, a pl-matrix-input element displays either the submitted answer (in the same format that it was submitted, either MATLAB or Python), or a note that the submitted answer was invalid (with an explanation of why).

Example implementations

• demo/matrixComplexAlgebra

See also

• pl-matrix-component-input for individual input boxes for each element in the matrix
• pl-number-input for a single numeric input
• pl-symbolic-input for a mathematical expression input

pl-multiple-choice element

A pl-multiple-choice element selects one correct answer and zero or more incorrect answers and displays them in a random order as radio buttons. Duplicate answer choices (string equivalents) are not permitted in the pl-multiple-choice element, and an exception will be raised upon question generation if two (or more) choices are identical.

Sample element

<pl-multiple-choice answers-name="acc" weight="1">
  <pl-answer correct="false">positive</pl-answer>
  <pl-answer correct="true">negative</pl-answer>
  <pl-answer correct="false">zero</pl-answer>
</pl-multiple-choice>

Customizations

The attributes none-of-the-above and all-of-the-above can be set to one of these values:

• false: the corresponding choice will not be shown in the list of choices. This is the default.
• random: the corresponding choice will always be shown, and will be randomly correct, with probability proportional to the total number of correct choices. In other words, if there are N possible correct choices in total, this choice will be correct with probability 1/N.
• correct: the corresponding choice will always be shown and will always be the correct answer.
• incorrect: the corresponding choice will always be shown and will always be an incorrect answer (i.e., a distractor).
• true: same as random, accepted for backwards compatibility.

Note that "All of the above" and "None of the above", if set, are bounded by the number-answers value above. Also, these two values are always shown as the last choices, regardless of the setting for fixed-order. If both choices are shown, then "All of the above" will be listed before "None of the above".

Inside the pl-multiple-choice element, each choice must be specified with a pl-answer that has attributes:

Example implementations

• element/multipleChoice
• demo/randomMultipleChoice

See also

• pl-checkbox for allowing one or more choices

pl-number-input element

Fill in the blank field that allows for numeric value input within specific tolerances.

Sample element

question.html

<pl-number-input answers-name="ans_rtol" label="$x =$"> </pl-number-input>

server.py

import random

def generate(data):

    # Generate a random value
    x = random.uniform(1, 2)

    # Answer to fill in the blank input
    data["correct_answers"]["ans_rtol"] = x

question.html

<pl-number-input answers-name="ans_sig" comparison="sigfig" digits="2" label="$x =$">
</pl-number-input>

server.py

import random

def generate(data):

    # Generate a random value
    x = random.uniform(1, 2)

    # Answer to fill in the blank input
    data["correct_answers"]["ans_sig"] = round(x, 2)

Customizations

Example implementations

• element/numberInput
• demo/calculation

See also

• pl-integer-input for integer input
• pl-symbolic-input for mathematical expression input
• pl-string-input for string input

pl-order-blocks element

Element to arrange given blocks of code or text that are displayed initially in the source area. The blocks can be moved to the solution area to construct the solution of the problem. In the example below, the source area is denoted by the header "Drag from here" and the solution area is denoted with the header "Construct your solution here".

Sample element

question.html

<p>List all the even numbers in order:</p>
<pl-order-blocks answers-name="order-numbers">
  <pl-answer correct="false">1</pl-answer>
  <pl-answer correct="true">2</pl-answer>
  <pl-answer correct="false">3</pl-answer>
  <pl-answer correct="true">4</pl-answer>
</pl-order-blocks>

Customizations

Within the pl-order-blocks element, each element must either be a pl-answer or a pl-block-group (see details below for more info on pl-block-group). Each element within a pl-block-group must be a pl-answer. The pl-answer elements specify the content for each of the blocks, and may have the following attributes:

Details

Different grading options are defined via the attribute grading-method:

• ordered: in this method, the correct ordering of the blocks is defined by the ordering in which the correct answers (defined in pl-answer) appear in the HTML file. There is no partial credit for this option.
• unordered: in this method, if n is the total number of correct blocks, each correct block moved to the solution area is given 1/n points, and each incorrect block moved to the solution area is subtracted by 1/n points. The final score will be at least 0 (the student cannot earn a negative score by only moving incorrect answers). Note the ordering of the blocks does not matter. That is, any permutation of the answers within the solution area is accepted. There is partial credit for this option.
• ranking: in this method, the ranking attribute of the pl-answer options are used to check answer ordering. Every answer block X should have a ranking integer that is less than or equal to the answer block immediately below X. That is, the sequence of ranking integers of all the answer blocks should form a nonstrictly increasing sequence. If n is the total number of answers, each correctly ordered answer is worth 1/n, up to the first incorrectly ordered answer. There is partial credit for this option.
• dag: in this method, the depends attibute of the pl-answer options are used to declare the directed acyclic graph relation between the blocks, and a correct answer is any topological sort of that directed acyclic graph. If pl-block-group elements are used to divide some blocks into groups, then a correct answer is a topological sort of the lines of the proof with the added condition that the lines of each group must be listed contiguously (as an example, this is useful for expressing a proof by cases when the dag grader is used for mathematical proofs). Blocks inside a pl-block-group element may only depend or be depended on by blocks within the same pl-block-group, and pl-blocks-groups can be given their own tag and depends properties so that a block may depend on an entire group, or a group may depend on a block or group.
• external: in this method, the blocks moved to the solution area will be saved in the file user_code.py, and the correctness of the code will be checked using the external grader. Depending on the external grader grading code logic, it may be possible to enable or disable partial credit. The attribute correct for pl-answer can still be used in conjunction with min-incorrect and max-incorrect for display purposes only, but not used for grading purposes. The attributes ranking and indent are not allowed for this grading method.

Different ordering of the blocks in the source area defined via the attribute source-blocks-order:

• random: the blocks are shuffled.
• ordered: the blocks appear in the source area in the same order they appear in the HTML file.
• alphabetized: the blocks are alphabetized according to their HTML contents. Take care when including HTML in blocks. For instance, <b>cat</b> will appear before <i>bat</i>.

Example implementations

• element/orderBlocks
• demo/proofBlocks
• demo/autograder/python/orderBlocksRandomParams
• demo/autograder/python/orderBlocksAddNumpy

pl-rich-text-editor element

Provides an in-browser rich text editor, aimed mostly at manual grading essay-type questions. This editor is based on the Quill rich text editor.

Sample element

<pl-rich-text-editor file-name="answer.html"> </pl-rich-text-editor>

Customizations

Example implementations

• [element/richTextEditor]

See also

• pl-file-editor to edit unformatted text, such as code
• pl-file-upload to receive files as a submission
• pl-string-input for receiving a single string value

pl-string-input element

Fill in the blank field that allows for string value input.

Sample element

question.html

<pl-string-input answers-name="string_value" label="Prairie"></pl-string-input>

server.py

def generate(data):

    # Answer to fill in the blank input
    data["correct_answers"]["string_value"] = "Learn"

Customizations

Example implementations

• element/stringInput

See also

• pl-symbolic-input for mathematical expression input
• pl-integer-input for integer input
• pl-number-input for numeric input

pl-symbolic-input element

Fill in the blank field that allows for mathematical symbol input.

Sample element

question.html

<pl-symbolic-input answers-name="symbolic_math" variables="x, y" label="$z =$"></pl-symbolic-input>

server.py

import prairielearn as pl
import sympy

def generate(data):

    # Declare math symbols
    x, y = sympy.symbols("x y")

    # Describe the equation
    z = x + y + 1

    # Answer to fill in the blank input stored as JSON.
    data["correct_answers"]["symbolic_math"] = pl.to_json(z)

Customizations

Details

Correct answers are best created as sympy expressions and converted to json using pl.to_json. It is also possible to specify the correct answer simply as a string, e.g., x + y + 1.

Variables with the same name as greek letters (e.g., alpha, beta, etc.) will be automatically converted to their LaTeX equivalents for display on the correct answer and submission panels.

Do not include i or j in the list of variables if allow-complex="true", and do not include any other reserved name in your list of variables (e, pi, cos, sin, etc). The element code will check for (and disallow) conflicts between your list of variables, custom-functions, and reserved names.

Note that variables created with additional assumptions in a correct answer will have those assumptions respected when evaluating student answers. See example question for details.

Example implementations

• element/symbolicInput

See also

• pl-number-input for numeric input
• pl-integer-input for integer input
• pl-string-input for string input

pl-threejs element

This element displays a 3D scene with objects that the student can (optionally) translate and/or rotate. It can be used only for output (e.g., as part of a question that asks for something else to be submitted). Or, it can be used for input (e.g., comparing a submitted pose of the body-fixed objects to a correct orientation). Information about the current pose can be hidden from the student and, if visible, can be displayed in a variety of formats, so the element can be used for many different types of questions.

Sample element

<pl-threejs answer-name="a">
  <pl-threejs-stl file-name="MAKE_Robot_V6.stl" frame="body" scale="0.1"></pl-threejs-stl>
  <pl-threejs-stl
    file-name="MAKE_Robot_V6.stl"
    frame="body"
    scale="0.025"
    position="[-1,1,2]"
    orientation="[0,0,30]"
  ></pl-threejs-stl>
  <pl-threejs-txt frame="body" position="[-1,1,2.6]" orientation="[0,0,30]">mini-me</pl-threejs-txt>
</pl-threejs>

Customizations

A pl-threejs-stl element inside a pl-threejs element allows you to add a mesh described by an stl file to the scene, and has these attributes:

A pl-threejs-txt element inside a pl-threejs element allows you to add whatever text appears between the <pl-threejs-txt> ... </pl-threejs-txt> tags as a mesh to the scene, and has these attributes:

Details

Note that a 3D scene is also created to show each submitted answer. This means that if there are many submitted answers, the page will load slowly.

Example implementations

• element/threeJS

See also

• External: three.js JavaScript library

pl-units-input element

Fill in the blank field that allows for numeric input and accompanying units.

Sample element

question.html

<pl-units-input answers-name="c_1" correct-answer="1m" atol="1cm"></pl-units-input>

Customizations

Details

This element uses Pint to parse and represent units. Any units allowed by Pint are supported by this element. To obtain a Pint unit registry, question code can use pl.get_unit_registry() to construct a default unit registry. This is recommended over constructing a registry using the constructor provided by Pint (as this does not use caching and is slower).

Example implementations

• element/unitsInput

Decorative Elements

pl-card element

Displays question content within a card-styled component. Optionally displays a header, footer, and/or image via tag attributes.

Sample element

<pl-card
  header="Header"
  title="Title"
  width="50%"
  img-bottom-src="https://via.placeholder.com/720x480"
>
  <pl-question-panel> This card is 50% width and has a bottom image. </pl-question-panel>
</pl-card>

Customizations

Details

The pl-card attributes mirror the options of Bootstrap 4 cards.

Example implementations

• element/card

pl-code element

Display an embedded or file-based block of code with syntax highlighting and line callouts.

Sample element

<pl-code language="python"> def square(x): return x * x </pl-code>

Customizations

Details

The pl-code element uses the Pygments library for syntax highlighting. It supports the any of the built-in supported languages, be found here, as well as the custom ansi-color custom language that can be used to display terminal output. If the language is not provided, no syntax highlighting is done.

Common Pitfalls

The HTML specification disallows inserting special characters onto the page (i.e. <, >, &), and using these characters with inline code may break rendering. To fix this, either escape the characters (<, >, &, more here), or load code snippets from external files into pl-code with source-file-name attribute.

Example implementations

• element/code

See also

• pl-file-editor to provide an in-browser code environment

pl-dataframe element

Displays a formatted display of Pandas DataFrames, with various options for displaying types of columns and code for reproducing the DataFrame.

Sample elements

question.html

<pl-dataframe params-name="df" show-index="false" show-dimensions="false" digits="4"></pl-dataframe>

server.py

import prairielearn as pl
import pandas as pd

def generate(data):
    df = pd.read_csv("breast-cancer-train.dat", header=None)
    data["params"]["df"] = pl.to_json(df.head(15))

Customizations

Details

When setting a parameter, use PrairieLearn's built in pl.to_json() on the DataFrame to display. Note that there are multiple serialization options for Pandas DataFrames. Encoding a DataFrame df by setting pl.to_json(df, df_encoding_version=2) allows for missing and date time values whereas pl.to_json(df, df_encoding_version=1) (default) does not. However, df_encoding_version=1 has support for complex numbers, while df_encoding_version=2 does not.

Note that some Python types may not be serialized correctly in the code provided to reconstruct the DataFrame.

Example implementations

• element/dataframe
• demo/randomDataFrame

See also

• pl-code to display blocks of code with syntax highlighting
• pl-variable-output for displaying a matrix or element in code form.
• pl-python-variable for displaying a formatted output of Python variables.

pl-drawing element

Creates a canvas (drawing space) that can display images from a collection of pre-defined drawing objects. Users can also add drawing objects to the canvas for grading.

See the pl-drawing documentation for details.

pl-external-grader-variables element

Displays variables that are given to the student, or expected for the student to define in externally-graded Python questions.

We advise against using this element for any question not using the prairielearn/grader-python Docker image, as the way this element stores parameters is specifically for use with that autograder. If you want to display a table of variables for a question using a different autograder, consider using a standard HTML <table> instead.

The list of variables can be defined in in data["params"] or the question HTML itself (but not both!). If defined in the question HTML itself, the variable information is added to data["params"] for use by the external grader. If no descriptions are present, this colmun is hidden in the table shown to the student.

If stored in data["params"], the variables list has the following format:

data["params"]["names_for_user"] = [
    {"name": "var1", "description": "Human-readable description.", "type": "type"},
    {"name": "var2", "description": "...", "type": "..."}
]
data["params"]["names_from_user"] = [
    {"name": "result1", "description": "...", "type": "..."}
]

Sample element

question.html

<p>The setup code gives the following variables:</p>
<pl-external-grader-variables params-name="names_for_user"></pl-external-grader-variables>

<p>Your code snippet should define the following variables:</p>
<pl-external-grader-variables params-name="names_from_user">
  <pl-variable name="x" type="numpy array (length $n$)"
    >Solution to $\mathbf{Ax}=\mathbf{b}$.</pl-variable
  >
</pl-external-grader-variables>

<!--
  The following tag defines an empty list for the given params-name.
  This is useful for some cases where a parameter must be set to empty to run the external grader.
  Nothing will be displayed from this tag.
-->
<pl-external-grader-variables params-name="names_empty" empty="true"></pl-external-grader-variables>

server.py

def generate(data):
    data["params"]["names_for_user"] = [
        {"name": "n", "description": r"Dimensionality of $\mathbf{A}$ and $\mathbf{b}$.", "type": "integer"},
        {"name": "A", "description": r"Matrix $\mathbf{A}$.", "type": "numpy array"},
        {"name": "b", "description": r"Vector $\mathbf{b}$.", "type": "numpy array"}
    ]

Customizations

The HTML inside the inner pl-variable tag is used as the description. If the tag is empty, no description is used for the given variable. The inner pl-variable tag has the following attributes:

Example implementations

• demo/autograder/codeEditor
• demo/autograder/codeUpload
• demo/autograder/python/square
• demo/autograder/python/numpy
• demo/autograder/python/pandas
• demo/autograder/python/plots
• demo/autograder/python/random

pl-figure element

Display a statically or dynamically generated image.

Sample element

<!-- show a figure from an existing file -->
<pl-figure file-name="figure.png" directory="clientFilesCourse"></pl-figure>

<!-- show a figure from a file that is generated by code -->
<pl-figure file-name="figure.png" type="dynamic"></pl-figure>

Customizations

Dynamically generated figures

If type="dynamic", then the contents of the image file must be returned by a function file() that is located either in element code or in server.py. The contents must be a string (with utf-8 encoding), a bytes-like object, or a file-like object. The filename will be available to this function as data["filename"]. For example, to generate the figure.png for the dynamic pl-figure above, this code might appear in server.py to generate a "fake" figure.png:

def file(data):
    if data["filename"]=="figure.png":
        plt.plot([1,2,3],[3,4,-2])
        buf = io.BytesIO()
        plt.savefig(buf,format="png")
        return buf

If file() does not return anything, it will be treated as if file() returned the empty string.

Example implementations

• demo/randomPlot
• demo/fixedCheckbox
• element/figure

See also

• pl-file-download to allow for files to be downloaded.
• pl-code to show code as text with syntax highlighting.

pl-file-download element

Provide a download link to a static or dynamically generated file.

Sample element

<!-- allow students to download an existing file -->
<pl-file-download file-name="data.txt" directory="clientFilesCourse"></pl-file-download>

<!-- allow students to download a file that is generated by code -->
<pl-file-download file-name="data.txt" type="dynamic"></pl-file-download>

<!-- allow students to open an existing file in a new tab -->
<pl-file-download
  file-name="data.txt"
  directory="clientFilesCourse"
  force-download="false"
></pl-file-download>

Customizations

Details

If type="dynamic", then the contents of the file must be returned by a function file() that is located either in element code or in server.py. The contents must be a string (with utf-8 encoding), a bytes-like object, or a file-like object. The filename will be available to this function as data["filename"]. For example, this code might appear in server.py to generate a file called data.txt:

def file(data):
    if data["filename"]=="data.txt":
        return "This data is generated by code."

If file() does not return anything, it will be treated as if file() returned the empty string.

Example implementations

• element/fileDownload

See also

• pl-figure to display images.
• pl-code to show code as text with syntax highlighting.

pl-file-preview element

Provides an in-browser preview of pure-text or image files submitted by a student as part of an external grading system. Does not support other file types (e.g., PDF). Shows the submitted file in the corresponding submission panel. Used in conjunction with submission elements like pl-file-editor, pl-file-upload, and pl-rich-text-editor. Commonly appears in the submission panel with companion pl-external-grader-results element.

Sample element

<pl-file-preview></pl-file-preview>

Example implementations

• element/fileEditor
• demo/autograder/codeEditor

See also

• pl-file-editor to provide an in-browser code environment
• pl-file-upload to receive files as a submission
• pl-external-grader-results to include output from autograded code
• pl-code to display blocks of code with syntax highlighting

pl-graph element

Using the PyGraphviz library, create Graphviz DOT visualizations.

Sample elements

question.html

<pl-graph> digraph G { A -> B } </pl-graph>

question.html

<pl-graph params-name="matrix" params-name-labels="labels"></pl-graph>

server.py

import prairielearn as pl
import numpy as np

def generate(data):
    mat = np.random.random((3, 3))
    mat = mat / np.linalg.norm(mat, 1, axis=0)
    data["params"]["labels"] = pl.to_json(["A", "B", "C"])
    data["params"]["matrix"] = pl.to_json(mat)

question.html

<pl-graph params-type="networkx" params-name="random-graph"></pl-graph>

server.py

import prairielearn as pl
import networkx as nx

def generate(data):
    random_graph = nx.gnm_random_graph(5, 6)

    for in_node, out_node, edge_data in random_graph.edges(data=True):
        edge_data["label"] = random.choice(string.ascii_lowercase)

    data["params"]["random-graph"] = pl.to_json(random_graph)

Customizations

Details

Note that using networkx for rendering, attributes from the input networkx graph are retained when creating a Graphviz DOT visualization. As a result, it is possible to set node and edge properties such as color, line weight, as part of the input graph and have these reflected in the rendering. These include global properties of the graph, such as the rankdir used in rendering. See the Graphviz documentation on attributes for more information on what attributes are supported.

Example implementations

• element/graph

Extension API

Custom values for params-type can be added with element extensions. Each custom type is defined as a function that takes as input the element and data values and returns processed DOT syntax as output.

A minimal type function can look something like:

def custom_type(element, data):
    return "graph { a -- b; }"

In order to register these custom types, your extension should define the global backends dictionary. This will map a value of params-type to your function above:

backends = {
    'my-custom-type': custom_type
}

This will automatically get picked up when the extension gets imported. If your extension needs extra attributes to be defined, you may optionally define the global optional_attribs array that contains a list of attributes that the element may use.

For a full implementation, check out the edge-inc-matrix extension in the exampleCourse.

See also

• External: the DOT language reference
• pl-figure for displaying static or dynamically generated graphics.
• pl-file-download for allowing either static or dynamically generated files to be downloaded.

pl-matrix-latex element

Displays a scalar or 2D numpy array of numbers in LaTeX using mathjax.

Sample element

question.html

$$C = <pl-matrix-latex params-name="matrixC"></pl-matrix-latex>$$

server.py

import prairielearn as pl
import numpy as np

def generate(data):

    # Construct a matrix
    mat = np.matrix("1 2; 3 4")

    # Export matrix to be displayed in question.html
    data["params"]["matrixC"] = pl.to_json(mat)

Customizations

Details

Depending on whether data["params"] contains either a scalar or 2D numpy array of numbers, one of the following will be returned.

• scalar
  • a string containing the scalar not wrapped in brackets.
• numpy 2D array
  • a string formatted using the bmatrix LaTeX style.

Sample LaTeX formatting:

\begin{bmatrix} ... & ... \\ ... & ... \end{bmatrix}

As an example, consider the need to display the following matrix operations:

x = [A][b] + [c]

In this case, we would write:

${\bf x} = <pl-matrix-latex params-name="A" digits="1"></pl-matrix-latex>
<pl-matrix-latex params-name="b" digits="1"></pl-matrix-latex>
+ <pl-matrix-latex params-name="c" digits="1"></pl-matrix-latex>$

Example implementations

• element/matrixLatex
• demo/randomCheckbox

See also

• pl-variable-output for displaying the matrix in a supported programming language.
• pl-matrix-component-input for individual input boxes for each element in the matrix
• pl-matrix-input for input values formatted in a supported programming language.

pl-overlay element

The overlay element allows existing PrairieLearn and HTML elements to be layered on top of one another in arbitrary positions.

Sample element

<pl-overlay width="400" height="400" clip="false">
  <pl-background>
    <pl-drawing width="398" height="398" hide-answer-panel="false">
      <pl-drawing-initial>
        <pl-triangle x1="50" y1="350" x2="350" y2="350" x3="350" y3="50"></pl-triangle>
      </pl-drawing-initial>
    </pl-drawing>
  </pl-background>
  <pl-location left="200" top="375"> $$3$$ </pl-location>
  <pl-location left="375" top="200"> $$3$$ </pl-location>
  <pl-location left="170" top="170">
    <pl-number-input
      answers-name="c"
      show-help-text="false"
      show-placeholder="false"
      size="1"
    ></pl-number-input>
  </pl-location>
</pl-overlay>

pl-overlay Customizations

pl-location Customizations

pl-background Customizations

The pl-background child tag does not have any extra attributes that need to be set. All relevant positioning and sizing information is obtained from the tag's contents.

Details

An overlay is pre-defined as a "overlay area" with a static size. By default, elements that exceed these boundaries will get partially or totally cut off. A background can be specified by wrapping HTML in a <pl-background> tag, in this case the overlay will automatically size itself to fit the background and a width and height do not need to be specified. Floating child elements are wrapped with a <pl-location> tag that specifies the position relative to some defined edge of the overlay area using left, right, top, and bottom. Anything inside the location tag will be displayed at that position. Children are layered in the order they are specified, with later child elements being displayed on top of those defined earlier.

Example implementations

• element/overlay

pl-python-variable element

Displays the value of a Python variable. Uses options similar to the pprint module to format output data, and can recursively print nested data structures. As such, some of the customization text is taken directly from this documentation.

Sample elements

Display Python variable value

question.html

<pl-python-variable params-name="variable"></pl-python-variable>

server.py

import prairielearn as pl

def generate(data):
    data_dictionary = { "a": 1, "b": 2, "c": 3 }
    data["params"]["variable"] = pl.to_json(data_dictionary)

Customizations

Details

The element supports displaying Python objects via repr(), with support for more complex display options similar to the built-in pprint library. Objects to be displayed must be serializable to JSON. For details about what objects can be serialized and how to do this with the provided to_json and from_json functions, see the Question Writing documentation. To display objects that cannot be easily JSON serialized, please refer to the pl-code example question element/code.

Printing Pandas DataFrames with this element is deprecated. Please use the new pl-dataframe element for this purpose.

Example implementations

• element/pythonVariable

See also

• pl-code to display blocks of code with syntax highlighting
• pl-variable-output for displaying a matrix or element in code form.
• pl-dataframe for displaying dataframes.

pl-template element

Displays boilerplate HTML from mustache templates in a reusable way.

Sample element

<pl-template file-name="templates/outer_template.mustache">
  <pl-variable name="show">True</pl-variable>
  <pl-variable name="section_header">This is the section header.</pl-variable>
  <pl-variable name="section_body">This is the section body.</pl-variable>
</pl-template>

Along with the sample usage of the element, we include a sample template file. This is the file templates/outer_template.mustache, stored in the course's serverFilesCourse directory:

<div class="card mb-1 mt-1">
  <div class="card-header" style="cursor: pointer">
    <div
      class="card-title d-flex justify-content-between"
      data-toggle="collapse"
      data-target="#collapse-{{uuid}}"
    >
      <div>{{section_header}}</div>
      <div class="fa fa-angle-down"></div>
    </div>
  </div>

  <div class="collapse{{#show}} show{{/show}}" id="collapse-{{uuid}}">
    <div class="card-body">
      <div class="card-text">{{{section_body}}}</div>
    </div>
  </div>
</div>

Note: The sample element did not define the uuid variable, as each pl-template element has a unique one defined internally.

Customizations

Inside the pl-template element, variables for use in rendering the template may be specified with a pl-variable tag. Each pl-variable tag can be used to define a variable with data from a file or with the contents of the tag (but not both). Note that substitution is not applied to external files used in pl-variable (files are used as-is). The pl-variable tag supports the following attributes:

Details

Because of the way that elements are rendered in PrairieLearn, templates should only contain other decorative elements. In particular, elements that accept and/or grade student input used within this element will not work correctly. When rendering a template, all entries from data["params"] are included as available variables and may be used when the template is rendered. Each instance of the pl-template element also has a unique uuid variable available for rendering. Templates may also be used within other templates.

Note: The id # CSS selector does not work for ids that start with a number, so uuids should be prefixed (as these may start with a number).

Example implementations

• element/template

pl-variable-output element

Displays a list of variables that are formatted for import into the supported programming languages (e.g. MATLAB, Mathematica, Python, or R).

Sample element

question.html

<pl-variable-output digits="3">
  <!-- Example comment inside of this element. -->
  <pl-variable params-name="matrixC">C</pl-variable>
  <pl-variable params-name="matrixD">D</pl-variable>
</pl-variable-output>

server.py

import prairielearn as pl
import numpy as np

def generate(data):

    # Create fixed matrix
    matrixC = np.matrix("5 6; 7 8")
    matrixD = np.matrix("-1 4; 3 2")
    # Random matrices can be generated with:
    # mat = np.random.random((2, 2))

    # Export each matrix as a JSON object for the question view.
    data["params"]["matrixC"] = pl.to_json(matrixC)
    data["params"]["matrixD"] = pl.to_json(matrixD)

Customizations

Attributes for <pl-variable-output>:

Attributes for <pl-variable> (one of these for each variable to display):

Details

This element displays a list of variables inside <pl-code> tags that are formatted for import into either MATLAB, Mathematica, Python, or R (the user can switch between them). Each variable must be either a scalar or a 2D numpy array (expressed as a list). Each variable will be prefixed by the text that appears between the <pl-variable> and </pl-variable> tags, followed by =. Below are samples of the format displayed under each language tab.

MATLAB format:

A = [1.23; 4.56]; % matrix

Mathematica format:

A = [1.23; 4.56]; (* matrix *)

Python format:

import numpy as np

A = np.array([[1.23], [4.56]]) # matrix

R format:

A = c(1.23, 4.56) # vector
A = matrix(c(1.23, 4.56, 8.90, 1.23), nrow = 2, ncol = 2, byrow = TRUE) # matrix

If a variable v is a complex object, you should use import prairielearn as pl and data["params"][params-name] = pl.to_json(v).

Example implementations

• element/variableOutput
• element/matrixComponentInput
• demo/matrixComplexAlgebra

See also

• pl-matrix-latex for displaying the matrix using LaTeX commands.
• pl-matrix-component-input for individual input boxes for each element in the matrix
• pl-matrix-input for input values formatted in a supported programming language.
• pl-code to display blocks of code with syntax highlighting

pl-xss-safe element

Removes potentially dangerous scripts from HTML. This is recommended when parsing and displaying student-provided content. The element will remove some elements like scripts and triggers that may have been maliciously inserted by the student. Note that any code parsed by this element must be supported directly by the browser, i.e., it cannot include PrairieLearn elements or special tags.

Sample element

<!-- Content coming from a submitted file (e.g., pl-file-editor, pl-file-upload) -->
<pl-xss-safe submitted-file-name="answer.html"></pl-xss-safe>

<!-- Content coming from a regular element (e.g., pl-string-input) -->
<pl-xss-safe contents="{{submitted_answers.answer}}"></pl-xss-safe>

Customizations

Note that only one of the attributes source-file-name, submitted-file-name or contents may be provided in the same element.

Example implementations

• demo/markdownEditorLivePreview
• element/xssSafe

See also

• pl-file-editor to provide an in-browser code environment

Conditional Elements

pl-answer-panel element

Provide information regarding the question answer after the student is unable to submit further answers for grading.

Sample element

<pl-answer-panel>This content is only shown in the answer panel.</pl-answer-panel>

Details

Generally, the contents of question.html will appear in the question panel, submission panel, and answer panel. To prevent content from being displayed in the submission panel and question panel (so, only in the answer panel), surround that content with the <pl-answer-panel> tags.

Common reasons that trigger the display of the answer panel are:

• The question is fully correct.
• There are no more submission attempts.
• The time limit for the assessment has expired.

Example implementations

• demo/custom/gradeFunction

See also

• pl-question-panel for displaying the question prompt.
• pl-submission-panel for changing how a submitted answer is displayed.
• pl-hide-in-panel to hide contents in one or more display panels.
• pl-external-grader-results for showing the results from an externally graded code question.

pl-external-grader-results element

Displays results from externally-graded questions.

Sample element

<pl-external-grader-results></pl-external-grader-results>

Details

It expects results to follow the reference schema for external grading results.

Example Implementations

• demo/autograder/codeUpload
• demo/autograder/codeEditor

See also

• External Grading Reference Schema

pl-hide-in-panel element

Hide the contents so that it is not displayed in specific panels ("question", "submission", or "answer").

Sample element

<pl-hide-in-panel submission="true" answer="true">
  This text will be hidden in the submission panel and answer panel.
</pl-hide-in-panel>

Customizations

Details

Hide the element contents in those panels for which the corresponding attribute is true. This is the reverse of pl-question-panel, pl-submission-panel, or pl-answer-panel, all of which explicitly show the element contents only in a specific panel.

Example implementations

• element/panels

See also

• pl-question-panel for displaying the question prompt.
• pl-submission-panel for changing how a submitted answer is displayed.
• pl-answer-panel for displaying the question's solution.
• pl-external-grader-results for showing the results from an externally graded code question.

pl-hide-in-manual-grading element

Hide the contents so that it is not displayed to graders in the manual grading page.

Sample element

<pl-hide-in-manual-grading>
  This text will be shown to students, but not to graders.
</pl-hide-in-manual-grading>

Details

This element is typically used to abbreviate the question description and allow graders to focus on the actual answers during grading. It is the reverse of the pl-manual-grading-only element, which explicitly shows content only during grading.

Example implementations

• demo/manualGrade/codeUpload

See also

• pl-manual-grading-only to show content only during manual grading.
• pl-question-panel for displaying the question prompt.
• pl-submission-panel for changing how a submitted answer is displayed.
• pl-answer-panel for displaying the question's solution.
• pl-hide-in-panel to hide contents in one or more display panels.

pl-hidden-hints element

Display progressive hints that become accessible as the number of student submissions increases for the current variant. Hints are only open on page load when they are first revealed (when first reaching the desired submission count). Otherwise hints start closed and must be opened by the user. The submission counter is reset when new variants are generated. Note that this element does not reveal new hints across variants.

Best used in situations where there is a penalty for more submissions to a given variant. This prevents students from spamming incorrect submissions to reveal all hints right away.

Sample element

<pl-hidden-hints>
  <pl-hint> This is a hint that will be accessible immediately. </pl-hint>

  <pl-hint show-after-submission="3">
    This is a hint that will be accessible after three incorrect submissions for the current
    variant.
  </pl-hint>

  <pl-hint show-after-submission="5">
    This is a hint that will be accessible after five incorrect submissions for the current variant.
  </pl-hint>
</pl-hidden-hints>

Customizations

For the inner pl-hint tag:

Details

Add hints to a variant that are revealed with more submissions using the show-after-submission attribute. By default, hints without show-after-submission set are always shown. Hints with the same show-after-submission appear in the order they're written in the question HTML.

Example implementations

• element/hiddenHints

See also

• pl-question-panel for displaying the question prompt.
• pl-submission-panel for changing how a submitted answer is displayed.
• pl-hide-in-panel to hide contents in one or more display panels.

pl-manual-grading-only element

Hide the contents so that it is only displayed to graders in the manual grading page.

Sample element

<pl-manual-grading-only>
  This text will be shown to graders, but not to students.
</pl-manual-grading-only>

Details

This element is typically used to provide graders with additional information that may not be presented to students. Examples may include grading instructions, sample answers, acceptable values for individual results, random parameters used in the question generation, or pre-computed values calculated in explicit parse functions. It is the reverse of the pl-hide-in-manual-grading element, which explicitly hides content during grading.

Example implementations

• demo/manualGrade/codeUpload

See also

• pl-hide-in-manual-grading to hide content during manual grading.
• pl-question-panel for displaying the question prompt.
• pl-submission-panel for changing how a submitted answer is displayed.
• pl-answer-panel for displaying the question's solution.
• pl-hide-in-panel to hide contents in one or more display panels.

pl-question-panel element

Displays the contents of question directions.

Sample element

<pl-question-panel>This content is only shown in the question panel.</pl-question-panel>

Details

Generally, the contents of question.html will appear in the question panel, submission panel, and answer panel. To prevent content from being displayed in the submission panel and answer panel (so, only in the question panel), surround that content with the <pl-question-panel> tags.

Example implementations

• demo/calculation

See also

• pl-submission-panel for changing how a submitted answer is displayed.
• pl-answer-panel for displaying the question's solution.
• pl-hide-in-panel to hide contents in one or more display panels.

pl-submission-panel element

Customizes how information entered by a user is displayed before grading.

Sample element

<pl-submission-panel>This content is only shown in the submission panel.</pl-submission-panel>

Details

Generally, the contents of question.html will appear in the question panel, submission panel, and answer panel. To prevent content from being displayed in the question panel and answer panel (so, only in the submission panel), surround that content with the <pl-submission-panel> tags.

The submission panel is only shown after the student has submitted an answer. This answer may be correct, incorrect, or invalid.

Example implementations

• demo/custom/gradeFunction
• demo/autograder/codeUpload
• demo/autograder/codeEditor

See also

• pl-question-panel for displaying the question prompt.
• pl-answer-panel for displaying the question's solution.
• pl-hide-in-panel to hide contents in one or more display panels.
• pl-external-grader-results for showing the results from an externally graded code question.

Deprecated Elements

Note: The following PrairieLearn Elements have been deprecated. These elements are still supported for backwards compatibility, but they should not be used in new questions.

pl-prairiedraw-figure element

Create and display a prairiedraw image.

WARNING: This element is deprecated and should not be used in new questions.

Sample element

<pl-prairiedraw-figure
  script-name="drawFigure.js"
  param-names="r1,r2,isHorizontal"
  width="900"
  height="600"
></pl-prairiedraw-figure>

Customizations

Details

The provided script-name corresponds to a file located within the director for the question. Parameter names are keys stored in data["params"] in server.py (i.e., those available for templating within question.html).

Example implementations

• element/prairieDrawFigure

See also

• PrairieDraw graphics documentation

pl-variable-score element

Display the partial score for a specific answer variable.

WARNING: This element is deprecated and should not be used in new questions.

Sample element

<pl-variable-score answers-name="v_avg"></pl-variable-score>

Customizations