<pl-question-panel>
<p>
Questions below were designed to showcase the different features of
<a href="https://docs.prairielearn.com/elements/pl-xss-safe"><code>pl-xss-safe</code></a>.
The goal of <code>pl-xss-safe</code>
is to allow instructors to display to students formatted HTML with potentially malicious source, such as student-submitted content.
</p>
</pl-question-panel>
<pl-hide-in-panel answer="true">
<hr>
<pl-question-panel>
<p>The typical use of this element would be to provide, in the submission panel, a formatted view of a student's HTML or Markdown code. In that case, a <code>pl-file-editor</code> or <code>pl-file-upload</code> element provides the interface for the user to input the code in the question panel, while the same file name is used in the <code>pl-xss-safe</code> element to identify the file.</p>
<p>What is the meaning of life?</p>
<pl-file-editor file-name="ans1.html" ace-mode="ace/mode/html">
</pl-file-editor>
</pl-question-panel>
<pl-submission-panel>
<pl-xss-safe submitted-file-name="ans1.html"></pl-xss-safe>
</pl-submission-panel>
<hr>
<pl-question-panel>
<p>The element <code>pl-xss-safe</code> can also be used to format Markdown code by using <code>language="markdown"</code>.</p>
<p>Note that the <code>preview</code> attribute of <code>pl-file-editor</code> also provides a similar functionality in the question panel, and also provides the same XSS filtering functionality as <code>pl-xss-safe</code>.</p>
<p>What is the meaning of life?</p>
<pl-file-editor file-name="ans2.md" ace-mode="ace/mode/markdown" preview="markdown">
</pl-file-editor>
</pl-question-panel>
<pl-submission-panel>
<pl-xss-safe submitted-file-name="ans2.md" language="markdown"></pl-xss-safe>
</pl-submission-panel>
<hr>
<pl-question-panel>
<p>The element <code>pl-xss-safe</code> also supports content that does not come from a file, using the <code>contents</code> attribute. A typical use-case for this processing is when a regular element is used that does not save its content in a file, such as a <code>pl-string-input</code>. In that case, <code>contents="{{submitted_answers.answers_name}}"</code> provides the content to be displayed.</p>
<p>Provide the input <code>This is a **bold** text</code> to make the word bold.</p>
</pl-question-panel>
<pl-string-input answers-name="ans3" aria-label="Markdown input"></pl-string-input>
<pl-submission-panel>
<pl-xss-safe contents="{{submitted_answers.ans3}}" language="markdown"></pl-xss-safe>
</pl-submission-panel>
</pl-hide-in-panel>
<pl-submission-panel>
<pl-card>
<p>These are the unsanitized original files for reference:</p>
<pl-file-preview></pl-file-preview>
</pl-card>
</pl-submission-panel>