From 18f2f97eb1f90318d72f883b1795df81cccb40cd Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 30 Jan 2013 13:56:36 -0500 Subject: [PATCH 01/26] edited problem editor tooltips to have new names and also changed sample problem text to use new names --- cms/templates/widgets/problem-edit.html | 16 ++++++++-------- .../templates/problem/multiplechoice.yaml | 6 ------ .../templates/problem/numericalresponse.yaml | 6 +++--- .../templates/problem/optionresponse.yaml | 16 ++++++++-------- .../templates/problem/string_response.yaml | 10 +++++----- 5 files changed, 24 insertions(+), 30 deletions(-) diff --git a/cms/templates/widgets/problem-edit.html b/cms/templates/widgets/problem-edit.html index 4ff9d299ab..4218178d8e 100644 --- a/cms/templates/widgets/problem-edit.html +++ b/cms/templates/widgets/problem-edit.html @@ -8,13 +8,13 @@ class="problem-editor-icon heading1">
    • -
    • -
    • -
    • -
    • @@ -56,7 +56,7 @@
    -
    Check Multiple
    +
    Checkboxes
    @@ -67,7 +67,7 @@
    -
    String Response
    +
    Text Input
    @@ -76,7 +76,7 @@
    -
    Numerical Response
    +
    Numerical Input
    @@ -85,7 +85,7 @@
    -
    Option Response
    +
    Dropdown
    diff --git a/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml b/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml index 9e61324ae1..3a35a35199 100644 --- a/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml @@ -26,10 +26,6 @@ metadata: ( ) The vegetable peeler - ( ) Android - - ( ) The Beatles - [explanation] The release of the iPod allowed consumers to carry their entire music library with them in a @@ -51,8 +47,6 @@ data: | Napster The iPod The vegetable peeler - Android - The Beatles diff --git a/common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml b/common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml index e0a5776222..1dc46f5f51 100644 --- a/common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml @@ -1,12 +1,12 @@ --- metadata: - display_name: Numerical Response + display_name: Numerical Input rerandomize: never showanswer: always weight: "" attempts: "" markdown: - "A numerical response problem accepts a line of text input from the + "A numerical input problem accepts a line of text input from the student, and evaluates the input for correctness based on its numerical value. @@ -45,7 +45,7 @@ metadata: data: |

    - A numerical response problem accepts a line of text input from the + A numerical input problem accepts a line of text input from the student, and evaluates the input for correctness based on its numerical value.

    diff --git a/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml b/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml index 1a42a5a009..7bbcb5ee3f 100644 --- a/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml @@ -1,12 +1,12 @@ --- metadata: - display_name: Option Response + display_name: Dropdown rerandomize: never showanswer: always weight: "" attempts: "" markdown: - "OptionResponse gives a limited set of options for students to respond with, and presents those options + "Dropdown problems give a limited set of options for students to respond with, and present those options in a format that encourages them to search for a specific answer rather than being immediately presented with options from which to recognize the correct answer. @@ -14,30 +14,30 @@ metadata: The answer options and the identification of the correct answer is defined in the optioninput tag. - Translation between Option Response and __________ is extremely straightforward: + Translation between Dropdown and __________ is extremely straightforward: - [[(Multiple Choice), String Response, Numerical Response, External Response, Image Response]] + [[(Multiple Choice), Text Input, Numerical Input, External Response, Image Response]] [explanation] Multiple Choice also allows students to select from a variety of pre-written responses, although the - format makes it easier for students to read very long response options. Optionresponse also differs + format makes it easier for students to read very long response options. Dropdowns also differ slightly because students are more likely to think of an answer and then search for it rather than relying purely on recognition to answer the question. [explanation] " data: | -

    OptionResponse gives a limited set of options for students to respond with, and presents those options +

    Dropdown problems gives a limited set of options for students to respond with, and present those options in a format that encourages them to search for a specific answer rather than being immediately presented with options from which to recognize the correct answer.

    The answer options and the identification of the correct answer is defined in the optioninput tag.

    -

    Translation between Option Response and __________ is extremely straightforward: +

    Translation between Dropdowns and __________ is extremely straightforward: - +

    diff --git a/common/lib/xmodule/xmodule/templates/problem/string_response.yaml b/common/lib/xmodule/xmodule/templates/problem/string_response.yaml index 1761ea8f67..c018d3f6cf 100644 --- a/common/lib/xmodule/xmodule/templates/problem/string_response.yaml +++ b/common/lib/xmodule/xmodule/templates/problem/string_response.yaml @@ -1,15 +1,15 @@ --- metadata: - display_name: String Response + display_name: Text Input rerandomize: never showanswer: always weight: "" attempts: "" # Note, the extra newlines are needed to make the yaml parser add blank lines instead of folding markdown: - "A string response problem accepts a line of text input from the + "A text input problem accepts a line of text from the student, and evaluates the input for correctness based on an expected - answer within each input box. + answer. The answer is correct if it matches every character of the expected answer. This can be a problem with @@ -30,9 +30,9 @@ data: |

    - A string response problem accepts a line of text input from the + A text input problem accepts a line of text from the student, and evaluates the input for correctness based on an expected - answer within each input box. + answer. The answer is correct if it matches every character of the expected answer. This can be a problem with international spelling, dates, or anything where the format of the answer is not clear.

    From 60032047d7c5ddfb113ae504d5af3fe2ec487f06 Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 30 Jan 2013 19:20:15 -0500 Subject: [PATCH 02/26] added jquery tabs for problem editor, but a bug in rendering is stumping me, will fix tomorrow. --- cms/static/sass/_unit.scss | 34 ++++++++++-- cms/templates/base.html | 1 + cms/templates/unit.html | 111 +++++++++++++++++++++++++++---------- 3 files changed, 112 insertions(+), 34 deletions(-) diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index bdc76c811c..d592f1fb08 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -3,6 +3,12 @@ margin: 40px; } +//Problem selector requirements - TO DO: Marco -determine placement, integration for this +.js .tabs .tab { + display: none; +} +//end problem selector reqs + .main-column { clear: both; float: left; @@ -143,8 +149,8 @@ a { position: relative; - border: 1px solid $darkGreen; - background: tint($green,20%); + border: 1px solid $lightBluishGrey2; + background: tint($mediumGrey,20%); color: #fff; @include transition(background-color .15s); @@ -154,13 +160,26 @@ } } + .problem-type-tabs { + list-style-type: none; + width: 100%; + + li { + } + a{ + display: block; + width: 70px; + height:25px; + } + } + .new-component-template { margin-bottom: 20px; li:last-child { a { border-radius: 0 0 3px 3px; - border-bottom: 1px solid $darkGreen; + border-bottom: 1px solid $mediumGrey; } } @@ -180,13 +199,16 @@ .name { float: left; - .ss-icon { + .problem-selector-icon { @include transition(opacity .15s); - position: relative; + display: inline-block; top: 1px; - font-size: 13px; margin-right: 5px; opacity: 0.5; + width: 17; + height: 21px; + vertical-align: middle; + background: url(../img/problem-selector-icons.png) no-repeat; } } diff --git a/cms/templates/base.html b/cms/templates/base.html index 84f10fc2d1..79958612aa 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -31,6 +31,7 @@ + <%static:js group='main'/> <%static:js group='module-js'/> diff --git a/cms/templates/unit.html b/cms/templates/unit.html index f3a779604e..96028d65ef 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -13,12 +13,20 @@ state: '${unit_state}' }) }); - + + $(document).ready(function() { + $('body').addClass('js'); + + // tabs + $('.tab-group').tabs(); + }); + $('.new-component-template').each(function(){ $emptyEditor = $(this).find('.empty'); $(this).prepend($emptyEditor); }); }); + @@ -56,38 +64,85 @@
    % for type, templates in sorted(component_templates.items()):
    -

    Select ${type} component type:

    +
    + + +
    +
    + +
    +
    + +
    +
    +
    Cancel
    % endfor From a147c66257be7331638f1111a9805f29dea57013 Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 30 Jan 2013 20:10:25 -0500 Subject: [PATCH 03/26] partial styles for problem type header, still work remains. --- cms/static/sass/_unit.scss | 35 +++++++++++++++++++++++++++-------- cms/templates/unit.html | 8 +------- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index d592f1fb08..5fd166649e 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -4,9 +4,9 @@ } //Problem selector requirements - TO DO: Marco -determine placement, integration for this -.js .tabs .tab { - display: none; -} +//.js .tabs .tab { +// display: none; +//} //end problem selector reqs .main-column { @@ -162,14 +162,29 @@ .problem-type-tabs { list-style-type: none; + display: inline-block; width: 100%; + margin: 5px; + + .problem-type-label { + font-size: 16px; + } li { + display:inline-block; + margin: 5px; + text-align:center; } a{ - display: block; - width: 70px; - height:25px; + width: 100px; + height: 60px; + margin-right: 10px; + margin-bottom: 10px; + border-radius: 8px; + font-size: 13px; + line-height: 14px; + text-align: center; + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); } } @@ -243,10 +258,14 @@ margin-bottom: 10px; a { - border-bottom: 1px solid $darkGreen; + border-bottom: 1px solid $lightBluishGrey2; border-radius: 3px; font-weight: 500; - background: $green; + background: tint($mediumGrey,20%); + + &:hover { + background: $brightGreen; + } } } } diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 96028d65ef..5acd0ee3bb 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -67,6 +67,7 @@