diff --git a/frontend/src/pages/AIInterviewAnswerCompletenessScore/AIInterviewAnswerCompletenessScore.jsx b/frontend/src/pages/AIInterviewAnswerCompletenessScore/AIInterviewAnswerCompletenessScore.jsx new file mode 100644 index 00000000..0fb83444 --- /dev/null +++ b/frontend/src/pages/AIInterviewAnswerCompletenessScore/AIInterviewAnswerCompletenessScore.jsx @@ -0,0 +1,1645 @@ +import React, { useMemo, useState } from "react"; +import { + Brain, + Target, + AlertTriangle, + CheckCircle2, + Sparkles, + MessageSquare, + TrendingUp, + BarChart3, + Lightbulb, + RefreshCw, + ArrowRight, + Award, + BookOpen, + CircleAlert, + Layers, + ListChecks, + ShieldCheck, + Search, +} from "lucide-react"; + +const AIInterviewAnswerCompletenessScore = () => { + const [selectedAnswer, setSelectedAnswer] = useState(0); + const [activeTab, setActiveTab] = useState("analysis"); + const [analyzing, setAnalyzing] = useState(false); + + const answers = [ + { + question: "How would you optimize a slow database query?", + type: "Technical", + completeness: 72, + technicalScore: 88, + structureScore: 68, + exampleScore: 55, + tradeoffScore: 62, + edgeCaseScore: 48, + original: + "I would start by checking the query execution plan to identify the bottleneck. Then I would check whether the required columns are indexed and review the joins for unnecessary operations.", + improved: + "I would start by checking the query execution plan to identify the bottleneck. Then I would verify indexes on frequently filtered and joined columns and review joins for unnecessary operations. I would also check whether the query is scanning more rows than necessary and whether pagination or query restructuring could help. Finally, I would benchmark the change before and after applying it and consider the trade-off between additional indexes and write performance.", + expectedPoints: [ + { + title: "Check query execution plan", + covered: true, + explanation: + "The response correctly identifies the execution plan as the first diagnostic step.", + }, + { + title: "Review database indexes", + covered: true, + explanation: + "The answer mentions checking whether required columns are indexed.", + }, + { + title: "Analyze joins", + covered: true, + explanation: + "The response identifies unnecessary joins as a possible bottleneck.", + }, + { + title: "Check scanned rows", + covered: false, + explanation: + "A stronger answer should discuss whether the query scans more rows than necessary.", + }, + { + title: "Benchmark improvements", + covered: false, + explanation: + "The response should explain how the optimization would be measured.", + }, + { + title: "Discuss index trade-offs", + covered: false, + explanation: + "Additional indexes can improve reads but may increase storage and write overhead.", + }, + ], + missingTopics: [ + "Query scanning and filtering efficiency", + "Benchmarking before and after optimization", + "Index storage and write-performance trade-offs", + ], + strengths: [ + "Starts with a practical diagnostic approach.", + "Recognizes indexing as a performance factor.", + "Considers joins as a potential bottleneck.", + ], + }, + { + question: "Explain the difference between an array and a linked list.", + type: "Technical", + completeness: 81, + technicalScore: 91, + structureScore: 82, + exampleScore: 67, + tradeoffScore: 76, + edgeCaseScore: 64, + original: + "An array stores elements in contiguous memory, which allows O(1) indexed access. A linked list stores elements in separate nodes connected by pointers, so accessing an element generally takes O(n) time.", + improved: + "An array stores elements in contiguous memory, allowing O(1) indexed access. A linked list stores elements in separate nodes connected by pointers, so accessing an element generally takes O(n) time. Arrays usually provide better cache locality, while linked lists can make insertion and deletion efficient when the node position is already known. However, linked lists require extra memory for pointers and generally have worse cache performance. The best choice depends on the access and update patterns of the application.", + expectedPoints: [ + { + title: "Memory layout", + covered: true, + explanation: + "The answer correctly explains contiguous versus node-based storage.", + }, + { + title: "Access complexity", + covered: true, + explanation: + "The response includes O(1) array access and O(n) linked-list access.", + }, + { + title: "Insertion and deletion", + covered: true, + explanation: + "The improved answer explains an important operational difference.", + }, + { + title: "Memory overhead", + covered: false, + explanation: + "Linked-list nodes require additional memory for pointers.", + }, + { + title: "Cache locality", + covered: false, + explanation: + "Array memory locality is an important practical performance consideration.", + }, + { + title: "Use-case trade-off", + covered: true, + explanation: + "The answer connects the data structure choice to application requirements.", + }, + ], + missingTopics: [ + "Pointer memory overhead", + "CPU cache locality", + ], + strengths: [ + "Correctly explains the memory-layout difference.", + "Includes important time complexities.", + "Clearly distinguishes the two data structures.", + ], + }, + { + question: "What is the purpose of an API?", + type: "General Technical", + completeness: 64, + technicalScore: 86, + structureScore: 70, + exampleScore: 45, + tradeoffScore: 38, + edgeCaseScore: 30, + original: + "An API provides a defined interface that allows different software components or applications to communicate and access functionality or data.", + improved: + "An API provides a defined interface that allows software components or applications to communicate and access functionality or data. For example, a weather application can call a weather API to retrieve current temperature data without knowing how the provider stores or processes that information internally. APIs can also define authentication, request formats, response formats, and error behavior. The abstraction allows systems to interact without exposing their internal implementation details.", + expectedPoints: [ + { + title: "Definition of an API", + covered: true, + explanation: + "The response provides a technically correct definition.", + }, + { + title: "Communication between systems", + covered: true, + explanation: + "The answer explains that APIs enable software components to communicate.", + }, + { + title: "Access to functionality or data", + covered: true, + explanation: + "The response correctly mentions accessing functionality and data.", + }, + { + title: "Real-world example", + covered: false, + explanation: + "A concrete example would make the explanation easier to understand.", + }, + { + title: "Request and response structure", + covered: false, + explanation: + "A stronger answer can mention how APIs define requests and responses.", + }, + { + title: "Abstraction", + covered: false, + explanation: + "The answer should explain that APIs hide internal implementation details.", + }, + ], + missingTopics: [ + "Concrete API example", + "Request and response structure", + "Abstraction and implementation details", + ], + strengths: [ + "Provides a correct core definition.", + "Understands software communication.", + "Recognizes that APIs expose functionality or data.", + ], + }, + ]; + + const selected = answers[selectedAnswer]; + + const overallScore = useMemo(() => { + return Math.round( + answers.reduce( + (sum, answer) => sum + answer.completeness, + 0 + ) / answers.length + ); + }, []); + + const coveredPoints = selected.expectedPoints.filter( + (point) => point.covered + ).length; + + const missingPoints = selected.expectedPoints.filter( + (point) => !point.covered + ).length; + + const handleAnalyze = () => { + setAnalyzing(true); + + setTimeout(() => { + setAnalyzing(false); + setActiveTab("analysis"); + }, 800); + }; + + const getScoreColor = (score) => { + if (score >= 85) return "text-green-600"; + if (score >= 70) return "text-orange-500"; + return "text-red-600"; + }; + + const getScoreLabel = (score) => { + if (score >= 85) return "Highly Complete"; + if (score >= 70) return "Mostly Complete"; + return "Needs More Detail"; + }; + + return ( +
+
+ + {/* Header */} + +
+ +
+ +
+ +
+ +

+ AI Interview Answer Completeness Score +

+ +

+ Evaluate whether your interview answers cover the important + concepts, examples, trade-offs, and edge cases expected by + interviewers. +

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

+ Answers Analyzed +

+ +

+ 32 +

+ +
+ +
+ + + +

+ Missing Points +

+ +

+ 19 +

+ +
+ +
+ + + +

+ Completeness Score +

+ +

+ {overallScore}% +

+ +
+ +
+ + + +

+ Improvement +

+ +

+ +18% +

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

+ AI Answer Completeness Engine +

+ +
+ +

+ AI compares your response with the important concepts expected + for the question. It identifies covered points, missing + explanations, examples, trade-offs, and edge cases, then + recommends what you can add to make the answer more complete. +

+ +
+ + {/* Answer Selector */} + +
+ +
+ + + +

+ Select Interview Answer +

+ +
+ +
+ + {answers.map((answer, index) => ( + + + + ))} + +
+ +
+ + {/* Selected Question */} + +
+ +

+ Interview Question +

+ +

+ {selected.question} +

+ + + {selected.type} + + +
+ + {/* Analyze Button */} + +
+ + + +
+ + {/* Tabs */} + +
+ + {[ + ["analysis", "Completeness Analysis"], + ["original", "Original Answer"], + ["missing", "Missing Points"], + ["structure", "Improved Structure"], + ].map(([value, label]) => ( + + + + ))} + +
+ + {/* Analysis */} + + {activeTab === "analysis" && ( + +
+ +
+ +
+ + + +

+ Answer Completeness Score +

+ +
+ +
+ +
+ +
+ +

+ {selected.completeness}% +

+ +

+ {getScoreLabel( + selected.completeness + )} +

+ +
+ +
+ +
+ +
+ +
+ +
+ +

+ The completeness score measures how many important aspects + of the question your answer addresses. A technically + correct answer can still receive a lower score if important + supporting details are missing. +

+ +
+ +
+ +
+ + + +

+ Coverage Summary +

+ +
+ +
+ +
+ + + +

+ {coveredPoints} +

+ +

+ Covered Points +

+ +
+ +
+ + + +

+ {missingPoints} +

+ +

+ Missing Points +

+ +
+ +
+ +
+ + {selected.expectedPoints.map( + (point) => ( + +
+ + {point.covered ? ( + + ) : ( + + )} + + + {point.title} + + +
+ + ) + )} + +
+ +
+ +
+ )} + + {/* Score Breakdown */} + + {activeTab === "analysis" && ( + +
+ +
+ + + +

+ Completeness Dimension Breakdown +

+ +
+ +
+ + {[ + { + label: "Technical Coverage", + score: selected.technicalScore, + icon: "💻", + }, + { + label: "Answer Structure", + score: selected.structureScore, + icon: "🧩", + }, + { + label: "Examples", + score: selected.exampleScore, + icon: "💡", + }, + { + label: "Trade-offs", + score: selected.tradeoffScore, + icon: "⚖️", + }, + { + label: "Edge Cases", + score: selected.edgeCaseScore, + icon: "🔍", + }, + ].map((item) => ( + +
+ +
+ {item.icon} +
+ +

+ {item.label} +

+ +

+ {item.score}% +

+ +
+ +
+ +
+ +
+ + ))} + +
+ +
+ )} + + {/* Original */} + + {activeTab === "original" && ( + +
+ +
+ + + +

+ Original Answer +

+ +
+ +
+ +

+ {selected.original} +

+ +
+ +
+ +
+ +

+ Completeness +

+ +

+ {selected.completeness}% +

+ +
+ +
+ +

+ Covered Points +

+ +

+ {coveredPoints} +

+ +
+ +
+ +

+ Missing Points +

+ +

+ {missingPoints} +

+ +
+ +
+ +
+ )} + + {/* Missing Points */} + + {activeTab === "missing" && ( + +
+ +
+ + + +

+ Missing Answer Points +

+ +
+ +
+ + {selected.expectedPoints + .filter((point) => !point.covered) + .map((point, index) => ( + +
+ +
+ +
+ + + {index + 1} + + +
+ +
+ +

+ {point.title} +

+ +

+ {point.explanation} +

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

+ Topics to Add +

+ +
+ +
+ + {selected.missingTopics.map( + (topic) => ( + +
+ +

+ {topic} +

+ + + +
+ + ) + )} + +
+ +
+ +
+ )} + + {/* Improved Structure */} + + {activeTab === "structure" && ( + +
+ +
+ +
+ + + +

+ Improved Answer Structure +

+ +
+ + + AI Suggested + + +
+ +
+ +

+ {selected.improved} +

+ +
+ +
+ +
+ + + +

+ Recommended Answer Structure +

+ +
+ +
+ + {[ + { + number: "1", + title: "Start With the Core Concept", + text: + "Directly answer the main question and establish the key technical idea.", + }, + { + number: "2", + title: "Explain Your Reasoning", + text: + "Describe how you would approach the problem and why you selected that approach.", + }, + { + number: "3", + title: "Add a Practical Example", + text: + "Use a concrete example to demonstrate that you can apply the concept.", + }, + { + number: "4", + title: "Mention Trade-offs", + text: + "Explain important advantages, disadvantages, or design considerations.", + }, + { + number: "5", + title: "Cover Edge Cases", + text: + "Mention unusual conditions or limitations that could affect your solution.", + }, + { + number: "6", + title: "Finish With a Clear Conclusion", + text: + "Summarize the recommended approach and connect it back to the question.", + }, + ].map((item) => ( + +
+ +
+ +
+ + + {item.number} + + +
+ +
+ +

+ {item.title} +

+ +

+ {item.text} +

+ +
+ +
+ +
+ ))} + +
+ +
+ +
+ )} + + {/* Strengths */} + +
+ +
+ + + +

+ What Your Answer Already Covers +

+ +
+ +
+ + {selected.strengths.map( + (strength, index) => ( + +
+ + + +

+ {strength} +

+ +
+ + ) + )} + +
+ +
+ + {/* Completeness Categories */} + +
+ +
+ + + +

+ Answer Coverage Categories +

+ +
+ +
+ + {[ + { + title: "Core Concept", + score: selected.technicalScore, + example: "Correct technical explanation", + icon: "🎯", + }, + { + title: "Examples", + score: selected.exampleScore, + example: "Practical real-world examples", + icon: "💡", + }, + { + title: "Trade-offs", + score: selected.tradeoffScore, + example: "Advantages and limitations", + icon: "⚖️", + }, + { + title: "Edge Cases", + score: selected.edgeCaseScore, + example: "Special cases and limitations", + icon: "🔍", + }, + ].map((item) => ( + +
+ +
+ {item.icon} +
+ +

+ {item.title} +

+ +

+ {item.score}% +

+ +

+ {item.example} +

+ +
+ +
+ +
+ +
+ + ))} + +
+ +
+ + {/* Before vs After */} + +
+ +
+ + + +

+ Completeness Improvement +

+ +
+ +
+ +
+ +
+ + + Original Answer + + + + {selected.completeness}% + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + Improved Answer + + + + {Math.min( + 98, + selected.completeness + 21 + )} + % + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +

+ Potential improvement: + + {Math.min( + 98, + selected.completeness + 21 + ) - selected.completeness} + % +

+ +
+ +
+ +
+ + {/* AI Principles */} + +
+ +
+ + + +

+ AI Completeness Principles +

+ +
+ +
+ +
+ +

+ 🎯 +

+ +

+ Cover the Core +

+ +

+ Start by directly answering the main concept or problem + asked by the interviewer. +

+ +
+ +
+ +

+ 💡 +

+ +

+ Support With Evidence +

+ +

+ Add examples, reasoning, implementation details, or + practical scenarios when they strengthen the explanation. +

+ +
+ +
+ +

+ 🔍 +

+ +

+ Mention Limitations +

+ +

+ Strong answers acknowledge important trade-offs, + limitations, and edge cases without becoming unnecessarily + long. +

+ +
+ +
+ +
+ + {/* Recommended Answer Framework */} + +
+ +
+ + + +

+ Recommended Answer Framework +

+ +
+ +
+ + {[ + ["1", "Concept"], + ["2", "Approach"], + ["3", "Example"], + ["4", "Trade-offs"], + ["5", "Edge Cases"], + ["6", "Conclusion"], + ].map(([number, label]) => ( + +
+ +
+ + + {number} + + +
+ +

+ {label} +

+ +
+ + ))} + +
+ +
+ + {/* AI Recommendation */} + +
+ +
+ + + +

+ AI Personalized Recommendation +

+ +
+ +
+ +
+ +

+ Current Strength +

+ +

+ Core Technical Knowledge +

+ +

+ Your answers generally contain the correct core concept. + The biggest opportunity is adding supporting details. +

+ +
+ +
+ +

+ Biggest Opportunity +

+ +

+ Add Examples and Trade-offs +

+ +

+ Include practical examples and explain important + advantages, disadvantages, or limitations. +

+ +
+ +
+ +

+ Next Practice Goal +

+ +

+ Complete the Explanation +

+ +

+ Practice answering questions using the concept → approach + → example → trade-off → edge-case structure. +

+ +
+ +
+ +
+ + {/* Progress */} + +
+ +
+ + + +

+ Answer Completeness Progress +

+ +
+ +
+ + {[ + { + label: "Week 1", + score: 61, + }, + { + label: "Week 2", + score: 68, + }, + { + label: "Week 3", + score: 75, + }, + { + label: "Current", + score: overallScore, + }, + ].map((item) => ( + +
+ +

+ {item.label} +

+ +

+ {item.score}% +

+ +
+ +
+ +
+ +
+ + ))} + +
+ +
+ + {/* Final Score */} + +
+ +
+ +
+ +

+ Overall Answer Completeness +

+ +

+ Your answers contain the main technical concepts, but + adding examples, trade-offs, and edge cases can make your + responses more complete and interview-ready. +

+ +
+ +
+ +

+ {overallScore}% +

+ +

+ {getScoreLabel(overallScore)} +

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

+ AI Final Insight +

+ +
+ +

+ A complete interview answer is more than a technically + correct statement. Start with the core concept, explain + your reasoning, provide a useful example, mention important + trade-offs, and address relevant edge cases. The goal is + not to make every answer unnecessarily long, but to make + sure the important parts of the question are covered. +

+ +
+ +
+ +
+ 🎯 +
+ +

+ Completeness +

+ +

+ {overallScore}% +

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