Questionnaire: improve navigation layout (#433)

* Responsive text input boxes.
* Next' buttons right, 'Previous' button kept left.
* Repeat notification/alert at the point of the error, so 'Please answer required question' would appear within the question.
Co-authored-by: toanlam <[email protected]>

Author: mchurchward

questionnaire.class.php

@@ -1249,22 +1249,22 @@ public function print_survey($quser, $userid=false) {
             $this->survey_render($formdata, $formdata->sec, $msg);
             $controlbuttons = [];
             if ($formdata->sec > 1) {
-                $controlbuttons['prev'] = ['type' => 'submit', 'class' => 'btn btn-secondary',
+                $controlbuttons['prev'] = ['type' => 'submit', 'class' => 'btn btn-secondary control-button-prev',
                     'value' => '<< '.get_string('previouspage', 'questionnaire')];
             }
             if ($this->resume) {
-                $controlbuttons['resume'] = ['type' => 'submit', 'class' => 'btn btn-secondary',
+                $controlbuttons['resume'] = ['type' => 'submit', 'class' => 'btn btn-secondary control-button-save',
                     'value' => get_string('save_and_exit', 'questionnaire')];
             }
 
             // Add a 'hidden' variable for the mod's 'view.php', and use a language variable for the submit button.
 
             if ($formdata->sec == $numsections) {
                 $controlbuttons['submittype'] = ['type' => 'hidden', 'value' => 'Submit Survey'];
-                $controlbuttons['submit'] = ['type' => 'submit', 'class' => 'btn btn-primary',
+                $controlbuttons['submit'] = ['type' => 'submit', 'class' => 'btn btn-primary control-button-submit',
                     'value' => get_string('submitsurvey', 'questionnaire')];
             } else {
-                $controlbuttons['next'] = ['type' => 'submit', 'class' => 'btn btn-secondary',
+                $controlbuttons['next'] = ['type' => 'submit', 'class' => 'btn btn-secondary control-button-next',
                     'value' => get_string('nextpage', 'questionnaire').' >>'];
             }
             $this->page->add_to_page('controlbuttons', $this->renderer->complete_controlbuttons($controlbuttons));
@@ -1848,7 +1848,11 @@ private function response_check_format($section, $formdata, $checkmissing = true
             }
             if (!$this->questions[$questionid]->response_complete($formdata)) {
                 $missing++;
-                $strmissing .= get_string('num', 'questionnaire').$qnum.'. ';
+                $strnum = get_string('num', 'questionnaire').$qnum.'. ';
+                $strmissing .= $strnum;
+                // Pop-up   notification at the point of the error.
+                $strnoti = get_string('missingquestion', 'questionnaire').$strnum;
+                $this->questions[$questionid]->add_notification($strnoti);
             }
             if (!$this->questions[$questionid]->response_valid($formdata)) {
                 $wrongformat++;

styles.css

@@ -184,6 +184,37 @@ td.selected {
     float: right;
 }
 
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons {
+    text-align: center;
+    width: 100%;
+    position: relative;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-prev {
+    float: left;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-save {
+    margin-left: 20%;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-prev + .control-button-save {
+    margin-left: 0;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-next,
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-submit {
+    float: right;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons input {
+    margin-right: 0;
+}
+
+#page-mod-questionnaire-complete .mod_questionnaire_completepage .generalbox .notice {
+    padding: 0.5em 0 0.5em 0;
+}
+
 /* progress bar styling */
 
 #page-mod-questionnaire-complete .questionnaire-progressbar {
@@ -306,6 +337,17 @@ td.selected {
     margin-left: 0;
 }
 
+.qn-answer > textarea,
+.qn-content .editor_atto_wrap .editor_atto_content {
+    resize: vertical;
+}
+
+.qn-answer textarea,
+.qn-answer input[type="text"] {
+    box-sizing: border-box;
+    height: auto;
+}
+
 #notice .qn-question {
     margin: 0;
 }

templates/completepage.mustache

@@ -70,8 +70,8 @@
         {{{formstart}}}
         {{#questions}}{{{.}}}{{/questions}}
         {{#pageinfo}}{{{.}}}{{/pageinfo}}
-        <div class="notice" style="padding: 0.5em 0 0.5em 0.2em;">
-            <div class="buttons">
+        <div class="notice">
+            <div class="buttons mod_questionnaire_controlbuttons">
                 {{{controlbuttons}}}
             </div>
         </div>

tests/behat/checkbox_min_max_responses.feature

@@ -55,6 +55,9 @@ Feature: Checkbox questions can have forced minimum and maximum numbers of boxes
     Then I should see "Select one or two choices only"
     And I press "Submit questionnaire"
     Then I should see "Please answer required questions: #1. #2. #3."
+    And I should see "Please answer required question #1."
+    And I should see "Please answer required question #2."
+    And I should see "Please answer required question #3."
     And I set the field "One" to "checked"
     And I set the field "Two" to "checked"
     And I set the field "Three" to "checked"