Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Assessments: Style free responses assessments question #23515

Merged
merged 15 commits into from Jul 6, 2018
Merged

Assessments: Style free responses assessments question #23515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5c8216f
add style and set question character limit to 280 characters
nkiruka Jul 3, 2018
788bd91
truncate free responses assessments question and add conditional to show
nkiruka Jul 3, 2018
df31a46
create constant for question character limit
nkiruka Jul 4, 2018
a664c49
break up line as conditional statement exceeds max line length
nkiruka Jul 4, 2018
3e97849
check question text limit for free response survey table
nkiruka Jul 4, 2018
4b2d551
remove extra line space
nkiruka Jul 4, 2018
72d5d74
Remove extra Line
nkiruka Jul 4, 2018
4f0c3b8
extra line is not visible
nkiruka Jul 4, 2018
4779c4f
remove extra lines
nkiruka Jul 4, 2018
83688eb
Merge branch 'style-free-responses-assessments-question' of github.co…
nkiruka Jul 4, 2018
8ecbdd8
refactored code that checks if free response question exceeds charact…
nkiruka Jul 6, 2018
558511b
refactor code in free response survey container that checks if free r…
nkiruka Jul 6, 2018
f8c3b9d
Set state to show full free response question
nkiruka Jul 6, 2018
df655fc
Set state to show full response question for multiple choice overview…
nkiruka Jul 6, 2018
098d1b7
Merge branch 'staging' into style-free-responses-assessments-question
nkiruka Jul 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/i18n/common/en_us.json
View file
Open in desktop
Expand Up @@ -981,6 +981,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",
Expand Down
32 changes: 31 additions & 1 deletion apps/src/templates/sectionAssessments/FreeResponseBySurveyQuestionContainer.jsx
View file
Open in desktop
Expand Up @@ -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,
Expand All @@ -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}
/>
Expand Down
33 changes: 31 additions & 2 deletions apps/src/templates/sectionAssessments/FreeResponsesAssessmentsContainer.jsx
View file
Open in desktop
Expand Up @@ -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),
Expand All @@ -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 (
Expand All @@ -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}
/>
Expand All @@ -52,4 +82,3 @@ export default connect(state => ({
studentId: state.sectionAssessments.studentId,
currentStudentHasResponses: currentStudentHasResponses(state),
}))(FreeResponsesAssessmentsContainer);