***************************************************************************************
B3)Create a HTML page make a quiz game where user should answer one question at atime, answers
must be shown in radio buttons. Without submitting the answer, quizshould not move to next question
(Minimum five questions must be there). When user wishes to get score (using score button) score
should be displayed in alert message. All the question must be loaded in same page (no page
navigation isallowed) Sample screen shot:
***************************************************************************************
Quiz.html
<html>
<head>
<style>
body
{
background-color: gray;
margin: 40;
}
.outerlayer
{
background-color: white;
border-radius: 10px;
width: 400px;
height:400px;
margin:100;
}
.quiz-header
{
text-align:center;
1
}
button:hover
{
background-color: green;
}
button
{
background-color:purple;
display: block;
width: 100%;
padding: 1rem;
}
</style>
<title> quiz</title>
</head>
<body>
<div class="outerlayer" id="quiz">
<div class="quiz-header">
<h2 id="question">Question Text</h2></div>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">Answer</label>
<br>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">Answer</label>
<br>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">Answer</label>
<br>
<input type="radio" name="answer" id="d" class="answer">
<label for="d" id="d_text">Answer</label>
<br>
<br>
<br>
<button id="submit">Submit</button><br>
<button type="button" id="but">Score</button>
</div>
2
<script src="script.js"></script>
</body>
</html>
**********************************************************************************
File name: script.js
const questions = [
{
q: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "javascript",
correct: "d",
},
{
q: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b",
},
{
q: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a",
},
{
q: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b",
},
q: "What does SVG stands for?",
a: "Scalable Vector Graphics",
3
b: "Scale vector graph",
c: "scan vector graph",
d: "none of the above",
correct: "a",
},
];
const ans = document.querySelectorAll('.answer')
const que = document.getElementById('question')
const subbt = document.getElementById('submit')
const scbt = document.getElementById('but')
let start=0;
let score=0;
loadquiz()
function loadquiz()
{
deselectAnswers()
const currentQuizData = questions[start]
que.innerText = currentQuizData.q
a_text.innerText = currentQuizData.a
b_text.innerText = currentQuizData.b
c_text.innerText = currentQuizData.c
d_text.innerText = currentQuizData.d
}
function deselectAnswers() {
ans.forEach(ans => ans.checked = false)
}
function getSelected() {
let res
ans.forEach(ans => {
if(ans.checked) {
res = ans.id
}
})
return res
}
subbt.addEventListener('click', () => {
const ans = getSelected()
if(ans)
{
4
if(ans === questions[start].correct)
{
score++
}
start++
if(start < questions.length)
{
loadquiz()
}
}
})
scbt.addEventListener('click', () => {
alert("Your score is="+score);
})
5
B4)Create a web page using HTML/CSS which contains cards (shown as a stack of cards)
with image of a tourist place and below that is a thumbnail (shown in circle with image).
When mouse hovers over thumbnail, corresponding card comes in front and also small
description about the tourist place will be displayed. Use ONLY CSS animation and
transition. (Java script should not be used to animate.) Initial interface:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tourist Places 2</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #5a89ee;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card img {
width: 100%;
height: 100%;
border-radius: 15px;
object-fit: cover;
}
.card {
width: 300px;
6
height: 400px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
transition: transform 0.5s, z-index 0s 0.5s;
/* Add z-index transition */
margin-right: -100px;
padding: 2px;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
z-index: 999;
/* Higher z-index on hover */
}
.description::after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 14px 10px 0 10px;
border-color: #ececec transparent transparent transparent;
}
.description {
height: 80px;
width: 240px;
text-align: center;
opacity: 1;
transition: opacity 0.5s;
position: absolute;
z-index: -1;
bottom: 0;
left: 13px;
right: 0;
background-color: rgb(223, 220, 220);
color: #020202;
padding: 10px;
border-radius: 10px;
}
/* Adjust the opacity transition to match the z-index transition */
.card:hover .description {
opacity: 1;
z-index: 999;
transition: opacity 0.5s, z-index 0s;
/* Add z-index transition */
7
}
.thumbnail {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
transition: border-color 0.5s;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.thumbnail:hover {
border-color: #007bff;
}
p{
color: #007bff;
}
.description {
height: 80px;
width: 240px;
text-align: center;
opacity: 1;
transition: opacity 0.5s;
position: absolute;
z-index: -1;
bottom: 0;
left: 13px;
right: 0;
background-color: rgb(223, 220, 220);
color: #020202;
padding: 10px;
border-radius: 10px;
}
/* added code for sharp arrow */
.description::after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
width: 0;
8
height: 0;
border-style: solid;
border-width: 14px 10px 0 10px;
border-color: #ececec transparent transparent transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="AGRA.jpg" alt="AGRA">
<div class="thumbnail">
<img src="AGRA.jpg" alt="AGRA">
</div>
<div class="description">
<h3>AGRA</h3>
<p>
Located on the banks of River Yamuna in Uttar Pradesh
</p>
</div>
</div>
<div class="card">
<img src="SRINAGAR.jpg" alt="SRINAGAR">
<div class="thumbnail">
<img src="SRINAGAR.jpg" alt="SRINAGAR">
</div>
<div class="description">
<h3>SHRINAGAR</h3>
<p>Famously known as 'Heaven on Earth, Srinagar</p>
</div>
</div>
<div class="card">
<img src="LADAKH.jpg" alt="LADAKH">
<div class="thumbnail">
<img src="LADAKH.jpg" alt="LADAKH">
</div>
<div class="description">
<h3>LADAKH</h3>
<p>Ladakh is a union territory in the Kashmir region of India.
</p>
</div>
</div>
<div class="card">
<img src="DARJEELING.jpg" alt="DARJEELING">
<div class="thumbnail">
<img src="DARJEELING.jpg" alt="DARJEELING">
</div>
<div class="description">
<h3>DARJEELING</h3>
9
<p>Darjeeling, the former summer capital of India under the British Raj.
</p>
</div>
</div>
<div class="card">
<img src="GULMARG.jpg" alt="GULMARG">
<div class="thumbnail">
<img src="GULMARG.jpg" alt="GULMARG">
</div>
<div class="description">
<h3>GULMARG</h3>
<p>
Situated at an altitude of 2730 m above sea level, Gulmarg.
</p>
</div>
</div>
</div>
</body>
</html>
10
11
