No Description

assessment.blade.php 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @if($role==1)
  4. @include('local.managers.admins._navigation')
  5. @elseif($role==2)
  6. @include('local.managers.sCoords._navigation')
  7. @elseif($role==3)
  8. @include('local.managers.pCoords._navigation')
  9. @else
  10. @include('local.professors._navigation')
  11. @endif
  12. @stop
  13. @section('main')
  14. <!-- View criterion info -->
  15. <div class="modal fade" id="modal-view-criterion">
  16. <div class="modal-dialog modal-lg">
  17. <div class="modal-content">
  18. <div class="modal-header">
  19. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  20. <h4 class="modal-title"></h4>
  21. </div>
  22. <div class="modal-body">
  23. <table class="table table-bordered">
  24. <thead>
  25. <th>Beginning (1-2)</th>
  26. <th>In Progress (3-4)</th>
  27. <th>Good (5-6)</th>
  28. <th>Excellent (7-8)</th>
  29. <th>Notes</th>
  30. </thead>
  31. <tbody>
  32. <tr></tr>
  33. </tbody>
  34. </table>
  35. </div>
  36. </div><!-- /.modal-content -->
  37. </div><!-- /.modal-dialog -->
  38. </div><!-- /.modal -->
  39. <div class="row">
  40. <div class="col-md-12">
  41. <div class="well">
  42. <button id="button-language" class="btn btn-default btn-sm pull-right">Change language / Cambiar idioma</button>
  43. <div id="english-instructions">
  44. <h4>Instructions:</h4>
  45. <ol>
  46. <li>Fill in the scores per criterion for each student. You can see the student's final score in the last column.</li>
  47. <li>Click 'Publish Assessment' if you are done. Click 'Save as Draft' if you have not finished assessing the activity. You can come back later if you need to make any updates.
  48. <li>Unpublished results will be isolated. That is, they <strong>will not</strong> be aggregated to other results.</li>
  49. </ol>
  50. <h4>Notes:</h4>
  51. <ul>
  52. <li>If a particular criterion cannot be assessed for a student, select "N/A" (Not Applicable). This <strong>will not</strong> affect the student's score.</li>
  53. <li>If a particular criterion was assessed but the student did not complete the necessary work, you must select "0". This <strong>will</strong> affect the student's score.</li>
  54. <li>If a student did not complete any work for this activity, select "0" for all columns in that student's row.</li>
  55. <li>If a student dropped the class, select "N/A" (Not Applicable) for all columns in that student's row.</li>
  56. <li>Cells with "N/A" <strong>will not</strong> be used to determine whether a criterion is achieved. Only scores from 0 to 8 will be considered for this purpose.</li>
  57. <li><strong>At least one score must be from 1-8.</strong> Otherwise, the 'Publish Assessment' and 'Save as Draft' buttons will be <strong>disabled</strong>. If you want to delete previously saved scores, go back to the activity and click the "Delete Assessment" button.</li>
  58. </ul>
  59. </div>
  60. <div id="spanish-instructions">
  61. <h4>Instrucciones:</h4>
  62. <ol>
  63. <li>Seleccione la puntuación por criterio para cada estudiante. Puede ver la puntuación final en la última columna.</li>
  64. <li>Oprima 'Publish Assessment' una vez termine. Si no ha terminado, oprima 'Save as Draft' (guardar como borrador). Puede volver a esta página luego si desea hacer cambios.</li>
  65. <li>Los resultados guardados como borrador estarán asilados. Es decir, <strong>no</strong> se agregarán a los demás resultados.</li>
  66. </ol>
  67. <h4>Notas:</h4>
  68. <ul>
  69. <li>Si un criterio particular no puede ser evaluado, seleccione "N/A" (No Aplica). Esto <strong>no</strong> afectará la puntuación final del estudiante.</li>
  70. <li>Si un criterio particular fue evaluado, pero el estudiante no completó el trabajo necesario, debe seleccionar "0". Esto <strong>sí</strong> afectará la puntuación final del estudiante.</li>
  71. <li>Si un estudiante no completó el trabajo para esta actividad, seleccione "0" en todas las columnas de la fila de ese estudiante.</li>
  72. <li>Si un estudiante se dio de baja, seleccione "N/A" (No Aplica) en todas las columnas de la fila de ese estudiante.</li>
  73. <li>Las celdas con "N/A" <strong>no</strong> serán utilizadas para determinar si un criterio se alcanzó o no. Solamente las puntuaciones del 0 al 8 serán consideradas.</li>
  74. <li><strong>Al menos una puntuación deber ser del 1 al 8.</strong> De otra manera, el botón para guardar <strong>se desactivará</strong>. Si quiere borrar los resultados del avalúo, vuelva a la actividad y oprima el botón que dice "Delete Assessment".</li>
  75. </ul>
  76. </div>
  77. </div>
  78. <p id="course">Course: {{{ $course->code }}} {{{ $course->number }}}</p>
  79. <p id="section">Section: {{{ $course->section }}}</p>
  80. {{ HTML::linkAction('ActivitiesController@show', 'Back to Activity', array($activity->id), array('class'=>'btn btn-default btn-sm pull-right')) }}
  81. <p id="activity" data-activity-id="{{{ $activity->id }}}">Activity: {{{ $activity->name}}} </p>
  82. <p>Passing Criteria: <span id="expected_percentage">{{{ $rubric->expected_percentage }}}% of students must obtain at least </span><span id="expected_points">{{{$rubric->expected_points}}}</span> points </p>
  83. <table data-rubric-id="{{{ $rubric->id }}}" id="assessment-table" class="table table-striped table-condensed table-bordered">
  84. <thead>
  85. <tr>
  86. <th>
  87. <div class="th-box">
  88. Student
  89. </div>
  90. </th>
  91. @foreach ($rubric_contents as $criterion)
  92. <th class="criterion-field" data-criterion-id="{{{ $criterion->id }}}"><div class="th-box">{{ $criterion->name}}</div></th>
  93. @endforeach
  94. <th>Student Percentage</th>
  95. <th>Comments</th>
  96. </tr>
  97. </thead>
  98. <tbody>
  99. <!-- If the activity was assessed, load the assessment. Otherwise load empty sheet -->
  100. @if(sizeof($assessments)!=0)
  101. <!-- For each assessment -->
  102. @foreach ($assessments as $assessment)
  103. <tr class="student-row">
  104. <!-- Fetch student name -->
  105. <td class="student-field" data-student-id="{{ $assessment->student_id }}">
  106. {{{ $assessment->name }}}
  107. </td>
  108. <!-- For each criterion in the rubric, there's a score field -->
  109. @for ($i = 0; $i<sizeof($rubric_contents); $i++)
  110. <td class="score-field">
  111. <select name="" id="" class="form-control" data-toggle="tooltip" data-placement="right" title="{{{ $assessment->name }}}">
  112. <!-- Option from 0-8 -->
  113. @for ($j=0; $j<=8; $j++)
  114. <!-- If the decoded scores with index as the assessment id and second index as criterion id equals the loop index, mark it as selected -->
  115. @if( $j == $scores_array[$assessment->id][$rubric_contents[$i]->id])
  116. <option value="{{$j}}" selected="selected">{{ $j }}</option>
  117. @else
  118. <option value="{{$j}}">{{ $j }}</option>
  119. @endif
  120. @endfor
  121. <!-- N/A option -->
  122. @if( $scores_array[$assessment->id][$rubric_contents[$i]->id]=="N/A")
  123. <option value="N/A" selected="selected">N/A</option>
  124. @else
  125. <option value="N/A">N/A</option>
  126. @endif
  127. </select>
  128. </td>
  129. @endfor
  130. <td class="percentage">{{{ $assessment->percentage }}}</td>
  131. <td class="">
  132. <textarea class="comments full-textarea" placeholder="Max. 255 characters" maxLength="255" >{{ $assessment->comments }}</textarea>
  133. </td>
  134. </tr>
  135. @endforeach
  136. @else
  137. @foreach ($students as $student)
  138. <tr class="student-row">
  139. <td class="student-field" data-student-id={{ $student->id }}>{{{ $student->name }}}</td>
  140. @for ($i = 0; $i<sizeof($rubric_contents); $i++)
  141. <td class="score-field">
  142. <select name="" id="" class="form-control" data-toggle="tooltip" data-placement="right" title="{{{ $student->name }}}">
  143. <option value="0">0</option>
  144. <option value="1">1</option>
  145. <option value="2">2</option>
  146. <option value="3">3</option>
  147. <option value="4">4</option>
  148. <option value="5">5</option>
  149. <option value="6">6</option>
  150. <option value="7">7</option>
  151. <option value="8">8</option>
  152. <option selected="selected" value="N/A">N/A</option>
  153. </select>
  154. </td>
  155. @endfor
  156. <td class="percentage"></td>
  157. <td class="comments"><textarea class="comments full-textarea" placeholder="Max. 255 characters" maxLength="255" ></textarea></td>
  158. </tr>
  159. @endforeach
  160. @endif
  161. </tbody>
  162. <tfoot>
  163. <tr>
  164. <td>
  165. <strong>Passed Criteria Percentage </strong>
  166. </td>
  167. @for ($i = 0; $i<sizeof($rubric_contents); $i++)
  168. <td class="total"><strong><span class="total-value"></span><span class="percent-sign">%</span></strong>
  169. </td>
  170. @endfor
  171. <td></td>
  172. </tr>
  173. </tfoot>
  174. </table>
  175. <div class="text-center">
  176. <button id="button-submit-assessment" class="btn btn-primary btn-lg publish">Publish Assessment</button>
  177. <button id="button-draft-assessment" class="btn btn-primary btn-lg draft">Save as Draft</button>
  178. </div>
  179. </div>
  180. </div>
  181. @stop
  182. @section('included-js')
  183. <!-- StickyTableHeaders js -->
  184. <script src="{{ asset('vendor/stickyTableHeaders/js/jquery.stickytableheaders.min.js') }}"></script>
  185. @stop
  186. @section ('javascript')
  187. // --------------------------------------------------------------------------
  188. // Page load
  189. // --------------------------------------------------------------------------
  190. // Enable fixed headers
  191. $('#assessment-table').stickyTableHeaders();
  192. // Hide spanish instructions by default
  193. $('#spanish-instructions').toggle();
  194. $('.total').each(function(index)
  195. {
  196. percentagePerCriterion(index+1);
  197. });
  198. $('.student-row').each(function(index)
  199. {
  200. percentagePerStudent($(this));
  201. });
  202. // Highlight student names on hover
  203. $('.student-row td').on('mouseover', function()
  204. {
  205. $('.student-field').css(
  206. {
  207. 'color': 'black',
  208. });
  209. $(this).siblings('.student-field').css(
  210. {
  211. 'color': '#DD0026',
  212. });
  213. });
  214. toggleSaveButton();
  215. // --------------------------------------------------------------------------
  216. // Functions
  217. // --------------------------------------------------------------------------
  218. // Calculate average of students that passed a specific criterion
  219. function percentagePerCriterion(columnIndex)
  220. {
  221. // Object to hold the score sum of each criterion
  222. var sum = 0 ;
  223. var total = 0;
  224. columnIndex+=1;
  225. // Iterate through rows of column
  226. $('table tbody tr td:nth-child('+columnIndex+')').each(function( index )
  227. {
  228. var val = parseInt($(this).children('select').find(':selected').val());
  229. /* If N/A or 0 are chosen, they are ignored in the calculation. */
  230. if(val % 1 === 0)
  231. {
  232. if(val >= parseInt($('#expected_points').text()))
  233. {
  234. sum+=1;
  235. }
  236. total+=1;
  237. }
  238. });
  239. var percentage= (sum/total*100).toFixed(2);
  240. // If no criteria were assessed, set the percentage to 0.
  241. // This is to avoid show NaN%
  242. if(total==0)
  243. {
  244. percentage="N/A";
  245. $('.total:nth-child('+columnIndex+') span.total-value').html(percentage);
  246. $('.total:nth-child('+columnIndex+') span.percent-sign').hide();
  247. }
  248. else
  249. {
  250. $('.total:nth-child('+columnIndex+') span.total-value').html(percentage);
  251. $('.total:nth-child('+columnIndex+') span.percent-sign').show();
  252. }
  253. }
  254. // Calculate total for a specific student
  255. function percentagePerStudent(row)
  256. {
  257. // Object to hold the score student's total score
  258. var sum = 0 ;
  259. var total = 0;
  260. var percentage = 0;
  261. row.find('td.score-field').each(function(index)
  262. {
  263. var val = parseInt($(this).children('select').find(':selected').val());
  264. if(val % 1 === 0) //If number is integer
  265. {
  266. sum += val;
  267. total+=1;
  268. }
  269. });
  270. percentage =((sum/(total*8))*100).toFixed(2);
  271. //If percentage is not a number, set it to 0.
  272. if(isNaN(percentage))
  273. {
  274. percentage="N/A";
  275. row.find('.percentage').html('<strong>'+percentage+'</strong>');
  276. }
  277. else
  278. {
  279. row.find('.percentage').html('<strong>'+percentage+'%</strong>');
  280. }
  281. }
  282. function toggleSaveButton()
  283. {
  284. // Check at least one total criterion percentage is not zero
  285. var all_zeros_criteria = true;
  286. $('.total-value').each(function(index)
  287. {
  288. if(Number($(this).text())>0.00)
  289. all_zeros_criteria = false;
  290. });
  291. // Check at least one total student percentage is not zero
  292. var all_zeros_students = true;
  293. $('.percentage').each(function(index)
  294. {
  295. var value = $(this).text().replace('%', '');
  296. if(Number(value)>0.00)
  297. all_zeros_students = false;
  298. });
  299. if(all_zeros_criteria && all_zeros_students)
  300. {
  301. $('#button-submit-assessment').prop('disabled', true);
  302. $('#button-draft-assessment').prop('disabled', true);
  303. }
  304. else
  305. {
  306. $('#button-submit-assessment').prop('disabled', false);
  307. $('#button-draft-assessment').prop('disabled', false);
  308. }
  309. return;
  310. }
  311. // --------------------------------------------------------------------------
  312. // Events
  313. // --------------------------------------------------------------------------
  314. // When any score changes, calculate percentages
  315. $('select').on('change', function(e)
  316. {
  317. percentagePerCriterion($(this).parent().index());
  318. percentagePerStudent($(this).closest('tr'));
  319. toggleSaveButton();
  320. });
  321. // Submit button is clicked
  322. $('#button-submit-assessment, #button-draft-assessment').on('click', function(e)
  323. {
  324. var draft = 0;
  325. if($(this).hasClass('draft'))
  326. draft = 1;
  327. var expected_points = parseInt($('#expected_points').text());
  328. var expected_percentage = parseInt($('#expected_percentage').text());
  329. //Prevent page refresh
  330. e.preventDefault();
  331. // Row in the database
  332. var activity_id = $('#activity').data('activity-id');
  333. // Object to hold the score sum of each criterion
  334. var criteriaSumObject = new Object();
  335. // Object to hold % of students that passed each criterion
  336. var CriteriaAchievedPercentage = new Object();
  337. // Object to hold all student evaluations
  338. var studentAssessments = new Array();
  339. // Iterate through all students
  340. $('#assessment-table tbody tr').each(function( index )
  341. {
  342. var ScoresObject = new Object(); // Scores column in database
  343. var CriterionObject = new Object(); // Objects inside ScoresObject
  344. var SingleStudentAssessment = new Object();
  345. SingleStudentAssessment.student_id = $(this).find('.student-field').data('student-id');
  346. // For each criterion, store the score in array
  347. $(this).children('td.score-field').each(function(index)
  348. {
  349. // Table cell with a score
  350. var scoreField = $(this);
  351. // Criterion being evaluated in current iteration
  352. var criterion_id = $('.criterion-field').eq(index).data('criterion-id');
  353. // Score in the cell
  354. var score = scoreField.children('select').find(':selected').val();
  355. // Store the score in the scores Object
  356. ScoresObject[criterion_id]=score;
  357. // Initialize the index for the sum object, if it's undefined
  358. if(typeof(criteriaSumObject[criterion_id]) == 'undefined')
  359. {
  360. criteriaSumObject[criterion_id]=0;
  361. }
  362. // Add to this criterion's total
  363. criteriaSumObject[criterion_id]+=parseInt(score);
  364. });
  365. SingleStudentAssessment.scores = ScoresObject;
  366. SingleStudentAssessment.percentage = $(this).find('.percentage').text();
  367. SingleStudentAssessment.comments = $.trim($(this).find('.comments').val());
  368. // console.log('comment '+index+': '+SingleStudentAssessment.comments);
  369. // console.log('student object: '+JSON.stringify(SingleStudentAssessment));
  370. var clone = jQuery.extend({}, SingleStudentAssessment);
  371. studentAssessments.push(clone);
  372. });
  373. // console.log('students: '+JSON.stringify(studentAssessments));
  374. // console.log('total points per criteria: '+JSON.stringify(criteriaSumObject));
  375. // Iterate through all evaluated criteria, determining which were achieved
  376. // by comparing the completion percentage to the expected percentage
  377. var CriteriaAchievedResults = new Object();
  378. $('.total').each(function(index)
  379. {
  380. var id = $('.criterion-field').eq(index).data('criterion-id');
  381. CriteriaAchievedPercentage[id] = parseFloat($(this).find('span').text());
  382. //Set whether criterion was achieved (1) or not (0)
  383. if(CriteriaAchievedPercentage[id] >= expected_percentage)
  384. {
  385. CriteriaAchievedResults[id]=1;
  386. }
  387. else if (CriteriaAchievedPercentage[id] < expected_percentage)
  388. {
  389. CriteriaAchievedResults[id]=0;
  390. }
  391. else
  392. {
  393. CriteriaAchievedResults[id]=null;
  394. }
  395. });
  396. // console.log('criteria percentages: '+JSON.stringify(CriteriaAchievedPercentage));
  397. // console.log('criteria achieved results: '+JSON.stringify(CriteriaAchievedResults));
  398. // Save activity to the database
  399. $.post
  400. (
  401. "{{ URL::action('ActivitiesController@saveAssessment') }}",
  402. {
  403. activity_id: activity_id,
  404. draft: draft,
  405. criteria_achieved_percentage: JSON.stringify(CriteriaAchievedPercentage),
  406. criteria_achievement: JSON.stringify(CriteriaAchievedResults),
  407. student_scores: JSON.stringify(studentAssessments),
  408. },
  409. function(data)
  410. {
  411. location.replace(data);
  412. }
  413. );
  414. });
  415. // Language button is clicked
  416. $('#button-language').on('click', function(e)
  417. {
  418. $('#english-instructions').stop().toggle();
  419. $('#spanish-instructions').stop().toggle();
  420. });
  421. // Criterion name is clicked
  422. $('.criterion-field').on('click', function()
  423. {
  424. $.ajax({
  425. type: 'POST',
  426. url: "{{ URL::action('RubricsController@fetchRubricCriterion') }}",
  427. data: {
  428. rubric_id: $(this).closest('table').data('rubric-id'),
  429. criterion_id: $(this).data('criterion-id'),
  430. },
  431. success: function(data)
  432. {
  433. data = JSON.parse(data);
  434. $('.modal-title').html(data.name);
  435. $('.modal-body tbody tr').empty();
  436. $('.modal-body tbody tr').append
  437. (
  438. '<td>'+data.description12+'</td>'
  439. +'<td>'+data.description34+'</td>'
  440. +'<td>'+data.description56+'</td>'
  441. +'<td>'+data.description78+'</td>'
  442. );
  443. if(data.notes!=null)
  444. $('.modal-body tbody tr').append('<td>'+data.notes+'</td>');
  445. else
  446. $('.modal-body tbody tr').append('<td></td>');
  447. },
  448. async:true
  449. });
  450. $('#modal-view-criterion').modal();
  451. });
  452. @stop