Setup frontend for educational module page

[racheldennis]

Changes made:

• Created a educational_module.html and educational_module.css.

  • Implemented the latest design prototype from Figma for the educational module page, with several components resized due to oversize.
  • Incorporated aspects of Alex's implemented base.html to create cohesiveness with all other pages with fonts and formatting.
  • Note that the implementation differs from the Figma design in a few areas (e.g., heading text) to accommodate the header. Another button to Start the Quiz is included, which will only be clickable if the user finishes the lesson modules.
  • Incorporated sample lessons and units of Pre-algebra to help with the design that was also used in the Figma prototype
  • Each unit on the left sidebar is a button so the user can go to a specific lesson directly

• HTML (educational_module.html):

  • Utilized Jinja templating to extend a base HTML structure.
  • Implemented a sidebar for topic navigation, including units, lessons, and quizzes.
  • Incorporated buttons for each unit, providing a seamless user experience.
  • Organized content boxes for lessons, each displaying gamified points and an optional "upnext" section.
  • The Unit 1 content-box is enabled, so the top border of the box will be blue. It also lets the user know this is the next lesson to uncover, "Upnext for you."
  • Added" Get Started" and "Start Quiz" buttons for interactive engagement.

• CSS (educational_module.css):

  • Defined font families and variables for consistent styling.
  • Applied styling to the sidebar, buttons, content boxes, and module buttons.
  • Ensured a responsive layout and cohesive design.
  • Created a separate content-box [enabled], which changes the lesson box top border to blue to indicate it is the current lesson the user is on.

Things to note:

• Commit includes other files due to syncing with updated code from the main repository

Preview image of current educational module page:

Note: The Start Quiz button is not as visible as the Get Started button since it is not clickable, and the user cannot access the quiz.

[alexchen2]

Regarding the tabs, I'll leave the PR as it is until you have time to incorporate the tab design, and I'll send you the HTML file with the isolated changes in a moment

[racheldennis]

This PR will be closed since this PR and Alex's PR look very different, and there should be cohesiveness with the educational module and lesson pages. Also, Alex has already incorporated some aspects within this PR, so we will continue with Alex's PR for the educational module and lessons page.