HTML Examination Instructions
42 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the expected output when a mark of 40 is inputted?

  • Student achieved a C grade
  • Student achieved an E grade (correct)
  • Student achieved a D grade
  • Student achieved a B grade
  • What is the purpose of the JavaScript code shown in Figure 3?

  • To display a grade on a web page
  • To calculate a grade based on user input (correct)
  • To store a grade in a database
  • To generate a random test question
  • Which grade is associated with a mark range from 60 to 69 according to the figure?

  • A grade
  • B grade
  • D grade
  • C grade (correct)
  • Which of the following is a possible variable type used in the JavaScript code shown in Figure 3?

    <p>All of the above (D)</p> Signup and view all the answers

    If the code produces an incorrect result for a mark of 40, which of the following could be a reason?

    <p>The code is incorrectly comparing the input mark to the grade boundaries (B)</p> Signup and view all the answers

    Given the code produces an incorrect output when a mark of 40 is inputted, what is the most likely cause?

    <p>An error in the code prevents it from correctly evaluating the input mark against the grade boundaries (B)</p> Signup and view all the answers

    How does the JavaScript code shown in Figure 3 likely get its input for the calculation?

    <p>From user input (A)</p> Signup and view all the answers

    What mark range corresponds to a 'D' grade according to Figure 4?

    <p>50 to 59 (C)</p> Signup and view all the answers

    What is the likely outcome of the JavaScript code shown in Figure 3?

    <p>Displaying a calculated grade (C)</p> Signup and view all the answers

    Which of the following is NOT a common programming concept used in the JavaScript code shown in Figure 3?

    <p>Object-oriented programming (B)</p> Signup and view all the answers

    Which font style is specified for the web page?

    <p>Verdana (C)</p> Signup and view all the answers

    What is the purpose of the line header > p in the code snippet?

    <p>To select all paragraph elements within the header element (B)</p> Signup and view all the answers

    Which CSS property is being set in lines 2 to 4 of the code?

    <p>font-family (B)</p> Signup and view all the answers

    What is the specified breakpoint for the responsive layout?

    <p>600 pixels (B)</p> Signup and view all the answers

    What is the background color of the header section for screens less than 600 pixels wide?

    <p>#000000 (B)</p> Signup and view all the answers

    What is the value assigned to the font-family property?

    <p>Times New Roman (A)</p> Signup and view all the answers

    What is the effect of the CSS code on the appearance of the webpage?

    <p>It changes the font used for paragraph elements within the header element to &quot;Times New Roman&quot; (D)</p> Signup and view all the answers

    What is the font size of the text "We Love Sailboats" in the header section for screens less than 600 pixels wide?

    <p>16 pixels (B)</p> Signup and view all the answers

    Which of the following statements accurately describes the CSS code?

    <p>The code applies a style to all paragraph elements in the header. (C)</p> Signup and view all the answers

    What is the text alignment for the subheader section for screens less than 600 pixels wide?

    <p>Center align (A)</p> Signup and view all the answers

    What is the specified width for the logo image in the header section for screens less than 600 pixels wide?

    <p>100 pixels (D)</p> Signup and view all the answers

    What is the purpose of using > in the CSS selector header > p?

    <p>To target only direct child elements (D)</p> Signup and view all the answers

    What is the correct HTML code that would be affected by the CSS code provided?

    <p><code>&lt;header&gt;&lt;p&gt;Sailing boat holidays&lt;/p&gt;&lt;/header&gt;</code> (C)</p> Signup and view all the answers

    What is the font size of the text "Book with us and you will not be disappointed" in the subheader section for screens less than 600 pixels wide?

    <p>16 pixels (B)</p> Signup and view all the answers

    Assuming the CSS code is applied to a webpage, what other CSS properties might be set to further enhance the visual appearance of the text within the header?

    <p>All of the above (D)</p> Signup and view all the answers

    Which HTML element is recommended for defining different parts of the web page?

    <p>section (A)</p> Signup and view all the answers

    What is the primary function of the checkGuess function in the amended code?

    <p>To compare the elapsed time to the random number. (C)</p> Signup and view all the answers

    What happens if the user clicks the Guess button and the checkGuess function determines that the elapsed time does not match the random number?

    <p>The game displays &quot;You guessed incorrectly&quot; and ends. (D)</p> Signup and view all the answers

    What is the purpose of disabling the Guess button after the checkGuess function is called?

    <p>To prevent the user from guessing multiple times. (D)</p> Signup and view all the answers

    Which of the following would be considered an event in the context of HTML code and JavaScript code interaction?

    <p>The user clicking a button on the webpage. (C)</p> Signup and view all the answers

    What is an event handler's purpose in the context of HTML and JavaScript code interaction?

    <p>To detect user actions or changes in the browser environment. (B)</p> Signup and view all the answers

    In the given code, what event would trigger the execution of the checkGuess function?

    <p>The user clicking the Guess button (C)</p> Signup and view all the answers

    How does the interaction between HTML code and JavaScript code enhance the interactivity of a webpage?

    <p>By enabling the user to interact with the webpage's content. (A)</p> Signup and view all the answers

    What is the main advantage of using event handlers and JavaScript code to enhance webpages?

    <p>It provides real-time feedback and dynamic responses to user actions. (B)</p> Signup and view all the answers

    What is the primary goal of the review page implementation?

    <p>To allow users to submit feedback and reviews. (D)</p> Signup and view all the answers

    What essential information must be captured from the user before submitting a review?

    <p>Email address and review comments. (B)</p> Signup and view all the answers

    What automated task is performed when the review submit button is clicked?

    <p>Generating a unique review ID. (A)</p> Signup and view all the answers

    Which of the following is NOT a required feature for the staff details page?

    <p>Providing contact information for each staff member. (B)</p> Signup and view all the answers

    How are the review details displayed on the review page after submission?

    <p>In the same page, replacing the review form. (C)</p> Signup and view all the answers

    Which of the following is a key aspect of the automated method used to display staff images on the staff page?

    <p>Dynamically loading images from a local directory. (D)</p> Signup and view all the answers

    What element triggers the display of a staff member's name and experience on the staff page?

    <p>Clicking on the staff member's image. (C)</p> Signup and view all the answers

    Which of the following options correctly describes the date format used in the review details?

    <p>Day/Month/Year (e.g., 19/8/2021). (D)</p> Signup and view all the answers

    Flashcards

    JavaScript

    A programming language used to create interactivity on web pages.

    Interactivity

    The ability of a web page to respond to user input.

    Grade Calculation

    Using software to determine a student's performance score.

    Web Pages

    Documents displayed on the internet that can incorporate various technologies.

    Signup and view all the flashcards

    User Input

    Data entered by the user that influences the program's output.

    Signup and view all the flashcards

    Grade thresholds

    The specific mark ranges that determine letter grades.

    Signup and view all the flashcards

    E grade range

    Marks between 40 to 49 result in an E grade.

    Signup and view all the flashcards

    D grade range

    Marks between 50 to 59 yield a D grade.

    Signup and view all the flashcards

    C grade range

    Marks between 60 to 69 are classified as a C grade.

    Signup and view all the flashcards

    Code error explanation

    An error occurs when inputting a mark of 40 incorrectly assigns a D grade.

    Signup and view all the flashcards

    CSS

    Cascading Style Sheets; used for styling web pages.

    Signup and view all the flashcards

    font-family

    Specifies the typeface used for text in a webpage.

    Signup and view all the flashcards

    Times New Roman

    A classic serif typeface commonly used in documents.

    Signup and view all the flashcards

    header

    The top section of a webpage, often containing titles or logos.

    Signup and view all the flashcards

    p tag

    Defines a paragraph in HTML.

    Signup and view all the flashcards

    block element

    An element that starts on a new line and takes up full width.

    Signup and view all the flashcards

    margin and padding

    Space outside (margin) and inside (padding) elements on a webpage.

    Signup and view all the flashcards

    selector

    Part of CSS that targets which HTML elements to style.

    Signup and view all the flashcards

    Responsive web page

    A webpage that adjusts layout based on screen size.

    Signup and view all the flashcards

    HTML5 elements

    Tags in HTML5 used to structure a webpage content.

    Signup and view all the flashcards

    Breakpoint

    A specified screen width where layout changes occur.

    Signup and view all the flashcards

    Verdana font style

    A sans-serif typeface designed for readability on screens.

    Signup and view all the flashcards

    External style sheet

    A separate CSS file linked to provide styling for HTML.

    Signup and view all the flashcards

    Padding and margins

    Space around elements that affects layout and readability.

    Signup and view all the flashcards

    Background colour

    The color behind the content of an HTML element.

    Signup and view all the flashcards

    Center align text

    Makes text position equally from left and right edges.

    Signup and view all the flashcards

    checkGuess function

    A function that evaluates if seconds passed match a random number.

    Signup and view all the flashcards

    event

    A significant action detected by the program, like user interactions.

    Signup and view all the flashcards

    event handler

    A block of code that executes in response to an event.

    Signup and view all the flashcards

    Guess button

    A UI element which, when clicked, invokes the checkGuess function.

    Signup and view all the flashcards

    disables the Guess button

    Prevents the user from clicking the button after a guess is made.

    Signup and view all the flashcards

    You guessed correctly

    Message displayed when the user's guess matches the random number.

    Signup and view all the flashcards

    You guessed incorrectly at # seconds

    Message shown when the guess does not match, including time passed.

    Signup and view all the flashcards

    random number

    A number generated that the user must guess against the time passed.

    Signup and view all the flashcards

    Review Page

    A webpage where users can submit reviews.

    Signup and view all the flashcards

    Submit Button Functionality

    Triggers review submission and validation checks.

    Signup and view all the flashcards

    Email Address Validation

    Ensures user inputs a valid email before submission.

    Signup and view all the flashcards

    Automated Date Generation

    Automatically adds today's date in the review.

    Signup and view all the flashcards

    Review Array

    A collection storing submitted reviews.

    Signup and view all the flashcards

    Total Reviews Display

    Shows the count of total reviews submitted.

    Signup and view all the flashcards

    Staff Details Page

    Page showing staff members' images and info on click.

    Signup and view all the flashcards

    Comments in Code

    Notes within the code explaining its functions.

    Signup and view all the flashcards

    Study Notes

    Instructions for the Examination

    • Time allowed: 3 hours
    • Use black ink or ballpoint pen
    • Fill in candidate details
    • Answer all questions
    • Answer written questions in the spaces provided
    • Carry out practical tasks on computer workstation and save files
    • Do not use internet during examination
    • Total marks: 80
    • Marks for each question are shown in brackets
    • Read each question carefully
    • Attempt all questions
    • Save work regularly
    • Check answers if time allows

    Section A - Time allowance 60 minutes

    • Answer all questions
    • Answer questions requiring a written answer in the provided space
    • Some questions require saving code in a specified format

    Question 1 – HTML

    Question 2 – CSS

    • (a) One other selector: (This is missing from the document)
    • (b) Effect of CSS code in lines 2 to 4 of Figure 2: Selectors are choosing what style to apply. Selectors are choosing what style to apply. This particular selector targets p tags inside header elements. This sets the font-family to Times New Roman.
    • (c) Implement a hover effect in the provided HTML code which will change a square to a circle on hover.

    Question 3 – JavaScript

    • (a) Explanation of why the code produces an incorrect result when inputting a score of 40: The code is comparing the mark to the grade range values, not inclusive of each grade range end-point. The 40 input would satisfy an if statement and alert the student to retake the test if the score was less than 40 marks. The code includes all of the elements needed to calculate a score. It does not calculate the grade but instead informs the student that the score was less than 60 to prompt the student to get a D grade.
    • (b) Amend the JavaScript code to calculate the highest mark, lowest mark, average mark in order to populate the provided HTML table.
    • (c) Amend the JavaScript code to allow the user to complete a Guessing game and follow a series of steps to complete this task correctly and efficiently.

    Question 4 – Web Design

    • The instructions for this question describe the overall page requirements and the page style guide for creating a website, in order to achieve the format of the example website mock-ups in figures 5 and 6

    Question 5 – Review page

    • Instructions to complete the prototype for a user review page
    • The page needs to implement an automatic entry method when the submission button is clicked, collecting data correctly, validating all input, and generating the correct output to display the data correctly.

    Question 6 – Website Design

    • Assess the suitability of different website layout designs for a given list of device preferences.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Description

    Prepare for your HTML examination with this quiz based on the examination instructions. You'll cover topics such as common content models, error correction in web pages, and using HTML5 tags. Make sure to answer all questions thoroughly and save your work properly.

    Use Quizgecko on...
    Browser
    Browser