This plugin provides shortcodes for embedding GPA Calculators (current, and goal) on a WordPress site. The code was migrated from USM’s Drupal implementation in the Fall of 2022, and is intended to be used on USM’s public website and replace another GPA Calculator on the UMaine site.

How to Use

The UMS GPA Calculator provides shortcodes to display various GPA calculators to help students understand how their current class grades can affect their overall GPA. The plugin includes several attributes that can be added to the shortcode to modify the display/functionality of the calculators.

Default/Standard Example

The standard shortcode is:

[ums-gpa-calculator type="standard"]

By default, the standard output contains 2 calculators that work together to provide the Projected GPA results. The default output for the GPA Calculator will be 10 class rows @ 100% width (responsive width). Campuses can include text/directions on the page. The Projected GPA results are read-only, and will fill in once a calculation is done. The standard calculator can be used by itself.

[ums-gpa-calculator type="standard" id="idofstandard" class-rows="5"]

Default/Goal Example

The goals shortcode is:

[ums-gpa-calculator type="goals" std-calc-id="idofstandard"]

The Goals calculator does not work by itself, and requires access to the standard calculator. In order to use the Goals calculator, include the std-calc-id attribute. The std-calc-id must match the ID in the standard calculator.

For example, change the Standard calculator to include an ID, and then add that id to the std-calc-id attribute for the Goals calculator:

[ums-gpa-calculator id="idofstandard"]
[ums-gpa-calculator type="goals" std-calc-id="idofstandard"]

The Goals calculator can also have an ID on it to allow for CSS targeting:

[ums-gpa-calculator id="idofstandard"]
[ums-gpa-calculator type="goals" std-calc-id="idofstandard" id="differentid"]

Attributes

The following attributes can be used on the shortcode.

  • class-rows="" (up to 20, use whole numbers)
  • type="" (standard, goals)
  • id="" (whatever, can be used on either type for CSS targeting)
  • std-calc-id="" (required for Goals type, needs to match the ID of the Standard type)

Notes

  • You can probably have multiple calculators on the same page if desired so long as you make sure the IDs are unique. This is an unsupported use case and may be deprecated in future versions. If this behavior is required, please consult with the WebDev team to discuss.
  • Table captions are required for accessibility. Captions can be targeted for CSS styling.
  • Separating the standard calculator from the goals calculator allows text to be added between the calculators for further instructions.

Internal note: this is a copy of the documentation in the code repository accessible to IT staff only. Last copied with plugin version 1.1.1