diff --git a/packages/ebsr/src/print.js b/packages/ebsr/src/print.js index 5c96e45230..31b232d545 100644 --- a/packages/ebsr/src/print.js +++ b/packages/ebsr/src/print.js @@ -20,31 +20,30 @@ const log = debug('pie-element:ebsr:print'); const preparePrintModel = (model, opts) => { const instr = opts.role === 'instructor'; - - model.prompt = model.promptEnabled !== false ? model.prompt : undefined; - model.teacherInstructions = - instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined; - model.showTeacherInstructions = instr; - model.alwaysShowCorrect = instr; - model.mode = instr ? 'evaluate' : 'gather'; - - model.disabled = true; - model.animationsDisabled = true; - model.lockChoiceOrder = true; - model.choicesLayout = model.choicesLayout || 'vertical'; - - const choices = cloneDeep(model.choices); - - model.choices = choices.map((c) => { - c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined; + const printModel = cloneDeep(model); + + printModel.prompt = printModel.promptEnabled !== false ? printModel.prompt : undefined; + printModel.teacherInstructions = + instr && printModel.teacherInstructionsEnabled !== false ? printModel.teacherInstructions : undefined; + printModel.showTeacherInstructions = instr; + printModel.alwaysShowCorrect = instr; + printModel.mode = instr ? 'evaluate' : 'gather'; + + printModel.disabled = true; + printModel.animationsDisabled = true; + printModel.lockChoiceOrder = true; + printModel.choicesLayout = printModel.choicesLayout || 'vertical'; + + printModel.choices = (printModel.choices || []).map((c) => { + c.rationale = instr && printModel.rationaleEnabled !== false ? c.rationale : undefined; c.hideTick = instr; c.feedback = undefined; return c; }); - model.keyMode = model.choicePrefix || 'letters'; + printModel.keyMode = printModel.choicePrefix || 'letters'; - return model; + return printModel; }; class EbsrMC extends MultipleChoice {} @@ -97,11 +96,7 @@ export default class Ebsr extends HTMLElement { set model(m) { this._model = m; - - customElements.whenDefined(MC_TAG_NAME).then(() => { - this.setPartModel(this.partA, 'partA'); - this.setPartModel(this.partB, 'partB'); - }); + this._updateParts(); } set session(s) { @@ -113,8 +108,15 @@ export default class Ebsr extends HTMLElement { }); } + _updateParts() { + customElements.whenDefined(MC_TAG_NAME).then(() => { + this.setPartModel(this.partA, 'partA'); + this.setPartModel(this.partB, 'partB'); + }); + } + setPartModel(part, key) { - if (this._model && this._model[key] && part) { + if (this._model && this._model[key] && part && this._options) { let labels = { partA: undefined, partB: undefined, @@ -155,6 +157,8 @@ export default class Ebsr extends HTMLElement { set options(o) { this._options = o; + // re-render parts so role changes (student/instructor) propagate to each part + this._updateParts(); } setPartSession(part, key) { diff --git a/packages/extended-text-entry/src/print.js b/packages/extended-text-entry/src/print.js index d1ba4ad20a..0c4bca8561 100644 --- a/packages/extended-text-entry/src/print.js +++ b/packages/extended-text-entry/src/print.js @@ -1,6 +1,6 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; -import { debounce } from 'lodash-es'; +import { cloneDeep, debounce } from 'lodash-es'; import Main from './main'; import { renderMath } from '@pie-lib/math-rendering'; @@ -10,25 +10,26 @@ const log = debug('pie-element:extended-text-entry:print'); const preparePrintModel = (model, opts) => { const instr = opts.role === 'instructor'; + const printModel = cloneDeep(model); - model.prompt = model.promptEnabled !== false ? model.prompt : undefined; - model.teacherInstructions = - instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined; - model.showTeacherInstructions = instr; - model.mode = instr ? 'evaluate' : model.mode; + printModel.prompt = printModel.promptEnabled !== false ? printModel.prompt : undefined; + printModel.teacherInstructions = + instr && printModel.teacherInstructionsEnabled !== false ? printModel.teacherInstructions : undefined; + printModel.showTeacherInstructions = instr; + printModel.mode = instr ? 'evaluate' : printModel.mode; const defaultDimensions = { height: 100, width: 500 }; - model.dimensions = { + printModel.dimensions = { ...defaultDimensions, - ...model.dimensions, + ...printModel.dimensions, }; - model.disabled = true; - model.feedback = undefined; - model.animationsDisabled = true; + printModel.disabled = true; + printModel.feedback = undefined; + printModel.animationsDisabled = true; - return model; + return printModel; }; export default class ExtendedTextEntryPrint extends HTMLElement { @@ -40,19 +41,17 @@ export default class ExtendedTextEntryPrint extends HTMLElement { this._root = null; this._rerender = debounce( () => { - if (this._model && this._session) { + if (this._model && this._session && this._options) { const printModel = preparePrintModel(this._model, this._options); - const element = - this._options && - React.createElement(Main, { - model: printModel, - session: {}, - onChange: () => {}, - onValueChange: () => {}, - onAnnotationsChange: () => {}, - onCommentChange: () => {}, - }); + const element = React.createElement(Main, { + model: printModel, + session: {}, + onChange: () => {}, + onValueChange: () => {}, + onAnnotationsChange: () => {}, + onCommentChange: () => {}, + }); if (!this._root) { this._root = createRoot(this); @@ -72,6 +71,8 @@ export default class ExtendedTextEntryPrint extends HTMLElement { } set options(o) { this._options = o; + // re-render so role changes (student/instructor) propagate + this._rerender(); } set model(s) {