Update stylings of quiz questions in the submitted state in learning mode

[Imran92]

Resolves #7128

Stacked on #7124

Proposed Changes

• Update stylings of quiz questions in the submitted state in learning mode
• Also fixes the checkbox appearing broken when checked and no multi-line question is there in the quiz

Testing Instructions

1. Check out this branch of Course theme Update stylings for quiz, questions and answers themes#7331
2. Check out this branch of Pro https://github.com/Automattic/sensei-pro/pull/2404
3. Enable course theme
4. Create a course with lessons
5. Have at least one lesson with a quiz that has all the questions in it
6. Make sure Learning Mode is enabled for that course
7. Now answer the quiz questions and click "Quiz Complete"
8. Check in mobile screen size as well
9. Change the theme variation to gold, dark and blue and check the styles for them too.
10. Now switch to another block theme and check
11. Switch to a non-block theme and check
12. For all themes and variations, also check with LM disabled to make sure non-LM style isn't broken

Desktop

Mobile

New/Updated Hooks

sensei_quiz_question_answers_inside_before - Hook used for printing content inside the question answers section before the template content.

sensei_quiz_question_answers_inside_after - Hook used for printing content inside the question answers section after the template content.

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit 80e18cb and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
js/file-upload-question-type.js	wp-dom-ready, wp-polyfill		874 B	+874 B ( +100% 🔼 )
js/question-answer-tinymce-editor.js	wp-i18n, wp-polyfill		857 B	+857 B ( +100% 🔼 )
blocks/quiz/index.js			32.3 kB	+93 B ( +0.29% 🔼 )
admin/exit-survey/index.js		wp-api-fetch	3.46 kB	-183 B ( -5.03% ⬇️ )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[codecov]

Codecov Report

Merging #7129 (80e18cb) into feature/frontend-improvements (dd37651) will increase coverage by 0.00%.
Report is 1 commits behind head on feature/frontend-improvements.
The diff coverage is 25.00%.

@@                       Coverage Diff                        @@
##             feature/frontend-improvements    #7129   +/-   ##
================================================================
  Coverage                            49.34%   49.34%           
  Complexity                           10548    10548           
================================================================
  Files                                  575      575           
  Lines                                44564    44566    +2     
  Branches                               402      402           
================================================================
+ Hits                                 21988    21989    +1     
- Misses                               22249    22250    +1     
  Partials                               327      327           

Files Changed	Coverage Δ
includes/template-functions.php	39.64% <0.00%> (-0.15%)	⬇️
includes/blocks/class-sensei-quiz-blocks.php	39.28% <100.00%> (+2.24%)	⬆️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 327c9e9...80e18cb. Read the comment docs.

[Imran92]

I noticed a small issue and added a fix here, wanted to share the finding. I found out that the checked checkboxs looks broken in some quizzes. After some investigation I found out that they look broken only when the quiz has no Multi Line type question. After more investigation to figure out why it’s happening, I found out that the Multi Line uses tinymce editor which we already know, and this tinymce editor enqueues the dashicons styles. The checkmark in the checkbox uses the dashicons font-family. So when we don’t have the tinymce editor loading for any question in the quiz, the checked checkboxes look broken.

The solution was simple, I just enqueued the dashicon styles
wp_enqueue_style( 'dashicons' );

[donnapep]

@imran I made some tweaks for things I found during testing. A few things to watch out for in the future:

• That naming conventions are followed for things like CSS classes. I've addressed this in 095d596.
• That you walk through the Pre-Merge checklist and ensure CI jobs are passing before asking for a review.
• Whenever templates are changed, the version number needs to be bumped and ideally the PHP Templates label applied to the PR. Users overwrite template files sometimes, so updating the version number is one way to communicate that they should update their local versions. I've done that in 20c423b.
• Related to the previous point, we need to add a "development" change log entry for the template changes. This is another way to inform developers to update their templates. That means in this PR, I've added two change log entries. If I've done this correctly, you should see them both show up in the appropriate sections of the change log when it's auto-generated on release day.

[donnapep]

Let's go! 🥳