National 5Computer ScienceSQAComputing ScienceExam Questions4. Web Design & Development (WDD)Implementation (JavaScript)

Implementation (JavaScript) (SQA National 5 Computing Science): Exam Questions

Exam code: X816 75

8 mins5 questions
1
2 marks

MoveIt estate agency is developing a new website.

The following code is used to create the home page for the estate agent’s website. The home page includes a heading, a video, a welcome message and the company logo shown below.

Black right-facing arrow next to the letters "MI" inside a rectangular border.
…
<style>
h1 {text-align:right;font-size:24pt}
.pageText {text-align:left;font-size:12pt}
</style>
…
<h1 class="pageText"> MoveIt Estate Agents </h1>
<video width="400" height="300" controls>
<source src="intro.mp4">
</video>
<p class="pageText"> Welcome to MoveIt Estate Agents </p>
<img src="logo.jpg" width="200" height="100">
…

The page includes a feature that changes the image of the flat to the price of the flat when the user moves the cursor over the image.

Two side-by-side web pages displaying property details; one shows the property image, and the other, its £260,000 price tag.

(i) State the language used to implement this feature.

[1]

(ii) State the type of event that would be used in this feature.

[1]

How did you do?

2
1 mark

In a web‑based join‑the‑dots game, when a user moves the cursor away from a number the next number in the sequence lights up.

Connect-the-dots drawing of a happy dog with its tongue out, numbered from 1 to 88. A mouse cursor hovers over dot number 75.

Identify the JavaScript event used to implement this feature.

How did you do?

3
2 marks

Blockland theme park is developing a new website for visitors.

The following code is used to create the home page.

<!doctype html>
<html>
<head>
<title>Blockland Home Page</title>
<style>
body{background-color:lightblue;font-family:arial;}
img{height:150px; width:150px;}
h1{font-family:helvetica; font-size:24pt; text-align:center;}
.openSection{text-align:left;}
div{background-color:white; font-size:12pt;}
</style>
</head>
<body>
<img src="blocklandLogo.jpg" alt="Blockland Logo">
<h1>Welcome to Blockland!</h1>
<div>
<h1 class="openSection">Ultimate Day Out</h1>
<p>With an amazing themed room to suit every Block Lover including
rapid race cars, terrifying tarantulas and spectacular space there
is something for the whole family.</p>
<a href="parkRides.html">Click here to view the rides in the
park</a>
</div>
…
<a href="parkShop.html">Click here to browse the shop</a>
</body>
</html>

The page for a new ride called ‘The Block Cars’ is shown below. When the user moves the cursor over the image of the ride another image showing the opening date is revealed.

Two web page previews: Left shows a block car image, right shows a grey box with "Coming 16th October 2024." Both have identical descriptive text.

(i) State the language used to implement this feature.

[1]

(ii) State the type of event that is used.

[ii]

How did you do?

4
2 marks

The Vulpes fox charity would like a website to increase public knowledge of foxes.

When the cursor moves over an image of the fox it changes the picture from one of a fox in a sitting down position to one of the fox lying down.

Identify the language and the event used to implement this.

How did you do?

5
1 mark

Katrina’s Cars is a car auction website. The HTML and CSS code for the home page is shown below.

<html>
<head>
<title>Katrina’s Cars</title>
<style>
h1{text-align:center;}
h2{text-align:right;}
#heading1{text-align:right;}
#heading2{text-align:left;}
</style>
</head>
<body>
<div>
<h1 id="heading1">Katrina’s Cars</h1>
<img src="logo.jpg">
</div>
<div>
<h2 id="heading2">Top deals</h2>
<ul>
<li>Maxi Cupar</li>
<li>Mizdo CX-5</li>
<li>Oodi TT</li>
</ul>
</div>
</body>
</html>

The home page contains a logo that changes to an alternative image when the user hovers over it.

The web developers have used the onmouseover and onmouseout events.

State the language used to implement the above.

How did you do?