IP1 (CP 221) UE 2024-2025 SOLVED INTERACTIVE

Internet Programming and Applications - Exam

UNIVERSITY OF DODOMA

COLLEGE OF INFORMATICS AND VIRTUAL EDUCATION ACADEMIC YEAR 2024/2025

SECTION A: (40 MARKS)

Attempt ALL questions in this section

Question One

Fill in the blanks with the correct answer.
(1 Mark Each)

a. In HTML, the tag used to create a hyperlink is called ______.

Answer (Click to show)

<a>

b. The jQuery method used to retrieve the value of an input field is called ______.

Answer (Click to show)

.val()

c. To create a list that does not have numbers, you use the ______ tag.

Answer (Click to show)

<ul>

d. To center a block element, you can set its margins to ______.

Answer (Click to show)

auto

e. A ______ is a collection of properties and methods in JavaScript.

Answer (Click to show)

object

f. To make a responsive design, you can use ______ queries.

Answer (Click to show)

media

g. In JavaScript, the ______ operator checks for both value and type equality.

Answer (Click to show)

** === (strict equality)**

h. To create an animation in jQuery, you can use the ______ method.

Answer (Click to show)

.animate()

i. The ______ function in JavaScript can be used to loop through arrays.

Answer (Click to show)

for loop (or .forEach() method)

j. The ______ method is used to remove an element from the Document Object Model (DOM) in jQuery.

Answer (Click to show)

.remove()

Question Two

a. Outline three (3) places where you can put your JavaScript code during creation of a web page.
(3 Marks)

Answer (Click to show)

Inline: Within the HTML file, inside <script> tags.

Internal: Within the HTML file, inside <script> tags in the <head> or <body> sections.

External: In a separate .js file, linked to the HTML document using the <script src="file.js"> tag.

b. In most websites, HTML, CSS and JavaScript are normally used. Explain each and emphasising on the purpose of their use in a web page.
(6 Marks)

Answer (Click to show)

HTML (HyperText Markup Language): It is the standard markup language used to create the structure and content of a web page. It defines elements like headings, paragraphs, links, images, and forms. Its purpose is to give the page its fundamental skeleton and meaning.

CSS (Cascading Style Sheets): It is a stylesheet language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall visual style of the web page. Its purpose is to make the web page aesthetically pleasing and to control its visual design across different devices.

JavaScript: It is a programming language that enables interactive and dynamic content on web pages. It can be used to manipulate the HTML and CSS, handle user events (like clicks), validate forms, create animations, and communicate with servers. Its purpose is to make web pages responsive and engaging for the user.

c. Outline three (3) ways in which CSS can be integrated into a web page.
(3 Marks)

Answer (Click to show)

Inline CSS: Using the style attribute directly within an HTML element.

Internal CSS: Using the <style> tag within the <head> section of the HTML document.

External CSS: Linking to an external .css file using the <link> tag within the <head> section of the HTML document.

d. Write a JavaScript code that displays the message in Figure 1 and gives an alert if a user clicks a button (click me). Feel free to put any message on the alert.
(3 Marks)

Answer (Click to show)

<!-- HTML -->
<button onclick="showAlert()">Click Me</button>
 
<script>
    // JavaScript
    function showAlert() {
        alert("Button was clicked! Thank you.");
    }
</script>

Question Three

Write true for the correct and false for the incorrect statement.
(1 Mark Each)

a. In jQuery, $(document).ready() is used to run code when the DOM is fully loaded.

Answer (Click to show)

True

b. In CSS, the margin property controls the space inside an element.

Answer (Click to show)

False (The margin controls the space outside an element; padding controls the space inside.)

c. In JavaScript, undefined is a data type.

Answer (Click to show)

True

d. The <canvas> element is used for drawing graphics on the web page.

Answer (Click to show)

True

e. jQuery can be used to create AJAX applications.

Answer (Click to show)

True

f. The float property can be used to create multi-column layouts.

Answer (Click to show)

True

g. jQuery is a replacement for JavaScript.

Answer (Click to show)

False (jQuery is a library built with JavaScript, not a replacement for it.)

h. Pseudo-classes are used to define the state of an element, such as :hover.

Answer (Click to show)

True

i. Regular expressions (Regex) can be used for string validation in JavaScript.

Answer (Click to show)

True

j. The serialize() method is used to convert form data into a URL-encoded string.

Answer (Click to show)

True

Question Four

Choose the most correct answer and write its letter in the answer booklet provided.
(1 Mark Each)

i. What does SEO stand for? A. Standardized Encoding Optimization
B. Search Engine Optimization
C. Semantic Element Organization
D. Simple Element Operation

Answer (Click to show)

B. Search Engine Optimization

ii. What is the purpose of the doctype declaration in HTML? A. To define the character set
B. To specify the HTML version being used
C. To link CSS files
D. To include JavaScript

Answer (Click to show)

B. To specify the HTML version being used

iii. Which selector would you use to target an element with a specific class? A. #className
B. .className
C. element.className
D. className

Answer (Click to show)

B. .className

iv. Which of the following correctly represents an object in JavaScript? A. {name: “John”, age: 30}
B. [“John”, 30]
C. “name: John, age: 30”
D. name = “John”, age = 30

Answer (Click to show)

A. {name: “John”, age: 30}

v. What will the following code return? Math.random()? A. A random integer
B. A random float between 0 and 1
C. A random float between 1 and 10
D. A fixed number

Answer (Click to show)

B. A random float between 0 and 1

SECTION B: (60 MARKS)

Attempt any THREE (3) out of FOUR (4) questions provided.

Question Five

You have been tasked with creating a web application designed to collect information about participants interested in joining a community gardening initiative. This application will gather essential details for each gardener, including their first name, surname, email address, and phone number. During the development process, the client requested an additional feature to capture information about the gardener’s plot. Specifically, the application should determine if the plot is for a single type of plant or for multiple types. If the plot is for a single type of plant, the application must capture the type of plant and the expected yield. Conversely, if the plot is for multiple types of plants, the application should allow the user to specify the number of different plants and, for each type, record the type of plant and the expected yield. You are required to use HTML and jQuery to design a dynamic form that adjusts based on the user’s input regarding the number of different plants. For example, if the number of plants is three, the form should display three sets of input fields for the type of plant and expected yield. (20 Marks)

Answer Guidance (Click to show)

Solution Outline:

HTML Structure:

Create form fields for First Name, Surname, Email, Phone.

Include a radio button or dropdown to select plot type: “Single Plant” or “Multiple Plants”.

For “Single Plant”: Provide one set of inputs for Plant Type and Expected Yield.

For “Multiple Plants”: Provide a number input field for “Number of Plants”.

Include a container <div id="plant-container"></div> where the dynamic inputs will be generated.

jQuery Logic:

Use a change event handler on the plot type selector.

If “Multiple Plants” is selected, show the “Number of Plants” input field.

Use a change event handler on the “Number of Plants” input.

On change, read the value n and use a loop (e.g., for loop) to generate n sets of input fields (for Plant Type and Expected Yield) inside the #plant-container.

Ensure that when the user changes the number again, the previous dynamic fields are cleared (using .empty()) before generating new ones.

If “Single Plant” is selected, hide the “Number of Plants” input and clear the #plant-container, while showing the single set of inputs.

Complete Solution (Click to show)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Gardening Initiative Registration</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .radio-group {
            display: flex;
            gap: 20px;
            margin: 10px 0;
        }
        .radio-option {
            display: flex;
            align-items: center;
        }
        .radio-option input {
            width: auto;
            margin-right: 8px;
        }
        .plant-inputs {
            margin-top: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            display: none;
        }
        .plant-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        .plant-type, .plant-yield {
            flex: 1;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Community Gardening Initiative Registration</h1>
    
    <form id="gardenerForm">
        <!-- Gardener Information Section -->
        <div class="form-section">
            <h2>Gardener Information</h2>
            
            <div class="form-group">
                <label for="firstName">First Name</label>
                <input type="text" id="firstName" name="firstName" required>
            </div>
            
            <div class="form-group">
                <label for="surname">Surname</label>
                <input type="text" id="surname" name="surname" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
        </div>
        
        <!-- Plot Information Section -->
        <div class="form-section">
            <h2>Plot Information</h2>
            
            <div class="form-group">
                <label>Plot Type</label>
                <div class="radio-group">
                    <div class="radio-option">
                        <input type="radio" id="singlePlant" name="plotType" value="single" checked>
                        <label for="singlePlant">Single Type of Plant</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="multiplePlants" name="plotType" value="multiple">
                        <label for="multiplePlants">Multiple Types of Plants</label>
                    </div>
                </div>
            </div>
            
            <!-- Single Plant Inputs -->
            <div id="singlePlantInputs" class="plant-inputs">
                <div class="form-group">
                    <label for="plantType">Type of Plant</label>
                    <input type="text" id="plantType" name="plantType">
                </div>
                
                <div class="form-group">
                    <label for="expectedYield">Expected Yield (kg)</label>
                    <input type="number" id="expectedYield" name="expectedYield" min="0" step="0.1">
                </div>
            </div>
            
            <!-- Multiple Plants Inputs -->
            <div id="multiplePlantsInputs" class="plant-inputs">
                <div class="form-group">
                    <label for="plantCount">Number of Different Plants</label>
                    <input type="number" id="plantCount" name="plantCount" min="1" max="10" value="1">
                </div>
                
                <div id="multiplePlantsContainer">
                    <!-- Dynamic plant inputs will be inserted here -->
                </div>
            </div>
        </div>
        
        <button type="submit" class="btn">Register for Gardening Initiative</button>
    </form>
 
    <script>
        $(document).ready(function() {
            // Show/hide plant inputs based on plot type selection
            $('input[name="plotType"]').change(function() {
                if ($(this).val() === 'single') {
                    $('#singlePlantInputs').show();
                    $('#multiplePlantsInputs').hide();
                } else {
                    $('#singlePlantInputs').hide();
                    $('#multiplePlantsInputs').show();
                    generatePlantInputs();
                }
            });
            
            // Initialize with single plant inputs visible
            $('#singlePlantInputs').show();
            
            // Generate plant inputs when plant count changes
            $('#plantCount').change(function() {
                generatePlantInputs();
            });
            
            // Function to generate dynamic plant inputs
            function generatePlantInputs() {
                const plantCount = parseInt($('#plantCount').val());
                const container = $('#multiplePlantsContainer');
                container.empty();
                
                for (let i = 1; i <= plantCount; i++) {
                    const plantRow = $('<div class="plant-row"></div>');
                    
                    const plantTypeDiv = $('<div class="plant-type"></div>');
                    plantTypeDiv.append(`<label for="plantType${i}">Plant Type ${i}</label>`);
                    plantTypeDiv.append(`<input type="text" id="plantType${i}" name="plantType${i}" required>`);
                    
                    const plantYieldDiv = $('<div class="plant-yield"></div>');
                    plantYieldDiv.append(`<label for="expectedYield${i}">Expected Yield ${i} (kg)</label>`);
                    plantYieldDiv.append(`<input type="number" id="expectedYield${i}" name="expectedYield${i}" min="0" step="0.1" required>`);
                    
                    plantRow.append(plantTypeDiv);
                    plantRow.append(plantYieldDiv);
                    
                    container.append(plantRow);
                }
            }
            
            // Form submission handler
            $('#gardenerForm').submit(function(e) {
                e.preventDefault();
                alert('Form submitted successfully!');
            });
        });
    </script>
</body>
</html>

Key Features Implemented:

Dynamic Form Sections - Shows different inputs based on single/multiple plant selection
Gardener Information Collection - First name, surname, email, and phone number
Plot Type Selection - Radio buttons for single or multiple plant types
Dynamic Input Generation - Creates plant input fields based on user-specified count
jQuery Integration - Handles all dynamic behavior and form interactions
Responsive Design - Clean, user-friendly interface with proper styling

Question Six

You have been hired by a local event organiser to develop a simple Event Registration Page for an upcoming tech seminar. The page should allow users to enter their full name, email address, and select their preferred session (either “Morning” or “Afternoon”) using a drop-down list. You are required to use HTML to structure the form, including appropriate input fields and a submit button. Using CSS, style the form so that it is centred on the page, with clear spacing, borders around input fields, and a submit button that changes colour when hovered over. Implement JavaScript validation to ensure that all fields are filled and that the email address is in a valid format. If validation fails, display an appropriate error message below the form. Using jQuery, enhance the functionality so that when the form is successfully submitted, it hides the form and displays a personalised thank-you message including the user’s name and selected session. Apply a fade-in animation to the thank-you message using jQuery effects. You may organize your code using inline or external styles and scripts as needed. (20 Marks)

Answer Guidance (Click to show)

Solution Outline:

HTML:

Create a <form id="registration-form"> with inputs for name (text), email (email), session (select with options “Morning” and “Afternoon”), and a submit button.

Include a <div id="error-message"></div> for displaying errors.

Include a hidden <div id="thank-you-message"></div> for the success message.

CSS:

Center the form using margin: auto and set a fixed width.

Style inputs with padding, margin, and border.

Use the :hover pseudo-class on the submit button to change its background-color.

JavaScript/jQuery:

Attach a submit event handler to the form using jQuery.

Validation: Inside the handler, prevent the default form submission. Check if name and session are not empty. Validate the email using a regular expression (e.g., /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/). If any check fails, display an error in the error-messagediv andreturn false;`.

Success Action: If validation passes, use $('#registration-form').hide(); to hide the form.

Use $('#thank-you-message').html("Thank you, " + name + "! You are registered for the " + session + " session."); to set the personalized message.

Use $('#thank-you-message').fadeIn(); to animate the thank-you message.

Complete Solution (Click to show)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Seminar Registration</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
 
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
 
        .container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            transition: all 0.3s ease;
        }
 
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.2em;
            font-weight: 600;
        }
 
        .form-group {
            margin-bottom: 25px;
        }
 
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
            font-size: 1.1em;
        }
 
        input, select {
            width: 100%;
            padding: 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
        }
 
        input:focus, select:focus {
            outline: none;
            border-color: #667eea;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
 
        .submit-btn {
            width: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
 
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
 
        .submit-btn:active {
            transform: translateY(0);
        }
 
        .error-message {
            background-color: #fee;
            border: 1px solid #f5c6cb;
            color: #721c24;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
            display: none;
            font-weight: 500;
        }
 
        .thank-you-message {
            text-align: center;
            padding: 40px 20px;
            display: none;
        }
 
        .thank-you-message h2 {
            color: #28a745;
            margin-bottom: 20px;
            font-size: 2em;
        }
 
        .thank-you-message p {
            color: #555;
            font-size: 1.3em;
            line-height: 1.6;
            margin-bottom: 10px;
        }
 
        .success-icon {
            font-size: 4em;
            color: #28a745;
            margin-bottom: 20px;
        }
 
        @media (max-width: 600px) {
            .container {
                padding: 30px 20px;
                margin: 20px;
            }
            
            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Tech Seminar Registration</h1>
        
        <form id="registration-form">
            <div class="form-group">
                <label for="fullName">Full Name</label>
                <input type="text" id="fullName" name="fullName" placeholder="Enter your full name">
            </div>
            
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" placeholder="Enter your email address">
            </div>
            
            <div class="form-group">
                <label for="session">Preferred Session</label>
                <select id="session" name="session">
                    <option value="">Select a session</option>
                    <option value="Morning">Morning Session</option>
                    <option value="Afternoon">Afternoon Session</option>
                </select>
            </div>
            
            <button type="submit" class="submit-btn">Register Now</button>
        </form>
        
        <div id="error-message" class="error-message"></div>
        
        <div id="thank-you-message" class="thank-you-message">
            <div class="success-icon">✓</div>
            <h2>Registration Successful!</h2>
            <p id="personalized-message"></p>
            <p>We look forward to seeing you at the seminar!</p>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            $('#registration-form').submit(function(e) {
                e.preventDefault();
                
                // Get form values
                const fullName = $('#fullName').val().trim();
                const email = $('#email').val().trim();
                const session = $('#session').val();
                
                // Reset error message
                $('#error-message').hide();
                
                // Validation
                let isValid = true;
                let errorMessage = '';
                
                // Check full name
                if (fullName === '') {
                    isValid = false;
                    errorMessage = 'Please enter your full name.';
                }
                // Check email
                else if (email === '') {
                    isValid = false;
                    errorMessage = 'Please enter your email address.';
                }
                else if (!isValidEmail(email)) {
                    isValid = false;
                    errorMessage = 'Please enter a valid email address.';
                }
                // Check session
                else if (session === '') {
                    isValid = false;
                    errorMessage = 'Please select your preferred session.';
                }
                
                if (!isValid) {
                    $('#error-message').text(errorMessage).fadeIn();
                    return false;
                }
                
                // If validation passes
                $('#registration-form').hide();
                
                // Create personalized message
                const personalizedMessage = `Thank you, <strong>${fullName}</strong>! You are registered for the <strong>${session} Session</strong>.`;
                $('#personalized-message').html(personalizedMessage);
                
                // Show thank you message with fade-in animation
                $('#thank-you-message').fadeIn(1000);
                
                return false;
            });
            
            // Email validation function
            function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }
            
            // Add input focus effects
            $('input, select').focus(function() {
                $(this).parent().addClass('focused');
            }).blur(function() {
                $(this).parent().removeClass('focused');
            });
        });
    </script>
</body>
</html>

Question Seven

You are tasked with designing a simple online shopping cart interface for a local bookstore’s website. The page should display a list of three books, each with a title, price, and an “Add to Cart” button. Using HTML, structure the book list and include appropriate elements to display the information. With CSS, make the list visually appealing by adding borders, spacing, and hover effects on the buttons. Using JavaScript, maintain a count of how many items have been added to the cart and the total price. Each time a user clicks “Add to Cart”, the item should be counted and the total updated. Display the current item count and total amount dynamically on the page. With jQuery, implement a feature that highlights the newly added book for a few seconds using an animation (such as fading or sliding). Additionally, include a “Clear Cart” button that resets the count and total, and use jQuery to animate the clearing action. (20 Marks)

Answer Guidance (Click to show)

Solution Outline:

HTML:

Create a list of books, each in a container (e.g., <div class="book">) with elements for title, price, and an “Add to Cart” button with a data-price attribute storing the book’s price.

Include a cart summary area (e.g., <div id="cart">) with elements to display Item Count: <span id="item-count">0</span> and Total: $<span id="total-amount">0.00</span>.

Include a “Clear Cart” button.

CSS:

Style .book with border, padding, and margin.

Style the “Add to Cart” button with a :hover effect.

Create a CSS class for highlighting, e.g., .highlight { background-color: yellow; }.

JavaScript/jQuery:

Variables: Use global variables (or a simple object) to track itemCount and totalPrice.

Add to Cart: Attach a click handler to all “Add to Cart” buttons.

On click, get the price from the button’s data-price attribute.

Increment itemCount and add the price to totalPrice.

Update the text of #item-count and #total-amount spans.

Use $(this).closest('.book') to select the book container and add the highlight class. Use setTimeout to remove the class after a few seconds. Alternatively, use $(...).fadeTo(100, 0.5).fadeTo(100, 1) for a flash effect.

Clear Cart: Attach a click handler to the “Clear Cart” button.

Reset itemCount and totalPrice to zero and update the display.

Use an animation like $("#cart").fadeOut(300).fadeIn(300); to provide visual feedback.

Complete Solution (Click to show)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookstore Shopping Cart</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
 
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
 
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
 
        header {
            text-align: center;
            margin-bottom: 40px;
        }
 
        h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
        }
 
        .subtitle {
            color: #7f8c8d;
            font-size: 1.2em;
        }
 
        .cart-summary {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            text-align: center;
        }
 
        .cart-info {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 20px;
            font-size: 1.3em;
        }
 
        .cart-item {
            background: #3498db;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
        }
 
        .cart-total {
            background: #27ae60;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
        }
 
        .clear-cart {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }
 
        .clear-cart:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }
 
        .books-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
 
        .book {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
 
        .book:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
 
        .book-title {
            font-size: 1.4em;
            color: #2c3e50;
            margin-bottom: 15px;
            font-weight: 600;
        }
 
        .book-author {
            color: #7f8c8d;
            margin-bottom: 15px;
            font-style: italic;
        }
 
        .book-price {
            font-size: 1.5em;
            color: #27ae60;
            font-weight: bold;
            margin-bottom: 20px;
        }
 
        .add-to-cart {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            width: 100%;
        }
 
        .add-to-cart:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
 
        .book-highlight {
            background: #fff3cd;
            border-color: #ffc107;
            transform: scale(1.02);
        }
 
        .cart-animation {
            animation: cartPulse 0.6s ease-in-out;
        }
 
        @keyframes cartPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
 
        .empty-cart-message {
            text-align: center;
            color: #7f8c8d;
            font-size: 1.1em;
            margin-top: 20px;
            display: none;
        }
 
        @media (max-width: 768px) {
            .cart-info {
                flex-direction: column;
                gap: 15px;
            }
            
            .books-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>📚 Local Bookstore</h1>
            <p class="subtitle">Discover your next favorite book</p>
        </header>
 
        <div class="cart-summary">
            <div class="cart-info">
                <div class="cart-item">
                    Items: <span id="item-count">0</span>
                </div>
                <div class="cart-total">
                    Total: $<span id="total-amount">0.00</span>
                </div>
            </div>
            <button class="clear-cart" id="clear-cart">Clear Cart</button>
            <div class="empty-cart-message" id="empty-cart-message">
                Your cart is empty. Add some books!
            </div>
        </div>
 
        <div class="books-container">
            <!-- Book 1 -->
            <div class="book" data-book="1">
                <h2 class="book-title">The Great Gatsby</h2>
                <p class="book-author">by F. Scott Fitzgerald</p>
                <div class="book-price">$12.99</div>
                <button class="add-to-cart" data-price="12.99">Add to Cart</button>
            </div>
 
            <!-- Book 2 -->
            <div class="book" data-book="2">
                <h2 class="book-title">To Kill a Mockingbird</h2>
                <p class="book-author">by Harper Lee</p>
                <div class="book-price">$14.50</div>
                <button class="add-to-cart" data-price="14.50">Add to Cart</button>
            </div>
 
            <!-- Book 3 -->
            <div class="book" data-book="3">
                <h2 class="book-title">1984</h2>
                <p class="book-author">by George Orwell</p>
                <div class="book-price">$11.25</div>
                <button class="add-to-cart" data-price="11.25">Add to Cart</button>
            </div>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            // Initialize cart variables
            let itemCount = 0;
            let totalPrice = 0;
 
            // Add to Cart functionality
            $('.add-to-cart').click(function() {
                // Get book price from data attribute
                const price = parseFloat($(this).data('price'));
                
                // Update cart values
                itemCount++;
                totalPrice += price;
 
                // Update display
                updateCartDisplay();
 
                // Highlight the book with animation
                const bookElement = $(this).closest('.book');
                highlightBook(bookElement);
 
                // Animate cart summary
                $('.cart-summary').addClass('cart-animation');
                setTimeout(() => {
                    $('.cart-summary').removeClass('cart-animation');
                }, 600);
 
                // Hide empty cart message
                $('#empty-cart-message').hide();
            });
 
            // Clear Cart functionality
            $('#clear-cart').click(function() {
                if (itemCount > 0) {
                    // Animate clearing action
                    $('.cart-summary').fadeOut(300, function() {
                        // Reset cart values
                        itemCount = 0;
                        totalPrice = 0;
                        
                        // Update display
                        updateCartDisplay();
                        
                        // Show empty cart message
                        $('#empty-cart-message').fadeIn();
                        
                        // Fade back in
                        $(this).fadeIn(300);
                    });
                }
            });
 
            // Function to update cart display
            function updateCartDisplay() {
                $('#item-count').text(itemCount);
                $('#total-amount').text(totalPrice.toFixed(2));
            }
 
            // Function to highlight book with animation
            function highlightBook(bookElement) {
                // Add highlight class
                bookElement.addClass('book-highlight');
                
                // Pulse animation
                bookElement.animate(
                    { backgroundColor: '#fff3cd' }, 
                    200
                );
                
                // Remove highlight after 2 seconds
                setTimeout(() => {
                    bookElement.removeClass('book-highlight');
                    bookElement.animate(
                        { backgroundColor: '#ffffff' }, 
                        500
                    );
                }, 2000);
            }
 
            // Show empty cart message initially
            $('#empty-cart-message').show();
        });
    </script>
</body>
</html>

Question Eight

You have been hired by a small indie game studio to create a web-based mini-game as part of an online campaign to promote their upcoming product. The client is looking for a simple yet interactive browser game that can engage users for a short period of time. Your task is to design and develop a basic “Whack-a-Mole” game using HTML, CSS, and jQuery. The game should feature a 3x3 grid, totaling nine holes, where a “mole” randomly appears. Use HTML to create the structure of the grid and the necessary interface elements, such as buttons and score display. CSS should be used to style the game board, the mole, and include animations for visual appeal. The gameplay involves the mole appearing randomly in different holes every 1 to 2 seconds. When a user clicks on the mole, their score should increase by one. jQuery must be used to control the timing of the mole’s appearance, animate interactions, and handle click events to update the score. Additionally, include a visible score counter and a countdown timer (for example, 30 seconds) on the screen. When the timer runs out, the game should display the final score and a “Play Again” button to restart the game. For an optional challenge, you can add difficulty levels (Easy, Medium, Hard) that modify the mole’s speed, and include sound effects when the mole is hit. You are expected to submit a fully functional HTML page with either embedded or linked CSS and jQuery. The game should offer a user-friendly interface and smooth gameplay experience. Ensure that your code is well-commented to explain the main logic and functionalities. (20 Marks)

Answer Guidance (Click to show)

Solution Outline:

HTML:

Create a 3x3 grid using a container <div id="game-board"> with 9 <div class="hole"> elements inside.

Include a score display: Score: <span id="score">0</span>.

Include a timer display: Time Left: <span id="timer">30</span>s.

Include a “Start Game” / “Play Again” button.

CSS:

Style #game-board as a grid using CSS Grid or Flexbox.

Style .hole with a circle shape and a background color.

Create a class .mole with a different background image or color to represent the mole. Add a simple CSS animation (like a small scale-up) when the mole appears.

jQuery Logic:

Variables: score, timeLeft, gameInterval, moleInterval.

Start Game: On button click, reset score and timeLeft, update displays, and start intervals.

Timer: Use setInterval to decrement timeLeft every second. When it reaches 0, clear all intervals, hide the mole, and show the final score and “Play Again” button.

Mole Logic: Use another setInterval (with a random delay between 1000-2000ms).

In this interval, remove the .mole class from all holes.

Pick a random hole from the 9 and add the .mole class to it.

Whack!: Attach a click event handler to all holes. If the clicked hole has the .mole class, increment the score, update the display, and remove the .mole class (to represent the mole being whacked).

Difficulty: Modify the range of the random delay in the mole interval based on the selected difficulty (e.g., Easy: 1500-2000ms, Hard: 500-1000ms).

Animation/Sound: Use jQuery’s .fadeIn()/.fadeOut() or add/remove CSS classes for hit animations. Use the HTML5 Audio object to play a sound on a successful hit.

Complete Solution (Click to show)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whack-a-Mole Game</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
 
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
 
        .game-container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 500px;
            width: 100%;
        }
 
        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
 
        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            font-size: 1.2em;
            font-weight: bold;
        }
 
        .score, .timer {
            color: #2c3e50;
        }
 
        .score-value, .timer-value {
            color: #e74c3c;
            font-size: 1.3em;
        }
 
        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }
 
        .hole {
            width: 100%;
            aspect-ratio: 1;
            background: #8B4513;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 4px solid #5D4037;
            transition: transform 0.2s ease;
        }
 
        .hole:hover {
            transform: scale(1.05);
        }
 
        .hole::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 10%;
            right: 10%;
            bottom: 10%;
            background: #5D4037;
            border-radius: 50%;
        }
 
        .mole {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #795548, #5D4037);
            border-radius: 50%;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            cursor: pointer;
        }
 
        .mole.active {
            transform: translateY(0);
        }
 
        .mole::before, .mole::after {
            content: '';
            position: absolute;
            background: #5D4037;
        }
 
        .mole::before {
            top: 20%;
            left: 30%;
            right: 30%;
            height: 15%;
            border-radius: 50%;
        }
 
        .mole::after {
            top: 40%;
            left: 20%;
            right: 20%;
            height: 10%;
            border-radius: 50%;
        }
 
        .eyes {
            position: absolute;
            top: 25%;
            left: 25%;
            right: 25%;
            height: 15%;
            display: flex;
            justify-content: space-between;
        }
 
        .eye {
            width: 20%;
            height: 100%;
            background: white;
            border-radius: 50%;
            position: relative;
        }
 
        .eye::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 50%;
            background: black;
            border-radius: 50%;
        }
 
        .controls {
            margin-bottom: 20px;
        }
 
        .difficulty-select {
            margin-bottom: 15px;
        }
 
        select {
            padding: 10px 15px;
            border: 2px solid #bdc3c7;
            border-radius: 8px;
            font-size: 1em;
            background: white;
            cursor: pointer;
        }
 
        .btn {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
        }
 
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
 
        .btn:active {
            transform: translateY(-1px);
        }
 
        .btn-restart {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
 
        .game-over {
            display: none;
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin-top: 20px;
        }
 
        .game-over h2 {
            color: #e74c3c;
            margin-bottom: 15px;
            font-size: 2em;
        }
 
        .final-score {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 20px;
        }
 
        .hit-animation {
            animation: hit 0.3s ease;
        }
 
        @keyframes hit {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
 
        @media (max-width: 500px) {
            .game-container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .game-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1> Whack-a-Mole</h1>
        
        <div class="game-info">
            <div class="score">
                Score: <span class="score-value" id="score">0</span>
            </div>
            <div class="timer">
                Time: <span class="timer-value" id="timer">30</span>s
            </div>
        </div>
 
        <div class="controls">
            <div class="difficulty-select">
                <select id="difficulty">
                    <option value="easy">Easy</option>
                    <option value="medium" selected>Medium</option>
                    <option value="hard">Hard</option>
                </select>
            </div>
            <button class="btn" id="start-btn">Start Game</button>
        </div>
 
        <div class="game-board" id="game-board">
            <!-- Holes will be generated by JavaScript -->
        </div>
 
        <div class="game-over" id="game-over">
            <h2>Game Over!</h2>
            <div class="final-score">
                Final Score: <span id="final-score">0</span>
            </div>
            <button class="btn btn-restart" id="restart-btn">Play Again</button>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            // Game variables
            let score = 0;
            let timeLeft = 30;
            let gameActive = false;
            let moleInterval;
            let timerInterval;
            let currentMole = null;
 
            // Sound effects
            const hitSound = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQQAAAAAAA=='); // Placeholder for hit sound
            
            // Initialize game board
            function initializeGameBoard() {
                const gameBoard = $('#game-board');
                gameBoard.empty();
                
                for (let i = 0; i < 9; i++) {
                    const hole = $('<div class="hole"></div>');
                    const mole = $('<div class="mole"></div>');
                    const eyes = $('<div class="eyes"></div>');
                    eyes.append('<div class="eye"></div><div class="eye"></div>');
                    mole.append(eyes);
                    hole.append(mole);
                    gameBoard.append(hole);
                    
                    // Add click event to mole
                    mole.click(function() {
                        if ($(this).hasClass('active') && gameActive) {
                            whackMole($(this));
                        }
                    });
                }
            }
 
            // Start the game
            function startGame() {
                score = 0;
                timeLeft = 30;
                gameActive = true;
                
                $('#score').text(score);
                $('#timer').text(timeLeft);
                $('#start-btn').prop('disabled', true);
                $('#game-over').hide();
                
                // Start timer
                timerInterval = setInterval(updateTimer, 1000);
                
                // Start mole appearing
                startMoleAppearance();
            }
 
            // Update timer
            function updateTimer() {
                timeLeft--;
                $('#timer').text(timeLeft);
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }
 
            // Start mole appearance logic
            function startMoleAppearance() {
                const difficulty = $('#difficulty').val();
                let minTime, maxTime;
                
                switch (difficulty) {
                    case 'easy':
                        minTime = 1500;
                        maxTime = 2500;
                        break;
                    case 'medium':
                        minTime = 1000;
                        maxTime = 2000;
                        break;
                    case 'hard':
                        minTime = 500;
                        maxTime = 1500;
                        break;
                }
                
                moleInterval = setInterval(function() {
                    showRandomMole();
                }, getRandomTime(minTime, maxTime));
            }
 
            // Show mole in random hole
            function showRandomMole() {
                if (!gameActive) return;
                
                // Hide current mole
                if (currentMole) {
                    currentMole.removeClass('active');
                }
                
                // Show new mole in random hole
                const holes = $('.hole');
                const randomIndex = Math.floor(Math.random() * holes.length);
                currentMole = $(holes[randomIndex]).find('.mole');
                currentMole.addClass('active');
                
                // Auto hide mole after certain time
                setTimeout(() => {
                    if (currentMole && currentMole.hasClass('active')) {
                        currentMole.removeClass('active');
                    }
                }, 800);
            }
 
            // Whack the mole
            function whackMole(mole) {
                if (!gameActive) return;
                
                // Play hit sound (placeholder - would need actual sound file)
                try {
                    hitSound.currentTime = 0;
                    hitSound.play();
                } catch (e) {
                    // Sound play failed, continue without sound
                }
                
                // Add hit animation
                mole.addClass('hit-animation');
                setTimeout(() => {
                    mole.removeClass('hit-animation');
                }, 300);
                
                // Update score
                score++;
                $('#score').text(score);
                
                // Hide mole
                mole.removeClass('active');
                currentMole = null;
            }
 
            // End the game
            function endGame() {
                gameActive = false;
                clearInterval(timerInterval);
                clearInterval(moleInterval);
                
                // Hide any active mole
                $('.mole').removeClass('active');
                
                // Show game over screen
                $('#final-score').text(score);
                $('#game-over').show();
                $('#start-btn').prop('disabled', false);
            }
 
            // Utility function to get random time
            function getRandomTime(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
 
            // Initialize game
            initializeGameBoard();
            
            // Event listeners
            $('#start-btn').click(startGame);
            $('#restart-btn').click(startGame);
        });
    </script>
</body>
</html>

END OF EXAMINATION PAPER

MGODI💎

Explorer

Internet Programming and Applications - Exam

SECTION A: (40 MARKS)

Question One

Question Two

Question Three

Question Four

SECTION B: (60 MARKS)

Question Five

Question Six

Question Seven

Question Eight

Graph View

Table of Contents

Backlinks