Separate vertical scroll bars for the submitted file and the grader feedback in the inspect submission view

[markkuriekkinen]

The inspect submission view shows submitted files on the left and the grader feedback on the right. When the contents are long, it would be useful to scroll both sides independently vertically, that is to say, you could scroll down the submitted file without scrolling/moving the grader feedback part.

This is useful in manual assessment, e.g., in the Y1 course exam.

[markkuriekkinen]

This was partially implemented already in A+ v1.11, #877. However, the separate scrolling is only enabled when the grader feedback consists of only one <pre> element with plain text contents. If the feedback includes more HTML formatting, then the button for enabling separate scrolling is not added to the page.

a-plus/exercise/static/exercise/assessment.js

Lines 55 to 56 in 4def539

	const preElement = tabElement.children('pre');
	if (preElement.length === 1) {

In the code, stickyButton is the button for enabling separate scrolling.

a-plus/exercise/static/exercise/assessment.js

Lines 63 to 73 in 4def539

	var stickyButton = {
	action: function() {
	isSticky = !isSticky;
	tabElement.toggleClass('sticky', isSticky);
	localStorage.setItem('graderFeedbackSticky', isSticky);
	},
	icon: isSticky ? 'check' : 'unchecked',
	text: _('Scroll separately'),
	toggle: true,
	};
	extraButtons.push(stickyButton);

Simple <pre> plain text feedback is used in, e.g., Hello Python assignment in the Aplus manual. However, assignments that use Python grader utils (like the Y1 exam does), output HTML-formatted feedback that uses folded subsections.

https://plus.cs.aalto.fi/aplus-manual/master/programming_exercises/hello_world/#chapter-exercise-1

https://plus.cs.aalto.fi/aplus-manual/master/programming_exercises/graderutils/#chapter-exercise-1

Note that some of the buttons make more sense for plain text feedback and less for HTML-formatted feedback, but at least the "scroll separately" button is useful in all cases. The highlightCode jQuery plugin includes options that disable some buttons:

a-plus/exercise/static/exercise/assessment.js

Line 79 in 4def539

.highlightCode({extraButtons: extraButtons});

a-plus/assets/js/aplus.js

Line 284 in 4def539

if (!options || !options.noCopy) {

a-plus/assets/js/aplus.js

Line 323 in 4def539

if (!options || !options.noWrap) {

a-plus/assets/js/aplus.js

Line 334 in 4def539

if (!options || !options.noDownload) {

preElement
  .addClass('hljs language-plaintext')
  .highlightCode({
    extraButtons: extraButtons,
    noCopy: true,
    noWrap: true,
    noDownload: true,
  });

The above code snippet shows how to use the options for highlightCode. However, since highlightCode expects plain text content and adds line numbers around the content, it can not be used as is with HTML-formatted feedback.

[EerikSaksi]

I added a commit which makes HTML grader results scrollable, and ensures that if there's multiple submitted files each with their own "Scroll Separately" button that they are synced.