Scribd
Upload
6 views8 pages

CSIT128 Week 10 Revision, Solution

The document contains a series of sample exam questions and answers related to XML, DTD, HTML, JavaScript, SQL, and AJAX. It includes tasks such as creating DTD documents for XML files, writing HTML forms with validation, and performing SQL operations on a student table. Additionally, it provides JavaScript code for dynamic web page interactions and AJAX calls to fetch and display JSON data.

Uploaded by

k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views8 pages

CSIT128 Week 10 Revision, Solution

The document contains a series of sample exam questions and answers related to XML, DTD, HTML, JavaScript, SQL, and AJAX. It includes tasks such as creating DTD documents for XML files, writing HTML forms with validation, and performing SQL operations on a student table. Additionally, it provides JavaScript code for dynamic web page interactions and AJAX calls to fetch and display JSON data.

Uploaded by

k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Sample questions from previous exam papers

Q1.
Given the following XML file student.xml
<?xml version="1.0" encoding="UTF-8"?>
<studentList>

<student>
<firstName>John</firstName>
<lastName>Smith</lastName>
<email>jsmith@gmail.com</email>
<mobile>0211223344</mobile>
<points> 100 </points>
<address> DXB</address>
</student>

<student>
<firstName>Jiiii</firstName>
<lastName>Sdgfdgfd</lastName>
<email>jsmith@gmail.com</email>
<mobile>0211223344</mobile>
<points> 100 </points>
<address> DXB</address>
</student>

</studentList>

Write an DTD document for the above xml file.

Answer
<!DOCTYPE studentList [
<!ELEMENT studentList(student*)
<!ELEMENT student (firstName, lastName, email, mobile, points, address)>
<!ELEMENT firstName (#PCDATA)>
<!ELEMENT lastName (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT mobile (#PCDATA)>
<!ELEMENT points (#PCDATA)>
<!ELEMENT address (#PCDATA)>
]>

Q2
Question 1 (10 marks): XML and DTD
Given the following DTD file student.dtd
<?xml version="1.0" encoding="UTF-8" ?>
<?xsl-stylesheet type=”text/xsl” href=”menu.xsl”?>
<!DOCTYPE menu[
<!ELEMENT menu (foodItems+,milkshakes+)>
<!ELEMENT fooditems (name, cost ,calories ,description)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT cost (#PCDATA)>
<!ELEMENT calories (#PCDATA)>
<!ELEMENT description (#PCDATA)>
<!ELEMENT milkshakes (name, cost, calories, description)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT cost (#PCDATA)>
<!ELEMENT calories (#PCDATA)>
<!ELEMENT description (#PCDATA)>
<!ATTLIST foodItems idNumber CDATA #REQUIRED>
<!ATTLIST milkshakes milkType CDATA #REQUIRED>
<!ENTITY a "Add">
<!ENTITY u "Update">
<!ENTITY d "Delete">
]>
Write an XML document which conforms to the above DTD file.

Answer
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE menu SYSTEM "student.dtd">
<menu>
<foodItems idNumber="1">
<name>French Fries</name>
<cost>13 dhs </cost>
<calories>120</calories>
<description> Crispy golden potato sticks.</ description>
</foodItems>
<foodItems idNumber="2">
<name>Hot dog</name>
<cost>10 dhs</cost>
<calories>215</calories>
<description> Grilled sausages in soft buns, topped with various
condiments.</description>
</foodItems>
<milkshakes milkType="Cow’s Milk">
<name> Classic Vanilla Milkshake</name>
<cost>20 dhs</cost>
<calories>260</calories>
<description>Rich and creamy vanilla milkshake.</description>
</milkshakes>
<milkshakes milkType="Almond Milk">
<name> Banana Almond Shake</name>
<cost>213</cost>
<calories>400</calories>
<description>Refreshing banana almond milkshake.</description>
</milkshakes>
</menu>

Q3. Question 4 (20 marks): HTML and Javascript


Write HTML and Javascript codes so that the web page originally displays the number 5.
There are two buttons “+” and “-” . When the user clicks on the “+” button, the number is
increased by 5, and when the user clicks on the “-” button, the number is decreased by 5.

Answer
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style>
button {
font-size: 20px;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Number:</h2>
<h3 id="number">5</h3>

<button onclick="increase()">+</button>
<button onclick="decrease()">-</button>

<script>
let x = 5;

function increase() {
x += 5;
updateNumber();
}

function decrease() {
x -= 5;
updateNumber();
}

function updateNumber() {
document.getElementById("number").innerText = x;
}
</script>
</body>
</html>

Question 5 ( 10 Marks ):JavaScript function


We want to have two input fields. One for email and another one for email confirmation. User has to
fill in the same email for both input fields. The html code is given below. Write a javaScript function
validateForm() that will check that the email address are both the same and also that none of them is
empty. Trailing or leading spaces should be ignored.
<form action="myService" method="get" onSubmit="return
validateForm()">
Email: <input id="email" type="text" name="email">
<span id="emailError"></span>
<br />
Email again: <input id="email2" type="text" name="email2">
<span id="emailError2"></span>
<br /> <br />
<input type="submit" value="Submit">
</form>

Answer
<script>
function validateForm() {
var email1 = document.getElementById("email").value.trim();
var email2 = document.getElementById("email2").value.trim();

document.getElementById("emailError").innerHTML = "";
document.getElementById("emailError2").innerHTML = "";

if (email1 === "") {


document.getElementById("emailError").innerHTML = "Email is required";
return false;
}

if (email2 === "") {


document.getElementById("emailError2").innerHTML = "Email confirmation is required";
return false;
}

if (email1 !== email2) {


document.getElementById("emailError2").innerHTML = "Emails do not match";
return false;
}

return true;
}
</script>

Question 6 (15 marks):


Write HTML code so that the web page has a form for student to pay university fee by credit
card. The form has the following text fields:
- Student number: should have exactly 7 digits, for example, 9512345
- Amount to pay: should have the format [dollars].[cents] where the cent part should contain
exactly 2 digits, for example, 420.50
- Credit card number: should have the format XXXX-XXXX-XXXX-XXXX, for example, 1234-
0123-4567-8901
- Expiry date: should have the format MM/YYYY, for example, 02/2018
- Full name on credit card: this should not be empty

Your solution should use the pattern attribute for input element.
Specify which method the form should use, method="get" or method="post", and the reason
why.

Answer
<!DOCTYPE html>
<html>
<head>
<title>University Fee Payment</title>
</head>
<body>

<h2>University Fee Payment</h2>

<form action="process_payment.php" method="post">


<label for="studentNumber">Student Number:</label>
<input type="text" id="studentNumber" name="studentNumber" pattern="[0-9]{7}"
placeholder="e.g., 9512345" required>
<br>
<br>

<label for="amountToPay">Amount to Pay:</label>


<input type="text" id="amountToPay" name="amountToPay" pattern="^\d+\.\d{2}$"
placeholder="e.g., 420.50" required>
<br>
<br>

<label for="creditCardNumber">Credit Card Number:</label>


<input type="text" id="creditCardNumber" name="creditCardNumber" pattern="\d{4}-\
d{4}-\d{4}-\d{4}" placeholder="e.g., 1234-0123-4567-8901" required>
<br>
<br>

<label for="expiryDate">Expiry Date:</label>


<input type="text" id="expiryDate" name="expiryDate" pattern="(0[1-9]|1[0-2])\/[0-9]{4}"
placeholder="e.g., 02/2018" required>
<br>
<br>

<label for="fullName">Full Name on Credit Card:</label>


<input type="text" id="fullName" name="fullName" pattern=".*\S+.*" required>
<br>
<br>

<button type="submit">Submit</button>
</form>

</body>
</html>

7. Consider the Student table given below


ID STUDENT_NUMBER FIRST_NAME LAST_NAME DOB
1 2020567 James Patel 20/01/1990
2 9740543 John Smith 29/05/1985
3 2112345 Matt Brown 10/07/1987
4 3078901 Mary Williams 12/05/1992
Write SQL statements for the following
1) Display the first name and Date of birth of all students in the table.
2) Change the last name of student with id 2020567 to Frank.
3) Delete the record with student number 212345

Answers
1)
SELECT FIRST_NAME,
DOB
FROM STUDENT;

2)
UPDATE STUDENT
SET LAST_NAME = ‘FRANK’
WHERE STUDENT_NUMBER = 2020567;

3)
DELETE FROM STUDENT
WHERE STUDENT_NUMBER = 2112345;

Question 4 (10 marks): AJAX with JSON

Assume that there is a JSON file, called student.json, which consists of information given below.
{"List":[{
"name":"John",
"age":31,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
]
}
,
{"name":"ppp",
"age":31,
"pets":[
{ "animal":"fish", "name":"goldie" },
{ "animal":"cat", "name":"Fenolix" }
]
:
:
:
}
]
}

Write HTML and JavaScript codes that will do the following:


There is a button “Load Subject Information”. When the user clicks on this button, make an Ajax call to
get the subject information from the json file. The person information should be displayed in a table as
given below. Use three separate method to perform the required task.

Age Name No. of pets


31 John 3
31 ppp 2
25 Shawn 4

Answer
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
<button onclick="loadSubjectInformation()">Load Student Information</button>
<div id="studentDiv"></div>

<script>
function loadSubjectInformation() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
processResult(this);
}
};
xhttp.open("GET", "student.json", true);
xhttp.send();
}

function processResult(xhttp) {
var jsonText = xhttp.responseText;
var studentObj = JSON.parse(jsonText);
display(studentObj);
}

function display(studentObj) {
var html = "<h1>Student Information</h1>";
html += "<table border='1'>";
html += "<tr><th>Age</th><th>Name</th><th>No. of Pets</th></tr>";

for (var i = 0; i < studentObj.List.length; i++) {


html += "<tr>";
html += "<td>" + studentObj.List[i].age + "</td>";
html += "<td>" + studentObj.List[i].name + "</td>";
html += "<td>" + studentObj.List[i].pets.length + "</td>";
html += "</tr>";
}

html += "</table>";
var studentDiv = document.getElementById("studentDiv");
studentDiv.innerHTML = html;
}
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy