Important Questions

CSC329 · Exam intelligence

Web Technology important questions

From 6 past TU papers: which questions keep coming back, how much they carry, and what is most likely to show up next. Every question links to a model answer.

Most likely in the next examStatistical

Ranked by how often a topic is asked, its marks weight, and whether it is due after skipping the 2082 paper. No guarantees; study the whole syllabus.

1asked 4xavg 10 marks · due (skipped 2082) · Event Handling and Form Validation
Answer

Create an HTML file containing form with textbox, select and radio button. Now write a javascript function for validating the form elements. Validate textbox for required, select field should have some value selected and radio button should be checked.[10]

--- - The <form tag uses the onsubmit event handler to call validateForm(). - Returning false from the function prevents form submission if validation fails. - Checks that the textbox is not empty (required field). - The default option h...

2asked 3xavg 7 marks · due (skipped 2082) · Inserting CSS
Answer

How internal and external CSS differ from each other. Illustrate with example. [5]

CSS (Cascading Style Sheets) is used to control the presentation and layout of HTML elements. It can be applied in different ways, two of which are Internal CSS and External CSS. --- - Internal CSS is written inside the HTML document its...

3asked 3xavg 5 marks · due (skipped 2082) · Functions
Answer

Write a PHP function add that takes two arguments as an input and return their sum. [5]

Based on the PHP Functions and Function Arguments concepts A PHP function is declared using the function keyword, and arguments are passed inside the parentheses separated by commas. --- --- --- Part Description ------ function add(...) ...

4asked 3xavg 5 marks · due (skipped 2082) · Events and Effects
Answer

What is chaining in jQuery? Write a script to illustrate concept of chaining using slideUp and slideDown method. [5]

Chaining in jQuery

Definition

Chaining allows us to run multiple jQuery commands, one after another, on the same element(s) in a single statement. To chain an action, we simply append the action to the previous action using the dot (.) operator. This makes the code shorter, cleaner, and more efficient because jQuery does not need to find the same element multiple times.

General Syntax:

$(selector).method1().method2().method3();

Script Illustrating Chaining using slideUp() and slideDown()

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h2>jQuery Chaining Demo</h2>

    <div id="myDiv">This is a div element.</div>
     
    <button id="btn">Click to Chain Effects</button>

    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#myDiv")
                    .css("color", "red")
                    .slideUp(1000)
                    .slideDown(1000);
            });
        });
    </script>

</body>
</html>

Explanation of the Script

StepCodeDescription
1.css("color", "red")Changes the text color of #myDiv to red
2.slideUp(1000)Slides the #myDiv element up (hides it) over 1000 milliseconds
3.slideDown(1000)Slides the #myDiv element down (shows it) over 1000 milliseconds

All three methods are chained together on the same element (#myDiv) in a single statement. jQuery executes them one after another in sequence.


Key Benefit

Without chaining, the same code would require three separate lines each finding #myDiv:

// Without chaining (less efficient)
$("#myDiv").css("color", "red");
$("#myDiv").slideUp(1000);
$("#myDiv").slideDown(1000);

With chaining, it is written in one clean statement, which is more readable and performs better.

5asked 2xavg 10 marks · due (skipped 2082) · Syntax Rules for creating XML document
Answer

Describe the rules for creating XML document. Create a XML file with simple type and elements with attribute and nested elements. Write its equivalent XSD.[10]

The following rules must be followed: Rule 1: Every XML document must have exactly one Root Element All XML content must be enclosed within a single root element. Rule 2: All Tags Must Be Closed Every opening tag must have a correspondin...

Most repeated questions

Topics asked at least twice, most-asked first.

asked 4xavg 10 marks · 2081, 2080, 2079, 2078
Answer

Create an HTML file containing form with textbox, select and radio button. Now write a javascript function for validating the form elements. Validate textbox for required, select field should have some value selected and radio button should be checked.[10]

--- - The <form tag uses the onsubmit event handler to call validateForm(). - Returning false from the function prevents form submission if validation fails. - Checks that the textbox is not empty (required field). - The default option h...

asked 3xavg 7 marks · 2081, 2079, 2078
Answer

How internal and external CSS differ from each other. Illustrate with example. [5]

CSS (Cascading Style Sheets) is used to control the presentation and layout of HTML elements. It can be applied in different ways, two of which are Internal CSS and External CSS. --- - Internal CSS is written inside the HTML document its...

asked 3xavg 5 marks · 2081, 2080, 2078
Answer

Write a PHP function add that takes two arguments as an input and return their sum. [5]

Based on the PHP Functions and Function Arguments concepts A PHP function is declared using the function keyword, and arguments are passed inside the parentheses separated by commas. --- --- --- Part Description ------ function add(...) ...

asked 3xavg 5 marks · 2080, 2079, 2076
Answer

What is chaining in jQuery? Write a script to illustrate concept of chaining using slideUp and slideDown method. [5]

Chaining in jQuery

Definition

Chaining allows us to run multiple jQuery commands, one after another, on the same element(s) in a single statement. To chain an action, we simply append the action to the previous action using the dot (.) operator. This makes the code shorter, cleaner, and more efficient because jQuery does not need to find the same element multiple times.

General Syntax:

$(selector).method1().method2().method3();

Script Illustrating Chaining using slideUp() and slideDown()

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h2>jQuery Chaining Demo</h2>

    <div id="myDiv">This is a div element.</div>
     
    <button id="btn">Click to Chain Effects</button>

    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#myDiv")
                    .css("color", "red")
                    .slideUp(1000)
                    .slideDown(1000);
            });
        });
    </script>

</body>
</html>

Explanation of the Script

StepCodeDescription
1.css("color", "red")Changes the text color of #myDiv to red
2.slideUp(1000)Slides the #myDiv element up (hides it) over 1000 milliseconds
3.slideDown(1000)Slides the #myDiv element down (shows it) over 1000 milliseconds

All three methods are chained together on the same element (#myDiv) in a single statement. jQuery executes them one after another in sequence.


Key Benefit

Without chaining, the same code would require three separate lines each finding #myDiv:

// Without chaining (less efficient)
$("#myDiv").css("color", "red");
$("#myDiv").slideUp(1000);
$("#myDiv").slideDown(1000);

With chaining, it is written in one clean statement, which is more readable and performs better.

asked 3xavg 7 marks · 2082, 2080, 2076
Answer

Create an HTML page containing three paragraphs p1, p2 and p3 with some contents. Write internal CSS to set the position of p1 to relative, p2 to float and p3 to absolute. [5]

HTML Page with CSS Positioning (p1: relative, p2: float, p3: absolute)

Concept (from notes)

  • position: relative - element is positioned relative to its normal position in the document flow.
  • float - used to float an element to the left or right, allowing other content to wrap around it.
  • position: absolute - element is positioned relative to the nearest positioned ancestor; removed from normal document flow and can overlap other elements.

HTML Code

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Positioning Example</title>

    <style>
      /* p1: position relative */
      #p1 {
        position: relative;
        top: 20px;
        left: 30px;
        background-color: lightblue;
        width: 300px;
        padding: 10px;
      }

      /* p2: float */
      #p2 {
        float: left;
        background-color: lightgreen;
        width: 250px;
        padding: 10px;
        margin: 10px;
      }

      /* p3: position absolute */
      #p3 {
        position: absolute;
        top: 200px;
        left: 400px;
        background-color: lightyellow;
        width: 300px;
        padding: 10px;
      }
    </style>

  </head>

  <body>

    <h2>CSS Positioning Demo</h2>

    <p id="p1">
      This is paragraph P1. Its position is set to <strong>relative</strong>.
      It is shifted 20px from top and 30px from left relative to its
      normal position in the document flow.
    </p>

    <p id="p2">
      This is paragraph P2. It uses <strong>float: left</strong>.
      This element floats to the left and other content
      wraps around it.
    </p>

    <p id="p3">
      This is paragraph P3. Its position is set to <strong>absolute</strong>.
      It is positioned relative to the nearest positioned ancestor
      or the document body. It is removed from the normal document flow.
    </p>

  </body>
</html>

Output Description

ParagraphCSS PropertyEffect
p1position: relativeShifted 20px down and 30px right from its normal position
p2float: leftFloats to the left; other content wraps around it
p3position: absolutePlaced at exact coordinates (top: 200px, left: 400px) from the document body; removed from normal flow

Key Notes

  • Internal CSS is written inside the <style> tag placed within the <head> section.
  • The top, left, right, and bottom properties only work when the position property is explicitly set.
  • Absolute positioned elements are removed from normal flow and can overlap other elements.
asked 3xavg 5 marks · 2082, 2081, 2080
Answer

Write an HTML script to demonstrate the onkeydown and onkeypress events. [5]

HTML Script to Demonstrate onkeydown and onkeypress Events

Brief Explanation

Keyboard Events are:

AttributeDescription
onkeydownFires/runs when a user is pressing a key
onkeypressFires when user presses a key
onkeyupFires when user releases a key

These are event handlers written inside HTML tags that execute JavaScript when something happens (such as pressing a key).


HTML Script

<!DOCTYPE html>
<html>
<head>
    <title>onkeydown and onkeypress Event Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }
        input {
            padding: 8px;
            font-size: 16px;
            width: 300px;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            width: 320px;
        }
    </style>
</head>
<body>

    <h2>Keyboard Event Demo: onkeydown and onkeypress</h2>

    <p>Type something in the textbox below:</p>

    <input
        type="text"
        id="myInput"
        onkeydown="keyDownHandler(event)"
        onkeypress="keyPressHandler(event)"
        placeholder="Type here..."
    />

    <div id="output">
        <p id="keydown_msg">onkeydown: (waiting...)</p>
        <p id="keypress_msg">onkeypress: (waiting...)</p>
    </div>

    <script type="text/javascript">

        // Fires when a user is pressing a key (onkeydown)
        function keyDownHandler(event) {
            document.getElementById("keydown_msg").innerHTML =
                "onkeydown: Key pressed down = " + event.key;
        }

        // Fires when user presses a key (onkeypress)
        function keyPressHandler(event) {
            document.getElementById("keypress_msg").innerHTML =
                "onkeypress: Key pressed = " + event.key;
        }

    </script>

</body>
</html>

Output / Explanation

When the user types in the text box:

  • onkeydown fires first, as soon as the key is pushed down, and displays the key name in the output area.
  • onkeypress fires next, when the key press is registered, and also displays the key name.

Example output when user presses the key A:

onkeydown:  Key pressed down = A
onkeypress: Key pressed = A

Note: onkeypress does not fire for non-character keys (like Shift, Ctrl, Arrow keys), whereas onkeydown fires for all keys.

asked 2xavg 10 marks · 2081, 2080
Answer

Describe the rules for creating XML document. Create a XML file with simple type and elements with attribute and nested elements. Write its equivalent XSD.[10]

The following rules must be followed: Rule 1: Every XML document must have exactly one Root Element All XML content must be enclosed within a single root element. Rule 2: All Tags Must Be Closed Every opening tag must have a correspondin...

asked 2xavg 10 marks · 2080, 2076
Answer

Write a server side script in PHP to illustrate inserting and selecting values to and from database table. Create required connection using your own assumptions.[10]

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

  • Server: localhost
  • Username: root
  • Password: `` (empty)
  • Database: webTech
  • Table: students with columns id, name, email, phone

Complete PHP Script

<?php

// Step 1: Database Connection
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "webTech";

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Step 2: Check Connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully  ";

// Step 3: Create Table (if not exists)
$createTable = "CREATE TABLE IF NOT EXISTS students (
    id     INT(6) AUTO_INCREMENT PRIMARY KEY,
    name   VARCHAR(50)  NOT NULL,
    email  VARCHAR(50)  NOT NULL,
    phone  VARCHAR(15)  NOT NULL
)";

if (mysqli_query($conn, $createTable)) {
    echo "Table ready.  ";
} else {
    echo "Error creating table: " . mysqli_error($conn) . " ";
}

// Step 4: INSERT values into the table
$name  = "Ram Sharma";
$email = "[email protected]";
$phone = "9841000000";

$insertSQL = "INSERT INTO students (name, email, phone)
              VALUES ('$name', '$email', '$phone')";

if (mysqli_query($conn, $insertSQL)) {
    echo "Record inserted successfully.  ";
} else {
    echo "Error inserting record: " . mysqli_error($conn) . " ";
}

// Step 5: SELECT values from the table
$selectSQL = "SELECT * FROM students";
$result    = mysqli_query($conn, $selectSQL);

// Step 6: Display the results
if (mysqli_num_rows($result) > 0) {
    echo " <strong>Records from students table:</strong> ";
    echo "<table border='1' cellpadding='5'>";
    echo "<tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>";

    // Fetch each row and display
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<tr>";
        echo "<td>" . $row["id"]    . "</td>";
        echo "<td>" . $row["name"]  . "</td>";
        echo "<td>" . $row["email"] . "</td>";
        echo "<td>" . $row["phone"] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
} else {
    echo "No records found.";
}

// Step 7: Close Connection
mysqli_close($conn);

?>

Step-by-Step Explanation

StepDescription
1Set server credentials (localhost, root, empty password, webTech DB)
2Use mysqli_connect() to create connection; check with if(!$conn)
3Create students table if it does not already exist
4Write INSERT SQL query and execute using mysqli_query()
5Write SELECT SQL query (SELECT * FROM students) and execute
6Use mysqli_num_rows() to check if rows exist; loop with mysqli_fetch_assoc() to display each row
7Close connection using mysqli_close()

Expected Output

Connected successfully
Table ready.
Record inserted successfully.

Records from students table:
+----+------------+-----------------+------------+
| ID | Name       | Email           | Phone      |
+----+------------+-----------------+------------+
|  1 | Ram Sharma | [email protected] | 9841000000 |
+----+------------+-----------------+------------+

Note: The procedural approach uses mysqli_connect() for connection and mysqli_query() for executing SQL statements. The die() function stops execution if the connection fails, so no else block is needed after it.

asked 2xavg 5 marks · 2081, 2080
Answer

Define cookie. Write a PHP program to create and retrieve a cookie. [5]

Cookie: Definition and PHP Program

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. Cookies are used to identify users and store information between page requests. Examples of cookies include Name cookie, Date cookie, etc.

PHP can send and receive cookies.


<?php
// Setting a cookie
// setcookie(name, value, expiry_time)
$cookie_name  = "username";
$cookie_value = "JohnDoe";

// Cookie expires in 1 day (time() + 86400 seconds)
setcookie($cookie_name, $cookie_value, time() + 86400);

echo "Cookie has been set successfully!";
?>

<?php
// Retrieving the cookie
if (isset($_COOKIE["username"])) {
    echo "Cookie Found! ";
    echo "Username is: " . $_COOKIE["username"];
} else {
    echo "Cookie is not set.";
}
?>

Complete Program (Create and Retrieve in One File)

<?php
// Step 1: Create/Set the cookie
$cookie_name  = "username";
$cookie_value = "JohnDoe";

// setcookie must be called before any HTML output
setcookie($cookie_name, $cookie_value, time() + 86400); // expires in 1 day
?>

<!DOCTYPE html>
<html>
<head>
    <title>Cookie Example</title>
</head>
<body>

<?php
// Step 2: Retrieve the cookie
if (isset($_COOKIE["username"])) {
    echo "<p>Cookie Name  : username</p>";
    echo "<p>Cookie Value : " . $_COOKIE["username"] . "</p>";
} else {
    echo "<p>Cookie is not set yet. Please refresh the page.</p>";
}
?>

</body>
</html>

Output

Cookie Name  : username
Cookie Value : JohnDoe

Key Points

Function / VariablePurpose
setcookie()Creates/sets a cookie on the client's computer
$_COOKIE[]Superglobal array used to retrieve cookie values
isset()Checks whether the cookie exists before reading
time() + 86400Sets expiry to 1 day (86400 seconds) from now

Note: setcookie() must be called before any HTML output, otherwise the cookie will not be set.

asked 2xavg 5 marks · 2080, 2076
Answer

What is XML? Why is it called extensible? Mention the use of XML. [5]

--- XML (eXtensible Markup Language) is a markup language designed to store, transport, and describe data in a structured, human-readable, and machine-readable format. It was developed by the W3C (World Wide Web Consortium) and became a ...

asked 2xavg 8 marks · 2079, 2078
Answer

What is the use of XML? Create a XML file with simple type and complex type elements. Write its equivalent DTD.[10]

Use of XML, XML File with Simple/Complex Types, and Equivalent DTD

Uses of XML

XML (eXtensible Markup Language) is a markup language designed to store, transport, and structure data in a human-readable and machine-readable format. Its main uses are:

UseDescription
Data StorageStores data in a structured, self-describing format
Data TransportExchanges data between incompatible systems and platforms
Configuration FilesMany applications use XML for settings and configuration
Web ServicesSOAP-based web services use XML for request/response messages
Separation of Data from PresentationXML stores data; HTML/CSS handles display
Platform IndependenceWorks across different operating systems and programming languages
Document RepresentationUsed in formats like DOCX, SVG, and RSS feeds

XML File with Simple Type and Complex Type Elements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library SYSTEM "library.dtd">
<library>
    <book id="101">
        <title>Web Technology</title>
        <author>
            <firstname>John</firstname>
            <lastname>Smith</lastname>
        </author>
        <price>450.00</price>
        <year>2020</year>
    </book>
    <book id="102">
        <title>XML Fundamentals</title>
        <author>
            <firstname>Mary</firstname>
            <lastname>Jones</lastname>
        </author>
        <price>350.50</price>
        <year>2021</year>
    </book>
</library>

Explanation of Element Types

Simple Type Elements contain only text/data and no child elements:

  • <title>, <firstname>, <lastname>, <price>, <year>

Complex Type Elements contain other child elements or attributes:

  • <library> contains one or more <book> child elements
  • <book> contains child elements and has an attribute id
  • <author> contains <firstname> and <lastname> child elements

: "Simple type element is used only in the context of text" and "A complex type is a container for other element definitions, allowing us to specify which child elements an element can contain."


Equivalent DTD (Document Type Definition)

<!ELEMENT library (book+)>
<!ELEMENT book (title, author, price, year)>
<!ATTLIST book id CDATA #REQUIRED>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (firstname, lastname)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT year (#PCDATA)>

Explanation of DTD Declarations

DTD DeclarationMeaning
<!ELEMENT library (book+)>library contains one or more book elements (+ means one or more)
<!ELEMENT book (title, author, price, year)>book is a complex type with four ordered child elements
<!ATTLIST book id CDATA #REQUIRED>book has a required attribute id of character data type
<!ELEMENT title (#PCDATA)>title is a simple type containing parsed character data (text only)
<!ELEMENT author (firstname, lastname)>author is a complex type with two child elements
<!ELEMENT firstname (#PCDATA)>firstname is a simple type containing text only
<!ELEMENT lastname (#PCDATA)>lastname is a simple type containing text only
<!ELEMENT price (#PCDATA)>price is a simple type containing text only
<!ELEMENT year (#PCDATA)>year is a simple type containing text only

: "In DTD, attributes are declared with an ATTLIST declaration" with syntax <!ATTLIST element-name attribute-name attribute-type attribute-value>.


Summary

  • XML provides a flexible, platform-independent way to structure and exchange data.
  • Simple type elements hold only text data (#PCDATA).
  • Complex type elements contain other child elements or attributes, acting as containers.
  • DTD defines the legal structure and rules for the XML document, ensuring data validity and consistency.
asked 2xavg 8 marks · 2079, 2078
Answer

How can you define array in PHP? Write a PHP function to create an array of type integer and print its elements. [5]

An array is a data structure that stores multiple values in a single variable. In PHP, an array can hold values of different data types (string, integer, float, etc.) under one variable name, and each element is accessed using an index (...

asked 2xavg 5 marks · 2079, 2078
Answer

Write a HTML script to generate following list of items; 1. Coffee : I. Black coffee II. Green coffee 2. Tea A: Black tea B. Green tea [5]

HTML Script for Nested Lists

Analysis of Required Output

The question requires:

  • Outer ordered list (numbered: 1, 2) for Coffee and Tea
  • Inner ordered list under Coffee with Roman numerals (I, II) for Black coffee and Green coffee
  • Inner ordered list under Tea with uppercase letters (A, B) for Black tea and Green tea

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Nested List Example</title>
</head>
<body>

    <ol type="1">

        <li>Coffee
            <ol type="I">
                <li>Black coffee</li>
                <li>Green coffee</li>
            </ol>
        </li>

        <li>Tea
            <ol type="A">
                <li>Black tea</li>
                <li>Green tea</li>
            </ol>
        </li>

    </ol>

</body>
</html>

Output

1. Coffee
      I.  Black coffee
      II. Green coffee
2. Tea
      A. Black tea
      B. Green tea

Key Points (from notes)

Tag / AttributePurpose
<ol>Ordered list (numbered by default)
<li>Each list item
type="1"Numeric numbering (1, 2, 3...)
type="I"Uppercase Roman numerals (I, II, III...)
type="A"Uppercase alphabetic (A, B, C...)

Note: The type attribute in the <ol> tag is used to change the list marker style. Nesting is achieved by placing one <ol> inside a <li> of the outer <ol>.

asked 2xavg 5 marks · 2079, 2078
Answer

Differentiate Web 1.0 from Web 2.0. [5]

--- Feature Web 1.0 Web 2.0 --------- Nature Read-only web Read-write web User Role Users are passive consumers of content Users are active creators and contributors of content Content Static web pages with fixed content Dynamic web page...

asked 2xavg 5 marks · 2078, 2076
Answer

Discuss about different JSON data types. [5]

JSON (JavaScript Object Notation) supports the following six data types for values: --- A string is a sequence of characters written in double quotes. --- A number can be an integer or a floating-point value. It is written without quotes...

Study every one of these with model answers, flashcards, and MCQs.

Open CSC329 study modes