Department of Computer Science
Course Title: Web Technologies Course CSC-251 Credit 3(2-
Course Instructor: Muhammad Adeel Afzal Code:
Program Name: Hours:
BSCS 3)
Semester: 4th Batch: Section: Date:
Time Allowed: 1.30 Hours Maximum Marks: 20
Student’s Name: Reg. No.
Important Instructions / Guidelines:
Read the question paper carefully and answer the questions according to their statements.
Mobile phones are not allowed. Calculators must not have any data/equations etc. in their memory.
Final-Term Examination Spring 2025
Question No. Course Learning Cognitive Graduate Attributes Marks
Outcomes(CLOs) (Bloom’s (GAs) /Student
Taxonomy) Outcomes(SOs)
Q1 CLO1 Understand GA/SO -2,3,4,5 6
Q2 CLO2 Apply GA/SO -3,4,5,6 6
Q3 CLO2 Apply GA/SO -4,5,6,7 8
Total Marks 20
Solutions
Q1 (CLO1 – Understand): Short Answers (any 6×2=12)
1) Difference between id and class in CSS:
• id – Unique identifier, used once per page. Selected with #idName in CSS.
• class – Can be applied to multiple elements. Selected with .className in CSS.
2) Code in which textbox not empty (JavaScript validation):
<input type="text" id="myText" />
<button onclick="check()">Submit</button>
<script>
function check() {
let v = [Link]("myText").value;
if(v === "") alert("Textbox is empty!");
else alert("Value: " + v);
}
</script>
3) Basic concept of rows and columns in Bootstrap:
• A row is a horizontal group of columns.
• A container contains rows, and rows contain columns.
• Bootstrap grid system uses 12 columns.
Example:
<div class="container">
<div class="row">
<div class="col-6">Half</div>
<div class="col-6">Half</div>
</div>
</div>
4) Bootstrap code for all screens for 4 boxes:
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">Box1</div>
<div class="col-12 col-sm-6 col-md-3">Box2</div>
<div class="col-12 col-sm-6 col-md-3">Box3</div>
<div class="col-12 col-sm-6 col-md-3">Box4</div>
</div>
</div>
5) JavaScript function addition of 3 numbers:
function addThree(a,b,c) {
return a+b+c;
}
[Link](addThree(2,4,6));
6) isNaN function in JavaScript:
• Checks if a value is Not a Number.
Example: isNaN('abc') → true; isNaN(123) → false.
7) Use of [Link]():
• Prints debugging/output messages to browser console.
Example: [Link]('Hello');
8) Syntax to connect MySQL with PHP:
<?php
$conn = mysqli_connect('localhost','username','password','dbname');
if(!$conn){ die('Connection failed: '.mysqli_connect_error()); }
?>
9) What does $_POST represent in PHP:
• A superglobal array that collects form data sent with POST method.
10) DOM in JavaScript:
• Document Object Model – tree structure of HTML/XML documents. Allows scripts to
access and update content, style, and structure.
Q2 (CLO2 – Apply): Long Question (any 2×4=8)
1) HTML form with inputs:
<form>
Name: <input type="text" name="name"><br/>
Gender:
<input type="radio" name="g" value="M">Male
<input type="radio" name="g" value="F">Female<br/>
Interests:
<input type="checkbox" name="c1">Sports
<input type="checkbox" name="c2">Reading<br/>
DOB:
<select><option>Day</option></select>
<select><option>Month</option></select>
<select><option>Year</option></select><br/>
<input type="submit" value="Submit"/>
</form>
2) Difference between == and === in JS:
== checks value equality after type coercion.
=== checks value and type (strict).
Example: '5' == 5 → true, '5' === 5 → false.
3) Switch case using 5 math functions:
let choice = 'sqrt'; let val = 16;
switch(choice) {
case 'sqrt': [Link]([Link](val)); break;
case 'pow': [Link]([Link](val,2)); break;
case 'round': [Link]([Link](4.7)); break;
case 'ceil': [Link]([Link](4.2)); break;
case 'floor': [Link]([Link](4.9)); break;
default: [Link]('Invalid');
}
4) CSS multi dropdown menu:
<ul class="menu">
<li>Menu 1
<ul class="submenu">
<li>Sub1</li><li>Sub2</li>
</ul>
</li>
<li>Menu 2</li>
</ul>
<style>
.menu, .submenu { list-style:none; padding:0; margin:0; }
.menu li { position:relative; display:inline-block; padding:10px; background:#ddd; }
.submenu { display:none; position:absolute; top:100%; left:0; background:#eee; }
.menu li:hover > .submenu { display:block; }
</style>
