forked from EVOgeek/Vmeda.Online
		
	MOBILE-4362 lesson: Display 'Correct response' as badge
This commit is contained in:
		
							parent
							
								
									b3af76705e
								
							
						
					
					
						commit
						cc472e58f5
					
				| @ -128,7 +128,7 @@ | |||||||
|                             <ng-container *ngIf="page.isQuestion"> |                             <ng-container *ngIf="page.isQuestion"> | ||||||
|                                 <!-- Question page, show the right input for the answer. --> |                                 <!-- Question page, show the right input for the answer. --> | ||||||
| 
 | 
 | ||||||
|                                 <!-- Truefalse or matching. --> |                                 <!-- Truefalse or multichoice. --> | ||||||
|                                 <ion-item class="ion-text-wrap" *ngIf="answer[0].isCheckbox" |                                 <ion-item class="ion-text-wrap" *ngIf="answer[0].isCheckbox" | ||||||
|                                     [ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}"> |                                     [ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}"> | ||||||
|                                     <ion-label> |                                     <ion-label> | ||||||
| @ -138,12 +138,15 @@ | |||||||
|                                                 [courseId]="courseId"> |                                                 [courseId]="courseId"> | ||||||
|                                             </core-format-text> |                                             </core-format-text> | ||||||
|                                         </p> |                                         </p> | ||||||
|                                         <ion-badge *ngIf="answer[1]" color="dark"> |                                         <ion-badge *ngIf="answer[1]" color="dark" class="addon-mod_lesson-answer-stats"> | ||||||
|                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule" |                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule" | ||||||
|                                                 [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" |                                                 [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" | ||||||
|                                                 [courseId]="courseId"> |                                                 [courseId]="courseId"> | ||||||
|                                             </core-format-text> |                                             </core-format-text> | ||||||
|                                         </ion-badge> |                                         </ion-badge> | ||||||
|  |                                         <ion-badge *ngIf="answer[0].successBadge" color="success" class="addon-mod_lesson-answer-success"> | ||||||
|  |                                             {{ answer[0].successBadge }} | ||||||
|  |                                         </ion-badge> | ||||||
|                                     </ion-label> |                                     </ion-label> | ||||||
|                                     <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end"> |                                     <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end"> | ||||||
|                                     </ion-checkbox> |                                     </ion-checkbox> | ||||||
|  | |||||||
| @ -1,3 +1,5 @@ | |||||||
|  | @import "~theme/globals"; | ||||||
|  | 
 | ||||||
| :host { | :host { | ||||||
|     .button-disabled { |     .button-disabled { | ||||||
|         opacity: 0.4; |         opacity: 0.4; | ||||||
| @ -14,4 +16,8 @@ | |||||||
|     .item-interactive-disabled ion-label { |     .item-interactive-disabled ion-label { | ||||||
|         opacity: 0.5; |         opacity: 0.5; | ||||||
|     } |     } | ||||||
|  | 
 | ||||||
|  |     .addon-mod_lesson-answer-success { | ||||||
|  |         @include margin-horizontal(4px, null); | ||||||
|  |     } | ||||||
| } | } | ||||||
|  | |||||||
| @ -461,25 +461,28 @@ export class AddonModLessonHelperProvider { | |||||||
|         const element = CoreDomUtils.convertToElement(html); |         const element = CoreDomUtils.convertToElement(html); | ||||||
| 
 | 
 | ||||||
|         // Check if it has a checkbox.
 |         // Check if it has a checkbox.
 | ||||||
|         let input = <HTMLInputElement> element.querySelector('input[type="checkbox"][name*="answer"]'); |         let input = element.querySelector<HTMLInputElement>('input[type="checkbox"][name*="answer"]'); | ||||||
|         if (input) { |         if (input) { | ||||||
|             // Truefalse or multichoice.
 |             // Truefalse or multichoice.
 | ||||||
|  |             const successBadge = element.querySelector<HTMLElement>('.badge.badge-success'); | ||||||
|             const data: AddonModLessonCheckboxAnswerData = { |             const data: AddonModLessonCheckboxAnswerData = { | ||||||
|                 isCheckbox: true, |                 isCheckbox: true, | ||||||
|                 checked: !!input.checked, |                 checked: !!input.checked, | ||||||
|                 name: input.name, |                 name: input.name, | ||||||
|                 highlight: !!element.querySelector('.highlight'), |                 highlight: !!element.querySelector('.highlight'), | ||||||
|                 content: '', |                 content: '', | ||||||
|  |                 successBadge: successBadge?.innerText, | ||||||
|             }; |             }; | ||||||
| 
 | 
 | ||||||
|             input.remove(); |             input.remove(); | ||||||
|  |             successBadge?.remove(); | ||||||
|             data.content = element.innerHTML.trim(); |             data.content = element.innerHTML.trim(); | ||||||
| 
 | 
 | ||||||
|             return data; |             return data; | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         // Check if it has an input text or number.
 |         // Check if it has an input text or number.
 | ||||||
|         input = <HTMLInputElement> element.querySelector('input[type="number"],input[type="text"]'); |         input = element.querySelector<HTMLInputElement>('input[type="number"],input[type="text"]'); | ||||||
|         if (input) { |         if (input) { | ||||||
|             // Short answer or numeric.
 |             // Short answer or numeric.
 | ||||||
|             return { |             return { | ||||||
| @ -700,6 +703,7 @@ export type AddonModLessonCheckboxAnswerData = { | |||||||
|     name: string; |     name: string; | ||||||
|     highlight: boolean; |     highlight: boolean; | ||||||
|     content: string; |     content: string; | ||||||
|  |     successBadge?: string; | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| /** | /** | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user