Images Response Area - EduVision

[ErnestTorz]

Images Response Area – Detailed Description
This code introduces a highly configurable and reusable "Images Response Area" component for React applications, designed as part of the EduVision project, specifically within the Aero RC subproject. However, due to its modular and general-purpose architecture, it can be easily integrated into other projects or educational platforms requiring image-based user input.

Core Functionality
The Images Response Area enables users to upload, preview, and annotate multiple images as part of their response to a question or task. It is composed of several key parts:

• ImagesWizardComponent: A configuration wizard that allows administrators or content creators to set constraints and options for image input.
• ImagesInputComponent: The main user-facing input area where users can upload images, see previews, and add optional comments to each image.
• Schema Definitions: Strongly typed configuration and answer schemas using Zod, ensuring type safety and robust validation.
• ResponseAreaTub Class: A controller class that manages configuration, answer state, and validation logic, making the component easy to instantiate and use in various contexts.

Configuration Options
The component supports a wide range of configuration options, all of which can be set via the wizard or programmatically:

• Maximum Number of Images (maxImages): Limits how many images a user can upload (default: 3, min: 1, max: 10).
• Maximum File Size (maxSizeMb): Restricts the size of each uploaded image in megabytes (default: 10 MB, min: 1 MB, max: 20 MB).
• Allowed File Types (allowedTypes): Specifies which image MIME types are accepted (default: JPG, JPEG, PNG).
• Resize Maximum Side (resizeMaxSide): Optionally resizes images so that their largest side does not exceed a specified number of pixels (default: 0, meaning no resize, max: 4096px).

These options are exposed both in the configuration wizard UI and in the underlying schema, allowing for both interactive and programmatic setup.

User Input and Experience

• Image Upload: Users can select multiple images at once, subject to the configured constraints.
• Preview and Annotation: Each uploaded image is displayed as a thumbnail preview. Users can add an optional comment to each image.
• Removal: Users can remove any image before submission.
• Validation Feedback: The UI provides immediate feedback if a file is too large, of an unsupported type, or if the maximum number of images is exceeded.

Validation Logic
Validation is enforced at multiple levels:

• Frontend/UI Validation: Prevents users from exceeding limits or uploading unsupported files, with clear error messages.
• Schema Validation: Uses Zod schemas to validate both configuration and answer objects, ensuring that all data passed to the backend or evaluation functions is correct and safe.
• Custom Validation: The customCheck method in the controller class performs additional checks, such as verifying that each image has the required fields, is of an allowed type, and does not exceed the configured size.

Generality and Reusability
Although developed within the EduVision project for the Aero RC module, the Images Response Area is written in a highly generic and modular way:

• Decoupled from Domain Logic: The component does not assume any specific domain or evaluation logic, making it suitable for a wide range of educational, survey, or data collection applications.
• Type-Safe and Extensible: Strong typing and schema validation make it easy to extend or adapt for new requirements.
• Evaluation-Ready: The answer schema is structured to facilitate automated or manual evaluation, supporting integration with various grading or assessment systems.

Project and Context

• Project: EduVision
• Module: Aero RC (but not limited to this use case)
• Intended Use: Any scenario where image-based responses are needed, such as assignments, quizzes, or surveys.

Summary
This Images Response Area provides a robust, user-friendly, and highly configurable solution for collecting image-based responses. Its design emphasizes reusability, strong validation, and ease of integration, making it a valuable addition not only to EduVision but to any project requiring similar functionality.

Note
To use Image Input in sandbox please change the import path in sandbox-component.tsx from './types/Sandbox' to './types/Images'

[timothee-alby]

Thank you, great new feature!

I've left a couple of suggestions for your consideration.

[timothee-alby]

Is this code ever running? I don't see that called anywhere?

I'm curious since this repository doesn't have customCheck defined in ResponseAreaTub.
As it happens, we did recently implement a customCheck function in a more recent version of ResponseAreaTub, and that version is currently running on lambdafeedback.com.
However, our version takes in submissionInput as an arguments and validate that.

Regardless, wince you're manually checking the validity of the answer, I believe this may be redundant as the declared Zod schema takes care of that, doesn't it?

[timothee-alby]

I'd suggest defining a custom type here so you can set the actual type of answer and config, which would let you avoid using any. See for example the MultipleChoice component

[ErnestTorz]

Hey!

• Removed any – I’ve removed the any type from the code and replaced it with more specific types,. Hopefully, everything is now more type-safe.

• customCheck function – Regarding the customCheck function, I added it based on Marcus Messer’s suggestion. I’m not 100% sure I understood it correctly, but without this function, I get an error in the sandbox saying "t.CustomCheck is not a function". So, for now, I’ve kept it in the code. Let me know if anything needs to be adjusted!

Please add the "Images Response Area" component to the page. It’s a new feature that allows users to upload and comment on images, as part of the EduVision project.

If you need any changes or further information, feel free to let me know!

[timothee-alby]

Thank you @ErnestTorz , all looking good 💯
We'll have to be looking at this internally and figure out the next step; @m-messer will keep you updated (but that won't be before the holidays break I'm afraid)
Happy holidays to you 🎄