mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
refactor(curriculum): DOM quiz questions (#58466)
Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Jessica Wilkins
+149
-226
@@ -25,37 +25,37 @@ A programming language used to interact with an HTML page.
|
||||
|
||||
---
|
||||
|
||||
A JavaScript class you can instantiate to transform HTML into an mutable and serializable JSON object.
|
||||
A set of objects that contain only floating point numbers.
|
||||
|
||||
---
|
||||
|
||||
A set of JavaScript classes representing HTML elements as objects and allowing programmers to interact with it using JavaScript methods.
|
||||
A set of JavaScript classes representing HTML elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
A web standard representing the elements of an HTML page as a tree graph and how you are supposed to interact with them using code no matter which programming language you use.
|
||||
A programming interface that lets you interact with HTML documents.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following sentences is true for a web page?
|
||||
What does API stand for?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Nodes can have multiple parents.
|
||||
Additional Programming Interface
|
||||
|
||||
---
|
||||
|
||||
You can access an element siblings using the `siblings` property.
|
||||
Adding Programming Interface
|
||||
|
||||
---
|
||||
|
||||
Text and comment nodes can be accessed using the `children` property.
|
||||
Another Programming Interface
|
||||
|
||||
#### --answer--
|
||||
|
||||
The root element is always an html tag.
|
||||
Application Programming Interface
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -91,258 +91,225 @@ document.querySelectorAll("a:not([href])");
|
||||
|
||||
#### --text--
|
||||
|
||||
In JavaScript, how can you remove the last child node of a paragraph element with the `"target"` identifier and replace it with a `"That's it."` text node?
|
||||
What does the `textContent` property do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It removes text content from all HTML elements.
|
||||
|
||||
---
|
||||
|
||||
It removes text content from your JavaScript file.
|
||||
|
||||
---
|
||||
|
||||
It adds text to all arrays and objects in your JavaScript file.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It returns the plain text content of an element.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `innerHTML` property do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It is a property of the `Element` used to get all text content for an HTML element.
|
||||
|
||||
---
|
||||
|
||||
It is a property of the `Element` used to add annotations to your HTML.
|
||||
|
||||
---
|
||||
|
||||
It is a property of the `Element` used to trigger events in your HTML.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It is a property of the `Element` used to set or update parts of the HTML markup.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following will add a valid event listener?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
const target = document.querySelector("p.target");
|
||||
target.remove(target.lastElementChild);
|
||||
target.appendChild("That's it");
|
||||
btn.addEventListener("accept", () => alert("You clicked the button"));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
const target = document.getElementById("target");
|
||||
target.lastElementChild.replaceWith("That's it");
|
||||
btn.addEventListener("allow", () => alert("You clicked the button"));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
const target = document.querySelector("p#target");
|
||||
target.replaceChild("That's it", target.lastChild);
|
||||
btn.addEventListener("trigger", () => alert("You clicked the button"));
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
```js
|
||||
const target = document.getElementById("target");
|
||||
target.removeChild(target.lastChild);
|
||||
target.append("That's it.");
|
||||
btn.addEventListener("click", () => alert("You clicked the button"));
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which one of these affirmations is false?
|
||||
Which of the following is NOT a valid method of the `document` object?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The `innerHTML` element's property returns all the HTML content inside it as text.
|
||||
`getElementById()`
|
||||
|
||||
---
|
||||
|
||||
The `innerText` element's property only returns the text content that is shown on screen.
|
||||
`querySelector()`
|
||||
|
||||
---
|
||||
|
||||
The `textContent` node's property returns all the text content inside it.
|
||||
`createElement()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
The `htmlContent` node's property only returns HTML content that is shown on screen.
|
||||
`addElementToDOM()`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following JavaScript lines do not insert a thematic break at the end of the document body?
|
||||
Which of the following will set the `class` attribute to `my-class`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
document.body.insertBefore(document.createElement("hr"), null);
|
||||
const para = document.getElementById("para");
|
||||
para.setAttribute("set", "class");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
document.body.appendChild(document.createElement("hr"));
|
||||
const para = document.getElementById("para");
|
||||
para.setAttribute("remove", "my-class");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
document.body.after(document.createElement("hr"));
|
||||
const para = document.getElementById("para");
|
||||
para.setAttribute("add", "class");
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
```js
|
||||
document.body.append("<hr/>");
|
||||
const para = document.getElementById("para");
|
||||
para.setAttribute("class", "my-class");
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following statements is false?
|
||||
What is the `Event` object?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`window` is an alias for `navigator.window`:
|
||||
|
||||
```js
|
||||
window === navigator.window // returns true.
|
||||
```
|
||||
It is a special object used to remove events from your JavaScript project.
|
||||
|
||||
---
|
||||
|
||||
You can use the user screen properties (like position and size) using the `Window` object.
|
||||
It is used to automatically add events to your JavaScript projects.
|
||||
|
||||
---
|
||||
|
||||
`navigation` is an alias for `window.navigation`:
|
||||
|
||||
```js
|
||||
navigation === window.navigation // returns true.
|
||||
```
|
||||
It is a special object used when working with arrays.
|
||||
|
||||
#### --answer--
|
||||
|
||||
You can access the clipboard using:
|
||||
|
||||
```js
|
||||
await browser.clipboard.read();
|
||||
```
|
||||
It is a payload that triggers when a user interacts with your web page in some way.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Assuming the JavaScript variable `element` is an HTML `Element` object, which code does not do the same thing as the others?
|
||||
Which of the following is a method used to remove an event listener that was previously added to an element using the `addEventListener()` method?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
element.toggleAttribute("disabled");
|
||||
```
|
||||
`removalOfEventListener()`
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
element.hasAttribute("disabled") ? element.removeAttribute("disabled") : element.setAttribute("disabled", "");
|
||||
```
|
||||
`removedEventListener()`
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
element.toggleAttribute("disabled", !element.hasAttribute("disabled"));
|
||||
```
|
||||
`removingEventListener()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
```js
|
||||
element.setAttribute("disabled", !element.getAttribute("disabled"));
|
||||
```
|
||||
`removeEventListener()`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of these does not set the element text color to `red`.
|
||||
What are inline event handlers?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```html
|
||||
<p style="color: red;">...</p>
|
||||
```
|
||||
Special attributes on an HTML element that are used to cancel all events.
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<p id="paragraph">...</p>
|
||||
<script>document.getElementById("paragraph").style.color = "red";</script>
|
||||
```
|
||||
Special attributes on an HTML element used only to trigger form submissions in your JavaScript code.
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style>.red-txt { color: red; }</style>
|
||||
<p id="paragraph">...</p>
|
||||
<script>document.getElementById("paragraph").classList.add("red-txt");</script>
|
||||
```
|
||||
Special attributes on an HTML element used to remove events.
|
||||
|
||||
#### --answer--
|
||||
|
||||
```html
|
||||
<p color="red">...</p>
|
||||
```
|
||||
Special attributes on an HTML element that are used to execute JavaScript code when an event occurs.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
In the case of a click event, which `Event` property returns the clicked sub-element that triggered the parent's callback?
|
||||
What are the two main categories for web APIs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`element`
|
||||
Java APIs and third-party APIs.
|
||||
|
||||
---
|
||||
|
||||
`currentTarget`
|
||||
Browser APIs and Rust APIs.
|
||||
|
||||
---
|
||||
|
||||
`type`
|
||||
System APIs and third-party APIs.
|
||||
|
||||
#### --answer--
|
||||
|
||||
`target`
|
||||
Browser APIs and third-party APIs.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which `Event` property returns the HTML element that the event listener was attached to?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`target`
|
||||
|
||||
---
|
||||
|
||||
`element`
|
||||
|
||||
---
|
||||
|
||||
`type`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`currentTarget`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which `Event` function can be called to prevent an event from bubbling up without affecting other listeners on the current target?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`stopImmediatePropagation()`
|
||||
|
||||
---
|
||||
|
||||
`preventDefault()`
|
||||
|
||||
---
|
||||
|
||||
`composedPath()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`stopPropagation()`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which event is triggered when all the HTML page's elements have been parsed by the browser?
|
||||
Which event is triggered when all of the HTML page's elements have been parsed by the browser?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -364,174 +331,142 @@ Which event is triggered when all the HTML page's elements have been parsed by t
|
||||
|
||||
#### --text--
|
||||
|
||||
Which event is triggered when the HTML page and it's resources are fully loaded?
|
||||
Which of the following is a property that represents the inline style of an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`HTMLContentLoaded`
|
||||
`content`
|
||||
|
||||
---
|
||||
|
||||
`DOMLoaded`
|
||||
`event`
|
||||
|
||||
---
|
||||
|
||||
`DOMContentLoaded`
|
||||
`load`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`load`
|
||||
`style`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which code is not a way to trigger a `validate` function when you click on a `button` element?
|
||||
Which of the following is the correct way to use an inline event handler?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```html
|
||||
<button eventclick="validate()">Validate</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<button click="validate()">Validate</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<button clickevent="validate()">Validate</button>
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
```html
|
||||
<button onclick="validate()">Validate</button>
|
||||
```
|
||||
|
||||
---
|
||||
### --question--
|
||||
|
||||
```html
|
||||
<button id="validate_button">Validate</button>
|
||||
<script>document.getElementById("validate_button").addEventListener('click', validate);</script>
|
||||
```
|
||||
#### --text--
|
||||
|
||||
Which of the following methods is used to delay an action for a specified time?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`setInterval()`
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<button id="validate_button">Validate</button>
|
||||
<script>document.getElementById("validate_button").onclick = validate;</script>
|
||||
```
|
||||
`delay()`
|
||||
|
||||
---
|
||||
|
||||
`sleep()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
```html
|
||||
<button id="validate_button">Validate</button>
|
||||
<script>document.getElementById("validate_button").click = validate;</script>
|
||||
```
|
||||
`setTimeout()`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What statement is false about `setTimeout` and `setInterval`?
|
||||
Which of the following can be used to create and control animations directly inside JavaScript?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The first parameter is the function callback and the second is the delay duration in milliseconds.
|
||||
Allow Animations API
|
||||
|
||||
---
|
||||
|
||||
`setTimeout` calls a function once after a delay and `setInterval` call a function continuously after an interval delay.
|
||||
Control Animations API
|
||||
|
||||
---
|
||||
|
||||
They both return a timer's ID that can be stopped, respectively with `clearTimeout(id)` and `clearInterval(id)` functions.
|
||||
Create Animations API
|
||||
|
||||
#### --answer--
|
||||
|
||||
They both are `navigator` properties aliases.
|
||||
Web Animations API
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Using the JavaScript Web animation API, how can you animate an element with `id="square"` to scale it down to `0` in one second.
|
||||
What does the Canvas API do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
document.getElementById("square").animate(
|
||||
[ { transform: "scale(0)" }, { transform: "scale(1)" }, ],
|
||||
{ duration: 1 },
|
||||
);
|
||||
```
|
||||
It is used to animate graphics in your CSS file.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
document.getElementById("square").animate(
|
||||
[ { transform: "scale(1)" }, { transform: "scale(0)" }, ],
|
||||
{ duration: 1 },
|
||||
);
|
||||
```
|
||||
It is used to only remove graphics from your JavaScript file.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
document.getElementById("square").animate(
|
||||
[ { transform: "scale(0)" }, { transform: "scale(1)" }, ],
|
||||
{ duration: 1000 },
|
||||
);
|
||||
```
|
||||
It is used to remove graphics from your HTML file.
|
||||
|
||||
#### --answer--
|
||||
|
||||
```js
|
||||
document.getElementById("square").animate(
|
||||
[ { transform: "scale(1)" }, { transform: "scale(0)" }, ],
|
||||
{ duration: 1000 },
|
||||
);
|
||||
```
|
||||
It is used to manipulate graphics via your JavaScript file.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which method does not exists on an `Animation` object instance?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`play()`
|
||||
|
||||
---
|
||||
|
||||
`pause()`
|
||||
|
||||
---
|
||||
|
||||
`cancel()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`stop()`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
You have an HTML page with a 100x100 pixel canvas identified by the `"art"` ID, and the following code:
|
||||
|
||||
```js
|
||||
const canvas = document.getElementById("art");
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
ctx.fillStyle = "blue";
|
||||
```
|
||||
|
||||
Which line can you append to print a 50x50 blue square at the center of this canvas?
|
||||
Which of the following is the correct way to work with the `fillRect` property?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
ctx.fillRect(50, 50, 25, 25);
|
||||
ctx.fillRect(1fr 1fr 1fr 1fr);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
ctx.fillRect(50, 50, 50, 50);
|
||||
ctx.fillRect(set 50);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
ctx.fillRect(50%, 50%, 50, 50);
|
||||
ctx.fillRect(allow);
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
@@ -544,33 +479,21 @@ ctx.fillRect(25, 25, 50, 50);
|
||||
|
||||
#### --text--
|
||||
|
||||
Let's say you have an HTML `dialog` element stored into a JavaScript variable `welcomeDialog`. It does not show on screen by default. How can you reveal it and then hide it after a one second delay?
|
||||
Which of the following is NOT a method you can use when working with dialogs and modals?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
```js
|
||||
welcomeDialog.showModal();
|
||||
setTimeout( () => welcomeDialog.hideModal(), 1000);
|
||||
```
|
||||
`show()`
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
welcomeDialog.openModal();
|
||||
setTimeout( () => welcomeDialog.closeModal(), 1000);
|
||||
```
|
||||
`close()`
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
welcomeDialog.show();
|
||||
setTimeout( () => welcomeDialog.hide(), 1000);
|
||||
```
|
||||
`showModal()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
```js
|
||||
welcomeDialog.showModal();
|
||||
setTimeout( () => welcomeDialog.close(), 1000);
|
||||
```
|
||||
`removeModal()`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user