diff --git a/question/type/multichoice/amd/build/clearchoice.min.js b/question/type/multichoice/amd/build/clearchoice.min.js index d68c68811af..1eb3da42122 100644 --- a/question/type/multichoice/amd/build/clearchoice.min.js +++ b/question/type/multichoice/amd/build/clearchoice.min.js @@ -1,2 +1,2 @@ -define ("qtype_multichoice/clearchoice",["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",CLEAR_CHOICE_ELEMENT:"div[class=\"qtype_multichoice_clearchoice\"]"},d=function(a){a.find("input[type=\"radio\"]").prop("checked",!0)},e=function(a,b){return a.find("div[id=\""+b+"\"]")},f=function(a){a.addClass("sr-only")},g=function(a){a.removeClass("sr-only")},h=function(a,h){var i=e(a,h);a.on(b.events.activate,c.CLEAR_CHOICE_ELEMENT,function(a,b){d(i);f(i);b.originalEvent.preventDefault()});a.on(b.events.activate,c.CHOICE_ELEMENT,function(){g(i)})};return{init:function init(b,c){b=a("#"+b);h(b,c)}}}); +define ("qtype_multichoice/clearchoice",["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",LINK:"a",RADIO:"input[type=\"radio\"]"},d=function(a){a.find(c.RADIO).prop("disabled",!1).prop("checked",!0)},e=function(a,b){return a.find("div[id=\""+b+"\"]")},f=function(a){a.addClass("sr-only");a.find(c.LINK).attr("tabindex",-1)},g=function(a){a.removeClass("sr-only");a.find(c.LINK).attr("tabindex",0);a.find(c.RADIO).prop("disabled",!0)},h=function(a,h){var i=e(a,h);i.on(b.events.activate,c.LINK,function(a,b){d(i);f(i);b.originalEvent.preventDefault()});a.on(b.events.activate,c.CHOICE_ELEMENT,function(){g(i)});i.find(c.RADIO).focus(function(){var b=a.find(c.CHOICE_ELEMENT).first();b.focus()})};return{init:function init(b,c){b=a("#"+b);h(b,c)}}}); //# sourceMappingURL=clearchoice.min.js.map diff --git a/question/type/multichoice/amd/build/clearchoice.min.js.map b/question/type/multichoice/amd/build/clearchoice.min.js.map index a77747785a1..f51b3a53322 100644 --- a/question/type/multichoice/amd/build/clearchoice.min.js.map +++ b/question/type/multichoice/amd/build/clearchoice.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/clearchoice.js"],"names":["define","$","CustomEvents","SELECTORS","CHOICE_ELEMENT","CLEAR_CHOICE_ELEMENT","checkClearChoiceRadio","clearChoiceContainer","find","prop","getClearChoiceElement","root","fieldPrefix","hideClearChoiceOption","addClass","showClearChoiceOption","removeClass","registerEventListeners","on","events","activate","e","data","originalEvent","preventDefault","init"],"mappings":"AAuBAA,OAAM,iCAAC,CAAC,QAAD,CAAW,gCAAX,CAAD,CAA+C,SAASC,CAAT,CAAYC,CAAZ,CAA0B,IAEvEC,CAAAA,CAAS,CAAG,CACZC,cAAc,CAAE,eADJ,CAEZC,oBAAoB,CAAE,8CAFV,CAF2D,CAYvEC,CAAqB,CAAG,SAASC,CAAT,CAA+B,CACvDA,CAAoB,CAACC,IAArB,CAA0B,uBAA1B,EAAiDC,IAAjD,CAAsD,SAAtD,IACH,CAd0E,CAuBvEC,CAAqB,CAAG,SAASC,CAAT,CAAeC,CAAf,CAA4B,CACpD,MAAOD,CAAAA,CAAI,CAACH,IAAL,CAAU,YAAaI,CAAb,CAA2B,KAArC,CACV,CAzB0E,CAgCvEC,CAAqB,CAAG,SAASN,CAAT,CAA+B,CACvDA,CAAoB,CAACO,QAArB,CAA8B,SAA9B,CACH,CAlC0E,CAyCvEC,CAAqB,CAAG,SAASR,CAAT,CAA+B,CACvDA,CAAoB,CAACS,WAArB,CAAiC,SAAjC,CACH,CA3C0E,CAmDvEC,CAAsB,CAAG,SAASN,CAAT,CAAeC,CAAf,CAA4B,CACrD,GAAIL,CAAAA,CAAoB,CAAGG,CAAqB,CAACC,CAAD,CAAOC,CAAP,CAAhD,CAEAD,CAAI,CAACO,EAAL,CAAQhB,CAAY,CAACiB,MAAb,CAAoBC,QAA5B,CAAsCjB,CAAS,CAACE,oBAAhD,CAAsE,SAASgB,CAAT,CAAYC,CAAZ,CAAkB,CAGhFhB,CAAqB,CAACC,CAAD,CAArB,CAEAM,CAAqB,CAACN,CAAD,CAArB,CAEAe,CAAI,CAACC,aAAL,CAAmBC,cAAnB,EACP,CARD,EAUAb,CAAI,CAACO,EAAL,CAAQhB,CAAY,CAACiB,MAAb,CAAoBC,QAA5B,CAAsCjB,CAAS,CAACC,cAAhD,CAAgE,UAAW,CAEvEW,CAAqB,CAACR,CAAD,CACxB,CAHD,CAIH,CApE0E,CAiF3E,MAAO,CACHkB,IAAI,CANG,QAAPA,CAAAA,IAAO,CAASd,CAAT,CAAeC,CAAf,CAA4B,CACnCD,CAAI,CAAGV,CAAC,CAAC,IAAMU,CAAP,CAAR,CACAM,CAAsB,CAACN,CAAD,CAAOC,CAAP,CACzB,CAEM,CAGV,CApFK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Manages 'Clear my choice' functionality actions.\n *\n * @module qtype_multichoice/clearchoice\n * @copyright 2019 Simey Lameze \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 3.7\n */\ndefine(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {\n\n var SELECTORS = {\n CHOICE_ELEMENT: '.answer input',\n CLEAR_CHOICE_ELEMENT: 'div[class=\"qtype_multichoice_clearchoice\"]'\n };\n\n /**\n * Mark clear choice radio as checked.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var checkClearChoiceRadio = function(clearChoiceContainer) {\n clearChoiceContainer.find('input[type=\"radio\"]').prop('checked', true);\n };\n\n /**\n * Get the clear choice div container.\n *\n * @param {Object} root The question root element.\n * @param {string} fieldPrefix The question outer div prefix.\n * @returns {Object} The clear choice div container.\n */\n var getClearChoiceElement = function(root, fieldPrefix) {\n return root.find('div[id=\"' + fieldPrefix + '\"]');\n };\n\n /**\n * Hide clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var hideClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.addClass('sr-only');\n };\n\n /**\n * Shows clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var showClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.removeClass('sr-only');\n };\n\n /**\n * Register event listeners for the clear choice module.\n *\n * @param {Object} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var registerEventListeners = function(root, fieldPrefix) {\n var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix);\n\n root.on(CustomEvents.events.activate, SELECTORS.CLEAR_CHOICE_ELEMENT, function(e, data) {\n\n // Mark the clear choice radio element as checked.\n checkClearChoiceRadio(clearChoiceContainer);\n // Now that the hidden radio has been checked, hide the clear choice option.\n hideClearChoiceOption(clearChoiceContainer);\n\n data.originalEvent.preventDefault();\n });\n\n root.on(CustomEvents.events.activate, SELECTORS.CHOICE_ELEMENT, function() {\n // If the event has been triggered by any other choice, show the clear choice option.\n showClearChoiceOption(clearChoiceContainer);\n });\n };\n\n /**\n * Initialise clear choice module.\n\n * @param {string} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var init = function(root, fieldPrefix) {\n root = $('#' + root);\n registerEventListeners(root, fieldPrefix);\n };\n\n return {\n init: init\n };\n});\n"],"file":"clearchoice.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/clearchoice.js"],"names":["define","$","CustomEvents","SELECTORS","CHOICE_ELEMENT","LINK","RADIO","checkClearChoiceRadio","clearChoiceContainer","find","prop","getClearChoiceElement","root","fieldPrefix","hideClearChoiceOption","addClass","attr","showClearChoiceOption","removeClass","registerEventListeners","on","events","activate","e","data","originalEvent","preventDefault","focus","firstChoice","first","init"],"mappings":"AAuBAA,OAAM,iCAAC,CAAC,QAAD,CAAW,gCAAX,CAAD,CAA+C,SAASC,CAAT,CAAYC,CAAZ,CAA0B,IAEvEC,CAAAA,CAAS,CAAG,CACZC,cAAc,CAAE,eADJ,CAEZC,IAAI,CAAE,GAFM,CAGZC,KAAK,CAAE,uBAHK,CAF2D,CAavEC,CAAqB,CAAG,SAASC,CAAT,CAA+B,CACvDA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,KAAmEA,IAAnE,CAAwE,SAAxE,IACH,CAf0E,CAwBvEC,CAAqB,CAAG,SAASC,CAAT,CAAeC,CAAf,CAA4B,CACpD,MAAOD,CAAAA,CAAI,CAACH,IAAL,CAAU,YAAaI,CAAb,CAA2B,KAArC,CACV,CA1B0E,CAiCvEC,CAAqB,CAAG,SAASN,CAAT,CAA+B,CACvDA,CAAoB,CAACO,QAArB,CAA8B,SAA9B,EACAP,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAAC,CAA5D,CACH,CApC0E,CA2CvEC,CAAqB,CAAG,SAAST,CAAT,CAA+B,CACvDA,CAAoB,CAACU,WAArB,CAAiC,SAAjC,EACAV,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAA3D,EACAR,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,IACH,CA/C0E,CAuDvES,CAAsB,CAAG,SAASP,CAAT,CAAeC,CAAf,CAA4B,CACrD,GAAIL,CAAAA,CAAoB,CAAGG,CAAqB,CAACC,CAAD,CAAOC,CAAP,CAAhD,CAEAL,CAAoB,CAACY,EAArB,CAAwBlB,CAAY,CAACmB,MAAb,CAAoBC,QAA5C,CAAsDnB,CAAS,CAACE,IAAhE,CAAsE,SAASkB,CAAT,CAAYC,CAAZ,CAAkB,CAGhFjB,CAAqB,CAACC,CAAD,CAArB,CAEAM,CAAqB,CAACN,CAAD,CAArB,CAEAgB,CAAI,CAACC,aAAL,CAAmBC,cAAnB,EACP,CARD,EAUAd,CAAI,CAACQ,EAAL,CAAQlB,CAAY,CAACmB,MAAb,CAAoBC,QAA5B,CAAsCnB,CAAS,CAACC,cAAhD,CAAgE,UAAW,CAEvEa,CAAqB,CAACT,CAAD,CACxB,CAHD,EAOAA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CqB,KAA3C,CAAiD,UAAW,CACxD,GAAIC,CAAAA,CAAW,CAAGhB,CAAI,CAACH,IAAL,CAAUN,CAAS,CAACC,cAApB,EAAoCyB,KAApC,EAAlB,CACAD,CAAW,CAACD,KAAZ,EACH,CAHD,CAIH,CA/E0E,CA4F3E,MAAO,CACHG,IAAI,CANG,QAAPA,CAAAA,IAAO,CAASlB,CAAT,CAAeC,CAAf,CAA4B,CACnCD,CAAI,CAAGX,CAAC,CAAC,IAAMW,CAAP,CAAR,CACAO,CAAsB,CAACP,CAAD,CAAOC,CAAP,CACzB,CAEM,CAGV,CA/FK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Manages 'Clear my choice' functionality actions.\n *\n * @module qtype_multichoice/clearchoice\n * @copyright 2019 Simey Lameze \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 3.7\n */\ndefine(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {\n\n var SELECTORS = {\n CHOICE_ELEMENT: '.answer input',\n LINK: 'a',\n RADIO: 'input[type=\"radio\"]'\n };\n\n /**\n * Mark clear choice radio as checked.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var checkClearChoiceRadio = function(clearChoiceContainer) {\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', false).prop('checked', true);\n };\n\n /**\n * Get the clear choice div container.\n *\n * @param {Object} root The question root element.\n * @param {string} fieldPrefix The question outer div prefix.\n * @returns {Object} The clear choice div container.\n */\n var getClearChoiceElement = function(root, fieldPrefix) {\n return root.find('div[id=\"' + fieldPrefix + '\"]');\n };\n\n /**\n * Hide clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var hideClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.addClass('sr-only');\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1);\n };\n\n /**\n * Shows clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var showClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.removeClass('sr-only');\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0);\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true);\n };\n\n /**\n * Register event listeners for the clear choice module.\n *\n * @param {Object} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var registerEventListeners = function(root, fieldPrefix) {\n var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix);\n\n clearChoiceContainer.on(CustomEvents.events.activate, SELECTORS.LINK, function(e, data) {\n\n // Mark the clear choice radio element as checked.\n checkClearChoiceRadio(clearChoiceContainer);\n // Now that the hidden radio has been checked, hide the clear choice option.\n hideClearChoiceOption(clearChoiceContainer);\n\n data.originalEvent.preventDefault();\n });\n\n root.on(CustomEvents.events.activate, SELECTORS.CHOICE_ELEMENT, function() {\n // If the event has been triggered by any other choice, show the clear choice option.\n showClearChoiceOption(clearChoiceContainer);\n });\n\n // If the clear choice radio receives focus from using the tab key, return the focus\n // to the first available radio button and disable the clear choice radio.\n clearChoiceContainer.find(SELECTORS.RADIO).focus(function() {\n var firstChoice = root.find(SELECTORS.CHOICE_ELEMENT).first();\n firstChoice.focus();\n });\n };\n\n /**\n * Initialise clear choice module.\n\n * @param {string} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var init = function(root, fieldPrefix) {\n root = $('#' + root);\n registerEventListeners(root, fieldPrefix);\n };\n\n return {\n init: init\n };\n});\n"],"file":"clearchoice.min.js"} \ No newline at end of file diff --git a/question/type/multichoice/amd/src/clearchoice.js b/question/type/multichoice/amd/src/clearchoice.js index 5ca09ce44c2..5fb268ca169 100644 --- a/question/type/multichoice/amd/src/clearchoice.js +++ b/question/type/multichoice/amd/src/clearchoice.js @@ -25,16 +25,17 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) { var SELECTORS = { CHOICE_ELEMENT: '.answer input', - CLEAR_CHOICE_ELEMENT: 'div[class="qtype_multichoice_clearchoice"]' + LINK: 'a', + RADIO: 'input[type="radio"]' }; /** - * Mark clear choice radio as checked. + * Mark clear choice radio as enabled and checked. * * @param {Object} clearChoiceContainer The clear choice option container. */ var checkClearChoiceRadio = function(clearChoiceContainer) { - clearChoiceContainer.find('input[type="radio"]').prop('checked', true); + clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', false).prop('checked', true); }; /** @@ -55,6 +56,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) { */ var hideClearChoiceOption = function(clearChoiceContainer) { clearChoiceContainer.addClass('sr-only'); + clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1); }; /** @@ -64,6 +66,8 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) { */ var showClearChoiceOption = function(clearChoiceContainer) { clearChoiceContainer.removeClass('sr-only'); + clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0); + clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true); }; /** @@ -75,7 +79,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) { var registerEventListeners = function(root, fieldPrefix) { var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix); - root.on(CustomEvents.events.activate, SELECTORS.CLEAR_CHOICE_ELEMENT, function(e, data) { + clearChoiceContainer.on(CustomEvents.events.activate, SELECTORS.LINK, function(e, data) { // Mark the clear choice radio element as checked. checkClearChoiceRadio(clearChoiceContainer); @@ -89,6 +93,13 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) { // If the event has been triggered by any other choice, show the clear choice option. showClearChoiceOption(clearChoiceContainer); }); + + // If the clear choice radio receives focus from using the tab key, return the focus + // to the first answer option. + clearChoiceContainer.find(SELECTORS.RADIO).focus(function() { + var firstChoice = root.find(SELECTORS.CHOICE_ELEMENT).first(); + firstChoice.focus(); + }); }; /** diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php index bca60c8eb9c..8a09a694499 100644 --- a/question/type/multichoice/renderer.php +++ b/question/type/multichoice/renderer.php @@ -298,14 +298,16 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base $cssclass = 'qtype_multichoice_clearchoice'; // When no choice selected during rendering, then hide the clear choice option. + $linktabindex = 0; if (!$hascheckedchoice && $response == -1) { $cssclass .= ' sr-only'; $clearchoiceradioattrs['checked'] = 'checked'; + $linktabindex = -1; } // Adds an hidden radio that will be checked to give the impression the choice has been cleared. $clearchoiceradio = html_writer::empty_tag('input', $clearchoiceradioattrs); $clearchoiceradio .= html_writer::link('', get_string('clearchoice', 'qtype_multichoice'), - ['for' => $clearchoiceid, 'role' => 'button']); + ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex]); // Now wrap the radio and label inside a div. $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]); diff --git a/question/type/multichoice/tests/behat/clearanswers.feature b/question/type/multichoice/tests/behat/clearanswers.feature new file mode 100644 index 00000000000..3f782770d41 --- /dev/null +++ b/question/type/multichoice/tests/behat/clearanswers.feature @@ -0,0 +1,57 @@ +@qtype @qtype_multichoice +Feature: Clear my answers + As a student + In order to reset Multiple choice ansers + I need to clear my choice + + Background: + Given the following "users" exist: + | username | firstname | lastname | email | + | student1 | S1 | Student1 | student1@moodle.com | + And the following "courses" exist: + | fullname | shortname | category | + | Course 1 | C1 | 0 | + And the following "course enrolments" exist: + | user | course | role | + | student1 | C1 | student | + And the following "question categories" exist: + | contextlevel | reference | name | + | Course | C1 | Test questions | + And the following "questions" exist: + | questioncategory | qtype | name | template | questiontext | + | Test questions | multichoice | Multi-choice-001 | one_of_four | Question One | + And the following "activities" exist: + | activity | name | intro | course | idnumber | preferredbehaviour | canredoquestions | + | quiz | Quiz 1 | Quiz 1 description | C1 | quiz1 | immediatefeedback | 1 | + And quiz "Quiz 1" contains the following questions: + | question | page | + | Multi-choice-001 | 1 | + + @javascript + Scenario: Attempt a quiz and reset my chosen answer. + When I log in as "student1" + And I am on "Course 1" course homepage + And I follow "Quiz 1" + And I press "Attempt quiz now" + And I should see "Question One" + And I click on "Four" "radio" in the "Question One" "question" + And I should see "Clear my choice" + And I click on "Clear my choice" "button" in the "Question One" "question" + Then I should not see "Clear my choice" + And I click on "Check" "button" in the "Question One" "question" + And I should see "Please select an answer" in the "Question One" "question" + + @javascript + Scenario: Attempt a quiz and revisit a cleared answer. + When I log in as "student1" + And I am on "Course 1" course homepage + And I follow "Quiz 1" + And I press "Attempt quiz now" + And I should see "Question One" + And I click on "Four" "radio" in the "Question One" "question" + And I follow "Finish attempt ..." + And I click on "Return to attempt" "button" + And I click on "Clear my choice" "button" in the "Question One" "question" + And I follow "Finish attempt ..." + And I click on "Return to attempt" "button" + Then I should not see "Clear my choice"