Commit 6d42da9e by Tim Krones

Merge pull request #52 from open-craft/update-screenshots

Update screenshots
parents d31dce44 b4b1f7d5
...@@ -9,8 +9,10 @@ The editor is fully guided. Features include: ...@@ -9,8 +9,10 @@ The editor is fully guided. Features include:
* custom target image * custom target image
* free target zone positioning and sizing * free target zone positioning and sizing
* custom zone labels * custom zone labels
* ability to show or hide zone borders
* custom text and background colors for items * custom text and background colors for items
* image items * image items
* items prompting for additional (numerical) input after being dropped
* decoy items that don't have a zone * decoy items that don't have a zone
* feedback popups for both correct and incorrect attempts * feedback popups for both correct and incorrect attempts
* introductory and final feedback * introductory and final feedback
...@@ -21,12 +23,12 @@ refreshes. All checking and record keeping is done on the server side. ...@@ -21,12 +23,12 @@ refreshes. All checking and record keeping is done on the server side.
The following screenshot shows the Drag and Drop XBlock rendered The following screenshot shows the Drag and Drop XBlock rendered
inside the edX LMS before the user starts solving the problem: inside the edX LMS before the user starts solving the problem:
![Student view start](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/student-view-start.png) ![Student view start](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/student-view-start.png)
This screenshot shows the XBlock after the student successfully 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://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/student-view-finish.png) ![Student view finish](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/student-view-finish.png)
Installation Installation
------------ ------------
...@@ -92,32 +94,35 @@ Usage ...@@ -92,32 +94,35 @@ Usage
The Drag and Drop XBlock features an interactive editor. Add the Drag 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://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view.png) ![Edit view](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view.png)
In the first step, you can set some basic properties of the component, In the first step, you can set some basic properties of the component,
such as the title, the question text to render above the background such as the title, the maximum score, the question text to render
image, the introductory feedback (shown initially) and the final above the background image, the introductory feedback (shown
feedback (shown after the student successfully completes the drag and initially), and the final feedback (shown after the student
drop problem). successfully completes the drag and drop problem).
![Drop zone edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view-zones.png) ![Drop zone edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view-zones.png)
In the next step, you set the background image URL and define the In the next step, you set the URL and description for the background
properties of the drop zones. The properties include the title/text image and define the properties of the drop zones. For each zone you
rendered in the drop zone, the zone's dimensions and position can specify the text that should be rendered inside it (the "zone
coordinates. In this step you can also specify whether you would like label"), how wide and tall it should be, and where it should be placed
zone labels to be shown to students or not, as well as whether or not on the background image. In this step you can also specify whether you
to display borders outlining the zones. It is possible to define an would like zone labels to be shown to students or not, as well as
arbitrary number of drop zones as long as their titles are unique. whether or not to display borders outlining the zones. It is possible
to define an arbitrary number of drop zones as long as their labels
![Drag item edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view-items.png) are unique.
In the final step, you define the drag items. A drag item can contain ![Drag item edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view-items.png)
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 In the final step, you define the background and text color for drag
drops the item on a zone - the success feedback is shown if the item items, as well as the drag items themselves. A drag item can contain
is dropped on the correct zone, while the error feedback is shown either text or an image. You can define custom success and error
when dropping the item on an incorrect drop zone. 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 Additionally, items can have a numerical value (and an optional error
margin) associated with them. When a student drops an item that has a margin) associated with them. When a student drops an item that has a
...@@ -128,7 +133,7 @@ margin, the value entered by the student will be considered correct if ...@@ -128,7 +133,7 @@ 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 it does not differ from the expected value by more than that margin
(and incorrect otherwise). (and incorrect otherwise).
![Zone dropdown](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/5ff71f56ba454c66d8f2749bc1d55d5f1df3b792/doc/img/edit-view-zone-dropdown.png) ![Zone dropdown](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view-zone-dropdown.png)
The zone that an item belongs to 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` includes all drop zones defined in the previous step and a `none`
......
doc/img/edit-view-items.png

41.9 KB | W: | H:

doc/img/edit-view-items.png

37.4 KB | W: | H:

doc/img/edit-view-items.png
doc/img/edit-view-items.png
doc/img/edit-view-items.png
doc/img/edit-view-items.png
  • 2-up
  • Swipe
  • Onion skin
doc/img/edit-view-zone-dropdown.png

13.6 KB | W: | H:

doc/img/edit-view-zone-dropdown.png

9.77 KB | W: | H:

doc/img/edit-view-zone-dropdown.png
doc/img/edit-view-zone-dropdown.png
doc/img/edit-view-zone-dropdown.png
doc/img/edit-view-zone-dropdown.png
  • 2-up
  • Swipe
  • Onion skin
doc/img/edit-view-zones.png

54.8 KB | W: | H:

doc/img/edit-view-zones.png

52.5 KB | W: | H:

doc/img/edit-view-zones.png
doc/img/edit-view-zones.png
doc/img/edit-view-zones.png
doc/img/edit-view-zones.png
  • 2-up
  • Swipe
  • Onion skin
doc/img/edit-view.png

38.7 KB | W: | H:

doc/img/edit-view.png

27.5 KB | W: | H:

doc/img/edit-view.png
doc/img/edit-view.png
doc/img/edit-view.png
doc/img/edit-view.png
  • 2-up
  • Swipe
  • Onion skin
doc/img/student-view-finish.png

61.9 KB | W: | H:

doc/img/student-view-finish.png

59.6 KB | W: | H:

doc/img/student-view-finish.png
doc/img/student-view-finish.png
doc/img/student-view-finish.png
doc/img/student-view-finish.png
  • 2-up
  • Swipe
  • Onion skin
doc/img/student-view-start.png

58.4 KB | W: | H:

doc/img/student-view-start.png

49.1 KB | W: | H:

doc/img/student-view-start.png
doc/img/student-view-start.png
doc/img/student-view-start.png
doc/img/student-view-start.png
  • 2-up
  • Swipe
  • Onion skin
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