https://github.com/alemoraru/exceed-prolific-frontend
EXCEED Prolific Study - Frontend
https://github.com/alemoraru/exceed-prolific-frontend
code-editor-online error-me html-css nextjs prolific python-code-editor react tailwindcss
Last synced: about 1 month ago
JSON representation
EXCEED Prolific Study - Frontend
- Host: GitHub
- URL: https://github.com/alemoraru/exceed-prolific-frontend
- Owner: alemoraru
- License: mit
- Created: 2025-07-01T19:26:24.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-31T10:44:08.000Z (9 months ago)
- Last Synced: 2025-10-17T10:56:34.410Z (8 months ago)
- Topics: code-editor-online, error-me, html-css, nextjs, prolific, python-code-editor, react, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 1.16 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# EXCEED Prolific Frontend
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.
---
## 🖥️ WebApp UI
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 |
|----------------------------------------------------|----------------------------------------------------------|---------------------------------------------------------------|
|  |  |  |
---
## 🧩 Stack Overview
- **TypeScript**
- **React** (with Next.js App Router)
- **Next.js** for SSR and routing
- **Tailwind CSS** for styling
- **Docker** for containerization (optional)
---
## ⚡ QuickStart
1. **Clone the repository:**
```bash
git clone https://github.com/alemoraru/exceed-prolific-frontend.git
cd exceed-prolific-frontend
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm run dev
```
4. **Open your browser:**
Visit [http://localhost:3000](http://localhost:3000) to use the survey.
> Note: The frontend expects the backend API to be running and accessible. See
> the [backend README](https://github.com/alemoraru/exceed-prolific-backend) for setup instructions.
---
## ⚙️ Environment Variables
| 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`.
---
## 📝 Notes
- The frontend is designed to work with the EXCEED Prolific
backend ([EXCEED Prolific Backend](https://github.com/amoraru/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.
---
## 🛠️ Prerequisites
- [Node.js](https://nodejs.org/en/download/)
- [Docker](https://www.docker.com/get-started) (optional, for containerized deployment)
- Backend API running and accessible (see backend README)
---
## 🤝 Contributing
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.
---
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.