Make students watch entire video in courses to get to next lesson (can't scroll to end of video)
J
Josh Emison
For courses that end with an actual certificate, ie government or industry related, we need to make sure the student can't click "lesson complete" until the video is done. This also means we have to remove the ability for them to scroll through to the end of the video.
This will allow selling the course to government contractors and other entities that have these kinds of requirements. I am currently running into this issue with an online provider of unarmed security guard classes.
Log In
V
Victoria Boon
I agree. Having a requirement to view the full video would be so helpful!
D
Dominique Maack
Upvoting this. This is an essential requirement for anyone running professional certifications or courses where student engagement must be verified.
Currently, there is no native way to ensure a student has actually watched the content before they can mark a lesson as complete. We need:
Playback Restrictions: A toggle to prevent skipping or scrubbing forward so that '100% completion' actually represents the full runtime of the video.
Engagement Analytics: A simple way to see the total number of hours a specific member has spent watching the course videos.
Without these features, it's very difficult to provide accurate completion data or ensure the integrity of our course certifications.
M
Megan Deterling
Agreed!
O
Ori Gross
I used this JS code to stop it from being allowed to click on completed it waits 52 min and then it will allow it.
document.addEventListener("DOMContentLoaded", function() {
// find the target span with the correct text
// replace <> with span ID looks like this data-v-70b7d02e
function findTargetSpan() {
const spans = document.querySelectorAll("span[<Button ID>]");
for (const s of spans) {
if (s.textContent.trim() === "Mark As Complete") {
return s;
}
}
return null;
}
function lockButton(span) {
const button = span.closest("button");
if (!button) return;
// apply disabled state
button.disabled = true;
button.style.backgroundColor = "#ccc";
button.style.color = "#666";
button.style.borderColor = "#ccc";
button.title = "Please finish the video before you can complete this task";
// intercept clicks while disabled
button.addEventListener("click", function(e) {
if (button.disabled) {
e.preventDefault();
}
}, true);
// after 52 minutes, enable button and restore styles.
//Change the time by changing the number
setTimeout(() => {
button.disabled = false;
button.removeAttribute("style"); // let CSS classes control the blue/hover
button.removeAttribute("title");
}, 52
60
1000);}
// run immediately if present
const span = findTargetSpan();
if (span) {
lockButton(span);
} else {
// in case Vue renders later
const observer = new MutationObserver(() => {
const s = findTargetSpan();
if (s) {
lockButton(s);
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
M
Michael C Crea
Ori Gross where would you put this code? does this work inside of a course?
K
Keith Besherse
Core Platform, this is exactly like the timestamp lock on hosted video, except in reverse. Video play-through required before "Mark Complete" button appears.