Implements simple scroll progress tracking for safe html5 renderer #13983
Conversation
github-actions
bot
added
DEV: renderers
Build Artifacts
|
rtibbles
left a comment
rtibbles
left a comment
There was a problem hiding this comment.
Some thoughts on cleanup - I must admit, the duration based progress feels like something we can do further cleanup, outside of the scope of this PR too - I'll think on what that might look like!
| progress = this.scrollBasedProgress; | ||
| } | ||
| this.$emit('updateProgress', progress); | ||
| if (progress >= 1) { |
There was a problem hiding this comment.
I wonder if we could maintain this strictness here - but instead add a correction during the scroll based calculation instead? Otherwise we may end up with a lot of content marked as in progress when a learner thinks they have finished (the finished event doesn't trigger anything progress tracking wise, it's used to disambiguate the technical completion from when it is desirable to trigger further follow up for a user - like displaying the completion modal).
|
|
||
| // Wait for DOM update after loading completes | ||
| await this.$nextTick(); | ||
| this.setupScrollListener(); |
There was a problem hiding this comment.
I think this would be better done in a mounted hook rather than created, to ensure the DOM exists?
| setupScrollListener() { | ||
| const wrapper = this.$refs.safeHtmlWrapper; | ||
| if (wrapper) { | ||
| wrapper.addEventListener('scroll', this.handleScroll); |
There was a problem hiding this comment.
This feels like a natural candidate for debouncing - so that we don't bother triggering while the user is still actively scrolling.
Will want to set the debounced scroll function on this so you can refer to it when unbinding the function.
There was a problem hiding this comment.
Could probably conditionalize this on this.forceDurationBasedProgress - if it's not set, we can just call recordProgress at the end of handleScroll?
2 participants
Summary
This PR implements scroll-based progress tracking for the SafeHTML5 viewer to more accurately measure user engagement with content. It also updates the scroll-completion threshold to account for real-world browser behavior, where scrolling often stops just short of the theoretical maximum (1 in our case)
References
Closes #13828
Reviewer guidance
kolibri plugin enable kolibri.plugings.safe_html5_viewer