Set the Multiple Choice authoring styling to be encapsulated. Also fixed some other minor styling issues.

Author: geoffreykwan

src/main/webapp/site/src/messages.xlf

@@ -1239,7 +1239,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="c04678929731aad2662284b7ce56c5c75b410df5">
@@ -6123,7 +6123,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">65</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="d63d6215608fa83637b7cfc6dc6a4d92b6ad11ef">
@@ -6191,7 +6191,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">68</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="828bc0d28636c4fda125fbf32af8df99cf1fe83e">
@@ -6244,7 +6244,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">87</context>
+          <context context-type="linenumber">98</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="3a12bd96093f8972cbd9d52a68fb9178aaee4388">
@@ -6279,7 +6279,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">99</context>
+          <context context-type="linenumber">110</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="826b25211922a1b46436589233cb6f1a163d89b7">
@@ -6326,11 +6326,11 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">121</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">113</context>
+          <context context-type="linenumber">124</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="e3b469b69eef004764c51b7a8b3efa761501ab73">
@@ -6571,7 +6571,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">90</context>
+          <context context-type="linenumber">101</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="029590c3a6ac353df3f0f8a2dfe7272a871656fe">
@@ -6597,7 +6597,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">102</context>
+          <context context-type="linenumber">113</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="bcfc99153c2c0d547f3af6670ddfaae5e6ffb429">
@@ -6697,6 +6697,10 @@
           <context context-type="sourcefile">../../wise5/components/match/match-authoring/match-authoring.component.html</context>
           <context context-type="linenumber">12</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
+          <context context-type="linenumber">32</context>
+        </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="1fc2618c7ca4b3722929d8739dbf6d9ab4f7dacf">
         <source>Add Choice</source>
@@ -6731,7 +6735,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">58</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="b75de65916c3254e808d6757d451c2c9abe56d06">
@@ -6847,56 +6851,56 @@
         <source> Single Answer </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">20</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="89573ba7e055d0f1cf66d9ac94bf5f47a7ada4b2">
         <source> Multiple Answer </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="51e09577ccc3a404bf3aa3bf88c6d5398135803b">
         <source> There are no choices. Click the "Add Choice" button to add a choice. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">37</context>
+          <context context-type="linenumber">46</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="3f2b2b4a6ec318a31f7f5f9b526480846a27547a">
         <source>Choice Text</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">44</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="946344604c321ff0c86a78f6e047f9142b309dd1">
         <source> Is Correct </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">67</context>
+          <context context-type="linenumber">78</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="4488359b3a14b99b193ac292e1f16ee47766ab8b">
         <source>Is Correct</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">77</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="e29c5e189e57e8d8dc3f52df4abe7bce4bfca53c">
         <source>Feeback</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">74</context>
+          <context context-type="linenumber">85</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="5317cde482fdb766008de3e1ae09cf0610366abc">
         <source>Optional</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">79</context>
+          <context context-type="linenumber">90</context>
         </context-group>
       </trans-unit>
       <trans-unit datatype="html" id="6817513ddcee06a7cb2a7b2708e5616b861db81c">

src/main/webapp/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field class="prompt">
   <mat-label i18n>Prompt</mat-label>
   <textarea matInput
       [ngModel]="authoringComponentContent.prompt"
@@ -13,21 +13,30 @@
   <mat-radio-group aria-labelledby="selection-type-label"
       [(ngModel)]="authoringComponentContent.choiceType"
       (ngModelChange)="componentChanged()">
-    <mat-radio-button class="choice-radio-button" value="radio" i18n>
+    <mat-radio-button
+        class="choice-radio-button"
+        color="primary"
+        value="radio"
+        i18n>
       Single Answer
     </mat-radio-button>
-    <mat-radio-button class="choice-radio-button" value="checkbox" i18n>
+    <mat-radio-button
+        class="choice-radio-button"
+        color="primary"
+        value="checkbox"
+        i18n>
       Multiple Answer
     </mat-radio-button>
   </mat-radio-group>
 </p>
+<span class="choices-label" i18n>Choices</span>
 <button mat-raised-button
     color="primary"
     class="add-choice-button"
     (click)="addChoice()"
     i18nMatTooltip
     matTooltip="Add Choice"
-    matTooltipDirection="above"
+    matTooltipPosition="above"
     i18n-aria-label
     aria-label="Add">
   <mat-icon>add</mat-icon>
@@ -54,13 +63,15 @@
         (click)="chooseChoiceAsset(choice)"
         i18n-matTooltip
         matTooltip="Choose an Image"
-        matTooltipDirection="above"
+        matTooltipPosition="above"
         i18n-aria-label
         aria-label="Image">
       <mat-icon>insert_photo</mat-icon>
     </button>
     <div>
-      <mat-checkbox [(ngModel)]="choice.isCorrect"
+      <mat-checkbox
+          color="primary"
+          [(ngModel)]="choice.isCorrect"
           (change)="feedbackChanged()"
           i18n-aria-label
           aria-label="Is Correct"
@@ -85,7 +96,7 @@
         (click)="moveChoiceUp(choice.id)"
         i18n-matTooltip
         matTooltip="Move Up"
-        matTooltipDirection="above"
+        matTooltipPosition="above"
         i18n-aria-label
         aria-label="Up">
       <mat-icon>arrow_upward</mat-icon>
@@ -97,7 +108,7 @@
         (click)="moveChoiceDown(choice.id)"
         i18n-matTooltip
         matTooltip="Move Down"
-        matTooltipDirection="above"
+        matTooltipPosition="above"
         i18n-aria-label
         aria-label="Down">
       <mat-icon>arrow_downward</mat-icon>
@@ -108,7 +119,7 @@
         (click)="deleteChoice(choice.id)"
         i18n-matTooltip
         matTooltip="Delete"
-        matTooltipDirection="above"
+        matTooltipPosition="above"
         i18n-aria-label
         aria-label="Delete">
       <mat-icon>delete</mat-icon>

src/main/webapp/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.scss

@@ -1,6 +1,6 @@
 @import '~style/abstracts/variables';
 
-.mat-form-field {
+.prompt {
   width: 100%;
 }
 
@@ -15,6 +15,11 @@ label.mat-radio-label {
 .mat-radio-button.choice-radio-button {
   display: block;
   margin-top: 10px;
+  width: 5%;
+}
+
+.choices-label {
+  margin-right: 10px;
 }
 
 .add-choice-button {

src/main/webapp/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts

@@ -11,8 +11,7 @@ import { UtilService } from '../../../services/utilService';
 @Component({
   selector: 'multiple-choice-authoring',
   templateUrl: 'multiple-choice-authoring.component.html',
-  styleUrls: ['multiple-choice-authoring.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['multiple-choice-authoring.component.scss']
 })
 export class MultipleChoiceAuthoring extends ComponentAuthoring {
   allowedConnectedComponentTypes = ['MultipleChoice'];