0026494: Bug in gap questions with mixed string and numeric text fiel…

…ds. (#3)

Co-authored-by: Erik Nell <[email protected]>

Modules/TestQuestionPool/templates/default/tpl.il_as_qpl_cloze_question_gap_numeric.html

@@ -1 +1 @@
-<input class="ilc_qinput_TextInput" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" name="gap_{GAP_COUNTER}"{VALUE_GAP} <!-- BEGIN size_and_maxlength --> size="{TEXT_GAP_SIZE}" maxlength="{TEXT_GAP_SIZE}"<!-- END size_and_maxlength --> />
+<input class="ilc_qinput_TextInput ilcqinput_NumericInput" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" name="gap_{GAP_COUNTER}"{VALUE_GAP} <!-- BEGIN size_and_maxlength --> size="{TEXT_GAP_SIZE}" maxlength="{TEXT_GAP_SIZE}"<!-- END size_and_maxlength --> /><span title="Numeric / Numerisch"></span>

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();
+});

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;
+}