[DEV] Files (element/codeDocumentation) — XC 101, SectionA

questions / element / codeDocumentation / question.html
<pl-question-panel>
    <p>
        Examples below are taken from the documentation page for
        <a href="https://docs.prairielearn.com/elements">
            PrairieLearn Elements in <code>question.html</code>
        </a>.
    </p>
</pl-question-panel>

<hr>

<h2>Submission Elements</h2>

<hr>

<pl-card header="&lt;code&gt;pl-multiple-choice&lt;/code&gt;">

    <pl-question-panel>
      Example of a multiple choice element.
      <p> Correct Input: <code>negative</code> </p>
    </pl-question-panel>
    <pl-multiple-choice answers-name="acc">
      <pl-answer correct="false">positive</pl-answer>
      <pl-answer correct="true">negative</pl-answer>
      <pl-answer correct="false">zero</pl-answer>
    </pl-multiple-choice>
</pl-card>

<pl-card header="&lt;code&gt;pl-checkbox&lt;/code&gt;">

    <pl-question-panel>
      Example of a multiple selection element.
      <p> Correct Input: <code>A-B</code>, <code>B-C</code>, and  <code>D-E</code>.</p>
    </pl-question-panel>

    <pl-checkbox answers-name="vpos">
      <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>
</pl-card>

<pl-card header="&lt;code&gt;pl-number-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that accepts <b>numeric</b> values.
     <p> Correct Input: <code>{{correct_answers.ans_rtol}}</code> </p>
    </pl-question-panel>

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

    <hr>

    <pl-question-panel>
       <p> Correct Input: <code>{{correct_answers.ans_sig}}</code> </p>
    </pl-question-panel>
    <pl-number-input answers-name="ans_sig" comparison="sigfig" digits="2" label="$x =$">
    </pl-number-input>
</pl-card>

<pl-card header="&lt;code&gt;pl-integer-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that accepts <b>integer</b> values.
     <p> Correct Input: <code>42</code> </p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-symbolic-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that accepts <b>mathematical expression</b> values.
     <p> Correct Input: <code>x + y + 1</code> </p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-string-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that accepts <b>string</b> values.
     <p> Correct Input: <code>Learn</code> </p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-matrix-component-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that provides input fields for
      each entry of a matrix.
     <p> Correct Input: </p>
     <ul>
         <li><code>1</code> in location 1x1</li>
         <li><code>2</code> in location 1x2</li>
         <li><code>3</code> in location 2x1</li>
         <li><code>4</code> in location 2x2</li>
     </ul>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-matrix-input&lt;/code&gt;">

    <pl-question-panel>
      Example of a fill in the blank element that provides an input field
      for supplying the underlying code required to create the matrix.
     <p> Correct Input: </p>
     <ul>
         <li>MATLAB: <code>[1 2; 3 4]</code></li>
         <li>Python: <code>[[1, 2], [3, 4]]</code></li>
     </ul>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-file-editor&lt;/code&gt;">

    <pl-question-panel>
      Example of an inbrowser code file editor submission element.
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-file-upload&lt;/code&gt;">

    <pl-question-panel>
      Example of a file submission element.
     <p>
          Correct Input: <code>foo.py</code>, <code>bar.c</code>,
                         and <code>filename with, comma.txt</code>
     </p>
    </pl-question-panel>

    <pl-file-upload file-names="foo.py, bar.c, filename with\, comma.txt" optional-file-names="foo.pdf, *.py, file_?.txt, file_[abc].txt, file with \\? as non-wildcard.pdf"></pl-file-upload>
</pl-card>
<hr>

<h2>Decorative Elements</h2>

<hr>

<pl-card header="&lt;code&gt;pl-code&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of embedding code blocks with syntax highlighting.</p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-figure&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of displaying an image in a question.</p>
    </pl-question-panel>

    <pl-figure file-name="pl-logo.png" directory="clientFilesQuestion"></pl-figure>
</pl-card>

<pl-card header="&lt;code&gt;pl-file-download&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of providing a file download option.</p>
    </pl-question-panel>

    <pl-file-download file-name="data.txt" directory="clientFilesQuestion"></pl-file-download>
</pl-card>

<pl-card header="&lt;code&gt;pl-variable-output&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of displaying matrices using a code export.</p>
    </pl-question-panel>

    <pl-variable-output digits="3">
        <pl-variable params-name="matrixC">C</pl-variable>
        <pl-variable params-name="matrixD">D</pl-variable>
    </pl-variable-output>
</pl-card>

<pl-card header="&lt;code&gt;pl-matrix-latex&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of displaying a matrix using latex.</p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-graph&lt;/code&gt;">

    <pl-question-panel>
     <p>Example of a graphviz visualization.</p>
    </pl-question-panel>

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

    <pl-question-panel>
      <p>Example of a graphviz visualization.</p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-python-variable&lt;/code&gt;">

    <pl-question-panel>
     <p>Displaying contents of a Python dictionary.</p>
    </pl-question-panel>

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

<pl-card header="&lt;code&gt;pl-dataframe&lt;/code&gt;">

    <pl-question-panel>
      <p>Displaying contents of a Pandas DataFrame from Python.</p>
    </pl-question-panel>

    <pl-dataframe params-name="df" show-python="false"></pl-dataframe>
</pl-card>

<pl-card header="&lt;code&gt;pl-overlay&lt;/code&gt;">

    <p> What is the length of the hypotenuse? </p>

    <pl-overlay 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 aria-label="Hypotenuse length" answers-name="c" show-help-text="false" show-placeholder="false" size="1"></pl-number-input>
        </pl-location>
    </pl-overlay>
</pl-card>