Skip to content

Commit

Permalink
MDL-29481: phpdocs in renderer, renamed the main CSS class for rubric
Browse files Browse the repository at this point in the history
  • Loading branch information
@marinaglancy
marinaglancy committed Oct 25, 2011
1 parent 01609c9 commit fc5adc3
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 57 deletions.
89 changes: 75 additions & 14 deletions grade/grading/form/rubric/renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/


defined('MOODLE_INTERNAL') || die();

/**
Expand All @@ -31,8 +30,25 @@
class gradingform_rubric_renderer {

/**
* This function returns html code for displaying criterion. Depending on $mode it may be the
* code to edit rubric, to preview the rubric, to evaluate somebody or to review the evaluation.
*
* This function may be called from display_rubric() to display the whole rubric, or it can be
* called by itself to return a template used by JavaScript to add new empty criteria to the
* rubric being designed.
* In this case it will use macros like {NAME}, {LEVELS}, {CRITERION-id}, etc.
*
* When overriding this function it is very important to remember that all elements of html
* form (in edit or evaluate mode) must have the name $elementname.
*
* @param int $mode @see gradingform_rubric_controller
* Also JavaScript relies on the class names of elements and when developer changes them
* script might stop working.
*
* @param int $mode rubric display mode @see gradingform_rubric_controller
* @param string $elementname the name of the form element (in editor mode) or the prefix for div ids (in view mode)
* @param array|null $criterion criterion data
* @param string $levels_str evaluated templates for this criterion levels
* @param array|null $value (only in view mode) teacher's feedback on this criterion
* @return string
*/
public function criterion_template($mode, $elementname = '{NAME}', $criterion = null, $levels_str = '{LEVELS}', $value = null) {
Expand Down Expand Up @@ -96,6 +112,27 @@ public function criterion_template($mode, $elementname = '{NAME}', $criterion =
return $criterion_template;
}

/**
* This function returns html code for displaying one level of one criterion. Depending on $mode
* it may be the code to edit rubric, to preview the rubric, to evaluate somebody or to review the evaluation.
*
* This function may be called from display_rubric() to display the whole rubric, or it can be
* called by itself to return a template used by JavaScript to add new empty level to the
* criterion during the design of rubric.
* In this case it will use macros like {NAME}, {CRITERION-id}, {LEVEL-id}, etc.
*
* When overriding this function it is very important to remember that all elements of html
* form (in edit or evaluate mode) must have the name $elementname.
*
* Also JavaScript relies on the class names of elements and when developer changes them
* script might stop working.
*
* @param int $mode rubric display mode @see gradingform_rubric_controller
* @param string $elementname the name of the form element (in editor mode) or the prefix for div ids (in view mode)
* @param string|int $criterionid either id of the nesting criterion or a macro for template
* @param array|null $level level data, also in view mode it might also have property $level['checked'] whether this level is checked
* @return string
*/
public function level_template($mode, $elementname = '{NAME}', $criterionid = '{CRITERION-id}', $level = null) {
// TODO definition format
if (!isset($level['id'])) {
Expand Down Expand Up @@ -146,7 +183,25 @@ public function level_template($mode, $elementname = '{NAME}', $criterionid = '{
return $level_template;
}

protected function rubric_template($mode, $elementname = '{NAME}', $criteria_str = '{CRITERIA}') {
/**
* This function returns html code for displaying rubric template (content before and after
* criteria list). Depending on $mode it may be the code to edit rubric, to preview the rubric,
* to evaluate somebody or to review the evaluation.
*
* This function is called from display_rubric() to display the whole rubric.
*
* When overriding this function it is very important to remember that all elements of html
* form (in edit or evaluate mode) must have the name $elementname.
*
* Also JavaScript relies on the class names of elements and when developer changes them
* script might stop working.
*
* @param int $mode rubric display mode @see gradingform_rubric_controller
* @param string $elementname the name of the form element (in editor mode) or the prefix for div ids (in view mode)
* @param string $criteria_str evaluated templates for this rubric's criteria
* @return string
*/
protected function rubric_template($mode, $elementname, $criteria_str) {
$classsuffix = ''; // CSS suffix for class of the main div. Depends on the mode
switch ($mode) {
case gradingform_rubric_controller::DISPLAY_EDIT_FULL:
Expand All @@ -163,7 +218,7 @@ protected function rubric_template($mode, $elementname = '{NAME}', $criteria_str
$classsuffix = ' review'; break;
}

$rubric_template = html_writer::start_tag('div', array('id' => 'rubric-{NAME}', 'class' => 'clearfix form_rubric'.$classsuffix));
$rubric_template = html_writer::start_tag('div', array('id' => 'rubric-{NAME}', 'class' => 'clearfix gradingform_rubric'.$classsuffix));
$rubric_template .= html_writer::tag('div', $criteria_str, array('class' => 'criteria', 'id' => '{NAME}-criteria'));
if ($mode == gradingform_rubric_controller::DISPLAY_EDIT_FULL) {
$value = get_string('addcriterion', 'gradingform_rubric');
Expand All @@ -176,12 +231,18 @@ protected function rubric_template($mode, $elementname = '{NAME}', $criteria_str
}

/**
* Returns html code for displaying the rubric in the specified mode
* This function returns html code for displaying rubric. Depending on $mode it may be the code
* to edit rubric, to preview the rubric, to evaluate somebody or to review the evaluation.
*
* It is very unlikely that this function needs to be overriden by theme. It does not produce
* any html code, it just prepares data about rubric design and evaluation, adds the CSS
* class to elements and calls the functions level_template, criterion_template and
* rubric_template
*
* @param array $criteria
* @param int $mode
* @param string $elementname
* @param array $values
* @param array $criteria data about the rubric design
* @param int $mode rubric display mode @see gradingform_rubric_controller
* @param string $elementname the name of the form element (in editor mode) or the prefix for div ids (in view mode)
* @param array $values evaluation result
* @return string
*/
public function display_rubric($criteria, $mode, $elementname = null, $values = null) {
Expand All @@ -202,7 +263,7 @@ public function display_rubric($criteria, $mode, $elementname = null, $values =
$level['checked'] = (isset($criterionvalue['levelid']) && ((int)$criterionvalue['levelid'] === $levelid));
if ($level['checked'] && ($mode == gradingform_rubric_controller::DISPLAY_EVAL_FROZEN || $mode == gradingform_rubric_controller::DISPLAY_REVIEW)) {
$level['class'] .= ' checked';
//in mode DISPLAY_EVAL the class 'checked' will be added by JS if it is enabled. If it is not enabled, the 'checked' class will only confuse
//in mode DISPLAY_EVAL the class 'checked' will be added by JS if it is enabled. If JS is not enabled, the 'checked' class will only confuse
}
$levels_str .= $this->level_template($mode, $elementname, $id, $level);
}
Expand All @@ -212,13 +273,13 @@ public function display_rubric($criteria, $mode, $elementname = null, $values =
}

/**
* Help function to return CSS class names for element (first/last/even/odd)
* Help function to return CSS class names for element (first/last/even/odd) with leading space
*
* @param <type> $cnt
* @param <type> $maxcnt
* @param int $cnt
* @param int $maxcnt
* @return string
*/
private function get_css_class_suffix($cnt, $maxcnt) {
protected function get_css_class_suffix($cnt, $maxcnt) {
$class = '';
if ($cnt == 0) {
$class .= ' first';
Expand Down
86 changes: 43 additions & 43 deletions grade/grading/form/rubric/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
.form_rubric.editor[.frozen|.editable]
.criterion[.first][.last].odd/even
.gradingform_rubric.editor[.frozen|.editable]
.criterion[.first][.last][.odd|.even]
.controls
.moveup
[input type=submit]
Expand All @@ -10,7 +10,7 @@
[input type=submit]
.description
.levels
.level[.first][.last].odd/even
.level[.first][.last][.odd|.even]
.definition
[textarea]
.score
Expand All @@ -25,11 +25,11 @@
.addcriterion
[input type=submit]
.form_rubric.evaluate
.criterion[.first][.last].odd/even
.gradingform_rubric[.review][.evaluate[.editable|.frozen]]
.criterion[.first][.last][.odd|.even]
.description
.levels
.level[.first][.last].odd/even
.level[.first][.last][.odd|.even]
.radio
input
.definition
Expand All @@ -39,55 +39,55 @@
*/


.form_rubric.editor .criterion .controls,
.form_rubric .criterion .description,
.form_rubric .criterion .levels,
.form_rubric.editor .criterion .addlevel,
.form_rubric .criterion .remark,
.form_rubric .criterion .levels .level {display: inline-block; vertical-align: top;overflow: hidden;}
.gradingform_rubric.editor .criterion .controls,
.gradingform_rubric .criterion .description,
.gradingform_rubric .criterion .levels,
.gradingform_rubric.editor .criterion .addlevel,
.gradingform_rubric .criterion .remark,
.gradingform_rubric .criterion .levels .level {display: inline-block; vertical-align: top;overflow: hidden;}

.form_rubric.editor .criterion .controls,
.form_rubric .criterion .description,
.form_rubric.editor .criterion .addlevel,
.form_rubric .criterion .remark,
.form_rubric .criterion .levels .level {padding:3px;}
.gradingform_rubric.editor .criterion .controls,
.gradingform_rubric .criterion .description,
.gradingform_rubric.editor .criterion .addlevel,
.gradingform_rubric .criterion .remark,
.gradingform_rubric .criterion .levels .level {padding:3px;}

/* Those divs should extend vertically and fill 100% of parent element height */
.form_rubric .criterion .levels .level,
.form_rubric .criterion .description,
.form_rubric .criterion .levels {padding-bottom: 32767px;margin-bottom: -32767px;}
.gradingform_rubric .criterion .levels .level,
.gradingform_rubric .criterion .description,
.gradingform_rubric .criterion .levels {padding-bottom: 32767px;margin-bottom: -32767px;}

.form_rubric .criterion {border:1px solid #DDD;overflow: hidden;}
.form_rubric .criterion.even {background:#F0F0F0;}
.gradingform_rubric .criterion {border:1px solid #DDD;overflow: hidden;}
.gradingform_rubric .criterion.even {background:#F0F0F0;}

.form_rubric .criterion .description {width:150px;font-weight:bold;}
.gradingform_rubric .criterion .description {width:150px;font-weight:bold;}

.form_rubric .criterion .levels .level {border-left:1px solid #DDD;min-width:80px;max-width:150px;position:relative;}
.form_rubric .criterion .levels .level.last {border-right:1px solid #DDD;}
.gradingform_rubric .criterion .levels .level {border-left:1px solid #DDD;min-width:80px;max-width:150px;position:relative;}
.gradingform_rubric .criterion .levels .level.last {border-right:1px solid #DDD;}

.form_rubric .plainvalue.empty {font-style: italic; color: #AAA;}
.gradingform_rubric .plainvalue.empty {font-style: italic; color: #AAA;}

.form_rubric.editor .criterion .levels .level .delete {position:absolute;right:0px;bottom:32767px;}
.form_rubric .criterion .levels .level .score {display:block;}
.gradingform_rubric.editor .criterion .levels .level .delete {position:absolute;right:0px;bottom:32767px;}
.gradingform_rubric .criterion .levels .level .score {display:block;}

/* Make invisible the buttons 'Move up' for the first criterion and 'Move down' for the last, because those buttons will make no change */
.form_rubric.editor .criterion.first .controls .moveup input,
.form_rubric.editor .criterion.last .controls .movedown input {display:none;}
.gradingform_rubric.editor .criterion.first .controls .moveup input,
.gradingform_rubric.editor .criterion.last .controls .movedown input {display:none;}

/* evaluation */
.form_rubric .criterion .levels .level.checked {background:#d0ffd0;}
.form_rubric.evaluate .criterion .levels .level:hover {background:#30ff30;}
.gradingform_rubric .criterion .levels .level.checked {background:#d0ffd0;}
.gradingform_rubric.evaluate .criterion .levels .level:hover {background:#30ff30;}

/* replace buttons with images */
.form_rubric.editor .delete input,
.form_rubric.editor .moveup input,
.form_rubric.editor .movedown input{text-indent: -1000em;cursor:pointer;border:none;}
.form_rubric.editor .criterion .controls .delete input {width:20px;height:16px;background: transparent url([[pix:i/cross_red_big]]) no-repeat center top;}
.form_rubric.editor .levels .level .delete input {width:20px;height:16px;background: transparent url([[pix:i/cross_red_small]]) no-repeat center top;}
.form_rubric.editor .moveup input {width:20px;height:15px;background: transparent url([[pix:t/up]]) no-repeat center top;margin-top:4px;}
.form_rubric.editor .movedown input {width:20px;height:15px;background: transparent url([[pix:t/down]]) no-repeat center top;margin-top:4px;}
.gradingform_rubric.editor .delete input,
.gradingform_rubric.editor .moveup input,
.gradingform_rubric.editor .movedown input{text-indent: -1000em;cursor:pointer;border:none;}
.gradingform_rubric.editor .criterion .controls .delete input {width:20px;height:16px;background: transparent url([[pix:i/cross_red_big]]) no-repeat center top;}
.gradingform_rubric.editor .levels .level .delete input {width:20px;height:16px;background: transparent url([[pix:i/cross_red_small]]) no-repeat center top;}
.gradingform_rubric.editor .moveup input {width:20px;height:15px;background: transparent url([[pix:t/up]]) no-repeat center top;margin-top:4px;}
.gradingform_rubric.editor .movedown input {width:20px;height:15px;background: transparent url([[pix:t/down]]) no-repeat center top;margin-top:4px;}

.form_rubric.editor .addcriterion input,
.form_rubric.editor .addlevel input {background: transparent url([[pix:t/addgreen]]) no-repeat;display:block;color:#555555;font-weight:bold;text-decoration:none;}
.form_rubric.editor .addcriterion input {background-position: 5px 8px;height:30px;line-height:29px;margin-bottom:14px;padding-left:20px;padding-right:10px;}
.form_rubric.editor .addlevel input {background-position: 5px 6px;height:25px;line-height:24px;margin-bottom:10px;padding-left:18px;padding-right:8px;}
.gradingform_rubric.editor .addcriterion input,
.gradingform_rubric.editor .addlevel input {background: transparent url([[pix:t/addgreen]]) no-repeat;display:block;color:#555555;font-weight:bold;text-decoration:none;}
.gradingform_rubric.editor .addcriterion input {background-position: 5px 8px;height:30px;line-height:29px;margin-bottom:14px;padding-left:20px;padding-right:10px;}
.gradingform_rubric.editor .addlevel input {background-position: 5px 6px;height:25px;line-height:24px;margin-bottom:10px;padding-left:18px;padding-right:8px;}

0 comments on commit fc5adc3

Please sign in to comment.