Skip to content

Instantly share code, notes, and snippets.

@Wilhelm97

Wilhelm97/carla_progress.html

Last active May 5, 2018 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Wilhelm97/006eeea7b19f9ed70e9738cf37cdad7b to your computer and use it in GitHub Desktop.
Save Wilhelm97/006eeea7b19f9ed70e9738cf37cdad7b to your computer and use it in GitHub Desktop.
Download ZIP
This is a Case study for my class. Chapter 6.
Raw
carla_progress.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Carla's Classroom | Progress Report Form</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<script>
//create the functions to get the student's name, HW and test averages
//create functions for attendance, arithmetic, reading, writing, total grade
//place information in designated areas on the web page
//create area for comments
function getName(stu_name)
{
var studentName = document.getElementById(stu_name).value;
document.getElementById('sName').innerHTML = studentName;
}
function getHw(hw_avg)
{
var hwavg = document.getElementById(hw_avg).value;
document.getElementById('hw').innerHTML = hwavg;
}
function getTest(test_avg)
{
var testAvg = document.getElementById(test_avg).value;
document.getElementById('test').innerHTML = testAvg;
}
//radio button functions.
function getAttendance(picked)
{
var attendance = document.getElementById(picked).value;
document.getElementById('att').innerHTML = attendance;
}
function getArithmetic(picked)
{
var arithmetic = document.getElementById(picked).value;
document.getElementById('math').innerHTML = arithmetic;
}
function getReading(picked)
{
var reading = document.getElementById(picked).value;
document.getElementById('read').innerHTML = reading;
}
function getWrite(picked)
{
var writing = document.getElementById(picked).value;
document.getElementById('writing').innerHTML = writing;
}
function getGrade(picked)
{
var grade = document.getElementById(picked).value;
document.getElementById('overall').innerHTML = grade;
}
//The textarea Function
function getComments(comments)
{
var carlaComments = document.getElementById(comments).value;
document.getElementById('mycomments').innerHTML = carlaComments;
}
</script>
</head>
<body>
<!-- create a form action to send the results via email -->
<form name="progress" enctype="text/plain" action="mailto:carla@carlaschool.net?subject= Student Progress Report" mathod="post">
<div id="container">
<div align="left">
<blockquote>
<p><a href="index.html"><img src="images/owl_button.jpg" />Home</a>
<a href="carla.html"><img src="images/carla_button.jpg" />Meet Carla </a>
<a href="reading.html"><img src="images/read_button.jpg" />Reading</a>
<a href="writing.html"><img src="images/write_button.jpg" />Writing</a>
<a href="math.html"><img src="images/arith_button.jpg" />Arithmetic</a>
<br />
</p>
</blockquote>
</div>
<img src="images/owl_logo.jpg" class="floatleft" />
<h2 id="logo"><em>Carla's Progress Report</em></h2>
</div><div style="clear:both;"></div>
<div id="content">
<p><label>Student's Name:</label>
<!-- create input box for name and call appropriate function -->
<input type="text" name="Student Name:" id="stu_name" size = "40" value =""/>
<input type="button" onclick="getName('stu_name')"" value = "ok"></button></p>
<p><label>Homework average:</label>
<!-- create input box for homework average and call appropriate function -->
<input type="text" name="Homework Average:" id="hw_avg" size="8" vaule=""/>
<input type="button" onclick="getHw('hw_avg')" value="ok"></button>&nbsp;&nbsp;&nbsp;
<label>Test average:</label>
<!-- create input box for test average and call appropriate function -->
<input type="text" name=" Test Average" id="text_avg" size="8" value= ""/>
<input type="button" onclick="getTest('text_avg')" value="ok"></button></p>
<table width = "100%">
<tr><td><h4>attendance</h4></td><td><h4>arithmetic</h4></td><td><h4>reading</h4></td><td><h4>writing</h4></td></tr>
<tr>
<!-- create radio buttons to select grade (Excellent, Satisfactory, Needs Improvement) -->
<td><input type="radio" name="Attendance" id="a1" value="excellent" onclick ="getAttendance('a1')"/> Excellent</td>
<td><input type="radio" name="Arithmetic" id="m1" value="excellent" onclick ="getArithmetic('m1')"/> Excellent</td>
<td><input type="radio" name="Reading" id="r1" value="excellent" onclick ="getReading('r1')"/> Excellent</td>
<td><input type="radio" name="Writing" id="w1" value="excellent" onclick ="getWrite('w1')"/> Excellent</td></tr>
<tr><td><input type="radio" name="Attendance" id="a2" value="satisfactory" onclick ="getAttendance('a2')"/>satisfactory</td>
<td><input type="radio" name="Arithmetic" id="m2" value="satisfactory" onclick ="getArithmetic('m2')"/>satisfactory</td>
<td><input type="radio" name="Reading" id="r2" value="satisfactory" onclick ="getReading('r2')"/>satisfactory</td>
<td><input type="radio" name="Writing" id="w2" value="satisfactory" onclick ="getWrite('w2')"/>satisfactory</td></tr>
<tr><td><input type="radio" name="Attendance" id="a3" value="needs improvement" onclick="getAttendance('a3')"/>needs improvement</td>
<td><input type="radio" name="Arithmetic" id="m3" value="needs improvement" onclick="getArithmetic('m3')"/>needs improvement</td>
<td><input type="radio" name="Reading" id="r3" value="needs improvement" onclick="getReading('r3')"/>needs improvement</td>
<td><input type="radio" name="Writing" id="w3" value="needs improvement" onclick="getWrite('w3')" />needs Improvement</td>
</tr>
</table><!-- create radio buttons to select letter grade: A, B, etc. -->
<br /><p> <label>Overall Semester Grade:</label> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="grade" id="A" value="A" onclick="getGrade('A')"/> A&nbsp;&nbsp;
<input type="radio" name="grade" id="B" value="B" onclick="getGrade('B')"/> B&nbsp;&nbsp;
<input type="radio" name="grade" id="C" value="C" onclick="getGrade('C')"/> C&nbsp;&nbsp;
<input type="radio" name="grade" id="D" value="D" onclick="getGrade('D')"/> D&nbsp;&nbsp;
<input type="radio" name="grade" id="F" value="F" onclick="getGrade('F')"/> F&nbsp;&nbsp;</p>
<p><textarea name="comments" id="comments" rows="5" cols="50">Comments</textarea>
<input type ="button" onclick="getComments('comments')" value = "ok"></button></p>
<div><h3><u>Student Report</u><br />
<!-- create areas for Carla's report to be displayed-->
Student name: <span id="sName">&nbsp;</span> <br />
Homework Average: <span id="hw">&nbsp;</span> <br />
Test Average: <span id="test">&nbsp;</span> <br />
Attendence: <span id="att">&nbsp;</span> <br />
Arithmetic: <span id="math">&nbsp;</span> <br />
Reading: <span id="read">&nbsp;</span> <br />
Writing: <span id="writing">&nbsp;</span> <br />
Overall Semester Grade: <span id="overall"></span> <br />
Comments: <span id="mycomments">&nbsp;</span> <br />
</div>
<div style="clear:both;"></div>
<p> <input type="reset" value="Start over"> &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value ="Submit report"></p>
</form>
</div>
</div>
</body>
</html>
Raw
rate_carla.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Carla's Classroom | Progress Report Form</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<script>
//create the functions to get the student's name, HW and test averages
//create functions for attendance, arithmetic, reading, writing, total grade
//place information in designated areas on the web page
//create area for comments
function getName(stu_name)
{
var studentName = document.getElementById(stu_name).value;
document.getElementById('sName').innerHTML = studentName;
}
function getArithmetic(picked)
{
var arithmetic = document.getElementById(picked).value;
document.getElementById('math').innerHTML = arithmetic;
}
function getReading(picked)
{
var reading = document.getElementById(picked).value;
document.getElementById('read').innerHTML = reading;
}
function getWrite(picked)
{
var writing = document.getElementById(picked).value;
document.getElementById('writing').innerHTML = writing;
}
function getEnergy(picked)
{
var energy = document.getElementById(picked).value;
document.getElementById('overall').innerHTML = energy;
}
function getManners(picked)
{
var manners = document.getElementById(picked).value;
document.getElementById('manners').innerHTML = manners;
}
function getFairness(picked)
{
var fairness = document.getElementById(picked).value;
document.getElementById('fairness').innerHTML =fairness;
}
//The textarea Function
function getComments(comments)
{
var carlaComment = document.getElementById(comments).value;
document.getElementById('mycomments').innerHTML = carlaComment;
}
function getComments1(comments_Arithmetic)
{
var carlaComment1 = document.getElementById(comments_Arithmetic).value;
document.getElementById('mycomments1').innerHTML = carlaComment1;
}
function getComments2(comments_Reading)
{
var carlaComment2 = document.getElementById(comments_Reading).value;
document.getElementById('mycomments2').innerHTML = carlaComment2;
}
function getComments3(comments_Writing)
{
var carlaComment3 = document.getElementById(comments_Writing).value;
document.getElementById('mycomments3').innerHTML = carlaComment3;
}
function getComments4(comments_Manners)
{
var carlaComment4 = document.getElementById(comments_Manners).value;
document.getElementById('mycomments4').innerHTML = carlaComment4;
}
function getComments5(comments_Fairness)
{
var carlaComment5 = document.getElementById(comments_Fairness).value;
document.getElementById('mycomments5').innerHTML = carlaComment5;
}
</script>
</head>
<body>
<!-- create a form action to send the results via email -->
<form name="progress" enctype="text/plain" action="mailto:carla@carlaschool.net?subject= Student Progress Report" mathod="post">
<div id="container">
<div align="left">
<blockquote>
<p><a href="index.html"><img src="images/owl_button.jpg" />Home</a>
<a href="carla.html"><img src="images/carla_button.jpg" />Meet Carla </a>
<a href="reading.html"><img src="images/read_button.jpg" />Reading</a>
<a href="writing.html"><img src="images/write_button.jpg" />Writing</a>
<a href="math.html"><img src="images/arith_button.jpg" />Arithmetic</a>
<br />
</p>
</blockquote>
</div>
<img src="images/owl_logo.jpg" class="floatleft" />
<h2 id="logo"><em>Carla's Progress Report</em></h2>
</div><div style="clear:both;"></div>
<div id="content">
<p><label>Student's Name:</label>
<!-- create input box for name and call appropriate function -->
<input type="text" name="Student Name:" id="stu_name" size = "40" value =""/>
<input type="button" onclick="getName('stu_name')"" value = "ok"></button></p>
<!-- To mark and comment on where Carla can improve -->
</table>
<br /><p><label>Carla's instruction in Writing</label></p>
<td><input type="radio" name="Writing" id="w1" value="excellent" onclick ="getWrite('w1')"/> Excellent</td>
<td><input type="radio" name="Writing" id="w2" value="satisfactory" onclick ="getWrite('w2')"/>satisfactory</td>
<td><input type="radio" name="Writing" id="w3" value="needs improvement" onclick="getWrite('w3')" />needs Improvement</td>
<p><textarea name="comments_Writing" id="comments1" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments1('comments1')" value = "ok"></button></p>
</table>
<br /><p><label>Carla's instruction in Reading</label></p>
<td><input type="radio" name="Reading" id="r1" value="excellent" onclick ="getReading('r1')"/> Excellent</td>
<td><input type="radio" name="Reading" id="r2" value="satisfactory" onclick ="getReading('r2')"/>satisfactory</td>
<td><input type="radio" name="Reading" id="r3" value="needs improvement" onclick="getReading('r3')"/>needs improvement</td>
<p><textarea name="comments_Reading" id="comments2" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments2('comments2')" value = "ok"></button></p>
</table>
<br /><p><label>Carla's instruction in Arithmetic</label></p>
<td><input type="radio" name="Arithmetic" id="m1" value="excellent" onclick ="getArithmetic('m1')"/> Excellent</td>
<td><input type="radio" name="Arithmetic" id="m2" value="satisfactory" onclick ="getArithmetic('m2')"/>satisfactory</td>
<td><input type="radio" name="Arithmetic" id="m3" value="needs improvement" onclick="getArithmetic('m3')"/>needs improvement</td>
<p><textarea name="comments_Arithmetic" id="comments3" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments3('comments3')" value = "ok"></button></p>
</table><!-- create radio buttons to select letter grade: A, B, etc. -->
<br /><p> <label>Carla's level of Energy</label> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="energy" id="A" value="Over the top" onclick="getEnergy('A')"/> 100-80%&nbsp;&nbsp;
<input type="radio" name="energy" id="B" value="Its upbeat" onclick="getEnergy('B')"/> 79-60%&nbsp;&nbsp;
<input type="radio" name="energy" id="C" value="alittle sluggish" onclick="getEnergy('C')"/> 59-40%&nbsp;&nbsp;
<input type="radio" name="energy" id="D" value="no energy" onclick="getEnergy('D')"/> 39-20%&nbsp;&nbsp;
<input type="radio" name="energy" id="F" value="what energy?" onclick="getEnergy('F')"/> 19-0%&nbsp;&nbsp;</p>
<p><textarea name="comments_energy" id="comments" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments('comments')" value = "ok"></button></p>
</table>
<br /><p> <label>Carla's Manners</label>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="manners" id=mr1 value="Very mannerable" onclick="getManners('mr1')"/>Exellent-100%-80%&nbsp;&nbsp;
<input type="radio" name="manners" id="mr2" value="Mannerable" onclick="getManners('mr2')"/>Good-80%-60%&nbsp;&nbsp;
<input type="radio" name="manners" id="mr3" value="average" onclick="getManners('mr3')"/>Okay-60%-40%&nbsp;&nbsp;
<input type="radio" name="manners" id="mr4" value="Moody" onclick="getManners('mr4')"/>lacking-40%-20%&nbsp;&nbsp;
<input type="radio" name="manners" id="mr5" value="Rude" onclick="getManners('mr5')"/>No fix-20%-0%</p>
<p><textarea name="comments_manners" id="comments4" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments4('comments4')" value = "ok"></button></p>
</table>
<br /><p> <label>Carla's Fairness</label>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="fairness" id="f1" value="Very mannerable" onclick="getFairness('f1')"/>Exellent-100%-80%&nbsp;&nbsp;
<input type="radio" name="fairness" id="f2" value="Mannerable" onclick="getFairness('f2')"/>Good-80%-60%&nbsp;&nbsp;
<input type="radio" name="fairness" id="f3" value="average" onclick="getFairness('f3')"/>Okay-60%-40%&nbsp;&nbsp;
<input type="radio" name="fairness" id="f4" value="Moody" onclick="getFairness('f4')"/>lacking-40%-20%&nbsp;&nbsp;
<input type="radio" name="fairness" id="f5'" value="Rude" onclick="getFairness('f5')"/>No fix-20%-0%</p>
<p><textarea name="comments" id="comments5" rows="3" cols="50">Comments</textarea>
<input type ="button" onclick="getComments5('comments5')" value = "ok"></button></p>
<div><h3><u>Carla's Overall Score</u><br />
<!-- create areas for Carla's report to be displayed-->
Student name: <span id="sName">&nbsp;</span> <br />
instruction Arithmetic: <span id="math">&nbsp;</span> <br />
Comments on Arithmetic: <span id="mycomments1"></span> <br />
instruction Reading: <span id="read">&nbsp;</span> <br />
Comments on Reading: <span id="mycomments2"></span> <br />
instruction Writing: <span id="writing">&nbsp;</span> <br />
Commentsn on Writing: <span id="mycomments3"></span> <br />
Carla's Energy: <span id="overall"></span> <br />
Comments on Energy: <span id="mycomments">&nbsp;</span> <br />
Carla's Manners:<span id="manners"></span> <br />
Comments on Manners: <span id="mycomments4"></span> <br />
Carla's Fairness: <span id="fairness"></span><br />
Comments on Fairness: <span id="mycomments5"></span>
</div>
<div style="clear:both;"></div>
<p> <input type="reset" value="Start over"> &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value ="Submit report"></p>
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment