Merge pull request #1494 from MITx/feature/marco/addcomponent

Feature/marco/addcomponent

cms/djangoapps/contentstore/tests/test_contentstore.py

@@ -401,11 +401,11 @@ class ContentStoreTest(ModuleStoreTestCase):
 
     def test_capa_module(self):
         """Test that a problem treats markdown specially."""
-        CourseFactory.create(org='MITx', course='999', display_name='Robot Super Course')
+        course = CourseFactory.create(org='MITx', course='999', display_name='Robot Super Course')
 
         problem_data = {
             'parent_location': 'i4x://MITx/999/course/Robot_Super_Course',
-            'template': 'i4x://edx/templates/problem/Empty'
+            'template': 'i4x://edx/templates/problem/Blank_Common_Problem'
             }
 
         resp = self.client.post(reverse('clone_item'), problem_data)
@@ -429,7 +429,7 @@ class TemplateTestCase(ModuleStoreTestCase):
 
         # insert a bogus template in the store
         bogus_template_location = Location('i4x', 'edx', 'templates', 'html', 'bogus')
-        source_template_location = Location('i4x', 'edx', 'templates', 'html', 'Empty')
+        source_template_location = Location('i4x', 'edx', 'templates', 'html', 'Blank_HTML_Page')
         
         ms.clone_item(source_template_location, bogus_template_location)
 

cms/djangoapps/contentstore/views.py

@@ -273,7 +273,7 @@ def edit_unit(request, location):
                 template.display_name,
                 template.location.url(),
                 'markdown' in template.metadata,
-                template.location.name == 'Empty'
+                'empty' in template.metadata
             ))
 
     components = [

cms/static/sass/_reset.scss

@@ -55,3 +55,117 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+/* Reset styles to remove ui-lightness jquery ui theme 
+from the tabs component (used in the add component problem tab menu) 
+*/
+
+.ui-tabs {
+	padding: 0;
+	white-space: normal;
+}
+
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-top-right-radius: 0;
+	border-top-left-radius: 0;
+}
+
+
+.ui-widget-content {
+	border: 0;
+	background: none;
+}
+.ui-widget {
+	font-family: 'Open Sans', sans-serif;
+	font-size: 16px;
+}
+
+.ui-widget-header {
+	border:none;
+	background: none;
+}
+
+.ui-tabs .ui-tabs-nav {
+	padding: 0;
+}
+
+.ui-tabs .ui-tabs-nav li {
+	margin: 0;
+	padding: 0;
+	border: none;
+	top: 0;
+	margin: 0;
+	float: none; 
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.ui-tabs-nav {
+
+	li {
+		top: 0;
+		margin: 0;
+	}
+	a {
+		float: none;
+		font-weight: normal;
+	}
+}
+
+.ui-tabs .ui-tabs-panel {
+	padding: 0;
+}
+
+/* reapplying the tab styles from unit.scss after 
+removing jquery ui ui-lightness styling 
+*/
+
+.problem-type-tabs {
+	border:none;
+	list-style-type: none;
+	width: 100%;
+	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+	//background-color: $lightBluishGrey;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+	
+	li:first-child {
+		margin-left: 20px;
+	}
+	li {
+		opacity: .8;
+
+		&:ui-state-active {
+			background-color: rgba(255, 255, 255, .3);
+			opacity: 1;
+			font-weight: 400;
+		}
+		a:focus {
+			outline: none;
+			border: 0px;
+		}
+	}
+/*
+	li {
+		float:left;
+		display:inline-block;
+		text-align:center;
+		width: auto;
+		//@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+		//background-color: tint($lightBluishGrey, 20%);
+		//@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+		opacity:.8;
+
+		&:hover {
+		  opacity:1;
+		}
+
+		&.current {
+		  border: 0px;
+		  //@include active;
+		  opacity:1;
+		}
+	}
+*/
+}
\ No newline at end of file

cms/static/sass/_unit.scss

@@ -3,6 +3,12 @@
   margin: 40px;
 }
 
+//Problem Selector tab menu requirements
+.js .tabs .tab {
+ display: none;
+}
+//end problem selector reqs
+
 .main-column {
   clear: both;
   float: left;
@@ -58,6 +64,7 @@
       margin: 20px 40px;
 
 
+
       .title {
         margin: 0 0 15px 0;
         color: $mediumGrey;
@@ -67,22 +74,25 @@
       }
 
       &.new-component-item {
-        padding: 20px;
-        border: none;
-        border-radius: 3px;
-        background: $lightGrey;
+        margin: 20px 0px;
+        border-top: 1px solid $mediumGrey;
+        box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
+        background-color: $lightGrey;
+        margin-bottom: 0px;
+        padding-bottom: 20px;
 
         .new-component-button {
           display: block;
           padding: 20px;
           text-align: center;
-          color: #6d788b;
+          color: #edf1f5;
         }
 
         h5 {
-          margin-bottom: 8px;
+          margin: 20px 0px;
           color: #fff;
-          font-weight: 700;
+          font-weight: 600;
+          font-size: 18px;
         }
 
         .rendered-component {
@@ -92,18 +102,21 @@
         }
 
         .new-component-type {
+
           a,
           li {
             display: inline-block;
           }
 
           a {
+            border: 1px solid $mediumGrey;
             width: 100px;
             height: 100px;
-            margin-right: 10px;
-            margin-bottom: 10px;
+            color: #fff;
+            margin-right: 15px;
+            margin-bottom: 20px;
             border-radius: 8px;
-            font-size: 13px;
+            font-size: 15px;
             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);
@@ -115,25 +128,40 @@
               width: 100%;
               padding: 10px;
               @include box-sizing(border-box);
+              color: #fff;
             }
           }
         }
 
         .new-component-templates {
           display: none;
-          padding: 20px;
+          margin: 20px 40px 20px 40px;
+          border-radius: 3px;
+          border: 1px solid $mediumGrey;
+          background-color: #fff;
+          @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
           @include clearfix;
 
           .cancel-button {
+            margin: 20px 0px 10px 10px;
             @include white-button;
           }
 
+          .problem-type-tabs {
+            display: none;
+          }
+
           // specific menu types
           &.new-component-problem {
+            padding-bottom:10px;
 
             .ss-icon, .editor-indicator {
               display: inline-block;
             }
+
+            .problem-type-tabs {
+              display: inline-block;
+            }
           }
         }
 
@@ -146,7 +174,6 @@
             border: 1px solid $darkGreen;
             background: tint($green,20%);
             color: #fff;            
-            @include transition(background-color .15s);
 
             &:hover {
               background: $brightGreen;
@@ -154,19 +181,81 @@
           }
         }
 
+        .problem-type-tabs {
+          list-style-type: none;
+          border-radius: 0;
+          width: 100%;
+          @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+          background-color: $lightBluishGrey;
+          @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+
+          li:first-child {
+            margin-left: 20px;
+          }
+
+          li {
+            float:left;
+            display:inline-block;
+            text-align:center;
+            width: auto;
+            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+            background-color: tint($lightBluishGrey, 10%);
+            @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+            opacity:.8;
+
+            &:hover {
+              opacity:1;
+              background-color: tint($lightBluishGrey, 20%);
+            }
+
+            &.ui-state-active {
+              border: 0px;
+              @include active;
+              opacity:1;
+            }
+          }
+
+          a{
+            display: block;
+            padding: 15px 25px;
+            font-size: 15px;
+            line-height: 16px;
+            text-align: center;
+            color: #3c3c3c;
+            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+          }
+        }
+
         .new-component-template {
-          margin-bottom: 20px;
 
-          li:last-child {
           a {
-              border-radius: 0 0 3px 3px;
-              border-bottom: 1px solid $darkGreen;
+            background: #fff;
+            border: 0px;
+            color: #3c3c3c;
+            @include transition (none);
+
+            &:hover {
+              background: tint($green,30%); 
+              color: #fff;        
+              @include transition(background-color .15s);
+            }
+          }
+
+          li {
+              border:none;
+              border-bottom: 1px dashed $lightGrey;
+              color: #fff;      
+          }
+
+          li:first-child {
+            a {
+              border-top: 0px;
             }
           }
 
           li:nth-child(2) {
             a {
-              border-radius: 3px 3px 0 0;
+              border-radius: 0px;
             }
           }
 
@@ -175,18 +264,20 @@
             display: block;
             padding: 7px 20px;
             border-bottom: none;
-            font-weight: 300;
+            font-weight: 500;
 
             .name {
               float: left;
 
               .ss-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;
               }
             }
 
@@ -204,6 +295,7 @@
             }
 
             &:hover {
+              color: #fff;
 
               .ss-icon {
                 opacity: 1.0;
@@ -217,14 +309,18 @@
 
           // specific editor types 
           .empty {
-            @include box-shadow(0 1px 3px rgba(0,0,0,0.2));
-            margin-bottom: 10px;
 
             a {
-              border-bottom: 1px solid $darkGreen;
-              border-radius: 3px;
-              font-weight: 500;
-              background: $green;
+              line-height: 1.4;
+              font-weight: 400;
+              background: #fff;
+              color: #3c3c3c;
+
+
+              &:hover {
+              background: tint($green,30%); 
+              color: #fff;
+            }
             }
           }
         }
@@ -233,7 +329,7 @@
           text-align: center;
 
           h5 {
-            color: $green;
+            color: $darkGreen;
           }
           
         }
@@ -507,6 +603,7 @@
 
 .edit-state-draft {
   .visibility,
+
   .edit-draft-message,
   .view-button {
     display: none;

cms/templates/unit.html

@@ -14,11 +14,19 @@
       })
     });
 
+    $(document).ready(function() {
+      $('body').addClass('js');
+
+      // tabs
+      $('.tab-group').tabs();
+    });
+
     $('.new-component-template').each(function(){
         $emptyEditor = $(this).find('.empty');
         $(this).prepend($emptyEditor);
       });
     });
+
   </script>
 
 </%block>
@@ -56,38 +64,66 @@
               </div>
                 % for type, templates in sorted(component_templates.items()):
                 <div class="new-component-templates new-component-${type}">
-                    <h3 class="title">Select <span class="type">${type}</span> component type:</h3>
-
+                    % if type == "problem":
+                    <div class="tab-group tabs">
+                            <ul class="problem-type-tabs nav-tabs">
+                              <li class="current">
+                                <a class="link-tab" href="#tab1">Common Problem Types</a>
+                              </li>
+                              <li>
+                                <a class="link-tab" href="#tab2">Advanced</a>
+                              </li>
+                            </ul>
+                    % endif
+                        <div class="tab current" id="tab1">
                           <ul class="new-component-template">
                               % for name, location, has_markdown, is_empty in templates:
-
+                                % if has_markdown or type != "problem":
                                     % if is_empty:
                                       <li class="editor-md empty">
                                         <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
-                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
+                                          <span class="name"> ${name}</span>
                                         </a>
                                       </li>
                                     
-                          % elif has_markdown:
+                                    % else:
                                       <li class="editor-md">
                                         <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
-                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
+                                          <span class="name"> ${name}</span>
+                                        </a>
+                                      </li>
+                                    % endif
+                                % endif
+                    
+                              %endfor
+                          </ul>
+                        </div>
+                    % if type == "problem":
+                            <div class="tab" id="tab2">
+                              <ul class="new-component-template">
+                                  % for name, location, has_markdown, is_empty in templates:
+                                    % if not has_markdown:  
+                                        % if is_empty:
+                                          <li class="editor-manual empty">
+                                            <a href="#" data-location="${location}">
+                                              <span class="name">${name}</span>
                                             </a>
                                           </li>
                                         
                                         % else:
                                           <li class="editor-manual">
                                             <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
-                                <span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
+                                              <span class="name"> ${name}</span>
                                             </a>
+                                        
                                           </li>
                                         % endif
-
-                        %endfor
+                                    % endif
+                                  % endfor
                               </ul>
+                            </div>
+                    </div>
+                    % endif
                     <a href="#" class="cancel-button">Cancel</a>
                 </div>
                 % endfor

cms/templates/widgets/problem-edit.html

 <%include file="metadata-edit.html" />
 <section class="problem-editor editor">
     <div class="row">
-        %if markdown != '' or data == '<problem>\n</problem>\n':
+        %if enable_markdown:
         <div class="editor-bar">
             <ul class="format-buttons">
                 <li><a href="#" class="header-button" data-tooltip="Heading 1"><span
                         class="problem-editor-icon heading1"></span></a></li>
                 <li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span
                         class="problem-editor-icon multiple-choice"></span></a></li>
-                <li><a href="#" class="checks-button" data-tooltip="Check Multiple"><span
+                <li><a href="#" class="checks-button" data-tooltip="Checkboxes"><span
                         class="problem-editor-icon checks"></span></a></li>
-                <li><a href="#" class="string-button" data-tooltip="String Response"><span
+                <li><a href="#" class="string-button" data-tooltip="Text Input"><span
                         class="problem-editor-icon string"></span></a></li>
-                <li><a href="#" class="number-button" data-tooltip="Numerical Response"><span
+                <li><a href="#" class="number-button" data-tooltip="Numerical Input"><span
                         class="problem-editor-icon number"></span></a></li>
-                <li><a href="#" class="dropdown-button" data-tooltip="Option Response"><span
+                <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span
                         class="problem-editor-icon dropdown"></span></a></li>
                 <li><a href="#" class="explanation-button" data-tooltip="Explanation"><span
                         class="problem-editor-icon explanation"></span></a></li>
@@ -56,7 +56,7 @@
                 </div>
             </div>
             <div class="row">
-                <h6>Check Multiple</h6>
+                <h6>Checkboxes</h6>
                 <div class="col sample check-multiple">
                     <img src="/static/img/multi-example.png" />
                 </div>
@@ -67,7 +67,7 @@
                 </div>
             </div>
             <div class="row">
-                <h6>String Response</h6>
+                <h6>Text Input</h6>
                 <div class="col sample string-response">
                     <img src="/static/img/string-example.png" />
                 </div>
@@ -76,7 +76,7 @@
                 </div>
             </div>
             <div class="row">
-                <h6>Numerical Response</h6>
+                <h6>Numerical Input</h6>
                 <div class="col sample numerical-response">
                     <img src="/static/img/number-example.png" />
                 </div>
@@ -85,7 +85,7 @@
                 </div>
             </div>
             <div class="row">
-                <h6>Option Response</h6>
+                <h6>Dropdown</h6>
                 <div class="col sample option-reponse">
                     <img src="/static/img/select-example.png" />
                 </div>

common/lib/xmodule/xmodule/capa_module.py

@@ -703,15 +703,15 @@ class CapaDescriptor(RawDescriptor):
 
     def get_context(self):
         _context = RawDescriptor.get_context(self)
-        _context.update({'markdown': self.metadata.get('markdown', '')})
+        _context.update({'markdown': self.metadata.get('markdown', ''),
+                         'enable_markdown' : 'markdown' in self.metadata})
         return _context
 
     @property
     def editable_metadata_fields(self):
-        """Remove metadata from the editable fields since it has its own editor"""
-        subset = super(CapaDescriptor, self).editable_metadata_fields
-        if 'markdown' in subset:
-            subset.remove('markdown')
+        """Remove any metadata from the editable fields which have their own editor or shouldn't be edited by user."""
+        subset = [field for field in super(CapaDescriptor,self).editable_metadata_fields
+                  if field not in ['markdown', 'empty']]
         return subset
 
 

common/lib/xmodule/xmodule/html_module.py

@@ -172,6 +172,13 @@ class HtmlDescriptor(XmlDescriptor, EditingDescriptor):
         elt.set("filename", relname)
         return elt
 
+    @property
+    def editable_metadata_fields(self):
+        """Remove any metadata from the editable fields which have their own editor or shouldn't be edited by user."""
+        subset = [field for field in super(HtmlDescriptor,self).editable_metadata_fields
+                  if field not in ['empty']]
+        return subset
+
 
 class AboutDescriptor(HtmlDescriptor):
     """

common/lib/xmodule/xmodule/templates/html/empty.yaml

 ---
 metadata:
-      display_name: Empty
+    display_name: Blank HTML Page
+    empty: True
 
 data: |
 

common/lib/xmodule/xmodule/templates/problem/circuitschematic.yaml

+
 ---
 metadata:
-    display_name: Circuit Schematic
+    display_name: Circuit Schematic Builder
     rerandomize: never
     showanswer: always
     weight: ""

common/lib/xmodule/xmodule/templates/problem/customgrader.yaml

 ---
 metadata:
-    display_name: Custom Grader
+    display_name: Custom Python-Evaluated Input
     rerandomize: never
     showanswer: always
     weight: ""
@@ -8,7 +8,7 @@ metadata:
 data: |
   <problem>
   <p>
-  A custom response problem accepts one or more lines of text input from the
+  A custom python-evaluated input problem accepts one or more lines of text input from the
   student, and evaluates the inputs for correctness based on evaluation using a 
   python script embedded within the problem.
   </p>

common/lib/xmodule/xmodule/templates/problem/empty.yaml

 ---
 metadata:
-    display_name: Empty
+    display_name: Blank Common Problem
     rerandomize: never
     showanswer: always
     markdown: ""
     weight: ""
+    empty: True
     attempts: ""
 data: |
   <problem>

common/lib/xmodule/xmodule/templates/problem/emptyadvanced.yaml

+---
+metadata:
+    display_name: Blank Advanced Problem
+    rerandomize: never
+    showanswer: always
+    weight: ""
+    attempts: ""
+    empty: True
+data: |
+  <problem>
+  </problem>
+
+children: []

common/lib/xmodule/xmodule/templates/problem/forumularesponse.yaml

 ---
 metadata:
-    display_name: Formula Response
+    display_name: Math Expression Input
     rerandomize: never
     showanswer: always
     weight: ""
@@ -8,7 +8,7 @@ metadata:
 data: |
   <problem>
   <p>
-  A formula response problem accepts a line of text representing a mathematical expression from the
+  A math expression input problem accepts a line of text representing a mathematical expression from the
   student, and evaluates the input for equivalence to a mathematical expression provided by the 
   grader. Correctness is based on numerical sampling of the symbolic expressions.
   </p>

common/lib/xmodule/xmodule/templates/problem/imageresponse.yaml

 ---
 metadata:
-    display_name: Image Response
+    display_name: Image Mapped Input
     rerandomize: never
     showanswer: always
     weight: ""
@@ -8,7 +8,7 @@ metadata:
 data: |
   <problem>
   <p>
-  An image response problem presents an image for the student.  Input is
+  An image mapped input problem presents an image for the student.  Input is
   given by the location of mouse clicks on the image. Correctness of input can be evaluated based on expected dimensions of a rectangle.
   </p>
 

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: |
            <choice correct="false" name="beatles">Napster</choice>
            <choice correct="true" name="ipod">The iPod</choice>
            <choice correct="false" name="peeler">The vegetable peeler</choice>
-           <choice correct="false" name="android">Android</choice>
-           <choice correct="false" name="beatles">The Beatles</choice>
         </choicegroup>
        </multiplechoiceresponse>
        <solution>

common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml

 ---
 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: |
    <problem>
    <p>
-   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.  
    </p>

common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml

 ---
 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 <b>optioninput</b> 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: |
   <problem>
-  <p>OptionResponse gives a limited set of options for students to respond with, and presents those options
+  <p>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.</p>
 
   <p>
   The answer options and the identification of the correct answer is defined in the <b>optioninput</b> tag. 
   </p>
-  <p>Translation between Option Response and __________ is extremely straightforward:
+  <p>Translation between Dropdown and __________ is extremely straightforward:
       
   <optionresponse>
-        <optioninput options="('Multiple Choice','String Response','Numerical Response','External Response','Image Response')" correct="Multiple Choice"></optioninput>
+        <optioninput options="('Multiple Choice','Text Input','Numerical Input','External Response','Image Response')" correct="Multiple Choice"></optioninput>
   </optionresponse>
   </p>
       <solution>

common/lib/xmodule/xmodule/templates/problem/string_response.yaml

 ---
 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: |
     <problem showanswer="always">
     <p>
 
-    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. 
     </p>