AutorÃa | Ultima modificación | Ver Log |
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template gradingform_rubric/grades/grader/gradingpanel
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* instanceid: Instance of the module this grading form belongs too
* criterion: A gradeable item in the Marking Guide
* name: Name of the gradeable item
* id: ID of the gradeable item
* description: Description shown to students for this gradeable item
* descriptionmarkers: Description shown to teachers for this gradeable item
* maxscore: Max allowable assinable points for this item
* score: Current score assigned to the learner for this item
* remark: Text input for the teacher to relay to the student
* hascomments: Flag for frequently used comments
* comments: Array of frequently used comments
* description: Description of a frequently used comment
Example context (json):
{
"instanceid": "42",
"criterion": [
{
"name": "Motivation",
"id": 13,
"description": "Show your motivation to rock climbing",
"descriptionmarkers": "Does the student show interest in climbing?",
"maxscore": 37,
"score": 20,
"remark": "That's great!",
"hascomments": true,
"comments": [
{"description": "Great work!"},
{"description": "You should really try it before jumping to conclusions"}
]
}
]
}
}}
<form id="gradingform_guide-{{uniqid}}">
<input type="hidden" name="instanceid" value="{{instanceid}}">
{{#criterion}}
<div class="mb-1 criterion" data-gradingform-guide-role="criterion">
<div class="d-flex flex-wrap align-items-center">
<button
class="btn btn-sm btn-info d-inline-flex w-100 mb-2 justify-content-between align-items-center"
aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
aria-expanded="false"
data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
data-toggle="collapse"
type="button"
>
{{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
<circle cx="12" cy="9" r="1" fill="currentColor"></circle>
<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
</svg>
</button>
<div class="collapse w-100" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-description">
<div class="border p-3 mb-2 rounded">
{{{description}}}
{{#descriptionmarkers}}
<hr>
{{{descriptionmarkers}}}
{{/descriptionmarkers}}
</div>
</div>
<hr />
<button class="criterion-toggle btn btn-sm btn-secondary d-inline-flex w-100 justify-content-between align-items-center"
type="button"
data-toggle="collapse"
data-target="#criteria-{{id}}"
aria-expanded="true"
aria-controls="criteria-{{id}}">
<span>{{name}}</span>
<span class="collapsed-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.25L16.25 9.75H7.75L12 15.25Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span>
</span>
<span class="expanded-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9.75L16.25 15.25H7.75L12 9.75Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span>
</span>
</button>
<div class="collapse show border px-3 mt-2 w-100 rounded" id="criteria-{{id}}">
<div class="form-group">
<label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
<input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score"
min="0" max="{{maxscore}}"
aria-label="{{#str}}scoreforcriterion, gradingform_guide, {{name}}{{/str}}" style="width: 100px;">
<span id="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-hidden="true" class="sr-only">{{!
}}{{#str}}score_help, gradingform_guide, { "criterion": {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}}
</span>
</div>
<div class="form-group ">
<label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
<div class="input-group mb-3 form-inset form-inset-right">
<textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
aria-label="{{#str}}additionalcommentsforcriterion, gradingform_guide, {{name}}{{/str}}"
data-gradingform-guide-role="remark"
rows="2"
data-max-rows="5"
data-auto-rows
>{{remark}}</textarea>
{{#hascomments}}
<button
class="btn btn-sm btn-info d-inline-flex w-100 mt-2 justify-content-between align-items-center text-left collapsed"
aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
aria-expanded="false"
data-toggle="collapse"
data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
type="button"
>
<span>{{#str}}commentpickerforcriterion, gradingform_guide, {{name}}{{/str}}</span>
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
<circle cx="12" cy="9" r="1" fill="currentColor"></circle>
<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
</svg>
</button>
{{/hascomments}}
</div>
{{#hascomments}}
<div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
<div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
<h5 class="mb-1">{{#str}}comments, gradingform_guide{{/str}}</h5>
<div class="list-group">
{{#comments}}
<button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
{{/comments}}
</div>
</div>
</div>
{{/hascomments}}
<span id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" aria-hidden="true" class="sr-only">{{#str}}remark_help, gradingform_guide{{/str}}</span>
</div>
</div>
</div>
</div>
{{/criterion}}
</form>
{{#js}}
require(['gradingform_guide/grades/grader/gradingpanel/comments', 'core/auto_rows'], function(Comments, AutoRows) {
Comments.init('gradingform_guide-{{uniqid}}');
AutoRows.init(document.getElementById('gradingform_guide-{{uniqid}}'));
});
{{/js}}