aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText
diff options
context:
space:
mode:
authoralyssaf16 <alyssa_feinberg@brown.edu>2024-07-23 14:06:11 -0400
committeralyssaf16 <alyssa_feinberg@brown.edu>2024-07-23 14:06:11 -0400
commite82c95293bb2d9db32fc9901f57f1997b74597c1 (patch)
tree0c67a0a66fd7d80f1853720400bbf9e5684cb843 /src/client/views/nodes/formattedText
parent0b2a8c0d718940ddc06a966d4e027a79bb06ed6e (diff)
labeling work
Diffstat (limited to 'src/client/views/nodes/formattedText')
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss30
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx13
2 files changed, 43 insertions, 0 deletions
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>
);