feat: unlock first hint with meta

Author: TinnaLiu

src/ProblemLayout/HintSystem.js

@@ -23,15 +23,16 @@ class HintSystem extends React.Component {
             subHintsFinished.push(new Array((this.props.hints[i].subHints !== undefined ? this.props.hints[i].subHints.length : 0)).fill(0));
         }
 
-        this.giveStuFeedback = props.giveStuFeedback
+        this.giveStuFeedback = props.giveStuFeedback;
+        this.unlockFirstHint = props.unlockFirstHint;
         this.state = {
             latestStep: 0,
-            currentExpanded: 0,
+            currentExpanded: this.unlockFirstHint ? 0 : -1,
             hintAnswer: "",
             showSubHints: new Array(this.props.hints.length).fill(false),
             subHintsFinished: subHintsFinished
         }
-        if (this.props.hintStatus.length > 0) {
+        if (this.unlockFirstHint && this.props.hintStatus.length > 0) {
             this.props.unlockHint(0, this.props.hints[0].type);
         }
     }
@@ -153,6 +154,7 @@ class HintSystem extends React.Component {
                                         <ErrorBoundary componentName={"SubHintSystem"}>
                                             <SubHintSystem
                                                 giveStuFeedback={this.giveStuFeedback}
+                                                unlockFirstHint={this.unlockFirstHint}
                                                 problemID={problemID}
                                                 hints={hint.subHints}
                                                 unlockHint={this.unlockSubHint}

src/ProblemLayout/Problem.js

@@ -45,9 +45,11 @@ class Problem extends React.Component {
         const giveStuFeedback = this.props.lesson?.giveStuFeedback
         const giveStuHints = this.props.lesson?.giveStuHints
         const doMasteryUpdate = this.props.lesson?.doMasteryUpdate
+        const unlockFirstHint = this.props.lesson?.unlockFirstHint
         this.giveStuFeedback = giveStuFeedback == null || giveStuFeedback
         this.giveStuHints = giveStuHints == null || giveStuHints
         this.doMasteryUpdate = doMasteryUpdate == null || doMasteryUpdate
+        this.unlockFirstHint = unlockFirstHint != null && unlockFirstHint
 
         this.state = {
             problem: this.props.problem,
@@ -85,7 +87,7 @@ class Problem extends React.Component {
                 <ProblemCard problemID={problem.id} step={step} index={index} answerMade={this.answerMade}
                              seed={this.props.seed} problemVars={this.props.problem.variabilization}
                              lesson={problem.lesson} courseName={problem.courseName} giveStuFeedback={this.giveStuFeedback}
-                             giveStuHints={this.giveStuHints}
+                             giveStuHints={this.giveStuHints} unlockFirstHint={this.unlockFirstHint}
                 />
             </Element>
         })

src/ProblemLayout/ProblemCard.js

@@ -31,12 +31,13 @@ class ProblemCard extends React.Component {
         //console.log("Reconstructing");
         this.step = props.step;
         this.index = props.index;
-        this.giveStuFeedback = props.giveStuFeedback
-        this.giveStuHints = props.giveStuHints
-        this.allowRetry = this.giveStuFeedback
-        this.showHints = this.giveStuHints == null || this.giveStuHints
-        this.showCorrectness = this.giveStuFeedback
-        console.debug('this.step', this.step, 'showHints', this.showHints, 'hintPathway', context.hintPathway)
+        this.giveStuFeedback = props.giveStuFeedback;
+        this.giveStuHints = props.giveStuHints;
+        this.unlockFirstHint = props.unlockFirstHint;
+        this.allowRetry = this.giveStuFeedback;
+        this.showHints = this.giveStuHints == null || this.giveStuHints;
+        this.showCorrectness = this.giveStuFeedback;
+        console.debug('this.step', this.step, 'showHints', this.showHints, 'hintPathway', context.hintPathway);
         this.hints = this.step.hints[context.hintPathway];
 
         for (let hint of this.hints) {
@@ -241,6 +242,7 @@ class ProblemCard extends React.Component {
                             <ErrorBoundary componentName={"HintSystem"} descriptor={"hint"}>
                                 <HintSystem
                                     giveStuFeedback={this.giveStuFeedback}
+                                    unlockFirstHint={this.unlockFirstHint}
                                     problemID={this.props.problemID}
                                     index={this.props.index}
                                     step={this.step}

src/ProblemLayout/SubHintSystem.js

@@ -16,13 +16,14 @@ class SubHintSystem extends React.Component {
 
     constructor(props) {
         super(props);
-        this.giveStuFeedback = props.giveStuFeedback
+        this.giveStuFeedback = props.giveStuFeedback;
+        this.unlockFirstHint = props.unlockFirstHint;
         this.state = {
             latestStep: 0,
-            currentExpanded: 0,
+            currentExpanded: this.unlockFirstHint ? 0 : -1,
             hintAnswer: ""
         }
-        if (this.props.hintStatus.length > 0) {
+        if (this.unlockFirstHint && this.props.hintStatus.length > 0) {
             this.props.unlockHint(0, this.props.parent);
         }
     }