Flashcards changes

8 files changed, 166 insertions, 73 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index f115bb40a..975b352cf 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -1,5 +1,7 @@
 .collectionCarouselView-outer {
     height: 100%;
+    position: relative;
+    overflow: hidden;
     .collectionCarouselView-caption {
         height: 50;
         display: inline-block;
@@ -11,7 +13,16 @@
         width: 100%;
         user-select: none;
     }
+    .message {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        height: 60%;
+        z-index: -1;
+        // margin: 15px;
+    }
 }
+
 .carouselView-back,
 .carouselView-fwd,
 .carouselView-star,
@@ -21,7 +32,7 @@
     display: flex;
     top: 42.5%;
     width: 30;
-    height: 15%;
+    height: 30;
     align-items: center;
     border-radius: 5px;
     justify-content: center;
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 2adad68e0..2893de762 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
@@ -24,6 +24,7 @@ enum cardMode {
     PRACTICE = 'practice',
     STAR = 'star',
     QUIZ = 'quiz',
+    ALL = 'all',
 }
 enum practiceVal {
     MISSED = 'missed',
@@ -32,12 +33,15 @@ enum practiceVal {
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
+    @observable private _message = 'Drag a document';
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
     get starField()     { return this.fieldKey + "_star"; } // prettier-ignore
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        this.layoutDoc.filterOp = cardMode.ALL;
+        this.layoutDoc._carousel_index = 0;
     }
 
     componentWillUnmount() {
@@ -61,7 +65,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     move = (dir: number) => {
         const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => {
             let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length;
-            while (!match(this.carouselItems?.[startInd].layout) && (startInd + dir + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) {
+            while (!match(this.carouselItems?.[startInd].layout) && (startInd + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) {
                 startInd = (startInd + dir + this.carouselItems.length) % this.carouselItems.length;
             }
             if (match(this.carouselItems?.[startInd].layout)) {
@@ -73,16 +77,19 @@ export class CollectionCarouselView extends CollectionSubView() {
         switch (StrCast(this.layoutDoc.filterOp)) {
             case cardMode.STAR:  // go to a flashcard that is starred, skip the ones that aren't
                 if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) {
+                    // this.layoutDoc._carousel_index
                     this.layoutDoc.filterOp = undefined;  // if there aren't any starred, show all cards
+                    this._message = 'No starred items. Return to All to star documents.'
                 }
                 break;
             case cardMode.PRACTICE: // go to a new index that is missed, skip the ones that are correct
                 if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) {
                     this.layoutDoc.filterOp = undefined;  // if all of the cards are correct, show all cards and exit practice mode
-
+                    this._message = 'Finished! Return to All.'
                     this.carouselItems.forEach(item => { // reset all the practice values
                         item.layout[this.practiceField] = undefined;
                     });
+                    // this.layoutDoc._carousel_index = -1;
                 }
                 break;
             default: moveToCardWithField(returnTrue);
@@ -112,6 +119,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         e.stopPropagation();
         const curDoc = this.carouselItems[NumCast(this.layoutDoc._carousel_index)];
         curDoc.layout[this.starField] = curDoc.layout[this.starField] ? undefined : true;
+        // this.layoutDoc._carousel_index = undefined;
     };
 
     /*
@@ -123,7 +131,9 @@ export class CollectionCarouselView extends CollectionSubView() {
         curDoc.layout[this.practiceField] = val;
         this.advance(e);
     };
-
+    clearContent = () => {
+        this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
+    };
     captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
         // first look for properties on the document in the carousel, then fallback to properties on the container
         const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
@@ -133,16 +143,22 @@ export class CollectionCarouselView extends CollectionSubView() {
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
+    setFilterMode = (mode: cardMode) => {
+        this.layoutDoc.filterOp = mode;
+        if (mode == cardMode.STAR) this.move(1);
+        this.clearContent();
+    };
     specificMenu = (): void => {
         const cm = ContextMenu.Instance;
 
         const revealOptions = cm.findByDescription('Filter Flashcards');
         const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-        revealItems.push({description: 'All',           event: () => {this.layoutDoc.filterOp = undefined;},         icon: 'layer-group',}); // prettier-ignore
-        revealItems.push({description: 'Star',          event: () => {this.layoutDoc.filterOp = cardMode.STAR;},     icon: 'star',}); // prettier-ignore
-        revealItems.push({description: 'Practice Mode', event: () => {this.layoutDoc.filterOp = cardMode.PRACTICE;}, icon: 'check',}); // prettier-ignore
-        revealItems.push({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ;},     icon: 'pencil',}); // prettier-ignore
+        revealItems.push({description: 'All',           event: () => {this.setFilterMode(cardMode.ALL);},         icon: 'layer-group',}); // prettier-ignore
+        revealItems.push({description: 'Star',          event: () => {this.setFilterMode(cardMode.STAR);},     icon: 'star',}); // prettier-ignore
+        revealItems.push({description: 'Practice Mode', event: () => {this.setFilterMode(cardMode.PRACTICE);}, icon: 'check',}); // prettier-ignore
+        cm.addItem({description: 'Quiz Cards',    event: () => {this.setFilterMode(cardMode.QUIZ);},     icon: 'pencil',}); // prettier-ignore
         !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+        //cm.addItem({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ; this.clearContent()});
     };
     @computed get content() {
         const index = NumCast(this.layoutDoc._carousel_index);
@@ -221,17 +237,15 @@ export class CollectionCarouselView extends CollectionSubView() {
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
-                {this.content}
+                {this.layoutDoc.filterOp ? this.content : <p className="message">{this._message}</p>}
+                {/* {(this.carouselItems?.filter(doc => doc.layout[this.practiceField] !== practiceVal.CORRECT)).length == 0 ? null : this.content} */}
                 {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}
                 <p
+                    className="message"
                     style={{
                         display: !this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.filterOp === cardMode.PRACTICE ? 'flex' : 'none',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        zIndex: '-1',
                     }}>
-                    Add flashcards!
+                    Add flashcards
                 </p>
                 {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}
                 <p
@@ -241,11 +255,16 @@ export class CollectionCarouselView extends CollectionSubView() {
                         position: 'relative',
                         left: '10px',
                         top: '10px',
-                        display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] ? (this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED ? 'block' : 'none') : 'none',
+                        width: '10px',
+                        display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)]
+                            ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.filterOp === cardMode.PRACTICE
+                                ? 'block'
+                                : 'none'
+                            : 'none',
                     }}>
                     Recently missed!
                 </p>
-                {this.Document._chromeHidden ? null : this.buttons}
+                {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons}
             </div>
         );
     }
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 093b9c004..f3dc0f68c 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -5,6 +5,7 @@
     width: 100%;
     height: 100%;
     position: relative;
+    background: gray;
     z-index: 0;
     pointer-events: none;
     display: flex;
@@ -28,6 +29,7 @@
         padding-left: 5px;
         padding-right: 5px;
         width: 100%;
+        border-radius: 2px;
         height: 15%;
         display: flex;
 
@@ -39,8 +41,12 @@
     textarea {
         flex: 1;
         padding: 10px;
-        position: relative;
+        // position: relative;
         resize: none;
+        position: 'absolute';
+        width: '91%';
+        height: '80%';
+        z-index: '-1';
     }
 
     .clip-div {
@@ -119,6 +125,23 @@
             opacity: 0.5;
         }
     }
+
+    .loading-spinner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 90%;
+        width: 93%;
+        font-size: 20px;
+        font-weight: bold;
+        color: #0b0a0a;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
 }
 
 .comparisonBox-interactive {
@@ -131,7 +154,7 @@
         }
     }
     // .input-box {
-    //     position: relative;
+    //     position: absolute;
     //     padding: 10px;
     // }
     // input[type='text'] {
@@ -219,23 +242,23 @@
             }
         }
 
-        .loading-circle {
-            position: relative;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
+        // .loading-circle {
+        //     position: relative;
+        //     width: 50px;
+        //     height: 50px;
+        //     border-radius: 50%;
+        //     border: 3px solid #ccc;
+        //     border-top-color: #333;
+        //     animation: spin 1s infinite linear;
+        // }
 
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
+        // @keyframes spin {
+        //     0% {
+        //         transform: rotate(0deg);
+        //     }
+        //     100% {
+        //         transform: rotate(360deg);
+        //     }
+        // }
     }
 }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index adb380f12..c0c173d9a 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -10,6 +10,7 @@ import { DocData } from '../../../fields/DocSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
 import { DocCast, NumCast, RTFCast, StrCast, toList } from '../../../fields/Types';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
+import '../pdf/GPTPopup/GPTPopup.scss';
 import { DocUtils } from '../../documents/DocUtils';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -23,6 +24,7 @@ import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import ReactLoading from 'react-loading';
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -33,17 +35,18 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
+        // this._isAnyChildContentActive = true;
     }
 
-    @observable inputValue = '';
-    @observable outputValue = '';
-    @observable loading = false;
-    @observable errorMessage = '';
-    @observable outputMessage = '';
+    @observable private _inputValue = '';
+    @observable private _outputValue = '';
+    @observable private _loading = false;
+    @observable private _errorMessage = '';
+    @observable private _outputMessage = '';
 
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        this.inputValue = e.target.value;
-        console.log(this.inputValue);
+        this._inputValue = e.target.value;
+        console.log(this._inputValue);
     };
 
     @observable _animating = '';
@@ -118,6 +121,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         }
     };
 
+    // private onClick(e: React.PointerEvent<HTMLDivElement>) {
+    //     setupMoveUpEvents(
+    //         this, e, this.onPointerMOve, emptyFunction(), () => {this._isAnyChildContentActive = true;}, emptyFunction(), emptyFunction()
+    //     )
+    // }
+
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
         const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth();
@@ -157,7 +166,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
     remDoc = (doc: Doc, which: string) => {
         if (this.dataDoc[which] === doc) {
-            // this.dataDoc[which] = 'empty';
+            this.dataDoc[which] = 'empty';
             this.dataDoc[which] = undefined;
             return true;
         }
@@ -251,6 +260,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             console.log(this.layoutDoc[`_${this._props.fieldKey}_revealOp`]);
                             if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
                                 this.flipFlashcard();
+
                                 console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
                                 console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
                             }
@@ -260,7 +270,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         background: usepath === 'alternate' ? 'white' : 'black',
                         color: usepath === 'alternate' ? 'black' : 'white',
                     }}>
-                    <FontAwesomeIcon icon="turn-up" size="sm" />
+                    <div key="alternate" className="formattedTextBox-flip">
+                        <FontAwesomeIcon icon="turn-up" size="1x" />
+                    </div>
                 </div>
             </Tooltip>
         );
@@ -269,8 +281,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @action handleRenderGPTClick = () => {
         // Call the GPT model and get the output
         this.layoutDoc[`_${this._props.fieldKey}_usePath`] = 'alternate';
-        this.outputValue = '';
-        if (this.inputValue) this.askGPT();
+        this._outputValue = '';
+        if (this._inputValue) this.askGPT();
     };
 
     @action handleRenderClick = () => {
@@ -278,6 +290,15 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined;
     };
 
+    animateRes = (resIndex: number, newText: string) => {
+        if (resIndex < newText.length) {
+            // const marks = this._editorView?.state.storedMarks ?? [];
+            this._outputValue += newText[resIndex];
+            // this._editorView?.dispatch(this._editorView?.state.tr.insertText(newText[resIndex]).setStoredMarks(this._outputValue));
+            setTimeout(() => this.animateRes(resIndex + 1, newText), 20);
+        }
+    };
+
     /**
      * Calls the GPT model to create QuizCards. Evaluates how similar the user's response is to the alternate
      * side of the flashcard.
@@ -285,19 +306,21 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     askGPT = async (): Promise<string | undefined> => {
         const questionText = 'Question: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
         const rubricText = ' Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
-        const queryText = questionText + ' UserAnswer: ' + this.inputValue + '. ' + rubricText;
-
+        const queryText = questionText + ' UserAnswer: ' + this._inputValue + '. ' + rubricText;
+        this._loading = true;
         try {
             const res = await gptAPICall(queryText, GPTCallType.QUIZ);
             if (!res) {
                 console.error('GPT call failed');
                 return;
             }
-            this.outputValue = res;
+            this.animateRes(0, '\n\n' + res);
+            // this._outputValue = res;
             console.log(res);
         } catch (err) {
             console.error('GPT call failed');
         }
+        this._loading = false;
     };
     layoutWidth = () => NumCast(this.layoutDoc.width, 200);
     layoutHeight = () => NumCast(this.layoutDoc.height, 200);
@@ -306,11 +329,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const clearButton = (which: string) => (
             <Tooltip title={<div className="dash-tooltip">remove</div>}>
                 <div
+                    // style={{ position: 'relative', top: '0px', left: '10px' }}
                     ref={this._closeRef}
                     className={`clear-button ${which}`}
                     onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
                 >
-                    <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
+                    <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="xs" />
                 </div>
             </Tooltip>
         );
@@ -340,8 +364,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         hideLinkButton
                         pointerEvents={this._isAnyChildContentActive ? undefined : returnNone}
                     />
-                    {layoutString ? null : clearButton(whichSlot)}
-                </> // placeholder image if doc is missing
+                    <div style={{ position: 'absolute', top: '-5px', left: '2px' }}>{layoutString ? null : clearButton(whichSlot)}</div>
+                </> // placeholder image if doc is missingleft: `${NumCast(this.layoutDoc.width, 200) - 33}px`
             ) : (
                 <div className="placeholder">
                     <FontAwesomeIcon className="upload-icon" icon="cloud-upload-alt" size="lg" />
@@ -377,25 +401,31 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
             // render the QuizCards
             if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).filterOp === 'quiz') {
+                const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
                 return (
                     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
-                        <p style={{ color: 'white', padding: 10 }}>{StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)}</p>
-                        {/* {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)} */}
+                        <p style={{ color: 'white', padding: 10 }}>{text}</p>
+                        <p style={{ display: text === '' ? 'flex' : 'none', color: 'white', padding: 10 }}>Return to all flashcards and add text to both sides. </p>
                         <div className="input-box">
                             <textarea
-                                value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
+                                value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._outputValue : this._inputValue}
                                 onChange={this.handleInputChange}
-                                readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
-                            />
+                                readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}></textarea>
+
+                            {this._loading ? (
+                                <div className="loading-spinner" style={{ position: 'absolute' }}>
+                                    <ReactLoading type="spin" height={30} width={30} color={'blue'} />
+                                </div>
+                            ) : null}
                         </div>
-                        <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
-                            <button type="button" onClick={this.handleRenderGPTClick}>
+                        <div className="submit-button" style={{ overflow: 'hidden', display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
+                            <button type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px' }}>
                                 Submit
                             </button>
                         </div>
-                        <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
-                            <button type="button" onClick={this.handleRenderClick}>
-                                Edit Your Response
+                        <div className="submit-button" style={{ overflow: 'hidden', marginBottom: '2px', display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
+                            <button type="button" onClick={this.handleRenderClick} style={{ borderRadius: '2px' }}>
+                                Try Again
                             </button>
                         </div>
                     </div>
@@ -412,7 +442,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     }}
                     onMouseLeave={() => {
                         this.hoverFlip(undefined);
-                    }}>
+                    }}
+                    // onPointerUp={() => (this._isAnyChildContentActive = true)}
+                >
                     {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
                     {this.overlayAlternateIcon}
                 </div>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7a1f94948..8bf7b094f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -575,7 +575,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             }
             appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'eye' });
             if (this.Document._layout_isFlashcard) {
-                appearanceItems.push({ description: 'Create ChatCard', event: () => this.askGPT(), icon: 'id-card' });
+                appearanceItems.push({ description: 'Create an answer on the back', event: () => this.askGPT(), icon: 'id-card' });
             }
 
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 99b4a84fc..8ac8c2c5f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -88,10 +88,16 @@ audiotag:hover {
     background: black;
     right: 0;
     bottom: 0;
-    width: 11;
-    height: 11;
+    width: 15;
+    height: 15;
     cursor: default;
 }
+.formattedTextBox-flip {
+    align-items: center;
+    position: absolute;
+    right: 3px;
+    bottom: 1px;
+}
 
 .formattedTextBox-outer {
     position: relative;
@@ -171,6 +177,8 @@ audiotag:hover {
         border-style: inset;
         border-width: 1px;
     }
+    // margin-left: 5px;
+    // margin-right: 5px;
 }
 
 .gpt-typing-wrapper {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 9f2a9b8e1..82133a06e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -181,7 +181,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     @observable
     private gptRes: string = '';
 
-    public makeAIFlashcards: () => void = unimplementedFunction;
+    // public makeAIFlashcards: () => void = unimplementedFunction;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
     public static PasteOnLoad: ClipboardEvent | undefined;
@@ -969,7 +969,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             icon: 'star',
         });
         optionItems.push({ description: `Generate Dall-E Image`, event: () => this.generateImage(), icon: 'star' });
-        optionItems.push({ description: `Make AI Flashcards`, event: () => this.makeAIFlashcards(), icon: 'lightbulb' });
+        // optionItems.push({ description: `Make AI Flashcards`, event: () => this.makeAIFlashcards(), icon: 'lightbulb' });
         optionItems.push({ description: `Ask GPT-3`, event: this.askGPT, icon: 'lightbulb' });
         this._props.renderDepth &&
             optionItems.push({
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index 55b8446e9..bc0810f22 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -13,7 +13,7 @@
     box-shadow: 3px 3px 1.5px grey;
     max-width: 400;
     max-height: 235;
-    height:max-content;
+    height: max-content;
     .formattedTextBox-tooltipText {
         height: max-content;
         text-overflow: ellipsis;
@@ -21,7 +21,7 @@
 }
 
 .formattedTextBox-tooltip:before {
-    content: "";
+    content: '';
     height: 0;
     width: 0;
     position: absolute;
@@ -34,7 +34,7 @@
 }
 
 .formattedTextBox-tooltip:after {
-    content: "";
+    content: '';
     height: 0;
     width: 0;
     position: absolute;
@@ -44,4 +44,4 @@
     border: 5px solid transparent;
     border-bottom-width: 0;
     border-top-color: white;
-}
\ No newline at end of file
+}