Нет описания

assessment_contenteditable.blade.php 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @if($role==1)
  4. @include('local.managers.admins._new_navigation')
  5. @elseif($role==2)
  6. @include('local.managers.sCoords._new_navigation')
  7. @elseif($role==3)
  8. @include('local.managers.pCoords._new_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" contenteditable="true" data-toggle="tooltip" data-placement="top" data-container="tr" title="{{{ $assessment->name }}}">
  111. {{ $scores_array[$assessment->id][$rubric_contents[$i]->id] }}
  112. </td>
  113. @endfor
  114. <td class="percentage">{{{ $assessment->percentage }}}</td>
  115. <td class="">
  116. <textarea class="comments full-textarea" placeholder="Max. 255 characters" maxLength="255" >{{ $assessment->comments }}</textarea>
  117. </td>
  118. </tr>
  119. @endforeach
  120. @else
  121. @foreach ($students as $student)
  122. <tr class="student-row">
  123. <td class="student-field" data-student-id={{ $student->id }}>{{{ $student->name }}}</td>
  124. @for ($i = 0; $i<sizeof($rubric_contents); $i++)
  125. <td class="score-field" contenteditable="true" data-toggle="tooltip" data-placement="top" data-container="tr" title="{{{ $student->name }}}">
  126. N/A
  127. </td>
  128. @endfor
  129. <td class="percentage"></td>
  130. <td class="comments"><textarea class="comments full-textarea" placeholder="Max. 255 characters" maxLength="255" ></textarea></td>
  131. </tr>
  132. @endforeach
  133. @endif
  134. </tbody>
  135. <tfoot>
  136. <tr>
  137. <td>
  138. <strong>Passed Criteria Percentage </strong>
  139. </td>
  140. @for ($i = 0; $i<sizeof($rubric_contents); $i++)
  141. <td class="total"><strong><span class="total-value"></span><span class="percent-sign">%</span></strong>
  142. </td>
  143. @endfor
  144. <td></td>
  145. </tr>
  146. </tfoot>
  147. </table>
  148. <div class="text-center">
  149. <button id="button-submit-assessment" class="btn btn-primary btn-lg publish">Publish Assessment</button>
  150. <button id="button-draft-assessment" class="btn btn-primary btn-lg draft">Save as Draft</button>
  151. </div>
  152. </div>
  153. </div>
  154. @stop
  155. @section('included-js')
  156. <!-- StickyTableHeaders js -->
  157. <script src="{{ asset('vendor/stickyTableHeaders/js/jquery.stickytableheaders.min.js') }}"></script>
  158. @stop
  159. @section ('javascript')
  160. // --------------------------------------------------------------------------
  161. // Page load
  162. // --------------------------------------------------------------------------
  163. // Enable fixed headers
  164. $('#assessment-table').stickyTableHeaders();
  165. // Hide spanish instructions by default
  166. $('#spanish-instructions').toggle();
  167. $('.total').each(function(index)
  168. {
  169. percentagePerCriterion(index+1);
  170. });
  171. $('.student-row').each(function(index)
  172. {
  173. percentagePerStudent($(this));
  174. });
  175. // Highlight student names on hover
  176. $('.student-row td').on('mouseover', function()
  177. {
  178. $('.student-field').css(
  179. {
  180. 'color': 'black',
  181. 'font-weight': 'normal'
  182. });
  183. $(this).siblings('.student-field').css(
  184. {
  185. 'color': '#DD0026',
  186. });
  187. });
  188. toggleSaveButton();
  189. // --------------------------------------------------------------------------
  190. // Functions
  191. // --------------------------------------------------------------------------
  192. // Calculate average of students that passed a specific criterion
  193. function percentagePerCriterion(columnIndex)
  194. {
  195. // Object to hold the score sum of each criterion
  196. var sum = 0 ;
  197. var total = 0;
  198. columnIndex+=1;
  199. // Iterate through rows of column
  200. $('table tbody tr td:nth-child('+columnIndex+')').each(function( index )
  201. {
  202. var val = parseInt($(this).text().trim());
  203. /* If N/A or 0 are chosen, they are ignored in the calculation. */
  204. if(val % 1 === 0)
  205. {
  206. if(val >= parseInt($('#expected_points').text()))
  207. {
  208. sum+=1;
  209. }
  210. total+=1;
  211. }
  212. });
  213. var percentage= (sum/total*100).toFixed(2);
  214. // If no criteria were assessed, set the percentage to 0.
  215. // This is to avoid show NaN%
  216. if(total==0)
  217. {
  218. percentage="N/A";
  219. $('.total:nth-child('+columnIndex+') span.total-value').html(percentage);
  220. $('.total:nth-child('+columnIndex+') span.percent-sign').hide();
  221. }
  222. else
  223. {
  224. $('.total:nth-child('+columnIndex+') span.total-value').html(percentage);
  225. $('.total:nth-child('+columnIndex+') span.percent-sign').show();
  226. }
  227. }
  228. // Calculate total for a specific student
  229. function percentagePerStudent(row)
  230. {
  231. // Object to hold the score student's total score
  232. var sum = 0 ;
  233. var total = 0;
  234. var percentage = 0;
  235. row.find('td.score-field').each(function(index)
  236. {
  237. var val = parseInt($(this).text().trim());
  238. if(val % 1 === 0) //If number is integer
  239. {
  240. sum += val;
  241. total+=1;
  242. }
  243. });
  244. percentage =((sum/(total*8))*100).toFixed(2);
  245. //If percentage is not a number, set it to 0.
  246. if(isNaN(percentage))
  247. {
  248. percentage="N/A";
  249. row.find('.percentage').html('<strong>'+percentage+'</strong>');
  250. }
  251. else
  252. {
  253. row.find('.percentage').html('<strong>'+percentage+'%</strong>');
  254. }
  255. }
  256. function toggleSaveButton()
  257. {
  258. // Check at least one total criterion percentage is not zero
  259. var all_zeros_criteria = true;
  260. $('.total-value').each(function(index)
  261. {
  262. if(Number($(this).text())>0.00)
  263. all_zeros_criteria = false;
  264. });
  265. // Check at least one total student percentage is not zero
  266. var all_zeros_students = true;
  267. $('.percentage').each(function(index)
  268. {
  269. var value = $(this).text().replace('%', '');
  270. if(Number(value)>0.00)
  271. all_zeros_students = false;
  272. });
  273. if(all_zeros_criteria && all_zeros_students)
  274. {
  275. $('#button-submit-assessment').prop('disabled', true);
  276. $('#button-draft-assessment').prop('disabled', true);
  277. }
  278. else
  279. {
  280. $('#button-submit-assessment').prop('disabled', false);
  281. $('#button-draft-assessment').prop('disabled', false);
  282. }
  283. return;
  284. }
  285. // --------------------------------------------------------------------------
  286. // Events
  287. // --------------------------------------------------------------------------
  288. $('td.score-field').on('focus', function()
  289. {
  290. $(this).addClass('active');
  291. // See http://stackoverflow.com/a/6150060/145346
  292. var cell = this;
  293. var range, selection;
  294. if (document.body.createTextRange) {
  295. range = document.body.createTextRange();
  296. range.moveToElementText(cell);
  297. range.select();
  298. } else if (window.getSelection) {
  299. selection = window.getSelection();
  300. range = document.createRange();
  301. range.selectNodeContents(cell);
  302. selection.removeAllRanges();
  303. selection.addRange(range);
  304. }
  305. });
  306. // When any score changes, calculate percentages
  307. $('td.score-field').on('blur', function()
  308. {
  309. var value = $(this).text().trim();
  310. var allowed_values = ['0', '1', '2', '3', '4', '5', '6', '7', '8', 'N/A'];
  311. console.log(value);
  312. if(allowed_values.indexOf(value) === -1)
  313. {
  314. $(this).text('N/A');
  315. }
  316. else
  317. {
  318. $(this).text(value);
  319. }
  320. $(this).removeClass('active');
  321. percentagePerCriterion($(this).index());
  322. percentagePerStudent($(this).closest('tr'));
  323. toggleSaveButton();
  324. });
  325. // Submit button is clicked
  326. $('#button-submit-assessment, #button-draft-assessment').on('click', function(e)
  327. {
  328. var draft = 0;
  329. if($(this).hasClass('draft'))
  330. draft = 1;
  331. var expected_points = parseInt($('#expected_points').text());
  332. var expected_percentage = parseInt($('#expected_percentage').text());
  333. //Prevent page refresh
  334. e.preventDefault();
  335. // Row in the database
  336. var activity_id = $('#activity').data('activity-id');
  337. // Object to hold the score sum of each criterion
  338. var criteriaSumObject = new Object();
  339. // Object to hold % of students that passed each criterion
  340. var CriteriaAchievedPercentage = new Object();
  341. // Object to hold all student evaluations
  342. var studentAssessments = new Array();
  343. // Iterate through all students
  344. $('#assessment-table tbody tr').each(function( index )
  345. {
  346. var ScoresObject = new Object(); // Scores column in database
  347. var CriterionObject = new Object(); // Objects inside ScoresObject
  348. var SingleStudentAssessment = new Object();
  349. SingleStudentAssessment.student_id = $(this).find('.student-field').data('student-id');
  350. // For each criterion, store the score in array
  351. $(this).children('td.score-field').each(function(index)
  352. {
  353. // Table cell with a score
  354. var scoreField = $(this);
  355. // Criterion being evaluated in current iteration
  356. var criterion_id = $('.criterion-field').eq(index).data('criterion-id');
  357. // Score in the cell
  358. var score = scoreField.text().trim();
  359. // Store the score in the scores Object
  360. ScoresObject[criterion_id]=score;
  361. // Initialize the index for the sum object, if it's undefined
  362. if(typeof(criteriaSumObject[criterion_id]) == 'undefined')
  363. {
  364. criteriaSumObject[criterion_id]=0;
  365. }
  366. // Add to this criterion's total
  367. criteriaSumObject[criterion_id]+=parseInt(score);
  368. });
  369. SingleStudentAssessment.scores = ScoresObject;
  370. SingleStudentAssessment.percentage = $(this).find('.percentage').text();
  371. SingleStudentAssessment.comments = $.trim($(this).find('.comments').val());
  372. console.log('comment '+index+': '+SingleStudentAssessment.comments);
  373. // console.log('student object: '+JSON.stringify(SingleStudentAssessment));
  374. var clone = jQuery.extend({}, SingleStudentAssessment);
  375. studentAssessments.push(clone);
  376. });
  377. // console.log('students: '+JSON.stringify(studentAssessments));
  378. // console.log('total points per criteria: '+JSON.stringify(criteriaSumObject));
  379. // Iterate through all evaluated criteria, determining which were achieved
  380. // by comparing the completion percentage to the expected percentage
  381. var CriteriaAchievedResults = new Object();
  382. $('.total').each(function(index)
  383. {
  384. var id = $('.criterion-field').eq(index).data('criterion-id');
  385. CriteriaAchievedPercentage[id] = parseFloat($(this).find('span').text());
  386. //Set whether criterion was achieved (1) or not (0)
  387. if(CriteriaAchievedPercentage[id] >= expected_percentage)
  388. {
  389. CriteriaAchievedResults[id]=1;
  390. }
  391. else if (CriteriaAchievedPercentage[id] < expected_percentage)
  392. {
  393. CriteriaAchievedResults[id]=0;
  394. }
  395. else
  396. {
  397. CriteriaAchievedResults[id]=null;
  398. }
  399. });
  400. // console.log('criteria percentages: '+JSON.stringify(CriteriaAchievedPercentage));
  401. // console.log('criteria achieved results: '+JSON.stringify(CriteriaAchievedResults));
  402. // Save activity to the database
  403. $.post
  404. (
  405. "{{ URL::action('ActivitiesController@saveAssessment') }}",
  406. {
  407. activity_id: activity_id,
  408. draft: draft,
  409. criteria_achieved_percentage: JSON.stringify(CriteriaAchievedPercentage),
  410. criteria_achievement: JSON.stringify(CriteriaAchievedResults),
  411. student_scores: JSON.stringify(studentAssessments),
  412. },
  413. function(data)
  414. {
  415. location.reload();
  416. }
  417. );
  418. });
  419. // Language button is clicked
  420. $('#button-language').on('click', function(e)
  421. {
  422. $('#english-instructions').stop().toggle();
  423. $('#spanish-instructions').stop().toggle();
  424. });
  425. // Criterion name is clicked
  426. $('.criterion-field').on('click', function()
  427. {
  428. $.ajax({
  429. type: 'POST',
  430. url: "{{ URL::action('RubricsController@fetchRubricCriterion') }}",
  431. data: {
  432. rubric_id: $(this).closest('table').data('rubric-id'),
  433. criterion_id: $(this).data('criterion-id'),
  434. },
  435. success: function(data)
  436. {
  437. data = JSON.parse(data);
  438. $('.modal-title').html(data.name);
  439. $('.modal-body tbody tr').empty();
  440. $('.modal-body tbody tr').append
  441. (
  442. '<td>'+data.description12+'</td>'
  443. +'<td>'+data.description34+'</td>'
  444. +'<td>'+data.description56+'</td>'
  445. +'<td>'+data.description78+'</td>'
  446. );
  447. if(data.notes!=null)
  448. $('.modal-body tbody tr').append('<td>'+data.notes+'</td>');
  449. else
  450. $('.modal-body tbody tr').append('<td></td>');
  451. },
  452. async:true
  453. });
  454. $('#modal-view-criterion').modal();
  455. });
  456. @stop