🔢 Interactive Math Quiz Visualizer 📊
MathViz is an elegant and interactive math quiz application built with Next.js and React. The application renders beautiful math expressions using LaTeX formatting and allows users to practice with mathematics problems across various topics.
- 🧮 LaTeX Support: Beautifully rendered mathematical expressions using KaTeX
- 🌙 Dark/Light Mode: Toggle between dark and light themes for comfortable viewing
- 📱 Responsive Design: Works on devices of all sizes
- 🔄 Multiple Datasets: Switch between different question sets (
questions.jsonandquestions-2.json) - ✅ Immediate Feedback: Check your answers instantly
- 🎯 Progress Tracking: Track your progress through question sets
The application works with JSON files containing questions in the following format:
{
"question": "Calculate the derivative of the function $ f(x) = \\sin(x^2) $ at $ x = \\pi $.",
"answers": [
"$ 2\\pi\\cos(\\pi^2) $",
"$ \\cos(\\pi^2) $",
"$ 2\\pi\\sin(\\pi^2) $",
"$ -2\\pi\\cos(\\pi^2) $",
"$ 0 $"
],
"correct": "$ 2\\pi\\cos(\\pi^2) $"
}Each question consists of:
- A question prompt
- Multiple possible answers
- The correct answer that matches one of the provided options
-
Clone the repository:
git clone https://github.com/ZephyrCodesStuff/mathviz.git cd mathviz -
Install dependencies:
pnpm install
-
Run the development server:
pnpm dev
-
Open in your browser: Open http://localhost:3000 to see the application in action.
- Next.js 15: React framework with app router
- React 19: UI library
- TypeScript: Type-safe JavaScript
- TailwindCSS 4: Utility-first CSS framework
- KaTeX: LaTeX math rendering
- next-themes: Dark mode support
The application supports two dataset files:
questions.json: Primary question setquestions-2.json: Alternative question set
You can customize the application by:
- Adding new question to the sets in the same JSON format
- Modifying the UI components in the
componentsdirectory (it's shadcn/ui based) - Adjusting the theme in
theme-provider.tsx
MIT © ZephyrCodesStuff
Made with ❤️