From f307bbf33746fced4656de42678898e5d1bb6d9e Mon Sep 17 00:00:00 2001 From: jainiksha Date: Mon, 10 Aug 2026 01:16:20 +0530 Subject: [PATCH] feat: add AI interview question explanation depth selector --- ...erviewQuestionExplanationDepthSelector.jsx | 1724 +++++++++++++++++ 1 file changed, 1724 insertions(+) create mode 100644 frontend/src/pages/AIInterviewQuestionExplanationDepthSelector/AIInterviewQuestionExplanationDepthSelector.jsx diff --git a/frontend/src/pages/AIInterviewQuestionExplanationDepthSelector/AIInterviewQuestionExplanationDepthSelector.jsx b/frontend/src/pages/AIInterviewQuestionExplanationDepthSelector/AIInterviewQuestionExplanationDepthSelector.jsx new file mode 100644 index 00000000..c7fa601f --- /dev/null +++ b/frontend/src/pages/AIInterviewQuestionExplanationDepthSelector/AIInterviewQuestionExplanationDepthSelector.jsx @@ -0,0 +1,1724 @@ +import React, { useState } from "react"; +import { + Brain, + BookOpen, + Sparkles, + CheckCircle2, + Clock3, + Layers, + Lightbulb, + Target, + Code2, + ChevronRight, + RefreshCw, + Settings2, + GraduationCap, + Zap, + Search, + Bookmark, + ArrowRight, + CircleHelp, + BarChart3, +} from "lucide-react"; + +const AIInterviewQuestionExplanationDepthSelector = () => { + const [selectedDepth, setSelectedDepth] = useState("standard"); + const [selectedQuestion, setSelectedQuestion] = useState(0); + const [activeTab, setActiveTab] = useState("explanation"); + const [generating, setGenerating] = useState(false); + const [savedPreference, setSavedPreference] = useState(true); + + const depthModes = [ + { + id: "quick", + title: "Quick", + subtitle: "Fast answer", + icon: "⚡", + color: "blue", + time: "30 sec", + description: + "A concise answer with the key concept and the most important point to remember.", + includes: [ + "Short answer", + "Key concept", + "Main takeaway", + ], + }, + { + id: "standard", + title: "Standard", + subtitle: "Balanced explanation", + icon: "🎯", + color: "violet", + time: "1–2 min", + description: + "A balanced explanation covering the concept, approach, and a practical example.", + includes: [ + "Concept explanation", + "Approach", + "Example", + ], + }, + { + id: "detailed", + title: "Detailed", + subtitle: "Step-by-step", + icon: "📚", + color: "green", + time: "3–5 min", + description: + "A comprehensive step-by-step explanation designed for deeper understanding.", + includes: [ + "Concept", + "Step-by-step approach", + "Example", + "Common mistakes", + ], + }, + { + id: "deep", + title: "Deep Dive", + subtitle: "Expert analysis", + icon: "🧠", + color: "orange", + time: "5–10 min", + description: + "An advanced explanation covering edge cases, alternatives, complexity, and related concepts.", + includes: [ + "Detailed reasoning", + "Edge cases", + "Alternatives", + "Complexity", + "Related concepts", + ], + }, + ]; + + const questions = [ + { + question: + "What is the difference between an array and a linked list?", + category: "Data Structures", + difficulty: "Easy", + quick: { + answer: + "An array stores elements in contiguous memory, while a linked list stores elements in separate nodes connected by pointers.", + keyConcept: + "Arrays provide fast indexed access, while linked lists provide flexible insertion and deletion.", + }, + standard: { + answer: + "An array stores elements in contiguous memory locations, which allows direct O(1) indexed access. A linked list stores elements in individual nodes connected through pointers, so accessing a specific element generally requires O(n) traversal.", + approach: + "Compare their memory layout, access time, insertion and deletion behavior, and memory overhead.", + example: + "If you frequently access elements by index, an array is usually preferable. If you frequently insert or remove elements from known positions, a linked list can be useful.", + }, + detailed: { + answer: + "An array is a linear data structure where elements are stored in contiguous memory locations. Because the address of each element can be calculated using its index, accessing an element takes O(1) time.", + steps: [ + "Arrays allocate a continuous block of memory.", + "The index is used to calculate an element's address.", + "This provides constant-time random access.", + "Inserting or deleting elements in the middle may require shifting elements.", + "A linked list stores data in separate nodes connected using pointers.", + "Finding an arbitrary node requires traversal from the beginning, which generally takes O(n).", + ], + example: + "For a list of student marks where you frequently access marks by index, an array is a good choice. For a structure where elements are frequently inserted or removed, a linked list may be more appropriate.", + mistakes: [ + "Assuming linked-list access is O(1).", + "Ignoring the memory overhead of pointers.", + "Assuming arrays always have faster insertion and deletion.", + ], + }, + deep: { + answer: + "Arrays and linked lists represent linear collections but make different trade-offs between memory layout, access, insertion, deletion, and cache behavior.", + steps: [ + "Arrays use contiguous memory, enabling O(1) indexed access.", + "Linked lists use dynamically allocated nodes connected through references or pointers.", + "Array insertion or deletion in the middle can require O(n) shifting.", + "Linked-list insertion can be O(1) when the target node or predecessor is already known.", + "Linked-list lookup is generally O(n).", + "Arrays usually benefit from better CPU cache locality.", + "Linked lists have additional memory overhead for node pointers.", + ], + complexity: + "Array access: O(1). Array search: O(n). Array insertion/deletion in the middle: O(n). Linked-list access/search: O(n). Linked-list insertion/deletion with a known node: O(1).", + alternatives: + "For many practical applications, dynamic arrays such as Java ArrayList or C++ vector provide a useful compromise by combining fast indexing with automatic resizing.", + edgeCases: [ + "A linked list can still require O(n) time to locate the position before an insertion.", + "Dynamic arrays occasionally perform O(n) resizing operations.", + "Memory fragmentation can affect linked-list performance.", + "For small collections, implementation simplicity may matter more than theoretical complexity.", + ], + related: [ + "Stacks", + "Queues", + "Dynamic Arrays", + "Hash Tables", + "Memory Management", + ], + }, + }, + { + question: + "How does a binary search algorithm work?", + category: "Algorithms", + difficulty: "Medium", + quick: { + answer: + "Binary search repeatedly divides a sorted search range in half until the target is found or the range becomes empty.", + keyConcept: + "Binary search reduces the search space by half at every step.", + }, + standard: { + answer: + "Binary search works on a sorted collection by comparing the target with the middle element. If the target is smaller, search the left half; if larger, search the right half.", + approach: + "Calculate the middle index, compare the middle value with the target, eliminate half the search space, and repeat.", + example: + "Searching for 70 in [10, 20, 40, 50, 70, 90] starts at 50, then searches the right half because 70 is larger.", + }, + detailed: { + answer: + "Binary search is a divide-and-conquer searching algorithm that requires the data to be sorted.", + steps: [ + "Set left to the first index.", + "Set right to the last index.", + "Calculate the middle index.", + "Compare the middle element with the target.", + "If they match, return the index.", + "If the target is smaller, move right to mid - 1.", + "If the target is larger, move left to mid + 1.", + "Repeat until the target is found or left becomes greater than right.", + ], + example: + "For [10, 20, 30, 40, 50, 60, 70], searching for 60 first checks 40, then 60, and finds the target after reducing the search space.", + mistakes: [ + "Using binary search on unsorted data.", + "Creating incorrect loop boundaries.", + "Forgetting to update the search range.", + ], + }, + deep: { + answer: + "Binary search exploits the ordering property of a sorted search space. Instead of examining every element, it eliminates half of the remaining candidates after each comparison.", + steps: [ + "Initialize the search interval.", + "Choose a midpoint safely.", + "Compare the midpoint with the target.", + "Discard the half that cannot contain the target.", + "Continue until the interval becomes empty.", + ], + complexity: + "Time complexity is O(log n) because the search space is halved at every iteration. Space complexity is O(1) for an iterative implementation.", + alternatives: + "A recursive implementation can make the logic expressive but introduces O(log n) call-stack usage in the worst case.", + edgeCases: [ + "Empty arrays.", + "Duplicate values.", + "Target smaller than the minimum.", + "Target larger than the maximum.", + "Integer overflow when calculating midpoint incorrectly in some languages.", + ], + related: [ + "Binary Search Trees", + "Divide and Conquer", + "Lower Bound", + "Upper Bound", + "Search Space Optimization", + ], + }, + }, + { + question: + "What is the purpose of normalization in databases?", + category: "DBMS", + difficulty: "Medium", + quick: { + answer: + "Database normalization organizes data to reduce redundancy and prevent update anomalies.", + keyConcept: + "Normalization improves data consistency by structuring related data appropriately.", + }, + standard: { + answer: + "Normalization is the process of organizing database tables to reduce duplicate data and avoid insertion, update, and deletion anomalies.", + approach: + "Identify dependencies and divide data into related tables according to normalization rules such as 1NF, 2NF, and 3NF.", + example: + "Instead of storing a department name repeatedly for every employee, department information can be stored in a separate table and referenced by an ID.", + }, + detailed: { + answer: + "Normalization is a database design technique used to organize data into tables while reducing unnecessary duplication and improving consistency.", + steps: [ + "First Normal Form requires atomic values and removes repeating groups.", + "Second Normal Form removes partial dependencies on part of a composite key.", + "Third Normal Form removes transitive dependencies between non-key attributes.", + "Tables are connected using primary and foreign keys.", + "The result is reduced redundancy and fewer data anomalies.", + ], + example: + "If employee and department details are repeatedly stored together, changing a department name may require many updates. Separating departments into their own table avoids this duplication.", + mistakes: [ + "Thinking normalization always improves performance.", + "Ignoring the cost of additional joins.", + "Applying normalization without understanding functional dependencies.", + ], + }, + deep: { + answer: + "Normalization provides a systematic way to decompose relational data based on functional dependencies so that redundancy and modification anomalies are minimized.", + steps: [ + "Identify entities and attributes.", + "Determine candidate keys and functional dependencies.", + "Ensure attributes are atomic under 1NF.", + "Remove partial dependencies for 2NF.", + "Remove transitive dependencies for 3NF.", + "Consider higher normal forms when multivalued or join dependencies exist.", + ], + complexity: + "Normalization does not have a single algorithmic complexity because it is primarily a schema-design process. Its practical cost often appears through additional joins during queries.", + alternatives: + "Denormalization can intentionally introduce redundancy when read performance, reporting, or query simplicity is more important than minimizing duplication.", + edgeCases: [ + "Highly normalized schemas can require many joins.", + "Some analytical workloads benefit from denormalized structures.", + "Business rules may create dependencies that are not obvious from the table structure.", + ], + related: [ + "Functional Dependencies", + "Primary Keys", + "Foreign Keys", + "Denormalization", + "Database Design", + ], + }, + }, + { + question: + "What is the difference between TCP and UDP?", + category: "Computer Networks", + difficulty: "Medium", + quick: { + answer: + "TCP is connection-oriented and reliable, while UDP is connectionless and prioritizes speed and lower overhead.", + keyConcept: + "TCP favors reliability; UDP favors speed and simplicity.", + }, + standard: { + answer: + "TCP establishes a connection and provides reliable, ordered delivery with retransmission. UDP sends datagrams without establishing a connection and does not guarantee delivery or ordering.", + approach: + "Compare connection setup, reliability, ordering, overhead, and common use cases.", + example: + "Web applications commonly use TCP-based protocols when reliable delivery matters, while real-time applications such as some voice or video systems may use UDP.", + }, + detailed: { + answer: + "TCP and UDP are transport-layer protocols with different goals.", + steps: [ + "TCP establishes a connection before transmitting data.", + "TCP uses acknowledgements and retransmission to provide reliable delivery.", + "TCP maintains ordering of transmitted data.", + "UDP sends independent datagrams without connection establishment.", + "UDP does not guarantee delivery or ordering.", + "UDP generally has lower protocol overhead.", + ], + example: + "A file transfer typically needs reliable delivery, making TCP appropriate. A real-time application may prefer UDP because avoiding retransmission delays can be more important than perfect delivery.", + mistakes: [ + "Saying UDP is always faster.", + "Saying UDP cannot be used for reliable applications.", + "Confusing TCP with HTTP itself.", + ], + }, + deep: { + answer: + "TCP and UDP provide transport-layer communication but optimize for different requirements. TCP offers connection-oriented reliable byte-stream delivery, while UDP provides lightweight datagram delivery without built-in reliability guarantees.", + steps: [ + "TCP uses a connection establishment process.", + "TCP tracks sequence numbers and acknowledgements.", + "TCP retransmits missing data.", + "TCP performs flow and congestion control.", + "UDP sends datagrams without these reliability mechanisms.", + "Applications using UDP can implement their own reliability when needed.", + ], + complexity: + "TCP introduces additional communication and state-management overhead. UDP has lower protocol overhead but leaves reliability, ordering, and congestion-related application behavior to higher layers where appropriate.", + alternatives: + "Modern protocols such as QUIC use UDP as a foundation while implementing reliability, encryption, multiplexing, and congestion control at a higher layer.", + edgeCases: [ + "UDP can be used when an application implements its own reliability.", + "TCP may be unsuitable for latency-sensitive communication where stale data is less useful than current data.", + "Neither protocol alone determines the complete performance of an application.", + ], + related: [ + "HTTP", + "QUIC", + "IP", + "Network Congestion", + "WebSockets", + ], + }, + }, + ]; + + const selectedQuestionData = + questions[selectedQuestion]; + + const currentExplanation = + selectedQuestionData[selectedDepth]; + + const selectedMode = depthModes.find( + (mode) => mode.id === selectedDepth + ); + + const handleGenerate = () => { + setGenerating(true); + + setTimeout(() => { + setGenerating(false); + setActiveTab("explanation"); + }, 800); + }; + + const handleDepthChange = (depth) => { + setSelectedDepth(depth); + setSavedPreference(true); + }; + + return ( +
+
+ + {/* Header */} + +
+ +
+ +
+ +
+ +

+ AI Interview Question Explanation Depth Selector +

+ +

+ Choose how deeply AI explains interview questions based on + your learning level and preparation needs. +

+ +
+ +
+ + {/* Overview Cards */} + +
+ +
+ + + +

+ Questions Explained +

+ +

+ 48 +

+ +
+ +
+ + + +

+ Current Mode +

+ +

+ {selectedMode.title} +

+ +
+ +
+ + + +

+ Learning Level +

+ +

+ Adaptive +

+ +
+ +
+ + + +

+ Saved Preference +

+ +

+ {savedPreference ? "Yes" : "No"} +

+ +
+ +
+ + {/* AI Banner */} + +
+ +
+ + + +

+ AI Explanation Personalization Engine +

+ +
+ +

+ Different learners need different levels of detail. Select + a preferred explanation depth and AI will adapt its response + from a quick summary to a deep technical analysis. +

+ +
+ + {/* Explanation Depth Selector */} + +
+ +
+ +
+ + + +
+ +

+ Choose Explanation Depth +

+ +

+ Your selection will be remembered for future explanations. +

+ +
+ +
+ +
+ + {savedPreference && ( + <> + + + + Preference saved + + + )} + +
+ +
+ +
+ + {depthModes.map((mode) => ( + + + + ))} + +
+ +
+ + {/* Selected Mode Summary */} + +
+ +
+ +
+ + + Selected Mode + + +

+ {selectedMode.title} +

+ +

+ {selectedMode.description} +

+ +
+ +
+ +
+ {selectedMode.icon} +
+ +

+ Estimated reading time +

+ +

+ {selectedMode.time} +

+ +
+ +
+ +
+ + {/* Question Selector */} + +
+ +
+ +
+ + + +
+ +

+ Select Interview Question +

+ +

+ Preview how the selected explanation depth changes the answer. +

+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ + {questions.map((question, index) => ( + + + + ))} + +
+ +
+ + {/* Selected Question */} + +
+ +
+ +
+ + + {selectedQuestionData.category} + + +

+ {selectedQuestionData.question} +

+ +
+ +
+ +

+ Difficulty +

+ +

+ {selectedQuestionData.difficulty} +

+ +
+ +
+ +
+ + {/* Generate Button */} + +
+ + + +
+ + {/* Explanation Tabs */} + +
+ + {[ + ["explanation", "Explanation"], + ["comparison", "Depth Comparison"], + ["tips", "Learning Tips"], + ].map(([value, label]) => ( + + + + ))} + +
+ + {/* Explanation */} + + {activeTab === "explanation" && ( + +
+ +
+ +
+ +
+ + + +

+ {selectedMode.title} Explanation +

+ +
+ + + {selectedMode.time} + + +
+ +
+ +

+ {currentExplanation.answer} +

+ +
+ + {/* Quick */} + + {selectedDepth === "quick" && ( + +
+ +
+ +
+ + + +

+ Key Concept +

+ +
+ +

+ {currentExplanation.keyConcept} +

+ +
+ +
+ )} + + {/* Standard */} + + {selectedDepth === "standard" && ( + +
+ +
+ +
+ + + +

+ Approach +

+ +
+ +

+ {currentExplanation.approach} +

+ +
+ +
+ +
+ + + +

+ Example +

+ +
+ +

+ {currentExplanation.example} +

+ +
+ +
+ )} + + {/* Detailed */} + + {selectedDepth === "detailed" && ( + +
+ +
+ +
+ + + +

+ Step-by-Step Explanation +

+ +
+ +
+ + {currentExplanation.steps.map( + (step, index) => ( + +
+ +
+ {index + 1} +
+ +

+ {step} +

+ +
+ ) + )} + +
+ +
+ +
+ +
+ + + +

+ Example +

+ +
+ +

+ {currentExplanation.example} +

+ +
+ +
+ +

+ Common Mistakes +

+ +
+ + {currentExplanation.mistakes.map( + (mistake, index) => ( + +
+ + + +

+ {mistake} +

+ +
+ ) + )} + +
+ +
+ +
+ )} + + {/* Deep Dive */} + + {selectedDepth === "deep" && ( + +
+ +
+ +
+ + + +

+ Detailed Reasoning +

+ +
+ +
+ + {currentExplanation.steps.map( + (step, index) => ( + +
+ +
+ {index + 1} +
+ +

+ {step} +

+ +
+ ) + )} + +
+ +
+ +
+ +

+ Complexity +

+ +

+ {currentExplanation.complexity} +

+ +
+ +
+ +

+ Alternative Approaches +

+ +

+ {currentExplanation.alternatives} +

+ +
+ +
+ +

+ Edge Cases +

+ +
+ + {currentExplanation.edgeCases.map( + (item, index) => ( + +
+ +
+ + + +

+ {item} +

+ +
+ +
+ ) + )} + +
+ +
+ +
+ +

+ Related Concepts +

+ +
+ + {currentExplanation.related.map( + (item) => ( + + + {item} + + ) + )} + +
+ +
+ +
+ )} + +
+ +
+ )} + + {/* Depth Comparison */} + + {activeTab === "comparison" && ( + +
+ +
+ + + +

+ Explanation Depth Comparison +

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + {[ + [ + "Quick", + "Short answer + key concept", + "Revision", + "30 sec", + ], + [ + "Standard", + "Concept + approach + example", + "Regular practice", + "1–2 min", + ], + [ + "Detailed", + "Step-by-step + mistakes", + "Learning", + "3–5 min", + ], + [ + "Deep Dive", + "Advanced technical analysis", + "Expert preparation", + "5–10 min", + ], + ].map((row, index) => ( + + + + + + + + + + + + + ))} + + + +
+ Mode + + Detail + + Best For + + Time +
+ {row[0]} + + {row[1]} + + {row[2]} + + {row[3]} +
+ +
+ +
+ )} + + {/* Learning Tips */} + + {activeTab === "tips" && ( + +
+ + {[ + { + title: "Use Quick for Revision", + icon: "⚡", + text: + "Choose Quick mode when you already understand a topic and only need a fast reminder before an interview.", + }, + { + title: "Use Standard for Practice", + icon: "🎯", + text: + "Standard mode is a good default for regular interview practice because it balances depth and reading time.", + }, + { + title: "Use Deep Dive Strategically", + icon: "🧠", + text: + "Use Deep Dive when studying difficult concepts, edge cases, system design, or advanced technical topics.", + }, + ].map((tip) => ( + +
+ +
+ {tip.icon} +
+ +

+ {tip.title} +

+ +

+ {tip.text} +

+ +
+ ))} + +
+ )} + + {/* Saved Preference */} + +
+ +
+ +
+ +
+ + + +
+ +
+ +

+ Explanation Preference +

+ +

+ Your preferred explanation depth is saved for future + interview questions. +

+ +
+ +
+ +
+ + + {selectedMode.title} + + + + +
+ +
+ +
+ + {/* AI Personalization */} + +
+ +
+ + + +

+ AI Explanation Principles +

+ +
+ +
+ +
+ +

+ 🎓 +

+ +

+ Match Your Learning Level +

+ +

+ Beginners can use detailed explanations while experienced + developers can focus on concise technical answers. +

+ +
+ +
+ +

+ ⏱️ +

+ +

+ Respect Your Time +

+ +

+ Quick explanations are useful for revision when you need + information without unnecessary detail. +

+ +
+ +
+ +

+ 🧠 +

+ +

+ Go Deeper When Needed +

+ +

+ Deep Dive mode provides edge cases, alternatives, + complexity, and related concepts for advanced preparation. +

+ +
+ +
+ +
+ + {/* Usage Statistics */} + +
+ +
+ + + +

+ Explanation Usage +

+ +
+ +
+ + {[ + { + label: "Quick", + percentage: 22, + icon: "⚡", + }, + { + label: "Standard", + percentage: 46, + icon: "🎯", + }, + { + label: "Detailed", + percentage: 24, + icon: "📚", + }, + { + label: "Deep Dive", + percentage: 8, + icon: "🧠", + }, + ].map((item) => ( + +
+ +
+ {item.icon} +
+ +

+ {item.label} +

+ +

+ {item.percentage}% +

+ +
+ +
+ +
+ +
+ ))} + +
+ +
+ + {/* Final Recommendation */} + +
+ +
+ + + +

+ AI Personalized Recommendation +

+ +
+ +
+ +
+ +

+ Current Preference +

+ +

+ {selectedMode.title} +

+ +

+ Your selected mode provides{" "} + {selectedMode.description.toLowerCase()} +

+ +
+ +
+ +

+ Best Use +

+ +

+ {selectedDepth === "quick" + ? "Fast Revision" + : selectedDepth === "standard" + ? "Daily Practice" + : selectedDepth === "detailed" + ? "Concept Learning" + : "Advanced Preparation"} +

+ +

+ Select this mode when you want the AI response to match + your current preparation goal. +

+ +
+ +
+ +

+ Saved for Future +

+ +

+ Yes +

+ +

+ Future interview explanations can use this preference as + the default explanation depth. +

+ +
+ +
+ +
+ + {/* Final AI Insight */} + +
+ +
+ +
+ +
+ + + +

+ AI Final Insight +

+ +
+ +

+ Your current explanation preference is{" "} + + {selectedMode.title} + + . Use Quick mode when revising familiar concepts, + Standard for normal interview practice, Detailed for + learning new concepts, and Deep Dive when you need + advanced technical analysis. The goal is to provide the + right amount of information without unnecessary detail. +

+ +
+ +
+ +
+ {selectedMode.icon} +
+ +

+ Current Mode +

+ +

+ {selectedMode.title} +

+ +
+ +
+ +
+ +
+
+ ); +}; + +export default AIInterviewQuestionExplanationDepthSelector; \ No newline at end of file