110 lines
4.4 KiB
HTML
110 lines
4.4 KiB
HTML
<div class="wrapper-comp-editor" id="editor-tab">
|
|
<section class="problem-editor editor">
|
|
<div class="row">
|
|
%if enable_markdown:
|
|
<div class="editor-bar">
|
|
<ul class="format-buttons">
|
|
<li><a href="#" class="header-button" data-tooltip="Heading 1"><span
|
|
class="problem-editor-icon heading1"></span></a></li>
|
|
<li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span
|
|
class="problem-editor-icon multiple-choice"></span></a></li>
|
|
<li><a href="#" class="checks-button" data-tooltip="Checkboxes"><span
|
|
class="problem-editor-icon checks"></span></a></li>
|
|
<li><a href="#" class="string-button" data-tooltip="Text Input"><span
|
|
class="problem-editor-icon string"></span></a></li>
|
|
<li><a href="#" class="number-button" data-tooltip="Numerical Input"><span
|
|
class="problem-editor-icon number"></span></a></li>
|
|
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span
|
|
class="problem-editor-icon dropdown"></span></a></li>
|
|
<li><a href="#" class="explanation-button" data-tooltip="Explanation"><span
|
|
class="problem-editor-icon explanation"></span></a></li>
|
|
</ul>
|
|
<ul class="editor-tabs">
|
|
<li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">Advanced Editor</a></li>
|
|
<li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
|
|
</ul>
|
|
</div>
|
|
<textarea class="markdown-box">${markdown | h}</textarea>
|
|
%endif
|
|
<textarea class="xml-box" rows="8" cols="40">${data | h}</textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<script type="text/template" id="simple-editor-cheatsheet">
|
|
<article class="simple-editor-cheatsheet">
|
|
<div class="cheatsheet-wrapper">
|
|
<div class="row">
|
|
<h6>Heading 1</h6>
|
|
<div class="col sample heading-1">
|
|
<img src="/static/img/header-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>H1
|
|
=====
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Multiple Choice</h6>
|
|
<div class="col sample multiple-choice">
|
|
<img src="/static/img/choice-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>( ) red
|
|
( ) green
|
|
(x) blue</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Checkboxes</h6>
|
|
<div class="col sample check-multiple">
|
|
<img src="/static/img/multi-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>[x] earth
|
|
[ ] wind
|
|
[x] water</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Text Input</h6>
|
|
<div class="col sample string-response">
|
|
<img src="/static/img/string-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>= dog</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Numerical Input</h6>
|
|
<div class="col sample numerical-response">
|
|
<img src="/static/img/number-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>= 3.14 +- 2%</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Dropdown</h6>
|
|
<div class="col sample option-reponse">
|
|
<img src="/static/img/select-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>[[wrong, (right)]]</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h6>Explanation</h6>
|
|
<div class="col sample explanation">
|
|
<img src="/static/img/explanation-example.png" />
|
|
</div>
|
|
<div class="col">
|
|
<pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</script>
|
|
</div>
|
|
<%include file="metadata-edit.html" />
|