local mini-VLAT

This project is a simple web application designed to collect responses from users through a randomized quiz format. The application consists of several pages, including a consent page, a quiz page, a questionnaire, and a results page.

Project Structure

.
├── public
│   ├── index.html          # Main entry point for the web application
│   ├── consent.html        # Consent page for users
│   ├── quiz.html           # Quiz page that loads questions dynamically
│   ├── questionnaire.html   # Questionnaire for additional participant information
│   └── results.html        # Results page displaying quiz outcomes
├── src
│   ├── js
│   │   ├── app.js          # Main JavaScript file for app initialization and routing
│   │   ├── consent.js      # JavaScript logic for the consent page
│   │   ├── quiz.js         # JavaScript for managing quiz functionality
│   │   ├── questionnaire.js # Logic for the questionnaire
│   │   └── results.js      # Processing and displaying quiz results
│   ├── css
│   │   └── styles.css      # Styles for the web application
│   └── data
│       └── questions.json   # Questions and answers in nested JSON format
├── package.json             # npm configuration file
├── server.js                # Simple backend server for handling requests
└── README.md                # Documentation for the project

Features

• Consent Page: Users can read consent information and proceed to the quiz.
• Randomized Quiz: Users are randomly assigned one of four quiz versions.
• Dynamic Question Loading: Questions are loaded from a JSON file based on the assigned quiz version.
• Questionnaire: A follow-up questionnaire collects additional information from participants.
• Results Display: Users can view their quiz results, including correct and incorrect answers.

Setup Instructions

1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Install the necessary dependencies using npm:

   npm install
   

4. Configure environment variables:

   cp .env.example .env
   # Edit .env file to configure your webhook URL and other settings
   

5. Start the server:

   npm start
   

6. Open your web browser and go to http://localhost:3000 to access the application.

Configuration

The application can be configured using environment variables:

• PORT: Port for the web server (default: 3000)
• WEBHOOK_URL: External webhook URL for data collection (optional)
  • If not set, data will only be stored locally in data/responses.json
  • If set, data will be sent to both the local file and the webhook
• Docker/Traefik variables for production deployment (see .env.example)

Data Collection

• Local Storage: All responses are always saved to data/responses.json
• External Webhook: If WEBHOOK_URL is configured, responses are also sent to the external endpoint