MOBILE-3320 quiz: Fix questions with multiple inputs click handling

src/addons/qtype/gapselect/component/gapselect.scss

@@ -3,16 +3,4 @@
     p {
         margin: 0 0 .5em;
     }
-
-    select {
-        height: 30px;
-        line-height: 30px;
-        display: inline-block;
-        border: 1px solid var(--gray-dark);
-        padding: 4px 6px;
-        -webkit-border-radius: 4px;
-        -moz-border-radius: 4px;
-        border-radius: 4px;
-        margin-bottom: 10px;
-    }
 }

src/addons/qtype/multianswer/component/multianswer.scss

@@ -20,19 +20,4 @@
     td {
         display: table-cell;
     }
-
-    input, select {
-        border-radius: 4px;
-        display: inline-block;
-        border: 1px solid var(--gray-dark);
-        padding: 6px 8px;
-        margin-left: 2px;
-        margin-right: 2px;
-        margin-bottom: 10px;
-    }
-
-    select {
-        height: 30px;
-        line-height: 30px;
-    }
 }

src/addons/qtype/multichoice/component/addon-qtype-multichoice.html

@@ -11,8 +11,8 @@
 
     <!-- Checkbox for multiple choice. -->
     <ng-container *ngIf="multiQuestion.multi">
-        <ion-item class="ion-text-wrap" *ngFor="let option of multiQuestion.options">
-            <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+        <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
+            <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' class="flex">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
                 </core-format-text>
@@ -39,8 +39,8 @@
 
     <!-- Radio buttons for single choice. -->
     <ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel" [name]="multiQuestion.optionsName">
-        <ion-item class="ion-text-wrap" *ngFor="let option of multiQuestion.options">
-            <ion-label>
+        <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
+            <ion-label class="flex">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
                 </core-format-text>

src/addons/qtype/multichoice/component/multichoice.scss

@@ -1,8 +1,16 @@
-:host {
+:host ::ng-deep {
     .specificfeedback {
         background-color: var(--core-question-feedback-color-bg);
         color: var(--core-question-feedback-color);
         display: inline;
         padding: 0 .7em;
     }
+
+    .flex {
+        display: flex !important;
+    }
+
+    .answer .answernumber {
+        min-width: 1.5em;
+    }
 }

src/theme/components/format-text.scss

@@ -333,6 +333,81 @@ core-rich-text-editor .core-rte-editor {
         margin-right: .5rem;
     }
 
+    // Form controls
+    // ------------------------
+    select,
+    input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
+        height: 30px;
+        line-height: 30px;
+        display: inline-block;
+        border: 1px solid var(--gray-dark);
+        background: var(--background-contrast);
+        padding: 6px 8px;
+        border-radius: 4px;
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-bottom: 10px;
+    }
+
+    input[type=radio],
+    input[type=checkbox] {
+        position: relative;
+
+        --color: var(--brand-contrast-color);
+        --color-checked: var(--color);
+
+        width: var(--size);
+        height: var(--size);
+        border-radius: var(--border-radius);
+        border-width: var(--outer-border-width);
+        border-style: var(--border-style);
+        border-color: var(--color);
+        appearance: none;
+        display: inline-block;
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-top: 2px;
+
+        &:checked {
+            background-color: var(--color-checked);
+        }
+
+        & + label {
+            line-height: var(--size);
+        }
+    }
+
+    input[type=radio]::after {
+        position: absolute;
+        content: ' ';
+        width: calc(50% + var(--outer-border-width));
+        height: calc(50% + var(--outer-border-width));
+        border-radius: var(--border-radius);
+        transform: scale3d(0, 0, 0) translate(-50%,-50%);
+        background: var(--contrast-background);
+        border: 0 !important;
+        top: 50%;
+        left: 50%;
+    }
+
+    input[type=radio]:checked::after {
+        transform: scale3d(1, 1, 1) translate(-50%,-50%);
+    }
+
+    input[type=checkbox]:checked::after {
+        position: absolute;
+        width: 33%;
+        height: 50%;
+        content: ' ';
+        transform: rotate(45deg);
+        border-width: 0px 2px 2px 0px;
+        border-style: solid;
+        border-color: var(--contrast-background);
+        left: 4px;
+        top: 2px;
+    }
+
+
     // Atto styles
     // -------------------------
     .atto_image_preview {

src/theme/theme.base.scss

@@ -144,18 +144,19 @@ ion-app.ios ion-header h2 {
     pointer-events: none;
 }
 
+
 // Correctly inherit ion-text-wrap onto labels.
-ion-item ion-label core-format-text .core-format-text-content > * {
+.item ion-label core-format-text .core-format-text-content > * {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-ion-item.ion-text-wrap ion-label core-format-text .core-format-text-content > * {
+.item.ion-text-wrap ion-label core-format-text .core-format-text-content > * {
     white-space: normal;
 }
 
-ion-item.ion-text-wrap ion-label {
+.item.ion-text-wrap ion-label {
     white-space: normal !important;
 }
 
@@ -583,32 +584,40 @@ ion-toolbar h1 .core-bar-button-image img {
 }
 
 // Radio.
-ion-radio {
+ion-radio,
+input[type=radio] {
     --color: var(--brand-contrast-color);
     --color-checked: var(--color);
+    --border-radius: 50%;
+    --border-width: 2px;
+    --outer-border-width: 2px;
+    --border-style: solid;
+    --inner-border-radius: 50%;
+    --size: 20px;
+}
+
+.ios ion-radio,
+.ios input[type=radio] {
+    --border-width: 1px;
+    --outer-border-width: 1px;
 }
 
 .ios ion-radio {
-    --border-width: 1px;
-    --border-style: solid;
-    --border-radius: 50%;
-    --inner-border-radius: 50%;
-
-    width: 20px;
-    height: 20px;
+    width: var(--size);
+    height: var(--size);
 
     &::part(container) {
         margin: 0px;
         border-radius: var(--border-radius);
-        border-width: var(--border-width);
+        border-width: var(--outer-border-width);
         border-style: var(--border-style);
         border-color: var(--color);
     }
 
     &::part(mark) {
         border-radius: var(--inner-border-radius);
-        width: calc(50% + var(--border-width));
-        height: calc(50% + var(--border-width));
+        width: calc(50% + var(--outer-border-width));
+        height: calc(50% + var(--outer-border-width));
         transform: scale3d(0, 0, 0);
         transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
         background: var(--contrast-background);
@@ -628,11 +637,20 @@ ion-radio {
 }
 
 // Checkbox.
-ion-checkbox {
+ion-checkbox,
+input[type=checkbox] {
     --border-radius: 2px;
     --border-color-checked: var(--brand-contrast-color);
     --background-checked: var(--brand-contrast-color);
     --checkmark-color: var(--contrast-background);
+    --border-width: 2px;
+    --outer-border-width: 2px;
+    --border-style: solid;
+    --size: 20px;
+}
+
+.ios input[type=checkbox] {
+    --outer-border-width: 1px;
 }
 
 // Select.
@@ -797,7 +815,7 @@ ion-item.ion-activatable:not(.only-links) {
 
         ion-anchor, a,
         ion-button, button,
-        audio, video {
+        audio, video, select, input {
             pointer-events: visible;
         }
     }