feat: Add 'input_type' and 'max_input_length' options to OpenQuestion.

Author: Nico-AP

ddm/core/static/ddm_core/vue/css/vue_questionnaire.css

@@ -0,0 +1,28 @@
+# Generated by Django 4.2.16 on 2025-02-15 11:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ddm_questionnaire', '0007_alter_questionitem_label_alt'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='openquestion',
+            name='input_type',
+            field=models.CharField(choices=[('text', 'Any text'), ('numbers', 'Numbers only'), ('email', 'Email address')], default='text', help_text='Select the type of input allowed.', max_length=20, verbose_name='Input type'),
+        ),
+        migrations.AddField(
+            model_name='openquestion',
+            name='max_input_length',
+            field=models.IntegerField(blank=True, default=None, help_text="Participants' input cannot exceed this length. If empty, no input length restriction is enforced.", null=True, verbose_name='Maximum input length'),
+        ),
+        migrations.AlterField(
+            model_name='openquestion',
+            name='display',
+            field=models.CharField(choices=[('small', 'Small'), ('large', 'Large')], default='small', help_text='"Small" displays a one-line textfield, "Large" a multiline textfield as input.', max_length=20),
+        ),
+    ]

ddm/core/static/ddm_core/vue/js/chunk-vendors.js

@@ -316,14 +316,40 @@ class DisplayOptions(models.TextChoices):
         max_length=20,
         blank=False,
         choices=DisplayOptions.choices,
-        default=DisplayOptions.LARGE,
+        default=DisplayOptions.SMALL,
         help_text='"Small" displays a one-line textfield, "Large" a multiline '
                   'textfield as input.'
     )
 
+    class InputTypes(models.TextChoices):
+        TEXT = 'text', 'Any text'
+        NUMBER = 'numbers', 'Numbers only'
+        EMAIL = 'email', 'Email address'
+    input_type = models.CharField(
+        max_length=20,
+        blank=False,
+        choices=InputTypes.choices,
+        default=InputTypes.TEXT,
+        verbose_name='Input type',
+        help_text='Select the type of input allowed.'
+    )
+
+    max_input_length = models.IntegerField(
+        verbose_name='Maximum input length',
+        help_text=(
+            "Participants' input cannot exceed this length. If empty, "
+            "no input length restriction is enforced."
+        ),
+        blank=True,
+        null=True,
+        default=None
+    )
+
     def create_config(self):
         config = super().create_config()
         config['options']['display'] = self.display
+        config['options']['input_type'] = self.input_type
+        config['options']['max_input_length'] = self.max_input_length
         return config
 
     def validate_response(self, response):

ddm/core/static/ddm_core/vue/js/vue_questionnaire.js

@@ -12,8 +12,8 @@
 from ddm.projects.models import DonationProject
 from ddm.questionnaire.models import (
     QuestionBase, QuestionType, SingleChoiceQuestion, MultiChoiceQuestion,
-    OpenQuestion, MatrixQuestion, SemanticDifferential, Transition, QuestionItem,
-    ScalePoint
+    OpenQuestion, MatrixQuestion, SemanticDifferential, Transition,
+    QuestionItem, ScalePoint
 )
 
 
@@ -49,7 +49,8 @@ def get_all_questions(self):
         return project.questionbase_set.all()
 
     def get_queryset(self):
-        return super().get_queryset().filter(project__url_id=self.kwargs['project_url_id'])
+        return super().get_queryset().filter(
+            project__url_id=self.kwargs['project_url_id'])
 
 
 class QuestionFormMixin(ProjectMixin):
@@ -65,13 +66,21 @@ class QuestionFormMixin(ProjectMixin):
         'transition': Transition
     }
 
-    SHARED_FIELDS = ['name', 'blueprint', 'page', 'index', 'variable_name', 'text', 'required']
+    SHARED_FIELDS = [
+        'name',
+        'blueprint',
+        'page',
+        'index',
+        'variable_name',
+        'text',
+        'required'
+    ]
     QUESTION_FIELDS = {
         'single_choice': SHARED_FIELDS + ['randomize_items'],
         'multi_choice': SHARED_FIELDS + ['randomize_items'],
         'matrix': SHARED_FIELDS + ['randomize_items'],
         'semantic_diff': SHARED_FIELDS + ['randomize_items'],
-        'open': SHARED_FIELDS + ['display'],
+        'open': SHARED_FIELDS + ['input_type', 'max_input_length', 'display'],
         'transition': SHARED_FIELDS
     }
 

ddm/core/static/ddm_core/vue/js/vue_questionnaire.js.map

@@ -81,6 +81,29 @@ Randomize items:: Enable or disable randomization of *all* items.
 
 == Specific Settings
 
+=== Open Question
+
+Input type:: Define whether to apply restrictions for the input to
+this field. Can be 'text' to allow any kind of text, 'number' to
+only allow numerical characters, or 'email' to only allow valid
+email addresses. Default is 'text'.
+
+Maximum input length:: Restricts the input to a certain number of characters.
+If this option is left empty, no input length restriction is enforced.
+
+Display:: Define whether to show a 'small' one-line input field or
+a larger multi-line text-box. Defaults to "small" and only
+applies when the chosen input type is "Text".
+
+[NOTE]
+====
+The `input type` and `maximum input length` options are only "softly" enforced
+in the participant's browser by hinting at and highlighting non-compliant input.
+This means that these restrictions are not enforced on the server-side if
+participants choose to ignore the input hint.
+====
+
+
 === Question Items
 
 For Single Choice Questions, Multiple Choice Questions, Matrix Questions and Semantic Differentials,

ddm/questionnaire/migrations/0008_openquestion_input_type_and_more.py

@@ -2,8 +2,39 @@
   <div>
     <div v-html="text"></div>
     <div :id="'answer-' + qid" class="question-response-body">
-      <input v-if="options.display == 'small'" type="text" :name="qid" @change="responseChanged($event)">
-      <textarea class="open-question-textarea" v-if="options.display == 'large'" type="text" :name="qid" @change="responseChanged($event)"></textarea>
+      <template v-if="options.input_type === 'text'">
+        <input v-if="options.display === 'small'"
+               type="text"
+               :name="qid"
+               :maxlength="getMaxLength"
+               @change="responseChanged($event)">
+        <textarea v-if="options.display === 'large'"
+                  class="open-question-textarea"
+                  type="text"
+                  :name="qid"
+                  :maxlength="getMaxLength"
+                  @change="responseChanged($event)"></textarea>
+      </template>
+
+      <template v-else-if="options.input_type === 'numbers'">
+        <input type="text"
+               v-only-digits
+               :name="qid"
+               :maxlength="getMaxLength"
+               @change="responseChanged($event)">
+        <p class="input-hint">{{ $t('hint-number-input') }}</p>
+      </template>
+
+      <template v-else-if="options.input_type === 'email'">
+        <input type="email"
+               v-valid-email
+               :name="qid"
+               :maxlength="getMaxLength"
+               @change="responseChanged($event)">
+        <p class="input-hint hint-invalid-input pb-0 mb-0">{{ $t('hint-invalid-email') }}</p>
+        <p class="input-hint">{{ $t('hint-email-input') }}</p>
+      </template>
+
     </div>
   </div>
 </template>
@@ -18,18 +49,73 @@ export default {
       response: '-99'
     }
   },
+  computed: {
+    getMaxLength() {
+      return this.options.max_input_length !== null ? this.options.max_input_length : undefined;
+    }
+  },
   created() {
     this.$emit('responseChanged', {id: this.qid, response: this.response, question: this.text, items: null});
   },
   methods: {
     responseChanged(event) {
-      this.response = event.target.value;
+      if (event.target.value === '' || event.target.value === null) {
+        this.response = '-99'
+      } else {
+        this.response = event.target.value;
+      }
       this.$emit('responseChanged', {id: this.qid, response: this.response, question: this.text, items: null});
     }
+  },
+  directives: {
+    onlyDigits: {
+      mounted(el) {
+        el.addEventListener("input", function () {
+          el.value = el.value.replace(/\D/g, ""); // Remove non-numeric characters
+        });
+      }
+    },
+    validEmail: {
+      mounted(el) {
+        el.addEventListener("blur", function () {
+          const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+          const hint = el.nextElementSibling;
+          if (!emailRegex.test(el.value)) {
+            el.classList.add("invalid-email");
+            if (hint && hint.classList.contains("hint-invalid-input")) {
+              hint.style.display = "block";
+            }
+          } else {
+            el.classList.remove("invalid-email");
+            if (hint && hint.classList.contains("hint-invalid-input")) {
+              hint.style.display = "none";
+            }
+          }
+        });
+
+        el.addEventListener("focus", function () {
+          const hint = el.nextElementSibling;
+          if (hint && hint.classList.contains("hint-invalid-input")) {
+            hint.style.display = "none";
+          }
+        });
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
-
+.input-hint {
+  font-size: 0.8rem;
+  color: grey;
+}
+.invalid-email {
+  border: 2px solid red !important;
+  border-radius: 3px;
+}
+.hint-invalid-input {
+  color: red;
+  display: none;
+}
 </style>

ddm/questionnaire/models.py

@@ -1,10 +1,16 @@
 {
   "en": {
     "next-btn-label": "Next",
-    "required-but-missing-hint": "Please answer this question."
+    "required-but-missing-hint": "Please answer this question.",
+    "hint-number-input": "Only numbers are allowed.",
+    "hint-email-input": "Enter email address in the format name{'@'}domain.com.",
+    "hint-invalid-email": "This is not a valid email pattern."
   },
   "de": {
     "next-btn-label": "Weiter",
-    "required-but-missing-hint": "Bitte beantworten Sie diese Frage."
+    "required-but-missing-hint": "Bitte beantworten Sie diese Frage.",
+    "hint-number-input": "Es sind nur Zahlen erlaubt.",
+    "hint-email-input": "E-Mail-Adresse im Format name{'@'}domain.de eingeben.",
+    "hint-invalid-email": "Das scheint keine gültige E-Mail-Adresse zu sein."
   }
 }

ddm/questionnaire/views.py

@@ -138,3 +138,6 @@
 CKEDITOR_5_FILE_UPLOAD_PERMISSION = 'authenticated'
 CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True
 CKEDITOR_5_UPLOAD_FILE_TYPES = ['jpeg', 'pdf', 'png', 'mp4']
+
+# TODO: Delete again - only temporary
+# MIDDLEWARE += ['csp.middleware.CSPMiddleware']