thegraidenetwork / rubric-creator

A free tool to help teachers create custom rubrics

Rubric Creator by Marco Learning

Create and share scoring rubrics for grading papers. Made for educators by Marco Learning and available for free at rubriccreator.com.

Development

While this product is freely available on the web, you may also want to customize it or submit improvements. The guide below should help you get started.

Prerequisites

• Node 7.0+
• NPM 5.0+

Installation

• Clone this repository: git clone [email protected]:thegraidenetwork/rubric-creator.git
• Install npm dependencies: npm install
• Run the development server: ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

If you want to test the service worker or offline functionality:

• Build the files for production: ng build --prod.
• Install Node HTTP Server globally (should just need to do once): npm install -g http-server.
• Navigate to the dist folder: cd dist.
• And run the server: http-server -c-1 ..

Your app should be running in production mode at http://localhost:8080/.

Running unit tests

Run npm test to execute the unit tests via Karma.

Running end-to-end tests

Run npm run e2e to execute the end-to-end tests via Protractor.

Linting

Run npm run lint to execute the linter via TSLint.

Building

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build and the --aot flag for ahead-of-time compilation (recommended).

Contributing

Contributions are welcome and encouraged to this open source project. Please be sure to submit an issue on Github to solicit discussion before jumping in as someone else might be working on the same thing.

Also be sure to read and adhere to our code of conduct.

Deploying

Once you have built the files, you can copy them into a file hosting service like Azure's Blob Storage or Amazon S3. The following tutorials should help you get started:

• Tutorial for Azure
• Tutorial for S3

Special Thanks

This project was built on the back of many great open source projects. Here are a few of them:

• Angular
• NGRX Store, Effects
• @ngx-pwa/local-storage
• JSONbin.io
• Bootstrap
• iconic icons

License

Copyright 2020, Marco Learning

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

rubric-creator's Issues

Add Google Analytics

Allows us to see which features are being used as well as track new rubrics created by users.

Landing page enhancements

• Add sections:
  • What is a scoring rubric?
  • How does it work?
  • Features of the tool
  • About The Graide Network

First release

Initial goals for the project:

• Users can create rubrics
• Users can view a reasonable set of default rubrics
• Users can download a PDF or print a rubric

Ensure Google can crawl pages

Part of using this tool as a marketing device means we need Google to crawl the main pages and individual rubrics (at least the public ones) we host there.

Sources

• Angular CLI Universal - seems to be the "official" way to handle this.
• Doing this with prerendering

Update to Angular 6

Shouldn't be too hard as the app is small and pretty early in development. Here' an upgrade guide: https://update.angular.io/

Add end-to-end tests for offline functionality

What we're doing

Adding more end-to-end tests to the suite, specifically to test the behavior of the app when used ofline

Why we're doing it

These tests help prevent regression and ensure that our core functionality is working before pushing updates.

How it should be done

Initial test we need:

• Offline user is shown message when trying to create a rubric

There are probably more we could add. Existing end to end tests can be found in this file.

Explanations and examples of different means for testing service workers can be found here: https://medium.com/dev-channel/testing-service-workers-318d7b016b19

Add end-to-end tests

What we're doing

Adding more end-to-end tests to the suite.

Why we're doing it

These tests help prevent regression and ensure that our core functionality is working before pushing updates.

How it should be done

Tests we still need:

• Online user can create a duplicated rubric
• Online user can remove a private rubric from their list
• Online user can create a rubric on mobile
• Offline user is shown message when trying to create a rubric

There are probably more we could add. Existing end to end tests can be found in this file.

Total points reflects the sum of all levels rather than the sum of the highest level for each component

What?

The Total Points shown at the bottom of the Rubric Create/Edit page reflects the sum of all levels in each component. It should reflect the sum of the highest level in each component. This should be fixed.

Why?

Fixing it prevents confusion, and it's an obvious bug.

How?

It looks like the bug is in the getTotalPointsFromRubric function. This should be updated along with the unit test (which is passing).

Fix security alerts

https://github.com/thegraidenetwork/rubric-creator/network/alerts

Mostly this will just require updating our dependencies, but we'll also want to carefully check any breaking changes in packages.

If user navigates to rubric they haven't downloaded while offline, show them a message indicating that they're offline and should reconnect to get this rubric.

What we're doing

Adding a message to offline users telling them to reconnect if they're visiting a specific rubric page, but they're currently offline.

Why we're doing it

Currently users who are offline may try directly navigating to a link to a rubric they haven't downloaded. This will throw errors. We should instead show them the "offline" component.

How it should be done

The tricky part about this is we don't know if the rubric they're requesting exists or not. So, I think the logic should be something like this:

• If user is offline and...
  • they visit a rubric page that is not in their localstorage yet...
    • they see a message that they need to be online
  • they visit a rubric page that is in their localstorage...
    • they see the rubric
• If user is offline and...
  • they visit a rubric page that is not in their localstorage yet...
    • and it doesn't exist in JSON bin...
      • show 404 error
    • and it does exist in JSON bin...
      • save to local storage then show the rubric
  • they visit a rubric page that is in their localstorage...
    • they see the rubric

Make UI more app-like

• Remove breadcrumbs (they're redundant anyway)
• Make the top nav sticky
• Auto-scroll to top of page on page changes

Users can add other metadata to rubrics

Ideas for this include:

• course name
• grade level
• subject

This would help teachers sort through their own rubrics or (in the future) help their public rubrics be more searchable by other teachers.

Upgrade Angular, NGRX, and Typescript

What?

Upgrade Rubric Creator to Angular 7/8, ngrx 7/8, and Typescript 3.1.

Why?

Now that we don't rely on rxjs-compat we should have a clear upgrade path to move Rubric Creator to Angular 7. This is great practice for our production app (we're still running it on Angular 6 and need to upgrade sometime this year), and it will ensure we keep this project up to date.

How?

Upgrading Typescript can be done after Angular, but I don't think you can upgrade Typescript before Angular. Ngrx might need to be done at the same time as Angular.

Resources

• https://alligator.io/angular/angular-7/
• https://ngrx.io/guide/migration/v7

Reach 90% unit test coverage

What?

We currently have 83% unit test coverage in the rubric-creator project. We would like to be at 90% overall test coverage for this project if possible.

Why?

High unit test coverage ensures that other developers can work in the project without breaking functionality. It also demonstrates our commitment to unit testing to future job candidates.

How?

In order to see the code coverage report locally (this will speed up your process), you can generate it by running the tests with code coverage enabled:

ng test --watch=false --code-coverage

The code coverage files will be added to the /coverage/index.html file, which you can open in Chrome to view.

Improving the unit test coverage will just mean drilling down into the classes/methods that are not well-tested and adding more coverage where possible.

Add Intercom to application

Live chat (eg: Intercom) would allow us to engage with users, get feedback, and collect leads for our business.

Users can duplicate and edit existing rubrics

In addition to creating rubrics from scratch, we would like to allow users to duplicate and edit an existing rubric.

Users can make a private rubric public

Allowing users to share rubrics with others in the community would be a great way to let teachers help other teachers. Some concerns:

• Sharing copyrighted rubrics should be prohibited
• We need to make sure teachers don't share any student information in their rubrics.

On mobile, rubric component descriptions overflow the bounding box

EG: https://www.rubriccreator.com/rubrics/5bcf85a7baccb064c0b97866

I think this is a Bootstrap issue, but we'll have to figure out how to get around it or just hide the descriptions on mobile.

Deleting multiple rubrics in a row does not work as expected

What?

Ensure that deleting multiple rubrics in a row works as expected.

Why?

This is a pretty common behavior, and it appears to be broken.

How?

Steps to reproduce

• Create two custom rubrics
• From the rubrics list page, click delete on one. It disappears from the UI as expected
• Click delete on another. It is deleted, but the first one you deleted comes back.

Demo:

While I have not verified this, my guess is there is some sort of bug in the state management system for deleting rubrics which only deletes the most recently deleted one. If you delete one rubric, refresh the page, then delete the second, it works as expected.

End-to-end tests are failing in Codeship

The latest e2e test run failed in Codeship: https://app.codeship.com/projects/95a16760-27a5-0136-f837-6ef2b9ae3ded/builds/5a7b2e1f-9030-47d4-938b-c14892323c7e?step=serial_parallel_ng_e2e

The error:

[14:40:49] E/launcher - session not created: Chrome version must be between 70 and 73
2019-01-08 14:40:49
frontend
  (Driver info: chromedriver=2.45.615279 (12b89733300bd268cff3b78fc76cb8f3a7cc44e5),platform=Linux 4.4.0-1013-aws x86_64)
2019-01-08 14:40:49
frontend
[14:40:49] E/launcher - SessionNotCreatedError: session not created: Chrome version must be between 70 and 73
2019-01-08 14:40:49
frontend
  (Driver info: chromedriver=2.45.615279 (12b89733300bd268cff3b78fc76cb8f3a7cc44e5),platform=Linux 4.4.0-1013-aws x86_64)
2019-01-08 14:40:49
frontend
    at Object.checkLegacyResponse (/angular/node_modules/selenium-webdriver/lib/error.js:505:15)
2019-01-08 14:40:49
frontend
    at parseHttpResponse (/angular/node_modules/selenium-webdriver/lib/http.js:509:13)
2019-01-08 14:40:49
frontend
    at doSend.then.response (/angular/node_modules/selenium-webdriver/lib/http.js:440:13)
2019-01-08 14:40:49
frontend
    at <anonymous>
2019-01-08 14:40:49
frontend
    at process._tickCallback (internal/process/next_tick.js:188:7)
2019-01-08 14:40:49
frontend
From: Task: WebDriver.createSession()
2019-01-08 14:40:49
frontend
    at Function.createSession (/angular/node_modules/selenium-webdriver/lib/webdriver.js:777:24)
2019-01-08 14:40:49
frontend
    at Function.createSession (/angular/node_modules/selenium-webdriver/chrome.js:709:29)
2019-01-08 14:40:49
frontend
    at Direct.getNewDriver (/angular/node_modules/protractor/lib/driverProviders/direct.ts:90:25)
2019-01-08 14:40:49
frontend
    at Runner.createBrowser (/angular/node_modules/protractor/lib/runner.ts:225:39)
2019-01-08 14:40:49
frontend
    at q.then.then (/angular/node_modules/protractor/lib/runner.ts:391:27)
2019-01-08 14:40:49
frontend
    at _fulfilled (/angular/node_modules/q/q.js:834:54)
2019-01-08 14:40:49
frontend
    at self.promiseDispatch.done (/angular/node_modules/q/q.js:863:30)
2019-01-08 14:40:49
frontend
    at Promise.promise.promiseDispatch (/angular/node_modules/q/q.js:796:13)
2019-01-08 14:40:49
frontend
    at /angular/node_modules/q/q.js:556:49
2019-01-08 14:40:49
frontend
    at runSingle (/angular/node_modules/q/q.js:137:13)
2019-01-08 14:40:49
frontend
[14:40:49] E/launcher - Process exited with error code 199

When I ran the e2e tests locally using node, there was no issue, so I suspect it's a problem with the Docker Image we're using.

Remove Intercom

What?

Remove the Intercom Javascript snippet

Why?

We no longer use it.

How?

Search for intercom within the app and remove any references or imports that use that file.

The only noticeable difference should be that the Intercom code should be gone. It's already been disabled from the admin panel.

Implement end-to-end tests in continuous integration

We currently don't run these automatically in Codeship, but should.

Users can Remove rubrics from their list

Currently all rubrics (defaults and those the user accesses or creates) are included in their list. We'd like to allow users to clean that list up by removing rubrics they no longer need.

Allow users to search rubrics

What we're doing

Adding a search feature to the rubric list

Why we're doing it

When users have many rubrics, a search feature can help minimize the time spent looking for the right one.

How it should be done

• All default rubrics should be searchable
• Private rubrics that this user has access to should be searchable
• Fields that should be searchable:
  • Title
  • Description
  • Components/levels? I'm not sure

Users can save rubrics to "favorites"

What we're doing

Allowing users to "favorite" rubrics.

Why we're doing it

Some users may have many rubrics, so it would be great if they could mark the ones they use most often by "favoriting" them.

How it should be done

• Add a ⭐️icon to the rubric list page that users can click
• When clicked, the rubric is saved as a favorite for that user in localstorage
• The rubric list should allow filtering by favorite/not favorite

Component level scores should be able to be modified independently of other component levels

What?

When creating a rubric with multiple components, updating the level score for any components updates all component level scores in the same vertical alignment.

Why?

Rubrics should be able to weight different components at different point levels.

How?

When adding new levels, the new level should be created with the same level scores as the most recently created level. Once levels have been created, the scores should be able to be updated without modifying other level scores.

Make sure users always see our "core" rubrics

Currently if a user comes to the site, the "core" rubrics are saved to local storage. If we update the list of core rubrics in the app, the user won't see the new "core" rubrics unless they clear their localstorage.

This isn't ideal as it means we can't change these core rubrics easily for all users.

Steps to fix

• Update data services to ensure core rubrics are updated (removed, added, updated) if they are updated in app.
• Get "core" rubrics from TGN team

Remove RXJS Compat dependency

What we're doing

Removing this project's dependency on RxJS-Compat. This library is meant as a middle step when migrating from RxJS 5 to 6. When we upgraded to 6 we installed it so we could continue using the old method of chaining observables.

Why we're doing it

• Ensure compatibility with future versions of RxJS
• Decrease the size of the imported packages for this project
• Allow us to upgrade to Angular 7 in the future

How it should be done

• Remove usage in app, replace with RxJS 6 format
• Remove any chained observables (eg: https://github.com/thegraidenetwork/rubric-creator/blob/master/src/app/data-services/backend-data.service.ts#L41)
• Run tslint package (see this tutorial) to ensure compatibility isn't necessary
• Run the tests and build
• Manually test
• Merge PR and ensure it's still working in prod

Make deployment args into environmental variables

Currently the deploy URL and other prod build variables are hard-coded into the prod Dockerfile.

I believe this can be done with Codeship's encrypted build args

Find way to track rubrics created by users

Right now custom rubrics are stored on the user's browser and in JSONbin, but we don't store the ids of those JSON files, so if the user resets their cache, there's no way to recover them. We might also want to know more about the rubrics our users create to see what they're using the platform for.

Improve mobile styling for Create Rubric page

What?

There should be an alternate view for creating rubrics when on mobile. We have a similar "alternative" view for viewing rubrics on mobile, so you may want to look at that.

Why?

Creating a rubric in our current mobile view is cumbersome because you have to horizontally scroll a lot.

How?

Mockup

• This is very rough, but I'm thinking something like this: https://docs.google.com/drawings/d/1gCvVPOaHLv7-N6E7POndVSH0xJIwHSyB1bIpio9-8XU/edit?usp=sharing

User stories

• As a mobile users, I can create a rubric without scrolling horizontally.
• As a desktop user, I can create a rubric in the existing interface

Resources

• Might want to use Bootstrap collapse: https://getbootstrap.com/docs/4.0/components/collapse/

Easy way for people to add "default" rubrics

The default rubrics that all users get access to will need to be updated somewhat frequently. Unfortunately, they are currently hard coded. There needs to be a simple but secure way to add a new default rubric.

Add badges to readme

Badges to add:

• latest tagged release
• codeship build status
• Coveralls code coverage
• License

Import/Export rubrics to app.thegraidenetwork.com

Rubrics created on our primary web application cannot currently be exported to rubriccreator.com and vice-versa.

Exports to tgn would allow teachers to create rubrics and easily import them into the web app if they join as customers. Imports from TGN might allow admins to update default rubrics more easily (see #39).

Release in App Stores

See this

Apparently we could package this up to be released in the Apple and Android app stores if there's desire?

Progressive Web App

In addition to supporting offline access, a PWA would allow users to add the app to their home screen for easy access.

Dynamic page titles

Use Angular's Meta service.

Check/improve screen reader accessibility

I've done some basic checks on this, but would love help with more in-depth coverage making sure this app works well for users with accessibility issues.

Add internationalization support

I'm not sure what would be involved in this, but I imagine teachers in other countries could find this project useful. I would like help learning how to go about internationalizing this app and translating it if there's a need.

Users can create account

Would allow users to:

• Permanently save rubrics
• Share rubrics with specific other user accounts

It would add complexity though as we'd have to implement a new server-side app to handle authentication.

Offline access to app

The goal is to allow users to use as much of the app as possible while offline, and make sure any online-only features degrade gracefully.

• Users can access any downloaded or created rubrics when offline
• Create button is disabled when offline
• New page that shows message saying offline and can't access page
• If user navigates to create page while offline, show them a message indicating that they're offline and should reconnect to access this feature.
• Fix/update skipped tests

Add sharing buttons to single rubric page

We want users to know they can share or save their rubric link for permanent access. Sharing buttons would encourage this, and might be an "MVP" for public rubrics.

Mobile styling for view rubric page

The single rubric page (/rubrics/:uuid) doesn't work well on mobile, especially for rubrics with many levels. I think that this could be turned into an accordion style layout at a certain max width.

Add loading indicators before data is found

What we're doing

Adding a loading indicator before a remote rubric is shown.

Why we're doing it

When loading an individual rubric that a user doesn't have saved to their machine, it shows an empty page but no indication of loading.

How it should be done

While retrieving the rubric from JSONbin, show a loading indicator

Automate test coverage reporting

Would be great to have automated test coverage reporting for unit tests.

Some docs that might be relevant:

• Using Coveralls For Code Coverage with Codeship
• Node Coveralls
• Angular CLI code-coverage

Mobile styling for create rubric

What we're doing

There should be an alternate view for creating rubrics when on mobile.

Why we're doing it

The rubric creation page is not mobile-friendly.

How it should be done

• Change the rubric creation form when a certain screen size is reached.

Update footer copyright date to use a dynamic year

What?

We should use a dynamic component to insert the current year in the footer rather than the hard-coded 2018 we're using now.

Why?

Once done, we'll never have to come back to change the date in Rubric Creator's footer. 🙌

How?

getYear will probably work: https://www.tutorialspoint.com/javascript/date_getyear.htm