IT Assignment

Assignment 1 Make a Calculator using javascript and html?

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex justify-content-center align-items-center" style="height:

100vh;">
<form action="#" class="shadow-lg p-3 w-25">
<div class="row">
<div class="col-6">
<input type="text" id="num1" class="form-control mb-3"
placeholder="Number 1" />
</div>
<div class="col-6">
<input type="text" id="num2" class="form-control mb-3"
placeholder="Number 2" />
</div>
</div>
<select class="form-select mb-3" id="operation">
<option disabled selected>Select Opration</option>
<option value="+">Add</option>
<option value="-">Minus</option>
<option value="*">Multiply</option>
<option value="/">Divide</option>
<option value="**">Squre</option>
</select>
<label class="collapse hide my-2" id="ans"></label>
<div class="d-flex">
<button type="reset" class="btn btn-secondary">Reset</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="script.js"></script>
</body>
</html>

$("#operation").on("change", function () {
let num1 = $("#num1").val();
let num2 = $("#num2").val();
if (isEmpty("num1") && isEmpty("num2")) {
$("#ans").show();
var opr = $("#operation").val();
console.log(opr);
if (opr == "+")
$("#ans").html("Ans -: " + (parseInt(num1) + parseInt(num2)));
else if (opr == "-")
$("#ans").html("Ans -: " + (parseInt(num1) - parseInt(num2)));
else if (opr == "*")
$("#ans").html("Ans -: " + parseInt(num1) * parseInt(num2));
else if (opr == "/")
$("#ans").html("Ans -: " + parseInt(num1) / parseInt(num2));
else if (opr == "**")
$("#ans").html("Ans -: " + parseInt(num1) ** parseInt(num2));
}
});
function isEmpty(ele) {
if ($("#" + ele).val() == "") {
$("#" + ele).addClass("is-invalid");
return false;
} else {
$("#" + ele).removeClass("is-invalid");
$("#" + ele).addClass("is-valid");
return true;
}
}
Assignment 2 To write the xhtml page using inline, embedded and external styles ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" href="style.css">

<style>
.heading {
color: blue;
}
</style>
</head>
<body>

<h1 style="color: red;">Change Color by Inline css</h1>
<h2 class="heading">Chnage Color By Internal css</h2>
<h3 class="heading2">Chnage Color By External css</h3>
</body>
</html>

.heading2{
color: blueviolet;
}
Assignment 3 student information web page using javascript and form tag ?

<!DOCTYPE html>
<html lang="en">
<head>
<link
href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
rel="stylesheet" />
</head>
<body class="d-flex justify-content-center align-items-center" style="height:

100vh;">
<form class="w-25 shadow-lg p-4 p-2">
<h3 class="text-center text-secondary mb-3">Student Form</h3>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Name">
<div class="invalid-feedback msg"></div>
</div>
<select id="department" class="form-select mt-3">
<option value="">please choose</option>
<option value="CSE">CSE</option>
<option value="ECE">ECE</option>
<option value="EEE">EEE</option>
<option value="MECH">MECH</option>
</select>
<input type="text" id="regno" class="form-control mt-3"
placeholder="Register No">
<input type="text" id="marks1" class="form-control mt-3" placeholder="Marks
1">
<input type="text" id="marks2" class="form-control mt-3" placeholder="Marks
2">
<input type="text" id="total" class="form-control my-3"
placeholder="Total">
<button type="button" onclick="return formVal()" class="btn btnprimary">
Submit </button>
</form>
</body>
</html>

function formVal() {
var name = document.getElementById("name");
var department = document.getElementById("department");
var marks1 = document.getElementById("marks1");
var regno = document.getElementById("regno");
var marks2 = document.getElementById("marks2");
var total = document.getElementById("total");
if (
isEmpty(name) &&
isAlphabet(name) &&
isEmpty(department) &&
isEmpty(regno) &&
isNumeric(regno) &&
isNumeric(marks1) &&
isNumeric(marks2) &&
isNumeric(total)
) {
document.write("Name -: " + name.value + "<br/>");
document.write("Department -: " + department.value + "<br/>");
document.write("Register Number -: " + regno.value + "<br/>");
document.write("Marks1 -: " + marks1.value + "<br/>");
document.write("Marks2 -: " + marks2.value + "<br/>");
document.write("Total -: " + total.value + "<br/>");
}
}
function isEmpty(elem) {
if (elem.value != "") {
elem.classList.remove("is-invalid");
return true;
} else {
elem.classList.add("is-invalid");
elem.focus();
document.getElementsByClassName("msg")[0].innerHTML =
"Name Can not be Empty.";
return false;
}
}
function isNumeric(elem) {
var expr = /^[0-9]+$/;
if (elem.value.match(expr)) {
elem.classList.remove("is-invalid");
return true;
} else {
elem.focus();
return false;
}
}
function isAlphabet(elem) {
var expr = /^[a-zA-z ]+$/;
if (elem.value.match(expr)) return true;
else {
elem.focus();
document.getElementsByClassName("msg")[0].innerHTML =
"Number Not Allowed in name";
return false;
}
}
Assignment 4 To write a program displays displays th euser details taking the user
information from the xml document ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<h1>The XMLHttpRequest Object Model </h1>
<button type="button" onclick="loadDoc()">Get My data Collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i
var xmlDoc = xml.responseXML;
var table =
"<tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</
th><th>Year</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+ "</td><td>" +
x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue
+ "</td><td>" +
x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue
+ "</td><td>" +
x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COMPANY>Virgin records</COMPANY>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COMPANY>Polydor</COMPANY>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COMPANY>Mega</COMPANY>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COMPANY>Grammy</COMPANY>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COMPANY>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
Assigment 5 to write a javascript program for a ajax(to change content of page) ?


<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="myDiv">Hello, World!</p>
<button onclick="Change()">Change</button>
<script>
function Change() {
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET", "new.txt", true);
xmlhttp.send();
}
</script>
</body>
</html>

|| Jay Gau Mata ||
|| Jay Gopal ||
Assignment 6 to write a webpage that displays college infotmation usingi various

style sheet ?

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2 {
color: purple;
margin-left: 25px;
}
ul li {
position: relative;
padding-bottom: 11px;
}
</style>
</head>
<body>
<h2>ADHIPARASAKTHI EDUCATION TRUST</h2>
<ul>
<li>ADHIPARASAKTHI SCHOOL</li>
<li>ADHIPARASAKTHI POLYTECHNIC</li>
<li>ADHIPARASAKTHI ENGINEERING COLLEGE</li>
<li>ADHIPARASAKTHI DENTAL COLLEGE</li>
<li>ADHIPARASAKTHI MEDICAL COLLEGE</li>
<li>ADHIPARASAKTHI MATRICULATION SCHOOL</li>
<li>ADHIPARASAKTHI ARTS AND SCIENCE COLLEGE</li>
<li>ADHIPARASAKTHI NURSING</li>
<li>ADHIPARASAKTHI AGRICULTURE</li>
<li>ADHIPARASAKTHI PHARMACY</li>
<li>ADHIPARASAKTHI PHYSIOTHERAPY</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Facilities</h2>
<ul type>
<li>Digital library</li>
<li>APECComputer Centre</li>
<li>Transport facilities</li>
<li>Wi-fi connection</li>
<li>Sports&Games</li>
<li>NCC</li>
<li>NSS</li>
<li>YRC</li>
</ul>
<a href="website.html">Home</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>MBM College</title>
<style>
.mbm {
background-color: whitesmoke;
align-items: center;
justify-content: center;
}
.mbm a {
text-decoration: none;
color: rgb(66, 66, 237);
}
ul li {
position: relative;
padding-bottom: 10px;
}
ul{
padding-left: 40px;
}
</style>
</head>
<body>
<div class="mbm">
<h1 style="text-align: center; text-decoration: underline;">MBM Engineering
College Jodhpur</h1>
<ul>
<li><a href="course.html">Course</a></li><br>
<li><a href="facil.html">Facilitiies</a></li><br>
<li><a href="staff.html">Staff Details</a></li><br>
<li><a href="timetable.html">timetable</a></li><br>
<li><a href="percent.html">Percentage</a></li><br>
<li><a href="recent.html">Recent Activity</a></li><br>
<li><a href="adhi.html">Adhiprakashit Portal</a></li><br>
</ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3 style="color: rgb(235, 175, 84)">
UG Courses offered
<ul>
<li>B.E., Computer Science and Engineering</li>
<li>B.E., Electrical and Electronics Engineering</li>
<li>B.E., Electronics and Communication Engineering</li>
<li>B.E., Civil Engineering</li>
<li>B.E., Mechanical Engineering</li>
<li>B.Tech., InformationTecnology</li>
<li>B.Tech., Chemical Engineering</li>
</ul>
PG courses offered
<ol>
<li>M.E., ComputerScience and Engineering</li>
<li>M.E., Applied Electronics</li>
<li>M.E., VLSI Design</li>
<li>M.E., Thermal Engineering</li>
</ol>
</h3>
<a href="website.html">HOME</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table width="50%" cellspacing="4" cellpadding="2" border="3">
<tr>
<th>Student Name</th>
<th>Percentage</th>
</tr>
<tr>
<td>Prakash Solanki</td>
<td>85%</td>
</tr>
<tr>
<td>Priyal jain</td>
<td>87%</td>
</tr>
<tr>
<td>Manisha</td>
<td>75%</td>
</tr>
<tr>
<td>Chetan</td>
<td>82%</td>
</tr>
<tr>
<td>Sangita</td>
<td>88%</td>
</tr>
<tr>
<td>Hartha</td>
<td>93%</td>
</tr>
<tr>
<td>SRI</td>
<td>77%</td>
</tr>
</table><br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2 {
margin-left: 25px;
color: purple;
}
</style>
</head>
<body>
<h2>RECENT INFORMATION</h2>
<ul>
<li>
CAMPUS INTERVIEW IS GOING ON IT WILL ON-CAMPUS AND OFFCAMPUS(company
name TCS,HCL,WIPRO)
</li>
<li>SYMPOSIUM CAN BE CONDUCTED ON FEB16th</li>
<li>WORKSHOP CAN BE CONDUCTED ON FEB 8th</li>
<li>
CULTURAL PROGRAMMING CONDUCED ON MEDICAL COLLEGE AT FEB 10th TO FEB
13th
</li>
<li>MINI PROJECT</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
td {
font-weight: 400;
}
</style>
</head>
<body>
<table border="2" cellpadding="10" cellspacing="10">
<h2>
<tr>
<th style="color: rgb(0, 207, 249)">POST</th>
<th style="color: rgb(0, 207, 249)">NAME</th>
<th style="color: rgb(0, 207, 249)">CONTACT</th>
</tr>
<tr>
<td>Principal</td>
<td>Dr. S. Jeyasri</td>
<td>8769564879</td>
</tr>
<tr>
<td>Vice Principal</td>
<td>Prof. R. Senthil</td>
<td>7568449725</td>
</tr>
<tr>
<td>HOD of CSE</td>
<td>Msr. A. Bhuvaneswari</td>
<td>7691022699</td>
</tr>
<tr>
<td>HOD of ECE</td>
<td>Mr. S. Nagarajan</td>
<td>8769564879</td>
</tr>
<tr>
<td>HOD of EEE</td>
<td>Mr. S. Baskaran</td>
<td>9163105645</td>
</tr>
<tr>
<td>HOD of IT</td>
<td>Mrs. Valli</td>
<td>65867968</td>
</tr>
</h2>
</table><br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>PRE-FINAL YEAR CSE</h1>
<table border="1" align="center">
<tr>
<td bgcolor="green">DAY/HOUR</td>
<td>1</td>
<td>2</td>
<td bgcolor="green">BREAK</td>
<td>3</td>
<td>4</td>
<td bgcolor="green">LUNCH</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td bgcolor="green">MONDAY</td>
<td>AI</td>
<td>LAB</td>
<td bgcolor="brown"></td>
<td colspan="2">LAB</td>
<td>ACA</td>
<td>OOAD</td>
<td>WT</td>
</tr>
<tr>
<td bgcolor="green">TUESDAY</td>
<td>AI</td>
<td>WT</td>
<td>NM</td>
<td>WT</td>
<td>OOAD</td>
</tr>
<tr>
<td bgcolor="green">WEDNESDAY</td>
<td>NM</td>
<td>PCD</td>
<td>AI</td>
<td>OOAD</td>
</tr>
<tr>
<td bgcolor="green">THURSDAY</td>
<td>ACA</td>
<td>LAB</td>
<td>WT</td>
<td>OOAD</td>
<td>AI</td>
</tr>
<tr>
<td bgcolor="green">FRIDAY</td>
<td>AI</td>
<td>ACA</td>
<td>WT</td>
<td>PCD</td>
<td>PCD</td>
<td>OOAD</td>
<td>NM</td>
</tr>
</table>
</body>
</html>
Assignment 7 To write the javascript/jquery program for online examination ?


<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.10.3/font/bootstrap-icons.css">
<style>
body{
display: flex;
height: 100vh;
}
</style>
</head>
<body>
<form class="w-50 p-3 d-flex">
<div class="step-1 d-inline-flex w-100">
<input type="text" class="form-control col-sm mx-2 shadow-none"
id="name" placeholder="Name" />
<input type="text" class="form-control col-sm mx-2 shadow-none"
id="regno" placeholder="Reg no." />
<button type="button" step="step-1" class="btn btn-success px-50 step-
1-btn col">
Let's Take The Exam
</button>
</div>
<div class="step-2 d-none shadow-lg p-3 w-100">
<div id="questionshowdiv"></div>
<button type="button" onclick="questionStart()" class="btn btn-primary
mt-3 next-btn">Next</button>
<button type="button" onclick="submitQue()" class="btn btn-primary mt-3
d-none submit-btn">Submit</button>
</div>
<div class="step-3 d-none">
<div class="userinfoshow"></div>
<table class="table">
<thead>
<tr>
<th>Sr.no</th>
<th>Question</th>
<th>Your Answer</th>
<th>Correct Answer</th>
<th>Status</th>
</tr>
</thead>
<tbody id="table_body"></tbody>
</table>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</body>
</html>

var userInfo = {
name: null,
regno: null
}
var qinfo = [];
var qshow = -1;
var Q = [
{ q: "What is the capital of india ?", options: ['Chennai', 'Mumbai', 'Delhi',
'Goa'], ans: 'Delhi' },
{ q: "What is our national flower ?", options: ['Lotous', 'Rose', 'Jasmine'],
ans: 'Lotous' },
{ q: "When india got World cup ?", options: ['1983', '1993', '2000', '2003'],
ans: '1983' },
{ q: "what is our national game ?", options: ['Football', 'Hockey',
'Badminton', 'kabaddi'], ans: 'Hockey' },
{ q: "Which team won ipl Trophy Most?", options: ['MI', 'CSK', 'RCB','KKR'],
ans: 'MI' }
];
$('.step-1-btn').on('click', function () {
if (isEmpty('name') && isEmpty('regno')) {
userInfo.name = $('#name').val()
userInfo.regno = $('#regno').val()
$('.step-1').addClass('d-none');
$('.step-2').removeClass('d-none');
questionStart();
}
}
);
function questionStart() {
qshow++;
if (qshow != 0) {
let checkqus = $("#questionshowdiv input[type='radio']:checked").val();
let status = Q[qshow - 1].ans == checkqus ? 'Correct' : 'Incorrect';
qinfo.push({ question: Q[qshow - 1].q, ans: Q[qshow - 1].ans, yourans:
checkqus, status:status });
}
if (Q.length > qshow) {
let question = Q[qshow].q;
let qnum = qshow + 1;
let options = Q[qshow].options; let ans = Q[qshow].ans;
$('#questionshowdiv div').remove(); $
('#questionshowdiv').append("<div><label>Q." + qnum + " " + question +
"</label></div>");
for (let o = 0; o < options.length; o++) {

$("#questionshowdiv").append('<div class="form-check mt-3"> <input
class="form-check-input" type="radio" name="q+' + qshow + '" value=' + options[o] +
' id="q' + qshow + '' + o + 1 + '"> <label class="form-check-label" for="q' + qshow
+ '' + o + 1 + '">' + options[o] + '</label></div>');
}
}
else{
$('.next-btn').addClass('d-none');
$('.submit-btn').removeClass('d-none'); console.log(qinfo);
}
}
function submitQue() {
$('.step-2').addClass('d-none');
$('.step-3').removeClass('d-none');
for (let i = 0; i < qinfo.length; i++) {

$('#table_body').append("<tr><td>" + (i + 1) + "</td><td>" +
qinfo[i].question + "</td><td>" + qinfo[i].yourans + "</td><td>" + qinfo[i].ans +
"</td><td>"+qinfo[i].status+"</td></tr>")
}
$('.userinfoshow').append("<p>Name:- " + userInfo.name + "<br> Reg.No:- "
+ userInfo.regno + "</p");
}
function isEmpty(ele) {
if ($('#' + ele).val() == "") {
$('#' + ele).addClass("is-invalid"); return false;
}
else {
$('#' + ele).removeClass("is-invalid"); $('#' + ele).addClass("is-valid");
return true;
}
}
Assignment 8 To write a map and fix the hotspots to show the information of it in a
web page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Indian Map</title>
<style>
body {
display: flex;
}
img {
border: 2px solid #000;
}
</style>
</head>
<body>
<img src="India_map.jpg" usemap="#indiaMap" style="width: 475px; height: 532px"
/>
<map name="indiaMap">
<area shape="rect" coords="69,148,138,215" alt="Rajasthan"
href="rajasthan.html" />
<area shape="rect" coords="33,221,103,281" alt="Gujrat"
href="gujrat.html" />
<area shape="rect" coords="140,228,219,260" alt="Madhya Pradesh"
href="mp.html" />
</map>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Rajasthan</h1>
<h3>is one of the 28 states of India. Its capital and largest city is
Chennai.
Tamil Nadu lies in the southernmost part of the Indian Peninsula and
is
bordered by the States of Puducherry, Kerala, Karnataka and Andhra
Pradesh. It is bound by the Eastern Ghats in the north, the Nilgiri,
the
Anamalai Hills, and Palakkad on the west, by the Bay of Bengal in the
east, the Gulf of Mannar, the Palk Strait in the south east, and by
the
Indian Ocean in the south.
</h3>
<ol>
<li><i>Districts </i> - 32</li>
<li><i>Capital City </i> - Chennai</li>
<li><i>Largest City </i> - Chennai</li>
<li><i>Festivals</i> - Pongal, Alanganallur Jallikattu etc.,</li>
<li><i>Cuisine </i> - Dosai, Adai, Idly, Vadai, Pongal, Appam(Aappam),
Paniyaram, Puttu(Pittu), Uppumavu(Uppuma), Santhakai(Noodles),
Idiyappam
and Uthappam.</li>
<li><i>Tourist spots </i>
<ul>
<li>Mamallapuram (Shore Temple)</li>
<li>Brihadeeshwara Temple</li>
<li>Ooty</li>
<li>Kodaikanal.</li>
<li>Kanyakumari. (Thiruvalluvar statue etc.,)</li>
<li>Marina Beach(chennai)</li>
<li>Madurai Meenakshi Amman Temple.</li>
<li>Thanjavur.</li>
<li>Velankanni.</li>
<li>Rameswaram.</li>
</ul>
</li>
</ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Gujrat</h1>
Chennai.
is
the
the
</h3>
<ol>
Idiyappam
and Uthappam.</li>
<ul>
<li>Ooty</li>
<li>Thanjavur.</li>
</ul>
</li>
</ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Madhya Pradesh</h1>
Chennai.
is
the
the
</h3>
<ol>
Idiyappam
and Uthappam.</li>
<ul>
<li>Ooty</li>
<li>Thanjavur.</li>
</ul>
</li>
</ol>
</body>
</html>
Add India map to This Assignment

IT Assignment

Uploaded by

Copyright:

Available Formats

You might also like

IT Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT Assignment

Uploaded by

Copyright:

Available Formats

Assignment 1 Make a Calculator using javascript and html?

<body class="d-flex justify-content-center align-items-center" style="height:

<body class="d-flex justify-content-center align-items-center" style="height:

Assigment 5 to write a javascript program for a ajax(to change content of page) ?

Assignment 6 to write a webpage that displays college infotmation usingi various

Assignment 7 To write the javascript/jquery program for online examination ?

for (let o = 0; o < options.length; o++) {

for (let i = 0; i < qinfo.length; i++) {

You might also like