From c16c7645f1152ae5be05b63b075e7c97465a1130 Mon Sep 17 00:00:00 2001
From: Rasmus Fuhse <fuhse@data-quest.de>
Date: Tue, 21 Feb 2023 17:36:41 +0000
Subject: [PATCH] Resolve "Polishing TIC: Neue Icons 5.3"

Closes #1833

Merge request studip/studip!1336
---
 app/views/questionnaire/edit.php              |   7 +++--
 .../question_types/vote/_answer.php           |  10 ------
 lib/models/Freetext.php                       |   2 +-
 lib/models/LikertScale.php                    |   2 +-
 lib/models/RangeScale.php                     |   2 +-
 lib/models/Vote.php                           |   2 +-
 public/assets/images/anfasser_24.png          | Bin 1856 -> 342 bytes
 public/assets/images/anfasser_48.png          | Bin 1941 -> 512 bytes
 public/assets/images/grabber_black.svg        |  19 ++++++++++++
 public/assets/images/grabber_grey.svg         |  19 ++++++++++++
 public/assets/images/grabber_white.svg        |  19 ++++++++++++
 public/assets/images/icons/black/likert.svg   |  10 ------
 .../images/icons/black/question-likert.svg    |  22 +++++++++++++
 .../icons/black/question-rangescale.svg       |  15 +++++++++
 .../images/icons/black/question-text.svg      |  18 +++++++++++
 .../assets/images/icons/black/rangescale.svg  |  15 ---------
 public/assets/images/icons/blue/likert.svg    |  10 ------
 .../images/icons/blue/question-diagram.svg    |   1 +
 .../images/icons/blue/question-info.svg       |   1 +
 .../images/icons/blue/question-likert.svg     |   1 +
 .../images/icons/blue/question-rangescale.svg |   1 +
 .../images/icons/blue/question-text.svg       |   1 +
 .../assets/images/icons/blue/rangescale.svg   |  15 ---------
 .../images/icons/green/question-text.svg      |  18 +++++++++++
 .../images/icons/grey/question-text.svg       |  18 +++++++++++
 .../assets/images/icons/red/question-text.svg |  18 +++++++++++
 public/assets/images/icons/white/likert.svg   |  10 ------
 .../images/icons/white/question-likert.svg    |  22 +++++++++++++
 .../icons/white/question-rangescale.svg       |  15 +++++++++
 .../images/icons/white/question-text.svg      |  18 +++++++++++
 .../assets/images/icons/white/rangescale.svg  |  15 ---------
 .../images/icons/yellow/question-text.svg     |  18 +++++++++++
 .../stylesheets/scss/questionnaire.scss       |  29 +++++++++++++-----
 .../components/questionnaires/InputArray.vue  |   2 +-
 .../components/questionnaires/LikertEdit.vue  |   2 +-
 .../questionnaires/RangescaleEdit.vue         |   2 +-
 36 files changed, 276 insertions(+), 103 deletions(-)
 delete mode 100644 app/views/questionnaire/question_types/vote/_answer.php
 create mode 100644 public/assets/images/grabber_black.svg
 create mode 100644 public/assets/images/grabber_grey.svg
 create mode 100644 public/assets/images/grabber_white.svg
 delete mode 100644 public/assets/images/icons/black/likert.svg
 create mode 100644 public/assets/images/icons/black/question-likert.svg
 create mode 100644 public/assets/images/icons/black/question-rangescale.svg
 create mode 100644 public/assets/images/icons/black/question-text.svg
 delete mode 100644 public/assets/images/icons/black/rangescale.svg
 delete mode 100644 public/assets/images/icons/blue/likert.svg
 create mode 100644 public/assets/images/icons/blue/question-diagram.svg
 create mode 100644 public/assets/images/icons/blue/question-info.svg
 create mode 100644 public/assets/images/icons/blue/question-likert.svg
 create mode 100644 public/assets/images/icons/blue/question-rangescale.svg
 create mode 100644 public/assets/images/icons/blue/question-text.svg
 delete mode 100644 public/assets/images/icons/blue/rangescale.svg
 create mode 100644 public/assets/images/icons/green/question-text.svg
 create mode 100644 public/assets/images/icons/grey/question-text.svg
 create mode 100644 public/assets/images/icons/red/question-text.svg
 delete mode 100644 public/assets/images/icons/white/likert.svg
 create mode 100644 public/assets/images/icons/white/question-likert.svg
 create mode 100644 public/assets/images/icons/white/question-rangescale.svg
 create mode 100644 public/assets/images/icons/white/question-text.svg
 delete mode 100644 public/assets/images/icons/white/rangescale.svg
 create mode 100644 public/assets/images/icons/yellow/question-text.svg

diff --git a/app/views/questionnaire/edit.php b/app/views/questionnaire/edit.php
index 8e4d22d689c..9b18650811a 100644
--- a/app/views/questionnaire/edit.php
+++ b/app/views/questionnaire/edit.php
@@ -158,8 +158,9 @@ foreach ($questionnaire->questions as $question) {
                      :class="(activeTab === question.id || activeTab === 'meta_' + question.id ? 'active' : '') + (hoverTab === question.id ? ' hovered' : '')">
                     <a href="#"
                        @click.prevent="switchTab(question.id)">
-                        <span class="icon handle">
-                            <studip-icon :shape="(hoverTab === question.id) && (questions.length > 1) ? 'hamburger' : questiontypes[question.questiontype].icon" role="clickable" size="30" alt=""></studip-icon>
+                        <span class="handle"></span>
+                        <span class="icon type">
+                            <studip-icon :shape="questiontypes[question.questiontype].icon" role="clickable" size="30" alt=""></studip-icon>
                         </span>
 
                         <div v-if="editInternalName !== question.id">{{ question.internal_name || questiontypes[question.questiontype].name}}</div>
@@ -174,7 +175,7 @@ foreach ($questionnaire->questions as $question) {
                         </div>
                     </a>
 
-                    <studip-action-menu :items="[{label: '<?= _('Umbenennen') ?>', icon: 'edit', emit: 'rename'}, {label: '<?= _('Frage kopieren') ?>', icon: 'clipboard', emit: 'copy'}, {label: '<?= _('Frage nach oben verschieben') ?>', icon: 'arr_1up', emit: 'moveup'}, {label: '<?= _('Frage nach unten verschieben') ?>', icon: 'arr_1down', emit: 'movedown'}, {label: '<?= _('Frage löschen') ?>', icon: 'trash', emit: 'delete'}]"
+                    <studip-action-menu :items="[{label: '<?= _('Umbenennen') ?>', icon: 'edit', emit: 'rename'}, {label: '<?= _('Frage kopieren') ?>', icon: 'copy', emit: 'copy'}, {label: '<?= _('Frage nach oben verschieben') ?>', icon: 'arr_1up', emit: 'moveup'}, {label: '<?= _('Frage nach unten verschieben') ?>', icon: 'arr_1down', emit: 'movedown'}, {label: '<?= _('Frage löschen') ?>', icon: 'trash', emit: 'delete'}]"
                                         @copy="duplicateQuestion(question.id)"
                                         @rename="renameInternalName(question.id)"
                                         @moveup="moveQuestionUp(question.id)"
diff --git a/app/views/questionnaire/question_types/vote/_answer.php b/app/views/questionnaire/question_types/vote/_answer.php
deleted file mode 100644
index 95c26edc8af..00000000000
--- a/app/views/questionnaire/question_types/vote/_answer.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<li>
-    <?= Assets::img('anfasser_24.png', [ 'title' => _('Antwort verschieben'), 'class' => 'move' ]) ?>
-    <input type="text"
-           name="questions[<?= $vote->getId() ?>][task][answers][]"
-           value="<?= htmlReady($answer['text'] ?? '') ?>"
-           placeholder="<?= _('Antwort ...') ?>"
-           aria-label="<?= _('Geben Sie eine Antwortmöglichkeit zu der von Ihnen gestellten Frage ein.') ?>">
-    <?= Icon::create('trash', ['title' => _('Antwort löschen')])->asImg(20, ['class' => 'text-bottom delete']) ?>
-    <?= Icon::create('add', ['title' => _('Antwort hinzufügen')])->asImg(20, ['class' => 'text-bottom add']) ?>
-</li>
diff --git a/lib/models/Freetext.php b/lib/models/Freetext.php
index 4cc8b62348c..4922030e69d 100644
--- a/lib/models/Freetext.php
+++ b/lib/models/Freetext.php
@@ -23,7 +23,7 @@ class Freetext extends QuestionnaireQuestion implements QuestionType
      */
     public static function getIconShape()
     {
-        return 'guestbook';
+        return 'question-text';
     }
 
     /**
diff --git a/lib/models/LikertScale.php b/lib/models/LikertScale.php
index d5d2d06da1e..5e55e3c294d 100644
--- a/lib/models/LikertScale.php
+++ b/lib/models/LikertScale.php
@@ -14,7 +14,7 @@ class LikertScale extends QuestionnaireQuestion implements QuestionType
      */
     public static function getIconShape()
     {
-        return 'likert';
+        return 'question-likert';
     }
 
     public static function getName()
diff --git a/lib/models/RangeScale.php b/lib/models/RangeScale.php
index a196462c89e..3c89195704f 100644
--- a/lib/models/RangeScale.php
+++ b/lib/models/RangeScale.php
@@ -14,7 +14,7 @@ class RangeScale extends QuestionnaireQuestion implements QuestionType
      */
     public static function getIconShape()
     {
-        return 'rangescale';
+        return 'question-rangescale';
     }
 
     public static function getName()
diff --git a/lib/models/Vote.php b/lib/models/Vote.php
index 12c8feed9dc..9c81b2dc868 100644
--- a/lib/models/Vote.php
+++ b/lib/models/Vote.php
@@ -14,7 +14,7 @@ class Vote extends QuestionnaireQuestion implements QuestionType
      */
     public static function getIconShape()
     {
-        return 'vote';
+        return 'question-diagram';
     }
 
     public static function getName()
diff --git a/public/assets/images/anfasser_24.png b/public/assets/images/anfasser_24.png
index 2332e02ba430f11fbdd811b332da84f7619ce10b..7a07c5a09fe4e61ecd030d86b46282b1bda8a72e 100644
GIT binary patch
literal 342
zcmV-c0jd6pP)<h;3K|Lk000e1NJLTq000O8000;W1^@s6$Jx9P00009a7bBm000XT
z000XT0n*)m`~Uy}2uVaiR49?9k}+z-FcgMAyWOoL_y+OVF(r^8Q*#4%m!V)!_N-0N
zf|ic%4ZH<11Ro*2fyXX|2D)`nhgd;T5>n_74<tSG>w9_+Yb{~OvKF$eQ)?}ewH9AR
z)d-*mQeb+^siweWT&K?RMV58$J(0V8B+L2<cph)u8?AcZE(TiQ9e8ueqH07@H5ssn
zEUHErt-j7d#sDsP0NY36L$(2A_HW4S2r~G|Y=q<hc|i$~MzXA3SzDu3?zyB!t1g6m
zG+MPsK3<t^Q0Bv>c00%fSjOX_I0Lx@hMUjt9|82M_2zCdpLL7*>|?dwyaJukYJ2r3
oulM3lkb#CVcEE5l^5NM30;f6KQwu1W`v3p{07*qoM6N<$g1R%0vj6}9

literal 1856
zcmbVNO^6#+98VWr%hoL_1zSa&PK&Z^GxOdgGs!$QU6M?8H(++xBw$3ezRbK$hRu9*
z=Itigi?|5dMK2yKDlNPAq8HJFXsMvIxKzc1Ql#i@J$Mk6s#Pi;e3ML4KT=a1n3?w;
zzyIg&H~%@YI6pf+cF$NO5*g3WX+`$FjotfqkFuxo#kZ%}>j2GFXvtZkP3)0K+Hk6b
z%UifciUb?&;~$f$NM!T@vs|H-!b3=RECB}?p=G(uIue<hZn;=rCX}m^nrWx_AJ2Wj
zbEc8vACU{7;ATnPoLloqX>Go&uPy7U!A~FMrdo(Oun5Im%WBv@YNhy&U&PkIvB+~B
z2whI`-J~joMK0@jgp&mj)qw&zB`&}?P~++mP67~!P!d5R3IUQ62tY2pcoxkwmQYcf
z31hKcimy}ZB2jEMn?f@tI9^SJs;Y`W5+y0h5K+HvQ{0N${-K@+jrh7}y3}-RF7Sw}
z&I(QOEYofYmfLr0`(c|{!^9SLMJRxvqz=%~`#5*SYjlDex=0$tA~y9I7WT2MONBxo
zKG3aY_0c}ft+I^5+6JQia@!?hk@(Jvr<2?&i+HG)m`{u3dTVaNoWVQBF3NfYQ^zYi
zPNPTIV%?#RUw2$CTapFH6|ipF!ATG<v>+O$B*ioOq$o&6CAlmy`eG;^n*<U9pbITH
zhPl-K7Zj?DW)y>egEH+HnBt*eLq|)FXJOVZGmyLJ+O<x!LILG%pJH1lc`e1WR0Y#C
zkUBFX%MfI936Oy>2Q#WHtBL~CaV4XuGVIxEj=mDm*t0dR+iJsX7d(@FLbx%=2Z$#D
zgo!vvNI*$Km`p2L8fqD+sj)PSDS=2kVnK7J&zNY3vM-V2;i_SB9ep6I2NF*4dcYYm
z`0&^qQ1#HLp>4BHn8W{|u^ZVB=S;fBIy77-;*B!*@#>Jg<ssd=Vcw9b4oQ9a{ja=3
z=XxF6HNqyL$On~(!OZB=A^wx8?p`CF$qJkC9E-VN9~T<P$xYN2*ct<rIF!$RqJJ57
zz1-OZ4VL}U%{KkvPi$7F$3}aZe+RSQ!drPQU2c8#%!`kXod^3zzg}PG-@DYjGGf2`
z{nn)iukICACU)oc{CeTq)*rjZ4_`2Tx+Al5<kRhk_nrFg0C?l%{4e)CzVOkl(zCHM
zJ9oXEojkL1%gdRcPgFOa-)#S$*n8(UAHIJ1w^u*AoE=f_Ke$=F_ex`8`?=a{m4i<G
ziHVmk?s?_p#=_yv>eEx3?XA|VeR@Onu9n~D&eqO9^?4GV-q*ai>xUOM9y7)h+sE$y
cWP0TG$d@H}?Aq+n$>5)s&&_LZW}aOC6VYf-z5oCK

diff --git a/public/assets/images/anfasser_48.png b/public/assets/images/anfasser_48.png
index 2e3b3095aced79bd9bb73b3f94c16f639e6f199b..7ac5a02744bad3679b6340493e8eb36962ad98b5 100644
GIT binary patch
literal 512
zcmV+b0{{JqP)<h;3K|Lk000e1NJLTq000O8001xu1^@s6EG9ck00009a7bBm000XT
z000XT0n*)m`~Uy}vPnciR5*=|)G=<`Fcg5{->!G-2)scwW>gU%Lnh}2$}RyZq)D2&
z5oiEjfZejyn+p$)$BydOQDc_^3ec?sJA|xhR+3AAfTSlqexx3`u+}oymb1~h7s|R#
z02X6Ilyz%>6v+O0p{&~scyYHMu+~ykO<q(@YOM|LjkT6VQ8gRjGw=#zTFEX(_Ac1F
zPFc6f8M3U~6zH{*g9{v8f@}p4rOkjVcb$i*JVHLjNPv5-<aP@A&5!MnB18&ch>#*g
z_7h0qQDy|0d*mbV(S7k=D|rmEu>_0*e)2(wOhaU%l^lF9L@ph22(k*-*D=xr$aD(%
zpp`UpNaGyo88U1x;HR3+mHiqJi=t}$v^uS19%K<($?Zkt+%z}V+F9fpxL>-5$q4cl
z=->VP^*aHMyZzz%?)GMTcYE_=w?BLVj8?L{_`9bH=JYTA8yP@*g6$ZtB)n~2U)e${
z*{y(_Qx#{x))i0}BA+I!dIWj46+Kb}$RlqB^mipw;484%?GMjd$ziuYJiC?rzT#BD
zR}pdukz?nBnL=g+$Kb_-6rVQkMb#vuL&WXkY5xcKGLSM$+XSKj0000<MNUMnLSTYH
Co8egi

literal 1941
zcmbVNTWs586!wr-pfGh}476+l*VD$N5!=5LJF(SJC3Q-(EhS0=>jS8D?7xZE_)^<V
z(yC)BtC+g2($L0k55Ou7_B4s9Y@kZ57=nTXV-Fxr2v)jE@K%_F#8trW+{Ps%6Oj`C
zw!U-Dch2|uWHQnH<eFwrGlpSnVqIbqUGGL;`kp5A`<1u<19aKoM0=ecW56j$7R17e
zk%o9olQJ*~C1qsjBiM#vO<UDeuhSdfCCG+GN-l;hY9@-tu(tN1DanJ-!P79K>LKF0
z*?9t2l@PI;jni?n17_8(Q498rcBkagL77*G_9yVRqJR=;(2?+>meXya7$Qn}1$1^F
zQv_auID;XgOsY4Yz&i{J;w(vfWtsyx=O=-m=KcKRI70)P0t`h5ynq(ifItJh@*z+)
zOBoQ7VrQimx(g9m$1w$pDijK2!ABZah5|g#Q#3;{j29ui_K5CCMXzpeu4WLSEnBMT
zsD_Ta8Ktx_?1Tu!wA_Mb*3#;BWlU&bR8cZ1K+<kYC7>eLaOSX;D-~B{3g(~&b;m|n
zP{X1r#p5-2-L#rkL)%U?j~G>YtBbZ%BPOJh&^CrG8AkJ{;^rzb+eyM(qq&1{1TO`f
zLWcz<$FNd{k*f-p$Qq7eXAKkY=wV5K$0b?S-6w9jN(2-o2ZjhFALFHiUWQFENIsw7
z_id*cfu_sQxS^;6BmaT|9w7uD^EW8+jv_fyL$D$X1BRtZXk4mmcgoZ=rE2lG5Yuf(
z(q$MELj<Bqs;VMzbeQ9~fG--LBLGA}glAcv<3QNYML3=X)mYJxhg}(~vC6Gjf1}u^
zEET;%Qm$SO+8?9=2>9s$Lvuj@f?-Y!12F<b-WLWw&NXStEJBxRBPB*Ew(o&Ml~Yc|
zOa2ff*|l(pkX_B7LR22Bb-Hd?wGvy%LX_}7WGq*<D|;rKK@)216Y6%%Z7JV?H``!Z
zx8)67Pcb$7{V(2?<Z@QhGZ1Y;if}uj+?`RDgZigZ<$DoYDr&6LGBlI|y<9?FP41vK
zH&&_R#D;p-i2h~SRk@=L>K<#W8{O2FKh#m57Fz9Ze6s!l3|qB2CWceRFOD6Z+;cgx
zHhNTjc6#Qa6Xg6WEi>m{oB90h^e>$&6HDKmx;Xyr(#Jy+6DOZ}`sFWYFHCQ18i&F6
z%>2@4<kIqnzD?tA4Q}c<yw0BTeRyARb;h%}ZO*gTKeurU_ruM5(_{YTmF@5D-Fn4-
z)INCWz>&qt{nrLo_8kvQzxnC0YgZSp_oerHW{)(n`E2(3O>pS_!|C``%i7noyIMQd
zL;15eCKgwAEU&+uo7z3~u;+B&SlhylQwZ{y=k%-oM_Lyy7W;qqv}i*uYU2Ape%$!$
zKI8a<JLlh#_x$!^Zt~JktE4L|iSN8R*80+!pOec64}862*>j=wJo|iP?qvI2_haW0
V>F0<o>(cHYWh~k)o{#ju@F%LGe9Zs=

diff --git a/public/assets/images/grabber_black.svg b/public/assets/images/grabber_black.svg
new file mode 100644
index 00000000000..29586cbaef9
--- /dev/null
+++ b/public/assets/images/grabber_black.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 20 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <g id="d">
+            <g>
+                <ellipse cx="15.97" cy="18.02" rx="4.03" ry="4.01"/>
+                <ellipse cx="15.97" cy="4.01" rx="4.03" ry="4.01"/>
+                <ellipse cx="15.97" cy="32.03" rx="4.03" ry="4.01"/>
+                <ellipse cx="15.97" cy="46.01" rx="4.03" ry="4.01"/>
+                <ellipse cx="4.03" cy="10.97" rx="4.03" ry="4.01"/>
+                <ellipse cx="4.03" cy="24.98" rx="4.03" ry="4.01"/>
+                <ellipse cx="4.03" cy="38.96" rx="4.03" ry="4.01"/>
+                <ellipse cx="15.97" cy="59.99" rx="4.03" ry="4.01"/>
+                <ellipse cx="4.03" cy="52.95" rx="4.03" ry="4.01"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/grabber_grey.svg b/public/assets/images/grabber_grey.svg
new file mode 100644
index 00000000000..0809cf8d25d
--- /dev/null
+++ b/public/assets/images/grabber_grey.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 20 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <g id="d">
+            <g>
+                <ellipse cx="15.97" cy="18.02" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="15.97" cy="4.01" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="15.97" cy="32.03" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="15.97" cy="46.01" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="4.03" cy="10.97" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="4.03" cy="24.98" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="4.03" cy="38.96" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="15.97" cy="59.99" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+                <ellipse cx="4.03" cy="52.95" rx="4.03" ry="4.01" style="fill:rgb(110,110,110);"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/grabber_white.svg b/public/assets/images/grabber_white.svg
new file mode 100644
index 00000000000..84af123ca74
--- /dev/null
+++ b/public/assets/images/grabber_white.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 20 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <g id="d">
+            <g>
+                <ellipse cx="15.97" cy="18.02" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="15.97" cy="4.01" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="15.97" cy="32.03" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="15.97" cy="46.01" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="4.03" cy="10.97" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="4.03" cy="24.98" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="4.03" cy="38.96" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="15.97" cy="59.99" rx="4.03" ry="4.01" style="fill:white;"/>
+                <ellipse cx="4.03" cy="52.95" rx="4.03" ry="4.01" style="fill:white;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/black/likert.svg b/public/assets/images/icons/black/likert.svg
deleted file mode 100644
index 28691298050..00000000000
--- a/public/assets/images/icons/black/likert.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M7.25,5.75C7.25,6.164 6.914,6.5 6.5,6.5C6.086,6.5 5.75,6.164 5.75,5.75C5.75,5.336 6.086,5 6.5,5C6.914,5 7.25,5.336 7.25,5.75ZM9.25,5.75C9.25,6.164 8.914,6.5 8.5,6.5C8.086,6.5 7.75,6.164 7.75,5.75C7.75,5.336 8.086,5 8.5,5C8.914,5 9.25,5.336 9.25,5.75ZM11.25,5.75C11.25,6.164 10.914,6.5 10.5,6.5C10.086,6.5 9.75,6.164 9.75,5.75C9.75,5.336 10.086,5 10.5,5C10.914,5 11.25,5.336 11.25,5.75ZM13.25,5.75C13.25,6.164 12.914,6.5 12.5,6.5C12.086,6.5 11.75,6.164 11.75,5.75C11.75,5.336 12.086,5 12.5,5C12.914,5 13.25,5.336 13.25,5.75ZM6.5,11C6.914,11 7.25,10.664 7.25,10.25C7.25,9.836 6.914,9.5 6.5,9.5C6.086,9.5 5.75,9.836 5.75,10.25C5.75,10.664 6.086,11 6.5,11ZM8.5,11C8.914,11 9.25,10.664 9.25,10.25C9.25,9.836 8.914,9.5 8.5,9.5C8.086,9.5 7.75,9.836 7.75,10.25C7.75,10.664 8.086,11 8.5,11ZM10.5,11C10.914,11 11.25,10.664 11.25,10.25C11.25,9.836 10.914,9.5 10.5,9.5C10.086,9.5 9.75,9.836 9.75,10.25C9.75,10.664 10.086,11 10.5,11ZM12.5,11C12.914,11 13.25,10.664 13.25,10.25C13.25,9.836 12.914,9.5 12.5,9.5C12.086,9.5 11.75,9.836 11.75,10.25C11.75,10.664 12.086,11 12.5,11Z" style="fill-rule:nonzero;"/>
-    </g>
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M1,5.5C1,4.119 2.119,3 3.5,3L12.5,3C13.881,3 15,4.119 15,5.5L15,10.5C15,11.881 13.881,13 12.5,13L3.5,13C2.119,13 1,11.881 1,10.5L1,5.5ZM3.5,4C2.672,4 2,4.672 2,5.5L2,7.5L4,7.5L4,4L3.5,4ZM5,4L5,7.5L14,7.5L14,5.5C14,4.672 13.328,4 12.5,4L5,4ZM4,8.5L2,8.5L2,10.5C2,11.328 2.672,12 3.5,12L4,12L4,8.5ZM5,12L12.5,12C13.328,12 14,11.328 14,10.5L14,8.5L5,8.5L5,12Z" style="fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/black/question-likert.svg b/public/assets/images/icons/black/question-likert.svg
new file mode 100644
index 00000000000..5798fb3a212
--- /dev/null
+++ b/public/assets/images/icons/black/question-likert.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <g>
+                <path d="M4,14L4,50L60,50L60,14L4,14ZM57,17L57,30.5L16.5,30.5L16.5,17L57,17ZM7,17L13.5,17L13.5,30.5L7,30.5L7,17ZM7,47L7,33.5L13.5,33.5L13.5,47L7,47ZM16.5,47L16.5,33.5L57,33.5L57,47L16.5,47Z" style="fill-rule:nonzero;"/>
+                <circle cx="22.5" cy="23.5" r="2.5"/>
+                <circle cx="41.83" cy="23.5" r="2.5"/>
+                <circle cx="51.5" cy="23.5" r="2.5"/>
+                <circle cx="32.17" cy="23.5" r="2.5"/>
+                <circle cx="22.25" cy="40.5" r="2.5"/>
+                <circle cx="41.75" cy="40.5" r="2.5"/>
+                <circle cx="51.5" cy="40.5" r="2.5"/>
+                <circle cx="32" cy="40.5" r="2.5"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/black/question-rangescale.svg b/public/assets/images/icons/black/question-rangescale.svg
new file mode 100644
index 00000000000..585c86c56d4
--- /dev/null
+++ b/public/assets/images/icons/black/question-rangescale.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <g>
+                <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill-rule:nonzero;"/>
+                <path d="M18,35.98L15.52,33.5L26.2,33.5C26.87,36.09 29.21,38 32,38C34.79,38 37.14,36.09 37.8,33.5L48.48,33.5L46,35.98L46,40.03L54,32.03L46,24.03L46,28.08L48.42,30.5L37.8,30.5C37.13,27.91 34.79,26 32,26C29.21,26 26.86,27.91 26.2,30.5L15.58,30.5L18,28.08L18,24.03L10,32.03L18,40.03L18,35.98ZM32,29C33.65,29 35,30.35 35,32C35,33.65 33.65,35 32,35C30.35,35 29,33.65 29,32C29,30.35 30.35,29 32,29Z" style="fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/black/question-text.svg b/public/assets/images/icons/black/question-text.svg
new file mode 100644
index 00000000000..3352c83f7c3
--- /dev/null
+++ b/public/assets/images/icons/black/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2"/>
+                <rect x="35.05" y="20" width="4" height="2"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/black/rangescale.svg b/public/assets/images/icons/black/rangescale.svg
deleted file mode 100644
index 1183e00b40a..00000000000
--- a/public/assets/images/icons/black/rangescale.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 700 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M314.72,263.2L211.12,263.2L233.518,240.802C240.237,234.083 240.237,224.001 233.518,217.282C226.799,210.563 216.717,210.563 209.998,217.282L159.6,267.68C152.881,274.399 152.881,284.481 159.6,291.2L209.998,341.598C213.357,344.957 217.279,346.637 221.76,346.637C226.241,346.637 230.158,344.957 233.522,341.598C240.241,334.879 240.241,324.797 233.522,318.078L211.124,295.68L314.724,295.68C323.685,295.68 331.525,288.399 331.525,278.879C331.517,271.039 323.677,263.199 314.716,263.199L314.72,263.2Z" style="fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M490.56,217.84C487.201,214.481 482.72,212.801 478.802,212.801C474.322,212.801 470.404,214.481 467.04,217.84C460.321,224.559 460.321,234.641 467.04,241.36L489.438,263.758L385.278,263.762C376.317,263.762 368.477,271.043 368.477,280.563C368.477,289.524 375.758,297.364 385.278,297.364L488.878,297.364L466.48,319.762C459.761,326.481 459.761,336.563 466.48,343.282C473.199,350.001 483.281,350.001 490,343.282L540.398,292.884C547.117,286.165 547.117,276.083 540.398,269.364L490.56,217.84Z" style="fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M551.604,138.32L148.4,138.32C113.119,138.32 84.002,167.441 84.002,202.718L84.002,357.278C84.002,392.559 113.123,421.676 148.4,421.676L551.6,421.676C586.881,421.676 615.998,392.555 615.998,357.278L616.002,202.718C616.002,167.441 586.881,138.32 551.604,138.32ZM582.397,357.28C582.397,374.639 568.397,388.081 551.596,388.081L148.396,388.077C131.037,388.077 117.595,374.077 117.595,357.276L117.599,202.716C117.599,185.357 131.599,171.915 148.4,171.915L551.6,171.915C568.959,171.915 582.401,185.915 582.401,202.716L582.397,357.28Z" style="fill-rule:nonzero;"/>
-        </g>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/blue/likert.svg b/public/assets/images/icons/blue/likert.svg
deleted file mode 100644
index 6fe00e910e9..00000000000
--- a/public/assets/images/icons/blue/likert.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M7.25,5.75C7.25,6.164 6.914,6.5 6.5,6.5C6.086,6.5 5.75,6.164 5.75,5.75C5.75,5.336 6.086,5 6.5,5C6.914,5 7.25,5.336 7.25,5.75ZM9.25,5.75C9.25,6.164 8.914,6.5 8.5,6.5C8.086,6.5 7.75,6.164 7.75,5.75C7.75,5.336 8.086,5 8.5,5C8.914,5 9.25,5.336 9.25,5.75ZM11.25,5.75C11.25,6.164 10.914,6.5 10.5,6.5C10.086,6.5 9.75,6.164 9.75,5.75C9.75,5.336 10.086,5 10.5,5C10.914,5 11.25,5.336 11.25,5.75ZM13.25,5.75C13.25,6.164 12.914,6.5 12.5,6.5C12.086,6.5 11.75,6.164 11.75,5.75C11.75,5.336 12.086,5 12.5,5C12.914,5 13.25,5.336 13.25,5.75ZM6.5,11C6.914,11 7.25,10.664 7.25,10.25C7.25,9.836 6.914,9.5 6.5,9.5C6.086,9.5 5.75,9.836 5.75,10.25C5.75,10.664 6.086,11 6.5,11ZM8.5,11C8.914,11 9.25,10.664 9.25,10.25C9.25,9.836 8.914,9.5 8.5,9.5C8.086,9.5 7.75,9.836 7.75,10.25C7.75,10.664 8.086,11 8.5,11ZM10.5,11C10.914,11 11.25,10.664 11.25,10.25C11.25,9.836 10.914,9.5 10.5,9.5C10.086,9.5 9.75,9.836 9.75,10.25C9.75,10.664 10.086,11 10.5,11ZM12.5,11C12.914,11 13.25,10.664 13.25,10.25C13.25,9.836 12.914,9.5 12.5,9.5C12.086,9.5 11.75,9.836 11.75,10.25C11.75,10.664 12.086,11 12.5,11Z" style="fill:rgb(35,66,122);fill-rule:nonzero;"/>
-    </g>
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M1,5.5C1,4.119 2.119,3 3.5,3L12.5,3C13.881,3 15,4.119 15,5.5L15,10.5C15,11.881 13.881,13 12.5,13L3.5,13C2.119,13 1,11.881 1,10.5L1,5.5ZM3.5,4C2.672,4 2,4.672 2,5.5L2,7.5L4,7.5L4,4L3.5,4ZM5,4L5,7.5L14,7.5L14,5.5C14,4.672 13.328,4 12.5,4L5,4ZM4,8.5L2,8.5L2,10.5C2,11.328 2.672,12 3.5,12L4,12L4,8.5ZM5,12L12.5,12C13.328,12 14,11.328 14,10.5L14,8.5L5,8.5L5,12Z" style="fill:rgb(35,66,122);fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/blue/question-diagram.svg b/public/assets/images/icons/blue/question-diagram.svg
new file mode 100644
index 00000000000..b4d50878b0f
--- /dev/null
+++ b/public/assets/images/icons/blue/question-diagram.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><rect class="g" x="10" y="24" width="8" height="21"/><rect class="g" x="22" y="19" width="8" height="26"/><rect class="g" x="34" y="36" width="8" height="9"/><rect class="g" x="46" y="28" width="8" height="17"/><path class="g" d="m4,14v36h56V14H4Zm53,33H7v-30h50v30Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/images/icons/blue/question-info.svg b/public/assets/images/icons/blue/question-info.svg
new file mode 100644
index 00000000000..9c892c4bf6e
--- /dev/null
+++ b/public/assets/images/icons/blue/question-info.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><path class="g" d="m31.71,25.49c1.49,0,2.68-1.23,2.68-2.74s-1.2-2.75-2.68-2.75-2.68,1.23-2.68,2.75,1.2,2.74,2.68,2.74Z"/><polygon class="g" points="34.35 28.3 26.32 28.3 26.32 30.34 28.95 30.34 28.95 41.28 26.31 41.28 26.31 44 37 44 37 41.28 34.35 41.28 34.35 28.3"/><path class="g" d="m4,14v36h56V14H4Zm53,33H7v-30h50v30Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/images/icons/blue/question-likert.svg b/public/assets/images/icons/blue/question-likert.svg
new file mode 100644
index 00000000000..4fd0c19de20
--- /dev/null
+++ b/public/assets/images/icons/blue/question-likert.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><g><path class="g" d="m4,14v36h56V14H4Zm53,3v13.5H16.5v-13.5h40.5Zm-50,0h6.5v13.5h-6.5v-13.5Zm0,30v-13.5h6.5v13.5h-6.5Zm9.5,0v-13.5h40.5v13.5H16.5Z"/><circle class="g" cx="22.5" cy="23.5" r="2.5"/><circle class="g" cx="41.83" cy="23.5" r="2.5"/><circle class="g" cx="51.5" cy="23.5" r="2.5"/><circle class="g" cx="32.17" cy="23.5" r="2.5"/><circle class="g" cx="22.25" cy="40.5" r="2.5"/><circle class="g" cx="41.75" cy="40.5" r="2.5"/><circle class="g" cx="51.5" cy="40.5" r="2.5"/><circle class="g" cx="32" cy="40.5" r="2.5"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/images/icons/blue/question-rangescale.svg b/public/assets/images/icons/blue/question-rangescale.svg
new file mode 100644
index 00000000000..c2559c3c94e
--- /dev/null
+++ b/public/assets/images/icons/blue/question-rangescale.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><g><path class="g" d="m4,14v36h56V14H4Zm53,33H7v-30h50v30Z"/><path class="g" d="m18,35.98l-2.48-2.48h10.68c.67,2.59,3.01,4.5,5.8,4.5s5.14-1.91,5.8-4.5h10.68l-2.48,2.48v4.05l8-8-8-8v4.05l2.42,2.42h-10.62c-.67-2.59-3.01-4.5-5.8-4.5s-5.14,1.91-5.8,4.5h-10.62l2.42-2.42v-4.05l-8,8,8,8v-4.05Zm14-6.98c1.65,0,3,1.35,3,3s-1.35,3-3,3-3-1.35-3-3,1.35-3,3-3Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/images/icons/blue/question-text.svg b/public/assets/images/icons/blue/question-text.svg
new file mode 100644
index 00000000000..cec626aad98
--- /dev/null
+++ b/public/assets/images/icons/blue/question-text.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><path class="g" d="m4,14v36h56V14H4Zm53,33H7v-30h50v30Z"/><g><polygon class="g" points="35.05 36 37.05 36 37.05 34 35.05 34 35.05 22.06 33.05 22.06 33.05 34 31.05 34 31.05 36 33.05 36 33.05 42 29.05 42 29.05 44 33.05 44 33.05 42.06 35.05 42.06 35.05 44 39.05 44 39.05 42 35.05 42 35.05 36"/><rect class="g" x="29.05" y="20" width="4" height="2"/><rect class="g" x="35.05" y="20" width="4" height="2"/><path class="g" d="m20.87,24l-.69-2h-5.18v2h2.14l-5.5,16h-2.64v2h3.75c.2,0,.37-.07.5-.2.14-.13.23-.28.28-.45l1.61-4.83h7.72l1.61,4.83c.06.19.16.34.29.46.13.12.3.18.5.18h3.74v-2h-2.63l-5.5-16Zm-5.08,10.58l2.7-8.12c.18-.5.35-1.13.52-1.88.08.36.16.71.25,1.03.09.32.17.6.25.84l2.7,8.14h-6.42Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/images/icons/blue/rangescale.svg b/public/assets/images/icons/blue/rangescale.svg
deleted file mode 100644
index 7d0a9bfa546..00000000000
--- a/public/assets/images/icons/blue/rangescale.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 700 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M314.72,263.2L211.12,263.2L233.518,240.802C240.237,234.083 240.237,224.001 233.518,217.282C226.799,210.563 216.717,210.563 209.998,217.282L159.6,267.68C152.881,274.399 152.881,284.481 159.6,291.2L209.998,341.598C213.357,344.957 217.279,346.637 221.76,346.637C226.241,346.637 230.158,344.957 233.522,341.598C240.241,334.879 240.241,324.797 233.522,318.078L211.124,295.68L314.724,295.68C323.685,295.68 331.525,288.399 331.525,278.879C331.517,271.039 323.677,263.199 314.716,263.199L314.72,263.2Z" style="fill:rgb(35,66,122);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M490.56,217.84C487.201,214.481 482.72,212.801 478.802,212.801C474.322,212.801 470.404,214.481 467.04,217.84C460.321,224.559 460.321,234.641 467.04,241.36L489.438,263.758L385.278,263.762C376.317,263.762 368.477,271.043 368.477,280.563C368.477,289.524 375.758,297.364 385.278,297.364L488.878,297.364L466.48,319.762C459.761,326.481 459.761,336.563 466.48,343.282C473.199,350.001 483.281,350.001 490,343.282L540.398,292.884C547.117,286.165 547.117,276.083 540.398,269.364L490.56,217.84Z" style="fill:rgb(35,66,122);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M551.604,138.32L148.4,138.32C113.119,138.32 84.002,167.441 84.002,202.718L84.002,357.278C84.002,392.559 113.123,421.676 148.4,421.676L551.6,421.676C586.881,421.676 615.998,392.555 615.998,357.278L616.002,202.718C616.002,167.441 586.881,138.32 551.604,138.32ZM582.397,357.28C582.397,374.639 568.397,388.081 551.596,388.081L148.396,388.077C131.037,388.077 117.595,374.077 117.595,357.276L117.599,202.716C117.599,185.357 131.599,171.915 148.4,171.915L551.6,171.915C568.959,171.915 582.401,185.915 582.401,202.716L582.397,357.28Z" style="fill:rgb(35,66,122);fill-rule:nonzero;"/>
-        </g>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/green/question-text.svg b/public/assets/images/icons/green/question-text.svg
new file mode 100644
index 00000000000..01e20dcd46c
--- /dev/null
+++ b/public/assets/images/icons/green/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:rgb(0,150,45);fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill:rgb(0,150,45);fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2" style="fill:rgb(0,150,45);"/>
+                <rect x="35.05" y="20" width="4" height="2" style="fill:rgb(0,150,45);"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill:rgb(0,150,45);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/grey/question-text.svg b/public/assets/images/icons/grey/question-text.svg
new file mode 100644
index 00000000000..512ccd6978f
--- /dev/null
+++ b/public/assets/images/icons/grey/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:rgb(110,110,110);fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill:rgb(110,110,110);fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2" style="fill:rgb(110,110,110);"/>
+                <rect x="35.05" y="20" width="4" height="2" style="fill:rgb(110,110,110);"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill:rgb(110,110,110);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/red/question-text.svg b/public/assets/images/icons/red/question-text.svg
new file mode 100644
index 00000000000..b423fbf8c75
--- /dev/null
+++ b/public/assets/images/icons/red/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:rgb(203,24,0);fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill:rgb(203,24,0);fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2" style="fill:rgb(203,24,0);"/>
+                <rect x="35.05" y="20" width="4" height="2" style="fill:rgb(203,24,0);"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill:rgb(203,24,0);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/white/likert.svg b/public/assets/images/icons/white/likert.svg
deleted file mode 100644
index 6d424678280..00000000000
--- a/public/assets/images/icons/white/likert.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M7.25,5.75C7.25,6.164 6.914,6.5 6.5,6.5C6.086,6.5 5.75,6.164 5.75,5.75C5.75,5.336 6.086,5 6.5,5C6.914,5 7.25,5.336 7.25,5.75ZM9.25,5.75C9.25,6.164 8.914,6.5 8.5,6.5C8.086,6.5 7.75,6.164 7.75,5.75C7.75,5.336 8.086,5 8.5,5C8.914,5 9.25,5.336 9.25,5.75ZM11.25,5.75C11.25,6.164 10.914,6.5 10.5,6.5C10.086,6.5 9.75,6.164 9.75,5.75C9.75,5.336 10.086,5 10.5,5C10.914,5 11.25,5.336 11.25,5.75ZM13.25,5.75C13.25,6.164 12.914,6.5 12.5,6.5C12.086,6.5 11.75,6.164 11.75,5.75C11.75,5.336 12.086,5 12.5,5C12.914,5 13.25,5.336 13.25,5.75ZM6.5,11C6.914,11 7.25,10.664 7.25,10.25C7.25,9.836 6.914,9.5 6.5,9.5C6.086,9.5 5.75,9.836 5.75,10.25C5.75,10.664 6.086,11 6.5,11ZM8.5,11C8.914,11 9.25,10.664 9.25,10.25C9.25,9.836 8.914,9.5 8.5,9.5C8.086,9.5 7.75,9.836 7.75,10.25C7.75,10.664 8.086,11 8.5,11ZM10.5,11C10.914,11 11.25,10.664 11.25,10.25C11.25,9.836 10.914,9.5 10.5,9.5C10.086,9.5 9.75,9.836 9.75,10.25C9.75,10.664 10.086,11 10.5,11ZM12.5,11C12.914,11 13.25,10.664 13.25,10.25C13.25,9.836 12.914,9.5 12.5,9.5C12.086,9.5 11.75,9.836 11.75,10.25C11.75,10.664 12.086,11 12.5,11Z" style="fill:white;fill-rule:nonzero;"/>
-    </g>
-    <g transform="matrix(1.0976,0,0,1.0976,-0.780776,-0.780776)">
-        <path d="M1,5.5C1,4.119 2.119,3 3.5,3L12.5,3C13.881,3 15,4.119 15,5.5L15,10.5C15,11.881 13.881,13 12.5,13L3.5,13C2.119,13 1,11.881 1,10.5L1,5.5ZM3.5,4C2.672,4 2,4.672 2,5.5L2,7.5L4,7.5L4,4L3.5,4ZM5,4L5,7.5L14,7.5L14,5.5C14,4.672 13.328,4 12.5,4L5,4ZM4,8.5L2,8.5L2,10.5C2,11.328 2.672,12 3.5,12L4,12L4,8.5ZM5,12L12.5,12C13.328,12 14,11.328 14,10.5L14,8.5L5,8.5L5,12Z" style="fill:white;fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/white/question-likert.svg b/public/assets/images/icons/white/question-likert.svg
new file mode 100644
index 00000000000..174828d4a8d
--- /dev/null
+++ b/public/assets/images/icons/white/question-likert.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <g>
+                <path d="M4,14L4,50L60,50L60,14L4,14ZM57,17L57,30.5L16.5,30.5L16.5,17L57,17ZM7,17L13.5,17L13.5,30.5L7,30.5L7,17ZM7,47L7,33.5L13.5,33.5L13.5,47L7,47ZM16.5,47L16.5,33.5L57,33.5L57,47L16.5,47Z" style="fill:white;fill-rule:nonzero;"/>
+                <circle cx="22.5" cy="23.5" r="2.5" style="fill:white;"/>
+                <circle cx="41.83" cy="23.5" r="2.5" style="fill:white;"/>
+                <circle cx="51.5" cy="23.5" r="2.5" style="fill:white;"/>
+                <circle cx="32.17" cy="23.5" r="2.5" style="fill:white;"/>
+                <circle cx="22.25" cy="40.5" r="2.5" style="fill:white;"/>
+                <circle cx="41.75" cy="40.5" r="2.5" style="fill:white;"/>
+                <circle cx="51.5" cy="40.5" r="2.5" style="fill:white;"/>
+                <circle cx="32" cy="40.5" r="2.5" style="fill:white;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/white/question-rangescale.svg b/public/assets/images/icons/white/question-rangescale.svg
new file mode 100644
index 00000000000..5874e0d252d
--- /dev/null
+++ b/public/assets/images/icons/white/question-rangescale.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <g>
+                <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:white;fill-rule:nonzero;"/>
+                <path d="M18,35.98L15.52,33.5L26.2,33.5C26.87,36.09 29.21,38 32,38C34.79,38 37.14,36.09 37.8,33.5L48.48,33.5L46,35.98L46,40.03L54,32.03L46,24.03L46,28.08L48.42,30.5L37.8,30.5C37.13,27.91 34.79,26 32,26C29.21,26 26.86,27.91 26.2,30.5L15.58,30.5L18,28.08L18,24.03L10,32.03L18,40.03L18,35.98ZM32,29C33.65,29 35,30.35 35,32C35,33.65 33.65,35 32,35C30.35,35 29,33.65 29,32C29,30.35 30.35,29 32,29Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/white/question-text.svg b/public/assets/images/icons/white/question-text.svg
new file mode 100644
index 00000000000..b00aed91abe
--- /dev/null
+++ b/public/assets/images/icons/white/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:white;fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill:white;fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2" style="fill:white;"/>
+                <rect x="35.05" y="20" width="4" height="2" style="fill:white;"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/images/icons/white/rangescale.svg b/public/assets/images/icons/white/rangescale.svg
deleted file mode 100644
index 27e10d162ec..00000000000
--- a/public/assets/images/icons/white/rangescale.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 700 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M314.72,263.2L211.12,263.2L233.518,240.802C240.237,234.083 240.237,224.001 233.518,217.282C226.799,210.563 216.717,210.563 209.998,217.282L159.6,267.68C152.881,274.399 152.881,284.481 159.6,291.2L209.998,341.598C213.357,344.957 217.279,346.637 221.76,346.637C226.241,346.637 230.158,344.957 233.522,341.598C240.241,334.879 240.241,324.797 233.522,318.078L211.124,295.68L314.724,295.68C323.685,295.68 331.525,288.399 331.525,278.879C331.517,271.039 323.677,263.199 314.716,263.199L314.72,263.2Z" style="fill:white;fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M490.56,217.84C487.201,214.481 482.72,212.801 478.802,212.801C474.322,212.801 470.404,214.481 467.04,217.84C460.321,224.559 460.321,234.641 467.04,241.36L489.438,263.758L385.278,263.762C376.317,263.762 368.477,271.043 368.477,280.563C368.477,289.524 375.758,297.364 385.278,297.364L488.878,297.364L466.48,319.762C459.761,326.481 459.761,336.563 466.48,343.282C473.199,350.001 483.281,350.001 490,343.282L540.398,292.884C547.117,286.165 547.117,276.083 540.398,269.364L490.56,217.84Z" style="fill:white;fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.27148,0,0,1.27148,-95.0191,-6.01074)">
-            <path d="M551.604,138.32L148.4,138.32C113.119,138.32 84.002,167.441 84.002,202.718L84.002,357.278C84.002,392.559 113.123,421.676 148.4,421.676L551.6,421.676C586.881,421.676 615.998,392.555 615.998,357.278L616.002,202.718C616.002,167.441 586.881,138.32 551.604,138.32ZM582.397,357.28C582.397,374.639 568.397,388.081 551.596,388.081L148.396,388.077C131.037,388.077 117.595,374.077 117.595,357.276L117.599,202.716C117.599,185.357 131.599,171.915 148.4,171.915L551.6,171.915C568.959,171.915 582.401,185.915 582.401,202.716L582.397,357.28Z" style="fill:white;fill-rule:nonzero;"/>
-        </g>
-    </g>
-</svg>
diff --git a/public/assets/images/icons/yellow/question-text.svg b/public/assets/images/icons/yellow/question-text.svg
new file mode 100644
index 00000000000..5861b648a67
--- /dev/null
+++ b/public/assets/images/icons/yellow/question-text.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="c">
+        <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+    </g>
+    <g id="d">
+        <g id="e">
+            <path d="M4,14L4,50L60,50L60,14L4,14ZM57,47L7,47L7,17L57,17L57,47Z" style="fill:rgb(255,173,0);fill-rule:nonzero;"/>
+            <g>
+                <path d="M35.05,36L37.05,36L37.05,34L35.05,34L35.05,22.06L33.05,22.06L33.05,34L31.05,34L31.05,36L33.05,36L33.05,42L29.05,42L29.05,44L33.05,44L33.05,42.06L35.05,42.06L35.05,44L39.05,44L39.05,42L35.05,42L35.05,36Z" style="fill:rgb(255,173,0);fill-rule:nonzero;"/>
+                <rect x="29.05" y="20" width="4" height="2" style="fill:rgb(255,173,0);"/>
+                <rect x="35.05" y="20" width="4" height="2" style="fill:rgb(255,173,0);"/>
+                <path d="M20.87,24L20.18,22L15,22L15,24L17.14,24L11.64,40L9,40L9,42L12.75,42C12.95,42 13.12,41.93 13.25,41.8C13.39,41.67 13.48,41.52 13.53,41.35L15.14,36.52L22.86,36.52L24.47,41.35C24.53,41.54 24.63,41.69 24.76,41.81C24.89,41.93 25.06,41.99 25.26,41.99L29,41.99L29,39.99L26.37,39.99L20.87,23.99L20.87,24ZM15.79,34.58L18.49,26.46C18.67,25.96 18.84,25.33 19.01,24.58C19.09,24.94 19.17,25.29 19.26,25.61C19.35,25.93 19.43,26.21 19.51,26.45L22.21,34.59L15.79,34.59L15.79,34.58Z" style="fill:rgb(255,173,0);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss
index 32ecefb5be9..69f239af9fd 100644
--- a/resources/assets/stylesheets/scss/questionnaire.scss
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -34,7 +34,7 @@ $width: 270px;
                     width: 30px;
                     height: 30px;
                     margin-right: 10px;
-                    margin-left: 7px;
+                    margin-left: 15px;
                 }
                 &.active {
                     background-color: $yellow-40;
@@ -78,12 +78,11 @@ $width: 270px;
                 a {
                     display: flex;
                     align-items: center;
-                    .icon {
+                    .icon.type {
                         width: 30px;
                         height: 30px;
                         margin-right: 10px;
                         margin-left: 7px;
-                        cursor: grabbing;
                     }
                 }
 
@@ -114,11 +113,12 @@ $width: 270px;
         }
 
         .dragcolumn {
-            max-width: 8px;
-        }
-
-        .dragarea {
-            cursor: grabbing;
+            max-width: 1px;
+            padding-bottom: 0px;
+            > .dragarea {
+                display: inline-block;
+                height: 27px;
+            }
         }
 
         .input-array {
@@ -149,6 +149,19 @@ $width: 270px;
                 justify-items: center;
             }
         }
+        .handle {
+            display: inline-block;
+            width: 8px;
+            height: 27px;
+            background-image: url("#{$image-path}/grabber_grey.svg");
+            background-size: 100% auto;
+            background-position: center center;
+            background-repeat: no-repeat;
+            cursor: move;
+            &:hover {
+                background-image: url("#{$image-path}/grabber_black.svg");
+            }
+        }
     }
 
     /* ab hier der alte kram */
diff --git a/resources/vue/components/questionnaires/InputArray.vue b/resources/vue/components/questionnaires/InputArray.vue
index ab2249f59b3..7d1f4e61b48 100644
--- a/resources/vue/components/questionnaires/InputArray.vue
+++ b/resources/vue/components/questionnaires/InputArray.vue
@@ -9,7 +9,7 @@
                    :ref="'draghandle_' + index"
                    :title="$gettextInterpolate('Sortierelement für Option %{option}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.', {option: option})"
                    @keydown="keyHandler($event, index)">
-                    <studip-icon shape="hamburger" role="clickable" alt=""></studip-icon>
+                    <span class="handle"></span>
                 </a>
                 <input type="text"
                        :placeholder="$gettext('Option')"
diff --git a/resources/vue/components/questionnaires/LikertEdit.vue b/resources/vue/components/questionnaires/LikertEdit.vue
index 413b34e816a..88795463dfe 100644
--- a/resources/vue/components/questionnaires/LikertEdit.vue
+++ b/resources/vue/components/questionnaires/LikertEdit.vue
@@ -25,7 +25,7 @@
                            :title="$gettextInterpolate('Sortierelement für Aussage %{statement}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.', {statement: statement})"
                            @keydown="keyHandler($event, index)"
                            :ref="'draghandle_' + index">
-                            <studip-icon shape="hamburger" role="clickable"></studip-icon>
+                            <span class="handle"></span>
                         </a>
                     </td>
                     <td>
diff --git a/resources/vue/components/questionnaires/RangescaleEdit.vue b/resources/vue/components/questionnaires/RangescaleEdit.vue
index c1e473f425b..e1e26bf1040 100644
--- a/resources/vue/components/questionnaires/RangescaleEdit.vue
+++ b/resources/vue/components/questionnaires/RangescaleEdit.vue
@@ -28,7 +28,7 @@
                            :title="$gettextInterpolate('Sortierelement für Aussage %{statement}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.', {statement: statement})"
                            @keydown="keyHandler($event, index)"
                            :ref="'draghandle_' + index">
-                            <studip-icon shape="hamburger" role="clickable"></studip-icon>
+                            <span class="handle"></span>
                         </a>
                     </td>
                     <td>
-- 
GitLab