Spaces:

aki-008
/

prepAI

Running

App Files Files Community

Prakhar Singh commited on Nov 17, 2025

Commit

7e99777

1 Parent(s): 8811e47

DashBoard skeleton completed

Browse files

Files changed (8) hide show

Frontend/index.html +18 -11
Frontend/src/App.tsx +1 -1
Frontend/src/components/dashboard/Sidebar.tsx +2 -7
Frontend/src/pages/AiInterview.tsx +147 -9
Frontend/src/pages/dashboard.tsx +1 -1
Frontend/src/pages/home.tsx +1 -1
Frontend/src/pages/note.tsx +159 -3
Frontend/src/pages/quize.tsx +5 -5

Frontend/index.html CHANGED Viewed

@@ -1,13 +1,20 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Prep-AI</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

 <!doctype html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Prep-AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

Frontend/src/App.tsx CHANGED Viewed

@@ -45,7 +45,7 @@ const App: React.FC = () => {
                 <Sidebar onLogout={handleLogout} />
                 {/* Main Content */}
-                <main className="flex-1 overflow-y-auto p-6">
                   <Routes>
                     <Route path="/dashboard" element={<Dashboard />} />
                     <Route path="/notes" element={<Notes />} />

                 <Sidebar onLogout={handleLogout} />
                 {/* Main Content */}
+                <main className="flex-1 overflow-y-auto">
                   <Routes>
                     <Route path="/dashboard" element={<Dashboard />} />
                     <Route path="/notes" element={<Notes />} />

Frontend/src/components/dashboard/Sidebar.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
     { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
   ];
   return (
-    <aside className="w-64 bg-gray-900 text-white flex flex-col justify-between">
       {/* Top Section */}
       <div>
@@ -45,11 +45,6 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
       {/* Bottom Section (From Header) */}
       <div className="p-4 border-t border-gray-700 space-y-4">
-        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
-          <Bell size={18} />
-          <span>Notifications</span>
-        </button>
         <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
           <Settings size={18} />
           <span>Settings</span>
@@ -60,7 +55,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
           <span>John Doe</span>
         </button>
-        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-red-600/20 text-red-400 transition w-full text-left">
           <LogOut size={18} />
           <span>Logout</span>
         </button>

     { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
   ];
   return (
+    <aside className="w-64 bg-linear-to-r from-blue-700 to-gray-900/50 text-white flex flex-col justify-between">
       {/* Top Section */}
       <div>
       {/* Bottom Section (From Header) */}
       <div className="p-4 border-t border-gray-700 space-y-4">
         <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
           <Settings size={18} />
           <span>Settings</span>
           <span>John Doe</span>
         </button>
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-red-600 text-black transition w-full text-left">
           <LogOut size={18} />
           <span>Logout</span>
         </button>

Frontend/src/pages/AiInterview.tsx CHANGED Viewed

@@ -1,17 +1,155 @@
-import React from "react";
 const AIInterview: React.FC = () => {
-  return (
-    <div>
-      <h2 className="text-3xl font-bold mb-4">AI Interview Practice</h2>
-      <p className="text-gray-600 mb-4">
-        Practice live AI interviews with real-time feedback and adaptive questions.
       </p>
-      <button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-        Start AI Interview
       </button>
     </div>
   );
 };
-export default AIInterview;

+import React, { useState } from "react";
+import { Send, Settings, CheckCircle } from "lucide-react";
+// Define the structure for the interview state
+type InterviewState = 'config' | 'chat' | 'results';
 const AIInterview: React.FC = () => {
+  const [interviewState, setInterviewState] = useState<InterviewState>('config');
+  const [jobRole, setJobRole] = useState('');
+  const [experience, setExperience] = useState('');
+  const [level, setLevel] = useState('Medium');
+  // Placeholder for the AI Chat bubble/ball
+  const InterviewBall: React.FC = () => (
+    <div className="flex items-center justify-center w-24 h-24 bg-purple-600 rounded-full shadow-2xl animate-pulse cursor-pointer">
+      <span className="text-white font-bold text-xl">AI</span>
+    </div>
+  );
+  // --- RENDER FUNCTIONS ---
+  // 1. Configuration Phase
+  const renderConfig = () => (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
+      <h3 className="text-2xl font-semibold mb-6 flex items-center gap-2 text-blue-700">
+        <Settings size={24} /> Configure Your Interview
+      </h3>
+      <div className="space-y-6">
+        {/* Job Role Input */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">1. Job Role/Position (e.g., Senior Frontend Developer)</span>
+          <input
+            type="text"
+            value={jobRole}
+            onChange={(e) => setJobRole(e.target.value)}
+            placeholder="Enter the job role for tailored questions"
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </label>
+        {/* Experience Input */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">2. Years of Professional Experience</span>
+          <input
+            type="number"
+            min="0"
+            value={experience}
+            onChange={(e) => setExperience(e.target.value)}
+            placeholder="e.g., 5"
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </label>
+        {/* Level Select */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">3. Difficulty Level</span>
+          <select
+            value={level}
+            onChange={(e) => setLevel(e.target.value)}
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="Basic">Basic (Beginner)</option>
+            <option value="Medium">Medium (Intermediate)</option>
+            <option value="Hard">Hard (Senior/Expert)</option>
+          </select>
+        </label>
+      </div>
+      <button
+        onClick={() => {
+          if (jobRole && experience) {
+            setInterviewState('chat');
+          } else {
+            alert('Please fill in the Job Role and Experience.');
+          }
+        }}
+        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2"
+        disabled={!jobRole || !experience}
+      >
+        <Send size={20} /> Start Interview
+      </button>
+    </div>
+  );
+  // 2. Chat/Interview Phase
+  const renderChat = () => (
+    <div className="flex flex-col items-center bg-white p-6 rounded-xl shadow-lg h-[600px] overflow-hidden relative">
+      <h3 className="text-xl font-bold mb-4">Interview in Progress</h3>
+      <p className="text-gray-600 mb-6">
+        Role: {jobRole} | Experience: {experience} yrs | Level: {level}
       </p>
+      {/* The AI Ball UI Element */}
+      <InterviewBall />
+      {/* Placeholder for Chat Messages */}
+      <div className="flex-1 w-full mt-4 p-4 border border-dashed border-gray-300 rounded-lg overflow-y-auto bg-gray-50">
+        <div className="bg-purple-100 p-3 rounded-lg text-purple-800 mb-2">
+          **AI:** Welcome! Based on your configuration, let's start with your first question...
+        </div>
+        {/* User messages and AI responses would go here */}
+      </div>
+      {/* Input area */}
+      <div className="w-full flex gap-2 mt-4">
+        <input
+          type="text"
+          placeholder="Type your answer here..."
+          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
+        />
+        <button className="px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+          <Send size={20} />
+        </button>
+      </div>
+      <button
+        onClick={() => setInterviewState('results')}
+        className="mt-4 text-sm text-red-500 hover:text-red-700 underline"
+      >
+        End Interview
+      </button>
+    </div>
+  );
+  // 3. Results Phase (Simple Placeholder)
+  const renderResults = () => (
+    <div className="bg-green-50 p-8 rounded-xl shadow-xl text-center">
+      <CheckCircle size={48} className="text-green-600 mx-auto mb-4" />
+      <h3 className="text-3xl font-bold text-green-700 mb-2">Interview Ended</h3>
+      <p className="text-gray-700 mb-6">Thank you for practicing! Your detailed feedback and results are being compiled now.</p>
+      <button
+        onClick={() => setInterviewState('config')}
+        className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-150"
+      >
+        Start New Interview
       </button>
     </div>
   );
+  // --- MAIN RENDER ---
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">AI Interview Practice 🤖</h1>
+      {/* State rendering */}
+      {interviewState === 'config' && renderConfig()}
+      {interviewState === 'chat' && renderChat()}
+      {interviewState === 'results' && renderResults()}
+    </div>
+  );
 };
+export default AIInterview;

Frontend/src/pages/dashboard.tsx CHANGED Viewed

@@ -23,7 +23,7 @@ const Dashboard = () => {
     // PRIMARY CHANGE: Background Gradient inspired by landing page
     // Using a custom CSS class for a more complex gradient if needed, or approximating with Tailwind.
     // For now, let's use a subtle linear gradient that implies the dark blue-black.
-    <div className="px-6 py-8 space-y-10 min-h-screen text-gray-100 bg-linear-to-br from-[#0a0e1b] via-[#100d27] to-[#0a0e1b] font-sans">
       {/* Font sans is a good default for modern look */}
       {/* ----------- HEADER SECTION (Updated for new theme) ----------- */}

     // PRIMARY CHANGE: Background Gradient inspired by landing page
     // Using a custom CSS class for a more complex gradient if needed, or approximating with Tailwind.
     // For now, let's use a subtle linear gradient that implies the dark blue-black.
+    <div className="px-6 py-8 space-y-10 min-h-screen text-gray-100 bg-black font-OpenSans">
       {/* Font sans is a good default for modern look */}
       {/* ----------- HEADER SECTION (Updated for new theme) ----------- */}

Frontend/src/pages/home.tsx CHANGED Viewed

@@ -92,7 +92,7 @@ const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) =>
     const heroRef = useRef<HTMLDivElement>(null);
     return (
-        <div className="w-full min-h-screen bg-linear-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden">
             {/* Navigation Bar */}
             <nav className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900/95 backdrop-blur-md shadow-xl' : 'bg-slate-900/80 backdrop-blur-sm'}`}>
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

     const heroRef = useRef<HTMLDivElement>(null);
     return (
+        <div className="w-full min-h-screen bg-linear-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden font-opensans">
             {/* Navigation Bar */}
             <nav className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900/95 backdrop-blur-md shadow-xl' : 'bg-slate-900/80 backdrop-blur-sm'}`}>
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

Frontend/src/pages/note.tsx CHANGED Viewed

@@ -1,10 +1,166 @@
 import React from "react";
 const Notes: React.FC = () => {
   return (
-    <div>
-      <h2 className="text-3xl font-bold mb-4">My Notes</h2>
-      <p className="text-gray-600">Save and organize your interview preparation notes.</p>
     </div>
   );
 };

 import React from "react";
+import { FileText, History, RefreshCw, Plus, Download, Upload, Save, Star, Menu, X } from "lucide-react";
+// Placeholder data for the Summary/Important Parts section
+const sampleSummary = [
+  "DP weakness identified. Must solve 10 hard DP problems this week.",
+  "Crucial to articulate Time/Space Complexity for every solution.",
+  "Practice conversational pacing to reduce filler words.",
+];
 const Notes: React.FC = () => {
+  // State for the notes content
+  const [notesContent, setNotesContent] = React.useState(
+    `Goal: Focus on Dynamic Programming and explanation clarity.\n\nKey DP Concepts to review:\n1. Overlapping Subproblems\n2. Optimal Substructure\n3. Memoization vs. Tabulation\n\nInterview Explanation Focus:\n1. State the approach (e.g., "I will use DP with memoization").\n2. Clearly define the state/subproblem (e.g., "dp[i] represents...").\n3. State the base case(s).\n4. Define the recurrence relation.\n5. Analyze Time/Space Complexity (O(n)).\n\n*Self-Reminder: Use fewer 'um's and 'like's.*`
+  );
+  // NEW STATE: State to manage the sidebar's open/close status
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  // Toggle function
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+  // A function to simulate saving the notes (placeholder)
+  const handleSave = () => {
+    alert("Notes Saved!");
+    // In a real app, you would call an API here
+  };
   return (
+    // Ensure the overall container is flex and full viewport height
+    <div className="flex bg-black h-screen overflow-hidden">
+      {/* 1. Left Sidebar: Navigation & Utility (New, History, Upload) */}
+      <div
+        className={`
+          // Full height and transition for sliding
+          h-screen flex-shrink-0 transition-all duration-300 ease-in-out
+          bg-gray-800 flex flex-col gap-4 shadow-xl
+          ${isSidebarOpen ? 'w-56 p-4' : 'w-0 p-0 overflow-hidden'} // Transition controls width and padding
+        `}
+      >
+        {isSidebarOpen && ( // Only show content when open
+          <>
+            <h3 className="text-xl font-bold text-white mb-2 border-b border-gray-700 pb-2">My Notes</h3>
+            <button
+              className="flex items-center gap-3 w-full bg-blue-600 text-white px-4 py-3 rounded-xl hover:bg-blue-700 transition duration-150 font-semibold whitespace-nowrap"
+              aria-label="Create New Note"
+            >
+              <Plus size={20} />
+              New Note
+            </button>
+            <button
+              className="flex items-center gap-3 w-full text-gray-300 px-4 py-3 rounded-xl hover:bg-gray-700 hover:text-white transition duration-150 whitespace-nowrap"
+              aria-label="Upload Notes"
+            >
+              <Upload size={20} />
+              Upload
+            </button>
+            <button
+              className="flex items-center gap-3 w-full text-gray-300 px-4 py-3 rounded-xl hover:bg-gray-700 hover:text-white transition duration-150 whitespace-nowrap"
+              aria-label="View History"
+            >
+              <History size={20} />
+              History
+            </button>
+          </>
+        )}
+      </div>
+      {/* 2. Main Content Area */}
+      <div className="flex-1 p-8 overflow-y-auto"> {/* Allow main content to scroll */}
+        <header className="flex justify-between items-center mb-6">
+          {/* Toggle Button for Sidebar - Moved to the header of the main content */}
+          <div className="flex items-center gap-4">
+            <button
+              onClick={toggleSidebar}
+              className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-800 transition-colors duration-200"
+              aria-label={isSidebarOpen ? "Close Sidebar" : "Open Sidebar"}
+            >
+              {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+            <h2 className="text-4xl font-extrabold text-white"> My Prep Notes</h2>
+          </div>
+          {/* Top Right Actions (Save, Rephrase, Download) */}
+          <div className="flex gap-3">
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-150 font-medium shadow-md"
+              aria-label="Save Current Note"
+            >
+              <Save size={18} />
+              Save
+            </button>
+            <button
+              className="flex items-center gap-2 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition duration-150"
+              aria-label="Rephrase Selected Text"
+            >
+              <RefreshCw size={18} />
+              Rephrase
+            </button>
+            <button
+              className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-150"
+              aria-label="Download Notes"
+            >
+              <Download size={18} />
+              Download
+            </button>
+          </div>
+        </header>
+        {/* Note Editor and Summary Section */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Middle Section: Notes Text Area (Takes 2/3 width on large screens) */}
+          <div className="md:col-span-2">
+            <p className="text-white mb-2 font-medium">Current Note: Dynamic Programming & Clarity</p>
+            <textarea
+              className="w-full h-[600px] p-6 text-lg border-2 bg-white border-gray-300 rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/50 resize-none font-mono leading-relaxed"
+              placeholder="Write your notes here..."
+              value={notesContent}
+              onChange={(e) => setNotesContent(e.target.value)}
+            ></textarea>
+          </div>
+          {/* Right Section: Summary/Important Parts (Takes 1/3 width) */}
+          <div className="md:col-span-1">
+            <div className="bg-white p-6 rounded-xl shadow-lg h-full border border-gray-200">
+              <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2 border-b pb-2">
+                <Star className="text-yellow-500" size={20} />
+                AI Summary & Key Takeaways
+              </h3>
+              <p className="text-sm text-gray-600 mb-4">
+                This section extracts or highlights the most important parts of your current note or feedback.
+              </p>
+              <ul className="space-y-3">
+                {sampleSummary.map((item, index) => (
+                  <li key={index} className="flex items-start gap-2 text-gray-700">
+                    <span className="text-yellow-500 font-extrabold text-lg">•</span>
+                    <span className="text-sm">{item}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                className="mt-6 flex items-center gap-2 bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-150 text-sm w-full justify-center"
+                aria-label="Generate Summary"
+              >
+                <FileText size={16} />
+                Generate Summary
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

Frontend/src/pages/quize.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { FileText, FileSpreadsheet, Code2, ListChecks, UploadCloud, Type } from
 const ResumeGeneratedQuize: React.FC = () => {
     // Consistent purple button style
-    const buttonClass = "w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-400 hover:to-purple-600 font-medium transition shadow-lg shadow-purple-500/30 text-white mt-4";
     const OutputTypeOption = ({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) => (
         // These cards inherently take full width of their parent container (which is now the right column)
@@ -47,7 +47,7 @@ const ResumeGeneratedQuize: React.FC = () => {
                 {/* --- LEFT SIDE: INPUT SOURCE SELECTION --- */}
                 <div>
-                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-purple-700 pb-2">
                         1. Select Quiz Source
                     </h3>
                     <div className="space-y-8">
@@ -64,7 +64,7 @@ const ResumeGeneratedQuize: React.FC = () => {
                 {/* --- RIGHT SIDE: PROMPT & OUTPUT CONFIGURATION (The full width section) --- */}
                 <div className="lg:sticky lg:top-8 self-start">
-                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-purple-700 pb-2">
                         2. Configure & Generate
                     </h3>
@@ -99,14 +99,14 @@ const ResumeGeneratedQuize: React.FC = () => {
                     {/* MCQ Quiz Option - takes full width of its column */}
                     <OutputTypeOption
-                        icon={<ListChecks className="w-6 h-6 text-purple-400" />}
                         title="Multiple Choice Quiz (MCQ)"
                         desc="Ideal for quick assessment of knowledge and comprehension."
                     />
                     {/* Coding Quiz Option - takes full width of its column */}
                     <OutputTypeOption
-                        icon={<Code2 className="w-6 h-6 text-green-400" />}
                         title="Coding Challenge Quiz"
                         desc="Generates problems requiring code snippets or full functions for evaluation."
                     />

 const ResumeGeneratedQuize: React.FC = () => {
     // Consistent purple button style
+    const buttonClass = "w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-400 hover:to-blue-600 font-medium transition shadow-lg shadow-blue-500/30 text-white mt-4";
     const OutputTypeOption = ({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) => (
         // These cards inherently take full width of their parent container (which is now the right column)
                 {/* --- LEFT SIDE: INPUT SOURCE SELECTION --- */}
                 <div>
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
                         1. Select Quiz Source
                     </h3>
                     <div className="space-y-8">
                 {/* --- RIGHT SIDE: PROMPT & OUTPUT CONFIGURATION (The full width section) --- */}
                 <div className="lg:sticky lg:top-8 self-start">
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
                         2. Configure & Generate
                     </h3>
                     {/* MCQ Quiz Option - takes full width of its column */}
                     <OutputTypeOption
+                        icon={<ListChecks className="w-6 h-6 text-blue-400" />}
                         title="Multiple Choice Quiz (MCQ)"
                         desc="Ideal for quick assessment of knowledge and comprehension."
                     />
                     {/* Coding Quiz Option - takes full width of its column */}
                     <OutputTypeOption
+                        icon={<Code2 className="w-6 h-6 text-blue-400" />}
                         title="Coding Challenge Quiz"
                         desc="Generates problems requiring code snippets or full functions for evaluation."
                     />