feat: Updated sample rubric to v1.2 and added tag images and phrases [P…

…T-188479846]

Also added debug:rubricSummaryTableOverride query parameter to override the tag summary table rubric option.

README.md

@@ -168,6 +168,8 @@ The following query params can be used during development or when debugging issu
 
 - `debug:disableRubric` - when set to `true` (`?debug:disableRubric=true`) the rubric defined for the offering is not loaded.  This is useful when using the baked in demo data which does have a rubric defined to develope/debug the dashboard behavior when a rubric is not defined.
 
+- `debug:rubricSummaryTableOverride` - overrides the rubric summary table option for the loaded rubric.  Possible values are:
+  `none`, `above`, `below`, and `onlySummary`.  Useful for testing the placement of the summary table without having to create multiple rubrics.
 
 ## License
 

cypress/integration/feedback.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 // import fakeData from "../../js/data/report.json";
-import sampleRubric from "../../public/sample-rubric";
+import sampleRubric from "../../public/sample-v1-rubric";
 import Feedback from "../support/elements/portal-report/feedback";
 import * as firebase from "firebase";
 

cypress/integration/portal-dashboard/portal-dashboard-activity-score.spec.js

@@ -22,7 +22,7 @@ context("Portal Dashboard Anonymous Mode",() =>{
       cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score--']").should("exist");
       cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']")
       .should("contain", "Avg. Score:")
-      .should("contain", "0 / 6");
+      .should("contain", "0 / 12");
       cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_summary']")
       .should("contain", "Rubric Summary:")
       .should("contain", "N/A");
@@ -139,25 +139,29 @@ context("Portal Dashboard Anonymous Mode",() =>{
       score.verifyScoreDisplayedInRubricScoreHeader();
       cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']")
       .should("contain", "Avg. Score:")
-      .should("contain", "0 / 6");
+      .should("contain", "0 / 12");
       cy.get('[data-cy=rubric-summary-icon]').should("contain", "N/A");
       cy.get('[class^=rubric-summary-icon--rubricSummaryIconRows--]').should("not.exist");
       score.getActivityFeedbackScore().eq(0).find('[class*=activity-feedback-score--scoreLabel--]').should("contain", "Score");
       score.getActivityFeedbackScore().eq(0).should("contain", "N/A");
       score.selectRubricScore(1, 1, 1);
       score.selectRubricScore(1, 2, 2);
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 2);
       score.selectRubricScore(2, 1, 2);
       score.selectRubricScore(2, 2, 1);
-      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "4.5 / 6");
+      score.selectRubricScore(2, 3, 2);
+      score.selectRubricScore(2, 4, 1);
+      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "9.5 / 12");
       cy.get('[class^=rubric-summary-icon--rubricSummaryIconRows--]').should("exist");
       cy.get('[data-cy=navigation-select]').click();
       cy.get('[data-cy="list-item-progress-dashboard"]').should('be.visible').click();
       cy.get('[data-cy="collapsed-activity-button"]').find('[class^=level-viewer--activityInnerButton--]').eq(0).click();
       cy.get('[data-cy="activity-score"]')
       .should("contain", "Rubric")
       .should("contain", "Score");
-      cy.get('[class*=student-answers--score--]').eq(2).should("contain", "5/6");
-      cy.get('[class*=student-answers--score--]').eq(3).should("contain", "4/6");
+      cy.get('[class*=student-answers--score--]').eq(2).should("contain", "10/12");
+      cy.get('[class*=student-answers--score--]').eq(3).should("contain", "9/12");
       cy.get('[class*=student-answers--score--]').eq(4).should("contain", "N/A");
       cy.get('[data-cy="activity-score"]').eq(0).click();
       cy.get('[data-cy=activity-level-feedback-button]').invoke("attr", "class").should("contain", "active");
@@ -206,20 +210,24 @@ context("Portal Dashboard Anonymous Mode",() =>{
       score.selectRubricScore(1, 1, 1);
       score.getRubricSummaryIcon().find('[class^=rubric-summary-icon--rubricSummaryIconRows--]').should("not.exist");
       score.selectRubricScore(1, 2, 1);
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 1);
       score.getActivityFeedbackScore().eq(0).should("not.contain", "N/A");
       score.getRubricSummaryIcon().find('[class^=rubric-summary-icon--rubricSummaryIconRows--]').should("exist");
-      score.verifyRubricSummaryIcon("Proficient", "height: 18px; width: 100%; background-color: rgb(189, 223, 194);");
+      score.verifyRubricSummaryIcon("Proficient", "height: 12px; width: 100%; background-color: rgb(189, 223, 194);");
       score.selectRubricScore(2, 1, 2);
-      score.verifyRubricSummaryIcon("Proficient", "height: 18px; width: 100%; background-color: rgb(189, 223, 194);");
+      score.verifyRubricSummaryIcon("Proficient", "height: 12px; width: 100%; background-color: rgb(189, 223, 194);");
       score.getRubricSummaryIcon().click();
       score.getRubricSummaryDetailsDialog().should("exist");
       score.getRubricSummaryDetailsDialog().find('[data-cy=rubric-summary-modal-header]').should("contain", "Rubric Summary Details");
       score.verifyRubricSummaryDetailsDialog("Proficient", "100%");
       score.verifyRubricSummaryDetailsDialog("Beginning", "0%");
       score.getRubricSummaryDetailsDialogCloseButton().click();
       score.selectRubricScore(2, 2, 3);
-      score.verifyRubricSummaryIcon("Proficient", "height: 18px; width: 50%; background-color: rgb(189, 223, 194);");
-      score.verifyRubricSummaryIcon("Beginning", "height: 18px; width: 50%; background-color: rgb(49, 102, 57);");
+      score.selectRubricScore(2, 3, 3);
+      score.selectRubricScore(2, 4, 3);
+      score.verifyRubricSummaryIcon("Proficient", "height: 12px; width: 50%; background-color: rgb(189, 223, 194);");
+      score.verifyRubricSummaryIcon("Beginning", "height: 12px; width: 50%; background-color: rgb(49, 102, 57);");
       score.getRubricSummaryIcon().click();
       score.getRubricSummaryDetailsDialog().should("exist");
       score.verifyRubricSummaryDetailsDialog("Proficient", "50%");
@@ -229,6 +237,8 @@ context("Portal Dashboard Anonymous Mode",() =>{
     it('verify score display in rubric summary details',()=>{
       score.selectRubricScore(1, 1, 1);
       score.selectRubricScore(1, 2, 1);
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 1);
       score.getRubricSummaryIcon().click();
       score.getRubricSummaryDetailsDialog().should("exist");
       score.verifyScoreDisplayedInRubricSummaryDetailsDialogHeader();
@@ -320,6 +330,8 @@ context("Portal Dashboard Anonymous Mode",() =>{
       cy.get('[data-cy=item-number]').should("contain", "4");
       score.selectRubricScore(1, 1, 1);
       score.selectRubricScore(1, 2, 1);
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 1);
       cy.get('[data-cy=feedback-badge] circle').eq(0).invoke("attr", "fill").should("contain", "#4EA15A");
       cy.get('[data-cy=item-number]').should("contain", "3");
       cy.get('[data-cy=feedback-badge] circle').eq(1).invoke("attr", "fill").should("contain", "#FFF");
@@ -333,6 +345,8 @@ context("Portal Dashboard Anonymous Mode",() =>{
       cy.get('[data-cy=item-number]').should("contain", "2");
       score.selectRubricScore(3, 1, 1);
       score.selectRubricScore(3, 2, 1);
+      score.selectRubricScore(3, 3, 1);
+      score.selectRubricScore(3, 4, 1);
       cy.get('[data-cy=feedback-badge] circle').eq(2).invoke("attr", "fill").should("contain", "#4EA15A");
       cy.get('[data-cy=item-number]').should("contain", "1");
       cy.get('[data-cy=feedback-badge] circle').eq(3).invoke("attr", "fill").should("contain", "#FFF");
@@ -348,11 +362,15 @@ context("Portal Dashboard Anonymous Mode",() =>{
       cy.get('[data-cy=item-number]').should("contain", "4");
       score.selectRubricScore(1, 1, 1);
       score.selectRubricScore(1, 2, 1);
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 1);
       cy.get('[data-cy=feedback-badge] circle').eq(0).invoke("attr", "fill").should("contain", "#4EA15A");
       cy.get('[data-cy=item-number]').should("contain", "3");
       cy.get('[data-cy=feedback-badge] circle').eq(1).invoke("attr", "fill").should("contain", "#FFF");
       score.selectRubricScore(2, 1, 1);
       score.selectRubricScore(2, 2, 1);
+      score.selectRubricScore(2, 3, 1);
+      score.selectRubricScore(2, 4, 1);
       cy.get('[data-cy=feedback-badge] circle').eq(1).invoke("attr", "fill").should("contain", "#4EA15A");
       cy.get('[data-cy=item-number]').should("contain", "2");
       cy.get('[data-cy=feedback-settings-toggle-button]').click();
@@ -364,6 +382,8 @@ context("Portal Dashboard Anonymous Mode",() =>{
       cy.get('[data-cy=item-number]').should("contain", "4");
       score.selectRubricScore(3, 1, 1);
       score.selectRubricScore(3, 2, 1);
+      score.selectRubricScore(3, 3, 1);
+      score.selectRubricScore(3, 4, 1);
       cy.get('[data-cy=feedback-badge] circle').eq(2).invoke("attr", "fill").should("contain", "#FFF");
       cy.get('[data-cy=item-number]').should("contain", "4");
       cy.get('[data-cy=feedback-textarea]').eq(2).click().type("Feedback");
@@ -376,10 +396,12 @@ context("Portal Dashboard Anonymous Mode",() =>{
     it('verify previous activity info is not displayed in the activity level feedback',()=>{
       score.selectRubricScore(1, 1, 1);
       score.selectRubricScore(1, 2, 1);
-      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "6 / 6");
+      score.selectRubricScore(1, 3, 1);
+      score.selectRubricScore(1, 4, 1);
+      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "12 / 12");
       cy.get('[data-cy=activity-navigator-next-button] [class^=activity-navigator--icon--]').click();
       cy.get('[data-cy=activity-title]').should("contain", "Activity #2");
-      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "0 / 6");
+      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "0 / 12");
       cy.get('[data-cy=feedback-settings-toggle-button]').click();
       score.selectActivityScoreSettingsOption("Manual");
       score.getSaveButton().click();
@@ -392,11 +414,11 @@ context("Portal Dashboard Anonymous Mode",() =>{
       score.getContinueButton().click();
       cy.get('[data-cy=activity-navigator-previous-button] [class^=activity-navigator--icon--]').click();
       cy.get('[data-cy=activity-title]').should("contain", "Activity #1");
-      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "6 / 6");
+      cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "12 / 12");
       cy.get('[data-cy=feedback-settings-toggle-button]').click();
       score.selectActivityScoreSettingsOption("Manual");
       score.getSaveButton().click();
       score.getNewMaxScoreDialog().should("not.exist");
       cy.get("[class^='feedback-legend--feedbackBadgeLegend__rubric_score_avg--']").should("contain", "0 / 10");
     });
-});
+});

cypress/integration/portal-dashboard/portal-dashboard-feedback.spec.js

@@ -118,15 +118,18 @@ context("Portal Dashboard Feedback Panel", () => {
         cy.get('[data-cy=rating-radio-button] div').eq(0)
         .should('have.css', 'background-color')
         .and('eq', 'rgb(78, 161, 90)');
-        // selecting only 1 of the 2 criteria does not trigger feedback complete
+        // selecting only 1 of the 4 criteria does not trigger feedback complete
         cy.get('[data-cy=feedback-badge]').eq(2).find('circle')
           .should('have.attr', 'fill')
           .and('not.include', '#4EA15A');
         cy.get('[data-cy=rating-radio-button]').eq(2).click();
         cy.get('[data-cy=rating-radio-button] div').eq(2)
           .should('have.css', 'background-color')
           .and('eq', 'rgb(78, 161, 90)');
-        // selecting both criteria does trigger feedback complete
+        // select all the other feedback
+        cy.get('[data-cy=rating-radio-button]').eq(5).click();
+        cy.get('[data-cy=rating-radio-button]').eq(8).click();
+        // selecting all criteria does trigger feedback complete
         cy.get('[data-cy=feedback-badge]').eq(2).find('circle')
           .should('have.attr', 'fill')
           .and('include', '#4EA15A');
@@ -216,4 +219,4 @@ context("Portal Dashboard Feedback Panel", () => {
       });
     });
   });
-});
+});

js/components/authoring/rubric-test.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from "react";
 import RubricBox from "../report/rubric-box";
 import FeedbackPanelForStudent from "../report/feedback-panel-for-student";
 import SummaryIndicator from "../report/summary-indicator";
-import sampleRubric from "../../../public/sample-rubric";
+import sampleRubric from "../../../public/sample-v1-rubric";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import RubricForm from "./rubric-form";
 import S3Upload from "./s3-upload";

js/components/portal-dashboard/feedback/rubric-utils.ts

@@ -12,6 +12,7 @@ export interface RubricCriterion {
   ratingDescriptions: Record<string, string>;
   ratingDescriptionsForStudent: Record<string, string>;
   iconUrl: string;
+  iconPhrase: string;
 }
 
 export interface RubricRating {
@@ -35,9 +36,13 @@ export interface RubricV110 {
   ratings: RubricRating[];
 }
 
+export const tagSummaryDisplayValues = ["none", "above", "below", "onlySummary"] as const;
+export type TagSummaryDisplay = typeof tagSummaryDisplayValues[number];
+
 export type Rubric = Omit<RubricV110, "version" | "criteria"> & {
   version: "1.2.0";
   criteriaGroups: RubricCriteriaGroup[];
+  tagSummaryDisplay: TagSummaryDisplay;
 };
 
 // Utility function to convert hex color to HSL

js/core/rubric-migrations.js

@@ -1,4 +1,10 @@
 import semver from "semver";
+import queryString from "query-string";
+
+function getSummaryTableOverride(currentValue) {
+  const rubricSummaryTableOverride = queryString.parse(window.location.search)['debug:rubricSummaryTableOverride'];
+  return rubricSummaryTableOverride ?? currentValue;
+}
 
 function setVersionNumber(rubric, versionString) {
   rubric.version = versionString;
@@ -52,6 +58,14 @@ function createCriteriaGroups(rubric) {
   delete rubric.scoreUsingPoints;
 }
 
+function fixUndefinedIconPhrase(rubric) {
+  rubric.criteriaGroups.forEach(criteriaGroup => {
+    criteriaGroup.criteria.forEach(criteria => {
+      criteria.iconPhrase = criteria.iconPhrase ?? "";
+    });
+  });
+}
+
 const migrations = [
   { version: "1.0.0",
     migrations: [],
@@ -66,6 +80,7 @@ const migrations = [
     version: "1.2.0",
     migrations: [
       createCriteriaGroups,
+      fixUndefinedIconPhrase,
     ],
   },
 ];
@@ -97,5 +112,9 @@ export default function migrate(rubric) {
       runMigration(rubric, m);
     }
   }
+
+  // allow the user to set the summary table option via a query parameter
+  rubric.tagSummaryDisplay = getSummaryTableOverride(rubric.tagSummaryDisplay) ?? "none";
+
   return rubric;
 }