-
Notifications
You must be signed in to change notification settings - Fork 3
Developing and Modifying Xmodules
This is my story of digging into developing an Image Mapped Input that can support a more detailed "map" by accepting multiple "rectangle" elements with attributes for order clicked / time clicked and so on. Where stuff is when it comes to Xmodules
The Image Mapped Input stuff is found under the Xmodule "Capa": ~/edx-platform/common/lib/capa/capa/ (python code and templates)
However, all JavaScript related code is here: ~/edx-platform/common/lib/xmodule/xmodule/js/src/capa/ (client side javascript)
*** The server needs to be restarted for these changes to take effect ***
At this point, I am allowing for multiple answers (multiple green dots to be placed with their order number written on them) to be placed on multiple Image Mapped Inputs on one page, and the time of the dots placed to be recorded as well the order they are placed in.
I've added a "Clear" button in the case the user wants to change his answer or made a mistake.
The new structure of the XML markdown for an ImageMappedInput that I'm leaning towards will be similar to the following:
<imageinput src="somePicture.jpg" width="600" height="400" limit="3" canClear="true">
<rectangle posStart="10,10" posEnd="20,20" order="0" />
<rectangle posStart="30,10" posEnd="30,20" order="2" />
<rectangle posStart="10,50" posEnd="30,50" order="1" />
<rectangle posStart="100,200" posEnd="300,400" order="3" />
</imageinput>
<!-- where limit - the max number of green dots a user can place
canClear - a boolean of enabling/disabling a 'Clear' button
order - the order in which the correct answer should be (need to check to see if the user is unable to see this)
posStart - the x,y coordinates for the start of the rectangle
posEnd - the x,y coordinates for the end of the rectangle
-->
The order in which the dots were placed can be determined by the difference in the time, thus I don't see a need for creating another attribute or variable for this.