CSC329 · TU past paper

Web Technology 2079 question paper

The complete TU 2079 exam paper for Web Technology (CSC329), all 12 questions with solved model answers written to the mark scheme.

Past Papers2082 2081 2080 2079 2078 2076

Tap a question to open its answer.

110 marksXML schema languagesAnswer

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:

Use	Description
Data Storage	Stores data in a structured, self-describing format
Data Transport	Exchanges data between incompatible systems and platforms
Configuration Files	Many applications use XML for settings and configuration
Web Services	SOAP-based web services use XML for request/response messages
Separation of Data from Presentation	XML stores data; HTML/CSS handles display
Platform Independence	Works across different operating systems and programming languages
Document Representation	Used 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 Declaration	Meaning
`<!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.

210 marksEvent Handling and Form ValidationAnswer

Create an HTML file containing form elements textbox for username, password field and a checkbox for hobbies. Now write javascript function for the form validation. You should validate for username to be empty, password should be of length at least 5, and the check box should be checked.[10]

HTML Form Validation - Username, Password, and Checkbox

Complete HTML File with JavaScript Validation

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation</title>
</head>
<body>

    <h2>Registration Form</h2>

    <form name="myForm" onsubmit="return validate()">

        <!-- Username Field -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
          

        <!-- Password Field -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
          

        <!-- Hobbies Checkbox -->
        <label>Hobbies:</label>
        <input type="checkbox" id="reading" name="hobbies" value="reading"> Reading
        <input type="checkbox" id="gaming" name="hobbies" value="gaming"> Gaming
        <input type="checkbox" id="coding" name="hobbies" value="coding"> Coding
          

        <!-- Submit Button -->
        <input type="submit" value="Submit">

    </form>

    <script type="text/javascript">

        function validate() {

            // ---- 1. Username Validation (should not be empty) ----
            var username = document.getElementById("username").value;

            if (username === "") {
                alert("Username cannot be empty. Please enter your username.");
                return false;
            }

            // ---- 2. Password Validation (length at least 5) ----
            var password = document.getElementById("password").value;

            if (password === "") {
                alert("Password cannot be empty. Please enter your password.");
                return false;
            }

            if (password.length < 5) {
                alert("Password must be at least 5 characters long.");
                return false;
            }

            // ---- 3. Checkbox Validation (at least one must be checked) ----
            var hobbies = document.getElementsByName("hobbies");
            var isChecked = false;

            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked) {
                    isChecked = true;
                    break;
                }
            }

            if (!isChecked) {
                alert("Please select at least one hobby.");
                return false;
            }

            // All validations passed
            alert("Form submitted successfully!");
            return true;
        }

    </script>

</body>
</html>

Explanation of Each Part

1. Form Structure

Element	Type	Purpose
`<input type="text">`	Text box	Accepts username input
`<input type="password">`	Password field	Accepts password (masked)
`<input type="checkbox">`	Checkbox	Allows hobby selection
`onsubmit="return validate()"`	Event handler	Calls validation before submit

Note: The onsubmit event handler calls the validate() function. If the function returns false, the form is NOT submitted. This is standard client-side validation.

2. Validation Logic Summary

Username Validation:

if (username === "") {
    alert("Username cannot be empty.");
    return false;
}

Checks if the username field is left blank.
Returns false to stop form submission.

Password Validation:

if (password.length < 5) {
    alert("Password must be at least 5 characters long.");
    return false;
}

First checks if empty, then checks minimum length of 5.

Checkbox Validation:

for (var i = 0; i < hobbies.length; i++) {
    if (hobbies[i].checked) {
        isChecked = true;
        break;
    }
}
if (!isChecked) {
    alert("Please select at least one hobby.");
    return false;
}

Uses getElementsByName() to get all checkboxes with name "hobbies".
Loops through each checkbox to check if at least one is selected.
If none is checked, shows alert and returns false.

3. Flow Diagram

User clicks Submit
        |
        v
  Username empty? --> YES --> Alert + return false (stop)
        |
       NO
        |
        v
  Password empty? --> YES --> Alert + return false (stop)
        |
       NO
        |
        v
  Password length < 5? --> YES --> Alert + return false (stop)
        |
       NO
        |
        v
  Any checkbox checked? --> NO --> Alert + return false (stop)
        |
       YES
        |
        v
  Form submitted successfully (return true)

310 marksConnecting to DatabaseHideAnswer
How database connection is created in PHP? Write a PHP program to create a form and insert values in to the database table. The form should contain at least two input fields.[10]
There are three ways of working with MySQL and PHP: 1. MySQLi (object-oriented) 2. MySQLi (procedural) 3. PDO The following three lines are always written when using localhost: Note: mysqliconnect() takes server name, username, password,...

45 marksListsAnswer

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 / Attribute	Purpose
`<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>.

55 marksCanvasHideAnswer
Create a HTML page containing a div having id 'div1'. The div should contain canvas element. The id of canvas should be 'mycanvas'. The height and width of canvas should be 200 and 300. [5]
The question asks us to create an HTML page with: - A <div element with id="div1" - Inside the div, a <canvas element with id="mycanvas" - Canvas height = 200 and width = 300 --- --- Part Description ------------------- <!DOCTYPE html De...
65 marksInserting CSSHideAnswer
What are the usages of class and id selectors in CSS? Illustrate with example. [5]
The ID selector uses the id attribute of an HTML element to select a specific unique element. The id of an element must be unique within a page, so the ID selector is used to select only one unique element. To select an element with a sp...
75 marksTextHideAnswer
What is word-wrap property in CSS? Write an HTML script to illustrate the word-wrap property. [5]
The CSS word-wrap property allows long words to be broken and wrapped onto the next line. If a word is too long to fit within an area, it normally expands outside the container. The word-wrap property forces the text to wrap within the b...
85 marksEvents and EffectsHideAnswer
Describe the jQuery Animate() method. Write an html script to create a div with id 'mydiv'. The position of the div should be set to absolute. Now show the use of animate method to the div element to right by 300px. [5]
The jQuery animate() method is used to create custom animations on HTML elements by gradually changing CSS properties from one value to another. Syntax: Parameters: - {parameters} - Specifies the CSS properties to be animated (required) ...
95 marksXML NamespaceHideAnswer
What is XML Namespace? How is it used to avoid element name conflict in XML? Justify with an example. [5]
An XML Namespace is a mechanism used to avoid element name conflicts in XML documents by associating element and attribute names with a unique identifier (URI - Uniform Resource Identifier). When XML documents from different sources are ...
105 marksCreating Class and ObjectsHideAnswer
How can you define class and objects in PHP? Write a PHP script to create class and its object. [5]
A class is a "blueprint" for an object, used as a code template to generate objects. It contains the code for properties (variables) and methods (functions). A class is defined using the class keyword, followed by the class name and a pa...
115 marksArrayHideAnswer
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 (...
125 marksWeb 2.0HideAnswer
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...

Keep going

Important questions + predictions

Full syllabus Flashcards and practice

Other papers

2082 paper 2081 paper 2080 paper 2078 paper 2076 paper