Merge branch 'MDL-68541-39' of https://github.com/PoetOS/moodle
[moodle.git] / grade / grading / form / guide / templates / grades / grader / gradingpanel.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template gradingform_rubric/grades/grader/gradingpanel
20     Classes required for JS:
21     * none
23     Data attributes required for JS:
24     * none
26     Context variables required for this template:
27     * instanceid: Instance of the module this grading form belongs too
28     * criterion: A gradeable item in the Marking Guide
29     * name: Name of the gradeable item
30     * id: ID of the gradeable item
31     * description: Description shown to students for this gradeable item
32     * descriptionmarkers: Description shown to teachers for this gradeable item
33     * maxscore: Max allowable assinable points for this item
34     * score: Current score assigned to the learner for this item
35     * remark: Text input for the teacher to relay to the student
36     * hascomments: Flag for frequently used comments
37     * comments: Array of frequently used comments
38     * description: Description of a frequently used comment
40     Example context (json):
41     {
42         "instanceid": "42",
43         "criterion": [
44             {
45                 "name": "Motivation",
46                 "id": 13,
47                 "description": "Show your motivation to rock climbing",
48                 "descriptionmarkers": "Does the student show interest in climbing?",
49                 "maxscore": 37,
50                 "score": 20,
51                 "remark": "That's great!",
52                 "hascomments": true,
53                 "comments": [
54                     {"description": "Great work!"},
55                     {"description": "You should really try it before jumping to conclusions"}
56                 ]
57             }
58         ]
59     }
60 }}
61 <form id="gradingform_guide-{{uniqid}}">
62   <input type="hidden" name="instanceid" value="{{instanceid}}">
63   {{#criterion}}
64     <div class="mb-3 criterion" data-gradingform-guide-role="criterion">
65       <div class="d-flex align-items-center">
66         <h5 class="description font-weight-bold mb-0">{{name}}</h5>
67         <button
68             class="btn btn-link px-1"
69             aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
70             aria-expanded="false"
71             data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
72             data-toggle="collapse"
73             type="button"
74           >
75             {{# pix }} info, gradingform_guide {{/ pix }}
76         </button>
77         <button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 font-weight-bold mb-0 ml-auto"
78                 type="button"
79                 data-toggle="collapse"
80                 data-target="#criteria-{{id}}"
81                 aria-expanded="true"
82                 aria-controls="criteria-{{id}}">
83                 <span class="collapsed-icon">
84                     {{#pix}} t/collapsed, core {{/pix}}
85                     <span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span>
86                 </span>
87                 <span class="expanded-icon">
88                     {{#pix}} t/expanded, core {{/pix}}
89                     <span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span>
90                 </span>
91         </button>
92       </div>
93       <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-description">
94           <div class="border p-3 mb-3 bg-white rounded">
95               {{{description}}}
96               {{#descriptionmarkers}}
97                   <hr>
98                   {{{descriptionmarkers}}}
99               {{/descriptionmarkers}}
100           </div>
101       </div>
102       <div class="collapse show" id="criteria-{{id}}">
103         <div class="form-group">
104           <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
105           <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
106               id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
107               aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score">
108           <small id="gradingform_guide-{{uniqid}}-help-{{id}}-score" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
109         </div>
110         <div class="form-group ">
111           <label class="text-muted" for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
112           <div class="input-group mb-3 form-inset form-inset-right">
113             <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
114                 id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
115                 aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
116                 data-gradingform-guide-role="remark"
117                 rows="2"
118                 data-max-rows="5"
119                 data-auto-rows
120                 >{{remark}}</textarea>
121             {{#hascomments}}
122               <button
123                 class="btn btn-icon form-inset-item icon-no-margin p-0 mt-1 mr-1 text-reset collapsed"
124                 aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
125                 aria-expanded="false"
126                 data-toggle="collapse"
127                 data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
128                 type="button"
129               >
130                   {{#pix}}plus, gradingform_guide{{/pix}}
131               </button>
132             {{/hascomments}}
133           </div>
134           {{#hascomments}}
135             <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
136               <div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
137                   <h6>{{#str}}comments, gradingform_guide{{/str}}</h6>
138                 <div class="list-group">
139                   {{#comments}}
140                     <button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
141                   {{/comments}}
142                 </div>
143               </div>
144             </div>
145           {{/hascomments}}
146           <small id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
147         </div>
148       </div>
149     </div>
150   {{/criterion}}
151 </form>
152 {{#js}}
153 require(['gradingform_guide/grades/grader/gradingpanel/comments', 'core/auto_rows'], function(Comments, AutoRows) {
154   Comments.init('gradingform_guide-{{uniqid}}');
155   AutoRows.init(document.getElementById('gradingform_guide-{{uniqid}}'));
156 });
157 {{/js}}