📚 Yyana's Flashcard

🌟 An Interactive Web-Based Flashcard Application for Learning Square Roots, Cube Roots, Squares, and Cubes 🌟

Table of Contents

• Introduction
• Features
• System Requirements
• Installation
• Getting Started
• Usage
• Demo
• Contributing
• Security
• Code of Conduct
• Support
• License
• Acknowledgements

Introduction

Yyana's Flashcard is an open-source, web-based educational tool designed to help students practice and memorize mathematical concepts, including square roots, cube roots, squares, and cubes for numbers 1 to 25. Built with HTML5, CSS3, and JavaScript, it features an intuitive flashcard interface with interactive controls, swipe gestures, and reference tables. The application is responsive, visually appealing, and optimized for both desktop and mobile devices, making it an excellent resource for learners of all ages.

Hosted on GitHub Pages, Yyana's Flashcard is accessible online without installation, but can also be run locally. As an open-source project, it welcomes contributions to enhance functionality, improve accessibility, or add new features.

Note: This project is actively maintained. Some features, such as advanced animations or accessibility, may have limitations. Your feedback is appreciated!

Features

• Interactive Flashcards:
  • Displays questions and answers for square roots, cube roots, squares, and cubes (1–25).
  • Supports four modes: Square Roots, Cube Roots, Squares, and Cubes.
  • Flip cards by clicking or swiping to reveal answers.
  • Includes hints to guide users toward the correct answer.
• Progress Tracking:
  • Visual progress bar showing completion percentage (1–25 cards).
• Reference Tables:
  • Displays tables for square roots, cube roots, squares, and cubes (1–25).
  • Styled for clarity and accessibility.
• User Interface:
  • Mode Selection: Choose between four learning modes via a dropdown.
  • Navigation: Previous and Next buttons for card navigation.
  • Swipe Support: Swipe left/right on touch devices to navigate cards.
  • Animations: Smooth card flips, progress bar transitions, and background bubble effects.
• Visual Design:
  • Uses a pink-themed color scheme with CSS custom properties.
  • Incorporates Poppins font via Google Fonts for readability.
  • Responsive layout for desktop, tablet, and mobile devices.
• Accessibility:
  • Semantic HTML structure for screen reader compatibility.
  • Clear visual hierarchy for ease of use.
• No Dependencies: Pure JavaScript implementation with minimal external assets (Google Fonts).
• No Ads: A distraction-free learning experience.

System Requirements

To run Yyana's Flashcard, ensure you have:

• Web Browser: Modern browser (e.g., Chrome, Firefox, Edge, Safari) with JavaScript enabled.
• Operating System: Any (Windows, macOS, Linux, iOS, Android) with a compatible browser.
• Disk Space: Minimal (~5 MB for application files, including assets).
• Internet Connection: Required for initial asset loading (e.g., Google Fonts) unless hosted locally.
• Touch Support: Optional for swipe gestures on mobile devices.

Installation

Follow these steps to set up Yyana's Flashcard locally:

1. Clone the Repository:

   git clone https://github.com/VoxDroid/YyanaFlashcard.git

2. Navigate to the Project Directory:

   cd YyanaFlashcard

3. Open the Application:

   • Double-click index.html to open it in your default web browser.
   • Alternatively, serve the files using a local server (recommended for proper asset loading):

     python -m http.server 8000

     Then access http://localhost:8000 in your browser.

4. Verify Functionality:

   • Ensure the page loads with the title, flashcard, progress bar, controls, and tables.
   • Click the flashcard to flip it and verify the question, hint, and answer.
   • Test navigation (Previous/Next buttons, swipe gestures) and mode switching.
   • Check that the reference tables display correctly.

Note: Ensure CDN-loaded assets (e.g., Google Fonts) are accessible. For offline use, consider downloading the Poppins font and hosting it locally.

Getting Started

To start using Yyana's Flashcard:

1. Access the Application:

   • Try it online at voxdroid.github.io/YyanaFlashcard.
   • Or open index.html locally as described in Installation.

2. Explore the Interface:

   • Flashcard: Displays a question (front) and answer (back), with a hint below the question.
   • Progress Bar: Shows progress through the 25 cards.
   • Controls: Includes Previous/Next buttons and a mode selector (Square Roots, Cube Roots, Squares, Cubes).
   • Tables: Reference tables for square roots, cube roots, squares, and cubes (1–25).
   • Background: Animated bubbles for visual appeal.

3. Interact with the Flashcard:

   • Click the flashcard to flip it and reveal the answer.
   • Use the Previous/Next buttons or swipe left/right to navigate cards.
   • Select a mode from the dropdown to change the question type.

4. Test Functionality:

   • Switch to Square Roots mode and verify questions (e.g., “What is the square root of 16?” → 4).
   • Check the hint for guidance (e.g., “Think of a number that, when multiplied by itself, gives 16”).
   • Navigate through all 25 cards and confirm the progress bar updates.
   • Review the reference tables for accuracy.

Usage

Using the Flashcard

• Select a Mode:
  • Choose from Square Roots, Cube Roots, Squares, or Cubes via the dropdown.
  • Modes determine the question type:
    • Square Roots: “What is the square root of X?” (e.g., X = 16, answer = 4).
    • Cube Roots: “What is the cube root of X?” (e.g., X = 27, answer = 3).
    • Squares: “What is X squared?” (e.g., X = 4, answer = 16).
    • Cubes: “What is X cubed?” (e.g., X = 3, answer = 27).
• Interact with Cards:
  • Click the card to flip it and view the answer.
  • Swipe left (next card) or right (previous card) on touch devices.
  • Use the Previous/Next buttons for navigation.
• View Hints:
  • Hints appear below the question to guide the user (e.g., “Multiply 4 by itself” for Squares mode).
• Track Progress:
  • The progress bar updates as you navigate through the 25 cards.

Reference Tables

• Four tables display mathematical relationships for numbers 1–25:
  • Square Roots: √(n²) = n (e.g., √16 = 4).
  • Cube Roots: ∛(n³) = n (e.g., ∛27 = 3).
  • Squares: n² (e.g., 4² = 16).
  • Cubes: n³ (e.g., 3³ = 27).
• Use the tables as a quick reference while studying.

Customization

• The application uses a fixed pink-themed design with Poppins font.
• To customize colors or fonts, modify the CSS custom properties in css/flashcard.css (e.g., --primary-color, --font-family).

Demo

Try Yyana's Flashcard live at voxdroid.github.io/YyanaFlashcard.

Contributing

We welcome contributions to Yyana's Flashcard! To get involved:

• Review the Contributing Guidelines for details on submitting issues, feature requests, or pull requests.
• Fork the repository, make changes, and submit a pull request.
• Adhere to the Code of Conduct to ensure a respectful community.

Example contributions:

• Add new mathematical modes (e.g., exponents, factorials).
• Improve accessibility (e.g., ARIA attributes, keyboard navigation).
• Enhance animations or add new visual themes.
• Implement a shuffle feature for random card order.

Security

Security is a priority for Yyana's Flashcard. If you discover a vulnerability:

• Report it privately as outlined in the Security Policy.
• Avoid public disclosure until the issue is resolved.

Code of Conduct

All contributors and users are expected to follow the Code of Conduct to maintain a welcoming and inclusive environment.

Support

Need help with Yyana's Flashcard? Visit the Support page for resources, including:

• Filing bug reports or feature requests.
• Community discussions and contact information.
• FAQs for common issues (e.g., swipe issues, performance on mobile).

License

Yyana's Flashcard is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• Google Fonts: For providing the Poppins font.
• VoxDroid: For creating and maintaining the project.
• Contributors: Thanks to all who report issues, suggest features, or contribute code.
• Math Education Community: For inspiring tools that make learning accessible and fun.

---

Developed by VoxDroid

Enjoying Yyana's Flashcard? Star the project on GitHub!