Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering Quiz - 4

    Uploaded by

    azlannisar
    12 views8 pages

    Original Title

    web code html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views8 pages

    Web Engineering Quiz - 4

    Uploaded by

    azlannisar

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Web Engineering

    Course Code: SE3162 (Section W2)

    Quiz - 4

    Maximum Time: 60 minutes Maximum Marks: 10


    Mobile phone is not allowed
    Muhammad Azlan Awan F2017065180

    All questions are to be attempted on answer sheet.


    Q.1. (2 marks)
    Write code to find factorial of a number in JavaScript as shown in Figure below.

    <!DOCTYPE html>  
    <html>  
    <head>  
    </head>  
    <body style = "text-align: center; font-size: 20px;">  
    <h1> Welcome to the javaTpoint.com </h1>  
    Enter a number: <input id = "num">  
    <br><br>  
    <button onclick = "fact()"> Factorial </button>  
    <p id = "res"></p>  
    <script>  
    function fact(){  
    var i, num, f;  
    f = 1;  
    num = document.getElementById("num").value;  
    for(i = 1; i <= num; i++)    
    {  
    ff = f * i;  
    }  
    ii = i - 1;    
    document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;  

    1
    }  
    </script>  
    </body>  
    </html>  

    Q.2. (2
    marks)
    Write code in JavaScript. Text should change when you move cursor(hover) on City names such
    as London, Paris and Tokyo.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box}
    body {font-family: "Lato", sans-serif;}

    /* Style the tab */


    .tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
    }

    /* Style the buttons inside the tab */


    .tab button {
    display: block;

    2
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
    }

    /* Change background color of buttons on hover */


    .tab button:hover {
    background-color: #ddd;
    }

    /* Create an active/current "tab button" class */


    .tab button.active {
    background-color: #ccc;
    }

    /* Style the tab content */


    .tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
    display: none;
    }

    /* Clear floats after the tab */


    .clearfix::after {
    content: "";
    clear: both;
    display: table;
    }

    3
    </style>
    </head>
    <body>

    <h2>Hover Tabs</h2>
    <p>Move the mouse over a button inside the tabbed menu:</p>

    <div class="tab">
    <button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
    <button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">


    <h3>London</h3>
    <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">


    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">


    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
    </div>

    <div class="clearfix"></div>

    <script>
    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    4
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    }
    </script>

    </body>
    </html>
    Q.3. (2
    marks)
    Write code in Javascript for creating new images in javascript with scroll backwards or scroll
    forward functions. Images will change when you will click on forward or backward arrows

    _____________________
    ________________________________________________________________
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    a{
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    }

    a:hover {
    background-color: #ddd;
    color: black;
    }

    .previous {

    5
    background-color: #f1f1f1;
    color: black;
    }

    .next {
    background-color: #04AA6D;
    color: white;
    }

    .round {
    border-radius: 50%;
    }
    </style>
    </head>
    <body>

    <h2>Previous and Next Buttons</h2>

    <a href="#" class="previous">&laquo; Previous</a>


    <a href="#" class="next">Next &raquo;</a>

    <a href="#" class="previous round">&#8249;</a>


    <a href="#" class="next round">&#8250;</a>

    </body>
    </html>
    Q.4. (2
    marks)
    Validate Name field using Javascript. If Field is empty change background color of text field to
    red as shown in Figure given below:

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "" || x == null) {
    alert("Name must be filled out");

    6
    return false;
    }
    }
    </script>
    </head>
    <body>

    <h2>JavaScript validation for empty input field</h2>


    <p>Try to submit the form without entering any text.</p>

    <form name="myForm" action="/action_page.php" onsubmit="return validateForm()"


    method="post" required>
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
    </form>

    </body>
    </html>
    Q.5. (2
    marks)
    Animate Text in Text Fields given below : Text “Answer Soon” should move in between text
    fields after a certain time.

    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________
    _____________________________________________________________________________________

    7
    _____________________________________________________________________________________
    _____________________________________________________________________________________

    You might also like