Skip to content

Latest commit

 

History

History
56 lines (39 loc) · 1.75 KB

README.md

File metadata and controls

56 lines (39 loc) · 1.75 KB

Animated Quiz App

An interactive quiz app developed using React Native with TypeScript and designed in Figma. The app provides animated feedback based on the user's answers, enhancing the learning experience with visual cues and smooth user interactions.

Project Structure

React Native Implementation

  • Question Screen: Displays coding questions and options as buttons, with a submit button to validate answers.
  • Answer Validation: Checks if the answer is correct or incorrect and provides feedback.

Future Implementations:

  • Animations: Uses React Native Animated API or Reanimated for:
    • Confetti or badge animation on correct answer.
    • Subtle shake or fade-in effect on incorrect answer.

Technologies Used

  • React Native
  • TypeScript
  • Figma for UI/UX Design

Future Technology:

  • React Native Animated API / Reanimated

Features

  • Interactive Quiz Flow: Users can select answers to coding questions and receive immediate feedback.
  • Animated Feedback: Engaging animations for both correct and incorrect responses.
  • Responsive Design: Works seamlessly across mobile devices.

Setup & Running the App

  1. Clone the Repository:

    git clone https://github.com/your-username/Animated-Quiz-App.git
cd Animated-Quiz-App

  2. Install Dependencies:

    npm install

  3. Start the App:

    npm start

Animations & User Experience

  • Correct Answer Feedback: Confetti animation, badge pop-up, and a congratulatory message.
  • Incorrect Answer Feedback: Subtle shake effect or message fade-in with hints for retry.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any suggestions or improvements.