Merge pull request #202 from OxfordRSE/learning-outcomes

feat: learning outcomes

components/content/LearningOutcomes.tsx

@@ -0,0 +1,38 @@
+import { Section } from "../../lib/material"
+import ListItem from "@mui/material/ListItem"
+import ListItemText from "@mui/material/ListItemText"
+import List from "@mui/material/List"
+import Alert from "@mui/material/Alert"
+import Typography from "@mui/material/Typography"
+import Collapse from "@mui/material/Collapse"
+import Tooltip from "@mui/material/Tooltip"
+import { HiOutlineTrophy } from "react-icons/hi2"
+import ListItemIcon from "@mui/material/ListItemIcon"
+import React from "react"
+import { type Theme } from "@mui/system"
+
+export default function LearningOutcomes({ learningOutcomes }: { learningOutcomes: Section["learningOutcomes"] }) {
+ const [open, setOpen] = React.useState(true)
+ if (learningOutcomes.length === 0) return null
+ return (
+ <Alert severity="success" sx={{ marginBottom: (t: Theme) => t.spacing(1) }}>
+ <Tooltip title={`Click to ${open ? "hide" : "show"} learning outcomes`}>
+ <Typography variant="body2" onClick={() => setOpen(!open)} sx={{ cursor: "pointer" }}>
+ Learning outcomes
+ </Typography>
+ </Tooltip>
+ <Collapse in={open}>
+ <List>
+ {learningOutcomes.map((o, i) => (
+ <ListItem key={i}>
+ <ListItemIcon>
+ <HiOutlineTrophy />
+ </ListItemIcon>
+ <ListItemText>{o}</ListItemText>
+ </ListItem>
+ ))}
+ </List>
+ </Collapse>
+ </Alert>
+ )
+}

cypress/component/EventCommentThreads.cy.tsx

@@ -54,6 +54,7 @@ describe("EventCommentThreads component", () => {
  file: "",
  index: 0,
  tags: [],
+ learningOutcomes: ["LO 1", "LO 2"],
  },
  ],
  },

cypress/component/Paragraph.cy.tsx

@@ -99,6 +99,7 @@ describe("Paragraph", () => {
  license: "test",
  },
  ],
+ learningOutcomes: ["LO 1", "LO 2"],
  problems: ["problem1"],
  }
  const currentUser: User = {

lib/material.ts

@@ -31,6 +31,7 @@ export type Section = {
  type: string
  attribution: Attribution[]
  problems: string[]
+ learningOutcomes: string[]
 }
 
 export type Course = {
@@ -274,10 +275,26 @@ export async function getSection(
  const name = (sectionObject.attributes.name as string) || humanize(file)
  // @ts-expect-error
  const attribution = (sectionObject.attributes.attribution as Attribution[]) || []
+ // @ts-expect-error
+ const learningOutcomes = (sectionObject.attributes.learningOutcomes as string[]) || []
  const markdown = no_markdown ? "" : (sectionObject.body as string)
  const type = "Section"
  const regex =
  /:{3,}challenge\s*{\s*(?:id\s*=\s*"?([^"\s]+)"?\s*title\s*=\s*"[^"]+"|title\s*=\s*"[^"]+"\s*id\s*=\s*"?([^"\s]+)"?)\s*}/g
  const problems = Array.from(markdown.matchAll(regex)).map((match) => match[1] || match[2])
- return { id, file, theme, course, name, markdown, index, type, tags, dependsOn, attribution, problems }
+ return {
+ id,
+ file,
+ theme,
+ course,
+ name,
+ markdown,
+ index,
+ type,
+ tags,
+ dependsOn,
+ attribution,
+ learningOutcomes,
+ problems,
+ }
 }

pages/material/[repoId]/[themeId]/[courseId]/[sectionId].tsx

@@ -17,7 +17,7 @@ import Content from "components/content/Content"
 import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
-import excludeVariablesFromRoot from "@mui/material/styles/excludeVariablesFromRoot"
+import LearningOutcomes from "components/content/LearningOutcomes"
 
 type SectionComponentProps = {
  theme: Theme
@@ -51,6 +51,7 @@ const SectionComponent: NextPage<SectionComponentProps> = ({
  excludes={excludes}
  >
  <Title text={section.name} />
+ <LearningOutcomes learningOutcomes={section.learningOutcomes} />
  <Content markdown={section.markdown} theme={theme} course={course} section={section} />
  </Layout>
  )