Skip to content

Commit d98970b

Browse files
dougmartindougmartin
authored
Merge pull request #1194 from concord-consortium/rubric-tag-summary
Rubric tag summary
2 parents 397d27a + 5548d89 commit d98970b

File tree

10 files changed

+187
-34
lines changed

10 files changed

+187
-34
lines changed

‎app/assets/javascripts/lara-typescript.js

Lines changed: 104 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -139069,7 +139069,8 @@ var RubricCriteriaGroup = function (_a) {
139069139069
nonApplicableRatings: [],
139070139070
ratingDescriptions: {},
139071139071
ratingDescriptionsForStudent: {},
139072-
iconUrl: ""
139072+
iconUrl: "",
139073+
iconPhrase: ""
139073139074
});
139074139075
});
139075139076
};
@@ -139314,6 +139315,13 @@ var RubricCriterion = function (_a) {
139314139315
});
139315139316
};
139316139317

139318+
var handleIconPhraseChange = function (e) {
139319+
var phrase = e.target.value;
139320+
setRubric(function (draft) {
139321+
draft.criteriaGroups[groupIndex].criteria[index].iconPhrase = phrase;
139322+
});
139323+
};
139324+
139317139325
var handleCriteriaMarkdownUpdate = function (key) {
139318139326
return function (value) {
139319139327
setRubric(function (draft) {
@@ -139356,18 +139364,29 @@ var RubricCriterion = function (_a) {
139356139364
className: "rubric-criterion-body"
139357139365
}, React.createElement("div", {
139358139366
className: "rubric-criterion-body-row"
139359-
}, React.createElement("div", {
139367+
}, React.createElement("div", null, React.createElement("div", {
139360139368
className: "rubric-criterion-body-row-label",
139361139369
style: {
139362139370
flex: "initial"
139363139371
}
139364139372
}, React.createElement("label", {
139365139373
htmlFor: "iconUrl"
139366-
}, "Icon URL:"), React.createElement("input", {
139374+
}, "Tag Icon URL:"), React.createElement("input", {
139367139375
type: "text",
139368139376
value: criterion.iconUrl,
139369139377
onChange: handleIconUrlChange
139370-
}))), React.createElement("div", {
139378+
}))), React.createElement("div", null, React.createElement("div", {
139379+
className: "rubric-criterion-body-row-label",
139380+
style: {
139381+
flex: "initial"
139382+
}
139383+
}, React.createElement("label", {
139384+
htmlFor: "iconPhrase"
139385+
}, "Tag Icon Phrase:"), React.createElement("input", {
139386+
type: "text",
139387+
value: criterion.iconPhrase,
139388+
onChange: handleIconPhraseChange
139389+
})))), React.createElement("div", {
139371139390
className: "rubric-criterion-body-row"
139372139391
}, React.createElement("div", null, React.createElement("label", {
139373139392
htmlFor: "description"
@@ -139617,9 +139636,11 @@ exports.RubricGeneralOptions = void 0;
139617139636

139618139637
var React = __webpack_require__(/*! react */ "react");
139619139638

139639+
var classnames_1 = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
139640+
139620139641
var use_rubric_1 = __webpack_require__(/*! ./use-rubric */ "./src/rubric-authoring/use-rubric.ts");
139621139642

139622-
var classnames_1 = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
139643+
var types_1 = __webpack_require__(/*! ./types */ "./src/rubric-authoring/types.ts");
139623139644

139624139645
__webpack_require__(/*! ./rubric-general-options.scss */ "./src/rubric-authoring/rubric-general-options.scss");
139625139646

@@ -139646,6 +139667,13 @@ var RubricGeneralOptions = function () {
139646139667
};
139647139668
};
139648139669

139670+
var handleUpdateTagSummaryDisplay = function (e) {
139671+
var tagSummaryDisplay = e.target.value;
139672+
setRubric(function (draft) {
139673+
draft.tagSummaryDisplay = tagSummaryDisplay;
139674+
});
139675+
};
139676+
139649139677
return React.createElement("div", {
139650139678
className: "general-options"
139651139679
}, React.createElement("table", null, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, React.createElement("label", {
@@ -139669,7 +139697,18 @@ var RubricGeneralOptions = function () {
139669139697
type: "text",
139670139698
value: rubric.feedbackLabelForStudent,
139671139699
onChange: handleUpdateString("feedbackLabelForStudent")
139672-
}))), React.createElement("tr", null, React.createElement("td", null), React.createElement("td", {
139700+
}))), React.createElement("tr", null, React.createElement("td", null, React.createElement("label", {
139701+
htmlFor: "tagSummaryDisplay"
139702+
}, "Tag Summary Display:")), React.createElement("td", null, React.createElement("select", {
139703+
name: "tagSummaryDisplay",
139704+
value: rubric.tagSummaryDisplay,
139705+
onChange: handleUpdateTagSummaryDisplay
139706+
}, types_1.tagSummaryDisplayValues.map(function (value) {
139707+
return React.createElement("option", {
139708+
value: value,
139709+
key: value
139710+
}, types_1.tagSummaryDisplayLabels[value]);
139711+
})))), React.createElement("tr", null, React.createElement("td", null), React.createElement("td", {
139673139712
className: "rubric-checkbox"
139674139713
}, React.createElement("input", {
139675139714
type: "checkbox",
@@ -140306,7 +140345,8 @@ var RubricStudentPreview = function (_a) {
140306140345
rowSpan: criteriaGroup.criteria.length,
140307140346
className: "groupLabel"
140308140347
}, label), React.createElement("td", null, React.createElement("div", null, criteria.iconUrl && React.createElement("img", {
140309-
src: criteria.iconUrl
140348+
src: criteria.iconUrl,
140349+
title: criteria.iconPhrase
140310140350
}), React.createElement(markdown_to_jsx_1.default, null, description))), React.createElement("td", null, rubric.showRatingDescriptions ? ratingLabel + " \u2013 " + ratingDescription : ratingLabel));
140311140351
});
140312140352
}))));
@@ -140505,7 +140545,8 @@ var RubricTeacherPreview = function (_a) {
140505140545
}, React.createElement("div", {
140506140546
className: "rubricDescription"
140507140547
}, crit.iconUrl && React.createElement("img", {
140508-
src: crit.iconUrl
140548+
src: crit.iconUrl,
140549+
title: crit.iconPhrase
140509140550
}), React.createElement(markdown_to_jsx_1.default, null, crit.description)), renderRatings(crit));
140510140551
})));
140511140552
})));
@@ -140560,6 +140601,30 @@ exports.Trash = Trash;
140560140601

140561140602
/***/ }),
140562140603

140604+
/***/ "./src/rubric-authoring/types.ts":
140605+
/*!***************************************!*\
140606+
!*** ./src/rubric-authoring/types.ts ***!
140607+
\***************************************/
140608+
/*! no static exports found */
140609+
/***/ (function(module, exports, __webpack_require__) {
140610+
140611+
"use strict";
140612+
140613+
140614+
Object.defineProperty(exports, "__esModule", {
140615+
value: true
140616+
});
140617+
exports.tagSummaryDisplayLabels = exports.tagSummaryDisplayValues = void 0;
140618+
exports.tagSummaryDisplayValues = ["none", "above", "below", "onlySummary"];
140619+
exports.tagSummaryDisplayLabels = {
140620+
none: "Do not display Tag Summary",
140621+
above: "Display Tag Summary above Criteria Summary",
140622+
below: "Display Tag Summary below Criteria Summary",
140623+
onlySummary: "Only display Tag Summary"
140624+
};
140625+
140626+
/***/ }),
140627+
140563140628
/***/ "./src/rubric-authoring/use-rubric.ts":
140564140629
/*!********************************************!*\
140565140630
!*** ./src/rubric-authoring/use-rubric.ts ***!
@@ -140720,6 +140785,22 @@ var react_1 = __webpack_require__(/*! react */ "react");
140720140785

140721140786
var use_immer_1 = __webpack_require__(/*! use-immer */ "./node_modules/use-immer/dist/use-immer.module.js");
140722140787

140788+
var migrate = function (rubric) {
140789+
var _a; // right now there are no explicit version migrations BUT iconPhrase and tagSummaryDisplay were
140790+
// added without a version bump so ensure they have a default value if they are undefined
140791+
140792+
140793+
rubric.criteriaGroups.forEach(function (criteriaGroup) {
140794+
criteriaGroup.criteria.forEach(function (criteria) {
140795+
var _a;
140796+
140797+
criteria.iconPhrase = (_a = criteria.iconPhrase) !== null && _a !== void 0 ? _a : "";
140798+
});
140799+
});
140800+
rubric.tagSummaryDisplay = (_a = rubric.tagSummaryDisplay) !== null && _a !== void 0 ? _a : "none";
140801+
return rubric;
140802+
};
140803+
140723140804
var useRubricValue = function (authoredContentUrl) {
140724140805
var _a = (0, use_immer_1.useImmer)({}),
140725140806
rubric = _a[0],
@@ -140747,12 +140828,11 @@ var useRubricValue = function (authoredContentUrl) {
140747140828
(0, react_1.useEffect)(function () {
140748140829
var loadAuthoredContent = function () {
140749140830
return __awaiter(void 0, void 0, void 0, function () {
140750-
var url, _a, e_1;
140751-
140752-
return __generator(this, function (_b) {
140753-
switch (_b.label) {
140831+
var url, unmigratedRubric, migratedRubric, e_1;
140832+
return __generator(this, function (_a) {
140833+
switch (_a.label) {
140754140834
case 0:
140755-
_b.trys.push([0, 7,, 8]);
140835+
_a.trys.push([0, 7,, 8]);
140756140836

140757140837
return [4
140758140838
/*yield*/
@@ -140761,25 +140841,27 @@ var useRubricValue = function (authoredContentUrl) {
140761140841
case 1:
140762140842
return [4
140763140843
/*yield*/
140764-
, _b.sent().json()];
140844+
, _a.sent().json()];
140765140845

140766140846
case 2:
140767-
url = _b.sent().url;
140847+
url = _a.sent().url;
140768140848
if (!url) return [3
140769140849
/*break*/
140770140850
, 5];
140771-
_a = _setRubric;
140772140851
return [4
140773140852
/*yield*/
140774140853
, fetch(url)];
140775140854

140776140855
case 3:
140777140856
return [4
140778140857
/*yield*/
140779-
, _b.sent().json()];
140858+
, _a.sent().json()];
140780140859

140781140860
case 4:
140782-
_a.apply(void 0, [_b.sent()]);
140861+
unmigratedRubric = _a.sent();
140862+
migratedRubric = migrate(unmigratedRubric);
140863+
140864+
_setRubric(migratedRubric);
140783140865

140784140866
return [3
140785140867
/*break*/
@@ -140798,10 +140880,11 @@ var useRubricValue = function (authoredContentUrl) {
140798140880
criteriaLabelForStudent: "",
140799140881
feedbackLabelForStudent: "",
140800140882
criteriaGroups: [],
140801-
ratings: []
140883+
ratings: [],
140884+
tagSummaryDisplay: "none"
140802140885
});
140803140886

140804-
_b.label = 6;
140887+
_a.label = 6;
140805140888

140806140889
case 6:
140807140890
setLoadStatus("loaded");
@@ -140810,7 +140893,7 @@ var useRubricValue = function (authoredContentUrl) {
140810140893
, 8];
140811140894

140812140895
case 7:
140813-
e_1 = _b.sent();
140896+
e_1 = _a.sent();
140814140897
alert(e_1.toString());
140815140898
return [3
140816140899
/*break*/

‎app/assets/stylesheets/lara-typescript.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4068,9 +4068,10 @@ button.bigButton svg {
40684068
}
40694069
.rubric-criterion .rubric-criterion-body .rubric-criterion-body-row label {
40704070
font-weight: bold;
4071+
white-space: nowrap;
40714072
}
40724073
.rubric-criterion .rubric-criterion-body .rubric-criterion-body-row input[type=text] {
4073-
width: 700px;
4074+
width: 100%;
40744075
box-sizing: border-box;
40754076
}
40764077
.rubric-criterion .rubric-criterion-body .rubric-criterion-body-row .rubric-checkboxes {

‎lara-typescript/src/rubric-authoring/rubric-criteria-group.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export const RubricCriteriaGroup = ({criteriaGroup, groupIndex}: IRubricCriteria
3333
ratingDescriptions: {},
3434
ratingDescriptionsForStudent: {},
3535
iconUrl: "",
36+
iconPhrase: "",
3637
});
3738
});
3839
};

‎lara-typescript/src/rubric-authoring/rubric-criterion.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@
3838

3939
label {
4040
font-weight: bold;
41+
white-space: nowrap;
4142
}
4243

4344
input[type=text] {
44-
width: 700px;
45+
width: 100%;
4546
box-sizing: border-box;
4647
}
4748

‎lara-typescript/src/rubric-authoring/rubric-criterion.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@ export const RubricCriterion = ({index, groupIndex, criterion, onDelete}: Rubric
5858
});
5959
};
6060

61+
const handleIconPhraseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
62+
const phrase = e.target.value;
63+
setRubric(draft => {
64+
draft.criteriaGroups[groupIndex].criteria[index].iconPhrase = phrase;
65+
});
66+
};
67+
6168
const handleCriteriaMarkdownUpdate = (key: CriterionKey) => (value: string) => {
6269
setRubric(draft => {
6370
draft.criteriaGroups[groupIndex].criteria[index][key] = value;
@@ -91,13 +98,25 @@ export const RubricCriterion = ({index, groupIndex, criterion, onDelete}: Rubric
9198
</div>
9299
<div className="rubric-criterion-body">
93100
<div className="rubric-criterion-body-row">
94-
<div className="rubric-criterion-body-row-label" style={{flex: "initial"}}>
95-
<label htmlFor="iconUrl">Icon URL:</label>
96-
<input
97-
type="text"
98-
value={criterion.iconUrl}
99-
onChange={handleIconUrlChange}
100-
/>
101+
<div>
102+
<div className="rubric-criterion-body-row-label" style={{flex: "initial"}}>
103+
<label htmlFor="iconUrl">Tag Icon URL:</label>
104+
<input
105+
type="text"
106+
value={criterion.iconUrl}
107+
onChange={handleIconUrlChange}
108+
/>
109+
</div>
110+
</div>
111+
<div>
112+
<div className="rubric-criterion-body-row-label" style={{flex: "initial"}}>
113+
<label htmlFor="iconPhrase">Tag Icon Phrase:</label>
114+
<input
115+
type="text"
116+
value={criterion.iconPhrase}
117+
onChange={handleIconPhraseChange}
118+
/>
119+
</div>
101120
</div>
102121
</div>
103122

‎lara-typescript/src/rubric-authoring/rubric-general-options.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
2-
import { useRubric } from "./use-rubric";
32
import classNames from "classnames";
3+
import { useRubric } from "./use-rubric";
4+
import { ITagSummaryDisplay, tagSummaryDisplayLabels, tagSummaryDisplayValues } from "./types";
45

56
import "./rubric-general-options.scss";
67

@@ -22,6 +23,12 @@ export const RubricGeneralOptions = () => {
2223
draft[key] = checked;
2324
});
2425
};
26+
const handleUpdateTagSummaryDisplay = (e: React.ChangeEvent<HTMLSelectElement>) => {
27+
const tagSummaryDisplay = e.target.value as ITagSummaryDisplay;
28+
setRubric(draft => {
29+
draft.tagSummaryDisplay = tagSummaryDisplay;
30+
});
31+
};
2532

2633
return (
2734
<div className="general-options">
@@ -53,6 +60,20 @@ export const RubricGeneralOptions = () => {
5360
/>
5461
</td>
5562
</tr>
63+
<tr>
64+
<td><label htmlFor="tagSummaryDisplay">Tag Summary Display:</label></td>
65+
<td>
66+
<select
67+
name="tagSummaryDisplay"
68+
value={rubric.tagSummaryDisplay}
69+
onChange={handleUpdateTagSummaryDisplay}
70+
>
71+
{tagSummaryDisplayValues.map(value => (
72+
<option value={value} key={value}>{tagSummaryDisplayLabels[value]}</option>
73+
))}
74+
</select>
75+
</td>
76+
</tr>
5677
<tr>
5778
<td/>
5879
<td className="rubric-checkbox">

‎lara-typescript/src/rubric-authoring/rubric-student-preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const RubricStudentPreview = ({scored, scoring, setScoring}: IProps) => {
8282
}
8383
<td>
8484
<div>
85-
{criteria.iconUrl && <img src={criteria.iconUrl} />}
85+
{criteria.iconUrl && <img src={criteria.iconUrl} title={criteria.iconPhrase} />}
8686
<Markdown>{description}</Markdown>
8787
</div>
8888
</td>

‎lara-typescript/src/rubric-authoring/rubric-teacher-preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const RubricTeacherPreview = ({scoring, setScoring, referenceURL}: IProps
129129
{criteriaGroup.criteria.map((crit) =>
130130
<div className="rubricTableRow" key={crit.id}>
131131
<div className="rubricDescription">
132-
{crit.iconUrl && <img src={crit.iconUrl} />}
132+
{crit.iconUrl && <img src={crit.iconUrl} title={crit.iconPhrase} />}
133133
<Markdown>{crit.description}</Markdown>
134134
</div>
135135
{renderRatings(crit)}

0 commit comments

Comments
 (0)