Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
westnz opened this issue Jan 31, 2024 · 12 comments
Closed

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

westnz opened this issue Jan 31, 2024 · 12 comments
Labels
[Component] Learn Theme Website development issues related to the Learn theme. [Component] Sensei Website development issues related to the Sensei plugin installed on Learn. [Type] Bug Something isn't working on the Learn website.

Comments

@westnz
Copy link
Collaborator

westnz commented Jan 31, 2024

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)

image image

Other information (optional)

@westnz westnz added [Type] Bug Something isn't working on the Learn website. Awaiting Triage Issues awaiting triage. See Training Team handbook for how to triage issues. labels Jan 31, 2024
@github-project-automation github-project-automation bot moved this to Awaiting Validation in LearnWP Content - Feedback Jan 31, 2024
@jonathanbossenger jonathanbossenger added [Component] Learn Theme Website development issues related to the Learn theme. [Component] Sensei Website development issues related to the Sensei plugin installed on Learn. and removed Awaiting Triage Issues awaiting triage. See Training Team handbook for how to triage issues. labels Feb 1, 2024
@jonathanbossenger
Copy link
Collaborator

@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
Copy link

Imran92 commented Feb 29, 2024

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
Copy link
Collaborator Author

westnz commented Feb 29, 2024

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
Copy link
Collaborator

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
Copy link

Imran92 commented Mar 1, 2024

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
Copy link
Collaborator

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
Copy link

Imran92 commented Mar 4, 2024

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
Copy link
Collaborator

@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
Copy link

Imran92 commented Mar 5, 2024

@Imran92 are you sure that's the code that's causing the #2196 (comment) 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
Copy link
Collaborator

@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
Copy link

Imran92 commented Mar 5, 2024

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
Copy link
Collaborator

@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.

@github-project-automation github-project-automation bot moved this from Triaged to-dos to Done in LearnWP Website Development Mar 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Learn Theme Website development issues related to the Learn theme. [Component] Sensei Website development issues related to the Sensei plugin installed on Learn. [Type] Bug Something isn't working on the Learn website.
Projects
Status: Done
Development

No branches or pull requests

3 participants