Tone Matrix Side Content Addition - Quest 5B (#361)

* Added mockup tab to add in Tone Matrix

* Fix formatting for GradingEditor

* Updated code and added ToneMatrix script

* Changed predicate to check external lib for tone matrix function

* update formatting

* Added test case for Tone Matrix

* Updated formatting

* Fixed wording in solution template

Author: rrtheonlyone

src/components/assessment/AssessmentWorkspace.tsx

@@ -10,6 +10,7 @@ import Markdown from '../commons/Markdown'
 import Workspace, { WorkspaceProps } from '../workspace'
 import { ControlBarProps } from '../workspace/ControlBar'
 import { SideContentProps } from '../workspace/side-content'
+import ToneMatrix from '../workspace/side-content/ToneMatrix'
 import {
   IAssessment,
   IMCQQuestion,
@@ -228,6 +229,15 @@ class AssessmentWorkspace extends React.Component<
         body: <Markdown content={comment} />
       })
     }
+
+    const functionsAttached = props.assessment!.questions[questionId].library.external.symbols
+    if (functionsAttached.includes('get_matrix')) {
+      tabs.push({
+        label: `Tone Matrix`,
+        icon: IconNames.GRID_VIEW,
+        body: <ToneMatrix />
+      })
+    }
     return {
       activeTab: props.activeTab,
       handleChangeActiveTab: props.handleChangeActiveTab,

src/components/workspace/side-content/ToneMatrix.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@blueprintjs/core'
+import * as React from 'react'
+
+class ToneMatrix extends React.Component<{}, {}> {
+  private $container: HTMLElement | null
+
+  public shouldComponentUpdate() {
+    return false
+  }
+
+  public componentDidMount() {
+    if ((window as any).ToneMatrix) {
+      ;(window as any).ToneMatrix.initialise_matrix(this.$container!)
+    }
+  }
+
+  public handleClear() {
+    ;(window as any).ToneMatrix.clear_matrix()
+  }
+
+  public handleRandomise() {
+    ;(window as any).ToneMatrix.randomise_matrix()
+  }
+
+  public render() {
+    return (
+      <div className="sa-tone-matrix">
+        <div className="row">
+          <div className="controls col-xs-12 pt-dark pt-button-group">
+            <Button id="clear-matrix" onClick={this.handleClear}>
+              Clear
+            </Button>
+            <Button id="randomise-matrix" onClick={this.handleRandomise}>
+              Randomise
+            </Button>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-xs-12" ref={r => (this.$container = r)} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ToneMatrix

src/mocks/assessmentAPI.ts

@@ -180,6 +180,15 @@ const mockCurveLibrary: Library = {
   globals: mockGlobals
 }
 
+const mockToneMatrixLibrary: Library = {
+  chapter: 1,
+  external: {
+    name: ExternalLibraryNames.SOUND,
+    symbols: ['get_matrix']
+  },
+  globals: mockGlobals
+}
+
 export const mockAssessmentQuestions: Array<IProgrammingQuestion | IMCQQuestion> = [
   {
     answer: 'display("answer1");',
@@ -260,6 +269,15 @@ What's your favourite dinner food?
     library: mockCurveLibrary,
     type: 'mcq',
     solution: null
+  },
+  {
+    answer: null,
+    comment: 'Wow you have come far! `Steady`',
+    content: 'You have reached the last question! Have some fun with the tone matrix...',
+    id: 1,
+    library: mockToneMatrixLibrary,
+    solutionTemplate: '5th question mock solution template',
+    type: 'programming'
   }
 ]