Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8751 from edx/ammar/tnl2619

Browse Source 
Visual change to new Hints and Feedback problem types
This commit is contained in:
Muhammad Ammar
2015-07-13 17:03:52 +05:00
parent 4facd069a5 5a8b158900
commit 798aa02f63
12 changed files with 121 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
View File

@@ -59,12 +59,12 @@ def click_new_component_button(step, component_button_css):
def _click_advanced():
css = 'ul.problem-type-tabs a[href="#tab3"]'
css = 'ul.problem-type-tabs a[href="#tab2"]'
world.css_click(css)
# Wait for the advanced tab items to be displayed
tab3_css = 'div.ui-tabs-panel#tab3'
world.wait_for_visible(tab3_css)
tab2_css = 'div.ui-tabs-panel#tab2'
world.wait_for_visible(tab2_css)
def _find_matching_link(category, component_type):

14
cms/djangoapps/contentstore/views/component.py
View File

@@ -227,7 +227,7 @@ def get_component_templates(courselike, library=False):
"""
Returns the applicable component templates that can be used by the specified course or library.
"""
def create_template_dict(name, cat, boilerplate_name=None, tab="common"):
def create_template_dict(name, cat, boilerplate_name=None, tab="common", hinted=False):
"""
Creates a component template dict.
@@ -235,13 +235,15 @@ def get_component_templates(courselike, library=False):
display_name: the user-visible name of the component
category: the type of component (problem, html, etc.)
boilerplate_name: name of boilerplate for filling in default values. May be None.
tab: common(default)/advanced/hint, which tab it goes in
hinted: True if hinted problem else False
tab: common(default)/advanced, which tab it goes in
"""
return {
"display_name": name,
"category": cat,
"boilerplate_name": boilerplate_name,
"hinted": hinted,
"tab": tab
}
@@ -277,20 +279,20 @@ def get_component_templates(courselike, library=False):
for template in component_class.templates():
filter_templates = getattr(component_class, 'filter_templates', None)
if not filter_templates or filter_templates(template, courselike):
# Tab can be 'common' 'advanced' 'hint'
# Tab can be 'common' 'advanced'
# Default setting is common/advanced depending on the presence of markdown
tab = 'common'
if template['metadata'].get('markdown') is None:
tab = 'advanced'
# Then the problem can override that with a tab: attribute (note: not nested in metadata)
tab = template.get('tab', tab)
hinted = template.get('hinted', False)
templates_for_category.append(
create_template_dict(
_(template['metadata'].get('display_name')), # pylint: disable=translation-of-non-string
category,
template.get('template_id'),
tab
tab,
hinted,
)
)

5
cms/static/js/models/component_template.js
View File

@@ -32,6 +32,11 @@ define(["backbone"], function (Backbone) {
return -1;
} else if (isPrimaryBlankTemplate(b)) {
return 1;
// Hinted problems should be shown at the end
} else if (a.hinted && !b.hinted) {
return 1;
} else if (!a.hinted && b.hinted) {
return -1;
} else if (a.display_name > b.display_name) {
return 1;
} else if (a.display_name < b.display_name) {

15
cms/static/sass/elements/_modules.scss
View File

@@ -124,11 +124,11 @@
// green button
.add-xblock-component-button {
@extend %t-action3;
@include margin-right($baseline*0.75);
position: relative;
display: inline-block;
width: ($baseline*5);
height: ($baseline*5);
margin-right: ($baseline*0.75);
margin-bottom: ($baseline/2);
border: 1px solid $green-d2;
border-radius: ($baseline/4);
@@ -164,7 +164,7 @@
.cancel-button {
@include white-button;
margin: $baseline 0 ($baseline/2) ($baseline/2);
@include margin($baseline, 0, ($baseline/2), ($baseline/2));
}
.problem-type-tabs {
@@ -225,13 +225,13 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
li:first-child {
margin-left: $baseline;
@include margin-left($baseline);
}
li {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
opacity: 0.8;
float: left;
@include float(left);
display: inline-block;
width: auto;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
@@ -248,6 +248,11 @@
border: 0px;
opacity: 1.0;
}
// reset to remove jquery-ui float
a.link-tab {
float: none;
}
}
a {
@@ -286,7 +291,7 @@ $outline-indent-width: $baseline;
.icon {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
@include margin-right($baseline/2);
}
}
}

19
cms/templates/js/add-xblock-component-menu-problem.underscore
View File

@@ -4,10 +4,7 @@
<a class="link-tab" href="#tab1"><%= gettext("Common Problem Types") %></a>
</li>
<li>
<a class="link-tab" href="#tab2"><%= gettext("Common Problems with Hints and Feedback") %></a>
</li>
<li>
<a class="link-tab" href="#tab3"><%= gettext("Advanced") %></a>
<a class="link-tab" href="#tab2"><%= gettext("Advanced") %></a>
</li>
</ul>
<div class="tab current" id="tab1">
@@ -33,20 +30,6 @@
</ul>
</div>
<div class="tab" id="tab2">
<ul class="new-component-template">
<% for (var i = 0; i < templates.length; i++) { %>
<% if (templates[i].tab == "hint") { %>
<li class="editor-manual">
<a href="#" data-category="<%= templates[i].category %>"
data-boilerplate="<%= templates[i].boilerplate_name %>">
<span class="name"><%= templates[i].display_name %></span>
</a>
</li>
<% } %>
<% } %>
</ul>
</div>
<div class="tab" id="tab3">
<ul class="new-component-template">
<% for (var i = 0; i < templates.length; i++) { %>
<% if (templates[i].tab == "advanced") { %>

2
common/lib/xmodule/xmodule/templates/problem/checkboxes_response_hint.yaml
View File

@@ -27,7 +27,7 @@ metadata:
||A fruit is the fertilized ovary from a flower.||
||A fruit contains seeds of the plant.||
tab: hint
hinted: true
data: |
<problem>

2
common/lib/xmodule/xmodule/templates/problem/multiplechoice_hint.yaml
View File

@@ -20,7 +20,7 @@ metadata:
||A fruit is the fertilized ovary from a flower.||
||A fruit contains seeds of the plant.||
tab: hint
hinted: true
data: |
<problem>

2
common/lib/xmodule/xmodule/templates/problem/numericalresponse_hint.yaml
View File

@@ -24,7 +24,7 @@ metadata:
The mean is calculated by summing the set of numbers and dividing by n. In this case: (1 + 5 + 6 + 3 + 5) / 5 = 20 / 5 = 4.
[explanation]
tab: hint
hinted: true
data: |
<problem>

2
common/lib/xmodule/xmodule/templates/problem/optionresponse_hint.yaml
View File

@@ -23,7 +23,7 @@ metadata:
||A fruit is the fertilized ovary from a flower.||
||A fruit contains seeds of the plant.||
tab: hint
hinted: true
data: |
<problem>

2
common/lib/xmodule/xmodule/templates/problem/string_response_hint.yaml
View File

@@ -23,7 +23,7 @@ metadata:
||Consider the square miles, not population.||
||Consider all 50 states, not just the continental United States.||
tab: hint
hinted: true
data: |
<problem>

30
common/test/acceptance/pages/studio/container.py
View File

@@ -281,6 +281,36 @@ class ContainerPage(PageObject):
"""
return "is-editing" in self.q(css=self.NAME_FIELD_WRAPPER_SELECTOR).first.attrs("class")[0]
def get_category_tab_names(self, category_type):
"""
Returns list of tab name in a category.
Arguments:
category_type (str): category type
Returns:
list
"""
self.q(css='.add-xblock-component-button[data-type={}]'.format(category_type)).first.click()
return self.q(css='.{}-type-tabs>li>a'.format(category_type)).text
def get_category_tab_components(self, category_type, tab_index):
"""
Return list of component names in a tab in a category.
Arguments:
category_type (str): category type
tab_index (int): tab index in a category
Returns:
list
"""
css = '#tab{tab_index} a[data-category={category_type}] span'.format(
tab_index=tab_index,
category_type=category_type
)
return self.q(css=css).html
class XBlockWrapper(PageObject):
"""

59
common/test/acceptance/tests/studio/test_studio_container.py
View File

@@ -8,6 +8,7 @@ from unittest import skip
from ...fixtures.course import XBlockFixtureDesc
from ...pages.studio.component_editor import ComponentEditorView, ComponentVisibilityEditorView
from ...pages.studio.container import ContainerPage
from ...pages.studio.html_component_editor import HtmlComponentEditorView
from ...pages.studio.utils import add_discussion, drag
from ...pages.lms.courseware import CoursewarePage
@@ -1056,3 +1057,61 @@ class DisplayNameTest(ContainerBase):
title_on_unit_page = test_block.name
container = test_block.go_to_container()
self.assertEqual(container.name, title_on_unit_page)
class ProblemCategoryTabsTest(ContainerBase):
"""
Test to verify tabs in problem category.
"""
def setUp(self, is_staff=True):
super(ProblemCategoryTabsTest, self).setUp(is_staff=is_staff)
def populate_course_fixture(self, course_fixture):
"""
Sets up course structure.
"""
course_fixture.add_children(
XBlockFixtureDesc('chapter', 'Test Section').add_children(
XBlockFixtureDesc('sequential', 'Test Subsection').add_children(
XBlockFixtureDesc('vertical', 'Test Unit')
)
)
)
def test_correct_tabs_present(self):
"""
Scenario: Verify that correct tabs are present in problem category.
Given I am a staff user
When I go to unit page
Then I only see `Common Problem Types` and `Advanced` tabs in `problem` category
"""
self.go_to_unit_page()
page = ContainerPage(self.browser, None)
self.assertEqual(page.get_category_tab_names('problem'), ['Common Problem Types', 'Advanced'])
def test_common_problem_types_tab(self):
"""
Scenario: Verify that correct components are present in Common Problem Types tab.
Given I am a staff user
When I go to unit page
Then I see correct components under `Common Problem Types` tab in `problem` category
"""
self.go_to_unit_page()
page = ContainerPage(self.browser, None)
expected_components = [
"Blank Common Problem",
"Checkboxes",
"Dropdown",
"Multiple Choice",
"Numerical Input",
"Text Input",
"Checkboxes with Hints and Feedback",
"Dropdown with Hints and Feedback",
"Multiple Choice with Hints and Feedback",
"Numerical Input with Hints and Feedback",
"Text Input with Hints and Feedback",
]
self.assertEqual(page.get_category_tab_components('problem', 1), expected_components)