Code Monkey home page Code Monkey logo

frontend-app-gradebook's Introduction

frontend-app-gradebook

Build Status Codecov npm_version npm_downloads license semantic-release

Purpose

Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.

Jump to:

For existing documentation see:

Should I use Gradebook in my course?

What does this offer over the legacy gradebook?

The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.

UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or ‘Homework’).

What does the legacy gradebook offer that this project does not?

This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give quick links to the problems for the instructor to visit. It expects the instructor to be familiar with the problems they are grading and which unit they refer to.

The gradebook is expected to be much more performant for larger numbers of students as well. The Instructor Dashboard link for the legacy gradebook reports that "this feature is available only to courses with a small number of enrolled learners." However, this project comes with no such warning.

Who should not change to this gradebook?

Groups whose instructors need not ever manually override grades do not need this project, but may not be any worse off depending on their needs. Instructors that expect to review grades infrequently enough that not having a direct link to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.

Getting Started

Installation

To install gradebook into your project:

npm i --save @edx/frontend-app-gradebook

Cloning and Startup

  1. Clone your new repo:

git clone https://github.com/openedx/frontend-app-gradebook.git

  1. Install npm dependencies:

cd frontend-app-gradebook && npm install

  1. Start the dev server:

npm start

Running the UI Standalone

To install the project please refer to the edX Developer Stack instructions.

The web application runs on port 1994, so when you go to http://localhost:1994/course-v1:edX+DemoX+Demo_Course you should see the UI (assuming you have such a Demo Course in your devstack). Note that you always have to provide a course id to actually see a gradebook.

If you don't, you can see the log messages for the docker container by executing make gradebook-logs in the devstack directory.

Note that starting the container executes the npm run start script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.

Configuring for local use in edx-platform

Assuming you've got the UI running at http://localhost:1994, you can configure the LMS in edx-platform to point to your local gradebook from the instructor dashboard by putting this setting in lms/env/private.py:

WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'

There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:

  1. Grades > Persistent grades enabled flag. Add this flag if it doesn't exist, check the enabled and enabled for all courses boxes.

  2. Waffle > Switches. Add the grades.assume_zero_grade_if_absent switch and make it active.

  3. Waffle_utils > Waffle flag course overrides. Activate waffle flags for courses where you want to enable Gradebook functionality:

    • Enable Gradebook by adding the grades.writable_gradebook add checking the enabled box.
    • Enable Bulk Grade Management by adding the grades.bulk_management flag and checking the enabled box.

    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.

NOTE: IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, recalculated grade values, verify you've set all flags correctly.

Plugins

This MFE can be customized using Frontend Plugin Framework.

The parts of this MFE that can be customized in that manner are documented here.

Running tests

  1. Assuming that you're operating in the context of the edX devstack, run gradebook-shell from your devstack directory. This will start a bash shell inside your running gradebook container.
  2. Run make test (which executes npm run test). This will run all of the gradebook tests.

Directory Structure

  • config
    • Directory for webpack configurations
  • public
    • Entry point for the single-page application - gradebook has a single index.html file
  • src
    • components
      • Directory for presentational React components
    • containers
      • Directory for container React components
    • data
      • actions
        • Directory for Redux action creators
      • constants
      • reducers
        • Directory for Redux reducers

Authentication with backend API services

See the @edx/frontend-auth repo for information about securing routes in your application that require user authentication.

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Contributing

Contributions are very welcome. Please read How To Contribute_ for details.

.. _How To Contribute: https://openedx.org/r/how-to-contribute

This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel_.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-gradebook/issues

For more information about these options, see the Getting Help_ page.

.. _Slack invitation: https://openedx.org/slack .. _community Slack workspace: https://openedx.slack.com/ .. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6 .. _Getting Help: https://openedx.org/community/connect

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct_.

.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/

Reporting Security Issues

Please do not report security issues in public. Please email [email protected].

frontend-app-gradebook's People

Contributors

abdullahwaheed avatar adamstankiewicz avatar albemarle avatar andytr1 avatar arbrandes avatar bilalqamar95 avatar coryleeio avatar dcoa avatar dependabot[bot] avatar edx-requirements-bot avatar feanil avatar ihor-romaniuk avatar iloveagent57 avatar jansenk avatar jawayria avatar kdmccormick avatar leangseu-edx avatar mashal-m avatar mattcarter avatar michaelroytman avatar muselesscreator avatar nsprenkle avatar omarithawi avatar reillz10 avatar robrap avatar sarina avatar schenedx avatar syed-ali-abbas-zaidi avatar usamasadiq avatar zacharis278 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend-app-gradebook's Issues

Uncaught TypeError when trying to re-edit grade

Description

When editing a grade immediately after a first successful change, an uncaught TypeError is thrown. See the video:

Gradebook.bug.webm

The error is thrown on this line:

https://github.com/openedx/frontend-app-gradebook/blob/9c7c848/src/components/GradesView/EditModal/OverrideTable/index.jsx#L27

With this message:

TypeError: data is undefined
    OverrideTable index.jsx:27
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 6
 
Object { stack: "\nOverrideTable@webpack-internal:///./src/components/GradesView/EditModal/OverrideTable/index.jsx:38:57\ndiv\ndiv\ndiv\nModalDialogBody@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/ModalDialogBody.js:31:12\ndiv\ndiv\nModalContentContainer@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/ModalLayer.js:45:18\ndiv\nRemoveScroll<@webpack-internal:///./node_modules/react-remove-scroll/dist/es2015/UI.js:22:50\nFocusLockUI@webpack-internal:///./node_modules/react-focus-lock/dist/es2015/Lock.js:25:60\nFocusOn<@webpack-internal:///./node_modules/react-focus-on/dist/es2015/UI.js:22:49\nPortal@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/Portal.js:30:20\nModalContextProvider@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/ModalContext.js:15:17\nModalLayer@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/ModalLayer.js:64:18\nModalDialog@webpack-internal:///./node_modules/@openedx/paragon/dist/Modal/ModalDialog.js:44:18\nEditModal@webpack-internal:///./src/components/GradesView/EditModal/index.jsx:45:78\nGradesView@webpack-internal:///./src/components/GradesView/index.jsx:53:7\ndiv\ndiv\ndiv\nWithSidebar@webpack-internal:///./src/components/WithSidebar/index.jsx:43:1\nConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:233:68\nGradebookPage@webpack-internal:///./src/containers/GradebookPage/index.jsx:52:5\nWithLocationComponent@webpack-internal:///./src/utils/hoc.jsx:51:83\nWithNavigateComponent@webpack-internal:///./src/utils/hoc.jsx:37:83\nWithParamsComponent@webpack-internal:///./src/utils/hoc.jsx:26:189\nConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:233:68\nRenderedRoute@webpack-internal:///./node_modules/react-router/dist/index.js:557:7\nRoutes@webpack-internal:///./node_modules/react-router/dist/index.js:1187:7\nmain\ndiv\ndiv\nRouter@webpack-internal:///./node_modules/react-router/dist/index.js:1129:7\nBrowserRouter@webpack-internal:///./node_modules/react-router-dom/dist/index.js:403:7\ndiv\nProvider@webpack-internal:///./node_modules/react-redux/es/components/Provider.js:18:15\nOptionalReduxProvider@webpack-internal:///./node_modules/@edx/frontend-platform/react/OptionalReduxProvider.js:18:15\nErrorBoundary@webpack-internal:///./node_modules/@edx/frontend-platform/react/ErrorBoundary.js:139:20\nIntlProvider@webpack-internal:///./node_modules/@edx/frontend-platform/node_modules/react-intl/lib/src/components/provider.js:97:47\nAppProvider@webpack-internal:///./node_modules/@edx/frontend-platform/react/AppProvider.js:110:15\nApp" }
NewRelicLoggingService.js:36:12
    sendError NewRelicLoggingService.js:36
    logError NewRelicLoggingService.js:168
    logError interface.js:71
    componentDidCatch ErrorBoundary.jsx:26
    React 9
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 6

Adjusted grades should not greater than 100%

Expected behavior

There should be a validation check that the value is not greater than 100%, and it should show the updated value.

Actual behavior

Incorrect value and validation is missing

Steps to reproduce

  1. Go to instructor's tab of a course with staff access
  2. Go to student admin tab
  3. click on view gradebook button
  4. update student's grade to 99 and check if its updated correctly.

Additional information

Screenshot 2024-05-22 at 1 19 02 PM Screenshot 2024-05-22 at 1 19 15 PM Screenshot 2024-05-22 at 1 21 37 PM

Original issue: openedx/wg-build-test-release#357

Include `paragonMessages` in MFE initialization

@edx/paragon was recently upgraded to v20 in this MFE. v20 added a dependency on react-intl due to Paragon now shipping with already-translated English messages for its components.

Per the release notes, Paragon v20 now exposes a paragonMessages array containing the native translations for Paragon components but the paragonMessages are not yet passed to @edx/frontend-platform via the initialize function for this MFE.

Looks like importing and re-exporting paragonMessages in src/i18n/index.js(source) would do the trick 😃

Tasks

Node 20 upgrade

Description

See the parent ticket for the general description and motivation, openedx/public-engineering#231. Make sure to follow its recommendations for each step of the process.

Tasks

Switch to Ansible-free Docker image

In order to advance implementation of both OEP-45: Configuring and Operating Open edX and openedx/public-engineering#51, we would like to switch devstack from using primarily Docker images built with Ansible code from the configuration repository to images built from Dockerfiles in each service's repository. We hope this will also help simplify Tutor by providing better base images to derive from, with fewer workarounds and duplicated code blocks required in Tutor.

A/C

Ensure that the repo's Dockerfile can create a base image which is appropriate for small production installations
Ensure that the repo's Dockerfile also defines an additional image derived from the base which adds dependencies and configuration changes needed for development environments
Check with the Tutor developers during code review to see if any further changes to the Dockerfile would help simplify Tutor
Automate uploads of both images when code changes are merged
Switch devstack to use the new Ansible-free development image, and do some basic testing to ensure it works before merging

Update README configuration filepath

Hello!

On the README, it says:

by putting this settings in lms/env/private.py

Seeing that settings are now in different files, could we update it to something like:

by putting this settings in /edx/etc/lms.yml (or /edx-platform/lms/envs/common.py?)

(This was tested and it works as expected on a devstack)

I'd love to make the PR but maybe the change should include both paths? I prefer asking firsthand.

Anyways, thank you for your work!!

Wrong/Deprecated bulk update history URL being used

While looking into an issue related to grade book MFE, We noticed that one of the URLs was throwing 404. That's the /bulk-update-history. Our assumption is that the bulk update URL might also be wrong.

Steps to reproduce

  • Enable grades.bulk_management Waffle flag in Django Admin (LMS)
  • Run the grade book and monitor the network tab.
  • Notice that It would hit the URL(api/grades/v1/gradebook/course-v1:MITx+Template.Mac+07_25_2023/bulk-updatehistory/) to fetch the bulk update history that ends up in 404 because this URL doesn't seem to exist anywhere. (Here is the code reference from the gradebook MFE).

Possible Solution:

We think that the gradebook MFE should probably use api/bulk_grades/course/course-v1:Arbisoft+ARB_1+1/history/ instead of api/grades/v1/gradebook/course-v1:MITx+Template.Mac+07_25_2023/bulk-updatehistory/.

A11y: spinner issue

"a11y noting the need for exposing the state programmatically, and focus management. And is should announce "ready" to screen reader users when removed. We should make a Paragon component for this. OK to defer a proper fix until that component is created, for this specific case, as it is low-risk UX scenario." ~ Jeff Witt

Considerations

  • Focus management
  • Text alternatives (and labels)
  • 3:1 contrast for the colors
  • messages to visually impaired users
    • off!
    • waiting...
    • done!

This will always be scoped to a GLOBAL SPINNER

Upgrade React JS to v17

This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.

Epic Link

React 17 upgrade

Install in Ironwood.master

Tried to install in ironwood.master. Got some errors:

(edxapp) edxapp@hadoop:~/edx-platform$ npm i --save git+https://[email protected]/edx/frontend-app-gradebook\#open-release/ironwood.master
npm WARN deprecated [email protected]: This project is no longer maintained.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules/sane/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-import@^2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^2.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of selenium-webdriver@^2.44.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of redux@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of @edx/paragon@^3.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of clean-webpack-plugin@^0.1.19 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of copy-webpack-plugin@^4.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of html-webpack-plugin@^3.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of react-dom@^16.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of webpack@^4.19.1 but none is installed. You must install peer dependencies yourself.
npm WARN @edx/[email protected] requires a peer of webpack-merge@^4.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

+ @edx/[email protected]
updated 1 package in 29.124s

Then sets WRITABLE_GRADEBOOK_URL = 'http://localhost:1994' in lms/envs/common.py and restart services, but
sudo lsof -i -P -n | grep 1994 gives empty set and

curl -X GET http://localhost:1994/course-v1:edX+DemoX+Demo_Course
curl: (7) Failed to connect to localhost port 1994: Connection refused

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.