Best Answer

Hide Assignment Submission Screen options


Userlevel 1

I tried searching for a direct answer to this but don’t think I found one. May I ask if anyone knows if you are able to edit the assignment submission screen in the course editor?

My goal to have my learners only see the “Drop your file here or browse” option and eliminate the “Record you Screen. Start Recording” and “Alternatively...” options. Please see attached screenshot for reference.

Any feedback is appreciated :)

icon

Best answer by Adam Ballhaussen 2 June 2021, 16:05

View original

13 replies

Userlevel 7
Badge +7

@carlo.daniels Hi there, have never tried to hide this part explicitly but we have had some success hiding things like the US flag on the Sessions page, the “Remove user” from the My Team manager options and few more using CSS. If yo have someone in your team who is adept at CSS you can do it yourself...we asked Docebo for help on this. One important note on any CSS changes...although the LMS captures all CSS changes, I highly recommend logging your changes elsewhere in case they get wiped in a subsequent update (new version beyond 7.8). 

Userlevel 7
Badge +3

Hi @carlo.daniels, welcome to the community and congrats on your first post! 🙂

 

This is a great question and I like your idea to be able to edit the assignment submission options at the course player level. Unfortunately, there isn’t a way to do this natively in the UI. However, like @lrnlab suggested you could hide the Record your screen and Alternatively… options via CSS. I want to make a few disclaimers if you decide to go this route:

  1. The CSS changes listed below will affect the assignment submission screen on all courses, meaning your learners would never have the option to record their screen or paste a link regardless of the course they’re in. If you only want to apply these changes to a specific course or courses, follow the instructions in this knowledge article to add a specific page selector to your CSS. You would need to add the #doc-page-{page_id} selector to isolate the changes to whatever page you desire. The {page_id} can be found in the URL for the course. Note that these selectors may not always function and may be impacted by other changes in your CSS. Global changes without these selectors are more reliable.

  2. Future updates to Docebo’s UI may impact the CSS styling you have applied to these elements. This is why it’s really important to log changes like @lrnlab recommended. That way, you can keep track of what you’ve changed and easily resolve issues any time something looks “off”
  3. I recommend working with someone in your organization who is familiar/comfortable with HTML and CSS to apply these updates, but you can test them in your sandbox to see if they work for you!

 

​​​​​​Here’s what the assignment submission screen looks like with CSS applied.

 

To make the following adjustments, navigate to the ⚙️ Admin Menu > Configure Branding and Look > Custom Styles > 7.0 Custom CSS and copy + paste the following code.

 

Here’s the CSS that hides the other submission options in the course player (globally):
 

/*Hide assignment submission options other than file upload in course player*/
.screen-recording-wrapper {
display: none !important;
}
.assignments__body .upload-assignments .additional-text {
display: none !important;
}
.assignments__body .upload-assignments .link-wrapper {
display: none !important;
}

 

And here is an example of the updates isolated to a specific course with ID=312

 

/*Hide assignment submission options other than file upload in course player*/
#doc-page-312 .screen-recording-wrapper {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .additional-text {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .link-wrapper {
display: none !important;
}

 

@lrnlab shared a really helpful post that covers some best practices for tracking changes to your platform. I recommend checking that out as well!

 

 

 

Userlevel 7
Badge +7

thanks @Adam Ballhaussen totally agree with you...another point to note...as we are using sub domains, we were able to hide some parts of the screen for a single domain as well...example, we had one group who did not want to use Gamification yet the trophy icon was always present….with the CSS updated we were able to hide it for just that domain...not quite the same as Adam mentions above re: hiding with CSS will hide that option for all assignments; so you definitely need to make an informed decision on this.

Userlevel 1

@carlo.daniels Hi there, have never tried to hide this part explicitly but we have had some success hiding things like the US flag on the Sessions page, the “Remove user” from the My Team manager options and few more using CSS. If yo have someone in your team who is adept at CSS you can do it yourself...we asked Docebo for help on this. One important note on any CSS changes...although the LMS captures all CSS changes, I highly recommend logging your changes elsewhere in case they get wiped in a subsequent update (new version beyond 7.8). 


Thank you for the feedback!

Userlevel 1

Hi @carlo.daniels, welcome to the community and congrats on your first post! 🙂

 

This is a great question and I like your idea to be able to edit the assignment submission options at the course player level. Unfortunately, there isn’t a way to do this natively in the UI. However, like @lrnlab suggested you could hide the Record your screen and Alternatively… options via CSS. I want to make a few disclaimers if you decide to go this route:

  1. The CSS changes listed below will affect the assignment submission screen on all courses, meaning your learners would never have the option to record their screen or paste a link regardless of the course they’re in. If you only want to apply these changes to a specific course or courses, follow the instructions in this knowledge article to add a specific page selector to your CSS. You would need to add the #doc-page-{page_id} selector to isolate the changes to whatever page you desire. The {page_id} can be found in the URL for the course. Note that these selectors may not always function and may be impacted by other changes in your CSS. Global changes without these selectors are more reliable.

  2. Future updates to Docebo’s UI may impact the CSS styling you have applied to these elements. This is why it’s really important to log changes like @lrnlab recommended. That way, you can keep track of what you’ve changed and easily resolve issues any time something looks “off”
  3. I recommend working with someone in your organization who is familiar/comfortable with HTML and CSS to apply these updates, but you can test them in your sandbox to see if they work for you!

 

​​​​​​Here’s what the assignment submission screen looks like with CSS applied.

 

To make the following adjustments, navigate to the ⚙️ Admin Menu > Configure Branding and Look > Custom Styles > 7.0 Custom CSS and copy + paste the following code.

 

Here’s the CSS that hides the other submission options in the course player (globally):
 

/*Hide assignment submission options other than file upload in course player*/
.screen-recording-wrapper {
display: none !important;
}
.assignments__body .upload-assignments .additional-text {
display: none !important;
}
.assignments__body .upload-assignments .link-wrapper {
display: none !important;
}

 

And here is an example of the updates isolated to a specific course with ID=312

 

/*Hide assignment submission options other than file upload in course player*/
#doc-page-312 .screen-recording-wrapper {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .additional-text {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .link-wrapper {
display: none !important;
}

 

@lrnlab shared a really helpful post that covers some best practices for tracking changes to your platform. I recommend checking that out as well!

 

 

 


Adam, this was very thoughtful, specific, and well explained. I appreciate the specifics and the options to take. Thank you very much!

Userlevel 1

thanks @Adam Ballhaussen totally agree with you...another point to note...as we are using sub domains, we were able to hide some parts of the screen for a single domain as well...example, we had one group who did not want to use Gamification yet the trophy icon was always present….with the CSS updated we were able to hide it for just that domain...not quite the same as Adam mentions above re: hiding with CSS will hide that option for all assignments; so you definitely need to make an informed decision on this.


Awesome, thanks for that additional bit lrnlab! this helps to further make an informed decision. Appreciate the community here. I hope to grow from a novice to expert in due time.

Userlevel 7
Badge +3

@carlo.daniels you’re well on your way, my friend! You’ve already ranked up to Novice I here in the community. I look forward to seeing you around here more 🙂

Userlevel 6
Badge +2

Does anyone know if this enhancement is on the Docebo roadmap?

Not only should you be able to pick one or more from a list you should have some control over the size and placement of the icons. Currently the submit options over power the instructions, after just a few lines you get a “more” option. Important parts of the instructions could easily go unseen. 

Why is the URL option limited to YOUTube? 

Userlevel 1
Badge

Is it possible to remove assignment scores using CSS also? We do not want scores on assignments just a pass or fail. 

...

And here is an example of the updates isolated to a specific course with ID=312

 

/*Hide assignment submission options other than file upload in course player*/
#doc-page-312 .screen-recording-wrapper {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .additional-text {
display: none !important;
}
#doc-page-312 .assignments__body .upload-assignments .link-wrapper {
display: none !important;
}

 

 

Hi @Adam Ballhaussen, this code is not working for us even after swapping out course ID. The code to hide globally works, but #doc-page-[course ID] does not have any effect. Has the syntax changed since this was first posted?

Bumping in case anyone else knows: how do we hide some elements in a specific course and not platform-wide? #doc-page-xxx trick is not working for us and not sure if it’s something specific to us that we need to troubleshoot or if the method has changed.

Userlevel 7
Badge +7

Seems this code no longer works with the new course player or some other recent updates...Anyone found a more recent version of CSS that can hide the “record your screen” options?

Userlevel 6
Badge +2

I like the new player UX. The instruction take presidence and then the user clicks to sumbit the assignment. I would still like to have a pick list from the admin perspective to show only the options I want my learners for this course to use. It is better than before. 

Reply