From d242cc9c223fdf8a8ae57b579af4eaf585924e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Giftea=20=E2=98=95?= <Eleojogiftuhiene@gmail.com>
Date: Mon, 3 Nov 2025 20:41:18 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples to inline event
 handler lesson (#63467)

---
 .../6733691d88e3053414689276.md                        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
index c1614e49c1e..8e19a5728f5 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-inline-event-handlers-and-why-is-it-best-practice-to-use-addeventlistener-instead
 ---
 
-# --description--
+# --interactive--
 
 In the previous lessons, you learned how to work with events by using the `addEventListener()` method. But there is another, not recommended way, to work with events in JavaScript.
 
@@ -13,16 +13,22 @@ Inline event handlers are special attributes on an HTML element that are used to
 
 Here is an example of a `button` element with an inline click event handler:
 
+:::interactive_editor
+
 ```html
 <button onclick="alert('Hello World!')">Show alert</button>
 ```
 
+:::
+
 When the user clicks on the button, the `alert` function is called and an alert dialog is displayed with the message `Hello World!`.
 
 Another way to use inline event handlers is to call a function that is defined in a `script` tag in the HTML document. 
 
 Here is an example of defining a function called `changeBgColor` and calling it from an inline click event handler:
 
+:::interactive_editor
+
 ```html
 <script>
   function changeBgColor() {
@@ -33,6 +39,8 @@ Here is an example of defining a function called `changeBgColor` and calling it
 <button onclick="changeBgColor()">Change background color</button>
 ```
 
+:::
+
 When the user clicks on the button, the `changeBgColor` function is called and the background color of the page is changed to light blue. While it is possible to use inline event handlers like this, it is not considered a best practice. 
 
 For one reason, inline event handlers can only be used to attach one event listener to an element. If you want to attach multiple event listeners to the same element, you will need to use `addEventListener()`. Another reason is that inline event handlers mix HTML and JavaScript code together, which can make your code harder to read and maintain. It is better to keep your HTML code and JavaScript code separate by using `addEventListener()` to attach event listeners to elements.