feat(curriculum): add interactive examples to IndexedDB lesson (#63992)

curriculum/challenges/english/blocks/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-indexeddb-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 `IndexedDB` is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently.
 
@@ -15,6 +15,8 @@ Now, let's look at how `IndexedDB` works.
 
 The first step is to open a database. Here's an example:
 
+:::interactive_editor
+
 ```js
 let request = indexedDB.open("Sample DB", 1);
 
@@ -28,6 +30,8 @@ request.onsuccess = function(event) {
 };
 ```
 
+:::
+
 In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The `db` object we get in the success callback is what we'll use to interact with the database.
 
 If you check the browser dev tools application interface, you will see your `Sample DB` in the `IndexedDb` section has been opened. Once you have your database open, you can start working with object stores.
@@ -35,6 +39,8 @@ If you check the browser dev tools application interface, you will see your `Sam
 Object stores in IndexedDB are similar to tables in traditional databases. They hold the actual data you want to store. Here's how to create an object store: 
 
 ```js
+let request = indexedDB.open("Sample DB", 1);
+
 request.onupgradeneeded = function(event) {
   let db = event.target.result;
   let objectStore = db.createObjectStore("customers", { keyPath: "id" });