fix(ebsr,extended-text-entry): render print view correctly on role switch PIE-216

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) {

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) {