•Create a folder named Project in your All_102Submissions folder to contain all

ID: 3940181 • Letter: #

Question

•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)

Explanation / Answer

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>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"> //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">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="c.jpg">
<div class="text">Caption Three</div>
</div>

</div>
<br>

<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></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);
}

Navigate

•Create a file that has the following numbers: 10, 90, 30, 70, 40, 80, 100. •Wri

•Create a revised version of the Microsoft Word document that identifies the req

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

•Create a folder named Project in your All_102Submissions folder to contain all

Question

Explanation / Answer

Related Questions

Navigate