Skip to content

X
xblock-drag-and-drop-v2
Commit 9bc8c070 by Matjaz Gregoric Committed by Tim Krones
Options

Address review comments. 

- Change a elements to buttons.
- Don't use placedholers.
- Make font sizes more consistent.
- Fix color contrasts.
- Use location.html_id() built-in function.
parent 883e332e
Showing with 151 additions and 118 deletions
drag_and_drop_v2/drag_and_drop_v2.py
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
import copy import copy
import json import json
import urllib import urllib
import uuid
import webob import webob
from xblock.core import XBlock from xblock.core import XBlock
...@@ -95,7 +94,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin): ...@@ -95,7 +94,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
question_text = String( question_text = String(
display_name=_("Problem text"), display_name=_("Problem text"),
help=_("The description of the problem or instructions shown to the learner"), help=_("The description of the problem or instructions shown to the learner."),
scope=Scope.settings, scope=Scope.settings,
default="", default="",
) )
...@@ -109,21 +108,21 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin): ...@@ -109,21 +108,21 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
weight = Float( weight = Float(
display_name=_("Maximum score"), display_name=_("Maximum score"),
help=_("The maximum score the learner can receive for the problem"), help=_("The maximum score the learner can receive for the problem."),
scope=Scope.settings, scope=Scope.settings,
default=1, default=1,
) )
item_background_color = String( item_background_color = String(
display_name=_("Item background color"), display_name=_("Item background color"),
help=_("The background color of draggable items in the problem."), help=_("The background color of draggable items in the problem (e.g. 'blue' or '#0000ff')."),
scope=Scope.settings, scope=Scope.settings,
default="", default="",
) )
item_text_color = String( item_text_color = String(
display_name=_("Item text color"), display_name=_("Item text color"),
help=_("Text color to use for draggable items."), help=_("Text color to use for draggable items (e.g. 'white' or '#ffffff')."),
scope=Scope.settings, scope=Scope.settings,
default="", default="",
) )
...@@ -249,11 +248,12 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin): ...@@ -249,11 +248,12 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
""" """
js_templates = loader.load_unicode('/templates/html/js_templates.html') js_templates = loader.load_unicode('/templates/html/js_templates.html')
# A short random string to append to HTML element ID attributes to avoid multiple instances # Get a 'html_id' string that is unique for this block.
# of the DnDv2 block on the same page sharing the same ID values. # We append it to HTML element ID attributes to ensure multiple instances of the DnDv2 block
# on the same page don't share the same ID value.
# We avoid using ID attributes in preference to classes, but sometimes we still need IDs to # We avoid using ID attributes in preference to classes, but sometimes we still need IDs to
# connect 'for' and 'aria-describedby' attributes to the associated elements. # connect 'for' and 'aria-describedby' attributes to the associated elements.
id_suffix = uuid.uuid4().hex[:16] id_suffix = self.location.html_id()
js_templates = js_templates.replace('{{id_suffix}}', id_suffix) js_templates = js_templates.replace('{{id_suffix}}', id_suffix)
context = { context = {
'js_templates': js_templates, 'js_templates': js_templates,
......
drag_and_drop_v2/public/css/drag_and_drop_edit.css
...@@ -68,15 +68,19 @@ ...@@ -68,15 +68,19 @@
clear: both; clear: both;
} }
.xblock--drag-and-drop--editor .tab h3, .xblock--drag-and-drop--editor .tab h3 {
.xblock--drag-and-drop--editor .tab .h3 { font-size: 18px;
margin: 20px 0 8px 0;
} }
.xblock--drag-and-drop--editor .tab .h3 { .xblock--drag-and-drop--editor .tab h4,
.xblock--drag-and-drop--editor .tab .h4 {
display: block; display: block;
font: inherit; font-size: 16px;
font-size: 100%; margin: 20px 0 8px 0;
}
.xblock--drag-and-drop--editor .tab .items-form .item .row:first-of-type .h4 {
margin-top: 0;
} }
.xblock--drag-and-drop--editor .tab-header, .xblock--drag-and-drop--editor .tab-header,
...@@ -98,20 +102,37 @@ ...@@ -98,20 +102,37 @@
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
.xblock--drag-and-drop--editor .target-image-form input, .xblock--drag-and-drop--editor .target-image-form input {
.xblock--drag-and-drop--editor .target-image-form textarea {
width: 50%; width: 50%;
} }
.xblock--drag-and-drop--editor .target-image-form textarea {
width: 97%;
}
.xblock--drag-and-drop--editor .target-image-form textarea { .xblock--drag-and-drop--editor .target-image-form textarea {
display: block; display: block;
} }
.xblock--drag-and-drop--editor input,
.xblock--drag-and-drop--editor textarea {
box-sizing: border-box;
font-size: 14px;
background: #fff;
box-shadow: none;
padding: 6px 8px;
border: 1px solid #b2b2b2;
color: #4c4c4c;
}
.xblock--drag-and-drop--editor label > span { .xblock--drag-and-drop--editor label > span {
display: inline-block; display: inline-block;
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
.xblock--drag-and-drop--editor label.checkbox-label {
font-size: 14px;
}
/* Main Tab */ /* Main Tab */
.xblock--drag-and-drop--editor .feedback-tab input, .xblock--drag-and-drop--editor .feedback-tab input,
.xblock--drag-and-drop--editor .feedback-tab select { .xblock--drag-and-drop--editor .feedback-tab select {
...@@ -151,29 +172,36 @@ ...@@ -151,29 +172,36 @@
max-width: 100%; max-width: 100%;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row {
background-color: #b1d9f1;
padding: 1rem;
margin-bottom: 2rem;
}
.xblock--drag-and-drop--editor .zones-form .zone-row label { .xblock--drag-and-drop--editor .zones-form .zone-row label {
display: block; display: block;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row label > span { .xblock--drag-and-drop--editor .zones-form .zone-row label > span {
display: inline-block; display: inline-block;
width: 6em; font-size: 14px;
min-width: 8rem;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row label > input { .xblock--drag-and-drop--editor .zones-form .zone-row label > input {
width: 60%; width: 66%;
margin: 0 0 5px; margin: 0 0 5px;
line-height: 2.664rem; /* .title gets line-height from a Studio rule that does not apply to .description; line-height: 2.664rem; /* .title gets line-height from a Studio rule that does not apply to .description;
here we make sure that both input fields get the same value for line-height */ here we make sure that both input fields get the same value for line-height */
} }
.xblock--drag-and-drop--editor .zones-form .zone-row .alignment { .xblock--drag-and-drop--editor .zones-form .zone-row .layout {
margin-bottom: 15px; margin: 2rem 0;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row .layout label { .xblock--drag-and-drop--editor .zones-form .zone-row .layout label {
display: inline-block; display: inline-block;
width: 40%; width: 45%;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size, .xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size,
...@@ -183,14 +211,19 @@ ...@@ -183,14 +211,19 @@
line-height: inherit; line-height: inherit;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
margin-bottom: 15px;
}
.xblock--drag-and-drop--editor .feedback-form textarea { .xblock--drag-and-drop--editor .feedback-form textarea {
width: 99%; width: 99%;
height: 128px; height: 128px;
} }
.xblock--drag-and-drop--editor .form-help { .xblock--drag-and-drop--editor .form-help {
margin-top: 5px; margin: 0.5rem 0 1rem;
font-size: small; font-size: 12px;
} }
.xblock--drag-and-drop--editor .item-styles-form, .xblock--drag-and-drop--editor .item-styles-form,
...@@ -199,14 +232,9 @@ ...@@ -199,14 +232,9 @@
} }
.xblock--drag-and-drop--editor .items-form .item { .xblock--drag-and-drop--editor .items-form .item {
background-color: #8fcaec; background-color: #b1d9f1;
padding: 10px 0 1px; padding: 2rem;
margin: 15px 0; margin-bottom: 2rem;
}
.xblock--drag-and-drop--editor .items-form label,
.xblock--drag-and-drop--editor .items-form .h3 {
margin: 0 1%;
} }
.xblock--drag-and-drop--editor .items-form select { .xblock--drag-and-drop--editor .items-form select {
...@@ -220,7 +248,6 @@ ...@@ -220,7 +248,6 @@
.xblock--drag-and-drop--editor .items-form .item-text, .xblock--drag-and-drop--editor .items-form .item-text,
.xblock--drag-and-drop--editor .items-form .item-image-url { .xblock--drag-and-drop--editor .items-form .item-image-url {
width: 50%; width: 50%;
margin: 0 1%;
} }
.xblock--drag-and-drop--editor .items-form .item-width { .xblock--drag-and-drop--editor .items-form .item-width {
...@@ -235,16 +262,21 @@ ...@@ -235,16 +262,21 @@
text-align: left; text-align: left;
} }
.xblock--drag-and-drop--editor .items-form .row {
margin-bottom: 20px;
}
.xblock--drag-and-drop--editor .items-form .row.advanced { .xblock--drag-and-drop--editor .items-form .row.advanced {
display: none; display: none;
} }
.xblock--drag-and-drop--editor .items-form .row.advanced-link { .xblock--drag-and-drop--editor .items-form .row.advanced-link {
cursor: pointer; font-size: 12px;
padding-left: 1em; margin-top: 2em;
font-size: 80%; }
.xblock--drag-and-drop--editor .items-form .row.advanced-link button {
background: none;
border: none;
color: #4c4c4c;
}
.xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
content: '\25B6';
margin-right: 0.5em;
} }
.xblock--drag-and-drop-editor .items-form .zone-checkbox-row { .xblock--drag-and-drop-editor .items-form .zone-checkbox-row {
margin-bottom: 0px; margin-bottom: 0px;
...@@ -269,22 +301,11 @@ ...@@ -269,22 +301,11 @@
opacity: 0.5; opacity: 0.5;
} }
.xblock--drag-and-drop--editor .add-element { .xblock--drag-and-drop--editor .remove-zone,
text-decoration: none;
color: #1d5280;
}
.xblock--drag-and-drop--editor .remove-zone {
cursor: pointer;
float: right;
margin-top: 2px;
margin-right: 16px;
}
.xblock--drag-and-drop--editor .remove-item { .xblock--drag-and-drop--editor .remove-item {
cursor: pointer;
float: right; float: right;
margin-right: 16px; padding: 3px;
border-radius: 12px;
} }
.xblock--drag-and-drop--editor .icon { .xblock--drag-and-drop--editor .icon {
...@@ -292,9 +313,12 @@ ...@@ -292,9 +313,12 @@
height: 14px; height: 14px;
border-radius: 7px; border-radius: 7px;
background-color: #1d5280; background-color: #1d5280;
position: relative; display: inline-block;
float: left; }
margin: 0 5px 0 0;
.xblock--drag-and-drop--editor .remove-zone .icon,
.xblock--drag-and-drop--editor .remove-item .icon {
display: block;
} }
.xblock--drag-and-drop--editor .add-zone:hover, .xblock--drag-and-drop--editor .add-zone:hover,
...@@ -364,12 +388,3 @@ ...@@ -364,12 +388,3 @@
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
} }
.xblock--drag-and-drop--editor .remove-item .icon.remove {
background-color: #fff;
color: #0072a7; /* Override default color from Studio to ensure contrast is large enough */
}
.xblock--drag-and-drop--editor .remove-item .icon.remove:before,
.xblock--drag-and-drop--editor .remove-item .icon.remove:after {
background-color: #1d5280;
}
drag_and_drop_v2/public/js/drag_and_drop_edit.js
...@@ -222,7 +222,7 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -222,7 +222,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.item.add(); _fn.build.form.item.add();
}) })
.on('click', '.remove-item', _fn.build.form.item.remove) .on('click', '.remove-item', _fn.build.form.item.remove)
.on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings) .on('click', '.advanced-link button', _fn.build.form.item.showAdvancedSettings)
.on('input', '.item-image-url', _fn.build.form.item.imageURLChanged); .on('input', '.item-image-url', _fn.build.form.item.imageURLChanged);
}, },
form: { form: {
...@@ -430,7 +430,7 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -430,7 +430,7 @@ function DragAndDropEditBlock(runtime, element, params) {
} }
ctx.checkboxes = _fn.build.form.createCheckboxes(ctx.zones); ctx.checkboxes = _fn.build.form.createCheckboxes(ctx.zones);
_fn.build.form.item.count++; ctx.index = _fn.build.form.item.count++;
$form.append(tpl(ctx)); $form.append(tpl(ctx));
_fn.build.form.item.enableDelete(); _fn.build.form.item.enableDelete();
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
...@@ -12,18 +12,18 @@ ...@@ -12,18 +12,18 @@
<section class="tab-content"> <section class="tab-content">
<form class="feedback-form"> <form class="feedback-form">
<label class="h3"> <label class="h4">
<span>{% trans fields.display_name.display_name %}</span> <span>{% trans fields.display_name.display_name %}</span>
<input class="display-name" value="{{ self.display_name }}" /> <input class="display-name" value="{{ self.display_name }}" />
</label> </label>
<label title="{% trans fields.show_title.help %}"> <label class="checkbox-label" title="{% trans fields.show_title.help %}">
<input class="show-title" type="checkbox" <input class="show-title" type="checkbox"
{% if self.show_title %}checked="checked"{% endif %}> {% if self.show_title %}checked="checked"{% endif %}>
{% trans fields.show_title.display_name %} {% trans fields.show_title.display_name %}
<span class="sr">{% trans fields.show_title.help %}</span> <span class="sr">{% trans fields.show_title.help %}</span>
</label> </label>
<label class="h3"> <label class="h4">
<span>{% trans fields.mode.display_name %}</span> <span>{% trans fields.mode.display_name %}</span>
<select class="problem-mode" aria-describedby="problem-mode-description-{{id_suffix}}"> <select class="problem-mode" aria-describedby="problem-mode-description-{{id_suffix}}">
{% for field_value in fields.mode.values %} {% for field_value in fields.mode.values %}
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
{% trans fields.mode.help %} {% trans fields.mode.help %}
</div> </div>
<label class="h3 assessment-setting"> <label class="h4 assessment-setting">
{% trans fields.max_attempts.display_name %} <span>{% trans fields.max_attempts.display_name %}</span>
<input class="max-attempts" <input class="max-attempts"
type="number" type="number"
min="1" min="1"
...@@ -50,16 +50,16 @@ ...@@ -50,16 +50,16 @@
{% trans fields.max_attempts.help %} {% trans fields.max_attempts.help %}
</div> </div>
<label class="h3"> <label class="h4">
<span>{% trans fields.weight.display_name %}</span> <span>{% trans fields.weight.display_name %}</span>
<input class="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" /> <input class="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" />
</label> </label>
<label class="h3"> <label class="h4">
<span>{% trans fields.question_text.display_name %}</span> <span>{% trans fields.question_text.display_name %}</span>
<textarea class="problem-text">{{ self.question_text }}</textarea> <textarea class="problem-text">{{ self.question_text }}</textarea>
</label> </label>
<label> <label class="checkbox-label">
<input class="show-problem-header" <input class="show-problem-header"
type="checkbox" type="checkbox"
aria-describedby="show-problem-header-description-{{id_suffix}}" aria-describedby="show-problem-header-description-{{id_suffix}}"
...@@ -70,12 +70,12 @@ ...@@ -70,12 +70,12 @@
{% trans fields.show_question_header.help %} {% trans fields.show_question_header.help %}
</div> </div>
<label class="h3"> <label class="h4">
<span>{% trans "Introductory Feedback" %}</span> <span>{% trans "Introductory Feedback" %}</span>
<textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea> <textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea>
</label> </label>
<label class="h3"> <label class="h4">
<span>{% trans "Final Feedback" %}</span> <span>{% trans "Final Feedback" %}</span>
<textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea> <textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea>
</label> </label>
...@@ -89,16 +89,19 @@ ...@@ -89,16 +89,19 @@
</header> </header>
<section class="tab-content"> <section class="tab-content">
<form class="target-image-form"> <form class="target-image-form">
<label class="h3" for="background-url-{{id_suffix}}"> <label class="h4" for="background-url-{{id_suffix}}">
<span>{% trans "Background URL" %}</span> <span>{% trans "Background URL" %}</span>
</label> </label>
<input class="background-url" <input class="background-url"
id="background-url-{{id_suffix}}" id="background-url-{{id_suffix}}"
type="text" type="text"
placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}"> aria-describedby="background-url-{{id_suffix}}" />
</label> </label>
<button class="btn">{% trans "Change background" %}</button> <button class="btn">{% trans "Change background" %}</button>
<label class="h3"> <div id="background-url-description-{{id_suffix}}" class="form-help">
{% trans "For example, 'http://example.com/background.png' or '/static/background.png'." %}
</div>
<label class="h4">
<span>{% trans "Background description" %}</span> <span>{% trans "Background description" %}</span>
<textarea required class="background-description" <textarea required class="background-description"
aria-describedby="background-description-description-{{id_suffix}}"></textarea> aria-describedby="background-description-description-{{id_suffix}}"></textarea>
...@@ -114,25 +117,29 @@ ...@@ -114,25 +117,29 @@
</section> </section>
<section class="tab-content"> <section class="tab-content">
<form class="display-labels-form"> <form class="display-labels-form">
<h3>{% trans "Zone labels" %}</h3> <h4>{% trans "Zone labels" %}</h4>
<label> <label class="checkbox-label">
<span>{% trans "Display label names on the image" %}:</span>
<input name="display-labels" class="display-labels" type="checkbox" /> <input name="display-labels" class="display-labels" type="checkbox" />
<span>{% trans "Display label names on the image" %}</span>
</label> </label>
</form> </form>
<form class="display-borders-form"> <form class="display-borders-form">
<h3>{% trans "Zone borders" %}</h3> <h4>{% trans "Zone borders" %}</h4>
<label> <label class="checkbox-label">
<span>{% trans "Display zone borders on the image" %}:</span>
<input name="display-borders" class="display-borders" type="checkbox" /> <input name="display-borders" class="display-borders" type="checkbox" />
<span>{% trans "Display zone borders on the image" %}</span>
</label> </label>
</form> </form>
</section> </section>
<section class="tab-content"> <section class="tab-content">
<h4>{% trans "Zone definitions" %}</h4>
<div class="zone-editor"> <div class="zone-editor">
<div class="controls"> <div class="controls">
<form class="zones-form"></form> <form class="zones-form"></form>
<a href="#" class="add-zone add-element"><div class="icon add"></div>{% trans "Add a zone" %}</a> <button class="btn add-zone add-element">
<span class="icon add"></span>
{% trans "Add a zone" %}
</button>
</div> </div>
<div class="target"> <div class="target">
<img class="target-img"> <img class="target-img">
...@@ -149,20 +156,18 @@ ...@@ -149,20 +156,18 @@
</header> </header>
<section class="tab-content"> <section class="tab-content">
<form class="item-styles-form"> <form class="item-styles-form">
<label class="h3"> <label class="h4">
<span>{% trans fields.item_background_color.display_name %}</span> <span>{% trans fields.item_background_color.display_name %}</span>
<input class="item-background-color" <input class="item-background-color"
placeholder="{% blocktrans with example1='blue' example2='#0000ff' %}e.g. {{example1}} or {{example2}}{% endblocktrans %}"
value="{{ self.item_background_color }}" value="{{ self.item_background_color }}"
aria-describedby="item-background-color-description-{{id_suffix}}"> aria-describedby="item-background-color-description-{{id_suffix}}">
</label> </label>
<div id="item-background-color-description-{{id_suffix}}" class="form-help"> <div id="item-background-color-description-{{id_suffix}}" class="form-help">
{% trans fields.item_background_color.help %} {% trans fields.item_background_color.help %}
</div> </div>
<label class="h3"> <label class="h4">
<span>{% trans fields.item_text_color.display_name %}</span> <span>{% trans fields.item_text_color.display_name %}</span>
<input class="item-text-color" <input class="item-text-color"
placeholder="{% blocktrans with example1='white' example2='#ffffff' %}e.g. {{example1}} or {{example2}}{% endblocktrans %}"
value="{{ self.item_text_color}}" value="{{ self.item_text_color}}"
aria-describedby="item-text-color-description-{{id_suffix}}"> aria-describedby="item-text-color-description-{{id_suffix}}">
</label> </label>
...@@ -172,11 +177,13 @@ ...@@ -172,11 +177,13 @@
</form> </form>
</section> </section>
<section class="tab-content"> <section class="tab-content">
<h4>{% trans "Item definitions" %}</h4>
<form class="items-form"></form> <form class="items-form"></form>
<button class="btn add-item add-element">
<span class="icon add"></span>
{% trans "Add an item" %}
</button>
</section> </section>
<footer class="tab-footer">
<a href="#" class="add-item add-element"><div class="icon add"></div>{% trans "Add an item" %}</a>
</footer>
</div> </div>
</section> </section>
......
drag_and_drop_v2/templates/html/js_templates.html
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
</script> </script>
<script class="zone-input-tpl" type="text/html"> <script class="zone-input-tpl" type="text/html">
<div class="zone-row" data-uid="{{zone.uid}}"> <fieldset class="zone-row" data-uid="{{zone.uid}}">
<a class="remove-zone hidden" title="{{i18n 'Remove zone'}}"> <button type="button" class="btn remove-zone hidden" title="{{i18n 'Remove zone'}}">
<div class="icon remove"></div> <span class="icon remove"></span>
</a> </button>
<label> <label>
<span>{{i18n "Title"}}</span> <span>{{i18n "Title"}}</span>
<input type="text" <input type="text"
...@@ -26,8 +26,11 @@ ...@@ -26,8 +26,11 @@
<input type="text" <input type="text"
class="zone-description" class="zone-description"
value="{{ zone.description }}" value="{{ zone.description }}"
placeholder="{{i18n 'Describe this zone to non-visual users'}}" aria-describedby="zone-description-description-{{zone.uid}}-{{id_suffix}}"
required /> required />
<div id="zone-description-description-{{zone.uid}}-{{id_suffix}}" class="form-help">
{{i18n "Describe this zone to non-visual users."}}
</div>
</label> </label>
<div class="layout"> <div class="layout">
<label> <label>
...@@ -83,12 +86,12 @@ ...@@ -83,12 +86,12 @@
{{i18n "Align dropped items to the left, center, or right. Default is no alignment (items stay exactly where the user drops them)."}} {{i18n "Align dropped items to the left, center, or right. Default is no alignment (items stay exactly where the user drops them)."}}
</div> </div>
</div> </div>
</div> </fieldset>
</script> </script>
<script class="zone-checkbox-tpl" type="text/html"> <script class="zone-checkbox-tpl" type="text/html">
<div class="zone-checkbox-row"> <div class="zone-checkbox-row">
<label> <label class="checkbox-label">
<input type="checkbox" <input type="checkbox"
value="{{ zoneUid }}" value="{{ zoneUid }}"
class="zone-checkbox" class="zone-checkbox"
...@@ -99,69 +102,77 @@ ...@@ -99,69 +102,77 @@
</script> </script>
<script class="item-input-tpl" type="text/html"> <script class="item-input-tpl" type="text/html">
<div class="item"> <fieldset class="item">
<button type="button" class="btn remove-item hidden" title="{{i18n 'Remove item'}}">
<span class="icon remove"></span>
</button>
<div class="row"> <div class="row">
<label class="h3"> <label class="h4">
{{i18n "Text"}} {{i18n "Text"}}
<input type="text" <input type="text"
placeholder="{{i18n 'Use text that is clear and descriptive of the item to be placed'}}" aria-describedby="item-text-description-{{index}}-{{id_suffix}}"
class="item-text" class="item-text"
value="{{ displayName }}" /> value="{{ displayName }}" />
</label> </label>
<a class="remove-item hidden"> <div id="item-text-description-{{index}}-{{id_suffix}}" class="form-help">
<div class="icon remove"></div> {{i18n "Use text that is clear and descriptive of the item to be placed."}}
</a> </div>
</div> </div>
<div class="row"> <div class="row">
<fieldset> <fieldset>
<legend class="h3"> <legend class="h4">
{{ i18n "Zones" }} {{ i18n "Zones" }}
</legend> </legend>
{{ checkboxes }} {{ checkboxes }}
</fieldset> </fieldset>
</div> </div>
<div class="row"> <div class="row">
<label class="h3"> <label class="h4">
{{i18n "Image URL (alternative to the text)"}} {{i18n "Image URL (alternative to the text)"}}
<input type="text" <input type="text"
placeholder="{{i18n 'For example, http://example.com/image.png or /static/image.png'}}" aria-describedby="item-image-url-description-{{index}}-{{id_suffix}}"
class="item-image-url" class="item-image-url"
value="{{ imageURL }}" /> value="{{ imageURL }}" />
</label> </label>
<div id="item-image-url-description-{{index}}-{{id_suffix}}" class="form-help">
{{i18n "For example, 'http://example.com/image.png' or '/static/image.png'."}}
</div>
</div> </div>
<div class="row"> <div class="row">
<label class="h3"> <label class="h4">
<span>{{i18n "Image description (should provide sufficient information to place the item even if the image did not load)"}}</span> <span>{{i18n "Image description (should provide sufficient information to place the item even if the image did not load)"}}</span>
<textarea {{#if imageURL}}required{{/if}} class="item-image-description">{{ imageDescription }}</textarea> <textarea {{#if imageURL}}required{{/if}} class="item-image-description">{{ imageDescription }}</textarea>
</label> </label>
</div> </div>
<div class="row"> <div class="row">
<label class="h3"> <label class="h4">
<span>{{i18n "Success Feedback"}}</span> <span>{{i18n "Success Feedback"}}</span>
<textarea class="success-feedback">{{ feedback.correct }}</textarea> <textarea class="success-feedback">{{ feedback.correct }}</textarea>
</label> </label>
</div> </div>
<div class="row"> <div class="row">
<label class="h3"> <label class="h4">
<span>{{i18n "Error Feedback"}}</span> <span>{{i18n "Error Feedback"}}</span>
<textarea class="error-feedback">{{ feedback.incorrect }}</textarea> <textarea class="error-feedback">{{ feedback.incorrect }}</textarea>
</label> </label>
</div> </div>
<div class="row advanced-link"> <div class="row advanced-link">
<a>{{i18n "Show advanced settings" }}</a> <button type="button">{{i18n "Show advanced settings" }}</button>
</div> </div>
<div class="row advanced"> <div class="row advanced">
<label> <label class="h4">
<span> <span>{{i18n "Preferred width"}}</span>
{{i18n "Preferred width as a percentage of the background image width (or blank for automatic width):"}}
</span>
<input type="number" <input type="number"
class="item-width" class="item-width"
value="{{ singleDecimalFloat widthPercent }}" value="{{ singleDecimalFloat widthPercent }}"
aria-describedby="item-width-description-{{index}}-{{id_suffix}}"
step="0.1" step="0.1"
min="1" min="1"
max="99" />% max="99" />%
</label> </label>
<div id="item-width-description-{{index}}-{{id_suffix}}" class="form-help">
{{i18n "Specify preferred width as percentage of the background image width. Leave blank for automatic width."}}
</div>
</div> </div>
</div> </fieldset>
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment