CSS Model Answer Practise Test 3 by Rit 6 Marks Question
CSS Model Answer Practise Test 3 by Rit 6 Marks Question
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>
toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
const childMenu = this.nextElementSibling;
if (childMenu) {
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>
<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."
};
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'
];
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>