Merge pull request #68 from CAHLR/frontend-components

Implement popup

Author: shreyabhandari0220

public/static/images/icons/close_icon.png

@@ -0,0 +1,30 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import Box from "@material-ui/core/Box";
+import IconButton from '@material-ui/core/IconButton';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import { withStyles } from "@material-ui/core/styles";
+import { popupStyles } from "./popup-styles.js";
+
+const Popup = ({ classes, isOpen, onClose, children }) => {
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+    > 
+      <Box className={classes.popupContent}>
+        <IconButton
+          onClick={onClose}
+          className={classes.button}
+        >
+            <CloseRoundedIcon 
+              className={classes.iconButton} 
+            />
+        </IconButton>
+        {children}                          
+      </Box>
+    </Modal>
+  );
+};
+
+export default withStyles(popupStyles)(Popup);

src/components/Popup/Popup.js

@@ -0,0 +1,38 @@
+export const popupStyles = {
+    popupContent: {
+        background: '#FFF',
+        padding: '10px 20px 20px 20px',
+        borderRadius: '8px',
+        position: 'absolute',
+        top: '50%', 
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '53%',
+        height: '77%',
+        fontSize: '9.5px',
+        overflowY: 'scroll',
+        scrollbarWidth: 'none',
+        '& ul': {
+            paddingLeft: '15px',
+        },
+        '& h2, & h3': {
+            marginBottom: '5px',
+        },
+    },
+    button: {
+        position: 'absolute',
+        top: '5px',
+        right: '5px',
+        fontSize: '20px',
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+    },
+    iconButton: {
+        backgroundColor: '#E5E5E5', 
+        color: '#4F4F4F', 
+        borderRadius: '50%', 
+        padding: '0.5px', 
+        fontSize: 18
+    }
+};

src/components/Popup/popup-styles.js

@@ -13,7 +13,9 @@ import HelpOutlineOutlinedIcon from "@material-ui/icons/HelpOutlineOutlined";
 import { Typography } from "@material-ui/core";
 import { IS_STAGING_OR_DEVELOPMENT } from "../../util/getBuildType";
 import BuildTimeIndicator from "@components/BuildTimeIndicator";
-import withTranslation from "../../util/withTranslation.js"
+import withTranslation from "../../util/withTranslation.js";
+import Popup from '../Popup/Popup.js';
+import About from '../../pages/Posts/About.js';
 
 class LessonSelection extends React.Component {
     static contextType = ThemeContext;
@@ -35,12 +37,22 @@ class LessonSelection extends React.Component {
         this.isPrivileged = !!this.user.privileged
 
         this.coursePlans = _coursePlansNoEditor;
+        this.togglePopup = this.togglePopup.bind(this);
+
         this.state = {
             preparedRemoveProgress: false,
-            removedProgress: false
+            removedProgress: false,
+            showPopup: false
         }
     }
 
+    togglePopup = () => {
+        console.log("Toggling popup visibility");
+        this.setState((prevState) => ({
+          showPopup: !prevState.showPopup,
+        }));
+      };
+      
     removeProgress = () => {
         this.setState({ removedProgress: true });
         this.props.removeProgress();
@@ -54,6 +66,7 @@ class LessonSelection extends React.Component {
         const { translate } = this.props;
         const { classes, courseNum } = this.props;
         const selectionMode = courseNum == null ? "course" : "lesson"
+        const { showPopup } = this.state;
 
         if (selectionMode === "lesson" && courseNum >= this.coursePlans.length) {
             return <Box width={'100%'} textAlign={'center'} pt={4} pb={4}>
@@ -169,14 +182,17 @@ class LessonSelection extends React.Component {
                             {SHOW_COPYRIGHT && <>© {new Date().getFullYear()} {SITE_NAME}</>}
                         </div>
                         <div style={{ display: "flex", flexGrow: 1, marginRight: 20, justifyContent: "flex-end" }}>
-                            <IconButton aria-label="help" title={`How to use ${SITE_NAME}?`}
-                                href={`${window.location.origin}${window.location.pathname}#/posts/how-to-use`}>
+                            <IconButton aria-label="about" title={`About ${SITE_NAME}`}
+                                onClick={this.togglePopup}>
                                 <HelpOutlineOutlinedIcon htmlColor={"#000"} style={{
                                     fontSize: 36,
                                     margin: -2
                                 }}/>
                             </IconButton>
                         </div>
+                        <Popup isOpen={showPopup} onClose={this.togglePopup}>
+                            <About />
+                        </Popup>
                     </div>
                 </footer>
             </>

src/components/problem-layout/LessonSelection.js

@@ -36,5 +36,5 @@
 }
 
 .image {
-    z-index: 2;
+    z-index: 0;
 }

src/components/problem-layout/ProblemCard.css

@@ -0,0 +1,60 @@
+import React from "react";
+import Spacer from "@components/Spacer";
+import { useStyles } from "./Posts";
+import { HELP_DOCUMENT, SITE_NAME } from "../../config/config";
+
+const VPAT_LINK = `${process.env.PUBLIC_URL}/static/documents/OATutor_Sec508_WCAG.pdf`
+
+const About = () => {
+    const classes = useStyles()
+
+    return <>
+        <h2>
+            About {SITE_NAME}
+        </h2>
+        Open Adaptive Tutor ({SITE_NAME}) is an open-source adaptive tutoring system based on Intelligent Tutoring System (ITS) Principles.
+        <h3>Question Input Types & Shortcuts</h3>
+
+        To learn more about how to fill in and submit {SITE_NAME} assignments,<span> </span>
+        <a href={HELP_DOCUMENT} target={"_blank"} rel={"noreferrer"}>visit our help document</a>.
+
+        <h3>Contributors</h3>
+        
+        OATutor was created and developed by a dedicated team from the Computational Approaches to Human Learning (CAHL) Research Lab at the UC Berkeley School of Education.
+        
+        <h3>Learn more</h3>
+        <ul>
+            <li>Visit <a href="https:/cahlr.github.io/OATWeb/" target={"_blank"} rel={"noreferrer"}>https:/cahlr.github.io/OATWeb/</a> to explore more about OATutor, our mission, and how it can benefit you.</li>
+            <li>Read our <a href="https://dl.acm.org/doi/10.1145/3544548.3581574" target={"_blank"} rel={"noreferrer"}>research paper</a> to learn more about the scientific foundation and methodology behind OATutor.</li>
+        </ul>
+
+        <h3>Accessibility Standards</h3>
+
+        <p>
+            {SITE_NAME} strives to ensure an easy and accessible experience for all users, regardless of disabilities.
+            The site, {SITE_NAME}, is built with the most up-to-date HTML5 and CSS3 standards; all whilst complying with
+            W3C's Web Accessibility Guidelines (WCAG) and Section 508 guidelines.
+        </p>
+
+        <p className={classes["pt-2"]}>
+            The Voluntary Product Accessibility Template, or VPAT, is a tool that administrators and decision-makers can
+            use to evaluate {SITE_NAME}{SITE_NAME.match(/s$/i) ? "'" : "'s"} conformance with the accessibility
+            standards under Section 508 of the Rehabilitation Act.
+        </p>
+
+        <p className={classes["pt-2"]}>
+            You may read our most recent publication of our Voluntary Product Accessibility Template at this
+            url:<span> </span>
+            <a href={VPAT_LINK} target={"_blank"} rel={"noreferrer"}>{VPAT_LINK.match(/\/[^/]*$/)[0].substr(1)}</a>
+        </p>
+
+        <Spacer height={24 * 1}/>
+
+        <sub>
+            <p>OATutor code is licensed under a MIT Open Source License, with its adaptive learning content made available under a CC BY 4.0 license.</p> 
+            <p>© 2024, CAHL Research Lab, UC Berkley School of Education.</p>
+        </sub>
+    </>
+}
+
+export default About