Create a folder named Project in your All102Submissions fold

•Create a folder named Project in your All_102Submissions folder to contain all of your files for the final project.
•You will create exactly three web pages for your web site.
•Page 1 - A page about you, a slideshow and a TEDx video
•Page 2 – An interactive quiz that displays a calculated score
•Page 3 –A non-traditional calculator(do not use grade calculator)
•Each web page must be linked to the others. Consider using consistent navigation between all of your web pages.
Note: You can only have three html documents. So plan the layout, style and content carefully. (You will also have an external CSS file- see Layout and Style Section)

index.html

//This file shows a navigation, on click of each column it will navigate to the respective page. Click the browser\'s back button to go to index.html

<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" href=\"style.css\">
<script src=\"functions.js\"></script>
</head>
<body>
<div id=\"container\">
<ul>
<li><a href=\"Page_1.html\">Page 1</a></li>
<li><a href=\"Page_2.html\">Page 2</a></li>
<li><a href=\"Page_3.html\">Page 3</a></li>
</ul>
</div>
</body>
</html>

Page_1.html

<!DOCTYPE html>
<html>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

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

<body>

<h1 style=\"color: blue\">Brief introduction about me</h1>
<p>
Just to introduce myself briefly in case you got lost in the current page. My name is Purnima Manhas. I am currently a student majoring in computer engineering. I started my engineering in late August 2011. I have huge interest in designing websites using HTML/JavaScript/CSS. I love writing poems and reading novels. I would like to persue my higher studies in web designing.</p>

<div class=\"slideshow-container\">

<div class=\"mySlides fade\">
<div class=\"numbertext\">1 / 3</div>
<img src=\"a.jpg\" style=\"width:100%\"> //add image with name a.jpg
<div class=\"text\">Caption Text</div>
</div>

<div class=\"mySlides fade\">
<div class=\"numbertext\">2 / 3</div>
<img src=\"b.jpg\" style=\"width:100%\">
<div class=\"text\">Caption Two</div>
</div>

<div class=\"mySlides fade\">
<div class=\"numbertext\">3 / 3</div>
<img src=\"c.jpg\" style=\"width:100%\">
<div class=\"text\">Caption Three</div>
</div>

</div>
<br>

<div style=\"text-align:center\">
<span class=\"dot\" onclick=\"currentSlide(1)\"></span>
<span class=\"dot\" onclick=\"currentSlide(2)\"></span>
<span class=\"dot\" onclick=\"currentSlide(3)\"></span>
</div>


<iframe width=\"420\" height=\"345\" src=\"https://www.youtube.com/watch?v=2WHQrG5IDC8\">
</iframe>
<a href=\"https://www.youtube.com/watch?v=2WHQrG5IDC8\" target=\"_blank\">Video added :- TEDxSpotlights Girl Power </a>

<script src=\"functions.js\"></script>

</body>
</html>

Page_2.html

//Add questions according to your wish. For example I have done it for first 4 cases, due to time shortage couldn\'t complete it. If you need further help, let me know through reply on the question in the form of comment.

<!DOCTYPE html>
<html>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

<link rel=\"stylesheet\" href=\"style.css\">
<script src=\"jquery.js\"></script>
<script src=\"quiz.js\"></script>

<body>

<p class=\"question\">1. A webpage displays a picture. What tag was used to display that picture?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">picture</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">image</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">img</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">src</label><br/>
</ul>

<p class=\"question\">2. What does vlink attribute mean?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q2\" value=\"a\" id=\"q2a\"><label for=\"q2a\">visited link</label><br/>
<input type=\"radio\" name=\"q2\" value=\"b\" id=\"q2b\"><label for=\"q2b\">virtual link</label><br/>
<input type=\"radio\" name=\"q2\" value=\"c\" id=\"q2c\"><label for=\"q2c\">very good link</label><br/>
<input type=\"radio\" name=\"q2\" value=\"d\" id=\"q2d\"><label for=\"q2d\">active link</label><br/>
</ul>

<p class=\"question\">3. To create HTML document you require a</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q3\" value=\"a\" id=\"q3a\"><label for=\"q3a\">web page editing software</label><br/>
<input type=\"radio\" name=\"q3\" value=\"b\" id=\"q3b\"><label for=\"q3b\">High powered computer</label><br/>
<input type=\"radio\" name=\"q3\" value=\"c\" id=\"q3c\"><label for=\"q3c\">Just a notepad can be used</label><br/>
<input type=\"radio\" name=\"q3\" value=\"d\" id=\"q3d\"><label for=\"q3d\">None of above</label><br/>
</ul>

<p class=\"question\">4. The _____ character tells browsers to stop tagging the text</p>

<p class=\"question\">5. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q5\" value=\"a\" id=\"q5a\"><label for=\"q5a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q5\" value=\"b\" id=\"q5b\"><label for=\"q5b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q5\" value=\"c\" id=\"q5c\"><label for=\"q5c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q5\" value=\"d\" id=\"q5d\"><label for=\"q5d\">Answer 4</label><br/>
</ul>

<p class=\"question\">6. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q6\" value=\"a\" id=\"q6a\"><label for=\"q6a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q6\" value=\"b\" id=\"q6b\"><label for=\"q6b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q6\" value=\"c\" id=\"q6c\"><label for=\"q6c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q6\" value=\"d\" id=\"q6d\"><label for=\"q6d\">Answer 4</label><br/>
</ul>

<p class=\"question\">7. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q7\" value=\"a\" id=\"q7a\"><label for=\"q7a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q7\" value=\"b\" id=\"q7b\"><label for=\"q7b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q7\" value=\"c\" id=\"q7c\"><label for=\"q7c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q7\" value=\"d\" id=\"q7d\"><label for=\"q7d\">Answer 4</label><br/>
</ul>

<p class=\"question\">8. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q8\" value=\"a\" id=\"q8a\"><label for=\"q8a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q8\" value=\"b\" id=\"q8b\"><label for=\"q8b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q8\" value=\"c\" id=\"q8c\"><label for=\"q8c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q8\" value=\"d\" id=\"q8d\"><label for=\"q8d\">Answer 4</label><br/>
</ul>

<p class=\"question\">9. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q9\" value=\"a\" id=\"q9a\"><label for=\"q9a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q9\" value=\"b\" id=\"q9b\"><label for=\"q9b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q9\" value=\"c\" id=\"q9c\"><label for=\"q9c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q9\" value=\"d\" id=\"q9d\"><label for=\"q9d\">Answer 4</label><br/>
</ul>

<p class=\"question\">10. What is the answer to this question?</p>

<ul class=\"answers\">
<input type=\"radio\" name=\"q10\" value=\"a\" id=\"q10a\"><label for=\"q10a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q10\" value=\"b\" id=\"q10b\"><label for=\"q10b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q10\" value=\"c\" id=\"q10c\"><label for=\"q10c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q10\" value=\"d\" id=\"q10d\"><label for=\"q10d\">Answer 4</label><br/>
</ul>

<br/>
<div id=\"results\">
Show me the answers!
</div>

<div id=\"category1\">
<p>
<strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>

<div id=\"category2\">
<p>
<strong>Question 2:</strong> The correct answer is <strong>Answer 2</strong>.</p>
</div>

<div id=\"category3\">
<p>
<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>

<div id=\"category4\">
<p>
<strong>Question 4:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>

<div id=\"category5\">
<p>
<strong>Question 5:</strong> The correct answer is <strong>Answer 1</strong>.</p>
</div>

<div id=\"category6\">
<p>
<strong>Question 6:</strong> The correct answer is <strong>Answer 2</strong>.</p>
</div>

<div id=\"category7\">
<p>
<strong>Question 7:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>

<div id=\"category8\">
<p>
<strong>Question 8:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>

<div id=\"category9\">
<p>
<strong>Question 9:</strong> The correct answer is <strong>Answer 1</strong>.</p>
</div>

<div id=\"category10\">
<p>
<strong>Question 10:</strong> The correct answer is <strong>Answer 2</strong>.</p>
</div>

<div id=\"category11\">
<p>
You answered them all right!</p>
</div>

</body>

</html>

quiz.js

//This file is for adding the correct answers.

$(document).ready(function()
{ $(\"#results\").click(function() {

if (!$(\"input[@name=q1]:checked\").val() ||
!$(\"input[@name=q2]:checked\").val() ||
!$(\"input[@name=q3]:checked\").val() ||
!$(\"input[@name=q4]:checked\").val() ||
!$(\"input[@name=q5]:checked\").val() ||
!$(\"input[@name=q6]:checked\").val() ||
!$(\"input[@name=q7]:checked\").val() ||
!$(\"input[@name=q8]:checked\").val() ||
!$(\"input[@name=q9]:checked\").val() ||
!$(\"input[@name=q10]:checked\").val()
) {
alert(\"You\'re not done yet!\");
}

else {
var cat1name = \"1\";
var cat2name = \"2\";
var cat3name = \"3\";
var cat4name = \"4\";
var cat5name = \"5\";
var cat6name = \"6\";
var cat7name = \"7\";
var cat8name = \"8\";
var cat9name = \"9\";
var cat10name = \"10\";
var cat11name = \"None\";

var cat1 = ($(\"input[@name=q1]:checked\").val() != \"c\");

var cat2 = ($(\"input[@name=q2]:checked\").val() != \"a\");

var cat3 = ($(\"input[@name=q3]:checked\").val() != \"c\");

var cat4 = ($(\"input[@name=q4]:checked\").val() != \"b\");

var cat5 = ($(\"input[@name=q5]:checked\").val() != \"a\");

var cat6 = ($(\"input[@name=q6]:checked\").val() != \"b\");

var cat7 = ($(\"input[@name=q7]:checked\").val() != \"c\");

var cat8 = ($(\"input[@name=q8]:checked\").val() != \"d\");

var cat9 = ($(\"input[@name=q9]:checked\").val() != \"a\");

var cat10 = ($(\"input[@name=q10]:checked\").val() != \"b\");

var cat11 = (!cat1 && !cat2 && !cat3 && !cat4 && !cat5 && !cat6 && !cat7 && !cat8 && !cat9 && !cat10); var categories = [];

if (cat1) { categories.push(cat1name) };
if (cat2) { categories.push(cat2name) };
if (cat3) { categories.push(cat3name) };
if (cat4) { categories.push(cat4name) };
if (cat5) { categories.push(cat5name) };
if (cat6) { categories.push(cat6name) };
if (cat7) { categories.push(cat7name) };
if (cat8) { categories.push(cat8name) };
if (cat9) { categories.push(cat9name) };
if (cat10) { categories.push(cat10name) };
if (cat11) { categories.push(cat11name) };

var catStr = \'You answered the following questions incorrectly: \' + categories.join(\', \') + \'\';
$(\"#categorylist\").text(catStr);
$(\"#categorylist\").show(\"slow\");

if (cat1) { $(\"#category1\").show(\"slow\"); };
if (cat2) { $(\"#category2\").show(\"slow\"); };
if (cat3) { $(\"#category3\").show(\"slow\"); };
if (cat4) { $(\"#category4\").show(\"slow\"); };
if (cat5) { $(\"#category5\").show(\"slow\"); };
if (cat6) { $(\"#category6\").show(\"slow\"); };
if (cat7) { $(\"#category7\").show(\"slow\"); };
if (cat8) { $(\"#category8\").show(\"slow\"); };
if (cat9) { $(\"#category9\").show(\"slow\"); };
if (cat10) { $(\"#category10\").show(\"slow\"); };
if (cat11) { $(\"#category11\").show(\"slow\"); };
{ $(\"#closing\").show(\"slow\"); };
}
});});

style.css

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the \"next button\" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

.answers li {
list-style: upper-alpha;
}

label {
margin-left: 0.5em;
cursor: pointer;
}

#results {
background: #dddada;
color: 000000;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#results:hover {
background: #3d91b8;
color: #ffffff;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#categorylist {
margin-top: 6px;
display: none;
}

#category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
display: none;
}

#closing {
display: none;
font-style: italic;
}

functions.js

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}