Home Test

Home Test is a frontend Next.js application developed in December 2024 to aid students in preparing for SSC examinations through a self-paced MCQ model test system. The platform focuses on Chemistry for grades 9 and 10, utilizing the Gemini 2.5 Flash API to generate dynamic MCQs. The site features a minimalistic navbar, a home route with motivational messaging, and a Chemistry route for generating and answering MCQs with instant feedback. Built with Next.js, React, Tailwind CSS, and JavaScript, it offers a responsive and engaging user experience, showcasing skills in API integration, dynamic content generation, and interactive UI design.

Home Test

Technology Stack

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Landing Page (/ Route)

The landing page welcomes students with a bold message: 'Prepare Yourself Better for Your Upcoming SSC Examination,' encouraging self-paced exam preparation.

A minimalistic navbar contains a single 'Chemistry' link, guiding users to the MCQ test generation route.

  • Motivational heading for student engagement
  • Minimalistic navbar for focused navigation
  • Responsive design for all devices
  • Clear call-to-action for Chemistry route
Landing Page (/ Route) image 1

Chemistry Route (/chemistry)

The Chemistry route presents a 'Generate' button, allowing students to create a set of MCQs based on Chapter 1 of Chemistry for grades 9 and 10, stored in the file system.

Clicking the 'Generate' button triggers the Gemini 2.5 Flash API to produce 5 MCQs, each with 4 options (one correct, three incorrect).

  • Dynamic MCQ generation via Gemini 2.5 Flash API
  • Chapter-specific content for grades 9 and 10
  • Responsive layout for question display
  • Clear and intuitive 'Generate' button
Chemistry Route (/chemistry) image 1
Chemistry Route (/chemistry) image 2

MCQ Interaction and Feedback

Students can select answers for the 5 displayed MCQs and submit their responses using a 'Submit' button.

Upon submission, correct answers are highlighted with a green background, while incorrect student-selected answers are marked with a red background for immediate feedback.

  • Interactive answer selection for MCQs
  • Color-coded feedback (green for correct, red for incorrect)
  • Instant result display after submission
  • Responsive and clear question interface
MCQ Interaction and Feedback image 1

Restart Functionality

A 'Restart' button allows students to return to the initial generate state, clearing previous answers and enabling a fresh set of MCQs to be generated.

  • Seamless reset to initial MCQ generation state
  • Clear user feedback for restart action
  • Efficient state management for test resets
  • Consistent UI flow for repeated practice
Restart Functionality image 1

Technical Implementation

Built with Next.js for server-side rendering and dynamic routing, ensuring fast performance and SEO-friendly content delivery.

Integrates the Gemini 2.5 Flash API for dynamic MCQ generation, combined with Tailwind CSS for a responsive, utility-first design.

  • Next.js routing for seamless navigation
  • Gemini 2.5 Flash API for real-time question generation
  • React hooks for state and effect management
  • Tailwind CSS for consistent, responsive styling
  • Optimized performance for educational content delivery