@qti-components/portable-custom-interaction 1.0.1

package/dist/qti-portable-custom-interaction.js

@@ -0,0 +1,1848 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { Interaction, itemContext, qtiContext, removeDoubleSlashes } from '@qti-components/base';
+import styles from './qti-portable-custom-interaction.styles';
+export class QtiPortableCustomInteraction extends Interaction {
+    constructor() {
+        super(...arguments);
+        this._iframeLoaded = false;
+        this._pendingMessages = [];
+        this._iframeMessageOrigin = null;
+        this._iframeObjectUrl = null;
+        this.requirePathsJson = '';
+        this.requireShimJson = '';
+        this.requireJsUrl = 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';
+        this.baseUrl = '';
+        this.useDefaultPaths = false;
+        this._errorMessage = null;
+        this.response = null;
+        this.#parsedRequirePaths = null;
+        this.#parsedRequireShim = null;
+        this.#pciValidity = null;
+        this.#pciCustomValidityMessage = '';
+        /**
+         * IFRAME MODE: Handle iframe messages
+         */
+        this.handleIframeMessage = (event) => {
+            const { data } = event;
+            // Ensure the message is from our iframe
+            if (!data || data.source !== 'qti-pci-iframe') {
+                return;
+            }
+            if (!this.iframe?.contentWindow || event.source !== this.iframe.contentWindow) {
+                return;
+            }
+            if (data.responseIdentifier && data.responseIdentifier !== this.responseIdentifier) {
+                return;
+            }
+            if (this._iframeMessageOrigin === null) {
+                this._iframeMessageOrigin = event.origin;
+            }
+            else if (event.origin !== this._iframeMessageOrigin) {
+                return;
+            }
+            switch (data.method) {
+                case 'iframeReady':
+                    this.#initializeInteraction();
+                    this.#processPendingMessages();
+                    this.dispatchEvent(new CustomEvent('qti-portable-custom-interaction-loaded', {
+                        bubbles: true
+                    }));
+                    break;
+                case 'resize':
+                    if (typeof data.height === 'number' && this.iframe) {
+                        this.iframe.style.height = `${data.height}px`;
+                        this.iframe.style.width = `${data.width}px`;
+                    }
+                    break;
+                case 'console':
+                    this.dispatchEvent(new CustomEvent('qti-pci-console', {
+                        detail: {
+                            level: data.level,
+                            args: data.args
+                        },
+                        bubbles: true
+                    }));
+                    break;
+                case 'interactionChanged': {
+                    const raw = data?.params?.value;
+                    const converted = raw && typeof raw === 'object' ? this.#convertQtiVariableJSON(raw) : null;
+                    const pciValid = typeof data?.params?.valid === 'boolean' ? data.params.valid : null;
+                    const pciCustomValidity = typeof data?.params?.customValidity === 'string' ? data.params.customValidity : null;
+                    if (pciValid !== null) {
+                        this.#pciValidity = pciValid;
+                        if (pciValid && pciCustomValidity === null) {
+                            this.#pciCustomValidityMessage = '';
+                        }
+                    }
+                    if (pciCustomValidity !== null) {
+                        this.#pciCustomValidityMessage = pciCustomValidity;
+                    }
+                    // PCI state "should" be an opaque string, but a lot of existing PCIs (including the
+                    // IMS conformance examples) return a structured object from getState().
+                    //
+                    // We store a string in itemContext.state, so we serialize non-string states with a
+                    // prefix to safely round-trip them without accidentally parsing user-provided strings.
+                    const stateRaw = data?.params?.state;
+                    let state;
+                    if (stateRaw === undefined) {
+                        state = undefined;
+                    }
+                    else if (stateRaw === null) {
+                        state = null;
+                    }
+                    else if (typeof stateRaw === 'string') {
+                        state = stateRaw;
+                    }
+                    else {
+                        try {
+                            state = `__qti_json__::${JSON.stringify(stateRaw)}`;
+                        }
+                        catch {
+                            state = null;
+                        }
+                    }
+                    // Treat null/undefined or unconvertible responses as "cleared".
+                    // The iframe side is responsible for not emitting an initial clear on load.
+                    if (converted === null) {
+                        const emptyResponse = this.responseVariable?.cardinality === 'single' ? '' : [];
+                        this.response = emptyResponse;
+                        this.validate();
+                        this.saveResponse(emptyResponse, state);
+                        break;
+                    }
+                    this.response = converted;
+                    this.validate();
+                    this.saveResponse(converted, state);
+                    break;
+                }
+                case 'error':
+                    this._errorMessage = data.params.message;
+                    console.error('Error from PCI iframe:', data.params.message);
+                    break;
+            }
+        };
+        // Add this property to store the previous state
+        this.#previousState = null;
+    }
+    #value;
+    // This implementation always renders inside an iframe.
+    static { this.styles = [
+        styles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+        min-height: 50px;
+      }
+    `
+    ]; }
+    #parsedRequirePaths;
+    #parsedRequireShim;
+    #pciValidity;
+    #pciCustomValidityMessage;
+    /**
+     * Parse the require paths JSON string into an object
+     */
+    #getRequirePaths() {
+        if (this.#parsedRequirePaths === null && this.requirePathsJson) {
+            try {
+                const parsedJson = JSON.parse(this.requirePathsJson);
+                if (Array.isArray(parsedJson) || !parsedJson || typeof parsedJson !== 'object') {
+                    throw new Error('Require paths must be a JSON object.');
+                }
+                this.#parsedRequirePaths = parsedJson;
+            }
+            catch (e) {
+                console.error('Error parsing require paths JSON:', e);
+                this._errorMessage = `Error parsing require paths JSON: ${e.message}`;
+                this.#parsedRequirePaths = {};
+            }
+        }
+        return this.#parsedRequirePaths || {};
+    }
+    /**
+     * Parse the require shim JSON string into an object
+     */
+    #getRequireShim() {
+        if (this.#parsedRequireShim === null && this.requireShimJson) {
+            try {
+                this.#parsedRequireShim = JSON.parse(this.requireShimJson);
+            }
+            catch (e) {
+                console.error('Error parsing require shim JSON:', e);
+                this._errorMessage = `Error parsing require shim JSON: ${e.message}`;
+                this.#parsedRequireShim = {};
+            }
+        }
+        return this.#parsedRequireShim || {};
+    }
+    /**
+     * Get the final require paths by combining defaults with user-provided paths
+     */
+    #getFinalRequirePaths() {
+        // Return only user-provided paths to keep PCI completely self-contained
+        return this.#getRequirePaths();
+    }
+    /**
+     * Get the final require shim
+     */
+    #getFinalRequireShim() {
+        return this.#getRequireShim();
+    }
+    /**
+     * Converts QtiVariableJSON to a string or string array
+     */
+    #convertQtiVariableJSON(input) {
+        for (const topLevelKey in input) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (input.hasOwnProperty(topLevelKey)) {
+                const nestedObject = input[topLevelKey];
+                if (nestedObject) {
+                    for (const nestedKey in nestedObject) {
+                        // eslint-disable-next-line no-prototype-builtins
+                        if (nestedObject.hasOwnProperty(nestedKey)) {
+                            const value = nestedObject[nestedKey];
+                            if (Array.isArray(value)) {
+                                return value.map(String); // Convert each element in the array to string
+                            }
+                            else if (value !== undefined && value !== null) {
+                                return String(value); // Convert the single value to string
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Get direct child elements by tag name
+     */
+    getDirectChildrenByTag(tagName) {
+        const needle = tagName.toLowerCase();
+        return Array.from(this.children).filter(child => child.tagName.toLowerCase() === needle);
+    }
+    /**
+     * Coerce a scalar value to the expected base-type when possible
+     */
+    coerceBaseValue(value, baseType) {
+        if (value === null || value === undefined)
+            return value;
+        switch (baseType) {
+            case 'integer': {
+                if (typeof value === 'number')
+                    return value;
+                const parsed = parseInt(String(value), 10);
+                return Number.isNaN(parsed) ? value : parsed;
+            }
+            case 'float':
+            case 'duration': {
+                if (typeof value === 'number')
+                    return value;
+                const parsed = parseFloat(String(value));
+                return Number.isNaN(parsed) ? value : parsed;
+            }
+            case 'boolean': {
+                if (typeof value === 'boolean')
+                    return value;
+                if (typeof value === 'string') {
+                    const lowered = value.toLowerCase();
+                    if (lowered === 'true')
+                        return true;
+                    if (lowered === 'false')
+                        return false;
+                }
+                return value;
+            }
+            case 'string':
+            case 'identifier':
+            default:
+                return String(value);
+        }
+    }
+    /**
+     * Normalize an input into a list form
+     */
+    normalizeListValue(value) {
+        if (value === null || value === undefined)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }
+    /**
+     * Convert a variable value to QtiVariableJSON
+     */
+    variableToQtiVariableJSON(value, cardinality, baseType) {
+        if (cardinality === 'record' || baseType === 'record') {
+            return this.recordToQtiVariableJSON(value);
+        }
+        if (cardinality !== 'single') {
+            const listValues = this.normalizeListValue(value).map(v => this.coerceBaseValue(v, baseType));
+            return { list: { [baseType]: listValues } };
+        }
+        return { base: { [baseType]: this.coerceBaseValue(value, baseType) } };
+    }
+    /**
+     * Convert a record object into QtiVariableJSON
+     */
+    recordToQtiVariableJSON(value) {
+        if (!value || typeof value !== 'object') {
+            return { record: [] };
+        }
+        const recordEntries = [];
+        for (const [name, entryValue] of Object.entries(value)) {
+            recordEntries.push(this.recordEntryFromValue(name, entryValue));
+        }
+        return { record: recordEntries };
+    }
+    /**
+     * Build a record entry from an arbitrary value
+     */
+    recordEntryFromValue(name, entryValue) {
+        if (Array.isArray(entryValue)) {
+            const filtered = entryValue.filter(v => v !== null && v !== undefined);
+            if (filtered.length && filtered.every(v => typeof v === 'boolean')) {
+                return { name, list: { boolean: filtered } };
+            }
+            if (filtered.length && filtered.every(v => typeof v === 'number')) {
+                const numbers = filtered;
+                const isIntegers = numbers.every(n => Number.isInteger(n));
+                return { name, list: { [isIntegers ? 'integer' : 'float']: numbers } };
+            }
+            return { name, list: { string: entryValue.map(v => (v === null || v === undefined ? '' : String(v))) } };
+        }
+        if (typeof entryValue === 'boolean') {
+            return { name, base: { boolean: entryValue } };
+        }
+        if (typeof entryValue === 'number') {
+            if (Number.isInteger(entryValue))
+                return { name, base: { integer: entryValue } };
+            return { name, base: { float: entryValue } };
+        }
+        if (entryValue === null || entryValue === undefined) {
+            return { name, base: { string: '' } };
+        }
+        if (typeof entryValue === 'object') {
+            try {
+                return { name, base: { string: JSON.stringify(entryValue) } };
+            }
+            catch {
+                return { name, base: { string: String(entryValue) } };
+            }
+        }
+        return { name, base: { string: String(entryValue) } };
+    }
+    /**
+     * Extract default QTI_CONTEXT values from qti-context-declaration elements
+     */
+    getQtiContextDefaultsFromItem() {
+        const itemElement = this.closest('qti-assessment-item');
+        if (!itemElement)
+            return {};
+        const defaults = {};
+        const contextDeclarations = itemElement.querySelectorAll('qti-context-declaration[identifier="QTI_CONTEXT"]');
+        contextDeclarations.forEach(declaration => {
+            const defaultValueElement = declaration.querySelector('qti-default-value');
+            if (!defaultValueElement)
+                return;
+            const valueElements = defaultValueElement.querySelectorAll('qti-value[field-identifier]');
+            valueElements.forEach(valueElement => {
+                const fieldIdentifier = valueElement.getAttribute('field-identifier');
+                if (!fieldIdentifier)
+                    return;
+                const baseType = (valueElement.getAttribute('base-type') || 'string');
+                const textContent = valueElement.textContent?.trim() || '';
+                defaults[fieldIdentifier] = this.coerceBaseValue(textContent, baseType);
+            });
+        });
+        return defaults;
+    }
+    /**
+     * Build a QTI_CONTEXT record for PCI consumption
+     */
+    getQtiContextRecord() {
+        const defaults = this.getQtiContextDefaultsFromItem();
+        const runtime = this.qtiContext?.QTI_CONTEXT || {};
+        const merged = { ...defaults, ...runtime };
+        if (!Object.keys(merged).length)
+            return null;
+        const normalized = {
+            candidateIdentifier: merged.candidateIdentifier ?? '',
+            testIdentifier: merged.testIdentifier ?? '',
+            environmentIdentifier: merged.environmentIdentifier ?? '',
+            ...merged
+        };
+        return this.recordToQtiVariableJSON(normalized);
+    }
+    /**
+     * Collect template variables referenced by qti-template-variable children
+     */
+    getTemplateVariables() {
+        const templateVariables = {};
+        const templateVariableElements = this.getDirectChildrenByTag('qti-template-variable');
+        if (!templateVariableElements.length)
+            return templateVariables;
+        templateVariableElements.forEach(el => {
+            const identifier = el.getAttribute('template-identifier') || el.getAttribute('identifier') || '';
+            if (!identifier)
+                return;
+            const variable = this.context?.variables?.find(v => v.identifier === identifier);
+            if (!variable)
+                return;
+            const cardinality = (variable.cardinality || 'single');
+            const baseType = (variable.baseType || 'string');
+            templateVariables[identifier] = this.variableToQtiVariableJSON(variable.value, cardinality, baseType);
+        });
+        return templateVariables;
+    }
+    /**
+     * Collect context variables referenced by qti-context-variable children
+     */
+    getContextVariables() {
+        const contextVariables = {};
+        const contextVariableElements = this.getDirectChildrenByTag('qti-context-variable');
+        if (!contextVariableElements.length)
+            return contextVariables;
+        contextVariableElements.forEach(el => {
+            const identifier = el.getAttribute('identifier') || '';
+            if (!identifier)
+                return;
+            if (identifier === 'QTI_CONTEXT') {
+                const record = this.getQtiContextRecord();
+                if (record)
+                    contextVariables[identifier] = record;
+                return;
+            }
+            const variable = this.context?.variables?.find(v => v.identifier === identifier);
+            if (!variable)
+                return;
+            const cardinality = (variable.cardinality || 'single');
+            const baseType = (variable.baseType || 'string');
+            contextVariables[identifier] = this.variableToQtiVariableJSON(variable.value, cardinality, baseType);
+        });
+        return contextVariables;
+    }
+    /**
+     * Adds hyphenated versions of camelCase keys to properties object
+     */
+    #addHyphenatedKeys(properties) {
+        const updatedProperties = { ...properties };
+        for (const key in properties) {
+            if (Object.prototype.hasOwnProperty.call(properties, key)) {
+                const hyphenatedKey = key.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+                updatedProperties[hyphenatedKey] = properties[key];
+            }
+        }
+        return updatedProperties;
+    }
+    #toNestedProperties(properties) {
+        const nestedProperties = { ...properties };
+        const setNestedValue = (root, path, value) => {
+            let cursor = root;
+            for (let i = 0; i < path.length; i += 1) {
+                const segment = path[i];
+                const isLast = i === path.length - 1;
+                if (isLast) {
+                    cursor[segment] = value;
+                    return;
+                }
+                if (!cursor[segment] || typeof cursor[segment] !== 'object' || Array.isArray(cursor[segment])) {
+                    cursor[segment] = {};
+                }
+                cursor = cursor[segment];
+            }
+        };
+        for (const [key, value] of Object.entries(properties)) {
+            if (!key.includes('__'))
+                continue;
+            const path = key.split('__').filter(Boolean);
+            if (path.length < 2)
+                continue;
+            setNestedValue(nestedProperties, path, value);
+        }
+        return nestedProperties;
+    }
+    /**
+     * Converts response variables to QtiVariableJSON
+     */
+    responseVariablesToQtiVariableJSON(input, cardinality, baseType) {
+        if (cardinality !== 'single') {
+            const list = { list: {} };
+            list.list[baseType] = input;
+            return list;
+        }
+        else {
+            const base = { base: {} };
+            base.base[baseType] = input;
+            return base;
+        }
+    }
+    #hasNonEmptyResponse() {
+        if (this.response === null || this.response === undefined)
+            return false;
+        if (Array.isArray(this.response)) {
+            if (this.response.length === 0)
+                return false;
+            return this.response.some(v => v !== '' && v !== null && v !== undefined);
+        }
+        return this.response !== '';
+    }
+    #setInteractionValidity(isValid, customMessage) {
+        const fallbackMessage = this.dataset.invalidresponsemessage || 'Invalid response.';
+        const message = isValid ? '' : customMessage && customMessage.trim().length > 0 ? customMessage : fallbackMessage;
+        this._internals.setValidity(isValid ? {} : { customError: true }, message);
+    }
+    validate() {
+        const isValid = typeof this.#pciValidity === 'boolean' ? this.#pciValidity : this.#hasNonEmptyResponse();
+        this.#setInteractionValidity(isValid, this.#pciCustomValidityMessage);
+        return isValid;
+    }
+    set value(v) {
+        if (v === null) {
+            this.#value = [];
+        }
+        else {
+            this.#value = Array.isArray(v) ? v : v.split(',');
+        }
+        // PCI handles response setting via boundTo property during initialization
+        // No need to call setResponse directly
+    }
+    get value() {
+        if (this.#value === null || this.#value === undefined)
+            return null;
+        return Array.isArray(this.#value) ? this.#value.join(',') : String(this.#value);
+    }
+    set boundTo(newValue) {
+        if (!newValue || !newValue[this.responseIdentifier]) {
+            return;
+        }
+        const value = this.#convertQtiVariableJSON(newValue[this.responseIdentifier]);
+        this.#value = value;
+        // No direct call to setResponse - PCI will handle this during initialization
+        // through the boundTo property in the config
+        this.saveResponse(value);
+    }
+    get boundTo() {
+        const responseVariable = {};
+        const variable = this.context?.variables?.find(v => v.identifier === this.responseIdentifier);
+        if (variable) {
+            const cardinality = this.context?.variables?.find(v => v.identifier === this.responseIdentifier)?.cardinality || 'single';
+            const baseType = this.context?.variables?.find(v => v.identifier === this.responseIdentifier)?.baseType || 'string';
+            const value = this.context?.variables?.find(v => v.identifier === this.responseIdentifier)?.value || null;
+            const responseVal = this.responseVariablesToQtiVariableJSON(value, cardinality, baseType);
+            responseVariable[this.responseIdentifier] = responseVal;
+        }
+        return responseVariable;
+    }
+    /**
+     * Unescape HTML entities in a string
+     */
+    #unescapeHtml(str) {
+        if (!str)
+            return str;
+        return str
+            .replace(/&amp;/g, '&')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&quot;/g, '"')
+            .replace(/&#x27;/g, "'")
+            .replace(/&#x2F;/g, '/')
+            .replace(/&#x60;/g, '`')
+            .replace(/&#x3D;/g, '=');
+    }
+    /**
+     * Unescape HTML entities in all values of an object
+     */
+    #unescapeDataAttributes(obj) {
+        const unescaped = {};
+        for (const [key, value] of Object.entries(obj)) {
+            if (typeof value === 'string') {
+                unescaped[key] = this.#unescapeHtml(value);
+            }
+            else {
+                unescaped[key] = value;
+            }
+        }
+        return unescaped;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('message', this.handleIframeMessage);
+        if (this._iframeObjectUrl) {
+            URL.revokeObjectURL(this._iframeObjectUrl);
+            this._iframeObjectUrl = null;
+        }
+    }
+    /**
+     * IFRAME MODE: Send message to iframe
+     */
+    sendMessageToIframe(method, params) {
+        const targetWindow = this.iframe?.contentWindow;
+        if (!this._iframeLoaded || !targetWindow) {
+            this._pendingMessages.push({ method, params });
+            return;
+        }
+        targetWindow.postMessage({
+            source: 'qti-portable-custom-interaction',
+            responseIdentifier: this.responseIdentifier,
+            method,
+            params
+        }, '*');
+    }
+    /**
+     * IFRAME MODE: Process pending messages
+     */
+    #processPendingMessages() {
+        if (this._pendingMessages.length) {
+            this._pendingMessages.forEach(message => {
+                this.sendMessageToIframe(message.method, message.params);
+            });
+            this._pendingMessages = [];
+        }
+    }
+    /**
+     * IFRAME MODE: Create iframe element
+     */
+    createIframe() {
+        if (this._iframeObjectUrl) {
+            URL.revokeObjectURL(this._iframeObjectUrl);
+            this._iframeObjectUrl = null;
+        }
+        this.iframe = document.createElement('iframe');
+        this.iframe.id = `pci-iframe-${this.responseIdentifier}`;
+        this.iframe.setAttribute('title', 'QTI PCI Iframe');
+        this.iframe.setAttribute('aria-label', 'QTI PCI Iframe');
+        this.iframe.setAttribute('aria-hidden', 'false');
+        this.iframe.setAttribute('role', 'application');
+        this.iframe.style.width = '100%';
+        this.iframe.style.border = 'none';
+        this.iframe.style.display = 'block';
+        // Handle iframe load event
+        this.iframe.onload = () => {
+            this._iframeLoaded = true;
+            if (this._iframeObjectUrl) {
+                URL.revokeObjectURL(this._iframeObjectUrl);
+                this._iframeObjectUrl = null;
+            }
+            this.#addMarkupToIframe();
+            // Send initialization data to iframe
+            this.#sendIframeInitData();
+        };
+        // Create a unique name for the iframe
+        const iframeName = `qti-pci-${this.responseIdentifier}-${Date.now()}`;
+        this.iframe.name = iframeName;
+        // Generate iframe HTML content with all required scripts
+        const iframeContent = this.generateIframeContent();
+        // Prefer a same-origin blob URL to avoid postMessage target-origin mismatches (e.g. in Storybook).
+        try {
+            const blob = new Blob([iframeContent], { type: 'text/html' });
+            this._iframeObjectUrl = URL.createObjectURL(blob);
+            this.iframe.src = this._iframeObjectUrl;
+        }
+        catch {
+            const encodedContent = encodeURIComponent(iframeContent);
+            this.iframe.src = `data:text/html;charset=utf-8,${encodedContent}`;
+        }
+        // Append iframe to component
+        this.appendChild(this.iframe);
+    }
+    /**
+     * IFRAME MODE: Send initialization data to iframe
+     */
+    #sendIframeInitData() {
+        // Once iframe is loaded, send initialization data
+        const properties = this.#addHyphenatedKeys(this.#toNestedProperties(this.#unescapeDataAttributes({ ...this.dataset })));
+        const storedStateRaw = this.context?.state?.[this.responseIdentifier];
+        const storedState = typeof storedStateRaw === 'string' && storedStateRaw.length > 0 ? storedStateRaw : null;
+        const initData = {
+            module: this.module,
+            customInteractionTypeIdentifier: this.customInteractionTypeIdentifier,
+            baseUrl: !this.baseUrl
+                ? window.location.origin
+                : this.baseUrl.startsWith('http') || this.baseUrl.startsWith('blob') || this.baseUrl.startsWith('base64')
+                    ? this.baseUrl
+                    : removeDoubleSlashes(`${window.location.origin}${this.baseUrl}`),
+            responseIdentifier: this.responseIdentifier,
+            properties,
+            contextVariables: this.getContextVariables(),
+            templateVariables: this.getTemplateVariables(),
+            dataAttributes: { ...this.dataset },
+            interactionModules: this.#getInteractionModules(),
+            boundTo: storedState ? null : this.boundTo,
+            state: storedState
+        };
+        this.sendMessageToIframe('initialize', initData);
+    }
+    /**
+     * IFRAME MODE: Get interaction modules from DOM
+     */
+    #getInteractionModules() {
+        const modules = [];
+        const interactionModules = this.querySelector('qti-interaction-modules');
+        if (interactionModules) {
+            const moduleElements = interactionModules.querySelectorAll('qti-interaction-module');
+            for (const module of moduleElements) {
+                modules.push({
+                    id: module.getAttribute('id'),
+                    primaryPath: module.getAttribute('primary-path'),
+                    fallbackPath: module.getAttribute('fallback-path')
+                });
+            }
+        }
+        return modules;
+    }
+    /**
+     * IFRAME MODE: Add markup, stylesheets, and properties to iframe
+     */
+    #addMarkupToIframe() {
+        // Get interaction markup if any
+        const markup = this.querySelector('qti-interaction-markup');
+        if (markup) {
+            this.sendMessageToIframe('setMarkup', markup.innerHTML);
+        }
+        const stylesheets = Array.from(this.querySelectorAll('qti-stylesheet'));
+        if (stylesheets.length) {
+            const stylesheetsHtml = stylesheets.map(sheet => sheet.outerHTML).join('\n');
+            this.sendMessageToIframe('setStylesheets', stylesheetsHtml);
+        }
+        // Get properties if any
+        const properties = this.querySelector('properties');
+        if (properties) {
+            this.sendMessageToIframe('setProperties', properties.innerHTML);
+        }
+    }
+    /**
+     * IFRAME MODE: Initialize the interaction
+     */
+    #initializeInteraction() {
+        // No explicit action needed, as the PCI will initialize
+        // with the boundTo property already provided
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#pciValidity = null;
+        this.#pciCustomValidityMessage = '';
+        // Reflect any pre-existing response (e.g. restored session) for validation/completionStatus.
+        this.response = this.responseVariable?.value ?? null;
+        window.addEventListener('message', this.handleIframeMessage);
+        this.createIframe();
+    }
+    /**
+     * IFRAME MODE: Generate iframe HTML content
+     */
+    generateIframeContent() {
+        const parentStyles = window.getComputedStyle(document.body);
+        // Get the configured require paths and shim
+        const requirePaths = JSON.stringify(this.#getFinalRequirePaths());
+        const requireShim = JSON.stringify(this.#getFinalRequireShim());
+        const iframeBaseUrl = this.dataset.baseUrl
+            ? this.dataset.baseUrl.startsWith('/')
+                ? `${window.location.origin}${this.dataset.baseUrl}`
+                : this.dataset.baseUrl
+            : '';
+        const forwardConsole = this.dataset.forwardConsole === 'true';
+        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+        const defaultComponentsCdnUrl = isLocalhost
+            ? `${window.location.origin}/cdn/index.js`
+            : 'https://unpkg.com/@citolab/qti-components/cdn';
+        const defaultComponentsCssUrl = isLocalhost
+            ? `${window.location.origin}/dist/item.css`
+            : 'https://unpkg.com/@citolab/qti-components@latest/dist/item.css';
+        const componentsCdnUrl = this.dataset.componentsCdnUrl || defaultComponentsCdnUrl;
+        const componentsCssUrl = this.dataset.componentsCssUrl || defaultComponentsCssUrl;
+        // Extract just the font-related properties you want to copy
+        const fontStyles = `
+    font-family: ${parentStyles.getPropertyValue('font-family')};
+    font-size: ${parentStyles.getPropertyValue('font-size')};
+    line-height: ${parentStyles.getPropertyValue('line-height')};
+    font-weight: ${parentStyles.getPropertyValue('font-weight')};
+    color: ${parentStyles.getPropertyValue('color')};
+  `;
+        return /* html */ `<!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <title>QTI PCI Container</title>
+          <base href="${window.location.origin}" />
+          <script type="module">
+            import '${componentsCdnUrl}';
+          </script>
+          <style>
+            body, html {
+              margin: 0;
+              padding: 0;
+              width: 100%;
+              height: auto;
+              overflow: hidden;
+                /* Add the extracted font styles here */
+              ${fontStyles}
+            };
+            .qti-customInteraction {
+              width: 100%;
+              height: 100%;
+            }
+            #pci-container {
+              width: 100%;
+            }
+            qti-interaction-markup {
+              display: block;
+              width: 100%;
+              min-height: 50px;
+            }
+          </style>
+          <link href="${componentsCssUrl}" rel="stylesheet" />
+          <script src="${this.requireJsUrl}"></script>
+          <script>
+            const forwardConsole = ${forwardConsole ? 'true' : 'false'};
+            if (forwardConsole) {
+              const originalLog = console.log.bind(console);
+              const originalError = console.error.bind(console);
+              const stringifyArgs = args =>
+                args.map(arg => {
+                  if (typeof arg === 'string') return arg;
+                  try {
+                    return JSON.stringify(arg);
+                  } catch (e) {
+                    return String(arg);
+                  }
+                });
+              console.log = (...args) => {
+                originalLog(...args);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'console',
+                    level: 'log',
+                    args: stringifyArgs(args)
+                  },
+                  '*'
+                );
+              };
+              console.error = (...args) => {
+                originalError(...args);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'console',
+                    level: 'error',
+                    args: stringifyArgs(args)
+                  },
+                  '*'
+                );
+              };
+            }
+            // Define standard paths and shims
+            window.requirePaths = ${requirePaths};
+
+            window.requireShim = ${requireShim};
+
+            // Single initial RequireJS configuration with error handling
+            window.requirejs.config({
+              catchError: true,
+              waitSeconds: 30,
+              paths: window.requirePaths,
+              baseUrl: '${iframeBaseUrl}',
+              shim: window.requireShim,
+              onNodeCreated: function (node, config, moduleName, url) {
+                // Add error handler to script node
+                node.addEventListener('error', function (evt) {
+                  console.error('Script load error for module:', moduleName, 'URL:', url, 'Event:', evt);
+                });
+              },
+              onError: function (err) {
+                console.error('RequireJS error:', {
+                  type: err.requireType,
+                  modules: err.requireModules,
+                  error: err
+                });
+
+                if (err.requireType === 'scripterror') {
+                  console.error('Script error usually indicates a network or CORS issue with:', err.requireModules);
+                }
+
+                // Notify parent window about the error
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'error',
+                    params: {
+                      message: 'RequireJS ' + err.requireType + ' error for modules: ' + err.requireModules,
+                      details: {
+                        type: err.requireType,
+                        modules: err.requireModules,
+                        error: err.toString()
+                      }
+                    }
+                  },
+                  '*'
+                );
+              }
+            });
+
+            // PCI Manager for iframe implementation
+            window.PCIManager = {
+              pciInstance: null,
+              container: null,
+              markupEl: null,
+              propertiesEl: null,
+              customInteractionTypeIdentifier: null,
+              responseIdentifier: null,
+              pendingBoundTo: null,
+              pendingMarkup: null,
+              pendingProperties: null,
+              pendingState: null,
+              pendingStylesheets: null,
+              stylesheetKeys: {},
+              interactionChangedViaEvent: false,
+              eventBridgeAttached: false,
+              lastResponseStr: null,
+              hadResponse: false,
+
+              initialize: function (config) {
+                this.customInteractionTypeIdentifier = config.customInteractionTypeIdentifier;
+                this.responseIdentifier = config.responseIdentifier;
+                this.container = document.getElementById('pci-container');
+                this.container.classList.add('qti-customInteraction');
+
+                function qtiVariableHasValue(qtiVar) {
+                  if (!qtiVar) return false;
+                  if (qtiVar.base) {
+                    for (const k in qtiVar.base) {
+                      if (!Object.prototype.hasOwnProperty.call(qtiVar.base, k)) continue;
+                      const v = qtiVar.base[k];
+                      if (v !== null && v !== undefined && v !== '') return true;
+                    }
+                  }
+                  if (qtiVar.list) {
+                    for (const k in qtiVar.list) {
+                      if (!Object.prototype.hasOwnProperty.call(qtiVar.list, k)) continue;
+                      const v = qtiVar.list[k];
+                      if (Array.isArray(v) && v.some(x => x !== null && x !== undefined && x !== '')) return true;
+                    }
+                  }
+                  if (Array.isArray(qtiVar.record) && qtiVar.record.length > 0) return true;
+                  return false;
+                }
+
+                const initialBoundTo = config.boundTo && config.boundTo[this.responseIdentifier];
+                this.hadResponse = qtiVariableHasValue(initialBoundTo);
+                this.lastResponseStr = this.hadResponse ? JSON.stringify(initialBoundTo) : null;
+                // Ensure expected DOM structure exists (markup + properties)
+                this.markupEl = this.container.querySelector('qti-interaction-markup');
+                if (!this.markupEl) {
+                  this.markupEl = document.createElement('qti-interaction-markup');
+                  this.container.appendChild(this.markupEl);
+                }
+                this.markupEl.classList.add('qti-customInteraction');
+                this.propertiesEl = this.container.querySelector('properties');
+                if (!this.propertiesEl) {
+                  this.propertiesEl = document.createElement('properties');
+                  this.propertiesEl.style.display = 'none';
+                  this.container.appendChild(this.propertiesEl);
+                } else {
+                  this.propertiesEl.style.display = 'none';
+                }
+
+                // Apply any markup/properties that arrived before initialization
+                if (this.pendingMarkup !== null) {
+                  this.setMarkup(this.pendingMarkup);
+                  this.pendingMarkup = null;
+                }
+                if (this.pendingProperties !== null) {
+                  this.setProperties(this.pendingProperties);
+                  this.pendingProperties = null;
+                }
+                if (this.pendingStylesheets !== null) {
+                  this.setStylesheets(this.pendingStylesheets);
+                  this.pendingStylesheets = null;
+                }
+
+                // Bridge qti-interaction-changed events (preferred over polling)
+                if (!this.eventBridgeAttached) {
+                  this.eventBridgeAttached = true;
+                  const self = this;
+                  this.container.addEventListener(
+                    'qti-interaction-changed',
+                    function (evt) {
+                      try {
+                        self.interactionChangedViaEvent = true;
+                        const value = evt && evt.detail ? evt.detail.value : undefined;
+                        if (value !== undefined) {
+                          const validFromEvent =
+                            evt && evt.detail && typeof evt.detail.valid === 'boolean' ? evt.detail.valid : undefined;
+                          let valid = validFromEvent;
+                          if (valid === undefined && self.pciInstance && typeof self.pciInstance.checkValidity === 'function') {
+                            try {
+                              valid = self.pciInstance.checkValidity();
+                            } catch (e) {
+                              // Keep undefined on PCI validity read errors.
+                            }
+                          }
+                          const customValidityFromEvent =
+                            evt && evt.detail && typeof evt.detail.customValidity === 'string'
+                              ? evt.detail.customValidity
+                              : undefined;
+                          let customValidity = customValidityFromEvent;
+                          if (
+                            customValidity === undefined &&
+                            self.pciInstance &&
+                            typeof self.pciInstance.getCustomValidity === 'function'
+                          ) {
+                            try {
+                              customValidity = self.pciInstance.getCustomValidity();
+                            } catch (e) {
+                              // Keep undefined on PCI custom validity read errors.
+                            }
+                          }
+                          const state =
+                            self.pciInstance && typeof self.pciInstance.getState === 'function'
+                              ? self.pciInstance.getState()
+                              : null;
+                          self.notifyInteractionChanged(value, state, valid, customValidity);
+                        }
+                      } catch (e) {
+                        // ignore bridge errors, polling fallback may still work
+                      }
+                    },
+                    true
+                  );
+                }
+
+                function getResolvablePath(path, basePath) {
+                  if (Array.isArray(path)) {
+                    return path.map(p => getResolvablePathString(p, basePath));
+                  } else {
+                    return getResolvablePathString(path, basePath);
+                  }
+                }
+
+                function removeDoubleSlashes(str) {
+                  return str
+                    .replace(/([^:\\/])\\/\\/+/g, '$1/')
+                    .replace(/\\/\\//g, '/')
+                    .replace('http:/', 'http://')
+                    .replace('https:/', 'https://');
+                }
+
+                function ensureDirectoryBasePath(basePath) {
+                  if (!basePath) return basePath;
+                  if (basePath.endsWith('/')) return basePath;
+                  return basePath + '/';
+                }
+
+
+
+                function combineRequireResolvePaths(path1, path2, baseUrl) {
+                  path1 = getResolvablePath(path1, baseUrl);
+                  const path1Array = Array.isArray(path1) ? path1 : [path1];
+                  if (!path2) {
+                    return path1Array;
+                  }
+                  path2 = getResolvablePath(path2, baseUrl);
+                  const path2Array = Array.isArray(path2) ? path2 : [path2];
+                  return path1Array.concat(path2Array).filter((value, index, self) => self.indexOf(value) === index);
+                }
+
+                // Update paths with modules from the config
+                if (config.interactionModules && config.interactionModules.length > 0) {
+                  config.interactionModules.forEach(module => {
+                    if (module.id && module.primaryPath) {
+                      const currentPath = window.requirePaths[module.id] || [];
+                      const currentPaths = Array.isArray(currentPath) ? currentPath : [currentPath];
+                      const newPath = combineRequireResolvePaths(
+                        module.primaryPath,
+                        module.fallbackPath,
+                        config.baseUrl
+                      );
+                      window.requirePaths[module.id] = newPath.concat(currentPaths)
+                        .filter((value, index, self) => self.indexOf(value) === index);
+                    }
+                  });
+                }
+
+                // The ONLY other requirejs.config call - with the context for this specific PCI
+                window.requirejs.config({
+                  context: this.customInteractionTypeIdentifier,
+                  paths: window.requirePaths,
+                  shim: window.requireShim
+                });
+
+                // Define qtiCustomInteractionContext for the PCI
+                define('qtiCustomInteractionContext', () => {
+                  return {
+                    register: pciInstance => {
+                      this.pciInstance = pciInstance;
+                      // Configure PCI instance
+                      const pciConfig = {
+                        properties: config.properties || {},
+                        contextVariables: config.contextVariables || {},
+                        templateVariables: config.templateVariables || {},
+                        onready: pciInstance => {
+                          this.pciInstance = pciInstance;
+                          // Apply any pending updates that arrived before onready
+                          if (this.pendingBoundTo) {
+                            this.applyBoundTo(this.pendingBoundTo);
+                            this.pendingBoundTo = null;
+                          }
+                          if (this.pendingState && typeof this.pciInstance.setState === 'function') {
+                            this.pciInstance.setState(this.pendingState);
+                            this.pendingState = null;
+                          }
+                          this.notifyReady();
+                        },
+                        ondone: (pciInstance, response, state, status) => {
+                          const valid =
+                            this.pciInstance && typeof this.pciInstance.checkValidity === 'function'
+                              ? this.pciInstance.checkValidity()
+                              : undefined;
+                          const customValidity =
+                            this.pciInstance && typeof this.pciInstance.getCustomValidity === 'function'
+                              ? this.pciInstance.getCustomValidity()
+                              : undefined;
+                          this.notifyInteractionChanged(
+                            response,
+                            typeof state === 'string' ? state : null,
+                            valid,
+                            customValidity
+                          );
+                        },
+                        responseIdentifier: config.responseIdentifier,
+                        boundTo: config.boundTo
+                      };
+
+                      if (pciInstance.getInstance) {
+                        const dom = this.markupEl || this.container;
+                        // Round-trip support for object states (stored as a prefixed JSON string by the host).
+                        // For strict string-based PCIs we pass the original string through unchanged.
+                        let restoredState = config.state;
+                        if (typeof restoredState === 'string' && restoredState.indexOf('__qti_json__::') === 0) {
+                          try {
+                            restoredState = JSON.parse(restoredState.substring('__qti_json__::'.length));
+                          } catch (e) {
+                            // If parsing fails, fall back to the raw string.
+                            restoredState = config.state;
+                          }
+                        }
+                        pciInstance.getInstance(dom, pciConfig, restoredState || undefined);
+                      } else {
+                        this.notifyError('Loaded PCI module has no getInstance().');
+                      }
+                    },
+                    notifyReady: () => {
+                      PCIManager.notifyReady();
+                    }
+                  };
+                });
+
+                function getResolvablePathString(path, basePath) {
+                  path = path.replace(/\\.js$/, '');
+                  if (/^[a-z][a-z0-9+.-]*:/i.test(path) || !basePath) {
+                    return path;
+                  }
+
+                  if (path.startsWith('/') && !path.startsWith('//')) {
+                    path = path.slice(1);
+                  }
+
+                  try {
+                    const resolved = new URL(path, ensureDirectoryBasePath(basePath)).toString();
+                    return resolved.replace(/\\.js$/, '');
+                  } catch (error) {
+                    return removeDoubleSlashes(ensureDirectoryBasePath(basePath) + path);
+                  }
+                }
+
+                // Load the PCI module
+                this.loadModule(config.module);
+              },
+
+              loadModule: function (modulePath) {
+                try {
+                  // Get the context-specific require
+                  const contextRequire = window.requirejs.config({
+                    context: this.customInteractionTypeIdentifier
+                  });
+                  contextRequire(['require'], require => {
+                    // Now load the actual module
+                    require([modulePath], () => {}, err => {
+                      console.error('Error loading module:', modulePath, err);
+                      this.notifyError('Module load error: ' + err.toString());
+                    });
+                  });
+                } catch (error) {
+                  console.error('Exception in loadModule:', modulePath);
+                  console.error(error);
+                  this.notifyError('Error in require call: ' + error.toString());
+                }
+              },
+
+              notifyReady: function () {
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'iframeReady'
+                  },
+                  '*'
+                );
+              },
+
+              notifyInteractionChanged: function (response, state, valid, customValidity) {
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'interactionChanged',
+                    params: {
+                      value: response,
+                      state: state,
+                      valid: typeof valid === 'boolean' ? valid : undefined,
+                      customValidity: typeof customValidity === 'string' ? customValidity : undefined
+                    }
+                  },
+                  '*'
+                );
+              },
+
+              notifyError: function (message) {
+                console.error('PCI Error:', message);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'error',
+                    params: { message: message }
+                  },
+                  '*'
+                );
+              },
+
+              setMarkup: function (markupHtml) {
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                if (!this.container) {
+                  this.pendingMarkup = markupHtml;
+                  return;
+                }
+                this.markupEl = this.container.querySelector('qti-interaction-markup');
+                if (!this.markupEl) {
+                  this.markupEl = document.createElement('qti-interaction-markup');
+                  this.container.appendChild(this.markupEl);
+                }
+                this.markupEl.classList.add('qti-customInteraction');
+                this.markupEl.innerHTML = markupHtml || '';
+              },
+
+              setProperties: function (propertiesHtml) {
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                if (!this.container) {
+                  this.pendingProperties = propertiesHtml;
+                  return;
+                }
+                this.propertiesEl = this.container.querySelector('properties');
+                if (!this.propertiesEl) {
+                  this.propertiesEl = document.createElement('properties');
+                  this.container.appendChild(this.propertiesEl);
+                }
+                this.propertiesEl.style.display = 'none';
+                this.propertiesEl.innerHTML = propertiesHtml || '';
+              },
+
+              minifyCss: function (cssContent) {
+                return cssContent
+                  .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')
+                  .replace(/\\s+/g, ' ')
+                  .replace(/\\s*([{}:;])\\s*/g, '$1')
+                  .trim();
+              },
+
+              setStylesheets: function (stylesheetsHtml) {
+                if (!stylesheetsHtml) return;
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                const target = this.container || document.body;
+                if (!target) return;
+                target.insertAdjacentHTML('afterbegin', stylesheetsHtml);
+              },
+
+
+              applyBoundTo: function (boundTo) {
+                if (!this.pciInstance || typeof this.pciInstance.setResponse !== 'function') return;
+                const value = boundTo && (boundTo[this.responseIdentifier] || boundTo[Object.keys(boundTo)[0]]);
+                if (value) this.pciInstance.setResponse(value);
+              }
+            };
+
+            // Set up message listener for communication with parent
+            let expectedParentOrigin = null;
+            window.addEventListener('message', function (event) {
+              const { data } = event;
+
+              // Ensure the message is from our parent
+              if (event.source !== window.parent || !data || data.source !== 'qti-portable-custom-interaction') {
+                return;
+              }
+              if (expectedParentOrigin === null) {
+                expectedParentOrigin = event.origin;
+              } else if (event.origin !== expectedParentOrigin) {
+                return;
+              }
+
+              function deepQuerySelector(root, selector) {
+                if (!root) return null;
+                try {
+                  const direct = root.querySelector ? root.querySelector(selector) : null;
+                  if (direct) return direct;
+                } catch (e) {
+                  // ignore invalid selector for this root
+                }
+                if (!root.querySelectorAll) return null;
+                const nodes = root.querySelectorAll('*');
+                for (const node of nodes) {
+                  if (node && node.shadowRoot) {
+                    const found = deepQuerySelector(node.shadowRoot, selector);
+                    if (found) return found;
+                  }
+                }
+                return null;
+              }
+
+              function deepFindElementByExactText(root, text) {
+                if (!root || !text) return null;
+                if (root.querySelectorAll) {
+                  const nodes = root.querySelectorAll('*');
+                  for (const node of nodes) {
+                    if ((node.textContent || '').trim() === text) return node;
+                    if (node.shadowRoot) {
+                      const found = deepFindElementByExactText(node.shadowRoot, text);
+                      if (found) return found;
+                    }
+                  }
+                }
+                return null;
+              }
+
+              switch (data.method) {
+                case 'initialize':
+                  PCIManager.initialize(data.params);
+                  break;
+
+                case 'setMarkup':
+                  PCIManager.setMarkup(data.params);
+                  break;
+
+                case 'setBoundTo':
+                  if (PCIManager.pciInstance) {
+                    PCIManager.applyBoundTo(data.params);
+                  } else {
+                    PCIManager.pendingBoundTo = data.params;
+                  }
+                  break;
+
+                case 'setProperties':
+                  PCIManager.setProperties(data.params);
+                  break;
+
+                case 'setStylesheets':
+                  PCIManager.setStylesheets(data.params);
+                  break;
+
+                case 'setState':
+                  if (PCIManager.pciInstance && typeof PCIManager.pciInstance.setState === 'function') {
+                    PCIManager.pciInstance.setState((data.params && data.params.state) || data.params);
+                  } else {
+                    PCIManager.pendingState = (data.params && data.params.state) || data.params;
+                  }
+                  break;
+
+                case 'getContent': {
+                  const messageId = data.params && data.params.messageId;
+                  const collectShadowHtml = root => {
+                    const parts = [];
+                    if (!root || !root.querySelectorAll) return parts;
+                    const nodes = root.querySelectorAll('*');
+                    for (const node of nodes) {
+                      if (node && node.shadowRoot) {
+                        parts.push(node.shadowRoot.innerHTML || '');
+                        parts.push(...collectShadowHtml(node.shadowRoot));
+                      }
+                    }
+                    return parts;
+                  };
+                  const shadowHtml = collectShadowHtml(document).join('\\n');
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'getContentResponse',
+                      messageId: messageId,
+                      content: (document.documentElement ? document.documentElement.outerHTML : '') + '\\n' + shadowHtml
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'simulateClick': {
+                  const messageId = data.params && data.params.messageId;
+                  const x = data.params && data.params.x;
+                  const y = data.params && data.params.y;
+                  const el = typeof x === 'number' && typeof y === 'number' ? document.elementFromPoint(x, y) : null;
+                  const target = (el && el.closest && el.closest('.hitbox')) || document.querySelector('.hitbox') || el;
+                  if (target) {
+                    const evt = new MouseEvent('click', {
+                      bubbles: true,
+                      clientX: x,
+                      clientY: y,
+                      screenX: x,
+                      screenY: y,
+                      view: window
+                    });
+                    target.dispatchEvent(evt);
+                  }
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickResponse',
+                      messageId: messageId
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'getBoundingRect': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  const rect = el && typeof el.getBoundingClientRect === 'function' ? el.getBoundingClientRect() : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'getBoundingRectResponse',
+                      messageId: messageId,
+                      rect: rect
+                        ? {
+                            left: rect.left,
+                            top: rect.top,
+                            width: rect.width,
+                            height: rect.height
+                          }
+                        : null
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'clickOnSelector': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  const success = !!el;
+                  if (el && typeof el.click === 'function') el.click();
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickSelectorResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'clickOnElementByText': {
+                  const messageId = data.params && data.params.messageId;
+                  const text = data.params && data.params.text;
+                  const target = text ? deepFindElementByExactText(document, text) : null;
+                  const success = !!target;
+                  if (target && typeof target.click === 'function') target.click();
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickTextResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'setValueElement': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const value = data.params && data.params.value;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  let success = false;
+                  if (el && 'value' in el) {
+                    try {
+                      el.value = value;
+                      el.dispatchEvent(new Event('input', { bubbles: true }));
+                      el.dispatchEvent(new Event('change', { bubbles: true }));
+                      success = true;
+                    } catch (e) {
+                      success = false;
+                    }
+                  }
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'setValueResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
+
+                case 'console':
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'console',
+                      level: data.level,
+                      args: data.args
+                    },
+                    '*'
+                  );
+                  break;
+              }
+            });
+
+            let resizeTimeout;
+            let previousHeight = 0;
+            const notifyResize = () => {
+              const container = document.getElementById('pci-container');
+              const newHeight = container.scrollHeight + 100;
+              if (newHeight !== previousHeight) {
+                previousHeight = newHeight;
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'resize',
+                      height: newHeight,
+                      width: container.scrollWidth
+                    },
+                    '*'
+                  );
+                }, 100); // Adjust debounce time as needed
+              }
+            };
+
+            function setupResizeObserver() {
+              const container = document.getElementById('pci-container');
+              if (!container || !(container instanceof Element)) {
+                console.warn('ResizeObserver: document.container is not an Element');
+                return;
+              }
+
+              const resizeObserver = new ResizeObserver(() => {
+                notifyResize();
+              });
+
+              resizeObserver.observe(container);
+            }
+
+            // Run setup once DOM is ready
+            if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', () => {
+                notifyResize(); // initial resize
+                setupResizeObserver();
+              });
+            } else {
+              notifyResize();
+              setupResizeObserver();
+            }
+
+            window.addEventListener('load', () => {
+              notifyResize();
+            });
+            let lastResponseStr = '';
+            setInterval(() => {
+              if (PCIManager.interactionChangedViaEvent) return;
+              if (PCIManager.pciInstance && PCIManager.pciInstance.getResponse) {
+                const response = PCIManager.pciInstance.getResponse();
+                const valid =
+                  PCIManager.pciInstance && typeof PCIManager.pciInstance.checkValidity === 'function'
+                    ? PCIManager.pciInstance.checkValidity()
+                    : undefined;
+                const customValidity =
+                  PCIManager.pciInstance && typeof PCIManager.pciInstance.getCustomValidity === 'function'
+                    ? PCIManager.pciInstance.getCustomValidity()
+                    : undefined;
+                if (response === undefined) {
+                  // Don't emit an initial empty on load; only emit a clear if we previously had a value
+                  if (!PCIManager.hadResponse) return;
+                  PCIManager.hadResponse = false;
+                  PCIManager.lastResponseStr = null;
+                  const state =
+                    PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function'
+                      ? PCIManager.pciInstance.getState()
+                      : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'interactionChanged',
+                      params: { value: null, state: state, valid: valid, customValidity: customValidity }
+                    },
+                    '*'
+                  );
+                  return;
+                }
+
+                const responseStr = JSON.stringify(response);
+
+                if (responseStr !== PCIManager.lastResponseStr) {
+                  PCIManager.lastResponseStr = responseStr;
+                  PCIManager.hadResponse = true;
+                  const state =
+                    PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function'
+                      ? PCIManager.pciInstance.getState()
+                      : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'interactionChanged',
+                      params: { value: response, state: state, valid: valid, customValidity: customValidity }
+                    },
+                    '*'
+                  );
+                }
+              }
+            }, 500); // Check every 500ms
+          </script>
+        </head>
+        <body>
+          <div id="pci-container"></div>
+        </body>
+      </html>`;
+    }
+    /**
+     * Toggle the display of the correct response
+     * @param responseVariable The response variable containing the correct response
+     * @param show Whether to show or hide the correct response
+     */
+    toggleInternalCorrectResponse(show) {
+        const responseVariable = this.responseVariable;
+        // Store the correct response or clear it based on the show parameter
+        this.correctResponse = show
+            ? responseVariable?.correctResponse
+            : responseVariable.cardinality === 'single'
+                ? ''
+                : [];
+        // Get unique identifiers for this PCI's correct response elements
+        const containerId = `correct-response-container-${this.responseIdentifier}`;
+        // Check the parent element for any existing containers with this ID
+        const existingContainers = this.parentElement?.querySelectorAll(`#${containerId}`);
+        if (existingContainers) {
+            existingContainers.forEach(existingContainer => {
+                existingContainer.remove();
+            });
+        }
+        // Handle the current interaction's state
+        if (show) {
+            // Disable the current interaction when showing correct response
+            this.disable();
+        }
+        else {
+            // Enable the current interaction when hiding correct response
+            this.enable();
+            return; // Exit early, nothing else to do
+        }
+        // If there's no correct response to show, exit
+        if (!show || !responseVariable?.correctResponse) {
+            return;
+        }
+        // Create a container for the correct response viewer
+        const correctResponseContainer = document.createElement('div');
+        correctResponseContainer.id = containerId;
+        correctResponseContainer.className = 'pci-correct-response-container';
+        correctResponseContainer.style.position = 'relative';
+        correctResponseContainer.style.marginTop = '20px';
+        correctResponseContainer.style.border = '2px solid green';
+        correctResponseContainer.style.padding = '16px';
+        correctResponseContainer.style.borderRadius = '4px';
+        correctResponseContainer.style.backgroundColor = 'rgba(0, 128, 0, 0.05)';
+        // Add a label for the correct response
+        const label = document.createElement('div');
+        label.textContent = 'Correct Response:';
+        label.style.fontWeight = 'bold';
+        label.style.marginBottom = '10px';
+        label.style.color = 'green';
+        correctResponseContainer.appendChild(label);
+        // Instead of cloning, we'll create a new instance and copy necessary attributes
+        const correctResponseViewer = document.createElement('qti-portable-custom-interaction');
+        // Copy all attributes from the original PCI
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name !== 'id' && attr.name !== 'response-identifier') {
+                correctResponseViewer.setAttribute(attr.name, attr.value);
+            }
+        });
+        // Set a unique response identifier to avoid conflicts
+        const originalResponseId = this.responseIdentifier;
+        correctResponseViewer.responseIdentifier = `${originalResponseId}-correct`;
+        // Copy any light DOM content from the original PCI
+        // This includes markup and properties
+        Array.from(this.children).forEach(child => {
+            const clonedChild = child.cloneNode(true);
+            correctResponseViewer.appendChild(clonedChild);
+        });
+        // Store the correct response value
+        const correctResponseValue = responseVariable.correctResponse;
+        // Ensure the correct-response viewer is initialized and then configured in the iframe
+        const originalConnectedCallback = correctResponseViewer.connectedCallback;
+        correctResponseViewer.connectedCallback = function () {
+            originalConnectedCallback.call(this);
+            const applyCorrectResponse = () => {
+                const qtiVariableJSON = this.responseVariablesToQtiVariableJSON(correctResponseValue, responseVariable.cardinality, responseVariable.baseType);
+                this.sendMessageToIframe('setBoundTo', {
+                    [originalResponseId]: qtiVariableJSON
+                });
+                this.sendMessageToIframe('setState', { state: 'review' });
+            };
+            if (this._iframeLoaded) {
+                applyCorrectResponse();
+            }
+            else {
+                this.addEventListener('qti-portable-custom-interaction-loaded', applyCorrectResponse, { once: true });
+            }
+        };
+        // Make sure the viewer is not interactive
+        correctResponseViewer.style.pointerEvents = 'none';
+        // Add the correct response viewer to the container
+        correctResponseContainer.appendChild(correctResponseViewer);
+        // Append the container after this PCI
+        this.after(correctResponseContainer);
+    }
+    /**
+     * Method to disable the PCI for review mode
+     * This can be used when showing the correct response
+     */
+    disable() {
+        // First, store the current state of the PCI
+        this.#previousState = {
+            pointerEvents: this.style.pointerEvents,
+            position: this.style.position
+        };
+        this.sendMessageToIframe('setState', { state: 'disabled' });
+        // Add an overlay to prevent interaction if not already there
+        const existingOverlay = this.querySelector('.pci-interaction-overlay');
+        if (!existingOverlay) {
+            const overlay = document.createElement('div');
+            overlay.className = 'pci-interaction-overlay';
+            overlay.style.position = 'absolute';
+            overlay.style.top = '0';
+            overlay.style.left = '0';
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.backgroundColor = 'rgba(200, 200, 200, 0.3)';
+            overlay.style.zIndex = '100';
+            overlay.style.pointerEvents = 'all';
+            overlay.style.cursor = 'not-allowed';
+            // Make sure the container is relatively positioned
+            if (getComputedStyle(this).position === 'static') {
+                this.style.position = 'relative';
+            }
+            this.appendChild(overlay);
+        }
+    }
+    /**
+     * Method to enable the PCI for interactive mode
+     */
+    enable() {
+        // Remove any overlays
+        const overlay = this.querySelector('.pci-interaction-overlay');
+        if (overlay) {
+            overlay.remove();
+        }
+        // Restore previous state if available
+        if (this.#previousState) {
+            if (this.#previousState.pointerEvents) {
+                this.style.pointerEvents = this.#previousState.pointerEvents;
+            }
+            if (this.#previousState.position) {
+                this.style.position = this.#previousState.position;
+            }
+            this.#previousState = null;
+        }
+        this.sendMessageToIframe('setState', { state: 'interacting' });
+    }
+    // Add this property to store the previous state
+    #previousState;
+    render() {
+        return html `
+      <slot></slot>
+      ${this._errorMessage
+            ? html `<div style="color:red">
+            <h1>Error</h1>
+            ${this._errorMessage}
+          </div>`
+            : ''}
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'module' })
+], QtiPortableCustomInteraction.prototype, "module", void 0);
+__decorate([
+    property({ type: String, attribute: 'custom-interaction-type-identifier' })
+], QtiPortableCustomInteraction.prototype, "customInteractionTypeIdentifier", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-require-paths' })
+], QtiPortableCustomInteraction.prototype, "requirePathsJson", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-require-shim' })
+], QtiPortableCustomInteraction.prototype, "requireShimJson", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-require-js-url' })
+], QtiPortableCustomInteraction.prototype, "requireJsUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-base-url' })
+], QtiPortableCustomInteraction.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'data-use-default-paths' })
+], QtiPortableCustomInteraction.prototype, "useDefaultPaths", void 0);
+__decorate([
+    state()
+], QtiPortableCustomInteraction.prototype, "_errorMessage", void 0);
+__decorate([
+    consume({ context: itemContext, subscribe: true }),
+    state()
+], QtiPortableCustomInteraction.prototype, "context", void 0);
+__decorate([
+    consume({ context: qtiContext, subscribe: true }),
+    state()
+], QtiPortableCustomInteraction.prototype, "qtiContext", void 0);
+__decorate([
+    state()
+], QtiPortableCustomInteraction.prototype, "response", void 0);
+//# sourceMappingURL=qti-portable-custom-interaction.js.map