This repository contains the frontend code for the EXCEED Prolific application, a study aimed at investigating code understanding and error correction using Python code snippets and error messages. The frontend is built with Next.js and React, providing a survey interface for participants to provide their experience with Python, answer MCQs, debug buggy Python code, and evaluate error messages on readability, cognitive load, and authoritativeness.
For visibility, we display some of the user interfaces of our web appp with which participants on Prolific would interact while completing the study.
| Consent Form | Survey Instructions | Multiple-choice Question |
|---|---|---|
![]() |
![]() |
![]() |
| Code Debugging Task | Subjective Evaluation of Error Message | Missing Prolific ID in URL |
|---|---|---|
![]() |
![]() |
![]() |
- TypeScript
- React (with Next.js App Router)
- Next.js for SSR and routing
- Tailwind CSS for styling
- Docker for containerization (optional)
- Clone the repository:
git clone https://github.com/alemoraru/exceed-prolific-frontend.git cd exceed-prolific-frontend - Install dependencies:
npm install
- Run the development server:
npm run dev
- Open your browser: Visit http://localhost:3000 to use the survey.
Note: The frontend expects the backend API to be running and accessible. See the backend README for setup instructions.
| Variable | Description | Example Value |
|---|---|---|
| NEXT_PUBLIC_BACKEND_HOST | Backend API base URL (for REST requests) | http://localhost:8000 |
Set environment variables in a .env.local file in the project root. Make sure to not commit this file to version
control; it is already included in the .gitignore.
- The frontend is designed to work with the EXCEED Prolific backend (EXCEED Prolific Backend).
- Error messages and code snippets are fetched from the backend.
- The survey flow includes:
- Consent form
- Experience with Python self-assessment
- Multiple-choice questions (MCQs)
- Code debugging tasks
- Subjective evaluation of programming error messages (readability, cognitive load, authoritativeness)
- Cheating detection and progress tracking are implemented client-side; however, the backend is responsible for validating the validity of responses and cheating behavior.
- Node.js
- Docker (optional, for containerized deployment)
- Backend API running and accessible (see backend README)
This project was developed as part of the EXCEED MSc Thesis project at Technische Universiteit Delft. As such, contributions of any sort will not be accepted. This repository is provided for replication and educational purposes ONLY. Since it was used as part of the deployment of our study on Prolific, it is NOT intended for further development or contributions.
This project is licensed under the MIT License. See the LICENSE file for details.





