Skip to content

Instantly share code, notes, and snippets.

@phillypb

phillypb/Student feedback system - HTML form - part 2.html

Created December 31, 2018 23:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save phillypb/c5dc731b3c7e9263bbfa046aa1a53312 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save phillypb/c5dc731b3c7e9263bbfa046aa1a53312 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Student feedback system - HTML form - part 2.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
h1 {
color:#fff;
background-color:#006B77;
padding: 10px;
font-weight: normal;
}
h2 {
color:#000;
font-weight: normal;
}
div {
border: 2px solid black;
}
table, th, td {
border: 0px;
border-collapse: collapse;
}
th, td {
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
select {
margin: 0px;
vertical-align: middle;
}
#submitText {
color:#f00
}
</style>
<script>
// this is the success handler when data is 'got' from the spreadsheet
function fillForm(values) {
// convert the json-ed values back into JS syntax
var rowValues = JSON.parse(values);
// get individual field values
var currentRow = rowValues['currentRow'];
var whoAmI = rowValues['whoAmI'];
var studentName = rowValues['studentName'];
var attendance1 = rowValues['attendance1'];
var contribution1 = rowValues['contribution1'];
var attitude1 = rowValues['attitude1'];
var comments1 = rowValues['comments1'];
var attendance2 = rowValues['attendance2'];
var contribution2 = rowValues['contribution2'];
var attitude2 = rowValues['attitude2'];
var comments2 = rowValues['comments2'];
var tutor1 = rowValues['tutor1'];
var tutor2 = rowValues['tutor2'];
console.log('whoAmI is: ' + whoAmI);
// set values of form fields
document.getElementById('currentRow').value = currentRow;
document.getElementById('whoAmI').value = whoAmI;
document.getElementById('studentNameDisplay').innerHTML = studentName;
document.getElementById('attendance1').value = attendance1;
document.getElementById('contribution1').value = contribution1;
document.getElementById('attitude1').value = attitude1;
document.getElementById('comments1').value = comments1;
document.getElementById('attendance2').value = attendance2;
document.getElementById('contribution2').value = contribution2;
document.getElementById('attitude2').value = attitude2;
document.getElementById('comments2').value = comments2;
document.getElementById('tutorAName').innerHTML = tutor1;
document.getElementById('tutorBName').innerHTML = tutor2;
// display fields depending on which Tutor
if (whoAmI == 'You are 1') {
console.log('whoAmI matches: You are 1');
document.getElementById('attendance2').disabled = true;
document.getElementById('contribution2').disabled = true;
document.getElementById('attitude2').disabled = true;
document.getElementById('comments2').disabled = true;
}
else if (whoAmI == 'You are 2') {
console.log('whoAmI matches: You are 2');
document.getElementById('attendance1').disabled = true;
document.getElementById('contribution1').disabled = true;
document.getElementById('attitude1').disabled = true;
document.getElementById('comments1').disabled = true;
}
else {
console.log('whoAmI is not finding a match');
}
}
// this is the success handler when the 'Submit changes' button is clicked on the form
function confirmSubmit() {
// close form
google.script.host.close();
}
</script>
</head>
<body>
<h1>Student Form </h1>
<form id="dataForm" name="dataForm">
<!-- this is a hidden field to store the current row -->
<input type="hidden" id="currentRow" name="currentRow" />
<!-- this is a hidden field to store Tutor 1 or Tutor 2 -->
<input type="hidden" id="whoAmI" name="whoAmI" />
<h2>Student Name: <span id="studentNameDisplay"></span></h2>
<div>
<table>
<th><label id="tutorAName"></label></th>
<tr>
<th>Attendance:</th>
<td><select id="attendance1" name="attendance1">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Contribution to Learning:</th>
<td><select id="contribution1" name="contribution1">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Attitude and Behaviours:</th>
<td><select id="attitude1" name="attitude1">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Comments:</th>
<td>
<textarea id="comments1" name="comments1" rows="10" cols="50" placeholder="Enter comments here..."></textarea>
</td>
</tr>
</table>
</div>
<p></p>
<div>
<table>
<th><label id="tutorBName"></label></th>
<tr>
<th>Attendance:</th>
<td><select id="attendance2" name="attendance2">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Contribution to Learning:</th>
<td><select id="contribution2" name="contribution2">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Attitude and Behaviours:</th>
<td><select id="attitude2" name="attitude2">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Satisfactory">Satisfactory</option>
<option value="Poor">Poor</option>
<option value="Not Satisfactory">Not Satisfactory</option>
</select>
</td>
</tr>
<tr>
<th>Comments:</th>
<td>
<textarea id="comments2" name="comments2" rows="10" cols="50" placeholder="Enter comments here..."></textarea>
</td>
</tr>
</table>
</div>
<p></p>
<!-- display 'confirmSubmit' function text -->
<p id='submitText'></p>
<!-- this line adds a button that calls the function to write the values back to the spreadsheet -->
<input type="button" value="Submit changes" id="submit" name="submit" onClick="google.script.run.withSuccessHandler(confirmSubmit).writeBack(dataForm);" />
<input type="button" value="Close form" id="close" name="close" onClick="google.script.host.close();" />
</form>
</body>
<script>
// this runs when the page is loaded - calls function to get data for current active row of sheet
function goGetData() {
google.script.run.withSuccessHandler(fillForm).getValues();
}
/* 'EventListener' detects when page is fully loaded, then calls 'goGetData' which calls 'getValues'
Any values returned by 'getValues' are processed by the named SuccessHandler (script at top of HTML file) */
window.addEventListener('load', goGetData);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment