NEW
Font size
WorksheetsHTML and JavaScript Basics Quiz
Total questions: 75
Worksheet time: 38mins
What is the purpose of using the <script> tag?
To add styles to the page
To add JavaScript to the page
To add images to the page
To add links to the page
How do you start a comment in JavaScript?
<!-- This is a comment -->
/* This is a comment */
// This is a comment
# This is a comment
What is the function of comments in JavaScript and HTML?
To execute code
To add images
To provide information for developers
To change text color
What is the purpose of using an id attribute in HTML?
To style elements with CSS
To uniquely identify an element
To create a hyperlink
To add a tooltip
In the example provided, what is the id given to the h1 element?
"Hello, World!"
"Welcome to my page!"
"heading"
"subheading"
Why is it important to use a meaningful id in HTML?
It makes the code easier to read and understand
It increases the loading speed of the webpage
It automatically styles the element
It prevents JavaScript errors
What does the <button> element do in the example?
It changes the text color
It adds a clickable button to the page
It submits a form
It refreshes the page
What does the equals sign (=) mean in JavaScript?
It checks if two values are equal.
It sets the value of a variable.
It multiplies two numbers.
It divides two numbers.
In JavaScript, what is the preferred type of quote for strings?
Double quotes only
Single quotes only
Single quotes, but double quotes can also be used
Triple quotes
What is a string in JavaScript?
A number
A boolean value
A sequence of characters
An array
What property do input elements have in JavaScript?
textContent
value
innerHTML
style
What is the purpose of the JavaScript function `clickAction()` in the provided code?
To change the text content of the heading
To update the favorite food displayed
To add a new input field
To delete the input field
In JavaScript, how do you end a statement?
With a period (.)
With a comma (,)
With a semi-colon (;)
With a colon (:)
What HTML element is used to trigger the JavaScript function in this code?
clickAction
<button>
<input>
<script>
What is the role of `update.onclick = clickAction;` in the script?
It assigns the function to be executed when the button is clicked
It changes the button text
It creates a new button
It deletes the button
What is a "property" in the context of HTML and JavaScript?
A line of code in JavaScript
A "thing" that belongs to an element
An attribute that gives additional information
A message for humans within the code
Which symbol is used to wrap the contents of a string in JavaScript?
.
;
'
=
What does the "id" attribute in HTML do?
It sets the value of an element
It refers to an element in the document
It ends a JavaScript statement
It accesses a property
In JavaScript, what is the purpose of the "textContent" property?
To end a JavaScript statement
To wrap the contents of a string
To represent the text of the element
To set the value of an input element
What is the function of the "=" symbol in JavaScript?
To access a property
To set the value of something
To end a JavaScript statement
To wrap the contents of a string
What is the purpose of the `onclick` event in JavaScript?
To update the page when a key is pressed
To execute a function when an element is clicked
To change the style of an element
To load a new page
Which event occurs when you type in an input element in JavaScript?
onclick
onhover
oninput
onload
What is an event in the context of JavaScript?
A function that runs automatically
An action that occurs when a user interacts with a webpage
A variable that stores data
A style applied to an element
What is the purpose of the <label> tag in HTML?
To style the input field
To provide instructions next to an input field
To submit the form
To create a dropdown menu
In the provided JavaScript code, what event is being used with the input field?
onclick
oninput
onmouseover
onkeydown
What does the function `inputAction()` do in the JavaScript code?
It changes the background color of the page
It updates the text content of an element with the value of the input field
It submits the form
It creates a new input field
What is a function in programming?
A block of code that performs a specific task
A type of variable
A method to store data
A way to style web pages
What is the purpose of round brackets () in a function?
To surround the body of the function
To surround arguments of the function
To indicate a comment
To define a variable
What do squiggly brackets {} do in a function?
Indicate a comment
Surround the body of the function
Define a variable
Go after the function name
What is the purpose of squiggly brackets {} in a function?
To indicate comments in the code
To show where the body of code is
To declare variables
To end a line of code
What is indentation used for in coding?
To make the code run faster
To add comments to the code
To keep the code readable
To increase the code's security
What happens when a user performs an action like clicking a button in event-driven programming?
The program stops running
The event is triggered
The code is deleted
The function is ignored
Which event is triggered when an input field changes and the cursor leaves the field?
onkeypress
onchange
onclick
oninput
What is the purpose of the 'type' attribute in an input element?
To change the font size
To specify the input variant
To set the background color
To align the text
Which event is triggered when a key is pressed down on the keyboard?
onkeyup
onclick
onkeydown
onchange
What does the 'onclick' event do?
It triggers when a key is pressed
It triggers when the mouse is clicked
It triggers when the input changes
It triggers when the page loads
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>
It sets the maximum allowed number.
It sets the minimum allowed number.
It sets the default number.
It sets the step size for the number.
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>
The default value of the input.
The maximum value of the input.
How much the buttons should move the number by.
The minimum value of the input.
What type of input is used to create a slider for selecting a number within a range?
Text input
Checkbox input
Range input
Radio input
In the provided script, what does the function 'orderBread()' do?
It sets the minimum value of the input.
It updates the text content with the input value.
It changes the color of the slider.
It resets the input field.
What is the purpose of a textarea input in a form?
To select multiple options
To input free-form text, including line breaks
To create a dropdown menu
To submit a form
What do the 'cols' and 'rows' attributes in a textarea tag specify?
The color and font of the text
The number of characters allowed
The number of columns (width) and rows (height)
The alignment of the text
Which of the following is an example of a select input option?
Textarea
Checkbox
Cage
Radio button
What is the function of a select input in a form?
To allow users to input free-form text
To allow users to select one option from a dropdown list
To submit the form data
To create a text area
What is the purpose of the "onchange" event in JavaScript?
To trigger an action when an element is clicked
To trigger an action when an element is hovered over
To trigger an action when an element's value changes
To trigger an action when an element is double-clicked
How can you join a string with the value of an input in JavaScript?
Using the "+" operator
Using the "-" operator
Using the "*" operator
Using the "/" operator
What is event bubbling in HTML?
An event that only affects the clicked element
An event that triggers only once
An event that triggers on the element and its parent elements
An event that stops at the first element
What is the purpose of the `eggType.onchange` event in the script?
To change the color of the text
To update the egg order message
To reset the form fields
To submit the form automatically
Which of the following is NOT a type of egg mentioned in the document?
Cage
Barn Laid
Organic
Boiled
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">
1
6
12
24
What concept allows the `eggInput` element to listen to events from both `eggType` and `eggNumber` input fields?
Inheritance
Encapsulation
Bubbling
Polymorphism
What is an event in the context of web pages?
A block of code that runs automatically
Something that can happen on the web page, usually done by a user
A way to style a web page
A type of data storage
What does the term "trigger" refer to in web development?
The act of stopping an event
The act of making an event happen
A type of error in code
A method of styling elements
What is the purpose of indentation in coding?
To make code run faster
To show what is inside a block and make code more readable
To add comments to the code
To create new functions
What does the "onclick" event do in JavaScript?
It triggers when a page loads
It triggers whenever you click an element
It triggers when a form is submitted
It triggers when a page is closed
What is a "function" in programming?
A type of variable
A block of code that has a particular function and can be run many times
A method of styling web pages
A type of data storage
What is the purpose of parentheses ( ) in a function?
To show which part is the arguments
To describe the options available in a select
To decide what type of input it is
To configure number and range inputs
What does the 'select' element in HTML do?
It is used for selecting from different options, usually in a drop down
It describes the value of the element
It decides what type of input it is
It configures number and range inputs
Which attribute on input elements decides what kind of input it is?
type
value
option
select
What is the function of the 'value' attribute in HTML?
It describes the value of the element
It configures number and range inputs
It decides what type of input it is
It is used for selecting from different options
Which attributes are available on the number and range inputs for configuring them?
max, min, step
type, value, option
select, option, value
parentheses, curly brackets
What is the purpose of the `update()` function in the script?
To change the background color of the page
To update the text content of certain elements
To create a new HTML element
To delete an existing HTML element
Which event triggers the `update()` function for the `playerInput` element?
onclick
oninput
onchange
onmouseover
What value is assigned to `colour.textContent` in the `update()` function?
playerInput.value
scoreInput.value
colourSelect.value
document.value
What is the purpose of using checkboxes in a form?
To allow users to select multiple options from a list
To allow users to select only one option from a list
To submit a form
To reset a form
Why do checkboxes require a value attribute?
Because checkboxes have no text input
Because checkboxes need to be styled
Because checkboxes are always checked by default
Because checkboxes are used for single selection
Which of the following is NOT a topic covered in our JavaScript Study?
Making decisions
Using loops
Checkboxes and radio inputs
Comparing things
What is the purpose of using radio inputs in a form?
To allow multiple selections
To allow only one selection
To submit the form
To reset the form
Which attribute is used to group radio inputs together?
type
value
name
label
Which of the following is not a flavor option mentioned in the document?
Mango
Raspberry
Blueberry
Strawberry
What are the two container options provided in the document?
Cup and Bowl
Cone and Bowl
Cup and Cone
Cone and Plate
What is the purpose of using the "if" statement in JavaScript?
To repeat a block of code multiple times
To give instructions based on a condition
To declare a variable
To create a function
In the provided HTML code, what type of input is used for selecting a topping?
Checkbox
Text
Radio
Label
What effect does clicking the "Fancify!" button have on the heading in the provided code?
It changes the heading's text to 'Fancified!'
It adds the 'fancy' class to the heading, changing its style
It hides the heading from the page
It removes the button from the page
Which CSS property is used in the '.fancy' class to change the font style of the heading?
font-weight
font-size
font-style
font-family
