From 39784e909c68f139bb537151294d8db56d021158 Mon Sep 17 00:00:00 2001 From: alyssaf16 Date: Wed, 12 Jun 2024 12:31:50 -0400 Subject: flashcard --- src/client/views/nodes/ComparisonBox.scss | 13 ++++++- src/client/views/nodes/ComparisonBox.tsx | 62 +++++++++++++++++++++---------- 2 files changed, 54 insertions(+), 21 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index dc107b576..0b2c356e5 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -14,9 +14,8 @@ -webkit-text-stroke-color: black; -webkit-text-stroke-width: 0.2px; } - .input-box { - position: relative; + position: absolute; padding: 10px; width: 100%; height: 100%; @@ -145,6 +144,15 @@ } } +.explain { + position: absolute; + top: 10px; + left: 10px; + z-index: 200; + padding: 5px; + background: #dfdfdf; +} + .comparisonBox-interactive { pointer-events: unset; cursor: ew-resize; @@ -154,6 +162,7 @@ display: flex; } } + // .input-box { // position: absolute; // padding: 10px; diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 02ab76c2a..9eb5f6ca2 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -43,9 +43,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() @observable private _inputValue = ''; @observable private _outputValue = ''; @observable private _loading = false; - @observable private _errorMessage = ''; - @observable private _outputMessage = ''; @observable private _isEmpty = false; + @observable _yRelativeToTop: boolean = true; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @@ -76,8 +75,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() componentDidMount() { this._props.setContentViewBox?.(this); reaction( - () => this._props.isSelected(), - selected => !selected && (this.childActive = false) + () => this._props.isSelected(), // when this reaction should update + selected => !selected && (this.childActive = false) // what it should update to ); } protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { @@ -283,8 +282,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() }) } style={{ - background: usepath === 'alternate' ? 'white' : 'black', - color: usepath === 'alternate' ? 'black' : 'white', + background: this.revealOp === 'hover' ? 'gray' : usepath === 'alternate' ? 'white' : 'black', + color: this.revealOp === 'hover' ? 'black' : usepath === 'alternate' ? 'black' : 'white', display: 'inline-block', }}>
@@ -303,7 +302,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? (
Flip to front side to use GPT
) : ( -
Ask GPT to create an answer on the back side of the flashcard
+
Ask GPT to create an answer on the back side of the flashcard based on your question on the front
) }>
(!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}> @@ -314,16 +313,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent()
{ + // this.displayLabelHandler(e.target.value, e.clientY); const collectionArr: Doc[] = []; collectionArr.push(this.Document); const newCol = Docs.Create.CarouselDocument(collectionArr, { - _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250), - _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200), + _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250) + 50, + _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200) + 50, _layout_fitWidth: false, _layout_autoHeight: true, }); - newCol['x'] = e.clientX - 820; - newCol['y'] = e.clientY - 640; + newCol['x'] = this.layoutDoc['x']; + newCol['y'] = NumCast(this.layoutDoc['y']) + 50; this._props.addDocument?.(newCol); this._props.removeDocument?.(this.Document); this.Document.embedContainer = newCol; @@ -332,9 +332,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent()
Hover to reveal
}> -
(this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'))}> +
this.handleHover()}>
@@ -361,6 +359,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (this._inputValue) this.askGPT(GPTCallType.QUIZ); }; + @action handleHover = () => { + if (this.revealOp === 'hover') { + this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; + this.Document.forceActive = false; + } else { + this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; + this.Document.forceActive = true; + } + //this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'); + }; + @action handleRenderClick = () => { // Call the GPT model and get the output this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined; @@ -448,6 +457,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() const whichDoc = DocCast(this.dataDoc[whichSlot]); const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc); const layoutString = targetDoc ? '' : this.testForTextFields(whichSlot); + // whichDoc['backgroundColor'] = this.layoutDoc['backgroundColor']; return targetDoc || layoutString ? ( <> @@ -500,20 +510,32 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() // add text box to each side when comparison box is first created // (!this.dataDoc[this.fieldKey + '_0'] && this.dataDoc[this._props.fieldKey + '_0'] !== 'empty') if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).split('Answer'); + const dataSplit = StrCast(this.dataDoc.data).split('Answer: '); const newDoc = Docs.Create.TextDocument(dataSplit[1]); // if there is text from the pdf ai cards, put the question on the front side. // eslint-disable-next-line prefer-destructuring - newDoc[DocData].text = dataSplit[1]; + // newDoc.text = dataSplit[1]; + newDoc['backgroundColor'] = 'lightgray'; this.addDoc(newDoc, this.fieldKey + '_0'); + // DocCast(this.dataDoc[this.fieldKey + '_0'])[DocData].text = dataSplit[1]; + // DocCast(this.dataDoc[this.fieldKey + '_0']).text = dataSplit[1]; + // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_0']).text); + console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text)); } + if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).split('Answer'); + const dataSplit = StrCast(this.dataDoc.data).split('Answer: '); const newDoc = Docs.Create.TextDocument(dataSplit[0]); + this.addDoc(newDoc, this.fieldKey + '_1'); // if there is text from the pdf ai cards, put the answer on the alternate side. // eslint-disable-next-line prefer-destructuring - newDoc[DocData].text = dataSplit[0]; - this.addDoc(newDoc, this.fieldKey + '_1'); + + // newDoc[DocData].text = dataSplit[0]; + // console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)); + // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_1']).text); + // DocCast(this.dataDoc[this.props.fieldKey + '_1'])[DocData].text = dataSplit[0]; + // console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text)); + // DocCast(this.dataDoc[this.fieldKey + '_1'])[DocData].text = dataSplit[0]; } // render the QuizCards @@ -552,6 +574,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() ); } + console.log('HEREEE2' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)); // render a normal flashcard when not a QuizCard return (
() }} // onPointerUp={() => (this._isAnyChildContentActive = true)} > + {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text) === '' && !this.childActive ?

Enter text in the flashcard.

: null} {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)} {this._loading ? (
-- cgit v1.2.3-70-g09d2