Quiz App in Javascript:
In this tutorial you will learn HTML, CSS, BootStrap and Java library -Jquery. This is fun way to learn these topics by making app.You will learn how to use show, hide and toggle function by making cool app. Video and Source code are included so make and show to world.
Video:
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application</title>
<style>
#container{
height: 500px;
width: 500px;
background-color: dodgerblue;
margin-left: 20px;
text-align: center;
border: 2px solid black;
color: white;
}
p{
color:yellow;
}
</style>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
</head>
<body>
<div id ="container">
<h1> Quiz App</h1>
<h3>1. Tallest Mountin in the world?</h3>
<p>Mount Averest</p>
<h3>2. Deepest ocean the world?</h3>
<p>Pacefic</p>
<h3>3. Longest River in the world?</h3>
<p>Nile</p>
<!-- <button id ="hid"class="btn btn-danger">Hide</button>
<button id ="sho"class="btn btn-warning">Show</button> -->
<button id ="tog"class="btn btn-dark">Hide|Show</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// $("#hid").click(function(){
// $("p").hide();
// })
// $("#sho").click(function(){
// $("p").show();
// })
$("#tog").click(function(){
$("p").toggle();
})
})
</script>
</body>
</html>
