diff --git a/src/components/AnswerKeyForm/QuestionsRow.js b/src/components/AnswerKeyForm/QuestionsRow.js index 9bef18f..5f48339 100644 --- a/src/components/AnswerKeyForm/QuestionsRow.js +++ b/src/components/AnswerKeyForm/QuestionsRow.js @@ -4,9 +4,8 @@ export default function(props) { const cells = [...Array(props.numQuestions).keys()].map((question, index) => ( props.onChange(event.target, question)} /> )); diff --git a/src/components/AnswerKeyForm/index.css b/src/components/AnswerKeyForm/index.css index d5d6121..7602d8e 100644 --- a/src/components/AnswerKeyForm/index.css +++ b/src/components/AnswerKeyForm/index.css @@ -2,10 +2,12 @@ } .answerkeyform__table input { - width: 4rem; + width: 3rem; + height: 3rem; margin: 0; + padding: 1rem; } .answerkeyform__table__questionrow td { - padding: 1rem; + padding: 0.5rem; } diff --git a/src/components/AnswerKeyForm/index.js b/src/components/AnswerKeyForm/index.js index 06bce7a..6bd2911 100644 --- a/src/components/AnswerKeyForm/index.js +++ b/src/components/AnswerKeyForm/index.js @@ -8,23 +8,25 @@ class AnswerKeyForm extends React.Component { this.state = { courseName: '', - answers: Array(props.numberOfTests).fill( - Array(props.numberOfQuestionsPerTest) + answers: Array(props.numberOfTests * props.numberOfQuestionsPerTest).fill( + null ), }; this.handleInputChange = this.handleInputChange.bind(this); + this.handleAnswerChange = this.handleAnswerChange.bind(this); console.log(this.state.answers); } - handleAnswerChange(test, question) { + handleAnswerChange(target, answerIndex) { const answers = this.state.answers.slice(); - const testAnswers = answers[test]; - testAnswers[question] = value; + answers[answerIndex] = target.value; this.setState({ answers: answers, }); + + console.log(answers); } handleInputChange(event) { @@ -46,7 +48,9 @@ class AnswerKeyForm extends React.Component { key={index} testNum={test + 1} numQuestions={this.props.numberOfQuestionsPerTest} - handleInputChange={() => this.handleAnswerChange(testNum)} + onChange={(target, question) => + this.handleAnswerChange(target, (test + 1) * question) + } /> ) ); @@ -63,6 +67,7 @@ class AnswerKeyForm extends React.Component { onChange={this.handleInputChange} /> +

Test Answers