PrairieLearn questions have three types of
panels that are shown to the student:
- Question panel: shows the question prompt. The panel containing this text is the question panel. There is only one question panel and it is always visible.
- Submission panel: shows the student's submitted answer. There is one submission panel for each submitted answer, so the student can see the history of their attempts.
- Answer panel: shows the correct answer or other feedback to the student once they can no longer attempt the question. There is at most one answer panel.
By default, the contents of question.html is shown in all three panels. Elements used in question.html are aware of which panel they are in. For example, the <pl-multiple-choice> element will let the student choose an option in the question panel, show the student the option they chose in the submission panel, and display the correct option in the answer panel.
Elements to control panel display
There are four elements that can be used to control whether text is shown in each panel:
<pl-question-panel> only displays its contents in the question panel. This should be used for the question prompt.<pl-submission-panel> only displays its contents in the submission panel. This could be used to give specific feedback on a particular student submission.<pl-answer-panel> only displays its contents in the answer panel. This could be used to give information about the correct answer.<pl-hide-in-panel> has attributes that allow content to be hidden in one or more panels.
In normal usage, we put the question prompt in a <pl-question-panel> element and all inputs requesting student input outside of this element.
Example HTML
As an example, this question contains the follow panel elements. Click the "Save & Grade" button to make the submission and answer panels appear.
<pl-question-panel>
<p>(A) This text is only shown in the question panel.
</pl-question-panel>
<pl-submission-panel>
<p>(B) This text is only shown in the submission panel.
</pl-submission-panel>
<pl-answer-panel>
<p>(C) This text is only shown in the answer panel.
</pl-answer-panel>
<pl-hide-in-panel question="true">
<p>(D) This text is hidden in the question panel, and shown in the others.
</pl-hide-in-panel>
<pl-hide-in-panel submission="true">
<p>(E) This text is hidden in the submission panel, and shown in the others.
</pl-hide-in-panel>
<pl-hide-in-panel answer="true">
<p>(F) This text is hidden in the answer panel, and shown in the others.
</pl-hide-in-panel>
Output of above example
(A) This text is only shown in the question panel.
(E) This text is hidden in the submission panel, and shown in the others.
(F) This text is hidden in the answer panel, and shown in the others.