Skip to content

X
xblock-drag-and-drop-v2
Commit 3b99ed1f by Tim Krones
Options

Fix labels for input fields in Studio.

parent 3644354d
Showing with 38 additions and 43 deletions
drag_and_drop_v2/public/css/drag_and_drop_edit.css
......@@ -68,10 +68,17 @@
clear: both;
}
.xblock--drag-and-drop--editor .tab h3 {
.xblock--drag-and-drop--editor .tab h3,
.xblock--drag-and-drop--editor .tab .h3 {
margin: 20px 0 8px 0;
}
.xblock--drag-and-drop--editor .tab .h3 {
display: block;
font: inherit;
font-size: 100%;
}
.xblock--drag-and-drop--editor .tab-header,
.xblock--drag-and-drop--editor .tab-content,
.xblock--drag-and-drop--editor .tab-footer {
......
drag_and_drop_v2/public/js/drag_and_drop_edit.js
......@@ -77,8 +77,8 @@ function DragAndDropEditBlock(runtime, element, params) {
}
// Set the target image and bind its event handler:
$('.target-image-form .url-input', element).val(_fn.data.targetImg);
$('.target-image-form .description-input', element).val(_fn.data.targetImgDescription);
$('.target-image-form #background-url', element).val(_fn.data.targetImg);
$('.target-image-form #background-description', element).val(_fn.data.targetImgDescription);
_fn.build.$el.targetImage.load(_fn.build.form.zone.imageLoaded);
_fn.build.$el.targetImage.attr('src', params.target_img_expanded_url);
_fn.build.$el.targetImage.attr('alt', _fn.data.targetImgDescription);
......@@ -129,7 +129,7 @@ function DragAndDropEditBlock(runtime, element, params) {
.on('click', '.target-image-form button', function(e) {
e.preventDefault();
var new_img_url = $.trim($('.target-image-form .url-input', element).val());
var new_img_url = $.trim($('.target-image-form #background-url', element).val());
if (new_img_url) {
// We may need to 'expand' the URL before it will be valid.
// e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
......@@ -144,7 +144,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.data.targetImg = new_img_url;
var new_description = $.trim(
$('.target-image-form .description-input', element).val()
$('.target-image-form #background-description', element).val()
);
_fn.build.$el.targetImage.attr('alt', new_description);
_fn.data.targetImgDescription = new_description;
......@@ -321,8 +321,8 @@ function DragAndDropEditBlock(runtime, element, params) {
},
feedback: function($form) {
_fn.data.feedback = {
start: $form.find('.intro-feedback').val(),
finish: $form.find('.final-feedback').val()
start: $form.find('#intro-feedback').val(),
finish: $form.find('#final-feedback').val()
};
},
item: {
......@@ -437,13 +437,13 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.data.zones = _fn.build.form.zone.zoneObjects;
var data = {
'display_name': $element.find('.display-name').val(),
'display_name': $element.find('#display-name').val(),
'show_title': $element.find('.show-title').is(':checked'),
'weight': $element.find('.weight').val(),
'problem_text': $element.find('.problem-text').val(),
'weight': $element.find('#weight').val(),
'problem_text': $element.find('#problem-text').val(),
'show_problem_header': $element.find('.show-problem-header').is(':checked'),
'item_background_color': $element.find('.item-background-color').val(),
'item_text_color': $element.find('.item-text-color').val(),
'item_background_color': $element.find('#item-background-color').val(),
'item_text_color': $element.find('#item-text-color').val(),
'data': _fn.data,
};
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
......@@ -11,30 +11,30 @@
<section class="tab-content">
<form class="feedback-form">
<h3>{% trans "Problem title" %}</h3>
<input class="display-name" value="{{ self.display_name }}" />
<label class="h3" for="display-name">{% trans "Problem title" %}</label>
<input id="display-name" value="{{ self.display_name }}" />
<label title="{{ help_texts.show_title }}">
<input class="show-title" type="checkbox"
{% if self.show_title %}checked="checked"{% endif %}>
{% trans "Show title" %}
</label>
<h3>{% trans "Maximum score" %}</h3>
<input type="number" step="0.1" class="weight" value="1" value="{{ self.weight }}" />
<label class="h3" for="weight">{% trans "Maximum score" %}</label>
<input id="weight" type="number" step="0.1" value="{{ self.weight }}" />
<h3>{% trans "Problem text" %}</h3>
<textarea class="problem-text">{{ self.question_text }}</textarea>
<label class="h3" for="problem-text">{% trans "Problem text" %}</label>
<textarea id="problem-text">{{ self.question_text }}</textarea>
<label title="{{ help_texts.show_question_header }}">
<input class="show-problem-header" type="checkbox"
{% if self.show_question_header %}checked="checked"{% endif %}>
{% trans 'Show "Problem" heading' %}
</label>
<h3>{% trans "Introductory Feedback" %}</h3>
<textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea>
<label class="h3" for="intro-feedback">{% trans "Introductory Feedback" %}</label>
<textarea id="intro-feedback">{{ self.data.feedback.start }}</textarea>
<h3>{% trans "Final Feedback" %}</h3>
<textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea>
<label class="h3" for="final-feedback">{% trans "Final Feedback" %}</label>
<textarea id="final-feedback">{{ self.data.feedback.finish }}</textarea>
</form>
</section>
</div>
......@@ -45,18 +45,12 @@
</header>
<section class="tab-content">
<form class="target-image-form">
<h3 id="background-url-label">
{% trans "Background URL" %}
</h3>
<input type="text"
class="url-input"
aria-labelledby="background-url-label"
<label class="h3" for="background-url">{% trans "Background URL" %}</label>
<input id="background-url"
type="text"
placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
<h3 id="background-description-label">
{% trans "Background description" %}
</h3>
<textarea class="description-input"
aria-labelledby="background-description-label"
<label class="h3" for="background-description">{% trans "Background description" %}</label>
<textarea id="background-description"
aria-describedby="background-description-description"></textarea>
<div id="background-description-description" class="target-image-form-help">
{% blocktrans %}
......@@ -101,24 +95,18 @@
</header>
<section class="tab-content">
<form class="item-styles-form">
<h3 id="item-background-color-label">
{% trans "Background color" %}
</h3>
<input class="item-background-color"
<label class="h3" for="item-background-color">{% trans "Background color" %}</label>
<input id="item-background-color"
placeholder="e.g. blue or #0000ff"
value="{{ self.item_background_color}}"
aria-labelledby="item-background-color-label"
aria-describedby="item-background-color-description">
<div id="item-background-color-description" class="item-styles-form-help">
{{ help_texts.item_background_color }}
</div>
<h3 id="item-text-color-label">
{% trans "Text color" %}
</h3>
<input class="item-text-color"
<label class="h3" for="item-text-color">{% trans "Text color" %}</label>
<input id="item-text-color"
placeholder="e.g. white or #ffffff"
value="{{ self.item_text_color}}"
aria-labelledby="item-text-color-label"
aria-describedby="item-text-color-description">
<div id="item-text-color-description" class="item-styles-form-help">
{{ help_texts.item_text_color }}
......
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