Skip to content

X
xblock-drag-and-drop-v2
Commit 142b49ce by Matjaz Gregoric Committed by Tim Krones
Options

Refactor studio edit template. 

- Use field.display_name instead of hardcoding field names in the
  template.
- Display help text under each field instead of putting it in the title
  attribute.
parent 7b5bc7d5
Showing with 35 additions and 27 deletions
drag_and_drop_v2/drag_and_drop_v2.py
...@@ -106,7 +106,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin): ...@@ -106,7 +106,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
) )
weight = Float( weight = Float(
display_name=_("Weight"), 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,
......
drag_and_drop_v2/public/css/drag_and_drop_edit.css
...@@ -165,9 +165,7 @@ ...@@ -165,9 +165,7 @@
height: 128px; height: 128px;
} }
.xblock--drag-and-drop--editor .zones-form .zones-form-help, .xblock--drag-and-drop--editor .form-help {
.xblock--drag-and-drop--editor .target-image-form .target-image-form-help,
.xblock--drag-and-drop--editor .item-styles-form .item-styles-form-help {
margin-top: 5px; margin-top: 5px;
font-size: small; font-size: small;
} }
...@@ -222,6 +220,7 @@ ...@@ -222,6 +220,7 @@
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;
padding-left: 1em; padding-left: 1em;
font-size: 80%; font-size: 80%;
} }
...@@ -254,14 +253,15 @@ ...@@ -254,14 +253,15 @@
} }
.xblock--drag-and-drop--editor .remove-zone { .xblock--drag-and-drop--editor .remove-zone {
cursor: pointer;
float: right; float: right;
margin-top: 2px; margin-top: 2px;
margin-right: 16px; margin-right: 16px;
} }
.xblock--drag-and-drop--editor .remove-item { .xblock--drag-and-drop--editor .remove-item {
cursor: pointer;
float: right; float: right;
display: inline-block;
margin-right: 16px; margin-right: 16px;
} }
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
...@@ -12,45 +12,53 @@ ...@@ -12,45 +12,53 @@
<section class="tab-content"> <section class="tab-content">
<form class="feedback-form"> <form class="feedback-form">
<label class="h3" for="display-name">{% trans "Problem title" %}</label> <label class="h3" for="display-name">{% trans self.fields.display_name.display_name %}</label>
<input id="display-name" value="{{ self.display_name }}" /> <input id="display-name" value="{{ self.display_name }}" />
<label title="{{ help_texts.show_title }}"> <label title="{{ help_texts.show_title }}">
<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 "Show title" %} {% trans self.fields.show_title.display_name %}
<span class="sr">{{ help_texts.show_title }}</span> <span class="sr">{{ help_texts.show_title }}</span>
</label> </label>
<label class="h3" for="problem-mode" title="{{ help_texts.mode }}">{% trans "Problem mode" %}</label> <label class="h3" for="problem-mode">{% trans self.fields.mode.display_name %}</label>
<select id="problem-mode"> <select id="problem-mode" aria-describedby="problem-mode-description">
{% for field_value in field_values.mode %} {% for field_value in field_values.mode %}
<option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}> <option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}>
{{ field_value.display_name }} {{ field_value.display_name }}
</option> </option>
{% endfor %} {% endfor %}
</select> </select>
<span class="sr">{{ help_texts.mode }}</span> <div id="problem-mode-description" class="form-help">
{{ help_texts.mode }}
</div>
<label class="h3 setting assessment" title="{{ help_texts.max_attempts }}"> <label class="h3 setting assessment">
{% trans "Maximum attempts" %} {% trans self.fields.max_attempts.display_name %}
<input class="nested-input max-attempts" <input class="nested-input max-attempts"
type="number" type="number"
min="1" min="1"
step="1" step="1"
aria-describedby="max-attempts-description"
{% if self.max_attempts %}value="{{ self.max_attempts }}"{% endif %} /> {% if self.max_attempts %}value="{{ self.max_attempts }}"{% endif %} />
</label> </label>
<div id="max-attempts-description" class="form-help">
{{ help_texts.max_attempts }}
</div>
<label class="h3" for="weight">{% trans "Maximum score" %}</label> <label class="h3" for="weight">{% trans self.fields.weight.display_name %}</label>
<input id="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" /> <input id="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" />
<label class="h3" for="problem-text">{% trans "Problem text" %}</label> <label class="h3" for="problem-text">{% trans self.fields.question_text.display_name %}</label>
<textarea id="problem-text">{{ self.question_text }}</textarea> <textarea id="problem-text">{{ self.question_text }}</textarea>
<label title="{{ help_texts.show_question_header }}"> <label>
<input class="show-problem-header" type="checkbox" <input class="show-problem-header" type="checkbox" aria-describedby="show-problem-header-description"
{% if self.show_question_header %}checked="checked"{% endif %}> {% if self.show_question_header %}checked="checked"{% endif %}>
{% trans 'Show "Problem" heading' %} {% trans self.fields.show_question_header.display_name %}
<span class="sr">{{ help_texts.show_question_header }}</span>
</label> </label>
<div id="show-problem-header-description" class="form-help">
{{ help_texts.show_question_header }}
</div>
<label class="h3" for="intro-feedback">{% trans "Introductory Feedback" %}</label> <label class="h3" for="intro-feedback">{% trans "Introductory Feedback" %}</label>
<textarea id="intro-feedback">{{ self.data.feedback.start }}</textarea> <textarea id="intro-feedback">{{ self.data.feedback.start }}</textarea>
...@@ -75,7 +83,7 @@ ...@@ -75,7 +83,7 @@
<label class="h3" for="background-description">{% trans "Background description" %}</label> <label class="h3" for="background-description">{% trans "Background description" %}</label>
<textarea required id="background-description" <textarea required id="background-description"
aria-describedby="background-description-description"></textarea> aria-describedby="background-description-description"></textarea>
<div id="background-description-description" class="target-image-form-help"> <div id="background-description-description" class="form-help">
{% blocktrans %} {% blocktrans %}
Please provide a description of the image for non-visual users. Please provide a description of the image for non-visual users.
The description should provide sufficient information to allow anyone The description should provide sufficient information to allow anyone
...@@ -117,20 +125,20 @@ ...@@ -117,20 +125,20 @@
</header> </header>
<section class="tab-content"> <section class="tab-content">
<form class="item-styles-form"> <form class="item-styles-form">
<label class="h3" for="item-background-color">{% trans "Background color" %}</label> <label class="h3" for="item-background-color">{% trans self.fields.item_background_color.display_name %}</label>
<input id="item-background-color" <input id="item-background-color"
placeholder="e.g. blue or #0000ff" placeholder="e.g. blue or #0000ff"
value="{{ self.item_background_color}}" value="{{ self.item_background_color }}"
aria-describedby="item-background-color-description"> aria-describedby="item-background-color-description">
<div id="item-background-color-description" class="item-styles-form-help"> <div id="item-background-color-description" class="form-help">
{{ help_texts.item_background_color }} {{ help_texts.item_background_color }}
</div> </div>
<label class="h3" for="item-text-color">{% trans "Text color" %}</label> <label class="h3" for="item-text-color">{% trans self.fields.item_text_color.display_name %}</label>
<input id="item-text-color" <input id="item-text-color"
placeholder="e.g. white or #ffffff" placeholder="e.g. white or #ffffff"
value="{{ self.item_text_color}}" value="{{ self.item_text_color}}"
aria-describedby="item-text-color-description"> aria-describedby="item-text-color-description">
<div id="item-text-color-description" class="item-styles-form-help"> <div id="item-text-color-description" class="form-help">
{{ help_texts.item_text_color }} {{ help_texts.item_text_color }}
</div> </div>
</form> </form>
......
drag_and_drop_v2/templates/html/js_templates.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
class="title" class="title"
value="{{ zone.title }}" value="{{ zone.title }}"
required /> required />
<a href="#" class="remove-zone hidden"> <a class="remove-zone hidden">
<div class="icon remove"></div> <div class="icon remove"></div>
</a> </a>
<label for="zone-{{index}}-description">{{i18n "Description"}}</label> <label for="zone-{{index}}-description">{{i18n "Description"}}</label>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
class="item-text" class="item-text"
value="{{ displayName }}" /> value="{{ displayName }}" />
</label> </label>
<a href="#" class="remove-item hidden"> <a class="remove-item hidden">
<div class="icon remove"></div> <div class="icon remove"></div>
</a> </a>
</div> </div>
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
class="error-feedback">{{ feedback.incorrect }}</textarea> class="error-feedback">{{ feedback.incorrect }}</textarea>
</div> </div>
<div class="row advanced-link"> <div class="row advanced-link">
<a href="#">{{i18n "Show advanced settings" }}</a> <a>{{i18n "Show advanced settings" }}</a>
</div> </div>
<div class="row advanced"> <div class="row advanced">
<label> <label>
......
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