Spaces:

ghost613
/

math-quiz

Sleeping

App Files Files Community

ghost613 commited on 7 days ago

Commit

9515c98

verified ·

1 Parent(s): e40da14

Upload 20 files

Browse files

Files changed (20) hide show

Dockerfile +21 -0
README.md +40 -7
app/favicon.ico +0 -0
app/globals.css +3 -0
app/layout.tsx +19 -0
app/page.tsx +9 -0
components/MathQuizApp.tsx +291 -0
eslint.config.mjs +16 -0
next-env.d.ts +5 -0
next.config.ts +7 -0
package-lock.json +0 -0
package.json +28 -0
postcss.config.mjs +8 -0
public/file.svg +1 -0
public/globe.svg +1 -0
public/next.svg +1 -0
public/vercel.svg +1 -0
public/window.svg +1 -0
tailwind.config.ts +18 -0
tsconfig.json +27 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,21 @@

+# Use Node.js image
+FROM node:18-alpine
+# Create app directory
+WORKDIR /app
+# Install app dependencies
+COPY package*.json ./
+RUN npm install
+# Bundle app source
+COPY . .
+# Build the app
+RUN npm run build
+# Expose port
+EXPOSE 3000
+# Start the app
+CMD ["npm", "start"]

README.md CHANGED Viewed

@@ -1,12 +1,45 @@
 ---
-title: math-quiz
-emoji: 🐳
-colorFrom: green
 colorTo: red
-sdk: static
 pinned: false
-tags:
-  - deepsite
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Math Quiz App
+emoji: 🧮
+colorFrom: blue
 colorTo: red
+sdk: docker
 pinned: false
+app_port: 3000
 ---
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+## Getting Started
+First, run the development server:
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Learn More
+To learn more about Next.js, take a look at the following resources:
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Deploy on Vercel
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/favicon.ico ADDED Viewed

app/globals.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+import type { Metadata } from "next";
+import "./globals.css";
+export const metadata: Metadata = {
+  title: "Math Quiz App",
+  description: "A simple math quiz application",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+import MathQuizApp from "@/components/MathQuizApp";
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-gray-100">
+      <MathQuizApp />
+    </main>
+  );
+}

components/MathQuizApp.tsx ADDED Viewed

	@@ -0,0 +1,291 @@

+'use client';
+import { useState } from 'react';
+import { Check, X, Calculator } from 'lucide-react';
+const operations = ['+', '-', '*', '/'] as const;
+type Operation = typeof operations[number];
+const difficulties = ['easy', 'medium', 'hard'] as const;
+type Difficulty = typeof difficulties[number];
+interface Question {
+  num1: number;
+  num2: number;
+  operation: Operation;
+  answer: number;
+}
+const generateQuestion = (difficulty: Difficulty): Question => {
+  const operation = operations[Math.floor(Math.random() * operations.length)];
+  let num1 = 0;
+  let num2 = 0;
+  switch (difficulty) {
+    case 'easy':
+      num1 = Math.floor(Math.random() * 10) + 1;
+      num2 = Math.floor(Math.random() * 10) + 1;
+      break;
+    case 'medium':
+      num1 = Math.floor(Math.random() * 50) + 1;
+      num2 = Math.floor(Math.random() * 50) + 1;
+      break;
+    case 'hard':
+      num1 = Math.floor(Math.random() * 100) + 1;
+      num2 = Math.floor(Math.random() * 100) + 1;
+      break;
+  }
+  // For division, ensure it results in a whole number or simpler decimal
+  if (operation === '/') {
+    // Make sure num2 is not zero to avoid division by zero
+    num2 = num2 === 0 ? 1 : num2;
+    // For easier difficulty levels, try to make divisions that result in whole numbers
+    if (difficulty === 'easy' || difficulty === 'medium') {
+      num1 = num2 * Math.floor(Math.random() * 10) + 1;
+    }
+  }
+  const answer = eval(`${num1} ${operation} ${num2}`);
+  // Round the answer to 2 decimal places if it's a float
+  const roundedAnswer = Number.isInteger(answer) ? answer : parseFloat(answer.toFixed(2));
+  return {
+    num1,
+    num2,
+    operation,
+    answer: roundedAnswer,
+  };
+};
+interface CalculatorComponentProps {
+  onClose: () => void;
+}
+const CalculatorComponent: React.FC<CalculatorComponentProps> = ({ onClose }) => {
+  const [display, setDisplay] = useState('0');
+  const [firstOperand, setFirstOperand] = useState<number | null>(null);
+  const [operator, setOperator] = useState<string | null>(null);
+  const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);
+  const inputDigit = (digit: string) => {
+    if (waitingForSecondOperand) {
+      setDisplay(digit);
+      setWaitingForSecondOperand(false);
+    } else {
+      setDisplay(display === '0' ? digit : display + digit);
+    }
+  };
+  const inputDecimal = () => {
+    if (waitingForSecondOperand) {
+      setDisplay('0.');
+      setWaitingForSecondOperand(false);
+      return;
+    }
+    if (!display.includes('.')) {
+      setDisplay(display + '.');
+    }
+  };
+  const clear = () => {
+    setDisplay('0');
+    setFirstOperand(null);
+    setOperator(null);
+    setWaitingForSecondOperand(false);
+  };
+  const calculate = (firstOp: number, secondOp: number, op: string): number | string => {
+    switch (op) {
+      case '+': return firstOp + secondOp;
+      case '-': return firstOp - secondOp;
+      case '*': return firstOp * secondOp;
+      case '/': return secondOp === 0 ? 'Error' : firstOp / secondOp;
+      default: return secondOp;
+    }
+  };
+  const performOperation = (nextOperator: string) => {
+    const inputValue = parseFloat(display);
+    if (nextOperator === '=') {
+      if (operator && firstOperand !== null) {
+        const result = calculate(firstOperand, inputValue, operator);
+        setDisplay(String(result));
+        setFirstOperand(null);
+        setOperator(null);
+        setWaitingForSecondOperand(false);
+      }
+    } else {
+      if (firstOperand === null) {
+        setFirstOperand(inputValue);
+      } else if (operator) {
+        const result = calculate(firstOperand, inputValue, operator);
+        setDisplay(String(result));
+        setFirstOperand(typeof result === 'number' ? result : null);
+      }
+      setWaitingForSecondOperand(true);
+      setOperator(nextOperator);
+    }
+  };
+  return (
+    <div className="bg-gray-100 p-4 rounded-lg shadow-lg w-full max-w-md">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold">Calculator</h2>
+        <button onClick={onClose} className="text-gray-600 hover:text-gray-800">
+          <X className="w-6 h-6" />
+        </button>
+      </div>
+      <div className="bg-gray-200 p-4 rounded mb-4 text-right text-2xl font-bold">
+        {display}
+      </div>
+      <div className="grid grid-cols-4 gap-2">
+        <button onClick={clear} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">C</button>
+        <button onClick={() => performOperation('/')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">/</button>
+        <button onClick={() => performOperation('*')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">*</button>
+        <button onClick={() => performOperation('-')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">-</button>
+        <button onClick={() => inputDigit('7')} className="p-3 bg-white hover:bg-gray-100 rounded">7</button>
+        <button onClick={() => inputDigit('8')} className="p-3 bg-white hover:bg-gray-100 rounded">8</button>
+        <button onClick={() => inputDigit('9')} className="p-3 bg-white hover:bg-gray-100 rounded">9</button>
+        <button onClick={() => performOperation('+')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">+</button>
+        <button onClick={() => inputDigit('4')} className="p-3 bg-white hover:bg-gray-100 rounded">4</button>
+        <button onClick={() => inputDigit('5')} className="p-3 bg-white hover:bg-gray-100 rounded">5</button>
+        <button onClick={() => inputDigit('6')} className="p-3 bg-white hover:bg-gray-100 rounded">6</button>
+        <button onClick={() => performOperation('=')} className="p-3 bg-blue-500 hover:bg-blue-600 text-white rounded row-span-2">=</button>
+        <button onClick={() => inputDigit('1')} className="p-3 bg-white hover:bg-gray-100 rounded">1</button>
+        <button onClick={() => inputDigit('2')} className="p-3 bg-white hover:bg-gray-100 rounded">2</button>
+        <button onClick={() => inputDigit('3')} className="p-3 bg-white hover:bg-gray-100 rounded">3</button>
+        <button onClick={() => inputDigit('0')} className="p-3 bg-white hover:bg-gray-100 rounded col-span-2">0</button>
+        <button onClick={inputDecimal} className="p-3 bg-white hover:bg-gray-100 rounded">.</button>
+      </div>
+    </div>
+  );
+};
+const MathQuizApp: React.FC = () => {
+  const [question, setQuestion] = useState<Question>(generateQuestion('easy'));
+  const [userAnswer, setUserAnswer] = useState('');
+  const [result, setResult] = useState('');
+  const [score, setScore] = useState(0);
+  const [wrongAnswers, setWrongAnswers] = useState(0);
+  const [difficulty, setDifficulty] = useState<Difficulty>('easy');
+  const [showCalculator, setShowCalculator] = useState(false);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Parse the user answer as a float and check against the question answer
+    const parsedAnswer = parseFloat(userAnswer);
+    // Check if the answer matches (with some tolerance for floating point)
+    const isCorrect = Math.abs(parsedAnswer - question.answer) < 0.001;
+    if (isCorrect) {
+      setResult('Correct!');
+      setScore(score + 1);
+    } else {
+      setResult(`Incorrect. The correct answer is ${question.answer}.`);
+      setWrongAnswers(wrongAnswers + 1);
+    }
+    setUserAnswer('');
+    setQuestion(generateQuestion(difficulty));
+  };
+  const handleDifficultyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newDifficulty = e.target.value as Difficulty;
+    setDifficulty(newDifficulty);
+    setQuestion(generateQuestion(newDifficulty));
+    setScore(0);
+    setWrongAnswers(0);
+    setResult('');
+  };
+  return (
+    <div className="bg-gray-50 min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-4xl w-full mx-auto bg-white rounded-lg shadow-md p-8">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-4xl font-bold">Math Quiz App</h1>
+          <button
+            onClick={() => setShowCalculator(!showCalculator)}
+            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"
+          >
+            <Calculator className="w-5 h-5" />
+            {showCalculator ? 'Hide Calculator' : 'Show Calculator'}
+          </button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="flex flex-col items-center gap-6">
+                <div className="flex gap-8 items-center justify-center">
+                  <div className="text-xl font-bold">Correct: {score}</div>
+                  <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
+                </div>
+                <select
+                  value={difficulty}
+                  onChange={handleDifficultyChange}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
+                >
+                  {difficulties.map((diff) => (
+                    <option key={diff} value={diff}>
+                      {diff.charAt(0).toUpperCase() + diff.slice(1)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="text-center">
+                <p className="text-3xl font-bold mb-6">
+                  What is {question.num1} {question.operation} {question.num2}?
+                </p>
+                <input
+                  type="number"
+                  value={userAnswer}
+                  onChange={(e) => setUserAnswer(e.target.value)}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-full text-center"
+                  step="any"
+                />
+              </div>
+              <div className="text-center">
+                <button
+                  type="submit"
+                  className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-lg px-8 py-3 text-center"
+                >
+                  Submit
+                </button>
+              </div>
+              {result && (
+                <p
+                  className={`text-xl font-bold text-center ${
+                    result === 'Correct!' ? 'text-green-500' : 'text-red-500'
+                  }`}
+                >
+                  {result}{' '}
+                  {result === 'Correct!' ? (
+                    <Check className="inline-block w-6 h-6" />
+                  ) : (
+                    <X className="inline-block w-6 h-6" />
+                  )}
+                </p>
+              )}
+            </form>
+          </div>
+          {showCalculator && (
+            <div className="flex justify-center">
+              <CalculatorComponent onClose={() => setShowCalculator(false)} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MathQuizApp;

eslint.config.mjs ADDED Viewed

	@@ -0,0 +1,16 @@

+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+export default eslintConfig;

next-env.d.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts ADDED Viewed

	@@ -0,0 +1,7 @@

+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+export default nextConfig;

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "name": "math-quiz",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "next": "15.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+export default config;

public/file.svg ADDED Viewed

public/globe.svg ADDED Viewed

public/next.svg ADDED Viewed

public/vercel.svg ADDED Viewed

public/window.svg ADDED Viewed

tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,18 @@

+import type { Config } from "tailwindcss";
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}