Skip to content

Instantly share code, notes, and snippets.

@potikanond

potikanond/score-card.js

Last active February 14, 2020 10:25
Show Gist options
  • Save potikanond/8fb6a79baeed9f68804c0cacea3d5248 to your computer and use it in GitHub Desktop.
Save potikanond/8fb6a79baeed9f68804c0cacea3d5248 to your computer and use it in GitHub Desktop.
Download ZIP
CPE Project Scorecard
Raw
score-card.js
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
$(".form-control").change(validateCell);
$("#btn-save").click(saveScores);
$("#copy-score").click(copyScores);
// for debugging only
$("#course_id").click(changeCourseId);
$("#role").click(changeRole);
updateScoreCardUI();
});
function updateScoreCardUI() {
// if course_id is 26x491, hide poster-row
if ($("#course_id").text().endsWith('491')) {
$(".poster-row").hide();
} else {
$(".poster-row").show();
}
// if role is committee, hide report-row
if ($("#role").text() === 'Committee') {
$(".report-row").hide();
} else {
$(".report-row").show();
}
}
function changeCourseId() {
let course_id = $("#course_id").text();
// console.log(course_id);
if (course_id.endsWith('491')) {
$("#course_id").text(course_id.replace('491','492'));
} else {
$("#course_id").text(course_id.replace('492','491'));
}
updateScoreCardUI();
}
function changeRole() {
let role = $("#role").text();
// console.log(role);
if (role.toLowerCase() === 'advisor') {
$("#role").text('Committee');
} else {
$("#role").text('Advisor');
}
updateScoreCardUI();
}
function validateCell() {
score = $(this).val();
if (score !== '') {
if (score>=0 && score<=5) {
// console.log(score);
this.style.backgroundColor = '#ABEBC6';
} else {
// console.error(score);
this.style.backgroundColor = '#ffcccc';
}
} else {
this.style.backgroundColor = '';
}
}
function isValidated(score) {
if (score === '') {
return false;
} else {
value = Number(score);
if (isNaN(value)) {
return false;
} else if (value<0 || value>5) {
return false;
} else {
return true;
}
}
}
function saveScores(e) {
e.preventDefault();
const sections = ['midterm','poster','paper','final','report'];
const score_items = ['design','comm','fund','tools','pm','team'];
let students = []; // array of score for multiple students
const n = $("table").length; // get # of students
let student_inputs = new Array(n); // create # of form-input set (30/student)
for (let s=0; s<n; s++) { // for each student
let student_input_selector = `#student${s+1}-table .form-control`;
student_inputs[s] = $(student_input_selector);
let scores = {}; // object for sections of scores (per student)
sections.forEach( (section,i) => { // for each score section
let section_scores = {}
score_items.forEach( (item,j) => { // for each score item
// let score = student1_inputs[i*score_items.length+j].value;
let score = student_inputs[s][i*score_items.length+j].value;
if (isValidated(score)) {
section_scores[item] = Number(score);
} else {
console.log(student_inputs[s][i*score_items.length+j].value);
student_inputs[s][i*score_items.length+j].focus();
e.stopPropagation();
return
}
});
if (section_scores !== {}) {
scores[section] = section_scores;
}
});
// console.log(scores);
let student_id_selector = `#student${s+1}-id`;
students.push({
committee: $("#committee-name").text(),
id: $(student_id_selector).text(),
scores: JSON.stringify(scores)
})
}
console.log(students);
}
function copyScores() {
const n = $("table").length; // get # of students: n
let student_inputs = new Array(n);
student_inputs[0] = $("#student1-table .form-control"); // get student1 inputs
for (let s=1; s<n; s++) { // for each student (2..n)
let student_input_selector = `#student${s+1}-table .form-control`;
student_inputs[s] = $(student_input_selector);
for (let i=0; i<student_inputs[s].length; i++) { // for each inputs (30/student)
student_inputs[s][i].value = student_inputs[0][i].value;
}
$(student_input_selector).trigger("change"); // trigger 'change' event to update background
}
}
Raw
score.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/score-card.js"></script>
</head>
<body>
<div class="container">
<h2 class="modal-title">Project score card</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">กรอกคะแนน</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<form id="formScore" name="formScore" class="form-horizontal">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">This is English Project Title... can be long...</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body ">
<div><span id="role">Committee</span> : <span id="committee-name">Dome Potikanond</span></div>
<div>Course : <span id="course_id">269491</span></div>
<!-- student 1 -->
<h5 class="modal-title modal-header"><span id="student1-id">600610991</span> - Student#1 First Lastname</h5>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush" id="student1-table">
<thead class="thead-light">
<tr>
<th>Section</th>
<th>Design</th>
<th title="Communication">Comm.</th>
<th title="Fundamental">Fund.</th>
<th>Tools</th>
<th title="Project Management">PM.</th>
<th title="Teamwork">Team</th>
</tr>
</thead>
<tbody>
<tr class="midterm-row">
<td>Midterm</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
</tr>
<tr class="poster-row">
<td>Poster</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
</tr>
<tr class="paper-row">
<td>Short Paper</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
</tr>
<tr class="final-row">
<td>Final</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
</tr>
<tr class="report-row">
<td>Report</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
</tr>
</tbody>
</table>
</div>
<!--end student 1-->
<!-- student 2 -->
<h5 class="modal-title modal-header"><span id="student2-id">600610992</span> - Student#2 First Lastname
<span class="badge badge-pill btn-primary" id="copy-score">copy scores</span></h5>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush" id="student2-table">
<thead class="thead-light">
<tr>
<th>Section</th>
<th>Design</th>
<th title="Communication">Comm.</th>
<th title="Fundamental">Fund.</th>
<th>Tools</th>
<th title="Project Management">PM.</th>
<th title="Teamwork">Team</th>
</tr>
</thead>
<tbody>
<tr class="midterm-row">
<td>Midterm</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
<td>
<input type="text" class="form-control midterm" placeholder="">
</td>
</tr>
<tr class="poster-row">
<td>Poster</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
<td>
<input type="text" class="form-control poster" placeholder="">
</td>
</tr>
<tr class="paper-row">
<td>Short Paper</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
<td>
<input type="text" class="form-control paper" placeholder="">
</td>
</tr>
<tr class="final-row">
<td>Final</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
<td>
<input type="text" class="form-control final" placeholder="">
</td>
</tr>
<tr class="report-row">
<td>Report</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
<td>
<input type="text" class="form-control report" placeholder="">
</td>
</tr>
</tbody>
</table>
</div>
<!--end student 2-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btn-save">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment