@pie-element/complex-rubric 0.0.2-next.4424

package/lib/index.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _rubric = _interopRequireDefault(require("@pie-element/rubric"));
+
+var _multiTraitRubric = _interopRequireDefault(require("@pie-element/multi-trait-rubric"));
+
+var _rubric2 = require("@pie-lib/rubric");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var RUBRIC_TAG_NAME = 'complex-rubric-simple';
+var MULTI_TRAIT_RUBRIC_TAG_NAME = 'complex-rubric-multi-trait';
+
+var ComplexRubricSimple = /*#__PURE__*/function (_Rubric) {
+  (0, _inherits2["default"])(ComplexRubricSimple, _Rubric);
+
+  var _super = _createSuper(ComplexRubricSimple);
+
+  function ComplexRubricSimple() {
+    (0, _classCallCheck2["default"])(this, ComplexRubricSimple);
+    return _super.apply(this, arguments);
+  }
+
+  return (0, _createClass2["default"])(ComplexRubricSimple);
+}(_rubric["default"]);
+
+var ComplexRubricMultiTrait = /*#__PURE__*/function (_MultiTraitRubric) {
+  (0, _inherits2["default"])(ComplexRubricMultiTrait, _MultiTraitRubric);
+
+  var _super2 = _createSuper(ComplexRubricMultiTrait);
+
+  function ComplexRubricMultiTrait() {
+    (0, _classCallCheck2["default"])(this, ComplexRubricMultiTrait);
+    return _super2.apply(this, arguments);
+  }
+
+  return (0, _createClass2["default"])(ComplexRubricMultiTrait);
+}(_multiTraitRubric["default"]);
+
+var defineRubrics = function defineRubrics() {
+  if (!customElements.get(RUBRIC_TAG_NAME)) {
+    customElements.define(RUBRIC_TAG_NAME, ComplexRubricSimple);
+  }
+
+  if (!customElements.get(MULTI_TRAIT_RUBRIC_TAG_NAME)) {
+    customElements.define(MULTI_TRAIT_RUBRIC_TAG_NAME, ComplexRubricMultiTrait);
+  }
+};
+
+defineRubrics();
+
+var ComplexRubric = /*#__PURE__*/function (_HTMLElement) {
+  (0, _inherits2["default"])(ComplexRubric, _HTMLElement);
+
+  var _super3 = _createSuper(ComplexRubric);
+
+  function ComplexRubric() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ComplexRubric);
+    _this = _super3.call(this);
+    _this._model = {};
+    _this._type = _rubric2.RUBRIC_TYPES.SIMPLE_RUBRIC;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ComplexRubric, [{
+    key: "type",
+    get: function get() {
+      return this._type;
+    },
+    set: function set(t) {
+      this._type = t;
+    }
+  }, {
+    key: "model",
+    set: function set(m) {
+      var _this2 = this;
+
+      this._model = m;
+      var oldType = this._type;
+      this.type = m.rubricType;
+
+      switch (this._type) {
+        case _rubric2.RUBRIC_TYPES.SIMPLE_RUBRIC:
+        default:
+          customElements.whenDefined(RUBRIC_TAG_NAME).then(function () {
+            _this2.setRubricModel(_this2.simpleRubric);
+          });
+          break;
+
+        case _rubric2.RUBRIC_TYPES.MULTI_TRAIT_RUBRIC:
+          customElements.whenDefined(MULTI_TRAIT_RUBRIC_TAG_NAME).then(function () {
+            _this2.setMultiTraitRubricModel(_this2.multiTraitRubric);
+          });
+          break;
+      }
+
+      if (oldType !== this.type) {
+        this._render();
+      }
+    }
+  }, {
+    key: "setRubricModel",
+    value: function setRubricModel(simpleRubric) {
+      if (this._model && this._model.rubrics && this._model.rubrics.simpleRubric) {
+        var mode = this._model.mode;
+        simpleRubric.model = _objectSpread(_objectSpread({}, this._model.rubrics.simpleRubric), {}, {
+          mode: mode
+        });
+      }
+    }
+  }, {
+    key: "setMultiTraitRubricModel",
+    value: function setMultiTraitRubricModel(multiTraitRubric) {
+      if (this._model && this._model.rubrics && this._model.rubrics.multiTraitRubric) {
+        var mode = this._model.mode;
+        multiTraitRubric.model = _objectSpread(_objectSpread({}, this._model.rubrics.multiTraitRubric), {}, {
+          mode: mode
+        });
+      }
+    }
+  }, {
+    key: "multiTraitRubric",
+    get: function get() {
+      return this.querySelector("".concat(MULTI_TRAIT_RUBRIC_TAG_NAME, "#multiTraitRubric"));
+    }
+  }, {
+    key: "simpleRubric",
+    get: function get() {
+      return this.querySelector("".concat(RUBRIC_TAG_NAME, "#simpleRubric"));
+    }
+  }, {
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      this._render();
+    }
+  }, {
+    key: "_render",
+    value: function _render() {
+      this.innerHTML = "\n      <div>\n        <div style=\"".concat(this._type === _rubric2.RUBRIC_TYPES.SIMPLE_RUBRIC ? "visibility: visible" : "visibility: hidden", "\"><").concat(RUBRIC_TAG_NAME, " id=\"simpleRubric\"></").concat(RUBRIC_TAG_NAME, "></div>\n        <div style=\"").concat(this._type !== _rubric2.RUBRIC_TYPES.SIMPLE_RUBRIC ? "visibility: visible" : "visibility: hidden", "\"> <").concat(MULTI_TRAIT_RUBRIC_TAG_NAME, " id=\"multiTraitRubric\"></").concat(MULTI_TRAIT_RUBRIC_TAG_NAME, "></div>\n      </div>\n    ");
+    }
+  }]);
+  return ComplexRubric;
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
+
+var _default = ComplexRubric;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["RUBRIC_TAG_NAME","MULTI_TRAIT_RUBRIC_TAG_NAME","ComplexRubricSimple","Rubric","ComplexRubricMultiTrait","MultiTraitRubric","defineRubrics","customElements","get","define","ComplexRubric","_model","_type","RUBRIC_TYPES","SIMPLE_RUBRIC","t","m","oldType","type","rubricType","whenDefined","then","setRubricModel","simpleRubric","MULTI_TRAIT_RUBRIC","setMultiTraitRubricModel","multiTraitRubric","_render","rubrics","mode","model","querySelector","innerHTML","HTMLElement"],"mappings":"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","sourcesContent":["import Rubric from '@pie-element/rubric';\nimport MultiTraitRubric from '@pie-element/multi-trait-rubric';\nimport { RUBRIC_TYPES } from '@pie-lib/rubric';\n\nconst RUBRIC_TAG_NAME = 'complex-rubric-simple';\nconst MULTI_TRAIT_RUBRIC_TAG_NAME = 'complex-rubric-multi-trait';\n\nclass ComplexRubricSimple extends Rubric {}\nclass ComplexRubricMultiTrait extends MultiTraitRubric {}\n\nconst defineRubrics = () => {\n  if (!customElements.get(RUBRIC_TAG_NAME)) {\n    customElements.define(RUBRIC_TAG_NAME, ComplexRubricSimple);\n  }\n\n  if (!customElements.get(MULTI_TRAIT_RUBRIC_TAG_NAME)) {\n    customElements.define(MULTI_TRAIT_RUBRIC_TAG_NAME, ComplexRubricMultiTrait);\n  }\n};\n\ndefineRubrics();\n\nclass ComplexRubric extends HTMLElement {\n  constructor() {\n    super();\n    this._model = {};\n    this._type = RUBRIC_TYPES.SIMPLE_RUBRIC;\n  }\n\n  set type(t) {\n    this._type = t;\n  }\n\n  get type() {\n    return this._type;\n  }\n\n  set model(m) {\n    this._model = m;\n    const oldType = this._type;\n    this.type = m.rubricType;\n\n    switch (this._type) {\n      case RUBRIC_TYPES.SIMPLE_RUBRIC:\n      default:\n        customElements.whenDefined(RUBRIC_TAG_NAME).then(() => {\n          this.setRubricModel(this.simpleRubric);\n        });\n        break;\n      case RUBRIC_TYPES.MULTI_TRAIT_RUBRIC:\n        customElements.whenDefined(MULTI_TRAIT_RUBRIC_TAG_NAME).then(() =>{\n          this.setMultiTraitRubricModel(this.multiTraitRubric);\n        });\n        break;\n    }\n\n    if (oldType !== this.type) {\n      this._render();\n    }\n  }\n\n  setRubricModel(simpleRubric) {\n    if (this._model && this._model.rubrics && this._model.rubrics.simpleRubric) {\n      const { mode } = this._model;\n\n      simpleRubric.model = {\n        ...this._model.rubrics.simpleRubric,\n        mode\n      };\n    }\n  }\n\n  setMultiTraitRubricModel(multiTraitRubric) {\n    if (this._model && this._model.rubrics && this._model.rubrics.multiTraitRubric) {\n      const { mode } = this._model;\n\n      multiTraitRubric.model = {\n        ...this._model.rubrics.multiTraitRubric,\n        mode\n      };\n    }\n  }\n\n  get multiTraitRubric() {\n    return this.querySelector(`${MULTI_TRAIT_RUBRIC_TAG_NAME}#multiTraitRubric`);\n  }\n\n  get simpleRubric() {\n    return this.querySelector(`${RUBRIC_TAG_NAME}#simpleRubric`);\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    this.innerHTML = `\n      <div>\n        <div style=\"${this._type === RUBRIC_TYPES.SIMPLE_RUBRIC ? `visibility: visible` : `visibility: hidden`}\"><${RUBRIC_TAG_NAME} id=\"simpleRubric\"></${RUBRIC_TAG_NAME}></div>\n        <div style=\"${this._type !== RUBRIC_TYPES.SIMPLE_RUBRIC ? `visibility: visible` : `visibility: hidden`}\"> <${MULTI_TRAIT_RUBRIC_TAG_NAME} id=\"multiTraitRubric\"></${MULTI_TRAIT_RUBRIC_TAG_NAME}></div>\n      </div>\n    `;\n  }\n}\n\nexport default ComplexRubric;\n"],"file":"index.js"}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@pie-element/complex-rubric",
+  "version": "0.0.2-next.4424+ce6d4a4ed",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "description": "Complex Rubric Scoring Interaction",
+  "repository": "pie-framework/pie-elements",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@material-ui/core": "^3.9.2",
+    "@pie-lib/rubric": "^0.4.39",
+    "prop-types": "^15.7.2"
+  },
+  "author": "pie framework developers",
+  "license": "ISC",
+  "gitHead": "ce6d4a4edb0b355d57f7843d29a98bb620230c93",
+  "scripts": {
+    "postpublish": "../../scripts/postpublish"
+  },
+  "exports": {
+    ".": "./src/index.js"
+  }
+}

package/src/__tests__/index.test.js

@@ -0,0 +1,166 @@
+jest.mock('@pie-element/rubric', () => jest.fn());
+jest.mock('@pie-element/multi-trait-rubric', () => jest.fn());
+jest.mock('@pie-lib/rubric', () => ({
+  RUBRIC_TYPES: {
+    SIMPLE_RUBRIC: 'simpleRubric',
+    MULTI_TRAIT_RUBRIC: 'multiTraitRubric'
+  }
+}));
+
+const defaultModel = {
+  rubricType: 'simpleRubric',
+  rubrics: {
+    simpleRubric: {
+      points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
+      sampleAnswers: [null, 'just right', 'not left', null],
+      maxPoints: 4,
+      excludeZero: false
+    },
+    multiTraitRubric: {
+      visibleToStudent: true,
+      halfScoring: false,
+      excludeZero: true,
+      pointLabels: true,
+      description: false,
+      standards: false,
+      scales: [
+        {
+          maxPoints: 4,
+          scorePointsLabels: ['Non-Scorable', 'Developing', 'Progressing', 'Effective', 'Strong'],
+          traitLabel: 'Trait',
+          traits: [
+            {
+              name: 'Ideas',
+              standards: [],
+              description: 'the main message',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'Topic undefined and/or difficult to follow\n' + '\n' + 'Details are unclear',
+                'Topic too broad\n' + '\n' + 'Details are limited',
+                'Writing stays on topic\n' + '\n' + 'Complete details given',
+                'Strong control of topic\n' + '\n' + 'Relevant, accurate, specific details that support topic',
+              ],
+            },
+            {
+              name: 'Organization',
+              standards: [],
+              description: 'the internal structure of the piece',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'Does not have a beginning, middle and/or end\n' + '\n' + 'Does not have a lead and/or conclusion\n' + '\n' + 'Transitions confusing and/or not present\n' + '\n' + 'Not written in logical order\n' + '\n' + 'No sign of paragraphing / incorrect paragraphing',
+                'Weak beginning, middle and end\n' + '\n' + 'Has evidence of a lead and/or conclusion but missing elements\n' + '\n' + 'Transitions are used sometimes\n' + '\n' + 'Some logical order\n' + '\n' + 'Most paragraphing incorrect',
+                'Has an acceptable beginning, middle and end\n' + '\n' + 'Includes a lead and conclusion\n' + '\n' + 'Transitions are used correctly\n' + '\n' + 'Mostly logical order\n' + '\n' + 'Mostly correct paragraphing',
+                'Has an effective beginning, middle and end\n' + '\n' + 'Powerful introduction / lead and conclusion\n' + '\n' + 'Effective transitions\n' + '\n' + 'Logical order / sequencing\n' + '\n' + 'Uses appropriate paragraphing',
+              ],
+            },
+            {
+              name: 'Word Choice',
+              standards: [],
+              description: 'the vocabulary a writer chooses to convey meaning',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'Vocabulary is limited/used incorrectly\n' + '\n' + 'No figurative language; words do not convey meaning',
+                'Generally correct words\n' + '\n' + 'Attempt at figurative language\n' + '\n' + 'and/or words convey general meaning',
+                'Some active verbs and precise nouns\n' + '\n' + 'Effective use of figurative language and/or words that enhance meaning',
+                'Powerful and engaging words\n' + '\n' + 'Artful use of figurative language and/or sensory detail',
+              ],
+            },
+            {
+              name: 'Sentence Fluency',
+              standards: [],
+              description: 'the rhythm and flow of the language',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'No sentences are clear\n' + '\n' + 'No variety in sentence structure\n' + '\n' + 'Frequent run-ons and/or fragments are present',
+                'Some sentences are clear\n' + '\n' + 'Sentence variety used rarely\n' + '\n' + 'Some run-ons and/or fragments are present',
+                'Most sentences are clear\n' + '\n' + 'Some sentence variety is used\n' + '\n' + 'Run-ons and/or fragments are rare',
+                'All Sentences are clear\n' + '\n' + 'Variety of sentence structure is used\n' + '\n' + 'Run-ons and/or fragments are not present',
+              ],
+            },
+            {
+              name: 'Conventions',
+              standards: [],
+              description: 'the mechanical correctness',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'Many distracting errors are present in grammar, punctuation, capitalization and/or spelling',
+                'Errors in grammar, punctuation, capitalization and/or spelling are present and some distract from meaning',
+                'Errors in grammar, punctuation, capitalization and/or spelling are present but don’t distract from meaning',
+                'Few errors in grammar, punctuation,\n' + '\n' + 'capitalization and/or spelling',
+              ],
+            },
+            {
+              name: 'Voice',
+              standards: [],
+              description: 'the personal tone and flavor of the author\'s message',
+              scorePointsDescriptors: [
+                'Student’s response is blank, not in English, not legible, or does not respond to the prompt.',
+                'Not concerned with audience or purpose\n' + '\n' + 'No viewpoint (perspective) used\n' + '\n' + 'Writing is mechanical and lifeless',
+                'Shows beginning awareness of audience/purpose\n' + '\n' + 'Some viewpoint (perspective) used throughout the piece\n' + '\n' + 'Writing is distant, too formal or informal',
+                'Awareness of audience; purpose is clear most of the time\n' + '\n' + 'Uses viewpoint (perspective) throughout most of the paper\n' + '\n' + 'Writing is pleasant, agreeable and satisfying',
+                'Powerful connection with audience; purpose is clearly communicated\n' + '\n' + 'Maintains strong viewpoint (perspective) throughout entire piece\n' + '\n' + 'Writing is expressive, engaging and has lots of energy',
+              ],
+            }
+          ]
+        },
+        {
+          maxPoints: 5,
+          scorePointsLabels: ['Non-Scorable', 'Unsatisfactory', 'Satisfactory'],
+          traitLabel: 'Category',
+          traits: [
+            {
+              name: 'Presentation',
+              standards: [],
+              description: '',
+              scorePointsDescriptors: [
+                'Handwriting is unreadable, or response is blank, not in English, or too brief to evaluate. ',
+                'Handwriting poor\n' + '\n' + 'Overall appearance is distracting to unacceptable',
+                'Handwriting is generally legible\n' + '\n' + 'Overall appearance is acceptable or better',
+              ],
+            },
+          ]
+        }
+      ]
+    }
+  }
+};
+
+describe('complex-rubric', () => {
+  let Def;
+  let el;
+  let complexRubric;
+
+  beforeAll(() => {
+    Def = require('../index').default;
+  });
+
+  beforeEach(() => {
+    el = new Def();
+    el.connectedCallback();
+    complexRubric = {
+      simpleRubric: new HTMLElement(),
+      multiTraitRubric: new HTMLElement(),
+    };
+    el.querySelector = jest.fn((s) => {
+      if (s === '#simpleRubric') {
+        return complexRubric.simpleRubric;
+      } else {
+        return complexRubric.multiTraitRubric;
+      }
+    });
+    el.tagName = 'complex-rubric-element';
+    el.model = defaultModel;
+  });
+
+  describe('model', () => {
+    it('should have set the model', () => {
+      expect(el._model).toEqual(defaultModel);
+    });
+
+    it('sets rubric type', () => {
+      expect(el._type).toEqual('simpleRubric');
+      el.model = { ...el._model, rubricType: 'multiTraitRubric' };
+      expect(el._type).toEqual('multiTraitRubric');
+    });
+  });
+});

package/src/index.js

@@ -0,0 +1,106 @@
+import Rubric from '@pie-element/rubric';
+import MultiTraitRubric from '@pie-element/multi-trait-rubric';
+import { RUBRIC_TYPES } from '@pie-lib/rubric';
+
+const RUBRIC_TAG_NAME = 'complex-rubric-simple';
+const MULTI_TRAIT_RUBRIC_TAG_NAME = 'complex-rubric-multi-trait';
+
+class ComplexRubricSimple extends Rubric {}
+class ComplexRubricMultiTrait extends MultiTraitRubric {}
+
+const defineRubrics = () => {
+  if (!customElements.get(RUBRIC_TAG_NAME)) {
+    customElements.define(RUBRIC_TAG_NAME, ComplexRubricSimple);
+  }
+
+  if (!customElements.get(MULTI_TRAIT_RUBRIC_TAG_NAME)) {
+    customElements.define(MULTI_TRAIT_RUBRIC_TAG_NAME, ComplexRubricMultiTrait);
+  }
+};
+
+defineRubrics();
+
+class ComplexRubric extends HTMLElement {
+  constructor() {
+    super();
+    this._model = {};
+    this._type = RUBRIC_TYPES.SIMPLE_RUBRIC;
+  }
+
+  set type(t) {
+    this._type = t;
+  }
+
+  get type() {
+    return this._type;
+  }
+
+  set model(m) {
+    this._model = m;
+    const oldType = this._type;
+    this.type = m.rubricType;
+
+    switch (this._type) {
+      case RUBRIC_TYPES.SIMPLE_RUBRIC:
+      default:
+        customElements.whenDefined(RUBRIC_TAG_NAME).then(() => {
+          this.setRubricModel(this.simpleRubric);
+        });
+        break;
+      case RUBRIC_TYPES.MULTI_TRAIT_RUBRIC:
+        customElements.whenDefined(MULTI_TRAIT_RUBRIC_TAG_NAME).then(() =>{
+          this.setMultiTraitRubricModel(this.multiTraitRubric);
+        });
+        break;
+    }
+
+    if (oldType !== this.type) {
+      this._render();
+    }
+  }
+
+  setRubricModel(simpleRubric) {
+    if (this._model && this._model.rubrics && this._model.rubrics.simpleRubric) {
+      const { mode } = this._model;
+
+      simpleRubric.model = {
+        ...this._model.rubrics.simpleRubric,
+        mode
+      };
+    }
+  }
+
+  setMultiTraitRubricModel(multiTraitRubric) {
+    if (this._model && this._model.rubrics && this._model.rubrics.multiTraitRubric) {
+      const { mode } = this._model;
+
+      multiTraitRubric.model = {
+        ...this._model.rubrics.multiTraitRubric,
+        mode
+      };
+    }
+  }
+
+  get multiTraitRubric() {
+    return this.querySelector(`${MULTI_TRAIT_RUBRIC_TAG_NAME}#multiTraitRubric`);
+  }
+
+  get simpleRubric() {
+    return this.querySelector(`${RUBRIC_TAG_NAME}#simpleRubric`);
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    this.innerHTML = `
+      <div>
+        <div style="${this._type === RUBRIC_TYPES.SIMPLE_RUBRIC ? `visibility: visible` : `visibility: hidden`}"><${RUBRIC_TAG_NAME} id="simpleRubric"></${RUBRIC_TAG_NAME}></div>
+        <div style="${this._type !== RUBRIC_TYPES.SIMPLE_RUBRIC ? `visibility: visible` : `visibility: hidden`}"> <${MULTI_TRAIT_RUBRIC_TAG_NAME} id="multiTraitRubric"></${MULTI_TRAIT_RUBRIC_TAG_NAME}></div>
+      </div>
+    `;
+  }
+}
+
+export default ComplexRubric;