Home Test

This is a frontend Next.js application I created in December 2024 for one of my local clients — a Chemistry tutor in Dhaka who teaches SSC-level students door-to-door. He needed an easy way to generate full-syllabus MCQ model tests automatically so his students could practice effectively at home. The tool uses the Gemini 2.5 Flash API to create fresh, high-quality MCQs from the entire Chemistry book (grades 9 & 10). It includes a simple landing page, a dedicated Chemistry route for test generation, interactive answering with instant color-coded feedback, and a restart option. Built with Next.js, React, Tailwind CSS, and JavaScript, it provides a clean, responsive experience that saves the tutor many hours of manual question preparation.

Home Test

Technology Stack

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Landing Page (/ Route)

The landing page was designed with the tutor’s students in mind, displaying an encouraging message: 'Prepare Yourself Better for Your Upcoming SSC Examination'.

It features a very minimal navbar with only one link — 'Chemistry' — to take students directly to the MCQ generation section.

  • Warm, motivational message tailored for SSC students
  • Extremely simple navigation focused on the main feature
  • Responsive layout suitable for mobile use by students
  • Clear direction toward Chemistry test generation
Landing Page (/ Route) image 1

Chemistry Route (/chemistry)

This route contains a prominent 'Generate' button that instructs the Gemini 2.5 Flash API to produce 5 new MCQs based on the SSC Chemistry syllabus (starting with Chapter 1, but conceptually extendable to the full book).

Each generated question includes 4 options — one correct answer and three plausible distractors — matching real exam style.

  • AI-powered MCQ generation using Gemini 2.5 Flash
  • Content aligned with SSC grades 9–10 Chemistry book
  • Clean, student-friendly question presentation
  • Straightforward 'Generate' interface for repeated use
Chemistry Route (/chemistry) image 1
Chemistry Route (/chemistry) image 2

MCQ Interaction and Feedback

Students answer the 5 questions by selecting options, then click 'Submit'.

Correct answers are instantly highlighted in green, while wrong selections are shown in red — giving immediate, visual feedback that helps students learn from mistakes right away.

  • Interactive radio-button style answer selection
  • Clear green/red color feedback for right/wrong answers
  • Helps reinforce learning during home practice
  • Responsive and easy-to-use answer interface
MCQ Interaction and Feedback image 1

Restart Functionality

The 'Restart' button clears all previous answers and returns to the initial state, allowing the student (or tutor) to generate and attempt a completely new set of questions.

  • Easy reset for multiple practice attempts
  • Smooth transition back to generate screen
  • Encourages repeated self-testing at home
  • Maintains consistent user experience
Restart Functionality image 1

Technical Implementation

Developed using Next.js for fast loading and clean routing. Integrated Gemini 2.5 Flash for intelligent question creation. Styled entirely with Tailwind CSS for quick, responsive design. The tutor now regularly uses this tool to assign home tests, significantly reducing his manual question preparation time.

  • Next.js for performant, SEO-friendly frontend
  • Gemini 2.5 Flash API for dynamic, high-quality MCQs
  • React hooks for efficient state and UI updates
  • Tailwind CSS for modern, mobile-first styling
  • Real-world client usage — directly supports SSC students