MDL-74610 quiz: multiple grades - UI mockup and nav

This commit is contained in:
Tim Hunt 2023-02-27 12:59:52 +00:00
parent b621a7e4b3
commit dfb3de1eb3
7 changed files with 501 additions and 2 deletions

View File

@ -0,0 +1,50 @@
<?php
// 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/>.
namespace mod_quiz\output;
use mod_quiz\structure;
use renderable;
use renderer_base;
use templatable;
/**
* Represents the page where teachers can set up additional grade items.
*
* @package mod_quiz
* @category output
* @copyright 2023 The Open University
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class edit_grading_page implements renderable, templatable {
/**
* Constructor.
*
* @param structure $structure
*/
public function __construct(
/** @var structure structure of the quiz for which to display the grade edit page. */
protected readonly structure $structure,
) {
}
public function export_for_template(renderer_base $output) {
return [];
}
}

View File

@ -0,0 +1,78 @@
<?php
// 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/>.
namespace mod_quiz\output;
use moodle_url;
use renderable;
use renderer_base;
use templatable;
use url_select;
/**
* Represents the tertiary navigation around the quiz edit pages.
*
* @package mod_quiz
* @copyright 2023 The Open University
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class edit_nav_actions implements renderable, templatable {
/** @var string option for $whichpage argument to the constructor. */
const SUMMARY = 'summary';
/** @var string option for $whichpage argument to the constructor. */
const GRADING = 'grading';
/**
* overrides_action constructor.
*
* @param int $cmid The course module id.
* @param string $whichpage self::SUMMARY (edit.php) or self::GRADING (editgrading.php).
*/
public function __construct(
/** @var int The course module ID. */
protected readonly int $cmid,
/** @var string which page this is. Either self::SUMMARY (edit.php) or self::GRADING (editgrading.php). */
protected readonly string $whichpage,
) {
}
public function export_for_template(renderer_base $output): array {
// Build the navigation drop-down.
$questionsurl = new moodle_url('/mod/quiz/edit.php', ['cmid' => $this->cmid]);
$complexgradingurl = new moodle_url('/mod/quiz/editgrading.php', ['cmid' => $this->cmid]);
$menu = [
$questionsurl->out(false) => get_string('questions', 'quiz'),
$complexgradingurl->out(false) => get_string('complexgrading', 'quiz'),
];
$overridesnav = new url_select(
$menu,
$this->whichpage === self::SUMMARY ? $questionsurl->out(false) : $complexgradingurl->out(false),
null
);
$overridesnav->set_label(get_string('quizsetupnavigation', 'quiz'), ['class' => 'sr-only']);
return [
'navmenu' => $overridesnav->export_for_template($output),
];
}
}

View File

@ -40,6 +40,7 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
use mod_quiz\output\edit_nav_actions;
use mod_quiz\quiz_settings;
require_once(__DIR__ . '/../../config.php');
@ -186,7 +187,12 @@ if ($message = optional_param('message', '', PARAM_TEXT)) {
core\notification::add($message, core\notification::SUCCESS);
}
echo $OUTPUT->header();
$tertiarynav = new edit_nav_actions($cmid, edit_nav_actions::SUMMARY);
// Do output.
echo $output->header();
echo $output->render($tertiarynav);
// Initialise the JavaScript.
$quizeditconfig = new stdClass();
$quizeditconfig->url = $thispageurl->out(true, ['qbanktool' => '0']);
@ -211,4 +217,4 @@ echo $output->edit_page($quizobj, $structure, $contexts, $thispageurl, $pagevars
// Questions wrapper end.
echo html_writer::end_tag('div');
echo $OUTPUT->footer();
echo $output->footer();

72
mod/quiz/editgrading.php Normal file
View File

@ -0,0 +1,72 @@
<?php
// 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/>.
/**
* Page to edit complex grading setups for quizzes
*
* For quizzes with basic grading, everything can be done on edit.php.
* However, more advanced options are possible, if you come to this
* separate page.
*
* @package mod_quiz
* @copyright 2023 The Open University
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
use mod_quiz\output\edit_grading_page;
use mod_quiz\output\edit_nav_actions;
use mod_quiz\quiz_settings;
// The require_login check is done in question_edit_setup, but the automated checker can't see this.
// phpcs:ignore moodle.Files.RequireLogin.Missing
require_once(__DIR__ . '/../../config.php');
require_once($CFG->dirroot . '/mod/quiz/locallib.php');
require_once($CFG->dirroot . '/question/editlib.php');
list($thispageurl, $contexts, $cmid, $cm, $quiz, $pagevars) =
question_edit_setup('editq', '/mod/quiz/editgrading.php', true);
$PAGE->set_url($thispageurl);
$PAGE->set_secondary_active_tab('mod_quiz_edit');
// You need mod/quiz:manage in addition to question capabilities to access this page.
require_capability('mod/quiz:manage', $contexts->lowest());
// Get the course object and related bits.
$course = get_course($quiz->course);
$quizobj = new quiz_settings($quiz, $cm, $course);
$structure = $quizobj->get_structure();
$editpage = new edit_grading_page($structure);
$quizhasattempts = quiz_has_attempts($quiz->id);
// Initialise output.
$PAGE->set_pagelayout('incourse');
$PAGE->set_pagetype('mod-quiz-edit');
$output = $PAGE->get_renderer('mod_quiz', 'edit');
$PAGE->set_title(get_string('editingquizx', 'quiz', format_string($quiz->name)));
$PAGE->set_heading($course->fullname);
$PAGE->activityheader->disable();
$PAGE->set_secondary_active_tab('mod_quiz_edit');
$tertiarynav = new edit_nav_actions($cmid, edit_nav_actions::GRADING);
// Do output.
echo $output->header();
echo $output->render($tertiarynav);
echo $output->render($editpage);
echo $output->footer();

View File

@ -191,6 +191,7 @@ $string['completionminattemptserror'] = 'Minimum number of attempts must be lowe
$string['completionpassorattemptsexhausteddesc'] = 'Student must achieve a passing grade, or exhaust all available attempts to complete this activity';
$string['completionattemptsexhausted'] = 'Passing grade or all available attempts completed';
$string['completionattemptsexhausted_help'] = 'Mark quiz complete when the student has exhausted the maximum number of attempts.';
$string['complexgrading'] = 'Complex grading setup';
$string['configadaptive'] = 'If you choose Yes for this option then the student will be allowed multiple responses to a question even within the same attempt at the quiz.';
$string['configattemptsallowed'] = 'Restriction on the number of attempts students are allowed at the quiz.';
$string['configdecimaldigits'] = 'Number of digits that should be shown after the decimal point when displaying grades.';
@ -810,6 +811,7 @@ $string['quiz:reopenattempts'] = 'Reopen never submitted quiz attempts';
$string['quizreport'] = 'Quiz report';
$string['quiz:reviewmyattempts'] = 'Review your own attempts';
$string['quizsettings'] = 'Quiz settings';
$string['quizsetupnavigation'] = 'Quiz setup navigation';
$string['quiz:view'] = 'View quiz information';
$string['quiz:viewreports'] = 'View quiz reports';
$string['quiztimer'] = 'Quiz Timer';

View File

@ -0,0 +1,232 @@
{{!
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 mod_quiz/edit_grading_page
Display the Quiz complex grading page, from below tertiary nav, to above the footer.
Classes required for JS:
* none.
Data attributes required for JS:
* Many. See mod_quiz/edit_grading module.
Context variables required for this template:
* TBC
Example context (json):
{
}
}}
<h2>Quiz grading setup (advanced view)</h2>
<h3>Grade items</h3>
<table class="table table-striped table-responsive">
<thead>
<tr>
<th scope="col">Grade item</th>
<th scope="col">Max mark</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 1" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429000" data-value="1" data-editlabel="New name for Grade item 1" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item name">
Spelling
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item name" role="img" aria-label="Edit grade item name"></i>
</span>
</a>
</span>
</th>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 1 maximum" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429000" data-value="1" data-editlabel="New maximum for Grade item 1" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item maximum">
8.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item maximum" role="img" aria-label="Edit grade item maximum"></i>
</span>
</a>
</span>
</td>
<td class="align-middle">
<a href="#" data-delete-itemid="429001">
<i class="icon fa fa-trash fa-fw" title="Delete this grade item" role="img" aria-label="Delete this grade item"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 2" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429001" data-value="1" data-editlabel="New name for Grade item 2" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item name">
Grammar
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item name" role="img" aria-label="Edit grade item name"></i>
</span>
</a>
</span>
</th>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 2 maximum" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429001" data-value="1" data-editlabel="New maximum for Grade item 2" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item maximum">
8.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item maximum" role="img" aria-label="Edit grade item maximum"></i>
</span>
</a>
</span>
</td>
<td class="align-middle">
<a href="#" data-delete-itemid="429001">
<i class="icon fa fa-trash fa-fw" title="Delete this grade item" role="img" aria-label="Delete this grade item"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 3" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429002" data-value="1" data-editlabel="New name for Grade item 3" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item name">
Comprehension
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item name" role="img" aria-label="Edit grade item name"></i>
</span>
</a>
</span>
</th>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade item 3 maximum" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429002" data-value="1" data-editlabel="New maximum for Grade item 3" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit grade item maximum">
8.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit grade item maximum" role="img" aria-label="Edit grade item maximum"></i>
</span>
</a>
</span>
</td>
<td class="align-middle">
<a href="#" data-delete-itemid="429001">
<i class="icon fa fa-trash fa-fw" title="Delete this grade item" role="img" aria-label="Delete this grade item"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade total maximum" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429000" data-value="1" data-editlabel="New maximum for total grade" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit total grade maximum">
24.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit total grade maximum" role="img" aria-label="Edit total grade maximum"></i>
</span>
</a>
</span>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<div class="mb-5">
<button type="button" class="btn btn-secondary">Add grade item</button>
<button type="button" class="btn btn-secondary">Set up one grade item per section</button>
</div>
<h3>Mark scheme</h3>
<table class="table table-striped table-responsive">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Question</th>
<th scope="col">Spelling</th>
<th scope="col">Grammar</th>
<th scope="col">Comprehension</th>
</tr>
</thead>
<tbody>
<tr class="mod_quiz-new-section">
<td colspan="5">
<h4>Section 1: Holidays</h4>
</td>
</tr>
<tr>
<td>i</td>
<th scope="row">
<img class="icon activityicon" title="Description" alt="Description" role="presentation" src="http://localhost/moodle_head/theme/image.php/boost/qtype_description/1677258549/icon">
<span class="questionname">Instructions</span>
<span class="questiontext">To answer this quiz you need to ...</span>
</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>1</td>
<th scope="row">
<img class="icon activityicon" title="Short answer" alt="" role="presentation" src="http://localhost/moodle_head/theme/image.php/boost/qtype_multichoice/1677258549/icon">
<span class="questionname">Beach 1</span>
<span class="questiontext">What colour is the sand?</span>
</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade for this question" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429000" data-value="1" data-editlabel="New maximum grade for this question" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit the grade for this question">
2.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit the grade for this question" role="img" aria-label="Edit the grade for this question"></i>
</span>
</a>
</span>
</td>
</tr>
<tr>
<td>2</td>
<th scope="row">
<img class="icon activityicon" title="Short answer" alt="" role="presentation" src="http://localhost/moodle_head/theme/image.php/boost/qtype_shortanswer/1677258549/icon">
<span class="questionname">Beach 2</span>
<span class="questiontext">The sea is blue. How do you write that in French?</span>
</th>
<td>
<span class="inplaceeditable inplaceeditable-text" data-inplaceeditable="Grade for this question" data-component="mod_quiz" data-itemtype="slotdisplaynumber" data-itemid="429000" data-value="1" data-editlabel="New maximum grade for this question" data-type="text" data-options="">
<a href="#" class="quickeditlink aalink" data-inplaceeditablelink="1" title="Edit the grade for this question">
2.00
<span class="quickediticon">
<i class="icon fa fa-pencil fa-fw " title="Edit the grade for this question" role="img" aria-label="Edit the grade for this question"></i>
</span>
</a>
</span>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="mod_quiz-new-section">
<td colspan="5">
<h4>Section 2: Food</h4>
</td>
</tr>
<tr class="mod_quiz-new-section">
<td colspan="5">
<h4>Section 3: Pets</h4>
</td>
</tr>
</tbody>
</table>

View File

@ -0,0 +1,59 @@
{{!
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 mod_quiz/edit_nav_actions
Actions bar at the top of the various quiz edit pages.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* overridesnav - must alwasy be present.
* addoverridebutton - should only be present if the user has permission to add a new override.
Example context (json):
{
"id": "url_select_test",
"action": "https://example.com/post",
"formid": "url_select_form",
"sesskey": "sesskey",
"navmenu": {
"options": [{
"name": "Questions",
"value": "/mod/quiz/edit.php?cmid=123"
},
{
"name": "Complex grading",
"value": "/mod/quiz/editgrading.php?cmid=123"
}
]
}
}
}}
<div class="container-fluid tertiary-navigation">
<div class="row">
{{#navmenu}}
<div class="navitem">
{{>core/url_select}}
</div>
{{/navmenu}}
</div>
</div>