IP1 (CP 221) UE 2021-2022 SOLVED INTERACTIVE

Internet Programming and Applications - Exam

UNIVERSITY OF DODOMA

ACADEMIC YEAR 2021/2022

---

SECTION A: (15 MARKS)

Question One: Multiple Choice

i. Which tag is used to identify the keywords describing the site?
(1 Mark)

• A. Comment tag
• B. Title tag
• C. Meta tag
• D. Anchor tag

Answer (Click to show)

C. Meta tag

ii. Which property of a page element (eg a div) is used by JavaScript to alter the content of a page after it has loaded?
(1 Mark)

• A. value
• B. text
• C. firstChild
• D. innerHTML

Answer (Click to show)

D. innerHTML

iii. Which is the correct way to link to an external stylesheet from a web page?
(1 Mark)

• A. <link rel = "stylesheet" type = "text/css" src = "styles.css" />
• B. <link rel = "stylesheet" type = "text/css" href = "styles.css" />
• C. <style href = "styles.css" type = "text/css" />
• D. <style div{color: blue;} </style>

Answer (Click to show)

B. <link rel = "stylesheet" type = "text/css" href = "styles.css" />

iv. Which JavaScript function is used to open a small window for user input?
(1 Mark)

• A. alert()
• B. prompt()
• C. document.write()
• D. init()

Answer (Click to show)

B. prompt()

v. Which sign does jQuery use as a shortcut for jQuery?
(1 Mark)

• A. the % sign
• B. the ? Sign
• C. the $ sign
• D. the #sign

Answer (Click to show)

C. the $ sign

vi. $(document).ready(function() { // Some code. }); The above code is used to:
(1 Mark)

• A. Make sure no code is executed till the entire page is fully loaded
• B. Make sure no code is executed till the DOM is fully loaded
• C. Make sure no browser will open till the DOM is fully loaded.
• D. Both A and B

Answer (Click to show)

B. Make sure no code is executed till the DOM is fully loaded

vii. Which property in JavaScript would you use to redirect visitor to another page?
(1 Mark)

• A. window.location.href
• B. document.href
• C. java.redirect.url
• D. link.redirect.href

Answer (Click to show)

A. window.location.href

viii. Which of the following jQuery method is used to attach a handler to an event?
(1 Mark)

• A. unbind () method
• B. attach () method
• C. bind () method
• D. None of the above

Answer (Click to show)

C. bind () method

ix. $(this) in jQuery is used when:
(1 Mark)

• A. an HTML element references the entire document
• B. an HTML element references its own action
• C. an HTML element references the action of its parent element
• D. All of the above

Answer (Click to show)

B. an HTML element references its own action

x. Which type of JavaScript language is?
(1 Mark)

• A. Object-Oriented
• B. Object-Based
• C. Assembly-language
• D. High-level

Answer (Click to show)

B. Object-Based

---

Question Two: Fill in the Blanks

a. ______ tag contain information about the author, copyright information, etc.
(1 Mark)

Answer (Click to show)

<footer>

b. ______ tag can be used to mark up a conversation.
(1 Mark)

Answer (Click to show)

<dialog>

c.______ represents a measurement, such as disk usage.
(1 Mark)

Answer (Click to show)

<meter>

d. ______ improve the performance of our websites by avoiding the need to download images off the network.
(1 Mark)

Answer (Click to show)

<canvas>

e. ______ element represents a run of text in one document marked or highlighted for reference purposes.
(1 Mark)

Answer (Click to show)

<mark>

f. ______ tag represents a section of the document intended for navigation.
(1 Mark)

Answer (Click to show)

<nav>

g. ______ tag represents a piece of content that is only slightly related to the rest of the page.
(1 Mark)

Answer (Click to show)

<aside>

h. ______ tag represents an independent piece of content of a document, such as a blog entry or newspaper.
(1 Mark)

Answer (Click to show)

<article>

i. ______ tag represents a generic document or application. It can be used together with h1-h6 to indicate the document structure.
(1 Mark)

Answer (Click to show)

<section>

j. ______ tag can be used to associate a caption together with some embedded content, such as a graphic or video.
(1 Mark)

Answer (Click to show)

<figure>

---

Question Three: True or False

a. JavaScript is a compiled language
(1 Mark)

Answer (Click to show)

False

b. With an external style sheet, you can change the look of an entire website by changing just one file.
(1 Mark)

Answer (Click to show)

True

c. jQuery can be used to create AJAX applications.
(1 Mark)

Answer (Click to show)

True

d. Using the Javascript const keyword to declare a variable ensures that it will not be reassigned within its scope.
(1 Mark)

Answer (Click to show)

True

e. HTML is used to create the structure of a web page.
(1 Mark)

Answer (Click to show)

True

f. jQuery is a replacement for JavaScript.
(1 Mark)

Answer (Click to show)

False

g. Some browsers do not support images. In this case, the alt attribute can be used to create text that appears instead of the image.
(1 Mark)

Answer (Click to show)

True

h. When a Web browser displays a table, it often adds extra space. To eliminate this space use the width attribute in the <table> and <td> tags.
(1 Mark)

Answer (Click to show)

False

i. A fontfamily is a set of fonts that have similar characteristics
(1 Mark)

Answer (Click to show)

True

j. jQuery Method Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
(1 Mark)

Answer (Click to show)

True

---

Question Four: CSS Rules

i. Make all text in the body of the document double the normal size and color the text red.
(2 Marks)

Answer (Click to show)

body {
  font-size: 200%;
  color: red;
}

ii. Place a background image halfway down the page, tiling it horizontally. The image should remain in place as the user scrolls up or down.
(2 Marks)

Answer (Click to show)

body {
  background-image: url('image.jpg');
  background-position: 50% 0;
  background-repeat: repeat-x;
  background-attachment: fixed;
}

iii. All h1 and h2 elements in the web page should have the following styles applied: a padding of 0.5 ems, a dashed border style, and a margin of 0.5 ems.
(2 Marks)

Answer (Click to show)

h1, h2 {
  padding: 0.5em;
  border-style: dashed;
  margin: 0.5em;
}

iv. Change the color of all elements with the “green-move” class to green, and shift them down 25 pixels and to the right 15 pixels.
(2 Marks)

Answer (Click to show)

.green-move {
  color: green;
  position: relative;
  top: 25px;
  left: 15px;
}

v. Write a layout template that contains a header and two columns. Use division tags for each layout component, and use float to line up the columns side by side. Give each component a border and or a background color so you can see in which division tag you are.
(2 Marks)

Answer (Click to show)

<!DOCTYPE html>
<html>
<head>
<style>
  header, .column {
    border: 1px solid black;
    background-color: #f0f0f0;
  }
  .column {
    width: 48%;
    float: left;
    margin: 1%;
  }
  .clear {
    clear: both;
  }
</style>
</head>
<body>
  <header>Header Content</header>
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="clear"></div>
</body>
</html>

---

SECTION B: (60 MARKS)

Question Five: Pregnant Mothers Web Application

Assume you are a front-end developer and you are tasked to create a web application that stores information about pregnant mothers. The application needed to capture the following details about each pregnant mother: first name, middle name, surname, email address, and phone number.

During the development process, the client added a requirement to also capture information about the pregnancy. Specifically, the application needed to determine whether the pregnancy was a twin or not. If the pregnancy was not a twin, the application should capture the gender and weight of the child.

If the pregnancy was a twin, the application should capture the number of children (i.e., the number of twins could be 2, 3, etc.). For a twin pregnancy, the application should capture the weight and gender of each child. So the number of input fields for gender and weight would depend on the number of twins. For example, if the number of twins is two, then the application should have two input fields each for the gender and weight of the two children.

You were asked to use HTML, CSS, and jQuery to create the form to capture all this information. You also needed to use JavaScript to validate the form, ensuring that no required field is left empty and that the data entered is valid. All fields should be mandatory except the middle name.

(20 Marks)

Answer (Click to show)

HTML Structure:

<!DOCTYPE html>
<html>
<head>
    <title>Pregnancy Information System</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .child-fields { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
        .required { color: red; }
    </style>
</head>
<body>
    <h1>Pregnant Mother Information</h1>
    <form id="pregnancyForm">
        <div>
            <label>First Name: <span class="required">*</span></label>
            <input type="text" id="firstName" required>
        </div>
        <div>
            <label>Middle Name:</label>
            <input type="text" id="middleName">
        </div>
        <div>
            <label>Surname: <span class="required">*</span></label>
            <input type="text" id="surname" required>
        </div>
        <div>
            <label>Email: <span class="required">*</span></label>
            <input type="email" id="email" required>
        </div>
        <div>
            <label>Phone Number: <span class="required">*</span></label>
            <input type="tel" id="phone" required>
        </div>
        
        <div>
            <label>Is this a twin pregnancy? <span class="required">*</span></label>
            <input type="radio" name="twin" value="no" checked> No
            <input type="radio" name="twin" value="yes"> Yes
        </div>
        
        <div id="pregnancyDetails">
            <!-- Dynamic fields will be inserted here -->
        </div>
        
        <button type="submit">Submit</button>
    </form>
 
    <script>
    $(document).ready(function() {
        // Handle twin pregnancy selection
        $('input[name="twin"]').change(function() {
            updatePregnancyFields();
        });
        
        function updatePregnancyFields() {
            const isTwin = $('input[name="twin"]:checked').val() === 'yes';
            $('#pregnancyDetails').empty();
            
            if (!isTwin) {
                // Single pregnancy fields
                $('#pregnancyDetails').append(`
                    <div class="child-fields">
                        <label>Child Gender: <span class="required">*</span></label>
                        <select required>
                            <option value="">Select</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                        
                        <label>Child Weight (kg): <span class="required">*</span></label>
                        <input type="number" step="0.1" required>
                    </div>
                `);
            } else {
                // Twin pregnancy - get number of children
                $('#pregnancyDetails').append(`
                    <div>
                        <label>Number of Children: <span class="required">*</span></label>
                        <input type="number" id="numChildren" min="2" value="2" required>
                    </div>
                    <div id="childrenContainer">
                        <!-- Child fields will be generated here -->
                    </div>
                `);
                
                // Generate initial child fields
                generateChildFields(2);
                
                // Update when number changes
                $('#numChildren').change(function() {
                    generateChildFields(parseInt($(this).val()));
                });
            }
        }
        
        function generateChildFields(num) {
            $('#childrenContainer').empty();
            for (let i = 1; i <= num; i++) {
                $('#childrenContainer').append(`
                    <div class="child-fields">
                        <h4>Child ${i}</h4>
                        <label>Gender: <span class="required">*</span></label>
                        <select required>
                            <option value="">Select</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                        
                        <label>Weight (kg): <span class="required">*</span></label>
                        <input type="number" step="0.1" required>
                    </div>
                `);
            }
        }
        
        // Form validation
        $('#pregnancyForm').submit(function(e) {
            e.preventDefault();
            
            // Basic validation
            let isValid = true;
            $('#pregnancyForm [required]').each(function() {
                if (!$(this).val()) {
                    isValid = false;
                    $(this).addClass('error');
                } else {
                    $(this).removeClass('error');
                }
            });
            
            if (isValid) {
                alert('Form submitted successfully!');
                // Here you would typically send data to server
            } else {
                alert('Please fill all required fields.');
            }
        });
        
        // Initialize fields
        updatePregnancyFields();
    });
    </script>
</body>
</html>

---

Question Six: To-Do List Application

Imagine you are building a web application that allows users to create and manage their personal to-do lists. When a user click “Add” button, a function named “addToDoItem” should be called to allow user to add a new to-do item by entering a task description in an input field.

When the user adds a new to-do item, it should be displayed in a table with id=”list-items”. Each to-do item in the list should have a checkbox to mark it as completed, and a “Delete” button. When the user clicks the checkbox for a to-do item, a function named “completeTask” should to called to visually indicated the task as completed (by adding a strikethrough to the text). When the user clicks the “Delete” button for a to-do item, the application should call a function “deleteItem” which confirm the deletion with the user before removing the item the from the list.

Use DOM and BOM manipulations to implement the above functionalities. (20 Marks)

Answer (Click to show)

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <style>
        .completed {
            text-decoration: line-through;
            color: gray;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Personal To-Do List</h1>
    
    <div>
        <input type="text" id="taskInput" placeholder="Enter task description">
        <button onclick="addTodoItem()">Add</button>
    </div>
    
    <table id="list-items">
        <thead>
            <tr>
                <th>Completed</th>
                <th>Task</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="taskList">
        </tbody>
    </table>
 
    <script>
        let taskId = 1;
 
        function addTodoItem() {
            const taskInput = document.getElementById('taskInput');
            const taskDescription = taskInput.value.trim();
            
            if (taskDescription === '') {
                alert('Please enter a task description.');
                return;
            }
            
            const taskList = document.getElementById('taskList');
            const newRow = document.createElement('tr');
            newRow.id = 'task-' + taskId;
            
            newRow.innerHTML = `
                <td><input type="checkbox" onchange="completeTask(${taskId})"></td>
                <td id="task-desc-${taskId}">${taskDescription}</td>
                <td><button onclick="deleteItem(${taskId})">Delete</button></td>
            `;
            
            taskList.appendChild(newRow);
            taskInput.value = '';
            taskId++;
        }
        
        function completeTask(id) {
            const taskDesc = document.getElementById('task-desc-' + id);
            const checkbox = document.querySelector(`#task-${id} input[type="checkbox"]`);
            
            if (checkbox.checked) {
                taskDesc.classList.add('completed');
            } else {
                taskDesc.classList.remove('completed');
            }
        }
        
        function deleteItem(id) {
            if (confirm('Are you sure you want to delete this task?')) {
                const taskElement = document.getElementById('task-' + id);
                if (taskElement) {
                    taskElement.remove();
                }
            }
        }
    </script>
</body>
</html>

---

Question Seven: Car Gallery with jQuery

Mr. Siphael is selling his car online. He has taken several photos of the car’s exterior and interior, and he wants to display them on a webpage so potential buyers can view the car. He would like the webpage to have a large main image area that displays the selected photo, and a set of thumbnail images that the user can click to update the main image.

Write the necessary code in a file called ‘car.js’ that uses jQuery to implement the following functionality:

• When the user clicks on a thumbnail image of the car’s exterior, the large exterior shot should be displayed in the main image area (the image with the ID ‘car’).

• When the user clicks on a thumbnail image of the car’s interior, the large interior shot should be displayed in the main image area.

Assume that the thumbnail images have file names that include the ‘thumb’ substring, and the corresponding large images have the same file names but with the ‘thumb’ substring replaced by ‘large’. (20 Marks)

Answer (Click to show)

car.js

$(document).ready(function() {
    // Handle thumbnail clicks
    $('img[src*="thumb"]').click(function() {
        // Get the source of the clicked thumbnail
        const thumbSrc = $(this).attr('src');
        
        // Replace 'thumb' with 'large' to get the large image source
        const largeSrc = thumbSrc.replace('thumb', 'large');
        
        // Update the main image source
        $('#car').attr('src', largeSrc);
    });
});

HTML Structure (for reference):

<!DOCTYPE html>
<html>
<head>
    <title>Car for Sale</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="car.js"></script>
</head>
<body>
    <div id="main-image">
        <img id="car" src="large-exterior1.jpg" alt="Car Main Image">
    </div>
    
    <div id="thumbnails">
        <!-- Exterior thumbnails -->
        <img src="thumb-exterior1.jpg" alt="Exterior 1">
        <img src="thumb-exterior2.jpg" alt="Exterior 2">
        <img src="thumb-exterior3.jpg" alt="Exterior 3">
        
        <!-- Interior thumbnails -->
        <img src="thumb-interior1.jpg" alt="Interior 1">
        <img src="thumb-interior2.jpg" alt="Interior 2">
        <img src="thumb-interior3.jpg" alt="Interior 3">
    </div>
</body>
</html>

---

Question Eight: jQuery Conversions and Operations

a. Document Object Model (DOM) manipulation is so common with JavaScript, and because the JavaScript to do so can get quite lengthy, people wanted alternatives. One of the alternative is to use jQuery library. Change the following DOM statements to jQuery statements. (4 Marks Each)

i. document.getElementById('colorDiv').style.backgroundColor = 'green'
(4 Marks)

Answer (Click to show)

$('#colorDiv').css('background-color', 'green');

ii. document.getElementById("myImage").src = "landscape.jpg";
(4 Marks)

Answer (Click to show)

$('#myImage').attr('src', 'landscape.jpg');

---

b. You have a CSS file called “myCss.css” as seen in the code snippet below, that defines the styles for various CSS classes, including a class named “large”. You also have an HTML element with the class “center” as seen in the code snippet below. Your task is to write a jQuery statement(s) that will change the style of the element with the class “center” to match the style of the “large” class as defined in the “myCss.css” file.

(4 Marks)

myHtml.html
    <!DOCTYPE html>
    <html>
    <head>
    <script src="myjQuery.js"></script>
    <meta charset="utf-8">
    <meta name="viewport"content="width=device-width">
    <title>Change a CSS class name using jQuery.</title>
    </head>
    <body>
    <p id ="pid" class="center"> jQuery
    Exercise</p>
    <input id="button1" type="button" value="Click to change the Class" />
    </body>
    </html>

myCss.css
p.center {
    text-align: center;
    color: red;
}
p.large {
    font-size: 200%;
}

Answer (Click to show)

$('.center').removeClass('center').addClass('large');

---

c. Consider the code segment below, write a jQuery statement(s) that will change the url property of element with class=“link” from http://example.com to http://cp221.com (4 Marks)

    <!DOCTYPE html>
    <html>
    <head>
    <script src="myjQuery.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    </head>
    <body>
    <a class="link"
    href="http://example.com">Visit
    wiresources/ap
    <p><input id="button1" type="button"
    value="Click to see the actual url"/></p>
    </body>
    </html>

Answer (Click to show)

$('a.link').attr('href', 'http://cp221.com');

d. Consider the code segment below. Write a jQuery statement(s) to get the value of the textbox with property “type=text”. (4 Marks)

<!DOCTYPE html>
<html>
<head>
<script src="myjQuery.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How to get the value of a textbox using jQuery</title>
</head>
<body>
<input type="text" value="Input text here"/>
</body>
</html>

Answer (Click to show)

$('input[type="text"]').val();

---

END OF EXAMINATION PAPER