Best Answer

Hide Assignment Submission Options in New Course Player

  • 10 November 2023
  • 12 replies
  • 71 views

Has anyone discovered and can share new CSS coding to globally hide assignment submission options for Screen Recording and Link? We’d like to only have upload option displayed. It appears from past posts that coding was shared but is not working in the new course player. Specifically, this is the area and the two options we’d like to hide.

Hide Record and Add a Link Submit Options?

 

icon

Best answer by Bfarkas 11 November 2023, 02:43

View original

12 replies

Userlevel 7
Badge +7

following

Userlevel 7
Badge +3

Alright, annoyingly these don’t have specific tags….really would be great if anything new being built would take this into account, even if not needed internally since so much customization is reliant on these community solves….so the only option I see is my least favorite, so disclaimer upfront:

This will work as of now (11/10/23) but is based on the current layout and order of upload options being: Upload, Record, Add Link. If Docebo makes any changes to this order, adds new options, etc. This will hide the wrong things and will need to be adjusted. In short, this is a higher level of added risk than most CSS changes as things may be hidden after a Docebo change and you will not know.

Ok, disclaimer out of the way, here you go:

.dcb-te-player-assignment-button-wrapper:nth-of-type(2),
.dcb-te-player-assignment-button-wrapper:nth-of-type(3) {
display: none;
}

Result:
 

 

Userlevel 7
Badge +3

Alright, this was annoying me, new method to achieve this that is slightly less risky, important note here is it uses a CSS method that is not universally accepted, but has pretty good browser support. still annoying not to just have clear ID’s or classes for this over random attributes of children.

So here is for each one of the current 3 options

File Upload:

.dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-upload-button-details"]) {
display: none;
}

Record Your Screen:

.dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]) {
display: none;
}

Add a Link:

.dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {
display: none;
}

 

You can merge them if you want, so for the original posters question the solve this way would be:
 

.dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]), .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {
display: none;
}

Just make sure to check your main supported browsers (the majors all support this), otherwise this is much safer than the previous answer as if Docebo makes a change or adds a method, things will simply appear again, as opposed to the wrong things being hidden.

Thank you, @Bfarkas! I just tested it out in our Sandbox, and it worked! I really appreciate you digging into this and sharing your solution!

Thanks @Bfarkas ! Appreciate you taking the time to help provide a solution! This is working in our environment and will be much helpful for our learners.

Userlevel 7
Badge +3

Adding to this thread, in case folks want to make it course specific, you can preface with:

‘‘.lrn-course-player-<COURSE NUMBER>’ so for example, if you wanted it only to impact course 132, it would be:

File Upload:

.lrn-course-player-132 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-upload-button-details"]) {
display: none;
}

Record Your Screen:

.lrn-course-player-132 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]) {
display: none;
}

Add a Link:

.lrn-course-player-132 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {
display: none;
}

 

You can merge them if you want, so for the original posters question the solve this way would be:
 

.lrn-course-player-132 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]), .lrn-course-player-132 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {
display: none;
}

Thanks @Bfarkas for your suggestion that I see has worked for a few people. Unfortunately it didn’t work for me. 

My CSS for course 184 is 

.lrn-course-player-184 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]), .lrn-course-player-184 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {display: none;}

Where did I go wrong?

Userlevel 7
Badge +3

Thanks @Bfarkas for your suggestion that I see has worked for a few people. Unfortunately it didn’t work for me. 

My CSS for course 184 is 

.lrn-course-player-184 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-record-screen"]), .lrn-course-player-184 .dcb-te-player-assignment-button-wrapper:has([data-dcb-ui-described-by="dcb-te-player-assignment-upload-options-0-add-link-description"]) {display: none;}

Where did I go wrong?

Nothing appears wrong with it, and I just checked to see if it was still working for me and was (and then took yours and just replaced course numbers and still worked). Probably you have something either misformatted above where you put this block into the custom CSS area so everything below it will not work, or someone is using the same thing and overriding you later in the block (highly unlikely). Easiest and normal way to troubleshoot is to either remove everything from your custom except this to confirm it does actually work, or just move it to the top. Once you confirm it is working, it is then a fun task of reading through your custom area to find what is misformatted or missing (often theres a close bracket missing for instance).

Thanks @Bfarkas for your continued help here.

 

Unfortunately, this is the only custom CSS piece we have on our docebo!
 

Userlevel 7
Badge +3

Thanks @Bfarkas for your continued help here.

 

Unfortunately, this is the only custom CSS piece we have on our docebo!
 

Then the only other thing i can think of is, you are using the new course design/layout correct?

@Bfarkas if this is the URL in the course where the submission page appears:
https://learn.igel.com/employee/learn/course/184/play/1197/recording-your-whiteboard
Then is the course number to be used in CSS 184 or 1197?

Userlevel 7
Badge +3

It would be 184 for that URL, but this only works in the new course layout, the old course layout did not have a class based on the course number to be able to restrict like this.

Reply