Properly render multiple choice card. (#250)

* Properly render multiple choice card. * Update data parameter to use card.options value. * Support rendering of other card types. (#252) * Support rendering of other card types. * Use create edit paragraph.
uwblueprint · Nov 11, 2020 · d332d3d · d332d3d
1 parent 349090a
commit d332d3d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/Components/FormCreation/CreateEditMultipleChoice.js b/src/Components/FormCreation/CreateEditMultipleChoice.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   closeRoot: {
     display: "inline-block",
     position: "absolute",
-    left: "776px",
+    left: "676px",
     bottom: "2px"
   },
   droppableSection: {
@@ -52,7 +52,7 @@ const OptionWrapper = styled.div`
 
 const OptionNameInput = styled(InputBase)`
   && {
-    width: 716px;
+    width: 616px;
     display: inline-block;
     line-height: 21px;
     overflow-y: auto;

diff --git a/src/Components/FormCreation/FormCard.js b/src/Components/FormCreation/FormCard.js
@@ -9,6 +9,9 @@ import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
 import { Switch } from "@material-ui/core";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
+import CreateEditMultipleChoice from "./CreateEditMultipleChoice";
+import CreateEditShortAnswer from "./CreateEditShortAnswer";
+import CreateEditParagraph from "./CreateEditParagraph";
 
 const useStyles = makeStyles({
   collapse: {
@@ -99,7 +102,16 @@ function FormCard({
       >
         <CardHeader className={classes.title} title={question} id={card} />
         <CardContent className={classes.content}>
-          todo
+          {card && card.type === "MULTIPLE_CHOICE" ? (
+            <CreateEditMultipleChoice data={card.options} />
+          ) : null}
+          {card && card.type === "SHORT_ANSWER" ? (
+            <CreateEditShortAnswer />
+          ) : null}
+          {card && card.type === "PARAGRAPHS" ? <CreateEditParagraph /> : null}
+          {card && card.type === "CHECKBOXES" ? <div>todo</div> : null}
+          {card && card.type === "FILE_UPLOAD" ? <div>todo</div> : null}
+          {card && card.type === "CHECKBOX_GRID" ? <div>todo</div> : null}
           <Divider />
           <div className={classes.buttonRow}>
             <div className={classes.buttonContainer}>

diff --git a/src/Components/FormCreation/FormSection.js b/src/Components/FormCreation/FormSection.js
@@ -164,6 +164,7 @@ function FormSection({
       {sectionData.questions.map((_question, questionKey) => (
         <CardWrapper key={questionKey}>
           <FormCard
+            card={sectionData.questions[questionKey]}
             key={questionKey + "_question"}
             active={active && activeQuestion === questionKey}
             handleActive={updateActiveQuestion}