<pl-question-panel>
<p>
Questions below were designed to showcase the different features of
<a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a>.
The goal of <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a>
is to allow users to enter <b>real or complex values</b> to be checked within a specific tolerance. The correct value of $c$ in all questions below is <samp>{{correct_answers.c_1}}</samp>.
</p>
</pl-question-panel>
<pl-card>
<pl-question-panel>
<p>Within this question, you can observe the default behavior of the <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a> element.
In particular, the default input field has help text as a placeholder as well as a question button and is set to use <code>"relabs"</code> to check the tolerance, which is a combination of relative (<code>"rtol"</code>) and absolute (<code>"atol"</code>) tolerances.</p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input aria-label="c" answers-name="c_1"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>This question modifies the default relative tolerance (of <code>1e-3</code>) and absolute tolerance (of <code>1e-8</code>) underneath <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a> element. Furthermore, we add a label to the front of the input field to specify what the field should receive. The attribute <code>initial-value</code> pre-fills the input box the first time it is rendered. Here the initial value is set to one of the given values rather than the correct answer, so students still need to compute the result themselves.</p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input answers-name="c_2" label="$c = $" rtol="1e-3" atol="1e-10" initial-value="{{params.a}}"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>Under this variant, we opt to change the default comparison of <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a> from relative and absolute tolerances (<code>comparison="relabs"</code>) to significant digits (<code>comparison="sigfig"</code>), which has a default of two digits. In addition, we've opted to add a suffix or a unit classification to the input via <code>suffix="units"</code>. </p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input answers-name="c_3" label="$c = $" comparison="sigfig" suffix="units"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>Another option is to set the comparison for <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a> to decimal digits (<code>"decdig"</code>) with a requirement for four digits (<code>digits="4"</code>). Furthermore, we changed the weight of this question to be more impactful vs the previous entries via <code>weight="2"</code>. Lastly, we allow students to enter complex numbers by setting <code>allow-complex="true"</code>. </p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input answers-name="c_4" label="$c = $" comparison="decdig" digits="4" weight="2" allow-complex="true" suffix="units"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>As another example, we remove the help popup box found in <a href="https://docs.prairielearn.com/elements/pl-number-input"><code>pl-number-input</code></a> by setting <code>show-help-text="false"</code>.</p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input answers-name="c_5" label="$c = $" show-help-text="false" suffix="units"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>This example shows the use of the attribute <code>size</code> to control the width of the input box. Enter below the coefficients
for a function $y = a x + b$ that has a slope equal to $2$ and intercepts the $y$-axis at $5$. Here
we also use <code>placeholder=""</code> for both input boxes and <code>show-help-text="false"</code>
for the first input box.</p>
</pl-question-panel>
$f = $<pl-number-input aria-label="x" answers-name="c_m" placeholder="" show-help-text="false" size="10"></pl-number-input> $ x \, +$
<pl-number-input aria-label="b" answers-name="c_b" placeholder="" size="10"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>This example allows the user to provide a blank value as a valid response. It uses the <code>allow-blank="true"</code> and <code>blank-value=""</code> options.</p>
<p>One of the roots of $c^2 = 0$ is $c=0$. Is there another root? Keep blank if there is no other root.</p>
</pl-question-panel>
<pl-number-input answers-name="c_6" label="$c = $" allow-blank="true" blank-value="" correct-answer=""></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>If <code>allow-blank="true"</code> is set, <code>blank-value</code> can also be set to any other accepted input value, such as <code>blank-value="1"</code> below.</p>
<p>What is the greatest common divisor of 7 and 9? If the answer is 1, you can keep it blank.</p>
</pl-question-panel>
<pl-number-input answers-name="c_6_blank" label="$c = $" allow-blank="true" blank-value="1" correct-answer="1"></pl-number-input>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
This question modifies the default format used to print the correct answer and submitted answer.
This option can be used, for example, to set the number of decimal places, force (or avoid)
scientific notation, or to include a sign in the result. We also set
<code>show-score="False"</code> to hide the score badge.
</p>
<p> Solve for the value of $c$ given $c^2 = {{params.a}}^2 + {{params.b}}^2$ </p>
</pl-question-panel>
<pl-number-input aria-label="c" answers-name="c_7" custom-format="+.5f" show-score="false"></pl-number-input>
</pl-card>