jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-25 02:14:11 -05:00
Code Issues Projects Releases Wiki Activity

refactor(curriculum): remove second events quiz and review page (#58483)

Browse Source 
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
2025-02-05 09:22:10 -08:00
committed by GitHub
parent e699f2d9eb
commit e19d00dfbe
10 changed files with 60 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/i18n/locales/english/intro.json
View File

@@ -2959,19 +2959,6 @@
"In this lab, you'll build a favorite icon toggler by utilizing JavaScript click events."
]
},
"review-dom-manipulation-and-click-events-with-javascript": {
"title": "DOM Manipulation and Click Events with JavaScript Review",
"intro": [
"Before you're quizzed on the DOM, you should review what you've learned about it.",
"Open up this page to review concepts including how to work with the <code>DOM</code>, <code>Web API's</code>, the <code>addEventListener()</code> method and more."
]
},
"quiz-dom-manipulation-and-click-event-with-javascript": {
"title": "DOM Manipulation and Click Events with JavaScript Quiz",
"intro": [
"Test your knowledge of DOM manipulation and click events in JavaScript with this quiz."
]
},
"lecture-understanding-the-event-object-and-event-delegation": {
"title": "Understanding the Event Object and Event Delegation",
"intro": [
@@ -3016,16 +3003,18 @@
"In this lab, you'll use DOM manipulation, object destructuring, event handling, and data filtering to build a set of football team cards."
]
},
"review-javascript-events": {
"title": "JavaScript Events Review",
"review-dom-manipulation-and-click-events-with-javascript": {
"title": "DOM Manipulation and Click Events with JavaScript Review",
"intro": [
"Before you're quizzed on events, you should review what you've learned.",
"Open up this page to review concepts like change events, event bubbling, and event delegation."
"Before you're quizzed on the DOM, you should review what you've learned about it.",
"Open up this page to review concepts including how to work with the <code>DOM</code>, <code>Web APIs</code>, the <code>addEventListener()</code> method, change events, event bubbling and more."
]
},
"quiz-javascript-events": {
"title": "JavaScript Events Quiz",
"intro": ["Test your knowledge of JavaScript events with this quiz."]
"quiz-dom-manipulation-and-click-event-with-javascript": {
"title": "DOM Manipulation and Click Events with JavaScript Quiz",
"intro": [
"Test your knowledge of DOM manipulation and click events in JavaScript with this quiz."
]
},
"lecture-debugging-techniques": {
"title": "Debugging Techniques",

9
client/src/pages/learn/full-stack-developer/quiz-javascript-events/index.md
View File

@@ -1,9 +0,0 @@
---
title: Introduction to the JavaScript Events Quiz
block: quiz-javascript-events
superBlock: full-stack-developer
---
## Introduction to the JavaScript Events Quiz
Test what you've learned in this quiz on JavaScript Events.

9
client/src/pages/learn/full-stack-developer/review-javascript-events/index.md
View File

@@ -1,9 +0,0 @@
---
title: Introduction to the JavaScript Events Review
block: review-javascript-events
superBlock: full-stack-developer
---
## Introduction to the JavaScript Events Review
Review the JavaScript Events concepts to prepare for the upcoming quiz.

12
curriculum/challenges/_meta/quiz-javascript-events/meta.json
View File

@@ -1,12 +0,0 @@
{
"name": "JavaScript Events Quiz",
"blockType": "quiz",
"blockLayout": "link",
"isUpcomingChange": false,
"dashedName": "quiz-javascript-events",
"superBlock": "full-stack-developer",
"challengeOrder": [
{ "id": "66edd0ac31fea6e678eb925a", "title": "JavaScript Events Quiz" }
],
"helpCategory": "JavaScript"
}

12
curriculum/challenges/_meta/review-javascript-events/meta.json
View File

@@ -1,12 +0,0 @@
{
"name": "JavaScript Events Review",
"blockType": "review",
"blockLayout": "link",
"isUpcomingChange": false,
"dashedName": "review-javascript-events",
"superBlock": "full-stack-developer",
"challengeOrder": [
{ "id": "6723cc0ca05ce9b87a319ceb", "title": "JavaScript Events Review" }
],
"helpCategory": "JavaScript"
}

18
curriculum/challenges/english/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md
View File

@@ -449,31 +449,23 @@ It is used to manipulate graphics via your JavaScript file.
#### --text--
Which of the following is the correct way to work with the `fillRect` property?
What is event delegation?
#### --distractors--
```js
ctx.fillRect(1fr 1fr 1fr 1fr);
```
The process of listening to events when an event is cancelled.
---
```js
ctx.fillRect(set 50);
```
The process of listening to events when a click event occurs.
---
```js
ctx.fillRect(allow);
```
The process of listening to events when a change event occurs.
#### --answer--
```js
ctx.fillRect(25, 25, 50, 50);
```
The process of listening to events that have bubbled up to a parent.
### --question--

465
curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md
View File

@@ -1,465 +0,0 @@
---
id: 66edd0ac31fea6e678eb925a
title: JavaScript Events Quiz
challengeType: 8
dashedName: quiz-javascript-events
---
# --description--
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
# --quizzes--
## --quiz--
### --question--
#### --text--
Which method is used to listen to events in JavaScript?
#### --distractors--
`.getElementById()`
---
`.createElement()`
---
`.innerHTML`
#### --answer--
`.addEventListener()`
### --question--
#### --text--
What does this code demonstrate?
```js
const parentList = document.getElementById('parent-list');
parentList.addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'LI') {
console.log('List item clicked:', event.target.textContent);
}
});
```
#### --distractors--
DOM Manipulation.
---
Event Bubbling.
---
Callback Function.
#### --answer--
Event Delegation.
### --question--
#### --text--
What is the term for a function that runs in response to an event?
#### --distractors--
Middleware function.
---
Promise function.
---
Asynchronous function.
#### --answer--
Callback function.
### --question--
#### --text--
What does the `event.target` property return?
#### --distractors--
The parent of the event object.
---
The HTML document.
---
The window object.
#### --answer--
The element that triggered the event.
### --question--
#### --text--
How do you correctly pass an argument to an event handler function in JavaScript?
#### --distractors--
`addEventListener('click', myFunction())`
---
`addEventListener('click', myFunction.argument)`
---
`addEventListener('click', parameter => myFunction(argument))`
#### --answer--
`addEventListener('click', () => myFunction(argument))`
### --question--
#### --text--
Which event type captures an input event across all types of input fields?
#### --distractors--
`keyup`
---
`keypress`
---
`keydown`
#### --answer--
`input`
### --question--
#### --text--
What is the main advantage of using `addEventListener()` over inline event handlers?
#### --distractors--
It supports synchronous handling.
---
It reduces CSS file size.
---
It can't be removed once added.
#### --answer--
It allows multiple event listeners to be attached to a single element.
### --question--
#### --text--
What is the purpose of the `event.preventDefault()` method?
#### --distractors--
To stop the event from propagating to other listeners.
---
To set a default value to the event.
---
To remove the event handler.
#### --answer--
To prevent the default action associated with an event from being executed.
### --question--
#### --text--
What does the term "event propagation" refer to?
#### --distractors--
Events can only be handled by inline handlers.
---
Events are triggered by CSS changes.
---
Events are copied to a new window.
#### --answer--
Events travel through the DOM in phases.
### --question--
#### --text--
What event handler would you use to detect a right-click on an element?
#### --distractors--
`click`
---
`hover`
---
`mousedown`
#### --answer--
`contextmenu`
### --question--
#### --text--
Which of the following is an example of an inline event handler?
#### --distractors--
`<script>myButton.addEventListener('click', myFunction);</script>`
---
`<button id="myButton"></button>`
---
`<button class="myButton">Click me</button>`
#### --answer--
`<button onclick="myFunction()">Click me</button>`
### --question--
#### --text--
Which of the following is a common use case for event delegation?
#### --distractors--
Preventing default browser behaviors.
---
Canceling event propagation.
---
Creating custom events.
#### --answer--
Handling click events on dynamically created elements.
### --question--
#### --text--
What is meant by the "default action" of an event in JavaScript?
#### --distractors--
The event's propagation is stopped automatically.
---
An external stylesheet is applied.
---
The event listener is called twice.
#### --answer--
The browser's predefined behavior that occurs after an event is triggered.
### --question--
#### --text--
Why is the once option in `addEventListener()` useful?
#### --distractors--
It makes the event listener asynchronous.
---
It allows capturing to be the default phase.
---
It stops the event from bubbling up.
#### --answer--
It ensures that the event listener is removed after being triggered once.
### --question--
#### --text--
What property refers to the HTML element to which the event handler is attached?
#### --distractors--
`event.caller`
---
`event.this`
---
`event.parent`
#### --answer--
`event.currentTarget`
### --question--
#### --text--
How does the concept of event delegation improve performance?
#### --distractors--
It creates separate listeners for each child.
---
It prevents child elements from triggering events.
---
It limits event propagation to the capturing phase.
#### --answer--
It reduces the number of event listeners by using a single listener on a parent element.
### --question--
#### --text--
Why is it important to remove event listeners when they are no longer needed?
#### --distractors--
It makes the page load slower.
---
It prevents CSS styles from being applied.
---
It breaks JavaScript execution.
#### --answer--
It improves performance and reduces memory leaks.
### --question--
#### --text--
What does the `DOMContentLoaded` event indicate?
#### --distractors--
The page fully loaded with all images.
---
Only external styles are loaded.
---
The page is still loading.
#### --answer--
The HTML document has been completely loaded and parsed.
### --question--
#### --text--
What is the role of `stopPropagation()` in event handling?
#### --distractors--
To execute the default behavior of the event.
---
To start event capturing.
---
To bind the event handler to multiple events.
#### --answer--
To stop the event from propagating to parent elements.
### --question--
#### --text--
How can you remove all event listeners attached to an element?
#### --distractors--
`element.removeAllListeners()`
---
`element.removeEventListeners()`
---
`element.clearEventListeners()`
#### --answer--
There is no direct way to remove all event listeners.

44
curriculum/challenges/english/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
View File

@@ -9,7 +9,7 @@ dashedName: review-dom-manipulation-and-click-events-with-javascript
Review the concepts below to prepare for the upcoming quiz.
## Working with the DOM and Web API's
## Working with the DOM and Web APIs
- **API**: An API (Application Programming Interface) is a set of rules and protocols that allow software applications to communicate with each other and exchange data efficiently.
- **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
@@ -140,7 +140,7 @@ const lastParagraph = document.querySelector("#example-section p:last-of-type");
sectionEl.removeChild(lastParagraph);
```
## Work with the `setAttribute` Method
## Work with the `setAttribute()` Method
- **Definition**: This method is used to set the attribute for a given element. If the attribute already exists, then the value is updated. Otherwise, a new attribute is added with a value.
@@ -167,7 +167,7 @@ const btn = document.getElementById("btn");
btn.addEventListener("click", () => alert("You clicked the button"));
```
- **`removeEventListener` Method**: This method is used to remove an event listener that was previously added to an element using the `addEventListener` method. This is useful when you want to stop listening for a particular event on an element.
- **`removeEventListener()` Method**: This method is used to remove an event listener that was previously added to an element using the `addEventListener()` method. This is useful when you want to stop listening for a particular event on an element.
```js
const bodyEl = document.querySelector("body");
@@ -194,6 +194,42 @@ para.addEventListener("mouseover", () => {
<button onclick="alert('Hello World!')">Show alert</button>
```
## The Change Event
- **Definition**: The change event is a special event which is fired when the user modifies the value of certain input elements. Examples would include when a checkbox or a radio button is ticked. Or when the user makes a selection from something like a date picker or dropdown menu.
```html
<label>
Choose a programming language:
<select class="language" name="language">
<option value="">---Select One---</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="C++">C++</option>
</select>
</label>
<p class="result"></p>
```
```js
const selectEl = document.querySelector(".language");
const result = document.querySelector(".result");
selectEl.addEventListener("change", (e) => {
result.textContent = `You enjoy programming in ${e.target.value}.`;
});
```
## Event Bubbling
- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
- **`stopPropagation()` Method**: This method prevents further propagation for an event.
## Event Delegation
- **Definition**: Event delegation is the process of listening to events that have bubbled up to a parent, rather than handling them directly on the element that triggered them.
## DOMContentLoaded
- **Definition**: The `DOMContentLoaded` event is fired when everything in the HTML document has been loaded and parsed. If you have external stylesheets, or images, the `DOMContentLoaded` event will not wait for those to be loaded. It will only wait for the HTML to be loaded.
@@ -225,7 +261,7 @@ toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));
```
## Working with the `setTimeout` and `setInterval` Methods
## Working with the `setTimeout()` and `setInterval()` Methods
- **`setTimeout()` Method**: This method lets you delay an action for a specified time.

49
curriculum/challenges/english/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
View File

@@ -1,49 +0,0 @@
---
id: 6723cc0ca05ce9b87a319ceb
title: JavaScript Events Review
challengeType: 24
dashedName: review-javascript-events
---
# --description--
Review the concepts below to prepare for the upcoming quiz.
## The Change Event
- **Definition**: The change event is a special event which is fired when the user modifies the value of certain input elements. Examples would include when a checkbox or a radio button is ticked. Or when the user makes a selection from something like a date picker or dropdown menu.
```html
<label>
Choose a programming language:
<select class="language" name="language">
<option value="">---Select One---</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="C++">C++</option>
</select>
</label>
<p class="result"></p>
```
```js
const selectEl = document.querySelector(".language");
const result = document.querySelector(".result");
selectEl.addEventListener("change", (e) => {
result.textContent = `You enjoy programming in ${e.target.value}.`;
});
```
## Event Bubbling
- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
## Event Delegation
- **Definition**: Event delegation is the process of listening to events that have bubbled up to a parent, rather than handling them directly on the element that triggered them.
# --assignment--
Review the JavaScript Events topics and concepts.

14
curriculum/superblock-structure/full-stack.json
View File

@@ -414,12 +414,6 @@
},
{ "dashedName": "workshop-storytelling-app" },
{ "dashedName": "lab-favorite-icon-toggler" },
{
"dashedName": "review-dom-manipulation-and-click-events-with-javascript"
},
{
"dashedName": "quiz-dom-manipulation-and-click-event-with-javascript"
},
{
"dashedName": "lecture-understanding-the-event-object-and-event-delegation"
},
@@ -429,8 +423,12 @@
{ "dashedName": "workshop-rps-game" },
{ "dashedName": "lab-palindrome-checker" },
{ "dashedName": "lab-football-team-cards" },
{ "dashedName": "review-javascript-events" },
{ "dashedName": "quiz-javascript-events" }
{
"dashedName": "review-dom-manipulation-and-click-events-with-javascript"
},
{
"dashedName": "quiz-dom-manipulation-and-click-event-with-javascript"
}
]
},
{