InteractiveFrenchQuiz

{
  "projectName": "InteractiveFrenchQuiz",
  "files": {
    "/InteractiveFrenchQuiz/InteractiveFrenchQuiz/js/InteractiveFrenchQuiz.js": {
      "imports": [
        {
          "sourceDir": "InteractiveFrenchQuiz/InteractiveFrenchQuiz/js//sharedLib",
          "source": "/sharedLib/recursi.js",
          "start": 0,
          "end": 62,
          "kind": "named",
          "symbol": "applyCss",
          "imported": "applyCss",
          "local": "applyCss"
        },
        {
          "sourceDir": "InteractiveFrenchQuiz/InteractiveFrenchQuiz/js//sharedLib",
          "source": "/sharedLib/recursi.js",
          "start": 0,
          "end": 62,
          "kind": "named",
          "symbol": "makeElement",
          "imported": "makeElement",
          "local": "makeElement"
        }
      ],
      "exports": [
        {
          "type": "ExportNamedDeclaration",
          "name": "QUIZ_DATA",
          "kind": "VariableDeclaration",
          "start": 64,
          "end": 9679,
          "declarationStart": 71
        }
      ]
    },
    "/InteractiveFrenchQuiz/js/InteractiveFrenchQuiz.js": {
      "imports": [
        {
          "sourceDir": "InteractiveFrenchQuiz/js//sharedLib",
          "source": "/sharedLib/recursi.js",
          "start": 0,
          "end": 62,
          "kind": "named",
          "symbol": "applyCss",
          "imported": "applyCss",
          "local": "applyCss"
        },
        {
          "sourceDir": "InteractiveFrenchQuiz/js//sharedLib",
          "source": "/sharedLib/recursi.js",
          "start": 0,
          "end": 62,
          "kind": "named",
          "symbol": "makeElement",
          "imported": "makeElement",
          "local": "makeElement"
        },
        {
          "sourceDir": "InteractiveFrenchQuiz/js//sharedLib",
          "source": "/sharedLib/DialogBox.js",
          "start": 63,
          "end": 115,
          "kind": "named",
          "symbol": "DialogBox",
          "imported": "DialogBox",
          "local": "DialogBox"
        }
      ],
      "exports": [
        {
          "type": "ExportNamedDeclaration",
          "name": "InteractiveFrenchQuiz",
          "kind": "ClassDeclaration",
          "start": 116,
          "end": 7629,
          "declarationStart": 123
        }
      ]
    }
  },
  "fileMetadata": {
    "/sharedLib/DialogBox.js": {
      "codeSize": 969,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/js/InteractiveFrenchQuiz.js": {
      "codeSize": 261,
      "docSize": 0
    },
    "/sharedLib/recursi.js": {
      "codeSize": 263,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/css/interactiveFrenchQuiz.css": {
      "codeSize": 10,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/documentation/css/interactiveFrenchQuiz.css": {
      "codeSize": 19,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/documentation/metadata.json": {
      "codeSize": 17,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/index.html": {
      "codeSize": 18,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/documentation/js/BasicsWithDialogBox_js.md": {
      "codeSize": 42,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/file_metadata.json": {
      "codeSize": 26,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/template.md": {
      "codeSize": 63,
      "docSize": 0
    },
    "/sharedLib/documentation/DialogBox_js.md": {
      "codeSize": 10,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/visibilitySets/manifest.json": {
      "codeSize": 1,
      "docSize": 0
    },
    "/InteractiveFrenchQuiz/InteractiveFrenchQuiz/js/InteractiveFrenchQuiz.js": {
      "codeSize": 579,
      "docSize": 0
    }
  },
  "initiatorScript": "import { InteractiveFrenchQuiz } from './js/InteractiveFrenchQuiz.js';\n        // Global for console access\n        window.basicsWithDialogBoxInstance = new InteractiveFrenchQuiz();\n        basicsWithDialogBoxInstance.init(document.body);"
}

# `InteractiveFrenchQuiz.js`

This module exports the main application class, `InteractiveFrenchQuiz`. It serves as the central controller for the user interface, managing state and handling user interactions.

## Class: `InteractiveFrenchQuiz`

### Purpose

This class is responsible for initializing the application's UI, creating and managing `DialogBox` instances, and responding to user actions. It demonstrates how to use the `DialogBox`, `makeElement`, and `applyCss` utilities to build a functional web application.

### Key Instance Properties

-   **`titleElement`**: Reference to the main `<h1>` title of the application.
-   **`statusDiv`**: Reference to the DOM element used for displaying status messages.
-   **`configSection`**: The DOM element containing the configuration controls.
-   **`configTextarea`**: The `<textarea>` where users can input JSON to configure a new `DialogBox`.
-   **`createBoxButton`**: The button that triggers the creation of a new box from the config.
-   **`autoLoadedBox`**: The first `DialogBox` instance that is created automatically on startup.
-   **`autoLoadedBoxDimensionDisplay`**: A DOM element inside the auto-loaded box that shows its current inner dimensions.
-   **`configuredBoxes`**: An array that stores references to all `DialogBox` instances created by the user via the configuration form.

### Core Methods

#### `init(targetElement)`

This is the main entry point for the application. It should be called once after the class is instantiated.

-   **Purpose**: Builds the entire initial user interface, including the title, status area, and the configuration form. It also creates the first "auto-loaded" `DialogBox` and sets up all necessary event listeners.
-   **Parameters**:
    -   **`targetElement`** (Node): The DOM element into which the application's UI should be rendered (typically `document.body`).

#### `createConfigurableBox()`

-   **Purpose**: This method is called when the "Create Box from Config" button is clicked. It reads the JSON string from `this.configTextarea`, parses it, and uses the resulting object to instantiate a new `DialogBox`. It includes error handling for invalid JSON.

#### `updateStatus(message)`

-   **Purpose**: A simple helper method to update the text content of the status message display area.

#### `getLastConfiguredBox()`

-   **Purpose**: A utility method to retrieve the most recently created user-configured `DialogBox` instance.

Basic project with makeElement() and applyCss(), as well as DialogBox, a resizable dialog box.

## README for InteractiveFrenchQuiz

This document describes the structure and coding style for the InteractiveFrenchQuiz application. It serves as a guide for understanding the initial code and for making future modifications and enhancements. The primary goal is to maintain a consistent, modular, and easily iterable codebase.

**Core Concepts:**

-   **Class-Based Structure:** The main application logic resides in ./js/InteractiveFrenchQuiz.js, which exports a single class (InteractiveFrenchQuiz). No other code (like IIFEs or loose functions) should exist at the top level of this file besides imports and the class definition.
    
-   **Initialization:** The ./InteractiveFrenchQuiz.html file imports the BasicsWithDialogBoxApp class, creates an instance, assigns it to a global variable (window.InteractiveFrenchQuiz), and then calls the init(targetElement) method on that instance.
    
-   **Global Instance:** The window.InteractiveFrenchQuiz global makes the main application instance easily accessible from the browser's developer console for debugging and interaction. Key DOM elements or state managed by the app should be stored as properties on the class instance (e.g., this.statusDiv, this.myBoxList) to leverage this accessibility.
    
-   **ES Modules:** The codebase exclusively uses ES Modules (import/export) for managing dependencies.

**Coding Style & Conventions:**

-   **Methods over Internal Functions:** Prefer breaking down logic into distinct class methods rather than creating large internal functions within init or other methods. Smaller, focused methods are easier to understand, test, and update iteratively.
    
-   **Event Handling:** Attach event listeners (e.g., onclick) to DOM elements. These listeners should typically call class methods. Use arrow functions (element.onclick = () => this.handleElementClick();) to ensure the this context within the handler correctly refers to the class instance.
    
-   **Minimal Comments:** Comments should be used sparingly, primarily for explaining non-obvious logic. Assume the code is generally self-explanatory, especially for standard patterns.
    
-   **Helper Libraries:** The application utilizes helper libraries found in ./js/lib/:
    
    -   makeElement.js: A utility for programmatically creating DOM elements (including SVG). Its usage is demonstrated within the InteractiveFrenchQuiz class.
        
    -   applyCss.js: Used to inject or update CSS styles dynamically via a  tag.
        
    -   DialogBox.js: A component for creating draggable, resizable panels/windows. The current placeholder content demonstrates basic instantiation and interaction.
        
-   **CSS:** Base styles are in ./css/InteractiveFrenchQuiz.css. Dynamic or component-specific styles might be added via applyCss.

**Iterative Development Workflow (Instructions for AI):**

-   **Provide Full Method Replacements:** When asked to modify functionality, provide the entire updated method within the code block, starting from the method signature (e.g., methodName(args) {) and ending with the closing brace }.
    
-   **Include End-of-Method Comment:** Add a comment on the same line as the closing brace to clearly delineate the end of the method, like: } // end methodName.
    
-   **Focus on Methods:** Avoid providing code snippets that require manual insertion inside existing methods. Replacing entire methods simplifies the update process significantly.
    
-   **Adhere to Style:** Follow the established patterns (class structure, methods, event handling, makeElement usage) when adding new features or modifying existing ones.

**Current Functionality (Placeholder Content):**

The current version demonstrates:

-   Basic page setup with a title and status message area.
    
-   Instantiation of the Box component (one loaded automatically, others configurable via a JSON textarea).
    
-   Use of makeElement to build the UI.
    
-   Use of applyCss for adding component-specific styles.

**Goal:**

This starter application provides a structural foundation and demonstrates the preferred coding style. The current UI elements and specific logic within InteractiveFrenchQuiz are placeholders. Your task is to **replace this placeholder content** with the user's requested features while **strictly adhering to the established structure and development workflow** outlined above. Learn from the examples how makeElement, applyCss, and Box are used.