diff --git a/public/ilo_alignment_modal2.png b/public/ilo_alignment_modal2.png new file mode 100644 index 00000000..dfd76fd0 Binary files /dev/null and b/public/ilo_alignment_modal2.png differ diff --git a/public/ilo_alignment_modal_1.png b/public/ilo_alignment_modal_1.png new file mode 100644 index 00000000..3caa464f Binary files /dev/null and b/public/ilo_alignment_modal_1.png differ diff --git a/public/ilo_alignment_modal_design2 .png b/public/ilo_alignment_modal_design2 .png new file mode 100644 index 00000000..587f853b Binary files /dev/null and b/public/ilo_alignment_modal_design2 .png differ diff --git a/public/ilo_alignment_modal_design3.png b/public/ilo_alignment_modal_design3.png new file mode 100644 index 00000000..5d5717b2 Binary files /dev/null and b/public/ilo_alignment_modal_design3.png differ diff --git a/public/ilo_allignment_modal.png b/public/ilo_allignment_modal.png new file mode 100644 index 00000000..9dec0e60 Binary files /dev/null and b/public/ilo_allignment_modal.png differ diff --git a/src/content/docs/products/ontrack/documentation/front-end-migration/coffee-script-migration/ilo-alignment-modal.md b/src/content/docs/products/ontrack/documentation/front-end-migration/coffee-script-migration/ilo-alignment-modal.md new file mode 100644 index 00000000..f8d5646f --- /dev/null +++ b/src/content/docs/products/ontrack/documentation/front-end-migration/coffee-script-migration/ilo-alignment-modal.md @@ -0,0 +1,84 @@ +--- +title: Component Review:Component task-ilo-alignment-modal.coffee +--- + +**Student Name:** + +-Jayani Vithanage + +**Student IDs:** + +-220194805 + +**Link to Trello card:** https://trello.com/c/yL0JT4rB + +### Component Name + +**Path:** +src/app/tasks/task-ilo-alignmnet/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee + +File Name: task-ilo-alignment-modal.coffee + +### Component Purpose + +It is used to set a unit taks's alignment rating to a given learning outcome from admin or convenor +account. + +### Existing model + +![figure_1](/public/ilo_alignment_modal_1.png) + +![figure_1](/public/ilo_alignment_modal2.png) + +### Component outcomes/interactions + +User should login with admin or convenor account. + +It sets a unit taks's aligment rating to a given learning outcome from admin or convenor account and +apply justification as how it relates to that particular learning outcome. + +It works through popup window for Admin/ Convenor accounts, includes the adding rating and +justification for given learning outcome of the task. The given ratig is displayed through a number +(1-5). + +The new migrated component expected to work the same way as the existing component. + +This modal has proper mechanism, but some of the changes can be proposed to enhance this. + +So, in the proposed modal the user provides the following changes: + +1.Progress bar should be alighned to center of the popup window 2.The assignment name and the +learning outcome is displayed through bold letters, not in the colored boxes 3.The rational message +should be displayed with proper alignment and font size. + +New design sketch: Existing UI components are to be used for the input fields and button etc. `` +![figure_1](/public/ilo_allignment_modal.png) + +In these two proposed models, the user provides the following changes: + +4.A progress bar with a color range can be used to replace current progress buttons. 5.A pie chart +can be added to rate learning outcomes. + +New design sketch: proposed different design, existing UI components are to be used for the input +fields and button etc. + +![figure_1](/public/ilo_alignment_modal_design2%20.png) + +![figure_1](/public/ilo_alignment_modal_design3.png) + +### Component migration Check list + +What is needs to be checked for this component to work once migrated? + +[ ] Ability to collect details from the user + +[ ] The rating values should be correctly passed and store (data validation) + +[ ] high user friendliness + +[ ] Check with the output data, the rating value should be displayed as a number - student task +submission + +### What we have done so far + +The component has been reviewed and markdown document has been created.