TNL-6920 Component Editor Efficiency Improvements
* Enlarges component modal for easier editing * Allows display name to be edited in place * Improves markdown button labeling * Moves markdown cheatsheet to the edit modal, for quick reference
This commit is contained in:
Dave St.Germain
@@ -1,4 +1,5 @@
|
||||
<%! from django.utils.translation import ugettext as _ %>
|
||||
<%page expression_filter="h"/>
|
||||
<%namespace name='static' file='../static_content.html'/>
|
||||
|
||||
<% isLaTexProblem='source_code' in editable_metadata_fields and editable_metadata_fields['source_code']['explicitly_set'] and enable_latex_compiler %>
|
||||
@@ -18,6 +19,7 @@
|
||||
<span class="problem-editor-icon heading3">
|
||||
<img class="icon" src="${static.url('images/cms-editor_heading.png')}" alt="${_("Insert a heading")}">
|
||||
</span>
|
||||
${_("Heading")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -25,6 +27,7 @@
|
||||
<span class="problem-editor-icon multiple-choice">
|
||||
<img class="icon" src="${static.url('images/cms-editor_radio.png')}" alt="${_("Add a multiple choice question")}">
|
||||
</span>
|
||||
${_("Multiple Choice")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -32,6 +35,7 @@
|
||||
<span class="problem-editor-icon checks">
|
||||
<img class="icon" src="${static.url('images/cms-editor_checkbox.png')}" alt="${_("Add a question with checkboxes")}">
|
||||
</span>
|
||||
${_("Checkboxes")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -39,6 +43,7 @@
|
||||
<span class="problem-editor-icon string">
|
||||
<img class="icon" src="${static.url('images/cms-editor_text.png')}" alt="${_("Insert a text response")}">
|
||||
</span>
|
||||
${_("Text Input")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -46,6 +51,7 @@
|
||||
<span class="problem-editor-icon number">
|
||||
<img class="icon" src="${static.url('images/cms-editor_number.png')}" alt="${_("Insert a numerical response")}">
|
||||
</span>
|
||||
${_("Numerical Input")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -53,6 +59,7 @@
|
||||
<span class="problem-editor-icon dropdown">
|
||||
<img class="icon" src="${static.url('images/cms-editor_dropdown.png')}" alt="${_("Insert a dropdown response")}">
|
||||
</span>
|
||||
${_("Dropdown")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
@@ -60,103 +67,108 @@
|
||||
<span class="problem-editor-icon explanation">
|
||||
<img class="icon" src="${static.url('images/cms-editor_explanation.png')}" alt="${_("Add an explanation for this question")}">
|
||||
</span>
|
||||
${_("Explanation")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="editor-tabs">
|
||||
<li><button type="button" class="xml-tab advanced-toggle" data-tab="xml">${_("Advanced Editor")}</button></li>
|
||||
<li><button type="button" class="cheatsheet-toggle" data-tooltip="${_("Toggle Cheatsheet")}">?</button></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")}</h6>
|
||||
<div class="col sample heading-1">
|
||||
<img class="icon" src="${static.url('images/cms-editor_heading.png')}" alt="${_("Insert a heading")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea class="markdown-box">${markdown}</textarea>
|
||||
<article class="simple-editor-cheatsheet shown">
|
||||
<div class="cheatsheet-wrapper">
|
||||
<div class="row">
|
||||
<h5>${_("Markdown Help")}</h5>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample heading-1">
|
||||
<img class="icon" src="${static.url('images/cms-editor_heading.png')}" alt="${_("Insert a heading")}">
|
||||
<h6>${_("Heading")}</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>H3
|
||||
=====
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Multiple Choice")}</h6>
|
||||
<div class="col sample multiple-choice">
|
||||
<img class="icon" src="${static.url('images/cms-editor_radio.png')}" alt="${_("Add a multiple choice question")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample multiple-choice">
|
||||
<img class="icon" src="${static.url('images/cms-editor_radio.png')}" alt="${_("Add a multiple choice question")}">
|
||||
<h6>${_("Multiple Choice")}</h6>
|
||||
</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 class="icon" src="${static.url('images/cms-editor_checkbox.png')}" alt="${_("Add a question with checkboxes")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample check-multiple">
|
||||
<img class="icon" src="${static.url('images/cms-editor_checkbox.png')}" alt="${_("Add a question with checkboxes")}">
|
||||
<h6>${_("Checkboxes")}</h6>
|
||||
</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 class="icon" src="${static.url('images/cms-editor_text.png')}" alt="${_("Insert a text response")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample string-response">
|
||||
<img class="icon" src="${static.url('images/cms-editor_text.png')}" alt="${_("Insert a text response")}">
|
||||
<h6>${_("Text Input")}</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>= dog
|
||||
or= cat
|
||||
or= mouse</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample numerical-response">
|
||||
<img class="icon" src="${static.url('images/cms-editor_number.png')}" alt="${_("Insert a numerical response")}">
|
||||
<h6>${_("Numerical Input")}</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>= 3.14 +- 2%</code></pre>
|
||||
<pre><code>= [3.14, 3.15)</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample option-reponse">
|
||||
<img class="icon" src="${static.url('images/cms-editor_dropdown.png')}" alt="${_("Insert a dropdown response")}">
|
||||
<h6>${_("Dropdown")}</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[[wrong, (right)]]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Label")}</h6>
|
||||
<div class="col">
|
||||
<pre><code>>>What is the capital of Argentina?<<</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sample explanation">
|
||||
<img class="icon" src="${static.url('images/cms-editor_explanation.png')}" alt="${_("Add an explanation for this question")}">
|
||||
<h6>${_("Explanation")}</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Numerical Input")}</h6>
|
||||
<div class="col sample numerical-response">
|
||||
<img class="icon" src="${static.url('images/cms-editor_number.png')}" alt="${_("Insert a numerical response")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>= 3.14 +- 2%</code></pre>
|
||||
<pre><code>= [3.14, 3.15)</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Dropdown")}</h6>
|
||||
<div class="col sample option-reponse">
|
||||
<img class="icon" src="${static.url('images/cms-editor_dropdown.png')}" alt="${_("Insert a dropdown response")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[[wrong, (right)]]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Label")}</h6>
|
||||
<div class="col">
|
||||
<pre><code>>>What is the capital of Argentina?<<</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>${_("Explanation")}</h6>
|
||||
<div class="col sample explanation">
|
||||
<img class="icon" src="${static.url('images/cms-editor_explanation.png')}" alt="${_("Add an explanation for this question")}">
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
%endif
|
||||
</div>
|
||||
<textarea class="xml-box" rows="8" cols="40">${data}</textarea>
|
||||
</section>
|
||||
|
||||
<script type="text/template" id="simple-editor-cheatsheet">
|
||||
|
||||
</script>
|
||||
</div>
|
||||
<%include file="metadata-edit.html" />
|
||||
|
||||
Reference in New Issue
Block a user