From 31be6fad4310555ce252fecd3a5813827d447988 Mon Sep 17 00:00:00 2001 From: Ehtesham Date: Wed, 27 Jul 2016 05:45:29 +0500 Subject: [PATCH] make CAPA dropdown problems accessible --- .../contentstore/tests/test_crud.py | 4 +- .../capa/templates/formulaequationinput.html | 2 +- .../lib/capa/capa/templates/optioninput.html | 15 +++-- common/lib/capa/capa/templates/textline.html | 2 +- .../capa/capa/tests/test_input_templates.py | 6 +- .../lib/xmodule/xmodule/css/capa/display.scss | 7 ++ .../problem/checkboxes_response.yaml | 44 ++++-------- .../problem/checkboxes_response_hint.yaml | 67 +++++++------------ .../templates/problem/multiplechoice.yaml | 55 +++++---------- .../problem/multiplechoice_hint.yaml | 47 +++++-------- .../templates/problem/optionresponse.yaml | 40 +++++------ .../problem/optionresponse_hint.yaml | 55 +++++---------- .../templates/problem/string_response.yaml | 14 ++-- .../acceptance/tests/lms/test_lms_problems.py | 26 +++++++ .../tests/lms/test_problem_types.py | 6 -- 15 files changed, 159 insertions(+), 231 deletions(-) diff --git a/cms/djangoapps/contentstore/tests/test_crud.py b/cms/djangoapps/contentstore/tests/test_crud.py index 9dc3ce26ba..4153646f97 100644 --- a/cms/djangoapps/contentstore/tests/test_crud.py +++ b/cms/djangoapps/contentstore/tests/test_crud.py @@ -35,8 +35,8 @@ class TemplateTests(ModuleStoreTestCase): self.assertIsNotNone(dropdown) self.assertIn('markdown', dropdown['metadata']) self.assertIn('data', dropdown) - self.assertRegexpMatches(dropdown['metadata']['markdown'], r'^Dropdown.*') - self.assertRegexpMatches(dropdown['data'], r'\s*\s*

Dropdown.*') + self.assertRegexpMatches(dropdown['metadata']['markdown'], r'.*dropdown problems.*') + self.assertRegexpMatches(dropdown['data'], r'\s*\s*

.*dropdown problems.*') def test_get_some_templates(self): self.assertEqual(len(SequenceDescriptor.templates()), 0) diff --git a/common/lib/capa/capa/templates/formulaequationinput.html b/common/lib/capa/capa/templates/formulaequationinput.html index 423c193461..50f48b1566 100644 --- a/common/lib/capa/capa/templates/formulaequationinput.html +++ b/common/lib/capa/capa/templates/formulaequationinput.html @@ -5,7 +5,7 @@

- % for option_id, option_description in options: @@ -16,12 +24,11 @@ - ${value|h} - ${status.display_tooltip} + ${value|h} - ${status.display_tooltip}

% if msg: ${msg|n} % endif - diff --git a/common/lib/capa/capa/templates/textline.html b/common/lib/capa/capa/templates/textline.html index 3b5712926b..001983943e 100644 --- a/common/lib/capa/capa/templates/textline.html +++ b/common/lib/capa/capa/templates/textline.html @@ -20,7 +20,7 @@ % for description_id, description_text in response_data['descriptions'].items():

${description_text}

% endfor - label { + display: block; + margin-bottom: $baseline; + font: inherit; + color: inherit; + } } // Choice Group - silent class diff --git a/common/lib/xmodule/xmodule/templates/problem/checkboxes_response.yaml b/common/lib/xmodule/xmodule/templates/problem/checkboxes_response.yaml index 93c0d804c9..8c9a05613c 100644 --- a/common/lib/xmodule/xmodule/templates/problem/checkboxes_response.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/checkboxes_response.yaml @@ -2,43 +2,27 @@ metadata: display_name: Checkboxes markdown: | - Checkbox problems allow learners to select multiple options. Learners can see all the options along with the problem text. + You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes problems. Edit this component to replace this template with your own assessment. - When you add the problem, be sure to select Settings to specify a Display Name and other values that apply. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. << - You can use the following example problem as a model. - - >>The following languages are in the Indo-European family:||Make sure you select all of the correct options—there may be more than one!<< - [x] Urdu - [ ] Finnish - [x] Marathi - [x] French - [ ] Hungarian - - [explanation] - Urdu, Marathi, and French are all Indo-European languages, while Finnish and Hungarian are in the Uralic family. - [explanation] + [x] a correct answer + [ ] an incorrect answer + [ ] an incorrect answer + [x] a correct answer data: | -

Checkbox problems allow learners to select multiple options. Learners can see all the options along with the problem text.

-

When you add the problem, be sure to select Settings to specify a Display Name and other values that apply.

-

You can use the following example problem as a model.

- - Make sure you select all of the correct options—there may be more than one! +

You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt like this. - Urdu - Finnish - Marathi - French - Hungarian + a correct answer + an incorrect answer + an incorrect answer + a correct answer - -
-

Explanation

-

Urdu, Marathi, and French are all Indo-European languages, while Finnish and Hungarian are in the Uralic family.

-
- + diff --git a/common/lib/xmodule/xmodule/templates/problem/checkboxes_response_hint.yaml b/common/lib/xmodule/xmodule/templates/problem/checkboxes_response_hint.yaml index 897d3ff25a..ef368b60bb 100644 --- a/common/lib/xmodule/xmodule/templates/problem/checkboxes_response_hint.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/checkboxes_response_hint.yaml @@ -3,65 +3,50 @@ metadata: display_name: Checkboxes with Hints and Feedback markdown: | - You can provide feedback for each option in a checkbox problem, with distinct feedback depending on whether or not the learner selects that option. + You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment. - You can also provide compound feedback for a specific combination of answers. For example, if you have three possible answers in the problem, you can configure specific feedback for when a learner selects each combination of possible answers. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this.<< - You can also add hints for learners. - - Be sure to select Settings to specify a Display Name and other values that apply. - - Use the following example problem as a model. - - >>Which of the following is a fruit?||Make sure you select all of the correct options—there may be more than one!<< - - [x] apple {{ selected: You are correct that an apple is a fruit because it is the fertilized ovary that comes from an apple tree and contains seeds. }, { unselected: Remember that an apple is also a fruit.}} - [x] pumpkin {{ selected: You are correct that a pumpkin is a fruit because it is the fertilized ovary of a squash plant and contains seeds. }, { unselected: Remember that a pumpkin is also a fruit.}} - [ ] potato {{ U: You are correct that a potato is a vegetable because it is an edible part of a plant in tuber form.}, { S: A potato is a vegetable, not a fruit, because it does not come from a flower and does not contain seeds.}} - [x] tomato {{ S: You are correct that a tomato is a fruit because it is the fertilized ovary of a tomato plant and contains seeds. }, { U: Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit.}} + [x] a correct answer {{ selected: You can specify optional feedback that appears after the learner selects and submits this answer. }, { unselected: You can specify optional feedback that appears after the learner clears and submits this answer.}} + [ ] an incorrect answer + [ ] an incorrect answer {{ selected: You can specify optional feedback for none, all, or a subset of the answers. }, { unselected: You can specify optional feedback for selected answers, cleared answers, or both.}} + [x] a correct answer - {{ ((A B D)) An apple, pumpkin, and tomato are all fruits as they all are fertilized ovaries of a plant and contain seeds. }} - {{ ((A B C D)) You are correct that an apple, pumpkin, and tomato are all fruits as they all are fertilized ovaries of a plant and contain seeds. However, a potato is not a fruit as it is an edible part of a plant in tuber form and is a vegetable. }} + {{ ((A B D)) You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted. }} + {{ ((A B C D)) You can specify optional feedback for one, several, or all answer combinations. }} + + ||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.|| + ||If you add more than one hint, a different hint appears each time learners select the hint button.|| - ||A fruit is the fertilized ovary from a flower.|| - ||A fruit contains seeds of the plant.|| hinted: true data: | -

You can provide feedback for each option in a checkbox problem, with distinct feedback depending on whether or not the learner selects that option.

-

You can also provide compound feedback for a specific combination of answers. For example, if you have three possible answers in the problem, you can configure specific feedback for when a learner selects each combination of possible answers.

-

You can also add hints for learners.

-

Be sure to select Settings to specify a Display Name and other values that apply.

-

Use the following example problem as a model.

- - Make sure you select all of the correct options—there may be more than one! +

You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt like this. - apple - You are correct that an apple is a fruit because it is the fertilized ovary that comes from an apple tree and contains seeds. - Remember that an apple is also a fruit. + a correct answer + You can specify optional feedback that appears after the learner selects and submits this answer. + You can specify optional feedback that appears after the learner clears and submits this answer. - pumpkin - You are correct that a pumpkin is a fruit because it is the fertilized ovary of a squash plant and contains seeds. - Remember that a pumpkin is also a fruit. + an incorrect answer - potato - A potato is a vegetable, not a fruit, because it does not come from a flower and does not contain seeds. - You are correct that a potato is a vegetable because it is an edible part of a plant in tuber form. + an incorrect answer + You can specify optional feedback for none, all, or a subset of the answers. + You can specify optional feedback for selected answers, cleared answers, or both. - tomato - You are correct that a tomato is a fruit because it is the fertilized ovary of a tomato plant and contains seeds. - Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit. + a correct answer - An apple, pumpkin, and tomato are all fruits as they all are fertilized ovaries of a plant and contain seeds. - You are correct that an apple, pumpkin, and tomato are all fruits as they all are fertilized ovaries of a plant and contain seeds. However, a potato is not a fruit as it is an edible part of a plant in tuber form and is a vegetable. + You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted. + You can specify optional feedback for one, several, or all answer combinations. - A fruit is the fertilized ovary from a flower. - A fruit contains seeds of the plant. + You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button. + If you add more than one hint, a different hint appears each time learners select the hint button. diff --git a/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml b/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml index 8470734fdc..f6f0672c8b 100644 --- a/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml @@ -2,51 +2,26 @@ metadata: display_name: Multiple Choice markdown: | - Multiple choice problems allow learners to select only one option. Learners can see all the options along with the problem text. - When you add the problem, be sure to select Settings to specify a Display Name and other values that apply. + You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice problems. Edit this component to replace this template with your own assessment. - You can use the following example problem as a model. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. << - >>Which of the following countries has the largest population?||You can select only one option.<< - ( ) Brazil {{ timely feedback -- explain why an almost correct answer is wrong }} - ( ) Germany - (x) Indonesia - ( ) Russia + ( ) an incorrect answer + (x) the correct answer + ( ) an incorrect answer - [explanation] - According to September 2014 estimates: - The population of Indonesia is approximately 250 million. - The population of Brazil is approximately 200 million. - The population of Russia is approximately 146 million. - The population of Germany is approximately 81 million. - [explanation] data: | - -

Multiple choice problems allow learners to select only one option. Learners can see all the options along with the problem text.

-

When you add the problem, be sure to select Settings to specify a Display Name and other values that apply.

-

You can use the following example problem as a model.

- - You can select only one option. - - Brazil - timely feedback -- explain why an almost correct answer is wrong - - Germany - Indonesia - Russia - - -
-

Explanation

-

According to September 2014 estimates:

-

The population of Indonesia is approximately 250 million.

-

The population of Brazil is approximately 200 million.

-

The population of Russia is approximately 146 million.

-

The population of Germany is approximately 81 million.

-
- - + +

You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt like this. + + an incorrect answer + the correct answer + an incorrect answer + + diff --git a/common/lib/xmodule/xmodule/templates/problem/multiplechoice_hint.yaml b/common/lib/xmodule/xmodule/templates/problem/multiplechoice_hint.yaml index 66f21543c1..65555515bb 100644 --- a/common/lib/xmodule/xmodule/templates/problem/multiplechoice_hint.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/multiplechoice_hint.yaml @@ -3,51 +3,38 @@ metadata: display_name: Multiple Choice with Hints and Feedback markdown: | - You can provide feedback for each option in a multiple choice problem. + You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment. - You can also add hints for learners. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. << - Be sure to select Settings to specify a Display Name and other values that apply. + ( ) an incorrect answer {{You can specify optional feedback like this, which appears after this answer is submitted.}} + (x) the correct answer + ( ) an incorrect answer {{You can specify optional feedback for none, a subset, or all of the answers.}} - Use the following example problem as a model. - - >>Which of the following is a vegetable?||You can select only one option.<< - ( ) apple {{An apple is the fertilized ovary that comes from an apple tree and contains seeds, meaning it is a fruit.}} - ( ) pumpkin {{A pumpkin is the fertilized ovary of a squash plant and contains seeds, meaning it is a fruit.}} - (x) potato {{A potato is an edible part of a plant in tuber form and is a vegetable.}} - ( ) tomato {{Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit.}} - - ||A fruit is the fertilized ovary from a flower.|| - ||A fruit contains seeds of the plant.|| + ||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.|| + ||If you add more than one hint, a different hint appears each time learners select the hint button.|| hinted: true data: | -

You can provide feedback for each option in a multiple choice problem.

-

You can also add hints for learners.

-

Be sure to select Settings to specify a Display Name and other values that apply.

-

Use the following example problem as a model.

- - You can select only one option. +

You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt like this. - apple - An apple is the fertilized ovary that comes from an apple tree and contains seeds, meaning it is a fruit. + an incorrect answer + You can specify optional feedback like this, which appears after this answer is submitted. - pumpkin - A pumpkin is the fertilized ovary of a squash plant and contains seeds, meaning it is a fruit. + the correct answer - potato - A potato is an edible part of a plant in tuber form and is a vegetable. - - tomato - Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit. + an incorrect answer + You can specify optional feedback for none, a subset, or all of the answers. - A fruit is the fertilized ovary from a flower. - A fruit contains seeds of the plant. + You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button. + If you add more than one hint, a different hint appears each time learners select the hint button. diff --git a/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml b/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml index 63b76611b4..9cd8b9fda7 100644 --- a/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml @@ -2,33 +2,23 @@ metadata: display_name: Dropdown markdown: | - Dropdown problems allow learners to select only one option from a list of options. - - When you add the problem, be sure to select Settings to specify a Display Name and other values that apply. - - You can use the following example problem as a model. - - >>Which of the following countries celebrates its independence on August 15?||You can select only one option.<< - - [[(India), Spain, China, Bermuda]] - - [explanation] - India became an independent nation on August 15, 1947. - [explanation] + You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown problems. Edit this component to replace this template with your own assessment. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. << + [[ + an incorrect answer + (the correct answer) + an incorrect answer + ]] data: | -

Dropdown problems allow learners to select only one option from a list of options.

-

When you add the problem, be sure to select Settings to specify a Display Name and other values that apply.

-

You can use the following example problem as a model.

- - You can select only one option. - - -
-

Explanation

-

India became an independent nation on August 15, 1947.

-
- +

You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt like this. + + + + + diff --git a/common/lib/xmodule/xmodule/templates/problem/optionresponse_hint.yaml b/common/lib/xmodule/xmodule/templates/problem/optionresponse_hint.yaml index e1ce458067..fa017aa0e2 100644 --- a/common/lib/xmodule/xmodule/templates/problem/optionresponse_hint.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/optionresponse_hint.yaml @@ -2,55 +2,34 @@ metadata: display_name: Dropdown with Hints and Feedback markdown: | - - You can provide feedback for each available option in a dropdown problem. - - You can also add hints for learners. - - Be sure to select Settings to specify a Display Name and other values that apply. - - Use the following example problem as a model. - - >> A/an ________ is a vegetable.||You can select only one option.<< - + You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment. + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt + like this. << [[ - apple {{An apple is the fertilized ovary that comes from an apple tree and contains seeds, meaning it is a fruit.}} - pumpkin {{A pumpkin is the fertilized ovary of a squash plant and contains seeds, meaning it is a fruit.}} - (potato) {{A potato is an edible part of a plant in tuber form and is a vegetable.}} - tomato {{Many people mistakenly think a tomato is a vegetable. However, because a tomato is the fertilized ovary of a tomato plant and contains seeds, it is a fruit.}} + an incorrect answer {{You can specify optional feedback like this, which appears after this answer is submitted.}} + (the correct answer) + an incorrect answer {{You can specify optional feedback for none, a subset, or all of the answers.}} ]] - ||A fruit is the fertilized ovary from a flower.|| - ||A fruit contains seeds of the plant.|| + ||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.|| + ||If you add more than one hint, a different hint appears each time learners select the hint button.|| hinted: true data: | -

You can provide feedback for each available option in a dropdown problem.

-

You can also add hints for learners.

-

Be sure to select Settings to specify a Display Name and other values that apply.

-

Use the following example problem as a model.

- - You can select only one option. +

You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.

+ + You can add an optional tip or note related to the prompt + like this. - - - - + + + - - A fruit is the fertilized ovary from a flower. - A fruit contains seeds of the plant. + You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button. + If you add more than one hint, a different hint appears each time learners select the hint button. diff --git a/common/lib/xmodule/xmodule/templates/problem/string_response.yaml b/common/lib/xmodule/xmodule/templates/problem/string_response.yaml index 3f18dad8c9..2c9970a7d6 100644 --- a/common/lib/xmodule/xmodule/templates/problem/string_response.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/string_response.yaml @@ -2,26 +2,20 @@ metadata: display_name: Text Input markdown: | - You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with - hints and feedback problems. Edit this component to replace this template with your own assessment. + You can use this template as a guide to the simple editor markdown and OLX markup to use for text input problems. Edit this component to replace this template with your own assessment. - >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related - to the prompt like this. << + >>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. << - = the correct answer {{You can specify optional feedback like this, which appears after this answer is submitted.}} + = the correct answer or= optional acceptable variant of the correct answer - not= optional incorrect answer such as a frequent misconception {{You can specify optional feedback for none, a subset, or all of the answers.}} data: | -

You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with

-

hints and feedback problems. Edit this component to replace this template with your own assessment.

+

You can use this template as a guide to the simple editor markdown and OLX markup to use for text input problems. Edit this component to replace this template with your own assessment.

You can add an optional tip or note related to the prompt like this. - You can specify optional feedback like this, which appears after this answer is submitted. - You can specify optional feedback for none, a subset, or all of the answers. diff --git a/common/test/acceptance/tests/lms/test_lms_problems.py b/common/test/acceptance/tests/lms/test_lms_problems.py index 1ded17330c..9c4058687b 100644 --- a/common/test/acceptance/tests/lms/test_lms_problems.py +++ b/common/test/acceptance/tests/lms/test_lms_problems.py @@ -535,3 +535,29 @@ class ProblemTextInputA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest): """) return XBlockFixtureDesc('problem', 'TEXTINPUT PROBLEM', data=xml) + + +@attr('a11y') +class CAPAProblemDropDownA11yTest(CAPAProblemA11yBaseTestMixin, ProblemsTest): + """TestCase Class to verify accessibility for dropdowns(optioninput) CAPA problems.""" + + def get_problem(self): + """ + Problem structure. + """ + xml = dedent(""" + + +

You can use this template as a guide to the simple editor markdown and OLX markup to use for + dropdown problems. Edit this component to replace this template with your own assessment.

+ + Choose wisely + + + + + + + + """) + return XBlockFixtureDesc('problem', 'Problem A11Y TEST', data=xml) diff --git a/common/test/acceptance/tests/lms/test_problem_types.py b/common/test/acceptance/tests/lms/test_problem_types.py index 889c59bd09..e9da7d9645 100644 --- a/common/test/acceptance/tests/lms/test_problem_types.py +++ b/common/test/acceptance/tests/lms/test_problem_types.py @@ -462,12 +462,6 @@ class DropDownProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin): Additional setup for DropDownProblemTypeTest """ super(DropDownProblemTypeTest, self).setUp(*args, **kwargs) - self.problem_page.a11y_audit.config.set_rules({ - 'ignore': [ - 'section', # TODO: AC-491 - 'label', # TODO: AC-291 - ] - }) def answer_problem(self, correct): """