wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

HTML and JavaScript Basics Quiz

Total questions: 75

Worksheet time: 38mins

Name
Class
Date
1.

What is the purpose of using the <script> tag?

a)

To add styles to the page

b)

To add JavaScript to the page

c)

To add images to the page

d)

To add links to the page

2.

How do you start a comment in JavaScript?

a)

<!-- This is a comment -->

b)

/* This is a comment */

c)

// This is a comment

d)

# This is a comment

3.

What is the function of comments in JavaScript and HTML?

a)

To execute code

b)

To add images

c)

To provide information for developers

d)

To change text color

4.

What is the purpose of using an id attribute in HTML?

a)

To style elements with CSS

b)

To uniquely identify an element

c)

To create a hyperlink

d)

To add a tooltip

5.

In the example provided, what is the id given to the h1 element?

a)

"Hello, World!"

b)

"Welcome to my page!"

c)

"heading"

d)

"subheading"

6.

Why is it important to use a meaningful id in HTML?

a)

It makes the code easier to read and understand

b)

It increases the loading speed of the webpage

c)

It automatically styles the element

d)

It prevents JavaScript errors

7.

What does the <button> element do in the example?

a)

It changes the text color

b)

It adds a clickable button to the page

c)

It submits a form

d)

It refreshes the page

8.

What does the equals sign (=) mean in JavaScript?

a)

It checks if two values are equal.

b)

It sets the value of a variable.

c)

It multiplies two numbers.

d)

It divides two numbers.

9.

In JavaScript, what is the preferred type of quote for strings?

a)

Double quotes only

b)

Single quotes only

c)

Single quotes, but double quotes can also be used

d)

Triple quotes

10.

What is a string in JavaScript?

a)

A number

b)

A boolean value

c)

A sequence of characters

d)

An array

11.

What property do input elements have in JavaScript?

a)

textContent

b)

value

c)

innerHTML

d)

style

12.

What is the purpose of the JavaScript function `clickAction()` in the provided code?

a)

To change the text content of the heading

b)

To update the favorite food displayed

c)

To add a new input field

d)

To delete the input field

13.

In JavaScript, how do you end a statement?

a)

With a period (.)

b)

With a comma (,)

c)

With a semi-colon (;)

d)

With a colon (:)

14.

What HTML element is used to trigger the JavaScript function in this code?

a)

clickAction

b)

<button>

c)

<input>

d)

<script>

15.

What is the role of `update.onclick = clickAction;` in the script?

a)

It assigns the function to be executed when the button is clicked

b)

It changes the button text

c)

It creates a new button

d)

It deletes the button

16.

What is a "property" in the context of HTML and JavaScript?

a)

A line of code in JavaScript

b)

A "thing" that belongs to an element

c)

An attribute that gives additional information

d)

A message for humans within the code

17.

Which symbol is used to wrap the contents of a string in JavaScript?

a)

.

b)

;

c)

'

d)

=

18.

What does the "id" attribute in HTML do?

a)

It sets the value of an element

b)

It refers to an element in the document

c)

It ends a JavaScript statement

d)

It accesses a property

19.

In JavaScript, what is the purpose of the "textContent" property?

a)

To end a JavaScript statement

b)

To wrap the contents of a string

c)

To represent the text of the element

d)

To set the value of an input element

20.

What is the function of the "=" symbol in JavaScript?

a)

To access a property

b)

To set the value of something

c)

To end a JavaScript statement

d)

To wrap the contents of a string

21.

What is the purpose of the `onclick` event in JavaScript?

a)

To update the page when a key is pressed

b)

To execute a function when an element is clicked

c)

To change the style of an element

d)

To load a new page

22.

Which event occurs when you type in an input element in JavaScript?

a)

onclick

b)

onhover

c)

oninput

d)

onload

23.

What is an event in the context of JavaScript?

a)

A function that runs automatically

b)

An action that occurs when a user interacts with a webpage

c)

A variable that stores data

d)

A style applied to an element

24.

What is the purpose of the <label> tag in HTML?

a)

To style the input field

b)

To provide instructions next to an input field

c)

To submit the form

d)

To create a dropdown menu

25.

In the provided JavaScript code, what event is being used with the input field?

a)

onclick

b)

oninput

c)

onmouseover

d)

onkeydown

26.

What does the function `inputAction()` do in the JavaScript code?

a)

It changes the background color of the page

b)

It updates the text content of an element with the value of the input field

c)

It submits the form

d)

It creates a new input field

27.

What is a function in programming?

a)

A block of code that performs a specific task

b)

A type of variable

c)

A method to store data

d)

A way to style web pages

28.

What is the purpose of round brackets () in a function?

a)

To surround the body of the function

b)

To surround arguments of the function

c)

To indicate a comment

d)

To define a variable

29.

What do squiggly brackets {} do in a function?

a)

Indicate a comment

b)

Surround the body of the function

c)

Define a variable

d)

Go after the function name

30.

What is the purpose of squiggly brackets {} in a function?

a)

To indicate comments in the code

b)

To show where the body of code is

c)

To declare variables

d)

To end a line of code

31.

What is indentation used for in coding?

a)

To make the code run faster

b)

To add comments to the code

c)

To keep the code readable

d)

To increase the code's security

32.

What happens when a user performs an action like clicking a button in event-driven programming?

a)

The program stops running

b)

The event is triggered

c)

The code is deleted

d)

The function is ignored

33.

Which event is triggered when an input field changes and the cursor leaves the field?

a)

onkeypress

b)

onchange

c)

onclick

d)

oninput

34.

What is the purpose of the 'type' attribute in an input element?

a)

To change the font size

b)

To specify the input variant

c)

To set the background color

d)

To align the text

35.

Which event is triggered when a key is pressed down on the keyboard?

a)

onkeyup

b)

onclick

c)

onkeydown

d)

onchange

36.

What does the 'onclick' event do?

a)

It triggers when a key is pressed

b)

It triggers when the mouse is clicked

c)

It triggers when the input changes

d)

It triggers when the page loads

37.

What is the purpose of the 'min' attribute in an input field?

<label>Number: <input id="number" type="range" min="0" max="144" step="12"></label>

a)

It sets the maximum allowed number.

b)

It sets the minimum allowed number.

c)

It sets the default number.

d)

It sets the step size for the number.

38.

In the context of input fields, what does the 'step' attribute define?

<label>Number: <input id="number" type="range" min="0" max="144" step="12"></label>

a)

The default value of the input.

b)

The maximum value of the input.

c)

How much the buttons should move the number by.

d)

The minimum value of the input.

39.

What type of input is used to create a slider for selecting a number within a range?

a)

Text input

b)

Checkbox input

c)

Range input

d)

Radio input

40.

In the provided script, what does the function 'orderBread()' do?

a)

It sets the minimum value of the input.

b)

It updates the text content with the input value.

c)

It changes the color of the slider.

d)

It resets the input field.

41.

What is the purpose of a textarea input in a form?

a)

To select multiple options

b)

To input free-form text, including line breaks

c)

To create a dropdown menu

d)

To submit a form

42.

What do the 'cols' and 'rows' attributes in a textarea tag specify?

a)

The color and font of the text

b)

The number of characters allowed

c)

The number of columns (width) and rows (height)

d)

The alignment of the text

43.

Which of the following is an example of a select input option?

a)

Textarea

b)

Checkbox

c)

Cage

d)

Radio button

44.

What is the function of a select input in a form?

a)

To allow users to input free-form text

b)

To allow users to select one option from a dropdown list

c)

To submit the form data

d)

To create a text area

45.

What is the purpose of the "onchange" event in JavaScript?

a)

To trigger an action when an element is clicked

b)

To trigger an action when an element is hovered over

c)

To trigger an action when an element's value changes

d)

To trigger an action when an element is double-clicked

46.

How can you join a string with the value of an input in JavaScript?

a)

Using the "+" operator

b)

Using the "-" operator

c)

Using the "*" operator

d)

Using the "/" operator

47.

What is event bubbling in HTML?

a)

An event that only affects the clicked element

b)

An event that triggers only once

c)

An event that triggers on the element and its parent elements

d)

An event that stops at the first element

48.

What is the purpose of the `eggType.onchange` event in the script?

a)

To change the color of the text

b)

To update the egg order message

c)

To reset the form fields

d)

To submit the form automatically

49.

Which of the following is NOT a type of egg mentioned in the document?

a)

Cage

b)

Barn Laid

c)

Organic

d)

Boiled

50.

What is the minimum number of eggs that can be selected according to the input field?

<input id="eggNumber" type="number" min="6" max="24" step="6" value="12">

a)

1

b)

6

c)

12

d)

24

51.

What concept allows the `eggInput` element to listen to events from both `eggType` and `eggNumber` input fields?

a)

Inheritance

b)

Encapsulation

c)

Bubbling

d)

Polymorphism

52.

What is an event in the context of web pages?

a)

A block of code that runs automatically

b)

Something that can happen on the web page, usually done by a user

c)

A way to style a web page

d)

A type of data storage

53.

What does the term "trigger" refer to in web development?

a)

The act of stopping an event

b)

The act of making an event happen

c)

A type of error in code

d)

A method of styling elements

54.

What is the purpose of indentation in coding?

a)

To make code run faster

b)

To show what is inside a block and make code more readable

c)

To add comments to the code

d)

To create new functions

55.

What does the "onclick" event do in JavaScript?

a)

It triggers when a page loads

b)

It triggers whenever you click an element

c)

It triggers when a form is submitted

d)

It triggers when a page is closed

56.

What is a "function" in programming?

a)

A type of variable

b)

A block of code that has a particular function and can be run many times

c)

A method of styling web pages

d)

A type of data storage

57.

What is the purpose of parentheses ( ) in a function?

a)

To show which part is the arguments

b)

To describe the options available in a select

c)

To decide what type of input it is

d)

To configure number and range inputs

58.

What does the 'select' element in HTML do?

a)

It is used for selecting from different options, usually in a drop down

b)

It describes the value of the element

c)

It decides what type of input it is

d)

It configures number and range inputs

59.

Which attribute on input elements decides what kind of input it is?

a)

type

b)

value

c)

option

d)

select

60.

What is the function of the 'value' attribute in HTML?

a)

It describes the value of the element

b)

It configures number and range inputs

c)

It decides what type of input it is

d)

It is used for selecting from different options

61.

Which attributes are available on the number and range inputs for configuring them?

a)

max, min, step

b)

type, value, option

c)

select, option, value

d)

parentheses, curly brackets

62.

What is the purpose of the `update()` function in the script?

a)

To change the background color of the page

b)

To update the text content of certain elements

c)

To create a new HTML element

d)

To delete an existing HTML element

63.

Which event triggers the `update()` function for the `playerInput` element?

a)

onclick

b)

oninput

c)

onchange

d)

onmouseover

64.

What value is assigned to `colour.textContent` in the `update()` function?

a)

playerInput.value

b)

scoreInput.value

c)

colourSelect.value

d)

document.value

65.

What is the purpose of using checkboxes in a form?

a)

To allow users to select multiple options from a list

b)

To allow users to select only one option from a list

c)

To submit a form

d)

To reset a form

66.

Why do checkboxes require a value attribute?

a)

Because checkboxes have no text input

b)

Because checkboxes need to be styled

c)

Because checkboxes are always checked by default

d)

Because checkboxes are used for single selection

67.

Which of the following is NOT a topic covered in our JavaScript Study?

a)

Making decisions

b)

Using loops

c)

Checkboxes and radio inputs

d)

Comparing things

68.

What is the purpose of using radio inputs in a form?

a)

To allow multiple selections

b)

To allow only one selection

c)

To submit the form

d)

To reset the form

69.

Which attribute is used to group radio inputs together?

a)

type

b)

value

c)

name

d)

label

70.

Which of the following is not a flavor option mentioned in the document?

a)

Mango

b)

Raspberry

c)

Blueberry

d)

Strawberry

71.

What are the two container options provided in the document?

a)

Cup and Bowl

b)

Cone and Bowl

c)

Cup and Cone

d)

Cone and Plate

72.

What is the purpose of using the "if" statement in JavaScript?

a)

To repeat a block of code multiple times

b)

To give instructions based on a condition

c)

To declare a variable

d)

To create a function

73.

In the provided HTML code, what type of input is used for selecting a topping?

a)

Checkbox

b)

Text

c)

Radio

d)

Label

74.

What effect does clicking the "Fancify!" button have on the heading in the provided code?

a)

It changes the heading's text to 'Fancified!'

b)

It adds the 'fancy' class to the heading, changing its style

c)

It hides the heading from the page

d)

It removes the button from the page

75.

Which CSS property is used in the '.fancy' class to change the font style of the heading?

a)

font-weight

b)

font-size

c)

font-style

d)

font-family