web app
Opened this issue · 0 comments
LaurMost commented
Content language / 内容语言
English
Major content / 主要内容
CS Revise - UI Description
General Layout and Style:
- Color Scheme: Graphite-themed dark color palette with shades of graphite, complemented by light accents for text and interactive elements.
- Typography: Clean, sans-serif font ensuring readability and a contemporary look.
Home Page:
Layout:
- Topic Overview:
- Section Header: "Computer Science Topics"
- List of Topics: Each topic (e.g., System Fundamentals, Computer Organization, Networks, Programming, Abstract Data Structures, Resource Management, Control Systems) displayed with a title and brief description.
- Progress Bar: Each topic has an associated progress bar showing the percentage of mastery.
- Overall Progress: A comprehensive progress bar at the top indicating the user's overall progress across all topics.
Navbar:
- Logo: Contains the CS Revise Logo and the name.
- Home: Home button with a house icon.
- User Profile Dropdown: Settings and Logout options.
User Interaction:
- Clicking on a Topic: Navigates to detailed revision materials and study options for the selected topic.
- Progress Tracking: Visual progress bars to motivate and track user learning.
Topic Page:
Layout:
- Navbar: Same as in the home page.
- Topic Title: Displayed at the top.
- Learning Options: Cards for different learning options (Flashcards, Learn, Test) showing the user's progress (not studied, still learning, mastered).
- Terms and Questions List: Beneath the learning options, contains cards for each term showing the term and definition, with a star icon allowing the user to mark the term for focus.
User Interaction:
- Selecting a Learning Option: Navigates to the respective study mode.
- Marking Terms: Users can star terms to focus on them.
- Viewing Details: Clicking on a term card shows detailed information.
Flashcards Page:
Layout:
- Flashcard Display:
- Central Card: Large, centered flashcard showing a term or question on one side and the definition or answer on the other.
- Navigation Controls: Buttons below the card for navigating to the next or previous card and flipping the card to see the answer.
- Progress Indicators: A bottom bar showing the user’s progress through the flashcards set (e.g., 1/65).
User Interaction:
- Flip Card: Clicking or tapping flips the card to reveal the answer.
- Marking Progress: Buttons to mark the term as known, unknown, or review later.
- Hints: Option to view a hint if available.
Learn Page:
Layout:
- Learning Card:
- Question Display: Central card displaying a question or term with an input field for the user to type their answer.
- Hint Button: Provides additional clues or context for the current question.
- Answer Submission: Buttons to submit the answer or indicate uncertainty (“Don’t know?”).
- Feedback: Immediate feedback is shown on the card after submission, indicating whether the answer is correct or incorrect, and providing the correct answer if wrong.
User Interaction:
- Typing Answers: Users type their answers in the input field.
- Feedback and Correction: Immediate feedback helps users learn from mistakes and reinforces correct answers.
- Progress Bar: Horizontal bar at the top shows the user’s progress through the learning session.
Test Page:
Test Setup Modal:
- Setup Options:
- Number of Questions: Input field to specify the number of questions (e.g., max 65, default 20).
- Answer Type: Dropdown to choose the type of answers (e.g., Term).
- Question Formats: Toggles for True/False, Multiple Choice, Matching, Written.
- Start Button: Prominent button to begin the test.
Question Display:
- Question Layout:
- Current Question: Displays the current question with navigation buttons to move between questions.
- Answer Options: Interactive fields or buttons to select or type the answer.
- Progress Indicator: Shows the current question number out of the total (e.g., 3/20).
Test Results:
- Results Overview:
- Performance Summary: Time taken, percentage of correct and incorrect answers.
- Next Steps: Recommendations for further practice, such as practicing missed terms in the Learn mode or taking another test.
- Detailed Review: Allows users to review their answers, with correct answers highlighted in green and incorrect ones in red. Feedback and the correct answer are provided for each question.
User Interaction:
- Navigating Questions: Users can navigate through questions using next/previous buttons.
- Submitting Test: Users can submit the test when finished to see their results.
User Profile Dropdown:
Dropdown Options:
- Settings: Access to user settings for personalizing the learning experience.
- Logout: Option to log out of the platform.
This detailed description provides a comprehensive view of the "CS Revise" UI, incorporating the functional and aesthetic elements from Quizlet and tailoring them specifically for IB Computer Science students.
Style theme / 样式主题
minmal
Referred image / 参考图片
