Add input_width option for string response and make size adapt

Author: jmshea

README.md

@@ -237,6 +237,8 @@ String questions are specified by setting the "type" property to "string". These
 
 You can optionally include a default answer pattern by specifying an object with a "type" property set to "default" and a "feedback" string. If no other answer patterns match the user's submission, the question will be marked incorrect and the provided feedback will be displayed.
 
+You can also specify an `input_width` property (integer, approximate number of characters) on the question to control the width of the text input field (in em units) in the rendered quiz.
+
 The schema for String Questions is shown below:
 
 ![Schema for String Questions](schema/string_schema.png)

jupyterquiz/js/string.js

@@ -175,6 +175,10 @@ function make_string(qa, outerqDiv, qDiv, aDiv, id) {
     inp.id = id + "-0";
     inp.className = "Input-text";
     inp.setAttribute('data-answers', JSON.stringify(qa.answers));
+    // Apply optional input width (approx. number of characters, in em units)
+    if (qa.input_width != null) {
+        inp.style['min-width'] = qa.input_width + 'em';
+    }
     aDiv.append(inp);
 
     inp.onkeypress = string_keypress;

jupyterquiz/styles.css

@@ -75,7 +75,10 @@
     display: block;
     margin: 10px;
     color: inherit;
-    width: 140px;
+    width: unset;
+    min-width: 140px;
+    max-width: 93%;
+    field-sizing: content;
     background-color: var(--jq-numeric-input-bg);
     color: var(--jq-text-color);
     padding: 5px;

schema/string_schema.json

@@ -18,7 +18,12 @@
         },
         "answers": {
             "type": "array",
-	          "items": { "$ref": "#/$defs/possible_answer" }
+            "items": { "$ref": "#/$defs/possible_answer" }
+        },
+        "input_width": {
+            "type": "integer",
+            "minimum": 0,
+            "description": "Approximate width of the input text field in number of characters (applied in em units)"
         }
     },
     "$defs": {