code 32
<script>
// WebSocket variable
var chatSocket;

// Step 1: Extract the subject ID from the waiting room page
var myid = 1; // Default to 1 if not found

// Target the specific element that contains the subject ID text
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.log("Subject ID not found in the targeted element.");
    }
} else {
    console.log("Could not find the element containing 'You are subject'.");
}

// 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>