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;
Leave a Comment