Scribd
Upload
27 views

CSS Model Answer Practise Test 3 by Rit 6 Marks Question

css answers

Uploaded by

riteshdebadwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

CSS Model Answer Practise Test 3 by Rit 6 Marks Question

css answers

Uploaded by

riteshdebadwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS Model Answer Practise test 3

6 marks Questions And Answers

Q.1) Write a JavaScript to create a pull – down menu with three options
[Google,MSBTE, Yahoo] once the user will select one of the options then user
will be
redirected to that site.

Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pull-Down Menu</title>
</head>
<body>
<h1>Select a Website</h1>
<select id="websiteSelect" onchange="redirectToWebsite()">
<option value="">--Select a website--</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
<script>
function redirectToWebsite() {
const selectElement = document.getElementById("websiteSelect");
const selectedValue = selectElement.value;

if (selectedValue) {
window.location.href = selectedValue;
}
}
</script>
</body>
</html>

Q.2) Write a JavaScript for the folding tree menu.


Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folding Tree Menu</title>
</head>
<body>
<h1>Folding Tree Menu</h1>
<ul id="treeMenu">
<li>
<span class="toggle">+</span> Parent 1
<ul class="child">
<li>
<span class="toggle">+</span> Child 1.1
<ul class="child">
<li>Grandchild 1.1.1</li>
<li>Grandchild 1.1.2</li>
</ul>
</li>
<li>Child 1.2</li>
</ul>
</li>
<li>
<span class="toggle">+</span> Parent 2
<ul class="child">
<li>Child 2.1</li>
<li>
<span class="toggle">+</span> Child 2.2
<ul class="child">
<li>Grandchild 2.2.1</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>

const toggles = document.querySelectorAll('.toggle');

toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
const childMenu = this.nextElementSibling;

if (childMenu) {

if (childMenu.style.display === "block") {


childMenu.style.display = "none";
this.textContent = "+";
} else {
childMenu.style.display = "block";
this.textContent = "-";
}
}
});
});
</script>
</body>
</html>

Q.3) Write a JavaScript program to create rollover effect for three images.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rollover Effect</title>
</head>
<body>
<h1>Image Rollover Effect</h1>
<script>
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');
const image3 = document.getElementById('image3');

image1.addEventListener('mouseover', function() {
this.src = 'image1_hover.jpg';
});
image1.addEventListener('mouseout', function() {
this.src = 'image1.jpg';
});

image2.addEventListener('mouseover', function() {
this.src = 'image2_hover.jpg';
});
image2.addEventListener('mouseout', function() {
this.src = 'image2.jpg';
});

image3.addEventListener('mouseover', function() {
this.src = 'image3_hover.jpg';
});
image3.addEventListener('mouseout', function() {
this.src = 'image3.jpg';
});
</script>
</body>
</html>

Q.3) write a java script in which when user rollover the name of fruit,the
corresponding image should be display along with the appropriatote image
display, additional window should pop up display ing the benefit of each
fruit.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Rollover Effect</title>
</head>
<body>
<h1>Fruit Rollover Effect</h1>
<div>
<h2 id="fruitName">Hover over a fruit name:</h2>
<ul>
<li onmouseover="showImage('apple')"
onmouseout="hideImage()">Apple</li>
<li onmouseover="showImage('banana')"
onmouseout="hideImage()">Banana</li>
<li onmouseover="showImage('orange')"
onmouseout="hideImage()">Orange</li>
</ul>
</div>

<img id="fruitImage" src="" alt="Fruit Image" width="200" height="150"


style="display: none;">

<script>
// Function to display the corresponding fruit image
function showImage(fruit) {
const img = document.getElementById('fruitImage');
const benefits = {
apple: "Apples are rich in fiber and vitamin C. They can help lower
cholesterol levels and promote heart health.",
banana: "Bananas are a good source of potassium and vitamin B6.
They provide quick energy and are good for heart health.",
orange: "Oranges are an excellent source of vitamin C. They boost
the immune system and improve skin health."
};

img.src = fruit + '.jpg'; // Set the image source


img.style.display = 'block'; // Show the image

// Pop up displaying the benefits of the fruit


alert(benefits[fruit]);
}

function hideImage() {
const img = document.getElementById('fruitImage');
img.style.display = 'none'; // Hide the image
}
</script>
</body>
</html>

Q.4) Develop a JavaScript Program to Create Rotating Banner Ads with URL
Links.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Banner Ads</title>
</head>
<body>
<h1>Rotating Banner Ads</h1>
<div id="banner">
<a id="bannerLink" href="#" target="_blank">
<img id="bannerImg" src="banner1.jpg" alt="Banner 1"
style="width:600px; height:300px;">
</a>
</div>

<script>
const bannerImg = document.getElementById('bannerImg');
const bannerLink = document.getElementById('bannerLink');
let currentIndex = 0;

const banners = [
{
src: 'banner1.jpg',
link: 'https://www.example.com/link1'
},
{
src: 'banner2.jpg',
link: 'https://www.example.com/link2'
},
{
src: 'banner3.jpg',
link: 'https://www.example.com/link3'
}
];

function showNextBanner() {
currentIndex = (currentIndex + 1) % banners.length;

bannerImg.src = banners[currentIndex].src;
bannerLink.href = banners[currentIndex].link;
}

setInterval(showNextBanner, 3000);

bannerLink.href = banners[currentIndex].link;
</script>
</body>
</html>

Q.5) Create a slideshow with the group of four images, also simulate the next
and previous transition between slides in your JavaScript.
Ans:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slideshow</title>
</head>
<body>
<h1>Image Slideshow</h1>
<div id="slideshow">
<img id="slideImage" src="image1.jpg" alt="Slide 1" style="width:600px;
height:400px;">
</div>
<br>
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

<script>
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg'
];

let currentIndex = 0; // To keep track of the current slide

function displaySlide() {
const slideImage = document.getElementById('slideImage');
slideImage.src = images[currentIndex]; // Update the image source
}
function nextSlide() {
currentIndex = (currentIndex + 1) % images.length; // Cycle through
the images
displaySlide();
}

function previousSlide() {
currentIndex = (currentIndex - 1 + images.length) % images.length; //
Cycle backwards
displaySlide();
}

displaySlide();
</script>
</body>
</html>

You might also like