IP1 (CP 221) UE 2020-2021 SOLVED INTERACTIVE

Internet Programming and Applications - Exam

UNIVERSITY OF DODOMA

ACADEMIC YEAR 2020/2021

UE Paper

---

SECTION A: (15 MARKS)

Question One: Multiple Choice

i. Which tag is used to display text in title bar of a web document?
(0.5 Marks)

• A. Body tag
• B. Meta tag
• C. Title tag
• D. Comment tag
• E. Head tag

Answer (Click to show)

C. Title tag

ii. Which tag is used to identify the keywords describing the site?
(0.5 Marks)

• A. Comment tag
• B. Title tag
• C. Meta tag
• D. Anchor tag
• E. Heading tape

Answer (Click to show)

C. Meta tag

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

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

Answer (Click to show)

D. innerHTML

iv. Which is the correct way to link to an external stylesheet from a web page?
(0.5 Marks)

• 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>
• E. <a href = "stylesheet" type="text/css"></a>

Answer (Click to show)

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

v. Which JavaScript function is used to open a small window for user input?
(0.5 Marks)

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

Answer (Click to show)

B. prompt()

vi. jQuery is a:
(0.5 Marks)

• A. JavaScript Library
• B. JavaScript Language
• C. JavaScript Method
• D. PHP Method
• E. JavaScript function

Answer (Click to show)

A. JavaScript Library

vii. Which sign does jQuery use as a shortcut for jQuery?
(0.5 Marks)

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

Answer (Click to show)

C. the $ sign

viii. $(document).ready(function() { // Some code. }); The above code is used to:
(0.5 Marks)

• 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
• E. Make sure no function will execute till the entire page is loaded.

Answer (Click to show)

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

ix. Which property in JavaScript would you use to redirect visitor to another page?
(0.5 Marks)

• A. window.location.href
• B. document.href
• C. java.redirect.url
• D. link.redirect.href
• E. document.findElementById()

Answer (Click to show)

A. window.location.href

x. Which of the following jQuery method is used to attach a handler to an event?
(0.5 Marks)

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

Answer (Click to show)

C. bind () method

---

Question Two: Matching

HTML5 introduces a number of new elements and attributes tag: help in building a modern website. Match the HTML5 element in Column A with its corresponding description in Column B. (0.5 Marks Each)

Column A	Column B
I. Section	A. This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
II. Article	B. Represents a measurement, such as disk usage.
III. Aside	C. Improve the performance of our websites by avoiding the need to download images off the network.
IV. Header	D. Element represents a run of text in one document marked or highlighted for reference purposes.
V. Footer	E. This tag represents a generic document or application. It can be used together with labels to indicate the document structure.
VI. Nav	F. This tag can be used to mark up a conversation.
VII. Figure	G. This tag represents a section of the document intended for naviagation.
VIII. Mark	H. This tag contain information about the author, copyright information, etc.
IX. Canvas	I. Defines a video file.
X. Meter	J. Represents some type of output, such as from a calculation done through scripting.
	K. This tag represents the header of a section.
	L. This tag represents an independent piece of content of a document, such as a blog entry or newspaper.
	M. This tag represents a piece of content that is only slightly related to the rest of the page.

Answer (Click to show)

i. Section → E. This tag represents a generic document or application. It can be used together with h1-h6 to indicate the document structure.
ii. Article → L. This tag represents an independent piece of content of a document, such as a blog entry or newspaper.
iii. Aside → M. This tag represents a piece of content that is only slightly related to the rest of the page.
iv. Header → K. This tag represents the header of a section.
v. Footer → H. This tag contain information about the author, copyright information, etc.
vi. Nav → G. This tag represents a section of the document intended for navigation.
vii. Figure → A. This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
viii. Mark → D. Element represents a run of text in one document marked or highlighted for reference purposes.
ix. Canvas → C. Improve the performance of our websites by avoiding the need to download images off the network.
x. Meter → B. Represents a measurement, such as disk usage.

---

Question Three: Short Answer

i. What HTML tag is used to insert a copyright symbol in a web page?
(1 Mark)

Answer (Click to show)

©

ii. How do we comment HTML code in an HTML page?
(1 Mark)

Answer (Click to show)

<!-- This is a comment -->

iii. Why do we need to mention <!DOCTYPE HTML> at the beginning of an HTML page?
(1 Mark)

Answer (Click to show)

To declare the document type and ensure the browser renders the page in standards mode.

iv. Which html tag is used to produce a horizontal line on a webpage?
(1 Mark)

Answer (Click to show)

<hr>

v. Why do we need to include an alt attribute on img tags?
(1 Mark)

Answer (Click to show)

To provide alternative text for screen readers and when the image fails to load.

---

SECTION B: (45 MARKS)

Question Four: Exam Results Analysis

College of Natural and Mathematical Sciences (CNMS) offers a course that prepares students in improving skills of research into different statistical techniques applied during data processing, analysis and practical interpretation of the result. Last year, several students who completed this course took the final exam. Naturally, the college wants to know how well its students performed. You have been asked to write a program (using Javascript and HTML) to summarize the result. You have been given a list of 10 students, next to each name is written 1 if the student passed the exam or 2 if the student failed.

Your program should analyse the results of the exam as follows:

(1) Input each test result (i.e., a 1 or a 2). Display the message “Enter result” each time the program requests another test result. (2) Count the number of test results of each type. (3) Display a summary of the test results indicating the number of students who passed and the number of students who failed.

(4) If more than eight students passed the exam, print the message “Raise tuition”.
(15 Marks)

Answer (Click to show)

<!DOCTYPE html>
<html>
<head>
  <title>Exam Results Analysis</title>
</head>
<body>
  <script>
    let passes = 0;
    let failures = 0;
 
    for (let i = 1; i <= 10; i++) {
      let result = parseInt(prompt("Enter result (1 = pass, 2 = fail)"));
      
      if (result === 1) {
        passes++;
      } else if (result === 2) {
        failures++;
      } else {
        alert("Invalid input! Enter 1 or 2.");
        i--; // Retry this iteration
      }
    }
 
    document.write(`<h2>Summary</h2>`);
    document.write(`<p>Passes: ${passes}</p>`);
    document.write(`<p>Failures: ${failures}</p>`);
 
    if (passes > 8) {
      document.write("<p>Raise tuition</p>");
    }
  </script>
</body>
</html>

---

Question Five: University Feedback Form

The University of Dodoma has asked you to create a program that allows prospective students to provide feedback about their campus visit. Your program should contain a form with text boxes for name, address and email. Provide checkboxes that allow prospective students to indicate what they liked most about the campus. The checkboxes should include: students, location, campus, atmosphere, dorm rooms and sports. Also, provide radio buttons that ask the prospective student how they became interested in the university. Options should include: friends, television, Internet and other. In addition, provide a text area for additional comments, submit and reset buttons and JavaScript function to validate each form field. The JavaScript validation should consider both form and data validation. (15 Marks)

Answer (Click to show)

<!DOCTYPE html>
<html>
<head>
  <title>Campus Visit Feedback</title>
  <script>
    function validateForm() {
      const name = document.forms["feedbackForm"]["name"].value;
      const address = document.forms["feedbackForm"]["address"].value;
      const email = document.forms["feedbackForm"]["email"].value;
      const interests = document.querySelectorAll('input[name="interest"]:checked');
      const comments = document.forms["feedbackForm"]["comments"].value;
 
      if (!name || !address || !email) {
        alert("All fields are required.");
        return false;
      }
 
      if (interests.length === 0) {
        alert("Please select at least one interest.");
        return false;
      }
 
      if (!document.querySelector('input[name="source"]:checked')) {
        alert("Please select how you became interested.");
        return false;
      }
 
      return true;
    }
  </script>
</head>
<body>
  <h1>Campus Visit Feedback</h1>
  <form name="feedbackForm" onsubmit="return validateForm()">
    <label>Name:</label>
    <input type="text" name="name"><br>
    
    <label>Address:</label>
    <input type="text" name="address"><br>
    
    <label>Email:</label>
    <input type="email" name="email"><br>
    
    <label>What did you like most?</label><br>
    <input type="checkbox" name="interest" value="students"> Students<br>
    <input type="checkbox" name="interest" value="location"> Location<br>
    <input type="checkbox" name="interest" value="campus"> Campus<br>
    <input type="checkbox" name="interest" value="atmosphere"> Atmosphere<br>
    <input type="checkbox" name="interest" value="dorm"> Dorm Rooms<br>
    <input type="checkbox" name="interest" value="sports"> Sports<br>
    
    <label>How did you become interested?</label><br>
    <input type="radio" name="source" value="friends"> Friends<br>
    <input type="radio" name="source" value="television"> Television<br>
    <input type="radio" name="source" value="internet"> Internet<br>
    <input type="radio" name="source" value="other"> Other<br>
    
    <label>Additional Comments:</label><br>
    <textarea name="comments"></textarea><br>
    
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</body>
</html>

---

Question Six: CSS Rules

By referring to CSS, accomplish the following

i. Write a CSS rule that makes all text 1.5 times larger than the base font of the system and color the text red.
(3 Marks)

Answer (Click to show)

body {
  font-size: 1.5em;
  color: red;
}

ii. Write a CSS rule that places a background image halfway down the page, tiling it horizontally. The image should remain in place when the user scrolls up or down.
(3 Marks)

Answer (Click to show)

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

iii. Write a CSS rule that gives all h1 and h2 elements a padding of 0.5ems, dashed border style and a margin of 0.5 ems.
(3 Marks)

Answer (Click to show)

h1, h2 {
  padding: 0.5em;
  border: 1px dashed;
  margin: 0.5em;
}

iv. Write a CSS rule that changes the color of all elements containing attribute class=“green-Move” to green and shift them down 25 pixels and right 15 pixels.
(3 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 divs 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 where your divs are.
(3 Marks)

Answer (Click to show)

<!DOCTYPE html>
<html>
<head>
<style>
  header, .column {
    border: 1px solid black;
    padding: 10px;
    margin: 5px;
  }
  header {
    background-color: #f0f0f0;
  }
  .column {
    width: 45%;
    float: left;
    background-color: #e0e0e0;
  }
  .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>

---

Question Seven: jQuery 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. (3 Marks Each)

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

Answer (Click to show)

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

ii. document.getElementById("myImage").src = "landscape.jpg";
(3 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');

ii. 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');

iii. 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