| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/Gradebook/ |
Upload File : |
<?
// Gradebook/Gradebook_css_js.phpinc
// Setup the css and js for the gradebook.
if (da()) debugTrackBegin();
// Set parameters for gradebook table.
$tableWidth = 1200; // px width of table.
$studentIdWidth = 62; // px width for studentId.
$studentNameWidth = 145; // px width for student name.
$dataCellWidth = 20; // px width for data.
$cellPaddingTB = 1; // px of top and bottom padding.
$cellPaddingLR = 2; // px of left and right padding.
$sRows = 25; // Number of student rows to display before header is repeated.
// Do not change.
$fixedColumnWidth = $studentIdWidth + $studentNameWidth + ( 5 * $cellPaddingLR );
$xxx = 0;
$leftPosition = 15;
?>
<style type="text/css">
body { font-size:.8em; }
div#scrollContainer { text-align:left; /**/ border:1px solid blue; /**/ }
div.divScroll { /** /width: <?=$tableWidth?>px;/**/ overflow-x:scroll; margin-left:<?=$xxx?>px; overflow-y:visible; padding-bottom:2px; /**/ border:1px solid red; /**/ }
table.tblScroll { border-collapse:collapse; }
table.tblScroll tr td.secondCol, table.tblScroll tr th.secondCol { padding-left:50px; }
td.fixedColumn, th.fixedColumn { position:absolute; width:<?=$fixedColumnWidth?>px; left:<?=$leftPosition?>px; top:auto; z-index: 5; }
td.creditColumn, th.creditColumn { min-width:20px; width:20px; text-align:right; padding-right:<?=$cellPaddingLR?>px; }
td.dataColumn, th.dataColumn { min-width:<?=$dataCellWidth?>px; width:<?=$dataCellWidth?>px; text-align:center; padding-right:<?=$cellPaddingLR?>px; }
.grade { border-bottom:2px dotted #C0C0C0; }
.tblScroll td, .tblScroll th { white-space:nowrap; }
.row_highlight { background-color:#ff8 !important; }
.col_bold { font-weight: bold !important; }
.col_highlight { background-color:#fec !important; }
.row_highlight + .col_highlight { background-color:#9fb !important; font-weight: bold; }
div.studentIdColumn { float:left; width:<?=$studentIdWidth?>px; margin-top:-<?=$cellPaddingLR?>px; padding:<?=$cellPaddingTB?>px <?=$cellPaddingLR?>px <?=$cellPaddingTB?>px 0px; }
div.studentNameColumn { float:left; width:<?=$studentNameWidth?>px; margin-top:-<?=$cellPaddingLR?>px; padding:<?=$cellPaddingTB?>px <?=$cellPaddingLR?>px; }
td.click { cursor:pointer; }
div.divHeader { background-color: white; }
.evalBox:hover, .evalTitle {
overflow-x: visible !important;
}
.evalBox[aria-label]:hover:after, .evalTitle[aria-label]:hover:after {
overflow-x: visible !important;
}
.evalTitle[aria-label]:hover:after {
overflow-x: visible !important;
}
</style>
<script type="text/javascript">
var cellPaddingLR = <?=$cellPaddingLR?>;
var viewportwidth;
var viewportheight;
var fixedColumnWidth = <?=$fixedColumnWidth?>; //fixedColumnWidth = studentIdWidth + studentNameWidth + ( 5 * cellPaddingLR );
var previousRowId = '';
var previousRowClass = '';
var studentIdWidth = <?=$studentIdWidth?>;
var studentNameWidth = <?=$studentNameWidth?>;
var dataCellWidth = <?=$dataCellWidth?>;
function changeWidth(viewportName) {
var DEBUG = true;
if ( DEBUG ) { console.group(`${PC}changeWidth[viewportName=${viewportName}]`,CG); }//Collapsed
viewport();
if ( DEBUG ) { console.log(`${PC}viewportName=${viewportName} viewportwidth=${viewportwidth}`,CL); }
if ( DEBUG ) { console.log(`${PC}fixedColumnWidth=${fixedColumnWidth} studentNameWidth=${studentNameWidth} StudentNameCharCount=${StudentNameCharCount} cellPaddingLR=${cellPaddingLR}`,CL); }
if ( DEBUG ) { console.log(`${PC}fixedColumnWidth=${fixedColumnWidth} studentNameWidth=${studentNameWidth}`,CL); }
studentNameWidth = parseInt( 6.5 * StudentNameCharCount + 0 );
fixedColumnWidth = studentIdWidth + studentNameWidth + ( 5 * cellPaddingLR );
let studentNameColumnWidth = fixedColumnWidth - studentIdWidth - 8;
if ( DEBUG ) { console.log(`${PC}fixedColumnWidth=${fixedColumnWidth} studentNameWidth=${studentNameWidth}`,CI); }
// Change studentNameColumn widths.
var studentNameColumns = document.getElementsByClassName('studentNameColumn');
let i;
for (i=0; i<studentNameColumns.length; i++) {
if ( DEBUG ) { console.log(`${PC}studentNameColumn${i} width=${studentNameWidth}`,CL); }
studentNameColumns[i].style.width = studentNameWidth + "px";//studentNameWidth
}
// Change secondCol padding-left.
let secondColWidth = studentNameWidth - studentIdWidth - 8;
if ( secondColWidth < 110 ) { secondColWidth = 110;}
if ( DEBUG ) { console.log(`${PC}secondColWidth=${secondColWidth} studentNameWidth=${studentNameWidth} studentIdWidth=${studentIdWidth}`,CI); }
var secondCols = document.getElementsByClassName('secondCol');
for (i=0; i<secondCols.length; i++) {
secondCols[i].style.paddingLeft = secondColWidth + "px";
}
let edivScroll = document.getElementById(viewportName);
var tableWidth = viewportwidth - 30;
if ( tableWidth > <?=$tableWidth?>- 30 ) tableWidth = <?=$tableWidth?> - 30;
var leftPosition = ( ( viewportwidth - 1000 ) / 2 ) + 0;
if ( leftPosition < 15 ) leftPosition = 15;
if ( DEBUG ) { console.log(`${PC}tableWidth=${tableWidth} leftPosition=${leftPosition}`,CL); }
let totalWidth = viewportwidth - fixedColumnWidth - ( leftPosition * 2 );
let divisor = dataCellWidth + ( 1 * cellPaddingLR );
if ( DEBUG ) { console.log(`${PC}totalWidth=${totalWidth} divisor=${divisor}`,CL); }
let cells = totalWidth / divisor;
let blockviewportwidth = parseInt(cells + .5) * divisor + 120; // Add 70 for LDA column.
if ( DEBUG ) { console.log(`${PC}cells=${cells} blockviewportwidth=${blockviewportwidth}`,CL); }
let divScrollMarginLeft = fixedColumnWidth + 8;
if ( DEBUG ) { console.log(`${PC}${viewportName} marginLeft=${divScrollMarginLeft} width=${blockviewportwidth}`,CL); }
edivScroll.style.marginLeft = divScrollMarginLeft + "px";
edivScroll.style.width = blockviewportwidth + "px";
// Get divScroll width.
if ( DEBUG ) { console.log(`${PC}${viewportName} offsetWidth=${edivScroll.offsetWidth}`,CI); }
var fixedColums = document.getElementsByClassName('fixedColumn');
for (i=0; i<fixedColums.length; i++) {
fixedColums[i].style.left = leftPosition + "px";
fixedColums[i].style.width = fixedColumnWidth + "px";
}
var tw = fixedColumnWidth + blockviewportwidth;
document.getElementById('changeWidthDebug').innerHTML = 'viewportwidth='+viewportwidth+' tableWidth='+tableWidth+'<br>fixedColumnWidth='+fixedColumnWidth+' blockviewportwidth='+blockviewportwidth+' tableWidth='+tw+'<br>cells='+cells+' leftPosition='+leftPosition;
if ( DEBUG ) { console.groupEnd(); }
} // END changeWidth.
if (typeof document.getElementsByClassName === 'undefined' ) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
function highlightSNC(sId,eId) {
var DEBUG = DEBUG_ON;
if ( DEBUG ) { console.group(`${PC}highlightSNC[sId=${sId} eId=${eId}]`,CG); }//Collapsed
// Change background color of row.
var eSNC;
var studentNameColumns = document.getElementsByClassName("studentNameColumn");
//var previousSNCclass = 'row_even';
for ( var i=0; i<studentNameColumns.length; i++ ) {
eSNC = studentNameColumns[i];
//console.log(eSNC.id+' className='+eSNC.className);
// Check for start of student rows.
if ( eSNC.className.indexOf('row_') !== -1 ) { // Is this a student row?
// This is a student row.
/** /
if ( previousSNCclass == 'row_even' ) {
previousSNCclass = 'row_odd';
} else {
previousSNCclass = 'row_even';
}
/**/
eSNC.className = eSNC.className.replace(' row_highlight','');;//'studentNameColumn left '+previousSNCclass;
/** /
} else { // Is this a student row?
// This is not a student row.
previousSNCclass = 'row_even';
/**/
} // Is this a student row?
}
eSNC = document.getElementById('divStudentName_'+sId);
eSNC.className = 'studentNameColumn left row_highlight';
var eTR;
var TR_td;
var cl;
var i;
// Set previous row back to 'row_even' or 'row_odd'.
if ( previousRowId != '' ) {
eTR = document.getElementById('trStudentRow_'+previousRowId);
TR_td = eTR.cells;
for ( i=0; i<TR_td.length; i++ ) {
cl = TR_td[i].classList;
//cl.join(' ');
//cl = cl.toString().replace(' row_even','').replace(' row_odd','') + ' row_highlight';
cl = cl.toString().replace(' row_highlight','')+' '+previousRowClass;
//console.log(i+' previous cl='+cl);
TR_td[i].className = cl;
}
}
// Get selected row tds.
eTR = document.getElementById('trStudentRow_'+sId);
TR_td = eTR.cells;
//console.log('eTR.id='+eTR.id);
//console.log ('TR_td.length='+TR_td.length);
// Remember current row settings.
previousRowId = sId;
cl = TR_td[1].classList;
cl = cl.toString();
//console.log('clicked row cl='+cl+' cl.indexOf(\'row_odd\')='+cl.indexOf('row_odd'));
if ( cl.indexOf('row_odd') !== -1 ) {
previousRowClass = 'row_odd';
} else {
previousRowClass = 'row_even';
}
// Set selected row to 'row_highlight'.
for ( i=0; i<TR_td.length; i++ ) {
cl = TR_td[i].classList;
cl = cl.toString().replace(' row_even','').replace(' row_odd','') + ' row_highlight';
//cl = cl.toString() + ' row_highlight';
//console.log(i+' cl='+cl);
TR_td[i].className = cl;
}
// Change background color of column.
var dataColumns = document.getElementsByClassName("dataColumn");
// Get the Lab#.
var labNumber;
var currentLabId = 'title_'
for ( var i=0; i<dataColumns.length; i++ ) { // Loop thru data columns.
var currentCell = dataColumns[i];
if ( currentCell.id.indexOf(currentLabId) !== -1 ) { // Is this a lab title?
if ( currentCell.id.indexOf('_'+eId) !== -1 ) { // Is this not the current lab's title?
labNumber = currentCell.id.split('_');
labNumber = labNumber[1];
break;
} // Is this not the current lab's title?
} // Is this a lab title?
} // Loop thru data columns.
console.log('labNumber='+labNumber);
// Clear the current titles.
for ( var i=0; i<dataColumns.length; i++ ) { // Loop thru data columns.
var currentCell = dataColumns[i];
currentCell.className = currentCell.className.replace(' col_highlight','');
//} // Is this a lab title?
} // Loop thru data columns.
// For the title.
var id = currentLabId+labNumber+'_'+eId;
if ( DEBUG ) { console.log(`${PC}id=${id}`,CI); }
for ( var i=0; i<dataColumns.length; i++ ) { // Loop thru data columns.
var currentCell = dataColumns[i];
if ( currentCell.id.indexOf(id) !== -1 ) { // Is this a lab title?
if ( DEBUG ) { console.log(`${PC}This is the lab title id=${currentCell.id}`,CL); }
currentCell.className = currentCell.className + ' col_highlight';
} else { // Is this not the current lab's title?
//currentCell.className = currentCell.className.replace(' col_highlight','');
} // Is this not the current lab's title?
//} // Is this a lab title?
} // Loop thru data columns.
// For the points.
var currentLabId = 'points_'
id = currentLabId+labNumber+'_'+eId;
if ( DEBUG ) { console.log(`${PC}id=${id}`,CI); }
for ( var i=0; i<dataColumns.length; i++ ) { // Loop thru data columns.
var currentCell = dataColumns[i];
if ( currentCell.id.indexOf(id) !== -1 ) { // Is this a lab points?
//if ( currentCell.id.indexOf('_'+eId) === -1 ) { // Is this not the current lab's points?
currentCell.className = currentCell.className + ' col_highlight';
} else { // Is this not the current lab's points?
//currentCell.className = currentCell.className.replace(' col_highlight','');
} // Is this not the current lab's points?
//} // Is this a lab points?
} // Loop thru data columns.
// For the student grades.
var currentLabId = eId+'_';
id = currentLabId+labNumber;
if ( DEBUG ) { console.log(`${PC}id=${id}`,CI); }
for ( var i=0; i<dataColumns.length; i++ ) { // Loop thru data columns.
var currentCell = dataColumns[i];
if ( currentCell.id.indexOf(id) !== -1 ) { // Is this a student grade?
currentCell.className = currentCell.className + ' col_highlight';
} // Is this a student grade?
} // Loop thru data columns.
if ( DEBUG ) { console.groupEnd(); }
}
function viewport() {
if (typeof window.innerWidth != 'undefined') {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
} else {
// older versions of IE
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
}
</script>
<?
if (da()) debugTrackEnd();
?>