Assessments: Add Multiple Choice Answer Table Component

apps/i18n/common/en_us.json

@@ -36,6 +36,8 @@
   "anotherHoCDesc": "Keep it up! Try your next Hour of Code activity.",
   "anotherHoCTitle": "Try another Hour of Code",
   "answersVisible": "Answers visible (read-only)",
+  "answerOptionOne": "A",
+  "answerOptionTwo": "B",
   "archiveSection": "Archive Section",
   "applabMarketingButton": "Learn more",
   "applabMarketingDesc": "See sample projects, watch demos, and learn more about what you can do with App Lab.",

apps/src/templates/sectionAssessments/MultipleChoiceAnswerTable.jsx

@@ -0,0 +1,140 @@
+import React, {Component, PropTypes} from 'react';
+import {Table, sort} from 'reactabular';
+import {tableLayoutStyles, sortableOptions} from "../tables/tableConstants";
+import commonMsg from '@cdo/locale';
+import wrappedSortable from '../tables/wrapped_sortable';
+import orderBy from 'lodash/orderBy';
+
+export const COLUMNS = {
+  QUESTION: 0,
+  A: 1,
+  B: 2,
+};
+
+const questionAnswerDataPropType = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  question: PropTypes.string,
+  answerOptionOne: PropTypes.string,
+  answerOptionTwo: PropTypes.string,
+});
+
+class MultipleChoiceAnswerTable extends Component {
+  static propTypes= {
+    questionAnswerData: PropTypes.arrayOf(questionAnswerDataPropType),
+  };
+
+  state = {
+    [COLUMNS.NAME]: {
+      direction: 'desc',
+      position: 0
+    }
+  };
+
+  getSortingColumns = () => {
+    return this.state.sortingColumns || {};
+  };
+
+  onSort = (selectedColumn) => {
+    this.setState({
+      sortingColumns: sort.byColumn({
+        sortingColumns: this.state.sortingColumns,
+        // Custom sortingOrder removes 'no-sort' from the cycle
+        sortingOrder: {
+          FIRST: 'asc',
+          asc: 'desc',
+          desc: 'asc'
+        },
+        selectedColumn
+      })
+    });
+  };
+
+  getColumns = (sortable) => {
+    let dataColumns = [
+      {
+        property: 'question',
+        header: {
+          label: commonMsg.question(),
+          props: {
+            style: {
+            ...tableLayoutStyles.headerCell,
+          }},
+          transforms: [sortable],
+        },
+        cell: {
+          format: this.nameFormatter,
+          props: {
+            style: {
+            ...tableLayoutStyles.cell,
+          }}
+        }
+      },
+      {
+        property: 'answerOptionOne',
+        header: {
+          label: commonMsg.answerOptionOne(),
+          props: {
+            style: {
+            ...tableLayoutStyles.headerCell,
+            width: 90,
+          }},
+          transforms: [sortable],
+        },
+        cell: {
+          format: this.ageFormatter,
+          props: {
+            style: {
+            ...tableLayoutStyles.cell,
+            width: 90,
+          }}
+        }
+      },
+      {
+        property: 'answerOptionTwo',
+        header: {
+          label: commonMsg.answerOptionTwo(),
+          props: {
+            style: {
+            ...tableLayoutStyles.headerCell,
+            width: 120,
+          }},
+          transforms: [sortable],
+        },
+        cell: {
+          format: this.genderFormatter,
+          props: {
+            style: {
+            ...tableLayoutStyles.cell,
+            width: 120,
+          }}
+        }
+      },
+    ];
+    return dataColumns;
+  };
+
+  render() {
+    // Define a sorting transform that can be applied to each column
+    const sortable = wrappedSortable(this.getSortingColumns, this.onSort, sortableOptions);
+    const columns = this.getColumns(sortable);
+    const sortingColumns = this.getSortingColumns();
+
+    const sortedRows = sort.sorter({
+      columns,
+      sortingColumns,
+      sort: orderBy,
+    })(this.props.questionAnswerData);
+
+    return (
+        <Table.Provider
+          columns={columns}
+          style={tableLayoutStyles.table}
+        >
+          <Table.Header />
+          <Table.Body rows={sortedRows} rowKey="id" />
+        </Table.Provider>
+    );
+  }
+}
+
+export default MultipleChoiceAnswerTable;

apps/src/templates/sectionAssessments/MultipleChoiceAnswerTable.story.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import MultipleChoiceAnswerTable from './MultipleChoiceAnswerTable';
+
+const multipleChoiceData = [
+  {
+    id: 1,
+    question: 'What is a variable?',
+    answerOptionOne: '40%',
+    answerOptionTwo: '20%',
+  },
+  {
+    id: 2,
+    question: 'What is a 4-bit number for the decimal number Ten(10)',
+    answerOptionOne: '40%',
+    answerOptionTwo: '20%',
+  },
+  {
+    id: 3,
+    question: 'What is the minimum number of bits you will need to encode the 26 letters of the alphabet',
+    answerOptionOne: '40%',
+    answerOptionTwo: '20%',
+  }
+];
+
+export default storybook => {
+  return storybook
+    .storiesOf('SectionAssessments/MultipleChoiceAnswerTable', module)
+    .addStoryTable([
+      {
+        name: 'Table for assessments',
+        description: 'Ability to see assessment overview for the entire class',
+        story: () => (
+            <MultipleChoiceAnswerTable
+              questionAnswerData={multipleChoiceData}
+            />
+        )
+      },
+    ]);
+};