Scribd
Upload
43 views

Internet and Web Programming Lab Assessment - 2

This document contains code for an HTML feedback form with radio button options and CSS styling. The form asks respondents to provide feedback on various aspects of a course on a scale from Excellent to Poor. It includes labels, radio buttons without values, text areas, and submit and reset buttons centered on the page. The accompanying CSS styles elements like headings, labels, inputs, and buttons.

Uploaded by

Pranav Saravanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views

Internet and Web Programming Lab Assessment - 2

This document contains code for an HTML feedback form with radio button options and CSS styling. The form asks respondents to provide feedback on various aspects of a course on a scale from Excellent to Poor. It includes labels, radio buttons without values, text areas, and submit and reset buttons centered on the page. The accompanying CSS styles elements like headings, labels, inputs, and buttons.

Uploaded by

Pranav Saravanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

INTERNET AND WEB PROGRAMMING LAB ASSESSMENT – 2

PRANAV SARAVANAN 20BCE0974


L1+L2 05/09/2022

Question:

Code:

HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSE3002 - Feedback Form</title>
<link rel="stylesheet" href="rev.css">
</head>
<body bgcolor="skyblue">
<h2 align="center">INTERNET AND WEB PROGRAMMING FEEDBACK
FORM</h2>
<form class="" action="index.html" method="post" >
<label>Curriculum and Syllabi of the Courses</label>
<input type="radio" name="q1" value="">Excellent
<input type="radio" name="q1" value="">Good
<input type="radio" name="q1" value="">Average
<input type="radio" name="q1" value="">Better
<input type="radio" name="q1" value="">Poor
<br><br>

<label>Extent of syllabi covered in the Class</label>


<input type="radio" name="q2" value="">Excellent
<input type="radio" name="q2" value="">Good
<input type="radio" name="q2" value="">Average
<input type="radio" name="q2" value="">Better
<input type="radio" name="q2" value="">Poor
<br><br>

<label>Course delivery by faculty members in the class</label>


<input type="radio" name="q3" value="">Excellent
<input type="radio" name="q3" value="">Good
<input type="radio" name="q3" value="">Average
<input type="radio" name="q3" value="">Better
<input type="radio" name="q3" value="">Poor
<br><br>

<label>Usage of teaching aids and ICT in the class by faculty to facilitate


teaching</label>
<input type="radio" name="q4" value="">Excellent
<input type="radio" name="q4" value="">Good
<input type="radio" name="q4" value="">Average
<input type="radio" name="q4" value="">Better
<input type="radio" name="q4" value="">Poor
<br><br>

<label>Fairness in the assessment processes (CAT, FAT, Quiz,


Assignments, etc.)</label>
<input type="radio" name="q5" value="">Excellent
<input type="radio" name="q5" value="">Good
<input type="radio" name="q5" value="">Average
<input type="radio" name="q5" value="">Better
<input type="radio" name="q5" value="">Poor
<br><br>

<label>Timely announcement of examination results</label>


<input type="radio" name="q6" value="">Excellent
<input type="radio" name="q6" value="">Good
<input type="radio" name="q6" value="">Average
<input type="radio" name="q6" value="">Better
<input type="radio" name="q6" value="">Poor
<br><br>

<label>Opportunities in the School/ University for Research


Activities</label>
<input type="radio" name="q7" value="">Excellent
<input type="radio" name="q7" value="">Good
<input type="radio" name="q7" value="">Average
<input type="radio" name="q7" value="">Better
<input type="radio" name="q7" value="">Poor
<br><br>

<label>Overall Learning Experience </label>


<input type="radio" name="q8" value="">Excellent
<input type="radio" name="q8" value="">Good
<input type="radio" name="q8" value="">Average
<input type="radio" name="q8" value="">Better
<input type="radio" name="q8" value="">Poor
<br><br>

<textarea name="" rows="8" cols="50" maxlength="1000"


placeholder="What would you like to improve further on this
course?"></textarea>
<br><br>

<center>
<input type="submit" name="" value="submit">
<input type="reset" name="" value="clear">
</center>
</form>

</body>
</html>

CSS:
h2{
background-color: red;
border: solid 1px yellow;
border-radius: 50px;
}
form{
border: dotted 2px;
padding: 10px 10px 10px 10px;
}
label{
text-decoration: inherit;
font-style: oblique;
font-weight: bolder;
padding-left: 10px;

}
input{
margin-left: 10px;
}
textarea{
}

Output:
Question:

Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="tt.css"/>

</head>

<body>

<div class="main">
<h1 class="head" align="center">Railway Ticket reservation
system</h1>
<div class="navigation">
</div>
<div class="booking">
<section>

<h2 class="head1">Book</h2>
<h2 class="head2">Your</h2>
<h2 class="head3">Tickets</h2>
<h2 class="head4">Here</h2>

<form><!-- abhinandan-->
<ul>
<b class="fsize"> From &emsp;<input type="text" placeholder="city
name"> </b> <br> <br>
<b class="fsize"> To &emsp;<input type="text" placeholder="city
name"> </b> <br> <br>
<b class="fsize"> Persons&emsp;<input type="number"
placeholder="no.of persons"> </b> <br> <br>
<b class="fsize"> Date&emsp;<input type="Date" placeholder="dd-
mm-yy"> </b> <br> <br>
<label class="fsize"><strong> Class </strong> </label>
<select id="class" name="class">
<option value="select">SELECT</option>
<option value="1AC">1AC</option>
<option value="2AC">2AC</option>
<option value="3AC">3AC</option>
<option value="Sleeper">Sleeper</option>
<option value="Chair">Chair</option> <br>
</select>

</ul>
</form>

<button class="submit" type="button" onclick="trainB()">Find Trains


</button>

<div class="form-popup" id="bookTrain">


<div class="popup">
<h1>Due to Covid19 all trains are currently cancelled</h1> <br>
<h2>#stayhome</h2>
<h2>#staysafe</h2>
<button type="button" class="hide" onclick="trainC()">Close</button>
</div> </div>

</section>
</div>

</div>
<script src="main.js"></script>
</body>
</html>

CSS:
body{
margin: auto;
background-color:lightgrey;
font-family: arial;

}
.navigation{
margin:auto;
width: 860px;
padding: 0px 0px 0px 130px;
height: 50px;
margin-top: 20px;
}

.navigation ul{
padding: 0;
list-style: none;;
}
.navigation ul li{
float: left;
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.navigation ul li a{
text-decoration: none;
color: darkblue;
background:lightpink;
border-top: 1px dotted black;
border-left:1px dotted black;
border-right: 1px dotted black;
border-bottom: 1px dotted black;
padding: 10px 20px 10px 20px;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
display: block;
text-align: right;
}
.navigation ul li a:hover{
text-decoration: none;
color:darkred;
background: lightgreen;
}
.navigation ul li a#onlink{
background:grey;
color: orange;
border-bottom: 1px solid red;
}

.navigation ul li a#onlink:hover{
background:white;
color: orange;
}
.main{
margin: auto;
width: 860px;
padding: 10px;
border:1px solid red;

background: lightyellow;
min-height: 600px;
}

.booking {
margin:0px;
padding:0px 100px 0px 0px;
border:1px solid black;
width: 150px;
float: left;
height: 630px;
background: lightblue;
font-size: medium;
}

.img{
width:600px;
height: 340px;
padding: 0px 0px 10px 0px;
float: right;
}

.imgs{
width: 190px;
height: 220px;
padding: 0px 1px 0px 0px;
margin-left: 5px;
border:1px solid black;
}
.head1{

margin-left: 30px;
font-family: algerian;
}
.head2{

margin-left: 60px;
font-family: algerian;
}
.head3{

margin-left: 95px;
font-family: algerian;
}
.head4{

margin-left: 160px;
font-family: algerian;
}

.submit{
margin-left: 80px;
margin-top: 20px;
padding: 0px 50px 0px 50px;
font-size:large;
background-color:tomato ;
border-radius: 20px;
text-align: center;

}
.head{
margin: 2px;
margin-left: 150px;
font-family: algerian;
}
.holiday{
margin-left: 450px;
font-family: algerian;
}

.fsize{
font-family: algerian;
font-size: x-large;
}

.hpack{
margin: 2px;
margin-left: 300px;
font-family: algerian;
}
.hpimg{
margin-top: 10px;
border:1px solid black;
margin-left: 50px;
height: 160px;
width: 400px;
}
.bookh{
float: right;
margin-right: 50px;
margin-top: 50px;
padding: 10px 10px 10px 10px;
font-size: x-large;
background-color:orange;
border-radius: 20px;
}
.bookd{
float: right;
margin-right: 50px;
margin-top: 50px;
padding: 10px 10px 10px 10px;
font-size: x-large;
background-color:lightblue;
border-radius: 20px;
}
table
{
border: 2px solid blue;
width: 800px;
margin-left: 30px;

}
th{
border: 1px solid black;

background-color: red;
font-weight: bold;
padding: 10px;
}
td{
border: 2px solid black;

font-weight: bold;
padding: 50px;
}
td:hover{
background-color: lightblue;
}
tr:hover{
background-color: #ff66ff;

}
.meald{
width: 600px;
}
.order{
padding: 10px 10px 10px 10px;
width: 200px;
background-color:#66ff66;
border-radius: 20px;
}
.service{
padding: 60px 20px 0px 20px;
margin-left: 250px;
font-family: algerian;
}
.service1{

margin-left: 250px;
font-family: algerian;
}
.service2{
border: 2px solid black;
width: 600px;
padding: 20px;
margin-bottom: 10px;
margin-left: 110px;
}

.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.89;

bottom: 23px;
right: 28px;
width: 280px;
text-align: center;
align-items: center;

.form-popup {
width: 100%;
height:100%;
background-color: black;
opacity: 0.96;
position: fixed;

left: 0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}

.popup{
min-width: 500px;
min-height: 300px;
background-color: white;
border-radius: 8px;
text-align: center;
padding:10px 10px 10px 10px;
margin:0px 5px 0px 5px ;
}

.hide{
padding: 10px 50px 10px 50px;
background-color: orange;
text-align: center;
font-size: 20px;
border-radius: 5px;
margin-top: 80px;:
}

Output:

You might also like