Lab 7

Program :
index.html
<!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">
<title>Front Online Assessment Page</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="padding:2em;background-color:rgb(16,
255, 36);text-align:center;">
<p display="4" class="font-weight-bold text-uppercase"> Take
Jobs Online Assessment Platform </p>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="border-style:double;">
<div id="sona" class="carousel slide" data-ride="carousel"
style="width:100%">

<ul class="carousel-indicators">
<li data-target="#sona" data-slide-to="0"
class="active"></li>
<li data-target="#sona" data-slide-to="1"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="test.html">
<img class="d-block w-100" src="war.jpg"
height="400" width="400" style="width:100%">
</a>
<div class="carousel-caption">
<h3>Click here Take up a Mock Test</h3>
<p>Sona Online Assessment Platform</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="war2.jpg"
height="400" width="400" alt="Chicago">
<h3>MCQ Test</h3>
</div>
</div>
<img class="d-block w-100" src="war3.jpg"
height="400" width="400" alt="New York">
<br/>
<br/>
<h3>Easy Test</h3>
</div>
</div>
<div style="padding:2em;background-color:rgb(255,
<h1>Welcome</h1>
</div>
<br>
<br>
<p class="sucess">Welcome to the test!</p>
</div>
</div>
</div>
<script>
// Handle Bootstrap carousel slide event
$('.carousel').carousel({
interval: 2000
});
</script>
<div>
<a class="carousel-control-prev" href="#sona" data-
slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#sona" data-
slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="container-fluid" style="padding:2em;background-
color:rgb(0, 247, 255);text-align:center;">
<br>
<h1>Welcome to the test!</h1>
<div class="btn btn-lg btn-success mycustom_btn2"
onClick="javascript:clickinner();">START</div>
</div>
<script>
function clickinner() {
location.href = "forms.html";
};
</script>
</div>
</div>
</body>
</html>
Forms.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Enter the details and take the Assessment </h1>
<form action="" class="form-horizontal">
<div class="form-group has-success">
<label for="id1" class="control-label col-sm-2">User Register
Number </label>
<div class="col-sm-6">
<input class="form-control" type="text" id="id1"
placeholder="Enter your Register Number">
</div>
</div>
<label for="id2" class="control-label col-sm-2">Name </label>
<input class="form-control" type="text" id="id2"
placeholder="Enter your Name">
</div>
</div>
<label for="id3" class="control-label col-sm-2">E-Mail
</label>
<input class="form-control" type="mail" id="id3"
placeholder="Enter your E-Mail">
</div>
</div>
<button type="button" class="btn btn-success">
Submit
</button>
</div>
<button type="button" class="btn btn-danger">
Reset
</button>
</div>
</form>
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="fd.html">Previous</a></li>
href="forms.html">Details</a></li>
href="test1.html">1</a></li>
href="thankyou.html">Next</a></li>
</ul>
</div>
</body>
</html>
Test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Take up Test</title>
integrity="sha384-
integrity="sha384-
<script
integrity="sha384-
<script
integrity="sha384-
<script>
$(document).ready(function() {
$("#rrr").click(function() {
var radioValue = $("input[name='answer']:checked").val();
if (radioValue) {
if (radioValue === "Bootstrap") {
console.log("Correct")
let s = "<div style=\"background-color:white;font-
size:1.5em \" class=\"alert alert-sucess alert-dismissible\" role=\"alert\">
<span type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-
label=\"Close\"><span aria-hidden=\"true\">×</span></span>
<strong>Success</strong> Your Answer is correct...Good Work ... Go to Next
Question</div>"
console.log(s)
$("#sona").html(s);
} else {
console.log("Incorrect")
let s = "<div style=\"background-color:white ;font-
size:1.5em \" class=\"alert alert-danger alert-dismissible\" role=\"alert\">
<strong>Warning!</strong> Your Answer is incorrect... Try it again</div>"
console.log(s)
$("#sona").html(s);
}
});
})
</script>
</head>
<body>
<div class="row">
<div class="col-lg-12" style="background-color:wheat;text-
align:center;">
<div class="form-group">
<label for="question" class="font-weight-bold"> Question
1: Which of the following is a Front end Technology?</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding-bottom:15em;background-
color:wheat;text-align:left;">
<div class="form-check">
<input class="form-check-input" type="radio"
name="answer" id="answer1" value="XML">
<label class="form-check-label font-weight-bold"
for="answer1">
XML
</label>
</div>
<br/>
name="answer" id="answer2" value="NODE JS">
for="answer2">
NODE JS
</label>
</div>
<br/>
name="answer" id="answer3" value="Bootstrap">
for="answer3">
Bootstrap
</label>
</div>
<br/>
name="answer" id="answer4" value="ANGULAR JS">
for="answer4">
ANGULAR JS
</label>
</div>
<br/>
<div>
<input type="button" value="submit" class="btn btn-
primary mt-3" id="rrr" />
<input type="button" value="reset" class="btn btn-
primary mt-3" id="reset" onClick="javascript:reset()" />
</div>
<script>
function reset() {
document.getElementById("answer1").checked =
false;
false;
false;
false;
}
</script>
</div>
<div id="sona" class="mt-3">
</div>
<br/>
</div>
</div>
</form>
</ul>
</div>
</body>
</html>
Test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Take up Test</title>
integrity="sha384-
integrity="sha384-
<script
integrity="sha384-
<script
integrity="sha384-
<script>
$(document).ready(function() {
$("#rrr").click(function() {
var radioValue = $("input[name='answer']:checked").val();
if (radioValue) {
if (radioValue === "NODE JS") {
console.log("Correct")
let s = "<div style=\"background-color:white;font-
size:1.5em \" class=\"alert alert-sucess alert-dismissible\" role=\"alert\">
<strong>Success</strong> Your Answer is correct...Good Work ... Go to Next
Question</div>"
console.log(s)
$("#sona").html(s);
} else {
console.log("Incorrect")
let s = "<div style=\"background-color:white ;font-
size:1.5em \" class=\"alert alert-danger alert-dismissible\" role=\"alert\">
<strong>Warning!</strong> Your Answer is incorrect... Try it again</div>"
console.log(s)
$("#sona").html(s);
}
}
});
})
</script>
</head>
<body>
<div class="row">
<div class="col-lg-12" style="background-color:wheat;text-
align:center;">
<label for="question" class="font-weight-bold"> Question
2: Which of the following is a back end Technology?</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding-bottom:15em;background-
color:wheat;text-align:left;">
name="answer" id="answer1" value="XML">
for="answer1">
XML
</label>
</div>
<br/>
name="answer" id="answer2" value="NODE JS">
for="answer2">
NODE JS
</label>
</div>
<br/>
name="answer" id="answer3" value="Bootstrap">
for="answer3">
Bootstrap
</label>
</div>
<br/>
name="answer" id="answer4" value="ANGULAR JS">
for="answer4">
ANGULAR JS
</label>
</div>
<br/>
<div>
<input type="button" value="submit" class="btn btn-
primary mt-3" id="rrr" />
<input type="button" value="reset" class="btn btn-
primary mt-3" id="reset" onClick="javascript:reset()" />
</div>
<script>
function reset() {
false;
false;
false;
false;
}
</script>
<div id="sona" class="mt-3">
</div>
<br/>
</div>
</div>
</form>
</ul>
</div>
</body>
</html>
Thankyou.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Front Online Assessment Page</title>
integrity="sha384-
integrity="sha384-
<script
integrity="sha384-
<script
integrity="sha384-
</head>
<body>
<div class="row">
<div class="col-sm-12" style="padding:2em;background-color:rgb(16,

<p display="4" class="font-weight-bold text-uppercase"> Thank

you! </p>
</div>
</div>
</div>
</body>
</html>
Output :

Lab 7

Uploaded by

Document Information

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

Lab 7

Uploaded by

Copyright:

Available Formats

Program :

<div class="col-sm-12" style="padding:2em;background-color:rgb(16,

<p display="4" class="font-weight-bold text-uppercase"> Thank

You might also like