Improve question print display for interactive types

PoetOS · Oct 29, 2024 · 87f3161 · 87f3161
1 parent f2ffa46
commit 87f3161
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 14 deletions.
diff --git a/classes/question/date.php b/classes/question/date.php
@@ -85,6 +85,7 @@ protected function question_survey_display($response, $descendantsdata, $blankqu
         $choice->value = (isset($response->answers[$this->id][0]->value) ? $response->answers[$this->id][0]->value : '');
         $questiontags->qelements = new \stdClass();
         $questiontags->qelements->choice = $choice;
+        $questiontags->isprint = $this->get_isprint();
         return $questiontags;
     }
 

diff --git a/classes/question/drop.php b/classes/question/drop.php
@@ -117,6 +117,7 @@ protected function question_survey_display($response, $dependants, $blankquestio
         $chobj->class = 'select custom-select menu q'.$this->id;
         $chobj->options = $options;
         $choicetags->qelements->choice = $chobj;
+        $choicetags->isprint = $this->get_isprint();
 
         return $choicetags;
     }

diff --git a/classes/question/essay.php b/classes/question/essay.php
@@ -89,13 +89,12 @@ protected function question_survey_display($response, $descendantsdata, $blankqu
         } else {
             $value = '';
         }
-        if ($canusehtmleditor) {
+        if ($canusehtmleditor && !$this->get_isprint()) {
             $editor = editors_get_preferred_editor();
             $editor->use_editor($name, questionnaire_get_editor_options($this->context));
             $texteditor = html_writer::tag('textarea', $value,
                             ['id' => $name, 'name' => $name, 'rows' => $rows, 'cols' => $cols, 'class' => 'form-control']);
         } else {
-            $editor = FORMAT_PLAIN;
             $texteditor = html_writer::tag('textarea', $value,
                             ['id' => $name, 'name' => $name, 'rows' => $rows, 'cols' => $cols]);
         }

diff --git a/classes/question/question.php b/classes/question/question.php
@@ -109,6 +109,9 @@ abstract class question {
     /** @var mixed $extradata Any custom data for the question type. */
     public $extradata = '';
 
+    /** @var boolean $isprint The isprint flag. */
+    public $isprint = false;
+
     /** @var array $qtypenames List of all question names. */
     private static $qtypenames = [
         QUESYESNO => 'yesno',
@@ -467,6 +470,24 @@ public function get_notifications() {
         }
     }
 
+    /**
+     * Sets the print status of the page.
+     *
+     * @param bool $isprint Optional. Defaults to false. If true, sets the page as a print page.
+     */
+    public function set_isprint(bool $isprint = false) {
+        $this->isprint = $isprint;
+    }
+
+    /**
+     * Retrieves the print status of the page.
+     *
+     * @return bool True if the page is a print page, otherwise false.
+     */
+    public function get_isprint(): bool {
+        return (bool) $this->isprint;
+    }
+
     /**
      * Each question type must define its response class.
      * @return object The response object based off of questionnaire_response_base.

diff --git a/classes/question/slider.php b/classes/question/slider.php
@@ -121,6 +121,7 @@ protected function question_survey_display($response, $dependants = [], $blankqu
         $extradata->id = self::qtypename($this->type_id) . $this->id;
         $questiontags->qelements = new \stdClass();
         $questiontags->qelements->extradata = $extradata;
+        $questiontags->isprint = $this->get_isprint();
         return $questiontags;
     }
 

diff --git a/classes/question/text.php b/classes/question/text.php
@@ -93,6 +93,7 @@ protected function question_survey_display($response, $descendantsdata, $blankqu
             format_string(stripslashes($response->answers[$this->id][0]->value)) : '');
         $choice->id = self::qtypename($this->type_id) . $this->id;
         $questiontags->qelements->choice = $choice;
+        $questiontags->isprint = $this->get_isprint();
         return $questiontags;
     }
 

diff --git a/lang/en/questionnaire.php b/lang/en/questionnaire.php
@@ -421,6 +421,7 @@
 $string['print'] = 'Print this Response';
 $string['printblank'] = 'Print Blank';
 $string['printblanktooltip'] = 'Opens printer-friendly window with blank Questionnaire';
+$string['printstrictdateformatting'] = 'Enter the date';
 $string['printtooltip'] = 'Opens printer-friendly window with current Response';
 
 $string['privacy:metadata:questionnaire_response'] = 'A response in progress or submitted';

diff --git a/questionnaire.class.php b/questionnaire.class.php
@@ -1620,6 +1620,7 @@ public function survey_print_render($courseid, $message = '', $referer='', $rid=
                 } else {
                     $dependants = [];
                 }
+                $this->questions[$questionid]->set_isprint($referer === 'print');
                 $output .= $this->renderer->question_output($this->questions[$questionid], $this->responses[0] ?? [],
                     $i++, null, $dependants);
                 $this->page->add_to_page('questions', $output);

diff --git a/styles.css b/styles.css
@@ -170,6 +170,18 @@ td.selected {
     margin-top: 10px;
 }
 
+#page-mod-questionnaire-print .printdropdown input:first-child,
+#page-mod-questionnaire-print .printdropdown label:first-of-type,
+#page-mod-questionnaire-print .printdropdown br:first-of-type {
+    display: none;
+}
+
+#page-mod-questionnaire-print .print-text {
+    min-width: 100%;
+    box-sizing: border-box;
+    height: 30px;
+}
+
 #page-mod-questionnaire-complete .notice .buttons div,
 #page-mod-questionnaire-complete .notice .buttons form {
     display: inline;
@@ -543,3 +555,71 @@ td.selected {
     height: 2px;
     left: 50%;
 }
+
+/* Styles for the print blank page. */
+#page-mod-questionnaire-print .slider {
+    position: relative;
+    width: 100%;
+}
+
+#page-mod-questionnaire-print.path-mod-questionnaire .question-slider.print-slider {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+#page-mod-questionnaire-print.path-mod-questionnaire .print-slider .left-side-label,
+#page-mod-questionnaire-print.path-mod-questionnaire .print-slider .right-side-label,
+#page-mod-questionnaire-print.path-mod-questionnaire .print-slider .slider {
+    margin: 0;
+}
+
+#page-mod-questionnaire-print input[type="range"] {
+    appearance: none;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #ddd;
+}
+
+#page-mod-questionnaire-print input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+}
+
+#page-mod-questionnaire-print input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+}
+
+#page-mod-questionnaire-print input[type="range"]::-ms-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+}
+
+#page-mod-questionnaire-print .path-mod-questionnaire .right-side-label,
+#page-mod-questionnaire-print .path-mod-questionnaire .left-side-label {
+    margin: 0;
+}
+
+#page-mod-questionnaire-print .bubble {
+    display: none;
+}
+
+@media print {
+    #page-mod-questionnaire-print .slider {
+        position: relative;
+        width: 100%;
+    }
+
+    #page-mod-questionnaire-print input[type="range"] {
+        appearance: none;
+        width: 100%;
+        border: 1px solid #000000;
+        border-radius: 5px;
+    }
+}
diff --git a/templates/question_date.mustache b/templates/question_date.mustache
@@ -29,6 +29,7 @@
 
     Example context (json):
     {
+        "isprint": false,
         "qelements": {
             "choice": {
                 "type": "text",
@@ -42,11 +43,17 @@
 <!-- Begin HTML generated from question_date template. -->
 {{#qelements}}
 {{#choice}}
-<div class="qn-datemsg">{{# str }}strictdateformatting, mod_questionnaire{{/ str}}</div>
-<div class="qn-date">
-    <input type="{{type}}" name="{{choice.name}}" value="{{choice.value}}" />
-<!--    <input {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} type="text" size="12" name="{{choice.name}}" maxlength="10" value="{{choice.value}}" /> -->
-</div>
+{{#isprint}}
+    <div class="qn-datemsg">{{# str }}printstrictdateformatting, mod_questionnaire{{/ str}}</div>
+    <input type="text" size="{{choice.size}}" name="{{choice.name}}" />
+{{/isprint}}
+{{^isprint}}
+    <div class="qn-datemsg">{{# str }}strictdateformatting, mod_questionnaire{{/ str}}</div>
+    <div class="qn-date">
+        <input type="{{type}}" name="{{choice.name}}" value="{{choice.value}}" />
+        <!--    <input {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} type="text" size="12" name="{{choice.name}}" maxlength="10" value="{{choice.value}}" /> -->
+    </div>
+{{/isprint}}
 {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_date template. -->
diff --git a/templates/question_drop.mustache b/templates/question_drop.mustache
@@ -29,6 +29,7 @@
 
     Example context (json):
     {
+        "isprint": false,
         "qelements": {
             "choice": {
                 "id": "choiceid1",
@@ -54,11 +55,22 @@
 <!-- Begin HTML generated from question_drop template. -->
 {{#qelements}}
 {{#choice}}
-<select id="{{choice.id}}" name="{{choice.name}}" class="{{choice.class}}" {{#choice.onchange}}onchange="{{.}}"{{/choice.onchange}}>
-{{#choice.options}}
-<option {{#selected}}selected="selected" {{/selected}}value="{{value}}">{{label}}</option>
-{{/choice.options}}
-</select>
+    {{#isprint}}
+        <div class="printdropdown">
+            {{#choice.options}}
+                <input id="{{value}}" value="{{choice.value}}" {{#selected}}checked="checked"{{/selected}} name="{{choice.name}}" type="checkbox" aria-label="{{label}}"/>
+                <label for="{{value}}">{{label}}</label>
+                <br/>
+            {{/choice.options}}
+        </div>
+    {{/isprint}}
+    {{^isprint}}
+        <select id="{{choice.id}}" name="{{choice.name}}" class="{{choice.class}}" {{#choice.onchange}}onchange="{{.}}"{{/choice.onchange}}>
+            {{#choice.options}}
+                <option {{#selected}}selected="selected" {{/selected}}value="{{value}}">{{label}}</option>
+            {{/choice.options}}
+        </select>
+    {{/isprint}}
 {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_drop template. -->
diff --git a/templates/question_slider.mustache b/templates/question_slider.mustache
@@ -29,6 +29,7 @@
 
     Example context (json):
     {
+        "isprint": false,
         "qelements": {
             "extradata":
                 {
@@ -48,7 +49,7 @@
 <!-- Begin HTML generated from question_slider template. -->
 {{#qelements}}
     {{#extradata}}
-        <div class="question-slider">
+        <div class="{{#isprint}}print-slider{{/isprint}} question-slider">
             <div class="left-side-label">{{extradata.leftlabel}}</div>
             <div class="middle-side-content">
                 <div class="slider">

diff --git a/templates/question_text.mustache b/templates/question_text.mustache
@@ -29,6 +29,7 @@
 
     Example context (json):
     {
+        "isprint": false,
         "qelements": {
             "choice": {
                 "onkeypress": "dosomething()",
@@ -44,7 +45,7 @@
 <!-- Begin HTML generated from question_text template. -->
 {{#qelements}}
 {{#choice}}
-<input {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} type="text" size="{{choice.size}}" name="{{choice.name}}" {{#choice.maxlength}}maxlength="{{choice.maxlength}}"{{/choice.maxlength}} value="{{choice.value}}" id="{{choice.id}}" />
+<input {{#isprint}}class="print-text"{{/isprint}} {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} type="text" size="{{choice.size}}" name="{{choice.name}}" {{#choice.maxlength}}maxlength="{{choice.maxlength}}"{{/choice.maxlength}} value="{{choice.value}}" id="{{choice.id}}" />
 {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_text template. -->
diff --git a/tests/behat/view_questionnaire.feature b/tests/behat/view_questionnaire.feature
@@ -100,3 +100,78 @@ Feature: Questionnaires can be public, private or template
     And I log out
     And I am on the "Questionnaire from public" "mod_questionnaire > view" page logged in as "student1"
     Then I should see "This questionnaire is no longer available. Ask your teacher to delete it."
+
+  @javascript @_switch_window
+  Scenario: Test view questions in print blank page.
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | manager1 | Manager   | 1        | manager1@example.com |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | category |
+      | Course 1 | C1        | 0        |
+      | Course 2 | C2        | 0        |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | manager1 | C1     | manager        |
+      | manager1 | C2     | manager        |
+      | student1 | C2     | student        |
+    And the following "activities" exist:
+      | activity      | name               | description                    | course | idnumber       |
+      | questionnaire | Test questionnaire | Test questionnaire description | C1     | questionnaire0 |
+    And the following config values are set as admin:
+      | coursebinenable | 0 | tool_recyclebin |
+    And I log in as "manager1"
+    And I am on site homepage
+    And I am on "Course 1" course homepage
+    And I follow "Test questionnaire"
+    And I follow "Test questionnaire"
+    And I navigate to "Questions" in current page administration
+    And I add a "Date" question and I fill the form with:
+      | Question Name | Q1                 |
+      | Yes           | y                  |
+      | Question Text | Enter today's date |
+    And I add a "Dropdown Box" question and I fill the form with:
+      | Question Name    | Q2                         |
+      | Yes              | y                          |
+      | Question Text    | Select one choice          |
+      | Possible answers | 1=One,2=Two,3=Three,4=Four |
+    And I add a "Essay Box" question and I fill the form with:
+      | Question Name   | Q3               |
+      | No              | n                |
+      | Response format | 0                |
+      | Input box size  | 10 lines         |
+      | Question Text   | Enter your essay |
+    And I add a "Slider" question and I fill the form with:
+      | Question Name                | Q4                   |
+      | Question Text                | Slider question test |
+      | Left label                   | Left                 |
+      | Right label                  | Right                |
+      | Centre label                 | Center               |
+      | Minimum slider range (left)  | 5                    |
+      | Maximum slider range (right) | 100                  |
+      | Slider starting value        | 5                    |
+      | Slider increment value       | 5                    |
+    And I add a "Text Box" question and I fill the form with:
+      | Question Name | Q5         |
+      | Yes           | y          |
+      | Question Text | Enter zero |
+    And I navigate to "Preview" in current page administration
+    And I click on "Print Blank" "link"
+    When I switch to a second window
+    # Check date picker question type.
+    Then "div.qn-datemsg + input[type='text']" "css_element" should exist
+    And "div.qn-datemsg + div > input[type='date']" "css_element" should not exist
+    # Check dropdown question type.
+    And "div.printdropdown input[type='checkbox']" "css_element" should exist
+    And "select.custom-select" "css_element" should not exist
+    # Check essay question type.
+    And ".qn-content textarea" "css_element" should exist
+    And ".qn-content .tox-tinymce" "css_element" should not exist
+    # Check slider question type.
+    And ".question-slider .slider .bubble" "css_element" should not be visible
+    # Check text box question type.
+    And ".print-text" "css_element" should exist