grade 7 - Practical exam - Final

 End of 2nd Trimester Exams (2024 - 2025)


Subject

ICT (Practical) 


Grade:

7

Duration of exam

45 mins

Teacher

Ms Hanan

Date given

Week 11

Student Name





Topic: Creating an E-commerce website

Exam Instructions:

  1. Create a Folder:
    Create a folder on your computer with your full name as the folder name.

  2. Write Your Code:
    Complete the coding tasks in the exam. After finishing, open Notepad or any text editor of your choice.

  3. Save Your Work:
    Copy and paste your code into the text editor, then save the file with the following format:
    FullName_Class.txt (example: MsHanan_Grade7a.txt).

  4. Submit Your Folder:
    Once you've saved your file, ensure that the folder with your name contains your code file, and submit the folder as per the exam instructions.


Instructions:

Create a webpage displaying your E-commerce website with the following requirements:

1- Add a Title:

Use the <h1> tag to add the title of your shop inside the <body> section.

example: <h1> Welcome to My Favorite Shop </h1>

2- Add Three Pictures:

  • Use the <img> tag to add images.

  • Replace src= "image1.jpg", src="image2.jpg", and src="image3.jpg" with actual image links or file paths.

example: <img src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_1280.jpg" alt="Image 1">


3- Add a header for each product:

Replace Product 1 with the name of your product : 

<h3>Product 1</h3>,<h3>Product 2</h3> and <h3>Product 3</h3>


example: 

<h3>Product 1:Stylish Handbag</h3>


4-Add Descriptions for Each Product:

  • Use the <p> tag to write a short description for each product:

  • Write a short description for your first product.

  • Write a short description for your second product.

  • Write a short description for your third product.

  • You will replace them with a new description.


example: 


 <p>This elegant handbag is perfect for any occasion. Made with high-quality leather and a modern design</p>


Open w3schools tryit editor and copy paste this code:

<html>

<head>

    <title>E-Commerce Website</title>

    <!-- Bootstrap CSS -->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

    <style>

        /* CSS Styles for Carousel, Cards, and Flexbox Layout */

        .carousel_container {

            width: 80%;

            height: 400px;

            margin: auto;

        }

        .carousel_container img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .products {

            display: flex;

            justify-content: space-evenly;

            padding: 20px;

        }

        .product_container {

            width: 30%;

            padding: 15px;

            background-color: #f9f9f9;

            border-bottom: 3px solid #ccc;

            text-align: center;

        }

        .product_container p {

            border-top: 2px solid #ccc;

            line-height: 1.5;

            margin-top: 10px;

            padding-top: 10px;

        }

        .product_container:hover {

            background-image: url('hover-background.jpg');

            background-size: cover;

            background-position: center;

            color: white;

            transition: all 0.3s ease;

        }

        .product_container:hover .btn {

            background-color: #ff5c5c;

        }

    </style>

</head>

<body>

    <!-- Carousel -->
    <h1>Welcome to ...... </h1>

    <div class="carousel_container">

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

            <div class="carousel-inner">

                <div class="carousel-item active">

                    <img src="image1.jpg" alt="Image 1">

                </div>

                <div class="carousel-item">

                    <img src="image2.jpg" alt="Image 2">

                </div>

                <div class="carousel-item">

                    <img src="image3.jpg" alt="Image 3">

                </div>

            </div>

            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

                <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

                <span class="carousel-control-next-icon" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a>

        </div>

    </div>



    <!-- Product Section -->

    <section class="products">

        <div class="product_container">

            <h3>Product 1</h3>

            <p>Write a short description for your first product</p>

            <button class="btn btn-danger">Learn More</button>

        </div>

        <div class="product_container">

            <h3>Product 2</h3>

            <p>Write a short description for your second product</p>

            <button class="btn btn-danger">Shop Now</button>

        </div>

        <div class="product_container">

            <h3>Product 3</h3>

            <p>Write a short description for your third product</p>

            <button class="btn btn-danger">Buy Now</button>

        </div>

    </section>



    <!-- Bootstrap JS and dependencies -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Practical test for grade 7

Subject ICT Grade 7 Trimester 2 Assessment Type Practical Mid-Term Test Teacher   Date given Week 7                           Student Name   Time 45 min Marks                   /20 Instructions:   Choose your editor : You may use W3Schools TryIt Editor 1-Open Google and search for: : w3schools try it editor 2- In another tab, open: tnis-ict7.blogspot.com 3- Copy the code provided and paste it into the : W3Schools TryIt Editor: <html> <head>     <!-- Title of the web page displayed in the browser tab -->     <title>My Dream Room</title>     <!-- Main heading of the webpage -->     <h1>This is my dream room</h1>        <style>     /* General Styling */     /* Styling for the entire page body */     body {     ...
Read more