Webapp routes and assessment page template need to be created for assessment feature

[seidior]

Describe the Feature / Enhancement

We need to add a route for assessments and create a basic page with dummy data (for now) that shows the list of assessments.

Additional Details and Resources

No response

Correct Project Selected

• [X] This issue is linked to the appropriate project

Labels

• [X] This issue has appropriate labels.

[seidior]

(Late) EOD Update: The team has created routes for two pages and wired them up into the webapp: one for a sample assessment landing page (for the list of assessments) and one for a quiz. They will be hard-coding some sample data into the pages instead of loading them dynamically.

Next steps:

• [ ] Code the markup for how the assessment list should look with the sample data, maximizing the use of MUI wherever possible

Stretch goals, but not necessarily in scope for this ticket:

• [ ] Code an example of the assessment submission confirmation page
• [ ] Code a timer display (that can be hidden)
• [ ] Code the markup for how the assessment list should look for a course facilitator instead of a program participant
• [ ] Code the markup for how a quiz should appear, using the different types of questions that we agreed upon earlier in the week, again maximizing the use of MUI whenever possible

Out of scope:

• Wiring up the changes to the webapp to the backend
• Connecting the pages together

[ZeyuanLi16]

EOD Update: The team has discussed different layout designs and decided to used tab to switch between assessment states. They have chosen icon for each tab and created one table to fill in one row of data. The team will need to create more data to include all states of assessment and improve the table layout further more. If time permits, they will explore alternative design ideas and show to the whole team.

Next steps:

• [x] Code the markup for how the assessment list should look with the sample data, maximizing the use of MUI wherever possible
• [ ] Code the markup for how a quiz should appear, using the different types of questions that we agreed upon earlier in the week, again maximizing the use of MUI whenever possible

Stretch goals, but not necessarily in scope for this ticket:

• [ ] Code an example of the assessment submission confirmation page
• [ ] Code a timer display (that can be hidden)
• [ ] Code the markup for how the assessment list should look for a course facilitator instead of a program participant

Out of scope:

• [ ] Wiring up the changes to the webapp to the backend
• [ ] Connecting the pages together

[mgasquez]

EOD Update: The team worked on the final Layout. It was determined columns name, implemented functionality, added mocked data and named buttons as start, view, inactive depend on the state of the Assessment.

Next steps:

• [ ] Create buttons links to go the assessment

Stretch goals, but not necessarily in scope for this ticket:

• [ ] Add content to the Assessment

Out of scope:

• [ ] Retrieve data from the database to show on the page