A mobile-first React web application where users match math functions with their corresponding graphs. The app provides a one-time test with 10 functions and 15 graphs.
- Interactive Matching: Click-based interface to match functions with graphs
- One-Time Test: Each user gets exactly one attempt to complete the test
- Randomized Functions: 10 random functions selected from a pool of 15
- All Graphs Displayed: All 15 graphs are shown, including 5 decoys
- Shuffled Order: Both functions and graphs are displayed in random order
- Comprehensive Pool: 15 different math functions available
- Score Display: Shows percentage score and detailed results
- Mobile-First Design: Responsive layout optimized for mobile devices
- Local Storage: Persists attempt data in browser storage
- Beautiful UI: Modern, gradient design with smooth animations
- React 19 - UI framework
- Vite 5 - Build tool and dev server
- CSS3 - Styling with mobile-first approach
- localStorage API - Client-side data persistence
- Node.js 14 or higher
- npm or yarn
- Clone or navigate to the project directory:
cd math_function_test- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to the URL shown in the terminal (typically
http://localhost:5173)
npm run buildThe production-ready files will be in the dist directory.
npm run previewThe project is configured for deployment to GitHub Pages, Netlify, and Vercel:
npm run deploy # For GitHub Pagessrc/
├── components/ # React components
│ ├── FunctionColumn.jsx # Displays math functions
│ ├── GraphColumn.jsx # Displays graph images
│ ├── ResultsDisplay.jsx # Shows test results
│ └── TestInterface.jsx # Main test interface
├── data/ # Static data
│ └── functions.json # Math functions and graphs data
├── hooks/ # Custom React hooks
│ └── useAttempts.js # localStorage hook for attempts
├── utils/ # Utility functions
│ ├── scoring.js # Scoring and validation logic
│ └── testGenerator.js # Test generation logic
├── constants.js # App constants
├── App.jsx # Main App component
├── App.css # App styles
├── index.css # Global styles
└── main.jsx # App entry point
public/
└── images/ # Graph SVG images
├── graph_y=x.svg
├── graph_y=x^2.svg
├── graph_y=x^3.svg
├── graph_y=sqrt(x).svg
├── graph_y=sqrt(-x).svg
├── graph_y=abs(x).svg
├── graph_y=-x.svg
├── graph_y=-x^2.svg
├── graph_y=-x^3.svg
├── graph_y=-sqrt(x).svg
├── graph_y=-abs(x).svg
├── graph_y=1divx.svg
├── graph_y=-1divx.svg
├── graph_y=2.svg
└── graph_x=2.svg
Edit src/constants.js to modify test parameters:
export const MAX_ATTEMPTS = 1; // One attempt per user
export const FUNCTIONS_PER_TEST = 10; // Functions shown in testThe application includes 15 different math functions:
- y = x (Linear)
- y = x² (Quadratic)
- y = x³ (Cubic)
- y = √x (Square root)
- y = √(-x) (Square root of negative x)
- y = |x| (Absolute value)
- y = -x (Negative linear)
- y = -x² (Inverted parabola)
- y = -x³ (Negative cubic)
- y = -√x (Negative square root)
- y = -|x| (Negative absolute value)
- y = 1/x (Hyperbola)
- y = -1/x (Negative hyperbola)
- y = 2 (Horizontal line)
- x = 2 (Vertical line)
How it works:
- App randomly selects 10 functions from the pool of 15
- All 15 graphs are displayed (5 are decoys with no matching function)
- Both functions and graphs are shuffled for random order
- User has only one attempt to match all functions correctly
To add more functions, edit src/data/functions.json:
- Add new functions to the
functionsarray - Add corresponding graphs to the
graphsarray - Create SVG images in
public/images/following the naming pattern
- Select a Function: Click on a math function in the left column
- Match with Graph: Click on the corresponding graph in the right column
- Complete All Matches: Match all 10 functions with their graphs
- Submit: Click the "Відправити відповіді" (Submit Answers) button to see your score
- One Chance: You have only one attempt - make it count!
- Users can take the test only once
- Attempts are stored in localStorage
- Clear browser data or use incognito mode to take another test
- Percentage score based on correct matches
- Detailed feedback for each function
- Color-coded results (correct/incorrect)
- Score categories:
- Excellent (80%+): Green gradient
- Good (60-79%): Blue gradient
- Average (40-59%): Orange gradient
- Needs Improvement (<40%): Red gradient
- Responsive design works on all screen sizes
- Touch-friendly buttons (minimum 44x44px)
- Vertical stacking on mobile
- Side-by-side layout on desktop
The project includes netlify.toml with optimized settings:
- Automatic redirects for SPA routing
- Security headers
- Cache optimization for static assets
The project includes vercel.json with:
- SPA rewrites
- Security headers
- Cache optimization
Run the deploy script:
npm run deployMake sure to set the correct base path in vite.config.js.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Removed all debug/reset buttons
- Minified and optimized build
- Lazy loading of images
- Efficient caching strategies
- Security headers configured
- Production-ready error handling
© 2025 Math Function Matcher
Possible future improvements:
- Add more math functions (trigonometric, logarithmic, etc.)
- Timed tests with countdown
- Difficulty levels (easy, medium, hard)
- User accounts with backend database
- Leaderboard system
- Hints system for struggling users
- Audio feedback for interactions
- Multiple language support
- Accessibility improvements (ARIA labels, keyboard navigation)