diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index b8f1e5ca990..537e151b366 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -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 DOM, Web API's, the addEventListener() 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 DOM, Web APIs, the addEventListener() 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",
diff --git a/client/src/pages/learn/full-stack-developer/quiz-javascript-events/index.md b/client/src/pages/learn/full-stack-developer/quiz-javascript-events/index.md
deleted file mode 100644
index edf56d49e73..00000000000
--- a/client/src/pages/learn/full-stack-developer/quiz-javascript-events/index.md
+++ /dev/null
@@ -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.
diff --git a/client/src/pages/learn/full-stack-developer/review-javascript-events/index.md b/client/src/pages/learn/full-stack-developer/review-javascript-events/index.md
deleted file mode 100644
index 7ca9f5dcfbc..00000000000
--- a/client/src/pages/learn/full-stack-developer/review-javascript-events/index.md
+++ /dev/null
@@ -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.
diff --git a/curriculum/challenges/_meta/quiz-javascript-events/meta.json b/curriculum/challenges/_meta/quiz-javascript-events/meta.json
deleted file mode 100644
index 3c1b334156f..00000000000
--- a/curriculum/challenges/_meta/quiz-javascript-events/meta.json
+++ /dev/null
@@ -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"
-}
diff --git a/curriculum/challenges/_meta/review-javascript-events/meta.json b/curriculum/challenges/_meta/review-javascript-events/meta.json
deleted file mode 100644
index e1b32c475a0..00000000000
--- a/curriculum/challenges/_meta/review-javascript-events/meta.json
+++ /dev/null
@@ -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"
-}
diff --git a/curriculum/challenges/english/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/english/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md
index 51c2ef34550..0aa5d35555c 100644
--- a/curriculum/challenges/english/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md
+++ b/curriculum/challenges/english/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md
@@ -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--
diff --git a/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md
deleted file mode 100644
index 0ae9ac774e4..00000000000
--- a/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md
+++ /dev/null
@@ -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--
-
-``
-
----
-
-``
-
----
-
-``
-
-#### --answer--
-
-``
-
-### --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.
-
diff --git a/curriculum/challenges/english/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md b/curriculum/challenges/english/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
index 8b509bcb809..3b566c874d7 100644
--- a/curriculum/challenges/english/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
+++ b/curriculum/challenges/english/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
@@ -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", () => {
```
+## 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
+
+
+
+```
+
+```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.
diff --git a/curriculum/challenges/english/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md b/curriculum/challenges/english/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
deleted file mode 100644
index a39fdf453cb..00000000000
--- a/curriculum/challenges/english/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
+++ /dev/null
@@ -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
-
-
-
-```
-
-```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.
diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json
index 315cecba00c..a73f4c7259a 100644
--- a/curriculum/superblock-structure/full-stack.json
+++ b/curriculum/superblock-structure/full-stack.json
@@ -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"
+ }
]
},
{