feat: Added multiline attribute to string input element

apps/prairielearn/elements/pl-string-input/pl-string-input.mustache

@@ -16,18 +16,35 @@
             <span class="input-group-text" id="pl-string-input-{{uuid}}-label">{{{label}}}</span>
         </span>
         {{/label}}
+        {{^multiline}}
         <input
+        {{/multiline}}
+        {{#multiline}}
+        <textarea
+            wrap="soft"
+        {{/multiline}}
             name="{{name}}"
             type="text"
             inputmode="text"
             class="form-control pl-string-input-input"
-            size="{{size}}"
+            {{^multiline}}
+                size="{{size}}"
+                {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}}
+            {{/multiline}}
+            {{#multiline}}
+                cols="{{size}}"
+                rows="1"
+            {{/multiline}}
             autocomplete="off"
             {{^editable}}disabled{{/editable}}
-            {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}}
             aria-describedby="pl-symbolic-input-{{uuid}}-label pl-symbolic-input-{{uuid}}-suffix"
             placeholder="{{placeholder}}"
-        />
+        {{^multiline}}
+        >
+        {{/multiline}}
+        {{#multiline}}
+        >{{#raw_submitted_answer}}{{raw_submitted_answer}}{{/raw_submitted_answer}}</textarea>
+        {{/multiline}}
         <span class="input-group-append">
             {{#suffix}}<span class="input-group-text" id="pl-symbolic-input-{{uuid}}-suffix">{{suffix}}</span>{{/suffix}}
 

apps/prairielearn/elements/pl-string-input/pl-string-input.py

@@ -27,6 +27,7 @@ class DisplayType(Enum):
 SHOW_HELP_TEXT_DEFAULT = True
 SHOW_SCORE_DEFAULT = True
 NORMALIZE_TO_ASCII_DEFAULT = False
+MULTILINE_DEFAULT = False
 
 STRING_INPUT_MUSTACHE_TEMPLATE_NAME = "pl-string-input.mustache"
 
@@ -49,6 +50,7 @@ def prepare(element_html: str, data: pl.QuestionData) -> None:
         "show-help-text",
         "normalize-to-ascii",
         "show-score",
+        "multiline",
     ]
     pl.check_attribs(element, required_attribs, optional_attribs)
 
@@ -130,6 +132,7 @@ def render(element_html: str, data: pl.QuestionData) -> str:
             display.value: True,
             "raw_submitted_answer": raw_submitted_answer,
             "parse_error": parse_error,
+            "multiline": pl.get_boolean_attrib(element, "multiline", MULTILINE_DEFAULT),
         }
 
         if show_score and score is not None:

docs/elements.md

@@ -998,8 +998,9 @@ def generate(data):
 | `ignore-case`             | boolean             | false    | Whether or not to enforce case sensitivity (e.g. "hello" != "HELLO").                                                                                                     |
 | `normalize-to-ascii`      | boolean             | false    | Whether non-English characters (accents, non-latin alphabets, fancy quotes) should be normalized to equivalent English characters before submitting the file for grading. |
 | `placeholder`             | text                | None     | Hint displayed inside the input box describing the expected type of input.                                                                                                |
-| `size`                    | integer             | 35       | Size of the input box.                                                                                                                                                    |
+| `size`                    | integer             | 35       | Width of the input box.                                                                                                                                                   |
 | `show-help-text`          | boolean             | true     | Show the question mark at the end of the input displaying required input parameters.                                                                                      |
+| `multiline`               | boolean             | false    | Whether or not to use a multiline input for this element.                                                                                                                 |
 
 #### Example implementations