function MainComponent() { const [topic, setTopic] = useState(""); const [subtopic, setSubtopic] = useState(""); const [questions, setQuestions] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [numQuestions, setNumQuestions] = useState(5); const [difficulty, setDifficulty] = useState("medium"); const [selectedModel, setSelectedModel] = useState("chatgpt"); const [userAnswers, setUserAnswers] = useState({}); const [showResults, setShowResults] = useState(false); const [score, setScore] = useState(0); const generateQuestions = async ()=>{ if (!topic || !subtopic) { setError("Please fill in both topic and subtopic"); return; } if (numQuestions < 1 || numQuestions > 10) { setError("Please select between 1 and 10 questions"); return; } setLoading(true); setError(""); setUserAnswers({}); setShowResults(false); setScore(0); try { const prompt = `Generate ${numQuestions} multiple choice questions about ${topic}, specifically focusing on ${subtopic}. The difficulty level should be ${difficulty}. Each question should have exactly 4 options and include an explanation for the correct answer. For ${difficulty} difficulty, ensure the questions are appropriately challenging. Return the response in a structured format with the question, options array, correctAnswer index (0-3), and explanation.`; let response; switch(selectedModel){ case "chatgpt": response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], json_schema: { name: "mcq_questions", schema: { type: "object", properties: { questions: { type: "array", items: { type: "object", properties: { question: { type: "string" }, options: { type: "array", items: { type: "string" }, minItems: 4, maxItems: 4 }, correctAnswer: { type: "number" }, explanation: { type: "string" } }, required: [ "question", "options", "correctAnswer", "explanation" ], additionalProperties: false } } }, required: [ "questions" ], additionalProperties: false } } }) }); break; case "claude": response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], json_schema: { name: "mcq_questions", schema: { type: "object", properties: { questions: { type: "array", items: { type: "object", properties: { question: { type: "string" }, options: { type: "array", items: { type: "string" }, minItems: 4, maxItems: 4 }, correctAnswer: { type: "number" }, explanation: { type: "string" } }, required: [ "question", "options", "correctAnswer", "explanation" ], additionalProperties: false } } }, required: [ "questions" ], additionalProperties: false } } }) }); break; case "gemini": response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], json_schema: { name: "mcq_questions", schema: { type: "object", properties: { questions: { type: "array", items: { type: "object", properties: { question: { type: "string" }, options: { type: "array", items: { type: "string" }, minItems: 4, maxItems: 4 }, correctAnswer: { type: "number" }, explanation: { type: "string" } }, required: [ "question", "options", "correctAnswer", "explanation" ], additionalProperties: false } } }, required: [ "questions" ], additionalProperties: false } } }) }); break; default: throw new Error("Invalid model selected"); } const data = await response.json(); const parsedQuestions = JSON.parse(data.choices[0].message.content).questions; setQuestions(parsedQuestions); } catch (err) { setError("Failed to generate questions. Please try again."); console.error(err); } finally{ setLoading(false); } }; const handleAnswerSelect = (questionIndex, optionIndex)=>{ setUserAnswers((prev)=>({ ...prev, [questionIndex]: optionIndex })); }; const checkAnswers = ()=>{ const correctAnswers = questions.reduce((count, q, index)=>{ return count + (userAnswers[index] === q.correctAnswer ? 1 : 0); }, 0); setScore(correctAnswers); setShowResults(true); }; const getFeedbackMessage = (score, total)=>{ const percentage = score / total * 100; if (percentage === 100) return "Perfect! Excellent work! 🎉"; if (percentage >= 80) return "Great job! Keep it up! 🌟"; if (percentage >= 60) return "Good effort! Room for improvement! 👍"; if (percentage >= 40) return "Keep practicing! You can do better! 📚"; return "Don't give up! Try again! 💪"; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFFFFF] px-4 sm:px-6 py-6 sm:py-8", __source: { fileName: "", lineNumber: 204, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 205, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6 sm:mb-8", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl font-bold text-[#2C3E50] mb-3 sm:mb-4 font-roboto text-center tracking-wide animate-[fadeIn_0.6s_ease-out] flex items-center justify-center gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-graduation-cap text-4xl sm:text-5xl animate-[bounce_2s_ease-in-out_infinite] text-[#ff6b35]", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }), "Quiz Master"), /*#__PURE__*/ React.createElement("p", { className: "text-base sm:text-lg text-gray-600 text-center", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, "Developed by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://geartocareer.in/", target: "_blank", rel: "noopener noreferrer", className: "text-[#ff6b35] hover:text-[#ff5a1f] transition-colors duration-300 hover:underline", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, "geartocareer.in"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F8F9FA] rounded-xl shadow-lg p-4 sm:p-6 md:p-8 mb-8 animate-[slideIn_0.5s_ease-out]", __source: { fileName: "", lineNumber: 223, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6 sm:space-y-8", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1E2A3B] mb-2 font-roboto text-base sm:text-lg", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: topic, onChange: (e)=>setTopic(e.target.value), className: "w-full px-4 py-3 sm:py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF8C00] focus:border-transparent transition-all duration-200 bg-white shadow-sm text-base sm:text-lg", placeholder: "e.g., Physics", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1E2A3B] mb-2 font-roboto text-base sm:text-lg", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "Subtopic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subtopic", value: subtopic, onChange: (e)=>setSubtopic(e.target.value), className: "w-full px-4 py-3 sm:py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF8C00] focus:border-transparent transition-all duration-200 bg-white shadow-sm text-base sm:text-lg", placeholder: "e.g., Kinematics", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 sm:space-y-8", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1E2A3B] mb-2 font-roboto text-base sm:text-lg", __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, "Number of Questions"), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl sm:text-5xl font-bold text-[#FF8C00]", __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }, numQuestions)), /*#__PURE__*/ React.createElement("div", { className: "relative pt-2 pb-6 sm:pb-8", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", name: "numQuestions", min: "1", max: "10", value: numQuestions, onChange: (e)=>setNumQuestions(Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 263, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4 px-1", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map((num)=>/*#__PURE__*/ React.createElement("span", { key: num, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 274, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "h-3 w-[2px] bg-[#E2E8F0] mb-2", __source: { fileName: "", lineNumber: 275, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs sm:text-sm font-medium text-[#64748B]", __source: { fileName: "", lineNumber: 276, columnNumber: 27 }, __self: this }, num)))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1E2A3B] mb-4 font-roboto text-base sm:text-lg", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "Difficulty Level"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDifficulty("easy"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${difficulty === "easy" ? "bg-gradient-to-r from-green-400 to-green-600 text-white shadow-lg" : "bg-white text-green-600 border-2 border-green-400 hover:bg-green-50"}`, __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }, "Easy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDifficulty("medium"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${difficulty === "medium" ? "bg-gradient-to-r from-[#FF8C00] to-[#FFA500] text-white shadow-lg" : "bg-white text-[#FF8C00] border-2 border-[#FF8C00] hover:bg-orange-50"}`, __source: { fileName: "", lineNumber: 299, columnNumber: 21 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDifficulty("hard"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${difficulty === "hard" ? "bg-gradient-to-r from-red-400 to-red-600 text-white shadow-lg" : "bg-white text-red-600 border-2 border-red-400 hover:bg-red-50"}`, __source: { fileName: "", lineNumber: 309, columnNumber: 21 }, __self: this }, "Hard"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1E2A3B] mb-4 font-roboto text-base sm:text-lg", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, "AI Model"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedModel("chatgpt"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${selectedModel === "chatgpt" ? "bg-gradient-to-r from-[#FF8C00] to-[#FFA500] text-white shadow-lg" : "bg-white text-[#FF8C00] border-2 border-[#FF8C00] hover:bg-orange-50"}`, __source: { fileName: "", lineNumber: 326, columnNumber: 21 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedModel("claude"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${selectedModel === "claude" ? "bg-gradient-to-r from-[#FF8C00] to-[#FFA500] text-white shadow-lg" : "bg-white text-[#FF8C00] border-2 border-[#FF8C00] hover:bg-orange-50"}`, __source: { fileName: "", lineNumber: 336, columnNumber: 21 }, __self: this }, "Claude"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedModel("gemini"), className: `w-full min-h-[48px] py-3 px-6 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${selectedModel === "gemini" ? "bg-gradient-to-r from-[#FF8C00] to-[#FFA500] text-white shadow-lg" : "bg-white text-[#FF8C00] border-2 border-[#FF8C00] hover:bg-orange-50"}`, __source: { fileName: "", lineNumber: 346, columnNumber: 21 }, __self: this }, "Gemini"))))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm font-medium bg-red-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: generateQuestions, disabled: loading, className: "w-full bg-[#ff6b35] text-white py-4 px-6 rounded-xl hover:bg-[#ff5a1f] transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none font-medium text-lg shadow-lg", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 374, columnNumber: 19 }, __self: this }), "Generating Questions...") : "Generate MCQs"))), questions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white/90 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-white/20 animate-[fadeIn_0.8s_ease-out]", __source: { fileName: "", lineNumber: 385, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8 font-roboto text-gray-800 text-center", __source: { fileName: "", lineNumber: 386, columnNumber: 13 }, __self: this }, "📝 Quiz Questions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 389, columnNumber: 13 }, __self: this }, questions.map((q, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-gray-200 pb-8 last:border-b-0 animate-[slideIn_0.5s_ease-out]", style: { animationDelay: `${index * 0.1}s` }, __source: { fileName: "", lineNumber: 391, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium mb-6 font-roboto text-gray-800", __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-blue-600 text-white rounded-full w-8 h-8 inline-flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 397, columnNumber: 21 }, __self: this }, index + 1), q.question), /*#__PURE__*/ React.createElement("div", { className: "ml-11 space-y-3", __source: { fileName: "", lineNumber: 402, columnNumber: 19 }, __self: this }, q.options.map((option, optIndex)=>{ const isCorrectAnswer = q.correctAnswer === optIndex; const isUserAnswer = userAnswers[index] === optIndex; const baseClasses = "p-4 rounded-xl cursor-pointer transition-all duration-300 hover:shadow-lg"; let statusClasses = "bg-white/50 border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50/50"; if (showResults) { if (isCorrectAnswer) { statusClasses = "bg-green-100/70 text-green-800 border-2 border-green-400 animate-[pulse_1s_ease-out]"; } else if (isUserAnswer) { statusClasses = "bg-red-100/70 text-red-800 border-2 border-red-400"; } else { statusClasses = "bg-white/50 border-2 border-gray-200"; } } else if (isUserAnswer) { statusClasses = "bg-blue-100/70 text-blue-800 border-2 border-blue-400"; } return /*#__PURE__*/ React.createElement("div", { key: optIndex, onClick: ()=>!showResults && handleAnswerSelect(index, optIndex), className: `${baseClasses} ${statusClasses}`, __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium mr-3 text-lg", __source: { fileName: "", lineNumber: 436, columnNumber: 27 }, __self: this }, String.fromCharCode(65 + optIndex)), option); })), showResults && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-6 bg-blue-50/50 rounded-xl border-2 border-blue-200 ml-11 animate-[fadeIn_0.5s_ease-out]", __source: { fileName: "", lineNumber: 445, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-700 mb-2 text-lg", __source: { fileName: "", lineNumber: 446, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-yellow-500 mr-2", __source: { fileName: "", lineNumber: 447, columnNumber: 25 }, __self: this }), "Explanation:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 450, columnNumber: 23 }, __self: this }, q.explanation))))), !showResults && Object.keys(userAnswers).length === questions.length && /*#__PURE__*/ React.createElement("button", { onClick: checkAnswers, className: "mt-8 w-full bg-gradient-to-r from-green-600 to-green-800 text-white py-4 px-8 rounded-xl hover:from-green-700 hover:to-green-900 transition-all duration-300 transform hover:scale-[1.02] font-medium text-lg shadow-lg animate-[fadeIn_0.5s_ease-out]", __source: { fileName: "", lineNumber: 459, columnNumber: 17 }, __self: this }, "Check Answers"), showResults && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center p-8 bg-blue-50/50 rounded-xl border-2 border-blue-200 animate-[fadeIn_0.8s_ease-out]", __source: { fileName: "", lineNumber: 468, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 469, columnNumber: 17 }, __self: this }, "Your Score: ", score, "/", questions.length, " (", (score / questions.length * 100).toFixed(1), "%)"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-700 mb-6", __source: { fileName: "", lineNumber: 473, columnNumber: 17 }, __self: this }, getFeedbackMessage(score, questions.length)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowResults(false); setUserAnswers({}); setScore(0); }, className: "bg-gradient-to-r from-blue-600 to-blue-800 text-white py-4 px-8 rounded-xl hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] font-medium text-lg shadow-lg", __source: { fileName: "", lineNumber: 476, columnNumber: 17 }, __self: this }, "Try Again")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 491, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } input[type="range"] { -webkit-appearance: none; width: 100%; height: 12px; background: linear-gradient(to right, #FF8C00, #FFA500); border-radius: 10px; outline: none; box-shadow: 0 2px 4px rgba(255, 140, 0, 0.2); transition: all 0.2s ease; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; background: #FF8C00; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(255, 140, 0, 0.3); border: 2px solid white; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.05); box-shadow: 0 3px 8px rgba(255, 140, 0, 0.4); } input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); } @media (max-width: 640px) { input[type="range"]::-webkit-slider-thumb { width: 36px; height: 36px; } } `)); }