@extends('layouts.master') @section('navigation') @if(Auth::user()->role==1) @include('local.managers.admins._navigation') @elseif(Auth::user()->role==2) @include('local.managers.sCoords._navigation') @elseif(Auth::user()->role==3) @include('local.managers.pCoords._navigation') @endif @stop @section('main') <!-- Update Rubric Modal --> <div class="modal fade" id="modal-confirm-update"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Update Rubric</h4> </div> <div class="modal-body"> <p>Speak to any coordinators and/or professors in your School or Program that may be affected when you update this rubric. <strong>Professors that have already used this rubric will keep a copy of it as they used it, not an updated one.</strong></p> <p>Do you want to update this rubric?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> <button id="button-update-rubric" class="btn btn-primary save">Update</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Delete Rubric Modal --> <div class="modal fade" id="modal-confirm-delete"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Delete Rubric</h4> </div> <div class="modal-body"> <p>Please note: By deleting this rubric, it will no longer be available to your school's or program's professors. However, professors that have already used it will keep a copy in their activities. Speak to any coordinators and/or professors in your School or Program that may be affected.</p> <p>Are you sure you want to delete this rubric?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> <button id="button-delete-rubric" class="btn btn-primary">Delete</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-triangle-bottom"></span> General Information </div> <div class="panel-body"> <form> <div class="form-group"> <label>Select a template, or create your own rubric</label> <select id="select-template" class="form-control selectpicker"> <option data-template-id="0">Custom</option> @foreach ($templates as $template) @if($template->school_id==NULL && $template->program_id==NULL) <option data-template-id="{{ $template->id }}" data-template-program-id="{{ $template->program_id }}" data-admin="1" > {{{ $template->name }}} </option> @else <option data-template-id="{{ $template->id }}" data-template-program-id="{{ $template->program_id }}" > {{{ $template->name }}} </option> @endif @endforeach </select> </div> <!-- If user is admin s/he can pick which schools can view the rubric --> @if(Auth::user()->role==1) <div class="form-group"> <label>Select the School this rubric will be visible from</label> <select id="select-school" class="form-control selectpicker"> <option data-school-id="0">All</option> @foreach ($schools as $school) <option data-school-id="{{ $school->id }}"> {{ $school->name }} </option> @endforeach </select> </div> @endif <!-- If user is admin or school coordinator, s/he can pick which programs --> @if(Auth::user()->role==1 || Auth::user()->role==2) <div class="form-group"> <label>Select the Program this rubric belongs to</label> <select id="select-program" class="form-control selectpicker"> <option data-program-id="0">All</option> @foreach ($programs as $program) <option data-program-id="{{ $program->id }}" data-program-program-id="{{ $program->program_id }}" > {{ $program->name }} </option> @endforeach </select> </div> @endif </form> <label for="">Select the lower bound for passing criteria</label> <form class="form-inline"> <div class="form-group"> <!-- Select percentage. If there is a rubric, select the saved value --> <select id="expected_percentage" class="form-control selectpicker"> @for($i = 50; $i <= 100; $i++) @if($i==70) <option selected="selected" value="{{ $i }}">{{ $i }}</option> @else <option value="{{ $i }}">{{ $i }}</option> @endif @endfor </select> % of all students must score at least <!-- Select points. If there is a rubric, select the saved value --> <select id="expected_points" class="form-control selectpicker"> @for($i = 0; $i <= 8; $i++) @if($i==5) <option selected="selected" value="{{ $i }}">{{ $i }}</option> @else <option value="{{ $i }}">{{ $i }}</option> @endif @endfor </select> point(s) in a criterion for it to pass. </div> </form> <br> <form> <div class="form-group"> <label>Select Status (you can change this later)</label> <div class="radio"> <label> <input type="radio" name="is_visible" id="is_visible0" value="0" checked> This rubric is <strong>not complete</strong> yet and will not be available to professors. </label> </div> <div class="radio"> <label> <input type="radio" name="is_visible" id="is_visible1" value="1"> This rubric is <strong>complete</strong> and will be available to professors. </label> </div> </div> </form> <div> <p class="small">Note: You can hide or show this section by clicking on its heading. You may want to hide it to have more space. </p> </div> </div> </div> <div class="well"> <form> <div class="form-group"> <label>Select a Learning Outcome</label> <select id="select-outcome" class="form-control selectpicker" > @foreach ($outcomes as $outcome) <option data-outcome-id="{{ $outcome->id }}">{{ $outcome->name }}</option> @endforeach </select> </div> <div class="form-group"> <label>Select an Objective</label> <select id="select-objective" class="form-control selectpicker" > </select> </div> <div class="form-group"> <label>Select the Maximum Score</label> <select id="max_score" class="form-control selectpicker"> @for($i = 1; $i <= 100; $i++) @if($i==8) <option selected="selected" value="{{ $i }}">{{ $i }}</option> @else <option value="{{ $i }}">{{ $i }}</option> @endif @endfor </select> </div> <div class="form-group"> <label>Select the Type of Rubric</label> <select id="number_of_scales" class="form-control selectpicker" > @for($i = 1; $i <= 20; $i++) @if(8%$i == 0) @if($i==1) <option value="{{ $i }}">Cuantitative Rubric</option> @elseif($i==4) <option selected="selected" value="{{ $i }}">{{ $i }}-Scale Rubric</option> @else <option value="{{ $i }}">{{ $i }}-Scale Rubric</option> @endif @endif @endfor </select> <div> @if(Auth::user()->role != '1') <label>Filter Criteria</label> <div class="form-group"> <label class="radio-inline"> <input type="radio" checked name="criteria-filter" id="criteria-all" value="all"> All Criteria </label> <label class="radio-inline"> <input type="radio" name="criteria-filter" id="criteria-school" value="school"> Criteria from my School </label> @if(Auth::user()->role == '3') <label class="radio-inline"> <input type="radio" name="criteria-filter" id="criteria-program" value="program"> Criteria from my Program(s) </label> @endif </div> @endif <div class="form-group"> <label>Select a Criterion</label><span id="updated-text" class="text-success small"> updated</span> <select id="select-criterion" class="form-control selectpicker"> </select> </div> <button id="button-add-criterion" class="btn btn-md btn-primary center-block"> <span class="glyphicon glyphicon-plus"></span> Add Criterion to Rubric</button> </form> </div> </div> </div> <div id="rubric-container" class="row"> <div class="col-md-12"> <table class="table table-striped table-condensed" style="table-layout: fixed"> <thead id="theHead"><tr><th colspan="7 "><input id="rubric-name" type="text" class="form-control input-lg" placeholder="Rubric Name"></th></tr></thead> <thead id = "theScaleTitles"> </thead> <thead> <tr id ="criterion-header"> <th></th> <th></th> </tr> </thead> <tbody id = "allCriteria"> </tbody> </table> <div id="copyright-info"> <hr> <p class="small"><strong>Copyright</strong></p> <ul id="copyright-list" class="list-unstyled small"> </ul> <hr> </div> <div class="text-center"> <div class="btn-group" role="group" aria-label="..."> <button id="button-create-rubric" class="btn btn-lg btn-primary save"> <span class="glyphicon glyphicon-floppy-disk"></span> Create </button> <button id="button-confirm-update-rubric" data-toggle="modal" data-target="#modal-confirm-update" class="btn btn-lg btn-primary"> <span class="glyphicon glyphicon-pencil"></span> Update </button> <button id="button-confirm-delete-rubric" data-toggle="modal" data-target="#modal-confirm-delete" class="btn btn-lg btn-primary"> <span class="glyphicon glyphicon-remove"></span> Delete </button> <button id="button-print-rubric" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-print"></span> Print <span class="small">(saved version)</span></button> </div> </div> </div> </div> <div class="modal fade" id="rubric-modal"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title text-center" id ="modal-title-rubric">You are adding criteria to your program</h4> </div> <div class="modal-body" id ="modal-body-rubric"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id ="saveButton" data-button-id = '' value="Save" type="button" onclick = "saveTemplate()" >Save</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <script> </script> @stop @section('included-js') <!-- jQuery Sortable Tables --> <script src="{{ asset('vendor/jQuerySortable/jquery-sortable-min.js') }}"></script> <script> function saveTemplate() { //Prevent page refresh var criterionObject = new Object(); var criteriaArray = new Array(); var criteria = []; var titles = []; var amount_of_scales =parseInt($('#number_of_scales').find(':selected').val())+2; var max = parseInt($('#max_score').find(':selected').val()); // For each criterion in the rubric, get its value and put it into an array $('tbody tr').each(function( index ) { criteria.push($(this).data('criterion-id')); }); $('.editable').each(function(index){ titles.push($(this).text()); }) button_id = $("#saveButton").data('button-id'); //console.log('school', $('#select-school').find(':selected').data('school-id') ); //console.log('program', $('#select-program').find(':selected').data('program-id') ); if(button_id=='button-create-rubric') { // Create $.post ( "{{ URL::to('saveTemplate') }}", { name: $('#rubric-name').val(), school_id: $('#select-school').find(':selected').data('school-id'), program_id: $('#select-program').find(':selected').data('program-id'), expected_percentage: $('#expected_percentage').find(':selected').val(), expected_points: $('#expected_points').find(':selected').val(), is_visible: $('input[name=is_visible]:checked').val(), criteria : criteria, //scales: scales, max_score : max, /*copyright : copyright, notes :notes*/ titles: titles }, function(data) { location.reload(true); } ); } else { console.log('school', $('#select-school').find(':selected').data('school-id') ); console.log('program', $('#select-program').find(':selected').data('program-id') ); // Update database $.post ( "{{ URL::to('updateTemplate') }}", { id: $('#select-template').find(':selected').data('template-id'), name: $('#rubric-name').val(), school_id: $('#select-school').find(':selected').data('school-id'), program_id: $('#select-program').find(':selected').data('program-id'), expected_percentage: $('#expected_percentage').find(':selected').val(), expected_points: $('#expected_points').find(':selected').val(), is_visible: $('input[name=is_visible]:checked').val(), criteria : criteria, //scales: scales, max_score : max, /*copyright : copyright, notes :notes*/ titles: titles }, function(data) { location.reload(true); } ); } } </script> <!-- X-Editable js --> <script src="{{ asset('vendor/xeditable/bootstrap-editable.min.js') }}"></script> @stop @section('javascript') $('#select-outcome').on('change',function(){ fetchObjective(this); }) // -------------------------------------------------------------------------- // Functions // -------------------------------------------------------------------------- function fetchObjective(outcome){ $.post( "{{URL::route('fetchObjectivesForSelect')}}", { outcomeID:$(outcome).find(':selected').data('outcome-id'), }, function(data){ options = ''; for(objective_index in data){ options += '<option value = "'+data[objective_index].objective_id+'">'+data[objective_index].text+'</option>'; } $('#select-objective').html(options); $('#select-objective').selectpicker('refresh'); fetchCriteria($('#select-outcome'), $('#select-objective')); }, 'json', ); } // Fetch criteria associated to a specific learning outcome function fetchCriteria(outcome, objective) { amount_of_scales = parseInt($('#number_of_scales').find(':selected').val()); maximum = parseInt($('#max_score').find(":selected").val()); $.post ( "{{ URL::route('fetchCriteria') }}", { outcome_id: outcome.find(':selected').data('outcome-id'), objective_id: objective.find(':selected').val(), num_scales: amount_of_scales, maximum: maximum, filter: $('input[name=criteria-filter]:checked').val() }, function(data) { $('#select-criterion').empty(); // Append criteria data.forEach( function (arrayItem) { objectives = JSON.stringify(arrayItem.objectives); $('#select-criterion') .append('<option data-criterion-id="'+arrayItem.id+'" data-program-ids = "'+arrayItem.program_ids+'" data-assoc-objectives= '+"'"+objectives+"'"+'>'+arrayItem.name+'</option>'); }); // If there are no criteria assigned to the selected outcome, disable the // input and the button used to add criteria. if(!$('#select-criterion').children().length) { $('#select-criterion').prop('disabled', true); $('#button-add-criterion').prop('disabled', true); } // Otherwise, enable both the input and the button else { $('#select-criterion').prop('disabled', false); $('#button-add-criterion').prop('disabled', false); } $('#updated-text').fadeIn('slow').fadeOut('slow'); refreshSelects(); } ); } // Add a new criterion to the rubric function addCriterion() { // Show the rubric container if(!$('tbody').children().length) { $('#rubric-container').show(); } // Get the selected criterion's id var id= parseInt($('#select-criterion').find(':selected').data('criterion-id')); var program_ids = $('#select-criterion').find(':selected').data('program-ids'); var objectives = $('#select-criterion').find(':selected').data('assoc-objectives'); // Check for duplicates var duplicates=false; numberOfScale = $('#number_of_scales').find(':selected').val(); $('tbody tr').each(function() { if ($(this).data('criterion-id') == id) { duplicates=true; } }); // If there are any, display an error if(duplicates) { $('#js-error-row').show(); $('#js-error-row').find('#error-message').text('Error: The selected criterion was already added.'); return; } // Otherwise, hide the error container else { $('#js-error-row').hide(); } // Fetch information of the criterion selected $.post ( "{{ URL::route('fetchCriterionWithTemplate') }}", { id: id, }, function(data) { // Append the fetched data copyright = null; notes = null; if(data.criterion.copyright){ copyright = data.criterion.copyright; } if(data.criterion.notes){ notes = data.criterion.notes; } objectives = JSON.stringify(objectives); var str ='<tr data-criterion-name ="'+data.criterion.name+'" data-program-ids = "['+program_ids+']" data-assoc-objectives = '+"'"+objectives+"'"+' data-criterion-id="'+data.criterion.id+'" data-criterion-copyright="'+copyright+'" data-criterion-notes="'+notes+'" data-outcomes = "'+data.outcomes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>'; var subcriteria = ''; if(data.criterion.subcriteria){ var subcriteria_array = JSON.parse(data.criterion.subcriteria); subcriteria = '<ul class="subcriteria list-unstyled">'; subcriteria_array.forEach(function (value) { subcriteria += '<li>'+value+'</li>'; }); subcriteria += '</ul>'; } if(notes) { str+='<span><em data-toggle="tooltip" data-placement="top" title="'+notes+'">'+data.criterion.name+'</em></span><sup></sup>'+subcriteria+'</td>'; } else { str+='<span>'+data.criterion.name+'</span><sup></sup>'+subcriteria+'</td>'; } numberOfScale = $('#number_of_scales').find(':selected').val(); for(i=0; i<numberOfScale; i++){ str+='<td>'+data.scales[i].description+'</td>'; } str+= '<td>'+data.outcomes+'</td>' str +='<th><span class="glyphicon glyphicon-remove icon-btn" aria-hidden="true"></span></th></tr>'; $('table tbody').append(str); // Build copyright list buildCopyrightList(); // Enable X-Edtable on this new row $('.editable').editable({ unsavedclass: null, rows: 4 }); // Turn on tooltips again (because content is dynamic) $('[data-toggle="tooltip"]').tooltip(); // Sortable rows $('.table').sortable({ handle: 'span.glyphicon.glyphicon-move', containerSelector: 'table', itemPath: '> tbody', itemSelector: 'tr', placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>' }); }, 'json', ); } // Fetch single criterion function fetchCriterion(criterion) { $.post ( "{{ URL::route('fetchCriterion') }}", { id: outcome.find(':selected').data('outcome-id')}, function(data) { $('#select-criterion').empty(); data.forEach( function (arrayItem) { $('#select-criterion') .append('<option data-criterion-id="'+arrayItem.id+'" >'+arrayItem.name+'</option>'); }); $('#select-criterion').append('<option data-criterion-id="0">Custom</option>'); refreshSelects(); } ); } // Build list from copyright info in rubric function buildCopyrightList() { // Empty the copyright list $('#copyright-list').empty(); $('tbody tr').each(function( index ) { var criterion = $(this); // If there's copyright info if(criterion.data('criterion-copyright')!=null){ var copyright = criterion.data('criterion-copyright'); if($('#copyright-list li').length>0) { var found = false; $('#copyright-list li').each(function() { // If found, give the string its number if(copyright==$(this).find('span').text()) { copyrightNumber = Number.parseInt($(this).find('sup').text()); console.log('a: '+copyrightNumber); criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber); found =true; //to break return false; } }); // Otherwise, give it the next number and append a new item to the // list if(!found) { var copyrightNumber = $('#copyright-list li').length+1; console.log('b: '+copyrightNumber); console.log(criterion.children('td:nth-child(2)').find('sup').length); criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber); $('#copyright-list').append('<li><sup>'+copyrightNumber+' </sup><span>'+copyright+'<span></li>'); } } else { criterion.children('td:nth-child(2)').find('sup').text('1'); $('#copyright-list').append('<li><sup>1 </sup><span>'+copyright+'<span></li>'); } } }); if($('#copyright-info li').length>0) { $('#copyright-info').show(); } else { $('#copyright-info').hide(); }} /* if(criterion.data('criterion-copyright')!=null) { var copyright = criterion.data('criterion-copyright'); // If there is anything in the copyright list if($('#copyright-list li').length>0) { // Check copyright list for the same copyright text var found = false; $('#copyright-list li').each(function() { // If found, give the string its number if(copyright==$(this).find('span').text()) { copyrightNumber = Number.parseInt($(this).find('sup').text()); console.log('a: '+copyrightNumber); criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber); found =true; //to break return false; } }); // Otherwise, give it the next number and append a new item to the // list if(!found) { var copyrightNumber = $('#copyright-list li').length+1; console.log('b: '+copyrightNumber); console.log(criterion.children('td:nth-child(2)').find('sup').length); criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber); $('#copyright-list').append('<li><sup>'+copyrightNumber+' </sup><span>'+copyright+'<span></li>'); } } // Otherwise, give it number 1 and append it else { criterion.children('td:nth-child(2)').find('sup').text('1'); $('#copyright-list').append('<li><sup>1 </sup><span>'+copyright+'<span></li>'); } } }); if($('#copyright-info li').length>0) { $('#copyright-info').show(); } else { $('#copyright-info').hide(); } } */ function refreshSelects() { $('#select-template').selectpicker('refresh'); $('#select-school').selectpicker('refresh'); $('#select-program').selectpicker('refresh'); $('#select-outcome').selectpicker('refresh'); $('#select-criterion').selectpicker('refresh'); $('#expected_percentage').selectpicker('refresh'); $('#expected_points').selectpicker('refresh'); $('#number_of_scales').selectpicker('refresh'); $('#select-objective').selectpicker('refresh'); } // Fetch programs associated to a specific school function fetchPrograms(school) { $.ajax({ type: 'POST', url: "{{ URL::action('ProgramsController@fetch') }}", data: { id: school.find(':selected').data('school-id')}, success: function(data) { $('#select-program').empty(); $('#select-program').append('<option data-program-id="0">All</option>'); data.forEach( function (program) { $('#select-program') .append('<option data-program-id="'+program.id+'" >'+program.name+'</option>'); }); }, async:false }); if($('#select-school').find(':selected').data('school-id')!=0) $('#select-program').prop('disabled', false); else $('#select-program').prop('disabled', true); refreshSelects(); } // Load a template. This function is different from the one for professors function loadTemplate() { $.post ( "{{ URL::to('loadTemplate') }}", { id: $('#select-template').find(':selected').data('template-id')}, function(data) { // Show the container and empty all rows $('#rubric-container').show(); $('tbody').empty(); //Set the name of the rubric $('#rubric-name').val(data.template.name); // Set school id to 0, then to the saved value if it exists $('#select-school option[data-school-id="0"]').prop('selected', true); $('#select-school option[data-school-id="'+data.template.school_id+'"]').prop('selected', true); // Fetch programs associated to that school fetchPrograms($('#select-school')); // Set program id to 0, then to the saved value if it exists $('#select-program option[data-program-id="0"]').prop('selected', true); $('#select-program option[data-program-id="'+data.template.program_id+'"]').prop('selected', true); // Set expected values console.log(data.template.expected_percentage); console.log(data.template.expected_points); console.log(data.template.max_score); $('#max_score').val(data.template.max_score); $('#max_score').trigger("change"); $('#expected_percentage').val(data.template.expected_percentage); $('#expected_points').val(data.template.expected_points); $('#number_of_scales').val(data.template.num_scales); refreshSelects(); changeTable(); // Set visibility var is_visible = data.template.is_visible; if(is_visible) { $('#is_visible0').prop('checked', false); $('#is_visible1').prop('checked', true); } else { $('#is_visible1').prop('checked', false); $('#is_visible0').prop('checked', true); } // Set the contents of the rubric var temp_criterion = data.criterion; for(temp_c in temp_criterion){ current_criterion = temp_criterion[temp_c] objectives = JSON.stringify(current_criterion.objectives); var str = '<tr data-assoc-objectives= '+"'"+objectives+"'"+' data-program_ids = "'+current_criterion.program_ids+'" data-criterion-name = "'+current_criterion.name+'" data-criterion-id="'+temp_criterion[temp_c].criterion_id+'" data-criterion-copyright="'+temp_criterion[temp_c].copyright+'" data-criterion-notes="'+temp_criterion[temp_c].notes+'" data-outcomes = "'+temp_criterion[temp_c].outcomes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>'; var subcriteria =''; if(current_criterion.subcriteria){ var subcriteria_array = JSON.parse(current_criterion.subcriteria); subcriteria = '<ul class="subcriteria list-unstyled">'; subcriteria_array.forEach(function (value) { subcriteria += '<li>'+value+'</li>'; }); subcriteria += '</ul>'; } if(current_criterion.notes) { str+='<span><em data-toggle="tooltip" data-placement="top" title="'+current_criterion.notes+'">'+current_criterion.name+'</em></span><sup></sup>'+subcriteria; } else { str+='<span>'+current_criterion.name+'</span><sup></sup>'+subcriteria; } str+= '</td>'; for(scaleIndex in current_criterion.scales){ scale = current_criterion.scales[scaleIndex]; str+='<td>'+scale.description+'</td>'; } str+= '<td>'+current_criterion.outcomes+'</td>' str+='<th><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></th></tr>'; $('table tbody').append(str); // Enable X-Edtable on this new row $('.editable').editable({ unsavedclass: null, rows: 4 }); // Turn on tooltips again (because content is dynamic) $('[data-toggle="tooltip"]').tooltip(); refreshSelects(); } /* var contents = JSON.parse(data.contents); contents.forEach(function (data) { // Append the fetched data var str ='<tr data-criterion-id="'+data.id+'" data-criterion-copyright="'+data.copyright+'" data-criterion-notes="'+data.notes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>'; var subcriteria = ''; if(data.subcriteria){ var subcriteria_array = data.subcriteria; subcriteria = '<ul class="subcriteria list-unstyled">'; subcriteria_array.forEach(function (value) { subcriteria += '<li>'+value+'</li>'; }); subcriteria += '</ul>'; } if(data.notes) { str+='<span><em data-toggle="tooltip" data-placement="top" title="'+data.notes+'">'+data.name+'</em></span><sup></sup>'+subcriteria; } else { str+='<span>'+data.name+'</span><sup></sup>'+subcriteria; } str+='</td><td class="editable" data-type="textarea">'+data.description12+'</td>' +'<td class="editable" data-type="textarea">'+data.description34+'</td>' +'<td class="editable" data-type="textarea">'+data.description56+'</td>' +'<td class="editable" data-type="textarea">'+data.description78+'</td>' +'<th><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></th></tr>'; $('table tbody').append(str); // Build copyright list buildCopyrightList(); // Enable X-Edtable on this new row $('.editable').editable({ unsavedclass: null, rows: 4 }); // Turn on tooltips again (because content is dynamic) $('[data-toggle="tooltip"]').tooltip(); refreshSelects(); }); */ // Sortable rows $('.table').sortable({ handle: 'span.glyphicon.glyphicon-move', containerSelector: 'table', itemPath: '> tbody', itemSelector: 'tr', placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>' }); // Build Copyright List buildCopyrightList(); $('.editable').each(function (index){ $(this).text(data.titles[index].text); }) var selected = $('#select-template').find(':selected'); var programs = {{ json_encode(Auth::user()->programs->lists('id')) }}; var template_program = selected.data('template-program-id'); if( {{ Auth::user()->role }}==1 || ({{ Auth::user()->role }}==2 && selected.data('admin')!=1) || ({{ Auth::user()->role }}==3 && programs.includes(selected.data('template-program-id')) && selected.data('admin')!=1 ) ) { $('#button-confirm-delete-rubric').prop('disabled', false); $('#button-confirm-update-rubric').prop('disabled', false); } else { // Disable update and edit $('#button-confirm-delete-rubric').prop('disabled', true); $('#button-confirm-update-rubric').prop('disabled', true); } // Enable print button $('#button-print-rubric').prop('disabled', false); fetchCriteria($('#select-outcome'), $('#select-objective')); }, 'json', ); } // Checks whether the user wants to save a rubric with a name that already exists function nameExists() { var duplicates = false; $('#select-template option').each(function() { var optionName = $(this).text().trim(); if($('#rubric-name').val().trim()===optionName) { duplicates = true; } }); refreshSelects(); return duplicates; } //Enable disable program select function toggleProgramSelect(school) { if(school.find(':selected').data('school-id') <1) { $('#select-program option[data-program-id="0"]').prop('selected', true); $('#select-program').prop('disabled', true); } else { fetchPrograms(school); $('#select-program').prop('disabled', false); } refreshSelects(); } fetchObjective($('#select-outcome')); // -------------------------------------------------------------------------- // Events // -------------------------------------------------------------------------- // Toggle visibility for accordion panels $('.panel-heading').on('click', function() { if($(this).find('.glyphicon').hasClass('glyphicon-triangle-right')) { $(this).find('.glyphicon').removeClass('glyphicon-triangle-right'); $(this).find('.glyphicon').addClass('glyphicon-triangle-bottom'); } else if($(this).find('.glyphicon').hasClass('glyphicon-triangle-bottom')) { $(this).find('.glyphicon').removeClass('glyphicon-triangle-bottom'); $(this).find('.glyphicon').addClass('glyphicon-triangle-right'); } $(this).siblings('.panel-body').stop().slideToggle(); }); // Fetch criteria everytime something changes $('#select-objective').on('change', function(){ fetchCriteria($('#select-outcome'), $('#select-objective')); }) $("#number_of_scales").on('change', function(){ fetchCriteria($('#select-outcome'), $('#select-objective')); }) // When trying to change the template, ask the user to confirm and reset the // rubric if s/he does $('#select-template').on('change', function() { // If changing to custom template, reset if($('#select-template').find(':selected').data('template-id')=='0') { $('#rubric-container').hide(); $('#rubric-name').val(''); $('tbody').empty(); // Disable delete, update and print buttons $('#button-confirm-delete-rubric').prop('disabled', true); $('#button-confirm-update-rubric').prop('disabled', true); $('#button-print-rubric').prop('disabled', true); } // Otherwise, load the selected template else { loadTemplate(); //If user is admin, or the templates id matches user's, or the template // id's school matches user, allow editing /*var selected = $('#select-template').find(':selected'); var programs = {{ json_encode(Auth::user()->programs->lists('id')) }}; var template_program = selected.data('template-program-id'); var dataset = selected.dataSet.templateProgramId; if( {{ Auth::user()->role }}==1 || ({{ Auth::user()->role }}==2 && selected.data('admin')!=1) || ({{ Auth::user()->role }}==3 && programs.includes(selected.data('template-program-id')) && selected.data('admin')!=1 ) ) { $('#button-confirm-delete-rubric').prop('disabled', false); $('#button-confirm-update-rubric').prop('disabled', false); } else { // Disable update and edit $('#button-confirm-delete-rubric').prop('disabled', true); $('#button-confirm-update-rubric').prop('disabled', true); } // Enable print button $('#button-print-rubric').prop('disabled', false); */ } }); function changeTable(){ amount_of_scales = parseInt($('#number_of_scales').find(':selected').val()); counter2 = 0; maximum = parseInt($('#max_score').find(":selected").val()); newScaleHeaders = '<th></th><th>Criterion</th>'; editableTitles = '<th></th><th></th>'; counter = 0; division = maximum/amount_of_scales; if(amount_of_scales==1){ newScaleHeaders+= "<th>Score (1 - "+maximum+")</th>"; editableTitles += "<th class = 'editable' data-type = 'textarea'>Click to edit Title </th>" } else if(maximum!= amount_of_scales){ while(counter <amount_of_scales){ minimumScore = 1+(counter*division); maximumScore = (1+counter)*division; newScaleHeaders+= "<th>Scale "+ (counter +1) + " ("+minimumScore+" - "+maximumScore+")</th>"; editableTitles+="<th class = 'editable' data-type = 'textarea'>Click to edit Title "+(counter+1)+"</th>" counter++; } }else{ while(counter <amount_of_scales){ newScaleHeaders+= "<th>Scale "+ (counter +1) + " </th>"; editableTitles+="<th class = 'editable' data-type = 'textarea'>Click to edit Title "+(counter+1)+"</th>" counter++; } } newScaleHeaders += '<th>Outcomes</th><th></th>'; editableTitles += '<th></th><th></th>'; $('#theScaleTitles').html(editableTitles); $("#criterion-header").html(newScaleHeaders); $('#allCriteria').html(' '); } // When a school changes, update its programs. If all is selected, disable $('#select-school').on('change', function() { toggleProgramSelect($(this)); }); $('#max_score').on('change', function(){ var max = parseInt($('#max_score').find(':selected').val()); var stringToScales = "<option value= '1'>Cuantitative Rubric </option>"; selectedValue = 1; valueBefore = 0; for(i=2; i<=20; i++){ if(max%i==0){ stringToScales += "<option value= '"+i+"'>"+i+"-Scale Rubric</option>"; selectedValue = i - valueBefore; valueBefore = i; } } $('#number_of_scales').html(stringToScales); $('#number_of_scales').selectpicker('refresh'); $('#number_of_scales').val(selectedValue); $('#number_of_scales').selectpicker('refresh'); var expected_points = Math.floor(max *0.7); var expected_points_html = ''; for(i=1; i<max; i++){ expected_points_html += '<option value="'+i+'"> '+i+'</option>'; } $('#expected_points').html(expected_points_html); refreshSelects(); $('#expected_points').val(expected_points); refreshSelects(); changeTable(); fetchCriteria($('#select-outcome'), $('#select-objective')) }) $('#number_of_scales').on('change', function(){ changeTable(); $('#rubric-container').hide(); $('#rubric-name').val(''); $('tbody').empty(); }) // When a learning outcome changes, update its criteria /*$('#select-outcome, input[name=criteria-filter]').on('change', function() { fetchCriteria($('#select-outcome')); }); */ // When the add button is clicked $('#button-add-criterion').on('click', function(e) { //Prevent page refresh e.preventDefault(); //Add new criterion addCriterion(); }); // When the create or update buttons are clicked (.save) $('.save').on('click', function(e) { //Prevent page refresh e.preventDefault(); var emptyFields=false; $('#allCriteria').children('td').each(function() { if (($(this).text() == "" || $(this).text() == "Empty") && !($(this).hasClass('nullable')) ) { emptyFields=true; } }); // If any fields are empty, display error if(emptyFields || $.trim($('#rubric-name').val())=='') { $('#js-error-row').show(); $('#js-error-row').find('#error-message').text('Error: Please fill all the fields. Make sure your rubric has a name and all scale scores are filled.'); return; } else { $('#js-error-row').hide(); } // Check whether a rubric with the written name already exists if($(this).attr('id')=='button-create-rubric' && nameExists()) { $('#js-error-row').show(); $('#js-error-row').find('#error-message').text('Error: A template with that name already exists.'); return; } else { $('#js-error-row').hide(); } program_id = $('#select-program').find(':selected').data('program-id') if(program_id == 0){ $('#modal-title-rubric').html("All criteria will be associated with this school's programs"); htmlString = "<h5>The following criteria and objectives will be matched with all programs</h5>" htmlString += "<ol style='list-style-position: inside'>" $('tbody tr').each(function( index ) { objectives = $(this).data('assoc-objectives'); htmlString += "<li>" +$(this).data('criterion-name'); htmlString += "<br><h5>This criterion is associated with these objectives</h5>" htmlString +="<ul style='padding-left: 5%; list-style-position: inside'>" for(index in objectives){ objective_string = objectives[index]; htmlString +="<li>"+objective_string+"</li>"; } htmlString += "</ul>" htmlString +="</li>" htmlString+= "<br>"; }); htmlString +='</ol>'; $("#modal-body-rubric").html(htmlString); } else{ $('#modal-title-rubric').html('Some criteria will be associated with this program'); $('tbody tr').each(function( index ) { htmlString = ''; program_ids = $(this).data('program-ids') if(!program_ids.includes(program_id) ){ title = "<h6>The following criteria and objectives will be matched with this program</h6>" htmlString += "<ol style='list-style-position: inside'>" objectives = $(this).data('assoc-objectives'); //objectives = objectives.split(','); htmlString += "<li>" +$(this).data('criterion-name'); htmlString += "<br><h6>This criterion is associated with these objectives</h6>" htmlString +="<ul style='padding-left: 5%; list-style-position: inside'>" for(index in objectives){ objective_string = objectives[index]; htmlString +="<li>"+objective_string+"</li>"; } htmlString += "</ul>" htmlString +="</li>" htmlString+= "<br>"; } if(htmlString != ''){ $("#modal-body-rubric").html(title); $("#modal-body-rubric").append(htmlString); } }); } $('#rubric-modal').modal('toggle'); $('#saveButton').data('button-id',$(this).attr('id')); }); // When the confirm delete button is clicked $('#button-delete-rubric').on('click', function(e) { $('#modal-confirm-delete').modal('hide'); // Delete from database $.post ( "{{ URL::to('deleteTemplate') }}", { id: $('#select-template').find(':selected').data('template-id') }, function(data) { location.reload(); } ); }); // Remove a criterion and hide the table if it was the only one $('table').on('click', 'span.glyphicon-remove', function(e) { $(this).closest('tr').remove(); if(!$('tbody').children().length) { $('#rubric-container').hide(); } buildCopyrightList(); }); // When print button is clicked, redirect to print page $('#button-print-rubric').on('click', function(e) { e.preventDefault(); window.location = "printRubric/"+$('#select-template').find(':selected').data('template-id'); }); // -------------------------------------------------------------------------- // Page load // -------------------------------------------------------------------------- $('#updated-text').hide(); // Enable/disable program selection depending on school selection if user is // admin if({{Auth::user()->role}}==1) toggleProgramSelect($('#select-school')); // Fetch criteria of first outcome fetchCriteria($('#select-outcome'), $('#select-objective')); changeTable(); // Hide table $('#rubric-container').hide(); // Disable Update and Delete Buttons by default $('#button-confirm-update-rubric').prop('disabled', true); $('#button-confirm-delete-rubric').prop('disabled', true); $('#button-print-rubric').prop('disabled', true); // Sortable rows $('.table').sortable({ handle: 'span.glyphicon.glyphicon-move', containerSelector: 'table', itemPath: '> tbody', itemSelector: 'tr', placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>' }); @stop