Skip to content

fix: resolve Gemini API authentication and quiz generation #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nasseralkawari merged 1 commit into from
Apr 11, 2026
Merged

fix: resolve Gemini API authentication and quiz generation #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 19 additions & 27 deletions src/pages/FeedbackPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ function FeedbackPage() {
const selectedAnswers = location.state?.selectedAnswers || {};
const currentIndex = location.state?.currentIndex ?? 0;

// NEW: backend result support
const score = location.state?.score ?? 0;
const total = location.state?.total ?? questions.length;
const correctAnswers = location.state?.correctAnswers ?? score;
Expand All @@ -30,7 +29,7 @@ function FeedbackPage() {

const question = questions[currentIndex];
const userAnswer = selectedAnswers[currentIndex];
const correctAnswer = question.correctAnswer;
const correctAnswer = question.answer;
const isCorrect = userAnswer === correctAnswer;

return (
Expand All @@ -57,7 +56,7 @@ function FeedbackPage() {
<div className="progress-track">
<div
className="progress-fill"
style={{ width: `${(score / total) * 100}%` }}
style={{ width: `${total ? (score / total) * 100 : 0}%` }}
></div>
</div>

Expand All @@ -69,9 +68,7 @@ function FeedbackPage() {

<main className="feedback-main">
<section className="feedback-header">
<h1>
{isCorrect ? "Great job!" : "Keep going!"}
</h1>
<h1>{isCorrect ? "Great job!" : "Keep going!"}</h1>
<p>
{isCorrect
? "You're on the right track."
Expand All @@ -84,18 +81,19 @@ function FeedbackPage() {
<h2>{question.question}</h2>

<div className="feedback-options-grid">
{question.options.map((option, index) => {
{Object.entries(question.options).map(([key, value]) => {
let boxClass = "feedback-option-box";

if (option === correctAnswer) boxClass += " correct-box";
if (userAnswer === option && option !== correctAnswer)
if (key === correctAnswer) boxClass += " correct-box";
if (userAnswer === key && key !== correctAnswer) {
boxClass += " wrong-box";
}

return (
<div key={index} className={boxClass}>
{option}
{option === correctAnswer && <span>Correct Answer</span>}
{userAnswer === option && option !== correctAnswer && (
<div key={key} className={boxClass}>
<strong>{key}:</strong> {value}
{key === correctAnswer && <span>Correct Answer</span>}
{userAnswer === key && key !== correctAnswer && (
<span>Your Selection</span>
)}
</div>
Expand All @@ -107,43 +105,37 @@ function FeedbackPage() {
<section className="themed-card explanation-card">
<div className="explanation-top">
<h3>AI Explanation</h3>
<div className="tag-pill small-pill">
LUCID MENTOR ANALYSIS
</div>
<div className="tag-pill small-pill">LUCID MENTOR ANALYSIS</div>
</div>

<p>
{isCorrect
? "Great job. Your answer matches the expected reasoning."
: "Think of this like searching in a sorted structure. Efficient algorithms eliminate large portions quickly, which is why ordering matters."}
: "Think of this like searching through a well-organized structure. The correct answer follows the underlying concept tested in the question, so focus on the principle rather than guessing from similar-looking choices."}
</p>

<div className="explanation-actions">
<button
className="primary-btn"
onClick={() => navigate("/dashboard")}
>
<button className="primary-btn" onClick={() => navigate("/dashboard")}>
Go to Dashboard →
</button>
<button className="secondary-btn">
Ask AI More
</button>
<button className="secondary-btn">Ask AI More</button>
</div>
</section>

<div className="tip-grid">
<div className="tip-card themed-card">
<strong>Pro Tip</strong>
<p>
Efficient searching depends on structure. Ordered data allows
faster algorithms.
Efficient problem solving depends on understanding the structure
behind the question, not just memorizing the answer.
</p>
</div>

<div className="tip-card themed-card">
<strong>Confused?</strong>
<p>
Use visual explanations to better understand how the algorithm works.
Review the correct option carefully and compare it with your
selection to understand the difference.
</p>
</div>
</div>
Expand Down
53 changes: 15 additions & 38 deletions src/pages/QuizPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function QuizPage() {
const navigate = useNavigate();

const questions = location.state?.questions || [];
const topic = location.state?.topic || "Data Structures & Algorithms";
const topic = location.state?.topic || "Quiz";
const quizId = location.state?.quizId || null;

const [currentIndex, setCurrentIndex] = useState(0);
Expand All @@ -31,10 +31,10 @@ function QuizPage() {
const currentQuestion = questions[currentIndex];
const progress = ((currentIndex + 1) / questions.length) * 100;

const handleSelect = (option) => {
const handleSelect = (optionKey) => {
setSelectedAnswers((prev) => ({
...prev,
[currentIndex]: option,
[currentIndex]: optionKey,
}));
};

Expand Down Expand Up @@ -121,15 +121,14 @@ function QuizPage() {
<h1>{topic}</h1>

<div className="quiz-progress-row">
<span>Question {currentIndex + 1} of {questions.length}</span>
<span>
Question {currentIndex + 1} of {questions.length}
</span>
<span>{Math.round(progress)}% Completed</span>
</div>

<div className="progress-track">
<div
className="progress-fill"
style={{ width: `${progress}%` }}
></div>
<div className="progress-fill" style={{ width: `${progress}%` }}></div>
</div>
</section>

Expand All @@ -145,21 +144,19 @@ function QuizPage() {
</div>

<div className="answers-panel">
{currentQuestion.options.map((option, index) => (
{Object.entries(currentQuestion.options).map(([key, value]) => (
<button
key={index}
key={key}
type="button"
className={
selectedAnswers[currentIndex] === option
selectedAnswers[currentIndex] === key
? "answer-option selected-answer"
: "answer-option"
}
onClick={() => handleSelect(option)}
onClick={() => handleSelect(key)}
>
<span className="option-letter">
{String.fromCharCode(65 + index)}
</span>
{option}
<span className="option-letter">{key}</span>
{value}
</button>
))}

Expand All @@ -176,15 +173,12 @@ function QuizPage() {
</button>

{currentIndex < questions.length - 1 ? (
<button
type="button"
className="primary-btn"
onClick={handleNext}
>
<button type="button" className="primary-btn" onClick={handleNext}>
Next
</button>
) : (
<button
type="button"
className="primary-btn submit-btn"
onClick={handleSubmit}
disabled={loading}
Expand All @@ -193,23 +187,6 @@ function QuizPage() {
</button>
)}
</div>

<button
className="text-btn"
onClick={() =>
navigate("/feedback", {
state: {
topic,
questions,
selectedAnswers,
score: 0,
currentIndex,
},
})
}
>
Skip this question
</button>
</div>
</section>
</main>
Expand Down
Loading