Merge pull request #22 from codeMonkeyMasters/darian-hint/example

Hint and example on QuizCodes
codeMonkeyMasters · Aug 28, 2020 · 108d77c · 108d77c
2 parents 483c300 + a4e1119
commit 108d77c
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/src/components/QuizCode/index.js b/src/components/QuizCode/index.js
@@ -3,6 +3,8 @@ import { Card, Button, Container, Row, Col } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "../../store/user/selectors";
 import { useHistory } from "react-router";
+import Popup from "reactjs-popup";
+import Hint from "../Hint";
 import { updateCompletedExercise } from "../../store/user/actions";
 import { Controlled as CodeMirror } from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
@@ -18,7 +20,7 @@ export default function QuizCode(props) {
   const history = useHistory();
   const user = useSelector(selectUser);
   const { exercise } = props;
-  const { answer, question, exerciseId, id } = exercise;
+  const { answer, question, exerciseId, id, example, hint } = exercise;
   console.log("question", question);
   const dispatch = useDispatch();
   const [code, setCode] = useState("");
@@ -40,6 +42,22 @@ export default function QuizCode(props) {
     lineWrapping: true,
   };
 
+  const PopupHint = () => (
+    <Popup
+      trigger={
+        <Button variant="outline-warning">
+          <span role="img" aria-label="hint">
+            💡
+          </span>{" "}
+          Hint
+        </Button>
+      }
+      position="right center"
+    >
+      <Hint hint={hint} />
+    </Popup>
+  );
+
   function equal(a, b) {
     const condition2 = typeof a === "string" && typeof b === "string";
     if (condition2) return a === b;
@@ -182,6 +200,10 @@ export default function QuizCode(props) {
                 >
                   {start && question}
                 </span>
+                <br />
+                <span>
+                  {start && example}
+                </span>
               </Card.Text>
               <br />
               <div className="TopCodeMirror">
@@ -221,6 +243,9 @@ export default function QuizCode(props) {
                   </span>
                 </Button>
               )}
+              {start && <PopupHint />}
+              <br />
+
             </Card.Body>
           </Card>
         </Col>