School of Computer Science and Engineering


Module:                   Advanced Client-side Web Development

Module Code:         5COSC015W

Module Leader:          Anne-Gaelle Colom

Date:                           23rd November 2020

Start:                           16.00am

Time allowed:             2h40

Instructions for Candidates:

You are advised (but not required) to spend the first ten minutes of the examination reading the questions and planning how you will answer those you have selected


Question 1. HTML5

Highlight on your Portfolio code five HTML5 elements (that did not exist in HTML4) that you used for your page content (i.e. only elements that are part of the body of the page), and explain how you used these elements correctly.

15 marks


Question 2. CSS3 and your Portfolio

A. Highlight on your Portfolio code, using the letters below as label, where you used the following CSS3 selectors. In your answer book, explain in plain English the effect of each declaration you specified.

a. Fonts (3)

b. Text Effect (3)

c. Attribute selector (3)

d. Pseudo elements for generated content in at least one place on your site (3)

e. Structural selectors (3)

f. Negation pseudo class (3)

g. Gradient (3)

h. Border (3)

i. Transforms or Animations (3)

27 marks


Question 3. HTML5, CSS, jQuery and jQuery UI

A. Consider the HTML code below:

    <div class="homepage-wrapper">

        <h2>Welcome to Anne’s Chocolates</h2>

        <p>Order a box of delicious chocolates for as little as

    <span>£12.99</span></p>

    </div>

    Use jQuery to select the span element containing the price, and change the price to £10.00 using the text() method.

4 marks

B. Consider the HTML code below (Original HTML code section):

        <div id="chocolates">

            <h1>Anne’s Chocolates</h1>

            <ul>

                <li class="box dark">

                    <h2>Dark Chocolate Box</h2>

                    <span class="details">£18.99 for 32 Dark Chocolates,

        including UK-wide delivery</span>

                    <button class="buy">Buy Now</button>

                </li>

            </ul>

        </div>

and jQuery code:

        $('button').on('click', function() {

                    var message = $('<div>The Dark Chocolate Box has been

                    added to your basket</div>');

                    $('.box').append(message);

                    $('button').remove();

        });

a) What jQuery selector would allow you to select all list items with the class dark?

2 marks

b) Write the HTML code result after the button has been clicked, and briefly explain how the execution of the jQuery code changed in the original HTML code section.

6 marks

c) In the HTML code we are now adding another type of chocolates so the HTML code now looks like this:

    <div id="chocolates">

        <h1>Anne’s Chocolates</h1>

        <ul>

            <li class="box dark">

                <h2>Dark Chocolate Box</h2>

                <span class="details">£18.99 for 32 Dark Chocolates,

    including UK-wide delivery</span>

                <button class="buy">Buy Now</button>

            </li>

            <li class="box milk">

                <h2>Milk Chocolate Box</h2>

                <span class="details">£17.99 for 32 Milk Chocolates,

    including UK-wide delivery</span>

                <button class="buy">Buy Now</button>

            </li>


        </ul>

    </div>

The message when the Dark Chocolate Box button is clicked should be the same as before, and when the Milk Chocolate Box button is clicked should be the Milk Chocolate Box has been added to your basket. Modify the JavaScript code to make this change in functionality, by creating a second message string appending it in the right place on button click. Note that only the button clicked must be affected on the click event. The other button remains unchanged. Provide the new JavaScript code and briefly explain your changes to the original JavaScript code.

8 marks

d) Refactor your JavaScript code to now use the text in the h2 above the clicked button to compose the message. Provide the new JavaScript code and briefly explain your changes to the previous code.

4 marks

e) Replace all the default html buttons on the page with a jQuery UI button. Briefly explain the steps required to accomplish this.

3 marks

f) Add a navigation bar at the top, using the standard HTML5 code, (using the appropriate HTML5 tags and making the navigation elements 3 list items of an unordered list, allowing the user to navigate to link1.html link2.html and link3.html (the text of the list items can be link1, link2, link3. Do not add any ids or classes.

3 marks

g) Add CSS to style the navigation bar so that it takes 90% of the width of the page. The list items of only the nav bar (choose your selector carefully) are bold, appear horizontally without bullet points and are aligned towards the right of the page. The text of the links should appear in upper case and without the default underline. The links in the navbar should also have a semi-transparent text colour of your choice. On hover, change the text colour of the links to the solid colour (same colour without the transparency) and add a border at the bottom of the text of the same colour.

Above each selector and statement, add a comment to explain which selector you are using and why, making reference to specificity in the context of CSS selectors, to only target the list items in the navigation bar, without the use of classes or ids. Also add a comment to explain the effect of each statement.

For example:

/* selecting all list items with the class tour on the page, giving it a higher specificity than any number of elements without a class. As there are no other list items with a class on the page, this guarantees that only the list items for guided tours will be affected by this rule */

li.tour {

 /* adding a thin solid border around the guided tours of a dark grey colour */

 border: solid #212032 thin;

}

28 marks