Yuyz0112/dewhale

web app

Opened this issue · 0 comments

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 / 参考图片

Screenshot 2024-07-07 at 5 31 03 PM Screenshot 2024-07-07 at 6 10 08 PM Screenshot 2024-07-07 at 6 10 21 PM Screenshot 2024-07-07 at 6 10 57 PM Screenshot 2024-07-07 at 6 11 09 PM Screenshot 2024-07-07 at 6 11 12 PM Screenshot 2024-07-07 at 6 23 47 PM