I have the following code in which participants will be exposed to different stimuli and I need to record their decisions under an embedded data. However, my code is only recording the last block rather than all of them. My skills on JavaScript are quite basic, so any advice would be appreciate.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
Qualtrics.SurveyEngine.addOnload(function() {
// Retrieve the stored token values from embedded data
var yourTokens = parseInt("${e://Field/yourTokens}") || 400;
var initialPlayerToken = 400;
// Find all question containers in the block
var questionContainers = document.querySelectorAll('div[id^="QID"]');
// Loop through each question container
questionContainers.forEach(function(container) {
var playerTokens;
Qualtrics.SurveyEngine.addOnReady(function() {
playerTokens = initialPlayerToken;
// Create the game elements
var instructions = document.createElement("div");
instructions.innerHTML = "Choose your action:";
var cooperateBtn = document.createElement("button");
cooperateBtn.innerHTML = "Cooperate";
cooperateBtn.addEventListener("click", function() {
handleAction("cooperate", container);
});
var defectBtn = document.createElement("button");
defectBtn.innerHTML = "Defect";
defectBtn.addEventListener("click", function() {
handleAction("defect", container);
});
var yourAccount = document.createElement("div");
yourAccount.className = "your-account";
yourAccount.innerHTML = "Your account: " + yourTokens + " tokens";
var playerAccount = document.createElement("div");
playerAccount.className = "player-account";
playerAccount.innerHTML = "Player account: " + playerTokens + " tokens";
// Append the game elements to the container
container.appendChild(instructions);
container.appendChild(cooperateBtn);
container.appendChild(defectBtn);
container.appendChild(yourAccount);
container.appendChild(playerAccount);
// Handle the selected action
function handleAction(action, container) {
var instructions = container.querySelector("div");
var cooperateBtn = container.querySelector("button:nth-of-type(1)");
var defectBtn = container.querySelector("button:nth-of-type(2)");
var yourAccount = container.querySelector(".your-account");
var playerAccount = container.querySelector(".player-account");
// Hide the game elements
instructions.style.display = "none";
cooperateBtn.style.display = "none";
defectBtn.style.display = "none";
// Show the result
var result = document.createElement("div");
var player2Action = "defect";
var payoff = calculateResult(action, player2Action);
result.innerHTML = "You chose to " + action + " and the other player chose to " + player2Action + ". Therefore, " + payoff.result;
container.appendChild(result);
// Update the token values
yourTokens += payoff.player1;
playerTokens += payoff.player2;
// Update the account values
yourAccount.innerHTML = "Your account: " + yourTokens + " tokens";
playerAccount.innerHTML = "Player account: " + playerTokens + " tokens";
// Update the token values in embedded data
Qualtrics.SurveyEngine.setEmbeddedData("yourTokens", yourTokens.toString());
Qualtrics.SurveyEngine.setEmbeddedData("playerTokens", playerTokens.toString());
// Update the player1Decision in embedded data
Qualtrics.SurveyEngine.setEmbeddedData("player1Decision", action);
}
// Calculate the game result
function calculateResult(action, player2Action) {
// Define the payoff matrix
var payoffMatrix = {
cooperate: {
cooperate: { player1: 10, player2: 10 },
defect: { player1: -10, player2: 20 }
},
defect: {
cooperate: { player1: 20, player2: -10 },
defect: { player1: 0, player2: 0 }
}
};
// Get the payoff for the chosen actions
var payoff = payoffMatrix[action][player2Action];
return {
result: "you receive " + payoff.player1 + ", and the other player receives " + payoff.player2,
player1: payoff.player1,
player2: payoff.player2
};
}
});
});
});
</script>
</head>
<body>
</body>
</html>
