Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-83068

Update correct, incorrect and partially correct icons for questions

XMLWordPrintable

    • MOODLE_405_STABLE
    • MOODLE_405_STABLE
    • MDL-83068-main
    • Hide

      Setup

      1. Restore the attached backup file in a new course backup-moodle2-course-2-mdl-83068-test-20240910-1128-nu.mbz and enrol some students

      Testing scenario

      1. Access the course "Testing course for MDL-83068" as a student.
      2. Go to the "Quiz name 1 - Immediate feedback" activity, Preview it, answer all the questions (some of them should be wrong, to see the partially correct and fail icon too) and submit the quiz.
      3. Check the icons displayed near each item are in a circle and use the ones displayed in the description screenshots.
      4. Check the icons in the Navigation quiz block are also in a circle, with a pale background and use the new ones displayed in the description screenshots.

      Testing component library

      1. Setup the component library:
        • On a terminal, go to your Moodle instance's root folder.
        • Run "npm install"
        • Run "npx grunt componentlibrary"
      2. As admin navigate to Site administration > Development > UI component library
      3. Navigate to Moodle > Moodle components > Icons
      4. Check core:i/grade_correct, core:i/grade_incorrect and core:i/grade_partiallycorrect are the right icons shown in the description screenshots.
      5. Regression check:
        1. On the icons page, search for the "preview" icons. There'd be three: e/preview, i/preview, and t/preview.
        2. Confirm that the icons use the "fa fa-magnifying-glass-plus" icon.
      Show
      Setup Restore the attached backup file in a new course backup-moodle2-course-2-mdl-83068-test-20240910-1128-nu.mbz and enrol some students Testing scenario Access the course "Testing course for MDL-83068 " as a student. Go to the "Quiz name 1 - Immediate feedback" activity, Preview it, answer all the questions (some of them should be wrong, to see the partially correct and fail icon too) and submit the quiz. Check the icons displayed near each item are in a circle and use the ones displayed in the description screenshots. Check the icons in the Navigation quiz block are also in a circle, with a pale background and use the new ones displayed in the description screenshots. Testing component library Setup the component library: On a terminal, go to your Moodle instance's root folder. Run " npm install " Run " npx grunt componentlibrary " As admin navigate to Site administration > Development > UI component library Navigate to Moodle > Moodle components > Icons Check core:i/grade_correct, core:i/grade_incorrect and core:i/grade_partiallycorrect are the right icons shown in the description screenshots. Regression check: On the icons page, search for the " preview " icons. There'd be three: e/preview, i/preview, and t/preview. Confirm that the icons use the " fa fa-magnifying-glass-plus " icon.
    • 1
    • HQ 2024 Sprint I3.2 Moppies

      In MDLQA-18997 it was raised that the fa-check-double icon updated in MDL-82497 looked weird and caused confusion in some situations with the fa-check for partially correct.
      After reviewing the several scenarios with sabina.abellan@moodle.com and barbararamiro, we agreed to replace them with the following:

      • core:i/grade_correct : fa-check-double --> fa-regular fa-circle-check
      • core:i/grade_incorrect : fa-xmark --> fa-regular fa-circle-xmark
      • core:i/grade_partiallycorrect : fa-check --> fa-circle-half-stroke

      The following screenshot has the UX proposal:

       

      Apart from that, the UX team also suggested updating the icons in the Navigation block to make them consistent with the new ones, removing the background and using the color only in the icon:

            sarjona Sara Arjona (@sarjona)
            sarjona Sara Arjona (@sarjona)
            Amaia Anabitarte Amaia Anabitarte
            Jun Pataleta Jun Pataleta
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 hours, 3 minutes
                3h 3m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.