Warning button to complete the entire page/lesson Answered
Is there an easy way to do this?
I don't want members to be able to proceed to "the next step" (page in the training) until/unless they have checked off the required to-dos.
So, can the "Complete Lesson" button at the bottom be "greyed out" and not clickable until/unless they've checked off all of the to-dos in the top right section?
Ideally, if they clicked it without checking off all of the to-dos it would provide a pop-up modal of help text explaining that they need to complete the to-dos BEFORE they can continue to the next lesson/class/tutorial.
Then, when all of the to-dos are checked, the button becomes clickable and will direct them to the next page (hyperlink or whatever).
Once I get this answered/resolved, I've got a follow up question.
Thank you in advance.
Thank you in advance.
Comments
11 comments
on't now what technology you're using but with JavaScript one option could be:
Create an onclick function for the button that checks if all the checklist items are checked. If Not you can create a popup that shows up explaining what they need to do. If all are checked > proceed to the next step.
document.getElementById('continue-btn').addEventListener('click', function() { // Get all checkbox elements with class 'checklist-item' var checklistItems = document.querySelectorAll('.checklist-item'); // Check if all checkboxes are checked var allChecked = Array.from(checklistItems).every(function(item) { return item.checked; }); if(allChecked) { // All items are checked, user can proceed alert('You may proceed to the next step!'); // Implement functionality to proceed to the next step here } else { // Not all items are checked, show a warning message alert('Please ensure all items are checked before proceeding.'); } });Wow! Thank you! Greatly appreciated. I am off to figure out how to implement a JS onclick function in Webflow/Memberstack.
Yannick Caron you are living proof that not all heroes wear capes......or....are you actually wearing a cape?
If you have a paid webflow website you can add html embeds to your page where you can add scripts like these to implement functionality that no/low-code does not (yet) provide.
I pay for Webflow and Memberstack. Webflow's pricing and membership model is beyond confusing to the point they have a ton of support docs on it so I'm not sure if I have the right plan but I can and do add/have other scripts running.
The only thing I know that I cannot do with whatever plan I have is the Webflow "upload file" button since it wants to store it on Webflow's servers (which I don't want anyway).
https://www.memberstack.com/scripts/drag-and-drop-file-uploader
Memberstack has a script for file uploads but it also uses make.com in the combination if you want to make something with files in the future.
Let me know if you get it to work with you checkboxes and stuff. Always happy to help some more if needed
Yannick Caron thank you. Forgive my ignorance here but is this code going in the Custom Code (Head Code) section of Webflow's Site Settings (see image) or in the actual Webflow Designer/Editor (if so, where/how)?
I would drag an HTML embed into you designer on the desired page and add the script there.
OK, done! I've added the HTML embed and selected "hidden" so it doesn't show on the live site.
Obviously, somehow I have to connect the checklist radio buttons to this script for it to work because it would need to somehow determine if all of the checklist items had been "completed" and "checked"/selected.
If I'm reading the code correctly, it appears that it's looking/listening for events for :
checklistItems
Memberstack has the buttons identified/labeled/classed in the style selector as:
check_lesson
I assume I'm changing the JS from :
checklistItems
to:
check_lesson
for this to work.
Is that correct?
Here it is a link to visit: VP
Those checkboxes are from the standard Memberstack template.
The only thing I've done is change the text.
I've asked chatgpt to apply the logic to your checklist and it gave me this:
<script> document.getElementById('continue-btn').addEventListener('click', function() { // Get all checklist item elements var checklistItems = document.querySelectorAll('.checklist-item .check_lesson'); // Check if all checkboxes are checked var allChecked = Array.from(checklistItems).every(function(item) { return item.classList.contains('yes'); }); if(allChecked) { // All items are checked, user can proceed alert('You may proceed to the next step!'); // Implement functionality to proceed to the next step here } else { // Not all items are checked, show a warning message alert('Please ensure all items are checked before proceeding.'); } }); </script>The script basically checks if all your checks have the class yes attached to it.
don't forget the tags in your HTML embed and make sure your button has the right id so the eventlistner gets added to the button
also, place the embed at the bottom of the page or at least below your button, otherwise it won't work either.
Yannick Caron thank you!
I did that and here are the results…..
For some reason, the button isn’t automatically redirecting to “page 2”.
The button changes to red and says, “Mark as incomplete” (which is the default Memberstack setting after completion) but it doesn’t redirect.
The other “issue” (not really an issue, per se, but…) is that once checked in that session, the to-dos cannot be unchecked. So, if someone accidentally checks that they’ve completed something, they can’t uncheck it.
Anyway, knowing how people operate, they will likely just check off all of them regardless so they can burn through the content (which is fine, because they paid for it and if they don’t follow the instructions, they don’t make money).
What you can try is adding a window.location.replace("/{your path}") to the part of the function where the if(allChecked) is true.
Instead of an alert
Please sign in to leave a comment.