Merge pull request #23515 from code-dot-org/style-free-responses-asse…

…ssments-question Assessments: Style free responses assessments question
code-dot-org · Jul 6, 2018 · bb4e4e4 · bb4e4e4
2 parents 3a7755b + 098d1b7
commit bb4e4e4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -982,6 +982,7 @@
   "searchForCountry": "Search for your country.",
   "searchForSchool": "Search for your school.",
   "seeFullResponse": " ...see full response",
+  "seeFullQuestion": " ...see full question",
   "school": "School",
   "schoolCity": "School City",
   "schoolCityTown": "City / Town",

diff --git a/apps/src/templates/sectionAssessments/FreeResponseBySurveyQuestionContainer.jsx b/apps/src/templates/sectionAssessments/FreeResponseBySurveyQuestionContainer.jsx
@@ -6,6 +6,16 @@ import {
 import { connect } from 'react-redux';
 import i18n from "@cdo/locale";
 
+const QUESTION_CHARACTER_LIMIT = 260;
+
+const styles = {
+  text: {
+    font: 10,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+};
+
 const freeResponseQuestionsPropType = PropTypes.shape({
   questionNumber: PropTypes.number,
   questionText: PropTypes.string,
@@ -17,14 +27,34 @@ class FreeResponseBySurveyQuestionContainer extends Component {
     freeResponsesByQuestion: PropTypes.arrayOf(freeResponseQuestionsPropType),
   };
 
+  state = {
+    isExpanded: false,
+  };
+
+  expandText = () => {
+    this.setState({isExpanded: true});
+  };
+
   render() {
     const {freeResponsesByQuestion} = this.props;
     return (
       <div>
         <h2>{i18n.studentFreeResponseAnswers()}</h2>
         {freeResponsesByQuestion.map((question, index) => (
           <div key={index}>
-            <h3>{`${question.questionNumber}. ${question.questionText}`}</h3>
+            {!this.state.isExpanded &&
+              <div style={styles.text}>
+                {`${question.questionNumber}. ${question.questionText.slice(0, QUESTION_CHARACTER_LIMIT)}`}
+                {question.questionText.length >= QUESTION_CHARACTER_LIMIT &&
+                   <a onClick={this.expandText}><span>{i18n.seeFullQuestion()}</span></a>
+                }
+              </div>
+            }
+            {this.state.isExpanded &&
+              <div style={styles.text}>
+                {`${question.questionNumber}. ${question.questionText}`}
+              </div>
+            }
             <FreeResponsesSurveyTable
               freeResponses={question.answers}
             />

diff --git a/apps/src/templates/sectionAssessments/FreeResponsesAssessmentsContainer.jsx b/apps/src/templates/sectionAssessments/FreeResponsesAssessmentsContainer.jsx
@@ -9,6 +9,16 @@ import {
 import { connect } from 'react-redux';
 import i18n from "@cdo/locale";
 
+const QUESTION_CHARACTER_LIMIT = 260;
+
+const styles = {
+  text: {
+    font: 10,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+};
+
 export const freeResponseSummaryPropType = PropTypes.shape({
   questionText:  PropTypes.string,
   responses: PropTypes.arrayOf(freeResponsesDataPropType),
@@ -21,6 +31,14 @@ class FreeResponsesAssessmentsContainer extends Component {
     currentStudentHasResponses: PropTypes.bool,
   };
 
+  state = {
+    isExpanded: false,
+  };
+
+  expandText = () => {
+    this.setState({isExpanded: true});
+  };
+
   render() {
     const {freeResponseQuestions, studentId, currentStudentHasResponses} = this.props;
     return (
@@ -32,7 +50,19 @@ class FreeResponsesAssessmentsContainer extends Component {
             }
             {freeResponseQuestions.map((question, index) => (
               <div key={index}>
-                <h3>{`${question.questionNumber}. ${question.questionText}`}</h3>
+                {!this.state.isExpanded &&
+                  <div style={styles.text}>
+                    {`${question.questionNumber}. ${question.questionText.slice(0, QUESTION_CHARACTER_LIMIT)}`}
+                    {question.questionText.length >= QUESTION_CHARACTER_LIMIT &&
+                      <a onClick={this.expandText}><span>{i18n.seeFullQuestion()}</span></a>
+                    }
+                  </div>
+                }
+                {this.state.isExpanded &&
+                  <div style={styles.text}>
+                    {`${question.questionNumber}. ${question.questionText}`}
+                  </div>
+                }
                 <FreeResponsesAssessmentsTable
                   freeResponses={question.responses}
                 />
@@ -52,4 +82,3 @@ export default connect(state => ({
   studentId: state.sectionAssessments.studentId,
   currentStudentHasResponses: currentStudentHasResponses(state),
 }))(FreeResponsesAssessmentsContainer);
-