MDL-60910 ddimageortext: Create option for using transparent pictures

question/type/ddimageortext/amd/src/form.js

@@ -133,6 +133,8 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
             }
 
             var numDrops = dragDropToImageForm.form.getFormValue('nodropzone', []);
+            var dropzonevisibility = dragDropToImageForm.form.getFormValue('dropzonevisibility', []);
+            var dropzonevisibilitystyle = dropzonevisibility === '1' ? 'background: transparent;' : '';
             for (var dropNo = 0; dropNo < numDrops; dropNo++) {
                 var dragNo = dragDropToImageForm.form.getFormValue('drops', [dropNo, 'choice']);
                 if (dragNo === '0') {
@@ -148,7 +150,8 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
                     }
                     // Althoug these are previews of drops, we also add the class name 'drag',
                     dropZoneHolder.append('<img class="droppreview group' + group + ' drop' + dropNo +
-                            '" src="' + imgUrl + '" alt="' + label + '" data-drop-no="' + dropNo + '">');
+                        '" src="' + imgUrl + '" alt="' + label + '" data-drop-no="' + dropNo +
+                        '" style="' + dropzonevisibilitystyle + '" >');
 
                 } else if (label !== '') {
                     dropZoneHolder.append('<div class="droppreview group' + group + ' drop' + dropNo +
@@ -288,6 +291,10 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
             // Changes to Drop zones section: left, top and drag item.
             $('fieldset#id_dropzoneheader').on('change input', 'input, select', function(e) {
                 var input = $(e.target).closest('select, input');
+                if (input.attr('id') === 'id_dropzonevisibility') {
+                    return;
+                }
+
                 if (input.is('select')) {
                     dragDropToImageForm.createDropZones();
                 } else {
@@ -303,6 +310,15 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
             $(window).on('resize', function() {
                 dragDropToImageForm.updateDropZones();
             });
+
+            $('#id_dropzonevisibility').on('change', function() {
+                let selectedvalue = $(this).val();
+                if (selectedvalue === "1") {
+                    $('.droppreview').css('background', 'transparent');
+                } else if (selectedvalue === "0") {
+                    $('.droppreview').css('background', '');
+                }
+            });
         },
 
         /**
@@ -373,7 +389,7 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
                 return false; // Infinite, so can't be used up.
             }
 
-            return $('fieldset#id_dropzoneheader select').filter(function(i, selectNode) {
+            return $('fieldset#id_dropzoneheader select[name^="drops"]').filter(function(i, selectNode) {
                 return parseInt($(selectNode).val()) === value;
             }).length !== 0;
         },

question/type/ddimageortext/backup/moodle2/backup_qtype_ddimageortext_plugin.class.php

@@ -54,7 +54,7 @@ class backup_qtype_ddimageortext_plugin extends backup_qtype_plugin {
         $dds = new backup_nested_element($qtype, array('id'), array(
             'shuffleanswers', 'correctfeedback', 'correctfeedbackformat',
             'partiallycorrectfeedback', 'partiallycorrectfeedbackformat',
-            'incorrectfeedback', 'incorrectfeedbackformat', 'shownumcorrect'));
+            'incorrectfeedback', 'incorrectfeedbackformat', 'shownumcorrect', 'dropzonevisibility'));
 
         $pluginwrapper->add_child($dds);
         $drags = new backup_nested_element('drags');

question/type/ddimageortext/db/install.xml

@@ -16,6 +16,7 @@
         <FIELD NAME="incorrectfeedback" TYPE="text" NOTNULL="true" SEQUENCE="false" COMMENT="Feedback shown for any incorrect response."/>
         <FIELD NAME="incorrectfeedbackformat" TYPE="int" LENGTH="2" NOTNULL="true" DEFAULT="0" SEQUENCE="false"/>
         <FIELD NAME="shownumcorrect" TYPE="int" LENGTH="2" NOTNULL="true" DEFAULT="0" SEQUENCE="false"/>
+        <FIELD NAME="dropzonevisibility" TYPE="int" LENGTH="2" NOTNULL="true" DEFAULT="0" SEQUENCE="false" COMMENT="Whether transparent dropzone or not."/>
       </FIELDS>
       <KEYS>
         <KEY NAME="primary" TYPE="primary" FIELDS="id"/>

question/type/ddimageortext/db/upgrade.php

@@ -0,0 +1,50 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Ddimageortext question type upgrade code.
+ *
+ * @package    qtype_ddimageortext
+ * @copyright  2024 The Open University
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Upgrade code for the qtype_ddimageortext question type.
+ * @param int $oldversion the version we are upgrading from.
+ * @return bool
+ */
+function xmldb_qtype_ddimageortext_upgrade($oldversion) {
+    global $DB;
+
+    $dbman = $DB->get_manager(); // Loads ddl manager and xmldb classes.
+    if ($oldversion < 2025010901) {
+
+        // Define field dropzonevisibility to be added to qtype_ddimageortext.
+        $table = new xmldb_table('qtype_ddimageortext');
+        $field = new xmldb_field('dropzonevisibility', XMLDB_TYPE_INTEGER, '2', null, XMLDB_NOTNULL, null, '0', 'shownumcorrect');
+
+        // Conditionally launch add field dropzonevisibility.
+        if (!$dbman->field_exists($table, $field)) {
+            $dbman->add_field($table, $field);
+        }
+
+        // Ddimageortext savepoint reached.
+        upgrade_plugin_savepoint(true, 2025010901, 'qtype', 'ddimageortext');
+    }
+
+    return true;
+}

question/type/ddimageortext/edit_ddimageortext_form.php

@@ -47,6 +47,7 @@ class qtype_ddimageortext_edit_form extends qtype_ddtoimage_edit_form_base {
         $dragids = array(); // Drag no -> dragid.
         if (!empty($question->options)) {
             $question->shuffleanswers = $question->options->shuffleanswers;
+            $question->dropzonevisibility = $question->options->dropzonevisibility;
             $question->drags = array();
             foreach ($question->options->drags as $drag) {
                 $dragindex = $drag->no - 1;
@@ -168,6 +169,16 @@ class qtype_ddimageortext_edit_form extends qtype_ddtoimage_edit_form_base {
         $dropzoneitem = array();
 
         $grouparray = array();
+
+        $options = [
+            0 => get_string('dropzonevisibility_showoption', 'qtype_ddimageortext'),
+            1 => get_string('dropzonevisibility_hideoption', 'qtype_ddimageortext'),
+        ];
+
+        $mform->addElement('select', 'dropzonevisibility',
+            get_string('dropzonevisibility', 'qtype_ddimageortext'), $options);
+        $mform->setDefault('dropzonevisibility', $this->get_default_value('dropzonevisibility', 0));
+        $mform->addHelpButton('dropzonevisibility', 'dropzonevisibility', 'qtype_ddimageortext');
         $grouparray[] = $mform->createElement('text', 'xleft',
                                                 get_string('xleft', 'qtype_ddimageortext'),
                                                 array('size' => 5, 'class' => 'tweakcss'));

question/type/ddimageortext/lang/en/qtype_ddimageortext.php

@@ -38,6 +38,11 @@ $string['draggableword'] = 'Draggable text';
 $string['dropbackground'] = 'Background image for dragging markers onto';
 $string['dropzone'] = 'Drop zone {$a}';
 $string['dropzoneheader'] = 'Drop zones';
+$string['dropzonevisibility'] = 'Drop zone visibility';
+$string['dropzonevisibility_help'] = 'Setting \'Hide drop zones\' will make them invisible when the question is attempted. However, drag items will still snap to nearby drop zones. This setting is recommended if you have images over an image background and the normal drop zone indicators are not desired. Drop zone borders will remain visible while editing to help with placement.';
+$string['dropzonevisibility_hideoption'] = 'Hide drop zones';
+$string['dropzonevisibility_showoption'] = 'Show drop zones';
+$string['dropzonevisibilitydesc'] = 'Borders will still be visible when editing the question to help with setting the drop zone.';
 $string['formerror_disallowedtags'] = 'Only "{$a}" tags are allowed in this draggable text.';
 $string['formerror_dragrequired'] = 'You must add at least one draggable item to this question.';
 $string['formerror_droprequired'] = 'You must define at least one drop zone for this question.';

question/type/ddimageortext/question.php

@@ -35,7 +35,8 @@ require_once($CFG->dirroot . '/question/type/ddimageortext/questionbase.php');
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 class qtype_ddimageortext_question extends qtype_ddtoimage_question_base {
-
+    /** @var string Whether the dropzone transparent or not. */
+    public $dropzonevisibility;
 }
 
 

question/type/ddimageortext/questiontype.php

@@ -53,6 +53,7 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
     public function save_defaults_for_new_questions(stdClass $fromform): void {
         parent::save_defaults_for_new_questions($fromform);
         $this->set_default_value('shuffleanswers', $fromform->shuffleanswers);
+        $this->set_default_value('dropzonevisibility', $fromform->dropzonevisibility);
     }
 
     public function save_question_options($formdata) {
@@ -70,6 +71,7 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
         }
 
         $options->shuffleanswers = !empty($formdata->shuffleanswers);
+        $options->dropzonevisibility = !empty($formdata->dropzonevisibility);
         $options = $this->save_combined_feedback_helper($options, $formdata, $context, true);
         $this->save_hints($formdata, true);
         $DB->update_record('qtype_ddimageortext', $options);
@@ -185,6 +187,9 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
         if ($question->options->shuffleanswers) {
             $output .= "    <shuffleanswers/>\n";
         }
+        if ($question->options->dropzonevisibility) {
+            $output .= "    <dropzonevisibility/>\n";
+        }
         $output .= $format->write_combined_feedback($question->options,
                                                     $question->id,
                                                     $question->contextid);
@@ -227,6 +232,8 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
 
         $question->shuffleanswers = array_key_exists('shuffleanswers',
                                                     $format->getpath($data, array('#'), array()));
+        $question->dropzonevisibility = array_key_exists('dropzonevisibility',
+            $format->getpath($data, ['#'], []));
 
         $filexml = $format->getpath($data, array('#', 'file'), array());
         $question->bgimage = $format->import_files_as_draft($filexml);

question/type/ddimageortext/questiontypebase.php

@@ -61,6 +61,9 @@ class qtype_ddtoimage_base extends question_type {
     protected function initialise_question_instance(question_definition $question, $questiondata) {
         parent::initialise_question_instance($question, $questiondata);
         $question->shufflechoices = $questiondata->options->shuffleanswers;
+        if (isset($questiondata->options->dropzonevisibility)) {
+            $question->dropzonevisibility = $questiondata->options->dropzonevisibility;
+        }
 
         $this->initialise_combined_feedback($question, $questiondata, true);
 

question/type/ddimageortext/rendererbase.php

@@ -59,6 +59,10 @@ class qtype_ddtoimage_renderer_base extends qtype_with_combined_feedback_rendere
 
         $dropareaclass = 'droparea';
         $draghomesclass = 'draghomes';
+        if ($question->dropzonevisibility) {
+            $draghomesclass .= ' transparent';
+            $dropareaclass .= ' transparent';
+        }
         if ($options->readonly) {
             $dropareaclass .= ' readonly';
             $draghomesclass .= ' readonly';

question/type/ddimageortext/styles.css

@@ -132,6 +132,20 @@ form.mform fieldset#id_previewareaheader .group1 {
     background-color: #fff;
 }
 
+.que.ddimageortext .transparent .dropzones > img {
+    border: none;
+}
+
+.que.ddimageortext .transparent .dropzones > img:hover {
+    border: 1px solid #000;
+}
+
+.que.ddimageortext .transparent img:not(.dropbackground):hover,
+.que.ddimageortext .droparea.transparent .dropzone,
+.que.ddimageortext .droparea.transparent .dropzone + img {
+    background-color: transparent;
+}
+
 .que.ddimageortext .group2,
 form.mform fieldset#id_previewareaheader .group2 {
     background-color: #b0c4de;

question/type/ddimageortext/tests/behat/add.feature

@@ -57,6 +57,7 @@ Feature: Test creating a drag and drop onto image question
 
     # Drop zones
     And I follow "Drop zones"
+    And I set the field "id_dropzonevisibility" to "1"
     And I press "Blanks for 3 more drop zones"
 
     And I set the field "id_drops_0_xleft" to "53"
@@ -98,7 +99,8 @@ Feature: Test creating a drag and drop onto image question
     And I set the field "item_qtype_ddimageortext" to "1"
     And I click on "Add" "button" in the "Choose a question type to add" "dialogue"
     And the following fields match these values:
-      | id_shuffleanswers | 1   |
+      | id_shuffleanswers     | 1 |
+      | id_dropzonevisibility | 1 |
 
   @javascript @_file_upload
   Scenario: Question must have at least one drag item and one drop zone

question/type/ddimageortext/tests/behat/backup_and_restore.feature

@@ -37,6 +37,7 @@ Feature: Test duplicating a quiz containing a drag and drop onto image question
       | General feedback                    | <p>More information about the major features of the Earth's surface can be found in Block 3, Section 6.2.</p> |
       | Default mark                        | 1                                                    |
       | Shuffle                             | 0                                                    |
+      | id_dropzonevisibility               | 0                                                    |
       | id_drags_0_dragitemtype             | Draggable text                                       |
       | id_drags_0_draggroup                | 1                                                    |
       | id_draglabel_0                      | island<br/>arc                                       |

question/type/ddimageortext/tests/helper.php

@@ -167,6 +167,7 @@ class qtype_ddimageortext_test_helper extends question_test_helper {
         );
         $fromform->bgimage = $bgdraftitemid;
         $fromform->shuffleanswers = 0;
+        $fromform->dropzonevisibility = 0;
         $fromform->drags = array(
             array('dragitemtype' => 'word', 'draggroup' => '1', 'infinite' => '0'),
             array('dragitemtype' => 'word', 'draggroup' => '1', 'infinite' => '0'),

question/type/ddimageortext/version.php

@@ -24,7 +24,7 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version   = 2024121800;
+$plugin->version   = 2025010901;
 $plugin->requires  = 2024100100;
 
 $plugin->component = 'qtype_ddimageortext';