The Enhanced Workload Estimator is a powerful, embeddable TypeScript + Web Component application built to assist educators, instructional designers, and students in estimating the weekly workload of a course. It accounts for a broad range of academic activities and provides real-time, data-driven insights through an intuitive, customizable interface.

• Modular & Encapsulated: Built as a custom Web Component using Shadow DOM for complete style isolation.
• Vite-Powered: Fast development and optimized production builds using Vite.
• Interactive UI: Includes panels for:
  • Reading assignments
  • Writing tasks
  • Exams
  • Videos / Podcasts
  • Discussion posts
  • Class meetings
  • Other assignments
• Customizable Rates: Adjustable parameters for page density, difficulty, writing genre, drafting, and more.
• Real-Time Feedback: Dynamically updates workload estimates as inputs change.
• Embeddable Component: Easily insert into any HTML file with a single <workload-estimator> tag.

These instructions will get you a copy of the project up and running in your local environment for development or evaluation purposes.

• Node.js (version 18+ recommended)
• npm (comes with Node)

1. Clone the repository:

   git clone https://github.com/OhioUniversity/WorkEstimator.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit:

   http://localhost:5173
   

workload-estimator/
├── index.html # Entry point for the app
├── src/ # TypeScript and UI source files
│ ├── main.ts # Main application entry with component registration
│ ├── calc.ts # Workload calculation logic
│ ├── calc.test.ts # Unit tests for calculation logic
│ ├── style.ts # Logic for custom styling
│ ├── ui.css # CSS styles for the UI
│ ├── ui.html # HTML template for the UI
│ └── vite-env.d.ts # Vite type definitions
├── tsconfig.json # TypeScript config
├── vite.config.ts # Vite config
├── package.json # Dependencies and scripts
├── package-lock.json # Exact versions of installed packages
├── .gitignore # Git ignored files
├── .prettierrc # Prettier formatting rules
├── .prettierignore # Files ignored by Prettier
├── LICENSE # Project license
└── README.md # Project documentation

To create an optimized, production-ready build:

npm run build

Then preview the built app locally:

npm run preview

1. Create a user.css file

   • In the dist folder with the bundled index.html, create a file named user.css.

2. Write your CSS

   • You can target host-level styles or shadow DOM elements.

3. Deploy or serve your project

   • Ensure user.css is present in the same folder of the final index.html when the project is hosted or served locally.

1. Into the html file insert the iframe with the src link to where the component is deployed
   • EX:

     <iframe 
     src="https://ohiouniversity.github.io/WorkEstimator/" 
     width="100%" 
     height="800" 
     style="border: none;" 
     title="Course Workload Estimator" 
     loading="lazy" 
     allowfullscreen 
     ></iframe>

This project is set up to automatically build and publish the Work Estimator library to GitHub Packages whenever a new GitHub Release is published.

1. Bump the version in package.json following Semantic Versioning.
2. Commit and push the change.
3. Create a new GitHub Release using the "Releases" tab, matching the new version tag (e.g., v1.2.0).
4. The GitHub Actions workflow will automatically:
   • Install dependencies
   • Build the project
   • Publish it to GitHub Packages.

To publish your own version of this package to GitHub Packages:

1. Fork the repository and clone it locally.
2. Update the package.json:
   • Change the name field to use your own GitHub username (scope)

"name": "@your-username/workestimator"

3. (Optional) Bump the version number to avoid conflicts.
4. Enable GitHub Packages in your fork:

• Go to Settings → Actions → General
• Under Workflow permissions, ensure that:
  • ✅ "Read and write permissions" is enabled
  • ✅ Or define in the workflow that it has write permissions

  permissions:
     packages: write

5. Push your changes: The GitHub Actions workflow (publish-github) will:

• Run tests and build the package
• Publish to https://npm.pkg.github.com using the GITHUB_TOKEN

To use the Workload Estimator in another project:

1. Include the compiled script from the dist/ folder in your HTML:

   <script type="module" src="./work-estimator.es.js"></script>

2. Add the custom element to your HTML where you want the component to render:

   <workload-estimator></workload-estimator>

• ⚠️ Note: If you're serving the page from a subdirectory (e.g., GitHub Pages), update the script path accordingly:

  <script type="module" src="/REPO_NAME/work-estimator.es.js"></script>

The component will load its own UI and styles via the Shadow DOM.

• Inspired by the Shiny R App.
• Reading and writing rates are based on research by Wake Forest University.

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.