From: tjhunt <tjhunt>
Date: Wed, 3 Sep 2008 05:50:53 +0000 (+0000)
Subject: MDL-16263 Flagging questions during a quiz attempt. Make it work nicely with just... 
X-Git-Url: http://git.mjollnir.org/gw?a=commitdiff_plain;h=d0dfe9491d873ebce840967f00ce0709509c27af;p=moodle.git

MDL-16263 Flagging questions during a quiz attempt. Make it work nicely with just the keyboard, no mouse, if JavaScript is on.
---

diff --git a/question/qengine.js b/question/qengine.js
index 67ec86eef0..b5a2cebe64 100644
--- a/question/qengine.js
+++ b/question/qengine.js
@@ -5,36 +5,48 @@ question_flag_changer = {
     flag_state_listeners: new Object(),
 
     init_flag: function(checkboxid, postdata) {
-        var checkbox = document.getElementById(checkboxid);
-        checkbox.ajaxpostdata = postdata;
-        checkbox.className += ' jsworking';
-        question_flag_changer.update_image(checkbox);
-        YAHOO.util.Event.addListener(checkbox, 'change', this.checkbox_state_change);
+        // Convert the checkbox to an image input.
+        var input = document.getElementById(checkboxid);
+        var state = input.checked;
+        input.ajaxpostdata = postdata;
+        input.flaggedstate = state;
+        input.type = 'image';
+
+        // Set up the correct image, alt and title.
+        question_flag_changer.update_image(input);
+
+        // Remove the label element.
+        var label = document.getElementById(checkboxid + 'label');
+        label.parentNode.removeChild(label);
+
+        // Add the event handler.
+        YAHOO.util.Event.addListener(input, 'click', this.flag_state_change);
     },
 
-    checkbox_state_change: function(e) {
-        var checkbox = e.target ? e.target : e.srcElement;
-        question_flag_changer.update_image(checkbox);
-        var postdata = checkbox.ajaxpostdata
-        if (checkbox.checked) {
+    flag_state_change: function(e) {
+        var input = e.target ? e.target : e.srcElement;
+        input.flaggedstate = !input.flaggedstate;
+        question_flag_changer.update_image(input);
+        var postdata = input.ajaxpostdata
+        if (input.flaggedstate) {
             postdata += '&newstate=1'
         } else {
             postdata += '&newstate=0'
         }
         YAHOO.util.Connect.asyncRequest('POST', qengine_config.wwwroot + '/question/toggleflag.php', null, postdata);
-        question_flag_changer.fire_state_changed(checkbox);
+        question_flag_changer.fire_state_changed(input);
+        YAHOO.util.Event.preventDefault(e);
     },
 
-    update_image: function(checkbox) {
-        var img = document.getElementById(checkbox.id + 'img');
-        if (checkbox.checked) {
-            img.src = qengine_config.pixpath + '/i/flagged.png';
-            img.alt = qengine_config.flaggedalt;
-            img.title = qengine_config.unflagtooltip;
+    update_image: function(input) {
+        if (input.flaggedstate) {
+            input.src = qengine_config.pixpath + '/i/flagged.png';
+            input.alt = qengine_config.flaggedalt;
+            input.title = qengine_config.unflagtooltip;
         } else {
-            img.src = qengine_config.pixpath + '/i/unflagged.png';
-            img.alt = qengine_config.unflaggedalt;
-            img.title = qengine_config.flagtooltip;
+            input.src = qengine_config.pixpath + '/i/unflagged.png';
+            input.alt = qengine_config.unflaggedalt;
+            input.title = qengine_config.flagtooltip;
         }
     },
 
@@ -46,17 +58,17 @@ question_flag_changer = {
         question_flag_changer.flag_state_listeners[key].push(listener);
     },
 
-    questionid_from_cbid: function(cbid) {
-        return cbid.replace(/resp(\d+)__flagged/, '$1');
+    questionid_from_inputid: function(inputid) {
+        return inputid.replace(/resp(\d+)__flagged/, '$1');
     },
 
-    fire_state_changed: function(checkbox) {
-        var questionid = question_flag_changer.questionid_from_cbid(checkbox.id);
+    fire_state_changed: function(input) {
+        var questionid = question_flag_changer.questionid_from_inputid(input.id);
         var key = 'q' + questionid;
         if (!question_flag_changer.flag_state_listeners.hasOwnProperty(key)) {
             return;
         }
-        var newstate = checkbox.checked;
+        var newstate = input.flaggedstate;
         for (var i = 0; i < question_flag_changer.flag_state_listeners[key].length; i++) {
             question_flag_changer.flag_state_listeners[key][i].flag_state_changed(newstate);
         }
diff --git a/question/type/questiontype.php b/question/type/questiontype.php
index 296b98fed1..26d2aa85c2 100644
--- a/question/type/questiontype.php
+++ b/question/type/questiontype.php
@@ -907,7 +907,7 @@ class default_questiontype {
                 $postdata = "qsid=$qsid&amp;aid=$aid&amp;qid=$qid&amp;checksum=$checksum&amp;sesskey=" . sesskey();
                 $flagcontent = '<input type="checkbox" id="' . $id . '" name="' . $id .
                         '" value="1" ' . $checked . ' />' . 
-                        '<label for="' . $id . '">' . $this->get_question_flag_tag(
+                        '<label id="' . $id . 'label" for="' . $id . '">' . $this->get_question_flag_tag(
                         $state->flagged, $id . 'img') . '</label>' .
                         "\n" . '<script type="text/javascript">question_flag_changer.init_flag(' .
                         "'$id', '$postdata');</script>";
diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css
index 47d730feb6..b374821770 100644
--- a/theme/standard/styles_layout.css
+++ b/theme/standard/styles_layout.css
@@ -2628,10 +2628,6 @@ body.notes .notesgroup {
   margin-right: 1em;
   text-align: center;
 }
-.que .info .questionflag .jsworking {
-  position: absolute;
-  visibility: hidden;
-}
 .que .content {
   float: left;
   margin: 0;