2080.2

BIT251 · TU past paper

Web Technology I 2080.2 question paper

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

Past Papers20812080.220802079

Tap a question to open its answer.

  1. 110 marksForm validation concept and purposeAnswer

    What is client side validation? Why form validation is needed? Write a JavaScript program to validate a form that contains text field, password field, radio button field, checkbox and dropdown select field. Write validation for each field as required field. Also add validation constraints for password[10]

    Client-Side Validation and Form Validation in JavaScript

    What is Client-Side Validation?

    Client-side validation is the process of validating user input data in the browser (on the client side) before the data is submitted to the server. It is implemented using scripting languages like JavaScript and runs on the user's machine without requiring a round trip to the server.

    In client-side validation, the browser checks the form fields for correctness (e.g., required fields, format, length) and provides immediate feedback to the user if something is wrong.

    Why is Form Validation Needed?

    Form validation is needed for the following reasons:

    ReasonExplanation
    Data IntegrityEnsures only correct and complete data is submitted
    User ExperienceProvides instant feedback without page reload
    Reduce Server LoadInvalid requests are stopped before reaching the server
    SecurityPrevents empty or malformed data from being processed
    Business RulesEnforces constraints like password length, required fields
    Prevent ErrorsAvoids database errors caused by wrong data types or empty values

    JavaScript Form Validation Program

    The form contains:

    • Text field (Name)
    • Password field (with constraints)
    • Radio button (Gender)
    • Checkbox (Terms & Conditions)
    • Dropdown select (Country)

    Password Validation Constraints:

    • Must not be empty
    • Minimum 8 characters long
    • Must contain at least one uppercase letter
    • Must contain at least one lowercase letter
    • Must contain at least one digit
    • Must contain at least one special character

    HTML + JavaScript Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f2f2f2;
        }

        form {
            background-color: white;
            padding: 30px;
            width: 420px;
            border-radius: 8px;
            box-shadow: 0 0 10px #ccc;
        }

        h2 {
            text-align: center;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"],
        select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .error {
            color: red;
            font-size: 13px;
            margin-top: 4px;
        }

        .success {
            color: green;
            font-size: 13px;
            margin-top: 4px;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<form name="registrationForm" onsubmit="return validateForm()">
    <h2>Registration Form</h2>

    <!-- Text Field: Name -->
    <div class="form-group">
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your full name">
        <span id="nameError" class="error"></span>
    </div>

    <!-- Password Field -->
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter password">
        <span id="passwordError" class="error"></span>
    </div>

    <!-- Radio Button: Gender -->
    <div class="form-group">
        <label>Gender:</label>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="female"> Female
        <input type="radio" name="gender" value="other"> Other
         
        <span id="genderError" class="error"></span>
    </div>

    <!-- Checkbox: Terms and Conditions -->
    <div class="form-group">
        <label>
            <input type="checkbox" id="terms" name="terms">
            I agree to the Terms and Conditions
        </label>
        <span id="termsError" class="error"></span>
    </div>

    <!-- Dropdown Select: Country -->
    <div class="form-group">
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">-- Select Country --</option>
            <option value="nepal">Nepal</option>
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
        <span id="countryError" class="error"></span>
    </div>

    <!-- Submit Button -->
    <div class="form-group">
        <input type="submit" value="Register">
    </div>

    <span id="successMsg" class="success"></span>

</form>

<script>
    function validateForm() {

        // Clear all previous error messages
        document.getElementById("nameError").textContent = "";
        document.getElementById("passwordError").textContent = "";
        document.getElementById("genderError").textContent = "";
        document.getElementById("termsError").textContent = "";
        document.getElementById("countryError").textContent = "";
        document.getElementById("successMsg").textContent = "";

        var isValid = true;

        // ---- 1. Text field: Name ----
        var name = document.getElementById("name").value.trim();
        if (name === "") {
            document.getElementById("nameError").textContent = "Name is required.";
            isValid = false;
        }

        // ---- 2. Password field ----
        var password = document.getElementById("password").value;
        var pwdPattern =
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^a-zA-Z0-9]).{8,}$/;
        if (password === "") {
            document.getElementById("passwordError").textContent =
                "Password is required.";
            isValid = false;
        } else if (!pwdPattern.test(password)) {
            document.getElementById("passwordError").textContent =
                "Password must be at least 8 characters and include an uppercase letter, " +
                "a lowercase letter, a digit and a special character.";
            isValid = false;
        }

        // ---- 3. Radio button: Gender ----
        var genders = document.getElementsByName("gender");
        var genderChosen = false;
        for (var i = 0; i < genders.length; i++) {
            if (genders[i].checked) {
                genderChosen = true;
                break;
            }
        }
        if (!genderChosen) {
            document.getElementById("genderError").textContent =
                "Please select your gender.";
            isValid = false;
        }

        // ---- 4. Checkbox: Terms and Conditions ----
        if (!document.getElementById("terms").checked) {
            document.getElementById("termsError").textContent =
                "You must agree to the Terms and Conditions.";
            isValid = false;
        }

        // ---- 5. Dropdown: Country ----
        if (document.getElementById("country").value === "") {
            document.getElementById("countryError").textContent =
                "Please select a country.";
            isValid = false;
        }

        // ---- Result ----
        if (isValid) {
            document.getElementById("successMsg").textContent =
                "Registration successful. All fields are valid.";
        }

        // Returning false cancels the submission
        return isValid;
    }
</script>

</body>
</html>

    How Each Control is Checked

    ControlRead usingRule
    Text field (Name)getElementById("name").valueMust not be empty
    Password fieldgetElementById("password").valueThe six constraints listed above
    Radio button (Gender)getElementsByName("gender")Exactly one option must be checked
    Checkbox (Terms)getElementById("terms").checkedMust be ticked
    Dropdown (Country)getElementById("country").valueMust not be the placeholder option

    Conclusion

    Client-side validation runs inside the browser before anything is sent, so the user is corrected immediately and the server is spared a pointless request. The program above shows the pattern for every kind of control: single-valued fields are read by id, grouped controls (radio buttons and checkboxes) are read by name and scanned, and the whole form reports through one isValid flag whose value is returned to onsubmit. It never replaces server-side validation, which remains the only trustworthy check.

  2. 210 marksCSS box model padding margin borderAnswer

    What is CSS Box Model? Define the areas and edges in the CSS box model. Write CSS style for demonstrating CSS box model.[10]

    The CSS Box Model is a fundamental concept in web design and layout that describes how every HTML element is rendered as a rectangular box on a webpage. According to this model, every element consists of multiple layers (areas) surroundi...

  3. 310 marksXSD schema definition and validationAnswer

    What is the use of XML?, Given following XML, write XSD for validating the XML and also write XSLT to transform the XML into HTML file. The Name, and Address are string type, Number is integer and the Accessible is Boolean type. The child elements should appear in the order as below.[10]

    XML, XSD, and XSLT - Model Answer

    Part 1: Uses of XML (2 marks)

    XML (eXtensible Markup Language) is a markup language designed to store and transport data in a structured, human-readable, and machine-readable format.

    Key Uses of XML:

    UseDescription
    Data StorageStores structured data independently of software and hardware
    Data ExchangeTransfers data between different systems and platforms
    Web ServicesUsed in SOAP-based web services for communication
    Configuration FilesMany applications use XML for configuration (e.g., web.xml, pom.xml)
    Document RepresentationRepresents documents with complex structure (e.g., XHTML, SVG)
    Database IntegrationActs as a medium to exchange data between databases
    RSS FeedsUsed to syndicate web content

    Part 2: Given XML

    Based on the question description, the assumed XML is:

    <?xml version="1.0" encoding="UTF-8"?>
<Contacts>
    <Contact>
        <Name>Ram Sharma</Name>
        <Address>Kathmandu</Address>
        <Number>9841000001</Number>
        <Accessible>true</Accessible>
    </Contact>
    <Contact>
        <Name>Sita Thapa</Name>
        <Address>Pokhara</Address>
        <Number>9856000002</Number>
        <Accessible>false</Accessible>
    </Contact>
</Contacts>

    Part 3: XSD (XML Schema Definition) for Validating the XML (4 marks)

    An XSD defines the structure, data types, and constraints that an XML document must follow.

    <?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <!-- Root Element -->
    <xs:element name="Contacts">
        <xs:complexType>
            <xs:sequence>
                <!-- Contact element can appear one or more times -->
                <xs:element name="Contact" maxOccurs="unbounded">
                    <xs:complexType>
                        <!-- Child elements must appear in this exact order -->
                        <xs:sequence>

                            <!-- Name: string type -->
                            <xs:element name="Name" type="xs:string"/>

                            <!-- Address: string type -->
                            <xs:element name="Address" type="xs:string"/>

                            <!-- Number: integer type -->
                            <xs:element name="Number" type="xs:integer"/>

                            <!-- Accessible: boolean type -->
                            <xs:element name="Accessible" type="xs:boolean"/>

                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:sequence>
        </xs:complexType>
    </xs:element>

</xs:schema>

    Key Points:

    • xs:sequence enforces the order of child elements (Name → Address → Number → Accessible)
    • xs:string validates text data
    • xs:integer validates whole numbers
    • xs:boolean validates true or false values
    • maxOccurs="unbounded" allows multiple <Contact> entries

    Part 4: XSLT to Transform XML into HTML (4 marks)

    XSLT (eXtensible Stylesheet Language Transformations) is used to transform XML documents into other formats such as HTML, plain text, or another XML.

    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- Match the root of the document -->
    <xsl:template match="/">
        <html>
            <head>
                <title>Contact List</title>
                <style>
                    table { border-collapse: collapse; width: 60%; }
                    th, td { border: 1px solid black; padding: 8px; text-align: left; }
                    th { background-color: #4CAF50; color: white; }
                    tr:nth-child(even) { background-color: #f2f2f2; }
                </style>
            </head>
            <body>
                <h2>Contact Information</h2>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Number</th>
                        <th>Accessible</th>
                    </tr>

                    <!-- Loop through each Contact element -->
                    <xsl:for-each select="Contacts/Contact">
                        <tr>
                            <td>
                                <xsl:value-of select="Name"/>
                            </td>
                            <td>
                                <xsl:value-of select="Address"/>
                            </td>
                            <td>
                                <xsl:value-of select="Number"/>
                            </td>
                            <td>
                                <xsl:value-of select="Accessible"/>
                            </td>
                        </tr>
                    </xsl:for-each>

                </table>
            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>

    Resulting HTML Output

    When the XSLT is applied to the XML, the browser renders:

    NameAddressNumberAccessible
    Ram SharmaKathmandu9841000001true
    Sita ThapaPokhara9856000002false

    Summary

    ComponentPurpose
    XMLStores structured contact data
    XSDValidates data types and element order
    XSLTTransforms XML into a readable HTML table
  4. 45 marksWeb 1.0 versus Web 2.0Answer

    Differentiate Web1.0 from Web 2.0. [5]

    --- Feature Web 1.0 Web 2.0 --------- Nature Read-only web (static) Read-Write web (dynamic) User Role Passive consumers of content Active creators and contributors of content Content Created only by website owners/developers Created and...

  5. 55 marksHTML title and meta tagsAnswer

    Create an HTML page that contains Meta tag. Set the title of your page to "This Meta BIT". Set the description content in Meta to "Hello BIT", Keyword contents to "BIT", "IOST", "TU" and character encoding to "UTF-8". Also write "Hello BIT" and "Web Tech" in H1 and H2 tag under body section of the page. [5]

    --- Tag / Attribute Purpose ------ <!DOCTYPE html Declares the document as HTML5 <meta charset="UTF-8" Sets character encoding to UTF-8 <meta name="description" content="Hello BIT" Sets the page description to "Hello BIT" <meta name="key...

  6. 65 marksMain and article tagsAnswer

    Write HTML script to demonstrate use of the main and article tags. [5]

    • <main tag: Represents the dominant/main content of the <body of a document. There should be only one <main element per page. - <article tag: Represents a self-contained, independent piece of content that can be distributed or reused in...
  7. 75 marksHTML entities and special charactersAnswer

    Write HTML script to display following output in a division under body section. a) The ampersand (and) sign: & b.) equation $3x^2 + 2x_1 y < 4$. $45 < > 30$ [5]

    The question requires displaying special characters and mathematical expressions using HTML entities in a <div under the <body section. Symbol HTML Entity -------------------- & (ampersand) & < (less than) < (greater than) > Su...

  8. 85 marksCSS selectors class and idAnswer

    How class selector is different from id selector while defining the CSS for HTML? Support your answer with example. [5]

    Feature Class Selector ID Selector --------- Syntax symbol . (dot) (hash) HTML attribute class="..." id="..." Reusability Can be applied to multiple elements Must be unique per page (only one element) Specificity Lower specificity Higher...

  9. 95 marksJavaScript user defined objectsAnswer

    Create a user-defined object Student in JavaScript. The object should have attributes with values as Name= "Ram", Age=20,DOB=2003/02/03 respectively. Now display the result retrieving the attributes. [5]

    User-Defined Object Student in JavaScript

    Code

    // Creating a user-defined object 'Student' using object literal notation
var Student = {
    Name: "Ram",
    Age: 20,
    DOB: "2003/02/03"
};

// Displaying / Retrieving the attributes of the Student object
document.write("Student Details: ");
document.write("Name: " + Student.Name + " ");
document.write("Age: " + Student.Age + " ");
document.write("DOB: " + Student.DOB + " ");

    Output

    Student Details:
Name: Ram
Age: 20
DOB: 2003/02/03

    Explanation

    StepDescription
    Object CreationA user-defined object Student is created using object literal notation { }
    AttributesName, Age, and DOB are the properties (attributes) of the object with their respective values
    Dot NotationStudent.Name, Student.Age, Student.DOB are used to retrieve the attribute values
    displaydocument.write() is used to display the retrieved values on the webpage

    Alternative: Using Constructor Function

    // Creating Student object using Constructor Function
function Student(Name, Age, DOB) {
    this.Name = Name;
    this.Age = Age;
    this.DOB = DOB;
}

// Creating an instance of Student
var s1 = new Student("Ram", 20, "2003/02/03");

// Retrieving and displaying attributes
document.write("Name: " + s1.Name + " ");
document.write("Age: " + s1.Age + " ");
document.write("DOB: " + s1.DOB + " ");

    Note: In JavaScript, objects can be created using object literals, constructor functions, or the class keyword. The object literal method is the simplest and most commonly used approach for creating a single object.

  10. 105 marksPrompt and alert dialog boxesAnswer

    Write JavaScript program that will take your name as input using prompt and display the name using alert in alert box. [5]

    --- Statement Description ------------------------ prompt("...") Displays a dialog box that takes input from the user and returns it as a string var name = prompt(...) Stores the entered name into the variable name alert("Hello, " + name...

  11. 115 marksXPath query languageAnswer

    Discuss the use of XQuery and XPath in XML. [5]

    Note: The reference notes did not contain material on this topic. The following answer is based on standard, correct computer science knowledge appropriate for BSc CSIT curriculum. --- XPath is a query language used to navigate through e...

  12. 125 marksStatic websites versus dynamic websitesAnswer

    What is XML Tree? Differentiate static website from dynamic website. [5]

    --- An XML Tree is a hierarchical tree structure that represents the structure of an XML document. Every XML document forms a tree structure starting from the root element, with all other elements branching out as child nodes. - An XML d...

Keep going

Important questions + predictions
Full syllabusFlashcards and practice

Other papers

2081 paper2080 paper2079 paper