CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

About Expertiza

Expertiza is an open-source web application currently built using Ruby on Rails and led by Dr. Edward Gehringer. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

Project Overview

The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

• Developing a React-based UI for managing questionnaire rubrics.

• Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

• Ensuring seamless API integration with the reimplementation backend repo.

• Managing user sessions and authentication securely.

While adhering to the following best practices:

• Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

• Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

• Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

• Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

• Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

What Needs to be Done?

Questionnaire Management Dashboard

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)

• Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
• Data is fetched dynamically from the backend.

Create/Edit Rubric Page

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:

• Enter a name for the rubric.
• Define min/max item scores.
• Set the review visibility (private/public).
• Add criteria for evaluation.
• Submit the form to create a new rubric for the selected questionnaire type.

Backend Integration

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

Models

Questionnaire

The Questionnaire model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of questionnaire_types, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

Attribute	Description
id	Unique identifier for the questionnaire
name	The name/title of the questionnaire
instructor_id	Foreign key referencing the instructor who created it
private	Boolean indicating if the questionnaire is private
min_question_score	Minimum score that can be given to any question
max_question_score	Maximum score that can be given to any question
questionnaire_type	The type/category of questionnaire (e.g., Survey, Teammate Review)
display_type	Field for specifying how to display the questionnaire
instruction_loc	Field for custom instructions location or reference
created_at	Timestamp of questionnaire creation
updated_at	Timestamp of last update

Item

The Item model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

Attribute	Description
id	Unique identifier for the item
txt	The text of the item/question
weight	The relative importance or weight of the item
seq	The sequence/order of the item in the questionnaire
question_type	Foreign key referencing the type of question
size	Size attribute for text-based answers (e.g., text area size)
alternatives	Possible answer choices (comma-separated for multiple-choice)
break_before	Boolean indicating whether to insert a page break before the item
max_label	Optional label for the maximum scale value
min_label	Optional label for the minimum scale value
created_at	Timestamp of item creation
updated_at	Timestamp of last update
questionnaire_id	Foreign key referencing the associated questionnaire

API Endpoints

To facilitate interaction with the backend, the frontend uses a pre-configured axiosClient, which abstracts the base API URL and port number. This client is defined in the utils/axios_client.ts file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, GET /questionnaires/:id fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses POST /questionnaires and PUT /questionnaires/:id, respectively.

HTTP Method	Endpoint	Description
GET	/questionnaires	Fetches a list of all questionnaires
GET	/questionnaires/:id	Fetches a specific questionnaire by ID
POST	/questionnaires	Creates a new questionnaire
PUT	/questionnaires/:id	Updates an existing questionnaire
DELETE	/questionnaires/:id	Deletes a specific questionnaire
GET	/questions	Retrieves a list of all questions (items)
GET	/questions/:id	Retrieves a specific item, along with its rendered display
POST	/questions	Creates a new item for a questionnaire
PUT	/questions/:id	Updates an existing item

Implementation

QuestionnaireUtils.ts

The QuestionnaireUtils.ts file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

QuestionnaireForm.tsx

The QuestionnaireForm.tsx file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's Field components and the QuestionnaireFormValues interface, ensuring that the data entered by the user adheres to the correct structure.

• Name: A text field for entering the questionnaire name.
• Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
• Private: A checkbox to indicate whether the questionnaire is private.
• Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the QuestionnaireItemsFieldArray component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

QuestionnaireType.tsx

This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The Table component from components/Table/Table is used in adherence with the DRY Principle and the provided design guidelines.

Team

Mentor

• Prathyusha Kodali - pkodali

Members

• Ashwin Muniswamy - akumarm
• Michael Anderson - mwander5
• Martina Viola - mmviola

Reference Links

• Questionnaire Management Dashboard
• Create/Edit Rubric Page
• Project Repo