diff --git a/Modules/TestQuestionPool/templates/default/tpl.il_as_qpl_cloze_question_gap_numeric.html b/Modules/TestQuestionPool/templates/default/tpl.il_as_qpl_cloze_question_gap_numeric.html
index c1fb5a97168e..bb71cd14a1f8 100755
--- a/Modules/TestQuestionPool/templates/default/tpl.il_as_qpl_cloze_question_gap_numeric.html
+++ b/Modules/TestQuestionPool/templates/default/tpl.il_as_qpl_cloze_question_gap_numeric.html
@@ -1 +1 @@
- size="{TEXT_GAP_SIZE}" maxlength="{TEXT_GAP_SIZE}" />
\ No newline at end of file
+ size="{TEXT_GAP_SIZE}" maxlength="{TEXT_GAP_SIZE}" />
diff --git a/Services/JavaScript/js/Basic.js b/Services/JavaScript/js/Basic.js
index 281dad434535..7c21d2f8d153 100644
--- a/Services/JavaScript/js/Basic.js
+++ b/Services/JavaScript/js/Basic.js
@@ -1051,3 +1051,68 @@ function startSAHS(SAHSurl, SAHStarget, SAHSopenMode, SAHSwidth, SAHSheight)
}
}
+/**
+ * Related to https://mantis.ilias.de/view.php?id=26494
+ * jQuery "inputFilter" Extension.
+ */
+(function($) {
+ /**
+ * @param {mixed} inputFilter
+ * @returns {jQuery}
+ */
+ $.fn.inputFilter = function(inputFilter) {
+ return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function(e) {
+ if (inputFilter(this.value)) {
+ this.oldValue = this.value;
+ this.oldSelectionStart = this.selectionStart;
+ this.oldSelectionEnd = this.selectionEnd;
+ } else if (this.hasOwnProperty("oldValue")) {
+ this.value = this.oldValue;
+ this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
+ } else {
+ this.value = "";
+ }
+ });
+ };
+}(jQuery));
+
+/**
+ * Related to https://mantis.ilias.de/view.php?id=26494
+ * UI-Feedback : check if a numeric field isset but value is not numeric.
+ */
+function numericInputCheck() {
+
+ const numericInput = $( '.ilcqinput_NumericInput' );
+
+ // Only if present.
+ if ( numericInput.length ) {
+
+ // Append ilcqinput_NumericInputInvalid class for visually distinguishable numeric input fields.
+ // -> Onload.
+ let value = $( numericInput ).val().toString().replace( ',', '.' );
+ if ( value && !$.isNumeric( value ) ) {
+ $( numericInput ).addClass( 'ilcqinput_NumericInputInvalid' );
+ } else {
+ $( numericInput ).removeClass( 'ilcqinput_NumericInputInvalid' );
+ }
+ // -> OnChange.
+ $( numericInput ).on( 'change', function() {
+ let value = $( this ).val().toString().replace( ',', '.' );
+ if ( value && !$.isNumeric( value ) ) {
+ $( this ).addClass( 'ilcqinput_NumericInputInvalid' );
+ } else {
+ $( this ).removeClass( 'ilcqinput_NumericInputInvalid' );
+ }
+ } );
+
+ // Only allow numeric values foreach ".ilcqinput_NumericInput" classified input field.
+ $( numericInput ).inputFilter( function( value ) {
+ value = value.toString().replace( ',', '.' );
+ return !$.trim( value ) || $.isNumeric( value );
+ } );
+ }
+}
+
+$(document).ready( function( ) {
+ numericInputCheck();
+});
diff --git a/templates/default/default.css b/templates/default/default.css
index 707a6182cfdb..99e3c7ebd96f 100755
--- a/templates/default/default.css
+++ b/templates/default/default.css
@@ -317,3 +317,19 @@ div.il_editarea {
img.spacer {
display: block;
}
+
+/* ------------------ visually distinguishable numeric input fields --------------
+ Styles related to https://mantis.ilias.de/view.php?id=26494
+ */
+.ilcqinput_NumericInput {
+ background: #E0FAFA;
+}
+
+.ilcqinput_NumericInput+span:after {
+ content: " (!) ";
+ color: green;
+}
+
+.ilcqinput_NumericInputInvalid {
+ background: red;
+}
\ No newline at end of file