Aim: To Study HTML and CSS and create website using them.

Theory:
HTML-
The Hyper Text Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of
a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects such as interactive forms may be
embedded into the rendered page.
HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and other
items. HTML elements are delineated by tags, written using angle brackets.

Tags such as <img /> and <input /> directly introduce content into the page. Other tags
such as <p> surround and provide information about document text and may include
other tags as sub-elements.
Browsers do not display the HTML tags but use them to interpret the content of the page.
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting
in 1989. It stands for Hyper Text Markup Language.
Hypertext means that the document contains links that allow the reader to jump to
other places in the document or to another document altogether. The latest version is
known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is
processed and presented. To do this HTML uses two things: tags and attributes.

CSS-
CSS is used to control the style of a web document in a simple and easy way.
CSS is the acronym for "Cascading Style Sheet".
Why to Learn CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended
to simplify the process of making web pages presentable.
CSS is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down
some of the key advantages of learning CSS:
 Create Stunning Web site - CSS handles the look and feel part of a web
page. Using CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs,variations in display
for different devices and screen sizes as well as a variety of other effects.
 Become a web designer - If you want to start a carrer as a professional
web designer, HTML and CSS designing is a must skill.
 Control web - CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML document. Most
commonly, CSS is combined with the markup languages HTML or
XHTML.
 Learn other languages - Once you understands the basic of HTML and
CSS then other related technologies like javascript, php, or angular are
become easier to understand.

Applications of CSS-
As mentioned before, CSS is one of the most widely used style language over the web.
I'm going to list few of them here:
 CSS saves time - You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style,
and all elements in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and
it is being recommended to use CSS. So its a good idea to start using CSS
in all the HTML pages to make them compatible to future browsers.
Code:
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>Javascript Quiz</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-
alpha.6/css/bootstrap.min.css">
</head>
<body>
<header class="header bg-primary">
<div class="left-title">JS Quiz</div>
<div class="right-title">Total Questions: <span
id="tque"></span></div>
<div class="clearfix"></div>
</header>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result" class="quiz-body">
<form name="quizForm" onSubmit="">
<fieldset class="form-group">
<h4><span id="qid">1.</span> <span id="question"></span></h4>
<div class="option-block-container" id="question-options">
</div> <!-- End of option block -->
</fieldset>
<button name="previous" id="previous" class="btn btn-
success">Previous</button>
&nbsp;
<button name="next" id="next" class="btn btn-
success">Next</button>
</form>
</div>
 </div> <!-- End of col-sm-12 -->
</div> <!-- End of row -->
</div> <!-- ENd of container fluid -->
</div> <!-- End of content -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></
script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>

CSS:

.content {
margin-top: 54px;
}
.header {
padding: 15px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.left-title {
width: 80px;
color: #fff;
font-size: 18px;
float: left;
}
.right-title {
width: 150px;
text-align: right;
float: right;
color: #fff;
}
.quiz-body {
margin-top: 15px;
padding-bottom: 50px;
}
 .option-block-container {
margin-top: 20px;
max-width: 420px;
}
.option-block {
padding: 10px;
background: aliceblue;
border: 1px solid #84c5fe;
margin-bottom: 10px;
cursor: pointer;
}
.result-question {
font-weight: bold;
}
.c-wrong {
margin-left: 20px;
color: #ff0000;
}
.c-correct {
margin-left: 20px;
color: green;
}
.last-row {
border-bottom: 1px solid #ccc;
padding-bottom: 25px;
margin-bottom: 25px;
}
.res-header {
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
padding-bottom: 15px;
}

Javascript:

/* Created and coded by Abhilash Narayan */

/* Quiz source: w3schools.com */
var quiz = {
"JS": [
{
 "id": 1,
"question": "Inside which HTML element do we put the JavaScript?",
"options": [
{
"a": "&lt;script&gt;",
"b": "&lt;javascript&gt;",
"c": "&lt;scripting&gt;",
"d": "&lt;js&gt;"
}
],
"answer": "&lt;script&gt;",
"score": 0,
"status": ""
},
{
"id": 2,
"question": "Where is the correct place to insert a JavaScript?",
"options": [
{
"a": "The &lt;head&gt; section",
"b": "The &lt;body&gt; section",
"c": "Both the &lt;head&gt; section and the &lt;body&gt;
section are correct"
}
],
"answer": "Both the &lt;head&gt; section and the &lt;body&gt;
section are correct",
"score": 0,
"status": ""
},
{
"id": 3,
"question": "What is the correct syntax for referring to an
external script called 'xxx.js'?",
"options": [
{
"a": "&ltscript href=&quot;xxx.js&quot;>",
"b": "&lt;script name=&quot;xxx.js&quot;&gt;",
"c": "&lt;script src=&quot;xxx.js&quot;&gt;"
}
],
"answer": "&lt;script src=&quot;xxx.js&quot;&gt;",
"score": 0,
 "status": ""
},
{
"id": 4,
"question": "The external JavaScript file must contain the
&lt;script&gt; tag.",
"options": [
{
"a": "True",
"b": "False"
}
],
"answer": "False",
"score": 0,
"status": ""
},
{
"id": 5,
"question": "How do you write &quot;Hello World&quot; in an alert
box?",
"options": [
{
"a": "alertBox(&quot;Hello World&quot;);",
"b": "msg(&quot;Hello World&quot;);",
"c": "alert(&quot;Hello World&quot;);",
"d": "msgBox(&quot;Hello World&quot;);",
}
],
"answer": "alert(&quot;Hello World&quot;);",
"score": 0,
"status": ""
},
{
"id": 6,
"question": "How do you create a function in JavaScript?",
"options": [
{
"a": "function myFunction()",
"b": "function:myFunction()",
"c": "function = myFunction()",
}
],
"answer": "function myFunction()",
 "score": 0,
"status": ""
},
{
"id": 7,
"question": "How do you call a function named
&quot;myFunction&quot;?",
"options": [
{
"a": "call function myFunction()",
"b": "call myFunction()",
"c": "myFunction()",
}
],
"answer": "myFunction()",
"score": 0,
"status": ""
},
{
"id": 8,
"question": "How to write an IF statement in JavaScript?",
"options": [
{
"a": "if i = 5 then",
"b": "if i == 5 then",
"c": "if (i == 5)",
"d": " if i = 5",
}
],
"answer": "if (i == 5)",
"score": 0,
"status": ""
},
{
"id": 9,
"question": "Which of the following is a disadvantage of using
JavaScript?",
"options": [
{
"a": "Client-side JavaScript does not allow the reading or
writing of files.",
"b": "JavaScript can not be used for Networking applications
because there is no such support available.",
 "c": "JavaScript doesn't have any multithreading or
multiprocess capabilities.",
"d": "All of the above."
}
],
"answer": "All of the above.",
"score": 0,
"status": ""
},
{
"id": 10,
"question": "How to write an IF statement for executing some code
if &quot;i&quot; is NOT equal to 5?",
"options": [
{
"a": "if (i <> 5)",
"b": "if i <> 5",
"c": "if (i != 5)",
"d": "if i =! 5 then",
}
],
"answer": "if (i != 5)",
"score": 0,
"status": ""
},
{
"id": 11,
"question": "How does a WHILE loop start?",
"options": [
{
"a": "while i = 1 to 10",
"b": "while (i &lt;= 10; i++)",
"c": "while (i &lt;= 10)"
}
],
"answer": "while (i &lt;= 10)",
"score": 0,
"status": ""
},
{
"id": 12,
"question": "How does a FOR loop start?",
"options": [
 {
"a": "for (i = 0; i &lt;= 5)",
"b": "for (i = 0; i &lt;= 5; i++)",
"c": "for i = 1 to 5",
"d": "for (i &lt;= 5; i++)"
}
],
"answer": "for (i = 0; i &lt;= 5; i++)",
"score": 0,
"status": ""
},
{
"id": 13,
"question": "How can you add a comment in a JavaScript?",
"options": [
{
"a": "//This is a comment",
"b": "&sbquo;This is a comment",
"c": "&lt;!--This is a comment--&gt;"
}
],
"answer": "//This is a comment",
"score": 0,
"status": ""
},
{
"id": 14,
"question": "How to insert a comment that has more than one line?",
"options": [
{
"a": "/*This comment has more than one line*/",
"b": "//This comment has more than one line//",
"c": "&lt;!--This comment has more than one line--&gt;"
}
],
"answer": "/*This comment has more than one line*/",
"score": 0,
"status": ""
},
{
"id": 15,
"question": "What is the correct way to write a JavaScript array?",
"options": [
 {
"a": "var colors = (1:&quot;red&quot;, 2:&quot;green&quot;,
3:&quot;blue&quot;)",
"b": "var colors = [&quot;red&quot;, &quot;green&quot;,
&quot;blue&quot;]",
"c": "var colors = 1 = (&quot;red&quot;), 2 =
(&quot;green&quot;), 3 = (&quot;blue&quot;)",
"d": "var colors = &quot;red&quot;, &quot;green&quot;,
&quot;blue&quot;"
}
],
"answer": "var colors = [&quot;red&quot;, &quot;green&quot;,
&quot;blue&quot;]",
"score": 0,
"status": ""
},
{
"id": 16,
"question": "How do you round the number 7.25, to the nearest
integer?",
"options": [
{
"a": "rnd(7.25)",
"b": "Math.round(7.25)",
"c": "Math.rnd(7.25)",
"d": "round(7.25)"
}
],
"answer": "Math.round(7.25)",
"score": 0,
"status": ""
},
{
"id": 17,
"question": "How do you find the number with the highest value of x
and y?",
"options": [
{
"a": "Math.max(x, y)",
"b": "Math.ceil(x, y)",
"c": "top(x, y)",
"d": "ceil(x, y)"
}
 ],
"answer": "Math.max(x, y)",
"score": 0,
"status": ""
},
{
"id": 18,
"question": "What is the correct JavaScript syntax for opening a
new window called &quot;w2&quot;?",
"options": [
{
"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);",
"b": "w2 = window.open(&quot;http://www.w3schools.com&quot;);"
}
],
"answer": "w2 =
window.open(&quot;http://www.w3schools.com&quot;);",
"score": 0,
"status": ""
},
{
"id": 19,
"question": "JavaScript is the same as Java.",
"options": [
{
"a": "true",
"b": "false"
}
],
"answer": "false",
"score": 0,
"status": ""
},
{
"id": 20,
"question": "How can you detect the client&rsquo;s browser name?",
"options": [
{
"a": "navigator.appName",
"b": "browser.name",
"c": "client.navName"
}
],
 "answer": "navigator.appName",
"score": 0,
"status": ""
},
{
"id": 21,
"question": "Which event occurs when the user clicks on an HTML
element?",
"options": [
{
"a": "onchange",
"b": "onclick",
"c": "onmouseclick",
"d": "onmouseover"
}
],
"answer": "onclick",
"score": 0,
"status": ""
},
{
"id": 22,
"question": "How do you declare a JavaScript variable?",
"options": [
{
"a": "var carName;",
"b": "variable carName;",
"c": "v carName;"
}
],
"answer": "var carName;",
"score": 0,
"status": ""
},
{
"id": 23,
"question": "Which operator is used to assign a value to a
variable?",
"options": [
{
"a": "*",
"b": "-",
"c": "=",
 "d": "x"
}
],
"answer": "=",
"score": 0,
"status": ""
},
{
"id": 24,
"question": "What will the following code return: Boolean(10 &gt;
9)",
"options": [
{
"a": "NaN",
"b": "false",
"c": "true"
}
],
"answer": "true",
"score": 0,
"status": ""
},
{
"id": 25,
"question": "Is JavaScript case-sensitive?",
"options": [
{
"a": "No",
"b": "Yes"
}
],
"answer": "Yes",
"score": 0,
"status": ""
}
]
}
var quizApp = function () {
this.score = 0;
this.qno = 1;
this.currentque = 0;
var totalque = quiz.JS.length;
this.displayQuiz = function (cque) {
 this.currentque = cque;
if (this.currentque < totalque) {
$("#tque").html(totalque);
$("#previous").attr("disabled", false);
$("#next").attr("disabled", false);
$("#qid").html(quiz.JS[this.currentque].id + '.');
$("#question").html(quiz.JS[this.currentque].question);
$("#question-options").html("");
for (var key in quiz.JS[this.currentque].options[0]) {
if (quiz.JS[this.currentque].options[0].hasOwnProperty(key)) {
$("#question-options").append(
"<div class='form-check option-block'>" +
"<label class='form-check-label'>" +
"<input type='radio' class='form-check-input' name='option'
id='q" + key + "' value='" + quiz.JS[this.currentque].options[0][key] +
"'><span id='optionval'>" +
quiz.JS[this.currentque].options[0][key] +
"</span></label>"
);
}
}
}
if (this.currentque <= 0) {
$("#previous").attr("disabled", true);
}
if (this.currentque >= totalque) {
$('#next').attr('disabled', true);
for (var i = 0; i < totalque; i++) {
this.score = this.score + quiz.JS[i].score;
}
return this.showResult(this.score);
}
}
this.showResult = function (scr) {
$("#result").addClass('result');
$("#result").html("<h1 class='res-header'>Total Score: &nbsp;" + scr
+ '/' + totalque + "</h1>");
for (var j = 0; j < totalque; j++) {
var res;
if (quiz.JS[j].score == 0) {
res = '<span class="wrong">' + quiz.JS[j].score + '</span><i
class="fa fa-remove c-wrong"></i>';
} else {
 res = '<span class="correct">' + quiz.JS[j].score + '</span><i
class="fa fa-check c-correct"></i>';
}
$("#result").append(
'<div class="result-question"><span>Q ' + quiz.JS[j].id +
'</span> &nbsp;' + quiz.JS[j].question + '</div>' +
'<div><b>Correct answer:</b> &nbsp;' + quiz.JS[j].answer +
'</div>' +
'<div class="last-row"><b>Score:</b> &nbsp;' + res +
'</div>'
);
}
}
this.checkAnswer = function (option) {
var answer = quiz.JS[this.currentque].answer;
option = option.replace(/</g, "&lt;") //for <
option = option.replace(/>/g, "&gt;") //for >
option = option.replace(/"/g, "&quot;")
if (option == quiz.JS[this.currentque].answer) {
if (quiz.JS[this.currentque].score == "") {
quiz.JS[this.currentque].score = 1;
quiz.JS[this.currentque].status = "correct";
}
} else {
quiz.JS[this.currentque].status = "wrong";
}
}
this.changeQuestion = function (cque) {
this.currentque = this.currentque + cque;
this.displayQuiz(this.currentque);
}
}
var jsq = new quizApp();
var selectedopt;
$(document).ready(function () {
jsq.displayQuiz(0);
$('#question-options').on('change', 'input[type=radio][name=option]',
function (e) {
//var radio = $(this).find('input:radio');
$(this).prop("checked", true);
selectedopt = $(this).val();
});
});
 $('#next').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(1);
});
$('#previous').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(-1);
});

Output: