Feedback - Quizzes not appearing on the front end of a lesson

[westnz]

Type of feedback

//dev

Description

When I create a quiz for a lesson, it does not appear on the front end of a lesson.

Step-by-step reproduction instructions (optional)

Please list the steps needed to reproduce or verify the feedback. For example:

1. Go to Sensei LMS
2. Click on Beginner User Learning Pathway course
3. Open the first lesson: Introduction to WordPress
4. You will notice a quiz at the bottom, but it does not appear on the front end when you preview

Screenshots or screen recording (optional)

Other information (optional)

[jonathanbossenger]

@westnz On testing this locally, and inspecting the source code, it looks like this is related to the Learning mode in Sensei.

On Learn.WordPress.org, the following CSS is being applied to the Lesson Actions block

.sensei-course-theme .wp-block-post-content .wp-block-sensei-lms-lesson-actions {
  display: none;
}

Do you know if any settings related to Learning mode have been changed lately? If not, we might need to ping the Sensei team to find out how to turn this off.

[Imran92]

Hi 👋 I've fixed the issue with a small CSS snippet.

While on it, a thing I’ve noticed is Learning Mode is using a slightly edited older version of the Lesson (Learning Mode - Default) template. So it’s missing the new improvement we’ve made in that template. For example, we’re not using the default "Lesson Actions" instead of the learning mode specific "Lesson Actions (Learning Mode)" block in the bottom of that template.

Some benefits of this block are that it allows changing the Text color, Fill color, border color and width, padding etc of all the Lesson action buttons (like View Quiz, Complete Lesson) etc. We don't need to update the whole template, but I think it can be nice to replace the current Lesson Actions block with the other one for these improvements.

[westnz]

Thank you, @Imran92 and @jonathanbossenger. I have just tested it, and it worked. 🍾

Do you know if any settings related to Learning mode have been changed lately?

Not that I am aware of

We don't need to update the whole template, but I think it can be nice to replace the current Lesson Actions block with the other one for these improvements.

I think it is important to keep everything we do on Sensei up to date.

[jonathanbossenger]

I've fixed the issue with a small CSS snippet.

Thanks @Imran92. I am a little concerned about patching this without knowing why it happened on the learn site, but not on the local dev site. Are you able to determine what causes the Lesson Actions to be set to display:none?

I think it can be nice to replace the current Lesson Actions block with the other one for these improvements.

Are you able to set up an example of what this would look like on a single lesson, so we can verify the change before we make it on the entire site?

[Imran92]

Hi @jonathanbossenger 👋 Thank you so much for your comment. After your comment, I did some more digging and found that the logic is to only show the action buttons only when the Course is published and the student has enrolled in that Course. So it was not a bug or regression and was expected behavior. You can check that for a published Course and Lesson, (like https://learn.wordpress.org/lesson/what-is-the-site-editor/) the Take Quiz button will appear as expected if you've taken the course. (So to prevent any potential unwanted behavior, I've removed the extra CSS added yesterday.)

So to see the "Take Quiz" button, you'll need to publish the Course and Lesson first and then take the Course in the preview mode. cc @westnz . Please let me know in case it doesn't work even after publishing.

Are you able to set up an example of what this would look like on a single lesson, so we can verify the change before we make it on the entire site?

Yeah sure, I can try to do it first. Can you point me to a lesson where it's safe to this? Thanks!

[jonathanbossenger]

After your comment, I did some more digging and found that the logic is to only show the action buttons only when the Course is published and the student has enrolled in that Course. So it was not a bug or regression and was expected behavior.

Thanks for the update here @Imran92. Could I ask, could you point me to the code that handles this logic, I'd like to check it out.

Yeah sure, I can try to do it first. Can you point me to a lesson where it's safe to this? Thanks!

You can test this on any of the lessons in the Beginner Developer Learning Pathway currently in draft on Learn.WordPress.org.

[Imran92]

Could I ask, could you point me to the code that handles this logic, I'd like to check it out.

Hi @jonathanbossenger ! Yap sure, here it is - https://github.com/Automattic/sensei/blob/284b5a6fd0006a6c6a35d196febec8873aedc837/includes/blocks/course-theme/class-lesson-actions.php#L172-L176

You can test this on any of the lessons in the Beginner Developer Learning Pathway currently in draft on Learn.WordPress.org.

I'll try it, thanks!

[jonathanbossenger]

@Imran92 are you sure that's the code that's causing the CSS here to be enqueued? That code looks like it won't render any output for certain blocks under those conditions.

The reason I'm asking is that when I test this on both the local Learn.WordPress.org development environment and a default local WordPress install, I can't replicate the original error. When I preview a course that's not published with lessons that are published, I can see the Quiz. What I am unable to do is actually take the quiz, but that's expected.

[Imran92]

@Imran92 are you sure that's the code that's causing the https://github.com/WordPress/Learn/issues/2196#issuecomment-1970683442 to be enqueued? That code looks like it won't render any output for certain blocks under those conditions.

@jonathanbossenger Oh it's the part of the legacy Lesson Actions (Learning Mode specific) block that prevents the block from rendering when the student is not enrolled.

The reason I'm asking is that when I test this on both the local Learn.WordPress.org development environment and a default local WordPress install, I can't replicate the original error. When I preview a course that's not published with lessons that are published, I can see the Quiz. What I am unable to do is actually take the quiz, but that's expected.

I think I know the reason for it. It's because in your local installation, the learning mode lesson template is the new one (/wp-admin/site-editor.php?postType=wp_template&postId=sensei-course-theme%2F%2Flesson) which uses the updated Lesson Actions block, but in learn.wordpress.org, an older and customized version of learning mode lesson template is being used (https://learn.wordpress.org/wp-admin/site-editor.php?postType=wp_template&postId=sensei-course-theme%2F%2Flesson), which uses the legacy Lesson Actions (Learning Mode specific) block. A difference between these two is the older one doesn't render the "Take Quiz" button unless the student is enrolled as you've seen in the code above. So the mismatch between live and local is due to a block and template difference. (I'll create a card for us to consider and probably not show the Take Quiz button in the new block when the student is not enrolled like before, I think it makes sense)

[jonathanbossenger]

@Imran92 Aha, that makes sense now. So the fact that we're on a newer version of Sensei, but an older version of the template is the problem here. Got it.

How could I test this on the local development environment, ie how could I get the current template on learn.wordpress.org installed and in use locally?

[Imran92]

So the fact that we're on a newer version of Sensei, but an older version of the template is the problem here. Got it.

Yap! Exactly! <3

How could I test this on the local development environment, ie how could I get the current template on learn.wordpress.org installed and in use locally?

I think just opening the following URL, switching to "Code Editor" mode, and copying the markup and pasting it locally in the same place would do the trick

https://learn.wordpress.org/wp-admin/site-editor.php?postType=wp_template&postId=sensei-course-theme%2F%2Flesson&canvas=edit

[jonathanbossenger]

@Imran92 perfect, thank you.

@westnz I'm tagging you here so you are updated. I've opened #2283 so we can work on getting the template updated, and I'm going to close this out for now.