From c6556b3d7fa1fe7f35c6e856b72f5968ffb2520b Mon Sep 17 00:00:00 2001 From: jainiksha Date: Mon, 10 Aug 2026 01:22:49 +0530 Subject: [PATCH] feat: add AI interview answer technical accuracy checker --- ...nterviewAnswerTechnicalAccuracyChecker.jsx | 1519 +++++++++++++++++ 1 file changed, 1519 insertions(+) create mode 100644 frontend/src/pages/AIInterviewAnswerTechnicalAccuracyChecker/AIInterviewAnswerTechnicalAccuracyChecker.jsx diff --git a/frontend/src/pages/AIInterviewAnswerTechnicalAccuracyChecker/AIInterviewAnswerTechnicalAccuracyChecker.jsx b/frontend/src/pages/AIInterviewAnswerTechnicalAccuracyChecker/AIInterviewAnswerTechnicalAccuracyChecker.jsx new file mode 100644 index 00000000..b250043f --- /dev/null +++ b/frontend/src/pages/AIInterviewAnswerTechnicalAccuracyChecker/AIInterviewAnswerTechnicalAccuracyChecker.jsx @@ -0,0 +1,1519 @@ +import React, { useMemo, useState } from "react"; +import { + Brain, + ShieldCheck, + AlertTriangle, + CheckCircle2, + Sparkles, + MessageSquare, + TrendingUp, + Target, + BarChart3, + Lightbulb, + RefreshCw, + ArrowRight, + Award, + Code2, + BookOpen, + CircleAlert, + SearchCheck, + XCircle, + Info, +} from "lucide-react"; + +const AIInterviewAnswerTechnicalAccuracyChecker = () => { + const [selectedAnswer, setSelectedAnswer] = useState(0); + const [activeTab, setActiveTab] = useState("analysis"); + const [analyzing, setAnalyzing] = useState(false); + + const answers = [ + { + question: "What is the difference between an array and a linked list?", + type: "Data Structures", + difficulty: "Medium", + original: + "An array stores elements in different locations in memory, while a linked list stores all elements continuously. Arrays are usually slower for accessing elements because they need to search through the structure.", + corrected: + "An array typically stores elements in contiguous memory, which allows O(1) indexed access. A linked list stores elements in separate nodes connected through pointers, so accessing an element by position generally takes O(n) time.", + accuracyScore: 54, + correctedScore: 96, + incorrectCount: 3, + statements: [ + { + statement: + "An array stores elements in different locations in memory.", + status: "incorrect", + correction: + "Arrays typically store elements in contiguous memory locations.", + explanation: + "Contiguous storage is a key property that enables efficient indexed access in arrays.", + }, + { + statement: + "A linked list stores all elements continuously.", + status: "incorrect", + correction: + "Linked-list nodes can be located in different memory locations.", + explanation: + "Nodes are connected using references or pointers and do not need to occupy adjacent memory.", + }, + { + statement: + "Arrays are slower for accessing elements because they need to search through the structure.", + status: "misleading", + correction: + "Arrays generally provide O(1) indexed access.", + explanation: + "An array can directly calculate the location of an indexed element instead of searching sequentially.", + }, + ], + strengths: [ + "Recognizes arrays and linked lists as different data structures.", + "Understands that linked lists use connected nodes.", + "Identifies access performance as an important comparison.", + ], + concepts: [ + "Contiguous memory", + "Pointers and references", + "Random access", + "Time complexity", + ], + }, + { + question: "What is the purpose of an API?", + type: "Web Development", + difficulty: "Easy", + original: + "An API is a database that stores information for different applications. It allows applications to directly access another application's database and modify its internal code.", + corrected: + "An API is a defined interface that allows software components or applications to communicate and access functionality or data through specified operations.", + accuracyScore: 48, + correctedScore: 94, + incorrectCount: 3, + statements: [ + { + statement: + "An API is a database that stores information for different applications.", + status: "incorrect", + correction: + "An API is an interface, not a database.", + explanation: + "An API defines how software components interact; it does not inherently store application data.", + }, + { + statement: + "An API allows applications to directly access another application's database.", + status: "misleading", + correction: + "An API can expose controlled access to functionality or data.", + explanation: + "Applications generally interact through API endpoints rather than directly accessing another application's database.", + }, + { + statement: + "An API can modify another application's internal code.", + status: "incorrect", + correction: + "APIs expose specific functionality without exposing internal implementation.", + explanation: + "A well-designed API provides an abstraction boundary between consumers and the underlying implementation.", + }, + ], + strengths: [ + "Understands that APIs enable communication.", + "Recognizes APIs as a mechanism for interacting with software.", + "Understands that applications can expose functionality.", + ], + concepts: [ + "API interface", + "Endpoints", + "Abstraction", + "Client-server communication", + ], + }, + { + question: "What is the time complexity of binary search?", + type: "Algorithms", + difficulty: "Medium", + original: + "Binary search has O(n) time complexity because it may need to check every element in the array. It works by checking elements one by one until the target is found.", + corrected: + "Binary search has O(log n) time complexity because it repeatedly divides the sorted search space approximately in half. Each comparison eliminates about half of the remaining possibilities.", + accuracyScore: 42, + correctedScore: 98, + incorrectCount: 3, + statements: [ + { + statement: "Binary search has O(n) time complexity.", + status: "incorrect", + correction: "Binary search has O(log n) time complexity.", + explanation: + "Each comparison approximately halves the remaining search space.", + }, + { + statement: + "Binary search may need to check every element in the array.", + status: "incorrect", + correction: + "Binary search eliminates approximately half of the search space after each comparison.", + explanation: + "The algorithm avoids sequentially checking every element.", + }, + { + statement: + "Binary search checks elements one by one until the target is found.", + status: "incorrect", + correction: + "Binary search compares the target with the middle element and narrows the search range.", + explanation: + "Sequential checking describes linear search, not binary search.", + }, + ], + strengths: [ + "Understands that binary search is a searching algorithm.", + "Recognizes that comparisons are used to locate a target.", + "Understands that the algorithm reduces the search space.", + ], + concepts: [ + "Binary search", + "Divide and conquer", + "Sorted arrays", + "Logarithmic complexity", + ], + }, + { + question: "What happens when a JavaScript Promise is rejected?", + type: "JavaScript", + difficulty: "Medium", + original: + "When a Promise is rejected, JavaScript automatically stops the entire program and throws an error that cannot be handled. The Promise will also immediately restart the operation.", + corrected: + "When a Promise is rejected, it transitions to the rejected state. The rejection can be handled with a rejection handler such as .catch() or the try/catch pattern when using async/await.", + accuracyScore: 38, + correctedScore: 97, + incorrectCount: 3, + statements: [ + { + statement: + "A rejected Promise automatically stops the entire JavaScript program.", + status: "incorrect", + correction: + "A rejected Promise does not inherently stop the entire program.", + explanation: + "The rejection represents an asynchronous failure that can be handled by application code.", + }, + { + statement: + "A Promise rejection cannot be handled.", + status: "incorrect", + correction: + "Promise rejections can be handled with .catch() or try/catch with async/await.", + explanation: + "JavaScript provides standard mechanisms for handling asynchronous failures.", + }, + { + statement: + "A rejected Promise immediately restarts the operation.", + status: "incorrect", + correction: + "A rejected Promise does not automatically restart its operation.", + explanation: + "Retry behavior must be explicitly implemented by the application.", + }, + ], + strengths: [ + "Understands that Promises represent asynchronous operations.", + "Recognizes that errors can occur during asynchronous execution.", + "Identifies Promise rejection as an important state.", + ], + concepts: [ + "Promises", + "Rejected state", + ".catch()", + "async/await", + ], + }, + ]; + + const selected = answers[selectedAnswer]; + + const overallScore = useMemo(() => { + return Math.round( + answers.reduce( + (sum, answer) => sum + answer.accuracyScore, + 0 + ) / answers.length + ); + }, []); + + 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 Accurate"; + if (score >= 70) return "Mostly Accurate"; + if (score >= 50) return "Needs Review"; + return "Low Accuracy"; + }; + + const handleAnalyze = () => { + setAnalyzing(true); + + setTimeout(() => { + setAnalyzing(false); + setActiveTab("analysis"); + }, 800); + }; + + return ( +
+
+ + {/* Header */} + +
+ +
+ +
+ +
+ +

+ AI Interview Answer Technical Accuracy Checker +

+ +

+ Detect technically incorrect or misleading statements and + understand how to correct them. +

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

+ Answers Checked +

+ +

+ 38 +

+ +
+ +
+ + + +

+ Accuracy Issues +

+ +

+ 27 +

+ +
+ +
+ + + +

+ Technical Accuracy +

+ +

+ {overallScore}% +

+ +
+ +
+ + + +

+ Corrections Learned +

+ +

+ 31 +

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

+ AI Technical Accuracy Engine +

+ +
+ +

+ AI analyzes interview answers statement by statement. It + identifies incorrect technical claims, detects misleading + explanations, provides the correct concept, and explains + why each statement needs correction. +

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

+ Select Interview Answer +

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

+ Interview Question +

+ +

+ {selected.question} +

+ +
+ + + {selected.type} + + + + {selected.difficulty} + + +
+ +
+ + {/* Analyze Button */} + +
+ + + +
+ + {/* Tabs */} + +
+ + {[ + ["analysis", "Accuracy Analysis"], + ["original", "Original Answer"], + ["corrections", "Technical Corrections"], + ["concepts", "Concept Review"], + ].map(([value, label]) => ( + + + + ))} + +
+ + {/* Analysis */} + + {activeTab === "analysis" && ( + +
+ +
+ +
+ + + +

+ Technical Accuracy Score +

+ +
+ +
+ +
+ +
+ +

+ {selected.accuracyScore}% +

+ +

+ {getScoreLabel(selected.accuracyScore)} +

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

+ The technical accuracy score estimates how correctly + your answer represents the underlying technical concepts. +

+ +
+ +
+ +
+ + + +

+ Detected Issues +

+ +
+ +
+ +

+ {selected.incorrectCount} +

+ +

+ statements require technical review +

+ +
+ +
+ + {selected.statements.map((item, index) => ( + +
+ +
+ + {item.status === "incorrect" ? ( + + ) : ( + + )} + + + {item.status === "incorrect" + ? "Incorrect" + : "Potentially Misleading"} + + +
+ +

+ {item.statement} +

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

+ Original Answer +

+ +
+ +
+ +

+ {selected.original} +

+ +
+ +
+ +
+ +

+ Accuracy +

+ +

+ {selected.accuracyScore}% +

+ +
+ +
+ +

+ Technical Issues +

+ +

+ {selected.incorrectCount} +

+ +
+ +
+ +

+ Status +

+ +

+ Needs Review +

+ +
+ +
+ +
+ )} + + {/* Technical Corrections */} + + {activeTab === "corrections" && ( + +
+ +
+ + + +

+ Technical Corrections +

+ +
+ +
+ + {selected.statements.map((item, index) => ( + +
+ +
+ + {item.status === "incorrect" ? ( + + ) : ( + + )} + +

+ Statement {index + 1} +

+ + + {item.status === "incorrect" + ? "Incorrect" + : "Misleading"} + + +
+ +
+ +
+ +

+ Your Statement +

+ +

+ {item.statement} +

+ +
+ +
+ +

+ Correct Concept +

+ +

+ {item.correction} +

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

+ Why this matters +

+ +

+ {item.explanation} +

+ +
+ +
+ +
+ +
+ ))} + +
+ +
+ )} + + {/* Concepts */} + + {activeTab === "concepts" && ( + +
+ +
+ +
+ + + +

+ Concepts Covered +

+ +
+ +
+ + {selected.concepts.map((concept) => ( + +
+ +
+ + + + + {concept} + + +
+ +
+ + ))} + +
+ +
+ +
+ +
+ + + +

+ Accuracy Categories +

+ +
+ + {[ + { + label: "Core Concept Accuracy", + score: selected.accuracyScore + 4, + }, + { + label: "Terminology Accuracy", + score: selected.accuracyScore + 8, + }, + { + label: "Example Accuracy", + score: selected.accuracyScore - 2, + }, + { + label: "Technical Reasoning", + score: selected.accuracyScore + 5, + }, + ].map((item) => ( + +
+ +
+ + + {item.label} + + + + {Math.min(item.score, 100)}% + + +
+ +
+ +
+ +
+ +
+ ))} + +
+ +
+ )} + + {/* Corrected Answer */} + +
+ +
+ +
+ + + +

+ Technically Corrected Answer +

+ +
+ + + AI Corrected + + +
+ +
+ +

+ {selected.corrected} +

+ +
+ +
+ +
+ +

+ Original Accuracy +

+ +

+ {selected.accuracyScore}% +

+ +
+ +
+ +

+ Corrected Accuracy +

+ +

+ {selected.correctedScore}% +

+ +
+ +
+ +

+ Improvement +

+ +

+ +{selected.correctedScore - selected.accuracyScore}% +

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

+ What You Got Right +

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

+ {strength} +

+ +
+ + ))} + +
+ +
+ + {/* Accuracy Principles */} + +
+ +
+ + + +

+ Technical Accuracy Principles +

+ +
+ +
+ +
+ +

+ 🔍 +

+ +

+ Verify Concepts +

+ +

+ Make sure your explanation matches how the underlying + technology actually works. +

+ +
+ +
+ +

+ 🎯 +

+ +

+ Use Precise Terms +

+ +

+ Avoid technically ambiguous descriptions when explaining + important concepts. +

+ +
+ +
+ +

+ 💡 +

+ +

+ Explain Why +

+ +

+ Support technical claims with correct reasoning instead + of relying only on memorized definitions. +

+ +
+ +
+ +
+ + {/* Common Technical Mistakes */} + +
+ +
+ + + +

+ Common Technical Accuracy Mistakes +

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + {[ + [ + "Confusing O(n) with O(log n)", + "Understand how the search space changes.", + "Complexity determines algorithm scalability.", + ], + [ + "Treating an API as a database", + "An API is an interface for communication.", + "Correct terminology demonstrates technical understanding.", + ], + [ + "Assuming linked-list nodes are contiguous", + "Nodes can exist at separate memory locations.", + "Memory layout affects access behavior.", + ], + [ + "Assuming rejected Promises restart automatically", + "Retry logic must be implemented explicitly.", + "Incorrect assumptions can lead to faulty applications.", + ], + [ + "Using vague technical explanations", + "Use precise concepts and examples.", + "Precision makes interview answers more trustworthy.", + ], + ].map((row, index) => ( + + + + + + + + + + + + ))} + + + +
+ Mistake + + Better Understanding + + Why It Matters +
+ {row[0]} + + {row[1]} + + {row[2]} +
+ +
+ +
+ + {/* Progress Tracking */} + +
+ +
+ + + +

+ Technical Accuracy Progress +

+ +
+ +
+ + {[ + { + label: "Week 1", + score: 58, + }, + { + label: "Week 2", + score: 67, + }, + { + label: "Week 3", + score: 76, + }, + { + label: "Current", + score: 84, + }, + ].map((item) => ( + +
+ +

+ {item.label} +

+ +

+ {item.score}% +

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

+ AI Personalized Recommendation +

+ +
+ +
+ +
+ +

+ Current Strength +

+ +

+ Concept Awareness +

+ +

+ You identify the general topic correctly. Focus on + technical details and precise definitions. +

+ +
+ +
+ +

+ Biggest Opportunity +

+ +

+ Correct Technical Claims +

+ +

+ Review the statements marked incorrect or misleading and + understand the reasoning behind each correction. +

+ +
+ +
+ +

+ Next Practice Goal +

+ +

+ Explain With Precision +

+ +

+ Practice explaining technical concepts using correct + terminology, complexity, examples, and reasoning. +

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

+ Overall Technical Accuracy +

+ +

+ Your technical accuracy improves when you verify the + details behind your answers instead of relying only on + general understanding. +

+ +
+ +
+ +

+ {overallScore}% +

+ +

+ Needs Review +

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

+ AI Final Insight +

+ +
+ +

+ A convincing answer is not necessarily a technically + correct answer. Focus on understanding why a concept + works, use precise technical terminology, and verify + important claims before presenting them. Correcting + misconceptions early helps build stronger technical + knowledge and more reliable interview answers. +

+ +
+ +
+ +
+ 🎯 +
+ +

+ Accuracy +

+ +

+ {overallScore}% +

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