<pl-question-panel>
<p>
This question illustrates different use cases for the
<a href="https://docs.prairielearn.com/elements/pl-matching"><code>pl-matching</code></a>
element.
</p>
</pl-question-panel>
<pl-card>
<pl-question-panel>
<p>
Example 1: Match each nation with its capital city. In this example,
the options are implicitly created by each statement's <code>match</code> attribute.
Only distractor options need to be added manually. All statements and options
are displayed by default.
</p>
</pl-question-panel>
<pl-matching answers-name="ex1">
<pl-statement match="Ottawa">Canada</pl-statement>
<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>Tijuana</pl-option>
<pl-option>Toronto</pl-option>
<pl-option>New York City</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 2: Setting <code>counter-type="full-text"</code> will hide the column of options. The dropdown list
next to each statement will contain the inner text of each option, rather than a counter.
</p>
</pl-question-panel>
<pl-matching answers-name="ex2" counter-type="full-text">
<pl-statement match="Matt"><pl-figure alt="headshot of Matt" file-name="matt.png" width="140" directory="clientFilesQuestion"></pl-figure></pl-statement>
<pl-statement match="Mariana"><pl-figure alt="headshot of Mariana" file-name="mariana.png" width="140" directory="clientFilesQuestion"></pl-figure></pl-statement>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 3: <code>blank="false"</code> removes the blank first entry in the dropdown list,
setting the default selection to the first option.
</p>
</pl-question-panel>
<pl-matching answers-name="ex3" blank="false">
<pl-statement match="Ottawa">Canada</pl-statement>
<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>Tijuana</pl-option>
<pl-option>Toronto</pl-option>
<pl-option>New York City</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 4: <code>number-statements</code> and <code>number-options</code>
determine how many statements and options are shown. Statements are sampled at random.
The options will always include each correct match for the sampled statements,
plus random distractors.
</p>
</pl-question-panel>
<pl-matching answers-name="ex4" number-statements="3" number-options="5">
<pl-statement match="Ottawa">Canada</pl-statement>
<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>Tijuana</pl-option>
<pl-option>Toronto</pl-option>
<pl-option>New York City</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 5: if <code>number-options</code> is smaller than the amount of options
required to match the sampled statements, None of the Above will be added.
</p>
</pl-question-panel>
<pl-matching answers-name="ex5" number-statements="3" number-options="2">
<pl-statement match="Ottawa">Canada</pl-statement>
<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>Tijuana</pl-option>
<pl-option>Toronto</pl-option>
<pl-option>New York City</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 6: the <code>counter-type</code> attribute indicates how options are identified. It can be set to <code>lower-alpha</code> (a, b, c, ...), <code>upper-alpha</code> (A, B, C, ...), or <code>decimal</code> (1, 2, 3).
</p>
</pl-question-panel>
<pl-matching answers-name="ex6" counter-type="decimal" number-statements="3" number-options="3">
<pl-statement match="Ottawa">Canada</pl-statement>
<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>Tijuana</pl-option>
<pl-option>Toronto</pl-option>
<pl-option>New York City</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 7: options can be added manually if they require more than
simple text (e.g., images, equations or formatting). In that case,
the <code>name</code> attribute of each <code>pl-option</code> must
match the corresponding <code>match</code> attribute of the
appropriate <code>pl-statement</code>.
</p>
</pl-question-panel>
<pl-matching answers-name="ex7">
<pl-statement match="golden">$\phi$</pl-statement>
<pl-statement match="e">$e$</pl-statement>
<pl-statement match="i">$i$</pl-statement>
<pl-option name="golden">$\cfrac{1+\sqrt{5}}{2}$</pl-option>
<pl-option name="e">$ \displaystyle \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^{n}$</pl-option>
<pl-option name="i">$\sqrt{-1}$</pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 8: HTML formatting and other PrairieLearn elements can be
used inside statements and options. If used in options, an explicit
<code>pl-option</code> must be defined with a <code>name</code>
attribute matching the corresponding <code>match</code> attribute of
the appropriate <code>pl-statement</code>.
</p>
</pl-question-panel>
<pl-matching answers-name="ex8">
<pl-statement match="filter"><pl-code language="python">list(filter(lambda item: item > 0, lst))</pl-code></pl-statement>
<pl-statement match="map"><pl-code language="python">list(map(lambda item: item * 2, lst))</pl-code></pl-statement>
<pl-statement match="product"><pl-code language="python">list(itertools.product(lst1, lst2))</pl-code></pl-statement>
<pl-option name="filter"><pl-code language="python">[item for item in lst if item > 0]</pl-code></pl-option>
<pl-option name="map"><pl-code language="python">[item * 2 for item in lst]</pl-code></pl-option>
<pl-option name="product"><pl-code language="python">[(a, b) for a in lst1 for b in lst2]</pl-code></pl-option>
</pl-matching>
</pl-card>
<pl-card>
<pl-question-panel>
<p>
Example 9: This example uses the <code>options-placement="bottom"</code> argument. This is useful for questions with long statements and options, which may wrap over multiple lines or cause formatting issues in the default "right" placement.
</p>
</pl-question-panel>
<pl-matching answers-name="ex9" options-placement="bottom">
<pl-statement match="The theory of relativity">Which theory revolutionized our understanding of space, time, and gravity?</pl-statement>
<pl-statement match="Quantum mechanics">What is a branch of physics that challenges classical intuition and underpins technologies like quantum computing?</pl-statement>
<pl-statement match="Artificial intelligence">What field of computer science encompasses machine learning, natural language processing, and computer vision?</pl-statement>
<pl-statement match="Genetic engineering">What biotechnology technique offers potential in treating genetic disorders and enhancing crop yields?</pl-statement>
<pl-option>Traditional computing</pl-option>
<pl-option>Data science</pl-option>
<pl-option>OPERA faster-than-light neutrino anomaly</pl-option>
<pl-option>String theory</pl-option>
</pl-matching>
</pl-card>