From e82c95293bb2d9db32fc9901f57f1997b74597c1 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Tue, 23 Jul 2024 14:06:11 -0400
Subject: labeling work

---
 .../nodes/formattedText/FormattedTextBox.scss      | 30 ++++++++++++++++++++++
 .../views/nodes/formattedText/FormattedTextBox.tsx | 13 ++++++++++
 2 files changed, 43 insertions(+)

(limited to 'src/client/views/nodes/formattedText')

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 54643b4a5..227cd4312 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -79,7 +79,37 @@ audiotag:hover {
         right: 8px;
         position: absolute;
     }
+    .answer-icon {
+        position: absolute;
+        right: 10;
+        bottom: 10;
+        color: black;
+        display: inline-block;
+        font-size: 20px;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+
+    .q-icon {
+        position: absolute;
+        right: 6;
+        bottom: 10;
+        color: white;
+        display: inline-block;
+        font-size: 20px;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+}
+
+.answer-tooltip {
+    font-size: 15px;
+    padding: 2px;
+    max-width: 150;
+    line-height: 150%;
+    position: relative;
 }
+
 .formattedTextBox-alternateButton {
     align-items: center;
     flex-direction: column;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 274330d31..b00437cf2 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2092,6 +2092,18 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             </Tooltip>
         );
     }
+
+    @computed get answerIcon() {
+        return (
+            <Tooltip title={<div className="answer-tooltip">{StrCast(this.Document.quiz)}</div>}>
+                <div className="answer-tool-tip">
+                    <FontAwesomeIcon className="q-icon" icon="circle" color="white" />
+                    <FontAwesomeIcon className="answer-icon" icon="question" />
+                </div>
+            </Tooltip>
+        );
+    }
+
     get fieldKey() {
         return this._fieldKey;
     }
@@ -2210,6 +2222,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     {this.noSidebar || this.Document._layout_noSidebar || this.Document._createDocOnCR || this.layoutDoc._chromeHidden || this.Document.quiz ? null : this.sidebarHandle}
                     {this.audioHandle}
                     {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null}
+                    {this.Document.showQuiz ? this.answerIcon : null}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2