Assignment grading usually requires horizontal scrolling

Assignment grading usually requires horizontal scrolling

by Samuli Karevaara -
Number of replies: 5

I'm sure there are discussions about this, but I couldn't find them with a bit of googling, searched the tracker too:

Assignment grading table is quite large and usually requires horizontal scrolling. With a lot of students the scroll bar is very far from the row that the teacher is focusing on. Hiding the columns helps a bit, but are there some plugins and/or experimental user interfaces that would make grading assignments less cumbersome in Moodle? 

Average of ratings: -
In reply to Samuli Karevaara

Assignment grading usually requires horizontal scrolling

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
There is some CSS you can apply to help with this. Particularly, limiting the width of images uploaded via text editor, adding a textbreak for long file names, etc...

This is for my custom theme, but you can see what may work for yours:


/* Adjustments to Quick Grading Screen Layout in Assignment Module */

/* No Submission for Grading Message */
.path-mod-assign td.submissionstatus,
.path-mod-assign div.submissionstatus,
.path-mod-assign a:link.submissionstatus {
border-radius: 6px;
padding: 2px;
border: 1px solid #cec8c8;
}
/* Submitted for Grading Message */
.path-mod-assign td.submissionstatussubmitted,
.path-mod-assign div.submissionstatussubmitted,
.path-mod-assign a:link.submissionstatussubmitted {
background-color: #fbeed5;
border-radius: 6px;
padding: 2px;
border: 1px solid #e4ca97;
}
/* Graded Grading Message */
.path-mod-assign td.submissiongraded,
.path-mod-assign div.submissiongraded {
border-radius: 6px;
padding: 2px;
border: 1px solid #adcead;
}
/* Early Submission Grading Message */
.path-mod-assign td.earlysubmission,
.path-mod-assign a:link.earlysubmission,
.path-mod-assign div.earlysubmission {
background-color: #d0e0f5;
border-radius: 6px;
padding: 2px;
border: 1px solid #89ccf3;
}
/* Late Submission Grading Message */
.path-mod-assign td.latesubmission,
.path-mod-assign a:link.latesubmission,
.path-mod-assign div.latesubmission {
border-radius: 6px;
padding: 2px;
border: 1px solid #c7a2a2;
}
/* Overdue Submission Grading Message */
.path-mod-assign div.overduesubmission,
.path-mod-assign div.overduesubmission font {
font-size: x-small;
}
/* Change Layout Order */
@media only screen and (min-width: 981px) {
/* Change Block & Question Section Order MacBook */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Change Block & Question Section Order iPad */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
/* Change Block & Question Section Order iPhone */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
/* Fit all Columns on Screen */
@media (min-width: 768px) {
#page-mod-assign-grading #page-content.blocks-pre .region-main {max-width: 100%!important;}}
@media (min-width: 992px) {
#page-mod-assign-grading #page-content.blocks-pre .region-main {max-width: 100%!important;}}
/* Reset Table Preferences Button */
.resettable a {background: red; color: yellow; padding: 3px; border-radius: 5px;}
/* Correct the widths on Quick Grading screen due to long file names*/
#page-mod-assign-grading td[id^="mod_assign_grading"] td div a,
#page-mod-assign-grading td .no-overflow p
{word-break: break-all;}
/* Correct the widths on Quick Grading screen due to large Online Text images */
#page-mod-assign-grading .quickgradingform img {max-width: 600px; height: auto;}
/* Fit Quick Grading Page on Mobile Device */
@media only screen and (max-width: 500px) {
#page-mod-assign-grading table {background: white;}
#page-mod-assign-grading table.flexible td, .generaltable td {border-top: 0 solid black;}
#page-mod-assign-grading #region-main .no-overflow {width: unset;}
#page-mod-assign-grading table.generaltable thead {display: none;}
#page-mod-assign-grading .quickgradingform tr {display: flex; flex-flow: row; flex-wrap: wrap; border-bottom: 1px solid black; background: white;}
#page-mod-assign-grading .quickgradingform table.generaltable tr table tr {border-bottom: 0 solid black;}
}
/* Add Scroll Bar on the Grading Page */
#page-mod-assign-grading .region-main .no-overflow {overflow: visible;}

/* Rearrange Filter on Quick Grading Page */
#page-mod-assign-grading div[role="main"] {display: flex; flex-direction: column;}
#page-mod-assign-grading .groupselector {order: 1;}
#page-mod-assign-grading .gradingoptionsform {order: 2; padding-bottom: 0!important;}
#page-mod-assign-grading .quickgradingform {order: 3;}
#page-mod-assign-grading .gradingbatchoperationsform {order: 4;}
#page-mod-assign-grading .urlselect {order: 5; margin-left: 40px;}

/* Styles the Outer Group Selector Div */
#page-mod-assign-grading .groupselector .singleselect {
border-radius: 10px;
border: 2px solid black;
padding: 10px 10px 0 10px;
margin-top: 10px;
}
/* Un-Styles the Inner Group Selector Div */
#page-mod-assign-grading .groupselector .singleselect .singleselect {
border: 1px solid #ced4da;
border-radius: 5px;
padding: .375rem 1.75rem .375rem .75rem;}

/* Display Grading Options in a Row */
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix {display: flex; flex-direction: row;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_perpage {flex-direction: column;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_perpage .col-md-3 {min-width: 260px;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_filter {flex-direction: column;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_filter .col-md-3 {min-width: 270px;}
Average of ratings: Useful (1)
In reply to John Provasnik

Re: Assignment grading usually requires horizontal scrolling

by Samuli Karevaara -
Thanks, John. I will investigate your modifications and apply some of them for our theme.
In reply to Samuli Karevaara

Re: Assignment grading usually requires horizontal scrolling

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers

And here is a visual of what some of that code does for the filters:



Attachment asng.png
In reply to John Provasnik

Re: Assignment grading usually requires horizontal scrolling

by Edwin Lynd -

Hi John, is there any way to integrate the Webslides css into moodle?

I want to use it only in Page Moudule, looking for a way to custom the css for Page module, WHEN copy and paste the css file of Webslides into the custom area of adaptable theme, it seems conflicting.

Any idea is grateful.


In reply to Edwin Lynd

Re: Assignment grading usually requires horizontal scrolling

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
I haven't used that service or theme however, if you only want it to only apply to page modules, then you'd most likely need to add *something along the lines of* this (#page-mod-page-view) to the start of the css provided in order to only target the page module.