This project is an interactive quiz website focused on frontend web development topics (HTML, CSS, JavaScript, and Accessibility). It was built to improve my understanding of frontend concepts and explore integrating AI into web applications, particularly learning how to integrate an AI chatbot as a popular modern feature.
The AI "Quiz Helper Bot" is available to assist users with questions related to the quiz content.
Live Demo: https://frontend-quiz-app-main-jet.vercel.app/
- Interactive quizzes on four frontend topics: HTML, CSS, JavaScript, and Accessibility.
- Questions and answers dynamically fetched from a
data.jsonfile. - AI-powered "Quiz Helper Bot" using the Google Gemini API to provide assistance.
- Theme switcher (dark/light mode).
- Score tracking and results display upon quiz completion.
- User-friendly interface.
- Frontend: HTML, CSS, Vanilla JavaScript
- Backend (Serverless Function): Node.js (for Vercel serverless functions, using
22.xas project build environment preference specified inpackage.json). Theapi/gemini-chat.jsfunction handles the AI interaction. - AI: Google Gemini API (via the
@google/generative-ainpm package). - Data Management: Quiz content managed via a local
data.jsonfile. - Deployment: Vercel (configured with
{"version": 2}invercel.json).
- From the homepage, select a quiz topic (HTML, CSS, JavaScript, or Accessibility).
- Answer the multiple-choice questions.
- Submit answers and view your score.
- At any point, click the 'Ask A.I. for help' button to open the Quiz Helper Bot and ask questions related to the quiz content.
The frontend communicates with a serverless API endpoint (typically /api/gemini-chat) to interact with the Gemini AI.
If you intend to deploy this project yourself, you will need to:
- Obtain an API key from Google AI Studio for the Gemini API.
- Set this key as an environment variable named
GEMINI_API_KEYin your Vercel project settings.