📝 Test – HTML, CSS & JavaScript
Part A – MCQ (10 Questions)
1. Which tag is used to define an internal stylesheet in HTML?
a) <style>
b) <link>
c) <script>
d) <css>
ANS--- a) <style>
2. Which attribute in <input> is used to make a field mandatory?
a) required
b) validate
c) must
d) check
ANS--- a) required
3. Which of the following is NOT a CSS unit?
a) em
b) px
c) vw
d) ptp
ANS--- d) ptp
4. In CSS, position: absolute; is positioned relative to:
a) The document body
b) The nearest positioned ancestor
c) Always the top left corner
d) None
ANS---
5. Which of these creates a JavaScript array?
a) var arr = ();
b) var arr = [];
c) var arr = {};
d) var arr = <>;
ANS--- var arr = [];
6. Which method converts JSON string to JavaScript object?
a) JSON.parse()
b) JSON.stringify()
c) parse.JSON()
d) stringify.JSON()
ANS--- a) JSON.parse()
7. What will be the output?
js
console.log(2 + "2");
a) 22
b) 4
c) NaN
d) Error
ANS--- a) 22
8. Which HTML5 element is semantic?
a) <div>
b) <header>
c) <span>
d) <b>
ANS--- b) <header>
9. Which CSS property is used for text shadow?
a) textoutline
b) textshadow
c) fontshadow
d) boxshadow
ANS--- b) textshadow
10. In JavaScript, const variable:
a) Can’t be redeclared but can be reassigned
b) Can’t be reassigned but can be redeclared
c) Can’t be redeclared and can’t be reassigned
d) Always mutable
ANS--- c) Can’t be redeclared and can’t be reassigned
Part B – Medium Practical (10 Questions)
1. Create a simple HTML page with a form that has Name, Email, and Submit button.
form>
<h2>Contact Us</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
2. Create a table with 3 rows and 3 columns and add a border using CSS.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</table>
3. Create a navigation bar using <ul><li> styled with CSS (horizontal).
<nav>
<ul>
<li>Home</a></li>
<li>About</a></li>
<li>Contact</a></li>
</ul>
</nav>
4. Write CSS to make an image appear as a circle.
<img src ="url">
<style>
img{
border-radius: 50%;
}
</style>
5. Write JS code to print numbers from 1 to 20 using a loop.
for(let i =1;i<=20;i++){
console.log(i);
}
6. Write JS code that takes an array [1,2,3,4,5] and prints the sum.
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log("Sum:", sum);
7. Create a button that changes the background color when clicked (JS).
<body>
<button onclick="fun()" id="button">click me</button>
<script>
function fun(){
let color = document.getElementById("button");
color.style.backgroundColor="red";
}
</script>
8. Create a CSS hover effect on a button (background color should change).
<style>
#button:hover{
background-color: red;
}
</style>
<body>
<button id="button">click me</button>
</body>
9. Write JS function to check if a number is even or odd.
function checkEvenOdd(number) {
if (number % 2 == 0) {
console.log(number + " is even");
} else {
console.log(number + " is odd");
}
}
10. Create a paragraph and change its text color with JS on button click.
<body>
<p id="myPara">This is a paragraph.</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const para = document.getElementById("myPara");
para.style.color = "blue";
}
</script>
</body>
Part C – Hard (5 Questions)
1. Write JS function to reverse a string without using .reverse().
function reverseString(str) {
let reversed = "";
for (let i = str.length - 1; i >= 0; i--) {
reversed += str[i];
}
return reversed;
}
2. Create a form validation (name required, email format check).
<body>
<form action="">
<label for="">Enter your name </label>
<input type="text" id="name" name="name" >
<span id="nameAlert"></span><br> <br>
<label for="">Enter your email </label>
<input type="email" id="email" name="name" > <span id="emailAlert"></span>
<br> <br>
<label for="">Enter your Password </label>
<input type="password" id="password" name="name" > <span
id="passwordAlert"></span> <br> <br>
<label for="">Enter your address </label>
<textarea id="address" name="address" ></textarea> <br> <br>
<input type="submit" onclick=" return formValidation()">
</form>
<script>
function formValidation(){
let name = document.querySelector('#name').value;
let email = document.querySelector('#email').value;
let password = document.querySelector('#password').value;
let nameAlert = document.querySelector('#nameAlert')
let emailAlert = document.querySelector('#emailAlert')
let passwordAlert = document.querySelector('#passwordAlert');
nameAlert.innerHTML =""
emailAlert.innerHTML =""
passwordAlert.innerHTML =""
if(name.trim() === ""){
nameAlert.innerHTML ="Name can't be Empty "
nameAlert.style.color="red"
return false
}
else if(email.trim() === ""){
emailAlert.innerHTML ="Email can't be Empty "
emailAlert.style.color="red"
return false
}
else if(password.trim() === "" || password.length < 5){
passwordAlert.innerHTML ="Password must be at least 5 characters"
passwordAlert.style.color="red"
return false
}
return true
}
</script>
</body>
3. Write JS program to find the largest number in an array [10, 20, 35, 7, 99, 55].
4. Create a digital clock in JS (autoupdates every second).
5. Create a small JS program where user enters a number, and program prints
Fibonacci series till that number.
