MDL-28471 Further tweaks to the question flag code.
authorTim Hunt <T.J.Hunt@open.ac.uk>
Tue, 26 Jul 2011 15:11:20 +0000 (16:11 +0100)
committerTim Hunt <T.J.Hunt@open.ac.uk>
Tue, 26 Jul 2011 16:43:55 +0000 (17:43 +0100)
lang/en/question.php
pix/i/flagged.png
pix/i/unflagged.png
question/engine/lib.php
question/engine/renderer.php
question/flags.js
theme/base/style/question.css

index c1c7947..7a3e794 100644 (file)
@@ -65,8 +65,10 @@ $string['categoryinfo'] = 'Category info';
 $string['categorymove'] = 'The category \'{$a->name}\' contains {$a->count} questions (some of them may be old, hidden, questions that are still in use in some existing quizzes). Please choose another category to move them to.';
 $string['categorymoveto'] = 'Save in category';
 $string['categorynamecantbeblank'] = 'The category name cannot be blank.';
-$string['clicktoflag'] = 'Click to flag this question';
-$string['clicktounflag'] = 'Click to un-flag this question';
+$string['clickflag'] = 'Flag question';
+$string['clicktoflag'] = 'Flag this question for future reference';
+$string['clicktounflag'] = 'Remove flag';
+$string['clickunflag'] = 'Remove flag';
 $string['contexterror'] = 'You shouldn\'t have got here if you\'re not moving a category to another context.';
 $string['copy'] = 'Copy from {$a} and change links.';
 $string['created'] = 'Created';
@@ -298,8 +300,6 @@ $string['category'] = 'Category';
 $string['changeoptions'] = 'Change options';
 $string['check'] = 'Check';
 $string['clearwrongparts'] = 'Clear incorrect responses';
-$string['clicktoflag'] = 'Click to flag this question';
-$string['clicktounflag'] = 'Click to un-flag this question';
 $string['closepreview'] = 'Close preview';
 $string['combinedfeedback'] = 'Combined feedback';
 $string['commented'] = 'Commented: {$a}';
@@ -399,5 +399,3 @@ $string['whethercorrect'] = 'Whether correct';
 $string['withselected'] = 'With selected';
 $string['xoutofmax'] = '{$a->mark} out of {$a->max}';
 $string['yougotnright'] = 'You have correctly selected {$a->num}.';
-$string['clickflag'] = 'Flag question';
-$string['clickunflag'] = 'Unflag question';
index 287b41c..bd6f0d0 100644 (file)
Binary files a/pix/i/flagged.png and b/pix/i/flagged.png differ
index 35935fe..e70c25e 100644 (file)
Binary files a/pix/i/unflagged.png and b/pix/i/unflagged.png differ
index 17d3c1f..1d53552 100644 (file)
@@ -632,8 +632,10 @@ abstract class question_flags {
             'requires' => array('base', 'dom', 'event-delegate', 'io-base'),
         );
         $actionurl = $CFG->wwwroot . '/question/toggleflag.php';
-        $fltext = array(0 => get_string('clickflag', 'question'),
-                        1 => get_string('clickunflag', 'question'));
+        $flagtext = array(
+            0 => get_string('clickflag', 'question'),
+            1 => get_string('clickunflag', 'question')
+        );
         $flagattributes = array(
             0 => array(
                 'src' => $OUTPUT->pix_url('i/unflagged') . '',
@@ -649,7 +651,7 @@ abstract class question_flags {
             ),
         );
         $PAGE->requires->js_init_call('M.core_question_flags.init',
-                array($actionurl, $flagattributes, $fltext), false, $module);
+                array($actionurl, $flagattributes, $flagtext), false, $module);
         $done = true;
     }
 }
index 910bda9..66597f6 100644 (file)
@@ -243,16 +243,25 @@ class core_question_renderer extends plugin_renderer_base {
      * @return string the img tag.
      */
     protected function get_flag_html($flagged, $id = '') {
+        if ($flagged) {
+            $icon = 'i/flagged';
+            $alt = get_string('flagged', 'question');
+        } else {
+            $icon = 'i/unflagged';
+            $alt = get_string('notflagged', 'question');
+        }
+        $attributes = array(
+            'src' => $this->pix_url($icon),
+            'alt' => $alt,
+        );
         if ($id) {
-            $id = 'id="' . $id . '" ';
+            $attributes['id'] = $id;
         }
+        $img = html_writer::empty_tag('img', $attributes);
         if ($flagged) {
-            $img = 'flagged';
-        } else {
-            $img = 'unflagged';
+            $img .= ' ' . get_string('flagged', 'question');
         }
-        return '<img ' . $id . 'src="' . $this->pix_url('/i/' . $img) .
-                '" alt="' . get_string('flagthisquestion', 'question') . '" />';
+        return $img;
     }
 
     protected function edit_question_link(question_attempt $qa,
index d587a7d..aa8dac1 100644 (file)
 M.core_question_flags = {
     flagattributes: null,
     actionurl: null,
-    fltext: null,
+    flagtext: null,
     listeners: [],
 
-    init: function(Y, actionurl, flagattributes, fltext) {
+    init: function(Y, actionurl, flagattributes, flagtext) {
         M.core_question_flags.flagattributes = flagattributes;
         M.core_question_flags.actionurl = actionurl;
-        M.core_question_flags.fltext = fltext;
+        M.core_question_flags.flagtext = flagtext;
 
         Y.all('div.questionflag').each(function(flagdiv, i) {
             var checkbox = flagdiv.one('input[type=checkbox]');
@@ -42,21 +42,15 @@ M.core_question_flags = {
                 return;
             }
 
-            var input = Y.Node.create('<input type="hidden" />');
+            var input = Y.Node.create('<input type="hidden" class="questionflagvalue" />');
             input.set('id', checkbox.get('id'));
             input.set('name', checkbox.get('name'));
             input.set('value', checkbox.get('checked') ? 1 : 0);
 
             // Create an image input to replace the img tag.
             var image = Y.Node.create('<input type="image" class="questionflagimage" />');
-            M.core_question_flags.update_flag(input, image);
-
-            // Create flag text
-            var flstatus = input.get('value');
-            var txt = M.core_question_flags.fltext[flstatus];
-            var flagtext = Y.Node.create('<span class="flag-text">');
-            flagtext.addClass(txt);
-            flagtext.append(txt);
+            var flagtext = Y.Node.create('<span class="questionflagtext">.</span>');
+            M.core_question_flags.update_flag(input, image, flagtext);
 
             checkbox.remove();
             flagdiv.one('label').remove();
@@ -66,30 +60,25 @@ M.core_question_flags = {
         });
 
         Y.delegate('click', function(e) {
-            var input = this.previous('input');
+            var input = this.one('input.questionflagvalue');
             input.set('value', 1 - input.get('value'));
-            M.core_question_flags.update_flag(input, this);
-            var postdata = this.previous('input.questionflagpostdata').get('value') +
+            M.core_question_flags.update_flag(input, this.one('input.questionflagimage'),
+                    this.one('span.questionflagtext'));
+            var postdata = this.one('input.questionflagpostdata').get('value') +
                     input.get('value');
 
             e.halt();
             Y.io(M.core_question_flags.actionurl , {method: 'POST', 'data': postdata});
             M.core_question_flags.fire_listeners(postdata);
-        }, document.body, 'input.questionflagimage');
+        }, document.body, 'div.questionflag');
     },
 
-    update_flag: function(input, image) {
-
-        YUI().use('node', function (Y) {
-            image.setAttrs(M.core_question_flags.flagattributes[input.get('value')]);
-            // get flag text which is next to image element
-            var element = image.next();
-           // if element update its text
-           if(element){
-              element.set('innerText', M.core_question_flags.fltext[input.get('value')]);
-          }
-      });
-
+    update_flag: function(input, image, flagtext) {
+        var value = input.get('value');
+        image.setAttrs(M.core_question_flags.flagattributes[value]);
+        flagtext.replaceChild(flagtext.create(M.core_question_flags.flagtext[value]),
+                flagtext.get('firstChild'));
+        flagtext.set('title', M.core_question_flags.flagattributes[value].title);
     },
 
     add_listener: function(listener) {
index 2a0ce67..95d8e7d 100644 (file)
@@ -38,15 +38,17 @@ body.jsenabled #qtypechoicecontainer {display: block;}
 .que {clear: left;text-align: left;margin: 0 auto 1.8em auto;}
 .dir-rtl .que {text-align: right;}
 
-.que .info {float: left;width: 6em;padding:0.5em;margin-bottom: 1.8em;background: #eee;}
+.que .info {float: left;width: 7em;padding:0.5em;margin-bottom: 1.8em;background: #eee;}
 .que h2.no {margin: 0;font-size: 0.8em;line-height: 1;}
 .que span.qno {font-size: 1.5em;font-weight:bold;}
-.que .state,
-.que .grade,
-.que .editquestion {font-size: 0.8em; margin-top: 0.7em;}
-.que .info .questionflag {margin-top: 1em;margin-right: 1em;text-align: center;}
+.que .info * {font-size: 0.8em;}
+.que .info .state,
+.que .info .grade,
+.que .info .editquestion,
+.que .info .questionflag {margin-top: 0.7em;}
+.que .info .questionflag {cursor:pointer;}
 
-.que .content {margin: 0 0 0 7.5em;}
+.que .content {margin: 0 0 0 8.5em;}
 
 .que .formulation,
 .que .outcome,