Merge pull request #617 from all-rit/546-defect-lab-4-exercise-form-s…

…kip-to-main 546 Fix Lab 4 Broken Exercise
all-rit · Oct 2, 2024 · 70450a1 · 70450a1
2 parents 87490b6 + 2ec00dd
commit 70450a1
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git a/client/src/assets/stylesheets/components/Form.css b/client/src/assets/stylesheets/components/Form.css
diff --git a/client/src/components/exercise/lab4/components/FormComp.jsx b/client/src/components/exercise/lab4/components/FormComp.jsx
@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { PageService } from "../../../../services/PageService";
 import { navigate } from "@reach/router";
 import { LAB_ID } from "../../../../constants/lab4";
+import TooltipWithTab from "../helpers/tooltip";
 
 const FormComp = (props) => {
   const [state, setState] = useState({
@@ -91,22 +92,30 @@ const FormComp = (props) => {
   };
 
   return (
-    <main className="tw-z-50 tw-min-h-144">
-      <div className="overlap h-100 " onClick={(e) => focusElem(e)}>
+    <main className="tw-min-h-96 tw-mb-16">
+      <div className="overlap" onClick={(e) => focusElem(e)}>
         <Form>
           <FormGroup>
             <Label for="animal">Favorite Animal</Label>
             <Input
               type="text"
               name="animal"
-              id="animal"
+              id="main"
               placeholder="Type Favorite Animal Here"
               onChange={(e) => change(e)}
               value={state.animal}
             />
           </FormGroup>
           <FormGroup>
-            <Label for="color">Favorite Color</Label>
+            <Label for="color">
+              Favorite Color{" "}
+              {props.showTooltip && (
+                <TooltipWithTab
+                  tab={props.tooltipTab}
+                  disabled={props.tooltipDisabled}
+                />
+              )}
+            </Label>
             <Input
               type="text"
               name="color"
@@ -144,7 +153,7 @@ const FormComp = (props) => {
             onClick={(e) => form_sub(e)}
             className="formButtonSubmit"
           />
-          {props.rule && state.submitted && (
+          {state.show && (
             <Input
               type="submit"
               value="Give Up"
@@ -164,6 +173,9 @@ FormComp.propTypes = {
   url: PropTypes.string,
   rule: PropTypes.bool,
   parentCallback: PropTypes.func,
+  tooltipTab: PropTypes.string,
+  showTooltip: PropTypes.bool,
+  tooltipDisabled: PropTypes.bool,
 };
 
 export default FormComp;
diff --git a/client/src/components/exercise/lab4/helpers/tooltip.jsx b/client/src/components/exercise/lab4/helpers/tooltip.jsx
@@ -1,16 +1,13 @@
+import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { Tooltip } from "reactstrap";
 
-const Toolitip = (tab) => {
+const TooltipWithTab = ({ tab, disabled }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const toggle = () => setTooltipOpen(!tooltipOpen);
   return (
-    <div
-      style={{ display: "inline-block" }}
-      tabIndex={tab.tab}
-      onFocus={toggle}
-    >
+    <div style={{ display: "inline-block" }} tabIndex={tab} onFocus={toggle}>
       <span
         style={{ textDecoration: "underline", color: "blue" }}
         href="#"
@@ -25,11 +22,17 @@ const Toolitip = (tab) => {
         autohide={true}
         target="DisabledAutoHideExample"
         toggle={toggle}
+        disabled={disabled}
       >
         Color must be &quot;violet&quot;
       </Tooltip>
     </div>
   );
 };
 
-export default Toolitip;
+TooltipWithTab.propTypes = {
+  tab: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+export default TooltipWithTab;
diff --git a/client/src/components/exercise/lab4/pages/FormHintAccessible.js b/client/src/components/exercise/lab4/pages/FormHintAccessible.js
@@ -21,7 +21,7 @@ const FormHintAccessible = () => {
     "Complete the form below. Use tab to go next, and shift+tab to go back.";
   const instructions2 = "Do not use the mouse!";
   const url = "/Lab4/Exercise/Finish";
-  const tab = "0";
+  const tooltipTab = "0";
   const name = "FormHintAccessible";
 
   return (
@@ -39,7 +39,9 @@ const FormHintAccessible = () => {
       <FormComp
         url={url}
         rule={true}
-        tab={tab}
+        showTooltip={true}
+        tooltipDisabled={false}
+        tooltipTab={tooltipTab}
         parentCallback={callbackFunction}
         name={name}
       />

diff --git a/client/src/components/exercise/lab4/pages/FormHintInaccessible.js b/client/src/components/exercise/lab4/pages/FormHintInaccessible.js
@@ -22,7 +22,7 @@ const FormHintInaccessible = () => {
           Use tab to go next, and shift+tab to go back.`;
   const instructions2 = "Do not use the mouse!";
   const url = "/Lab4/Exercise/AccessibleGuideline";
-  const tab = null;
+  const tooltipTab = null;
   const name = "FormHintInaccessible";
   return (
     <Fragment>
@@ -38,7 +38,9 @@ const FormHintInaccessible = () => {
       <FormComp
         url={url}
         rule={true}
-        tab={tab}
+        showTooltip={true}
+        tooltipDisabled={true}
+        tooltipTab={tooltipTab}
         parentCallback={callbackFunction}
         name={name}
       />