moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-11 20:06:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-47494 ddimageortext: NOBUG implemented resizing of images,validity checks on form data, different

Browse source 
sizes for margins so all items in a group take up the same screen real estate.
This commit is contained in:
Jamie Pratt 2011-08-01 20:42:18 +07:00
parent 0fe992a97d
commit 649e58e904
5 changed files with 120 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

16
question/type/ddimageortext/TODO.txt
View file

@ -1,16 +1,12 @@
Question authoring form fields 2 hours
Display Image in authoring form
Calculation of size of drop zones
Calculate size of images, server side and save the sizes upon image upload
Display of drop zones on authoring form 4 hours
Question authoring form fields
* correct sizing of borders and margins
Question instance saving 2 hours
Question instance loading 2 hours
Question rendering code 6 hours
- correctly position images
- make images draggable
- react to drop of images
- write position that images where dropped to in hidden fields
- repurpose and extend authoring form code for question rendering
- make sure code works with multiple questions on the page
- get position that images where dropped to from hidden fields
- grade question parts based on where images dragged to
- have position of images at start respond to saved state
Testing and debugging for cross browser compatibility 4 hours

86
question/type/ddimageortext/edit_ddimagetoimage_form.php
View file

@ -80,18 +80,16 @@ class qtype_ddimagetoimage_edit_form extends question_edit_form {
*/
protected function definition_inner($mform) {
$previewareaheaderelement = $mform->createElement('header', 'previewareaheader',
$mform->addElement('header', 'previewareaheader',
get_string('previewareaheader', 'qtype_ddimagetoimage'));
$mform->insertElementBefore($previewareaheaderelement, 'generalheader');
$previewareaelement = $mform->createElement('static', 'previewarea',
$mform->addElement('static', 'previewarea',
get_string('previewarea', 'qtype_ddimagetoimage'),
get_string('previewareamessage', 'qtype_ddimagetoimage'));
$mform->insertElementBefore($previewareaelement, 'generalheader');
list($imagerepeatsatstart, $imagerepeats) = $this->get_drag_image_repeats();
$this->definition_drop_zones($mform, $imagerepeats);
$mform->addElement('checkbox', 'shuffleanswers', ' ',
$mform->addElement('advcheckbox', 'shuffleanswers', ' ',
get_string('shuffleimages', 'qtype_ddimagetoimage'));
$mform->setDefault('shuffleanswers', 0);
$mform->closeHeaderBefore('shuffleanswers');
@ -202,9 +200,8 @@ class qtype_ddimagetoimage_edit_form extends question_edit_form {
get_string('group', 'qtype_gapselect').' ');
$grouparray[] = $mform->createElement('select', 'draggroup',
get_string('group', 'qtype_gapselect'), $options);
$grouparray[] = $mform->createElement('checkbox', 'infinite', ' ',
get_string('infinite', 'qtype_ddimagetoimage'), null,
array('size' => 1, 'class' => 'tweakcss'));
$grouparray[] = $mform->createElement('advcheckbox', 'infinite', ' ',
get_string('infinite', 'qtype_ddimagetoimage'));
$draggableimageitem[] = $mform->createElement('group', 'drags',
get_string('label', 'qtype_ddimagetoimage'), $grouparray);
return $draggableimageitem;
@ -261,7 +258,7 @@ class qtype_ddimagetoimage_edit_form extends question_edit_form {
$jsmodule = array(
'name' => 'qtype_ddimagetoimage',
'fullpath' => '/question/type/ddimagetoimage/module.js',
'requires' => array('node', 'dd-drop', 'dd-constrain', 'form_filepicker')
'requires' => array('node', 'dd', 'dd-drop', 'dd-constrain', 'form_filepicker')
);
$PAGE->requires->js_init_call('M.qtype_ddimagetoimage.init_form',
null, true, $jsmodule);
@ -269,19 +266,78 @@ class qtype_ddimagetoimage_edit_form extends question_edit_form {
return $question;
}
public static function file_get_draft_area_files($draftitemid) {
$toreturn = new stdClass();
$toreturn->draftitemid = $draftitemid;
public static function file_uploaded($draftitemid) {
$draftareafiles = file_get_drafarea_files($draftitemid);
$draftareafile = reset($draftareafiles->list);
$toreturn->url = $draftareafile->url;
return $toreturn;
do {
$draftareafile = array_shift($draftareafiles->list);
} while ($draftareafile !== null && $draftareafile->filename == '.');
if ($draftareafile === null) {
return false;
}
return true;
}
public function validation($data, $files) {
$errors = parent::validation($data, $files);
if (!self::file_uploaded($data['bgimage'])){
$errors["bgimage"] = get_string('formerror_nobgimage', 'qtype_ddimagetoimage');
}
$allchoices = array();
for ($i=0; $i < $data['nodropzone']; $i++) {
$ytoppresent = (trim($data['drops'][$i]['ytop']) !== '');
$xleftpresent = (trim($data['drops'][$i]['ytop']) !== '');
$labelpresent = (trim($data['drops'][$i]['droplabel']) !== '');
$choice = $data['drops'][$i]['choice'];
$imagechoicepresent = ($choice !== '0');
if ($imagechoicepresent) {
if (!$ytoppresent) {
$errors["drops[$i]"] =
get_string('formerror_noytop', 'qtype_ddimagetoimage');
}
if (!$xleftpresent) {
$errors["drops[$i]"] =
get_string('formerror_noxleft', 'qtype_ddimagetoimage');
}
if (!self::file_uploaded($data['dragitem'][$choice - 1])) {
$errors["drops[$i]"] =
get_string('formerror_nofile', 'qtype_ddimagetoimage', $choice);
$errors['dragitem['.($choice - 1).']'] =
get_string('formerror_nofile2', 'qtype_ddimagetoimage', $i);
}
if (isset($allchoices[$choice]) && !$data['drags'][$choice-1]['infinite']) {
$errors["drops[$i]"] =
get_string('formerror_multipledraginstance', 'qtype_ddimagetoimage', $choice);
$errors['drops['.($allchoices[$choice]).']'] =
get_string('formerror_multipledraginstance', 'qtype_ddimagetoimage', $choice);
$errors['drags['.($choice-1).']'] =
get_string('formerror_multipledraginstance2', 'qtype_ddimagetoimage', $choice);
}
$allchoices[$choice] = $i;
} else {
if ($ytoppresent || $xleftpresent || $labelpresent) {
echo '<pre>';
var_dump(compact('ytoppresent', 'xleftpresent', 'labelpresent', 'choice'));
echo '</pre>';
$errors["drops[$i]"] =
get_string('formerror_noimageselected', 'qtype_ddimagetoimage');
}
}
}
for ($i=0; $i < $data['noimages']; $i++) {
$labelpresent = (trim($data['drags'][$i]['draglabel']) !== '');
$infinitechecked = (trim($data['drags'][$i]['infinite']) === '1');
if (!self::file_uploaded($data['dragitem'][$i])) {
if ($infinitechecked || $labelpresent) {
$errors['dragitem['.($i).']'] =
get_string('formerror_nofile3', 'qtype_ddimagetoimage');
}
}
}
return $errors;
}

13
question/type/ddimageortext/lang/en/qtype_ddimagetoimage.php
View file

@ -29,18 +29,27 @@ $string['answer'] = 'Answer';
$string['bgimage'] = 'Background Image';
$string['correctansweris'] = 'The correct answer is: {$a}';
$string['ddimagetoimage'] = 'Drag and drop: images onto images';
$string['ddimagetoimage_help'] = 'Select a background image file, select a number of draggable images and define the drop zones on the background image to which they must be dragged.';
$string['ddimagetoimage_help'] = 'Select a background image file, select draggable images and define the drop zones on the background image to which they must be dragged.';
$string['ddimagetoimagesummary'] = 'Images are dragged and dropped into drop zones on a background image.';
$string['draggableimage'] = 'Draggable image';
$string['draggableimageheader'] = 'Draggable image {$a}';
$string['dropzone'] = 'Drop zone {$a}';
$string['dropzoneheader'] = 'Drop zones';
$string['editingddimagetoimage'] = 'Editing drag and drop: images onto images';
$string['formerror_noytop'] = 'You must provide a value for the y coords for the top left corner of this drop area. You can drag and drop the drop area above to set the coordinates or enter them manually here.';
$string['formerror_noxleft'] = 'You must provide a value for the y coords for the top left corner of this drop area. You can drag and drop the drop area above to set the coordinates or enter them manually here.';
$string['formerror_nofile'] = 'Although you selected drag image {$a} as the correct choice for this drop zone you have not selected an image for drag image {$a}.';
$string['formerror_nofile2'] = 'You need to select an image file here, this drag item is referred to as the correct answer for drop zone {$a}.';
$string['formerror_nofile3'] = 'You need to select an image file here, or delete the associated label and uncheck the infinite checkbox.';
$string['formerror_multipledraginstance'] = 'You have selected this image {$a} more than once as the correct choice for a drop zone but it is not marked as being an infinite drag item.';
$string['formerror_multipledraginstance2'] = 'You have selected this image more than once as the correct choice for a drop zone but it is not marked as being an infinite drag item.';
$string['formerror_noimageselected'] = 'You need to select a drag item to be the correct choice for this drop zone.';
$string['formerror_nobgimage'] = 'You need to select an image to use as the background for the drag and drop area.';
$string['infinite'] = 'Infinite';
$string['label'] = 'Label';
$string['previewarea'] = 'Preview area -';
$string['previewareaheader'] = 'Preview';
$string['previewareamessage'] = 'Choose a background image and draggable images and designate drop zones and they will be previewed here.';
$string['previewareamessage'] = '<ul><li>Select a background image file.</li><li>Select draggable images.</li><li>And define drop zones by selecting an image that the student must drag to the drop zone and drag it to where the student should drag it too.</li></ul>';
$string['shuffleimages'] = 'Shuffle Draggable Images';
$string['xleft'] = 'Left';
$string['ytop'] = 'Top';

2
question/type/ddimageortext/questiontype.php
View file

@ -78,7 +78,7 @@ class qtype_ddimagetoimage extends question_type {
$DB->update_record('qtype_ddimagetoimage', $options);
$DB->delete_records('qtype_ddimagetoimage_drops', array('questionid' => $formdata->id));
foreach (array_keys($formdata->drops) as $dropno){
if ($formdata->drops[$dropno]['xleft'] == ''){
if ($formdata->drops[$dropno]['choice'] == 0){
continue;
}
$drop = new stdClass();

40
question/type/ddimageortext/styles.css
View file

@ -68,32 +68,54 @@
.que.ddimagetoimage .group8 {
background-color: #F0E68C;
}
form.mform fieldset#previewareaheader .group1 {
background-color: #FFFFFF;
}
form.mform fieldset#previewareaheader .group2 {
background-color: #DCDCDC;
}
form.mform fieldset#previewareaheader .group3 {
background-color: #B0C4DE;
}
form.mform fieldset#previewareaheader .group4 {
background-color: #D8BFD8;
}
form.mform fieldset#previewareaheader .group5 {
background-color: #87CEFA;
}
form.mform fieldset#previewareaheader .group6 {
background-color: #DAA520;
}
form.mform fieldset#previewareaheader .group7 {
background-color: #FFD700;
}
form.mform fieldset#previewareaheader .group8 {
background-color: #F0E68C;
}
form.mform fieldset#previewareaheader img.draghome {
margin: 5px;
visibility : hidden;
}
form.mform fieldset#previewareaheader .drag {
border: 1px solid black;
background-color: #004C6D;
cursor: move;
margin: 5px;
z-index: 3;
z-index: 2;
}
form.mform fieldset#previewareaheader .dragitems {
clear:left;
}
form.mform fieldset#previewareaheader {
form.mform fieldset#previewareaheader div.ddarea {
text-align : center;
}
form.mform fieldset#previewareaheader .dropbackground {
margin:0 auto;
background-color: #8DD5E7;
z-index: 1;
}
form.mform fieldset#previewareaheader .droptarget {
border: 1px solid black;
position: absolute;
background-color: #FFA928;
z-index: 2;
z-index: 1;
}
form.mform fieldset#previewareaheader .droptarget.yui3-dd-drop-over {