search

Leshangpang / COMP30022-SDGs-Frontend

Interactive learning website for the 17 Sustainable Development Goals
2 stars 1 forks source link

feature: Add multiple choice function #23

Closed Wj12344 closed 1 week ago

Wj12344 commented 1 week ago

This component, MultipleChoice, is designed for a quiz or questionnaire interface. It displays a series of questions where users can select answers. The component includes navigation buttons to move between questions and a progress bar showing the current position. Users can submit their answers once all questions are answered. After submission, a confirmation dialog appears, and upon confirmation, a success message is displayed, and the interface switches to a completion view. The component also ensures users cannot proceed to the next question without selecting an answer.

The TakeQuizPage page sets up a quiz page layout with a header, main banner, and footer. It uses a grid layout to position a sidebar and a central MultipleChoice component within the main content area. The page includes a router-view for dynamic content rendering based on routes. The sidebar is positioned with margins for spacing. The grid ensures the layout covers the full viewport height.

Leshangpang commented 1 week ago

Note: remember format for commit messages. It is TASK-xxx.