Untitled

import React, { useState } from "react";

function App() {
  const quizData = [
    {
      question: "באיזו קבוצה החל לאו מסי את הקריירה המקצועית שלו?",
      options: ["רוסאריו סנטרל", "ניואל'ס אולד בויס", "בוקה ג׳וניורס", "ריבר פלייט"],
      correctIndex: 1
    },
    {
      question: "באיזו שנה עלה מסי לבוגרים של ברצלונה?",
      options: ["2000", "2004", "2008", "2010"],
      correctIndex: 1
    },
    {
      question: "באיזה מספר חולצה הוא מזוהה בעיקר בברצלונה?",
      options: ["7", "8", "10", "11"],
      correctIndex: 2
    },
    {
      question: "כמה פעמים זכה מסי בכדור הזהב (Ballon d’Or) עד כה?",
      options: ["3", "5", "7", "9"],
      correctIndex: 2
    },
    {
      question: "באיזה טורניר בינלאומי לנבחרות זכה מסי לראשונה עם נבחרת ארגנטינה?",
      options: ["מונדיאל 2010", "קופה אמריקה 2021", "קופה אמריקה 2015", "מונדיאל 2022"],
      correctIndex: 1
    },
    {
      question: "לאיזו קבוצה עבר מסי אחרי שעזב את ברצלונה?",
      options: ["מנצ׳סטר סיטי", "פריז סן-ז׳רמן", "יובנטוס", "ליברפול"],
      correctIndex: 1
    },
    {
      question: "באיזה תפקיד משחק מסי על המגרש?",
      options: ["חלוץ מרכזי", "קשר הגנתי", "קשר התקפי / חלוץ משני", "מגן שמאלי"],
      correctIndex: 2
    }
  ];

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [quizFinished, setQuizFinished] = useState(false);

  const handleOptionClick = (index) => {
    if (index === quizData[currentQuestion].correctIndex) {
      setScore((prev) => prev + 1);
    }

    if (currentQuestion < quizData.length - 1) {
      setCurrentQuestion((prev) => prev + 1);
    } else {
      setQuizFinished(true);
    }
  };

  const restartQuiz = () => {
    setScore(0);
    setCurrentQuestion(0);
    setQuizFinished(false);
  };

  if (quizFinished) {
    return (
      <div style={styles.container}>
        <h1 style={styles.title}>סיימת את החידון!</h1>
        <p style={styles.result}>התוצאה שלך: {score} מתוך {quizData.length}</p>
        <button style={styles.button} onClick={restartQuiz}>התחל מחדש</button>
      </div>
    );
  }

  const questionItem = quizData[currentQuestion];

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>חידון לאו מסי</h1>
      <div style={styles.questionContainer}>
        <h2 style={styles.question}>{questionItem.question}</h2>
      </div>

      <div>
        {questionItem.options.map((option, index) => (
          <button
            key={index}
            style={styles.button}
            onClick={() => handleOptionClick(index)}
          >
            {option}
          </button>
        ))}
      </div>

      <p style={styles.progress}>
        שאלה {currentQuestion + 1} מתוך {quizData.length}
      </p>
    </div>
  );
}

const styles = {
  container: {
    fontFamily: "Arial, sans-serif",
    maxWidth: "600px",
    margin: "0 auto",
    padding: "2rem",
    backgroundColor: "#f9f9f9",
    borderRadius: "10px",
    textAlign: "center"
  },
  title: {
    marginBottom: "1.5rem"
  },
  questionContainer: {
    marginBottom: "1rem"
  },
  question: {
    fontSize: "1.25rem",
    margin: "0.5rem 0"
  },
  button: {
    display: "block",
    width: "100%",
    margin: "0.5rem 0",
    padding: "0.75rem 1rem",
    fontSize: "1rem",
    backgroundColor: "#007AFF",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer"
  },
  result: {
    fontSize: "1.25rem"
  },
  progress: {
    marginTop: "1rem",
    color: "#666"
  }
};

export default App;