Hello everyone, I have a dice task implemented with a JavaScript code. The task requires the participant to click on an image of two dice, and a message 'You rolled a <number rolled>' will appear.
This behavior occurs in two separate blocks. Therefore at the end of the survey I should have 2 columns, one for each roll. The HTML code for each of the two blocks will be the same.
The java script code for the dice task will be this below, with minor modifications for the two occurrencies (i.e change the name of the column where the result will be registered):
Qualtrics.SurveyEngine.addOnReady(function() {
var diceButton = document.getElementById('diceButton');
var resultField = document.getElementById('result');
var diceRolled = false; // Flag per tenere traccia se i dadi sono stati lanciati
// Aggiungi stile al risultato
var style = document.createElement('style');
style.innerHTML = `
#result {
font-size: 30px; /* Dimensione maggiore per il testo del risultato */
}
#result .number {
font-weight: bold; /* Grassetto per il numero */
font-size: 34px; /* Dimensione del testo per il numero, 2 punti maggiore del resto */
}
`;
document.head.appendChild(style);
diceButton.addEventListener('click', function() {
if (!diceRolled) { // Verifica se i dadi non sono stati ancora lanciati
const result = Math.floor(Math.random() * 2) + 2; // Genera un numero casuale tra 2 e 3
resultField.innerHTML = `You rolled a <span class="number">${result}</span>!`;
// Salva l'esito del lancio nei dati incorporati
Qualtrics.SurveyEngine.setEmbeddedData('diceResult', result);
diceRolled = true; // Imposta il flag a true dopo il lancio dei dadi
// Disabilita il pulsante dopo il primo click
diceButton.disabled = true;
}
});
In both cases it doesnt’t show me the number generated. It just shows ‘You rolled a !’
Any hint on how to solve this?