code 33

<script>
// WebSocket variable
var chatSocket;
var myid = null; // Initialize myid without a default

// Step 1: Extract the subject ID from the waiting room page
var subjectIdElement = Array.from(document.querySelectorAll('*')).find(el => el.textContent.includes('You are subject'));

if (subjectIdElement) {
    var subjectIdMatch = subjectIdElement.textContent.match(/You are subject (\d+)/);
    if (subjectIdMatch) {
        myid = parseInt(subjectIdMatch[1]); // Extracted Subject ID corresponds to myid
        console.log("Assigned Member ID (myid): " + myid);
    } else {
        console.error("Subject ID not found in the targeted element.");
        alert("Error: Subject ID not found. Please contact support.");
    }
} else {
    console.error("Could not find the element containing 'You are subject'.");
    alert("Error: Subject ID element not found. Please contact support.");
}

// Only proceed if myid was successfully set
if (myid !== null) {
    // Connect to WebSocket server
    function connectWebSocket() {
        chatSocket = new WebSocket("wss://your.websocket.server/endpoint"); // Replace with your WebSocket endpoint
        
        chatSocket.onmessage = function(event) {
            console.log("Message received:", event.data); // Debugging log
            var messageData = JSON.parse(event.data);
            updateChatDisplay(messageData.subjectId, messageData.message);
        };
        
        chatSocket.onopen = function() {
            console.log("Connected to WebSocket server.");
        };
        
        chatSocket.onclose = function() {
            console.log("Disconnected from WebSocket server.");
        };
    }

    // Handle incoming messages
    function updateChatDisplay(subjectId, message) {
        var chatBox = document.getElementById('chatBox');
        var messageElement = document.createElement('p');
        var memberName = "Member " + subjectId; // Customize member name display
        messageElement.innerText = memberName + ": " + message;
        chatBox.appendChild(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom
    }

    // Send a chat message
    function sendMessage() {
        var message = document.getElementById('chatInput').value;
        if (message.trim() !== "") {
            var messageData = {
                subjectId: myid, // Use the extracted ID
                message: message
            };
            chatSocket.send(JSON.stringify(messageData));
            updateChatDisplay(myid, message); // Display your own message immediately
            document.getElementById('chatInput').value = ''; // Clear the input box
        }
    }

    // Existing functions
    function receiveMessage(event) {
        if (event.data == "closeQSIWindow") {
            $("#qualFrame").hide();  
            experimentComplete();
        }
        if (event.data == "popupConsent") {
            if (REQUEST_CONSENT) {
                requestConsent();
            }
        }
        if (event.data == "payAMT") {
            if (IS_AMT) {
                payAMT(true, AMTBonus);
            }
        }
    }

    function showSubjectId(subjectId) {
        document.getElementById('member_id_display').innerText = "Your member ID is " + subjectId;
    }

    function initialize() {
        $("#survey_title").html(variables["title"]);
        window.addEventListener("message", receiveMessage, false);
        $("#qualFrame").attr("src", variables["survey_link"] + "&testId=" + seed + "&subjectId=" + myid);
        $("#qualFrame").height(variables["survey_height"]);
        $("#qualFrame").show();
        showSubjectId(myid);
        connectWebSocket(); // Connect to WebSocket on initialization
    }
}
</script>

<!-- HTML Structure -->
<h1 id="survey_title"></h1>
<p id="member_id_display" style="text-align: center; font-weight: bold; font-size: 24px;"></p >
<iframe id="qualFrame" name="qualtrics" scrolling="auto" frameborder="no" align="center" width="100%" style="display: none;"></iframe>

<!-- Chat UI -->
<div id="chatBox" style="border: 1px solid #ccc; height: 200px; overflow-y: scroll; padding: 10px; margin-top: 20px;"></div>
<input id="chatInput" type="text" style="width: 80%;" placeholder="Type your message here">
<button onclick="sendMessage()">Send</button>