Merge pull request #12853 from eduNEXT/Bound3R/TNL-3717

resolve byte-sized bug TNL-3717

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -154,10 +154,8 @@ div.problem {
   }
 }
 
-// +Problem - Choice Group
-// ====================
-div.problem {
-  .choicegroup {
+// Choice Group - silent class
+%choicegroup-base {
   @include clearfix();
   min-width: 100px;
   width: auto !important;
@@ -173,14 +171,18 @@ div.problem {
     padding: ($baseline/2);
     width: 100%;
 
-      &.choicegroup_correct {
-        @include status-icon($correct, "\f00c");
-        border: 2px solid $correct;
-
     &:after {
       @include margin-left($baseline*.75);
     }
 
+    &:hover {
+      border: 2px solid $blue;
+    }
+
+    &.choicegroup_correct {
+      @include status-icon($correct, "\f00c");
+      border: 2px solid $correct;
+
       // keep green for correct answers on hover.
       &:hover {
         border-color: $correct;
@@ -191,10 +193,6 @@ div.problem {
       @include status-icon($partiallycorrect, "\f069");
       border: 2px solid $partiallycorrect;
 
-        &:after {
-          @include margin-left($baseline*.75);
-        }
-
       // keep green for correct answers on hover.
       &:hover {
         border-color: $partiallycorrect;
@@ -205,19 +203,11 @@ div.problem {
       @include status-icon($incorrect, "\f00d");
       border: 2px solid $incorrect;
 
-        &:after {
-          @include margin-left($baseline*.75);
-        }
-
       // keep red for incorrect answers on hover.
       &:hover {
         border-color: $incorrect;
       }
     }
-
-      &:hover {
-        border: 2px solid $blue;
-      }
   }
 
   .indicator-container {
@@ -239,6 +229,25 @@ div.problem {
     @include margin-left(25px);
     display: inline;
   }
+}
+
+// +Problem - Choice Group
+// ====================
+div.problem {
+  .choicegroup {
+    @extend %choicegroup-base;
+    label {
+      @include padding($baseline/2);
+      @include padding-left($baseline*1.75);
+      position: relative;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      @include left($baseline/4);
+      position: absolute;
+      top: em(11);
+    }
   }
 }
 
@@ -1409,7 +1418,7 @@ div.problem {
 // ====================
 div.problem {
   .choicetextgroup {
-    @extend .choicegroup;
+    @extend %choicegroup-base;
 
     input[type="text"]{
       margin-bottom: 0.5em;