Dear all,
I have just started designing a questionnaire in qualtrics using javascript. I am trying to capture consumers weekly basket food shopping. However, I am a bit lost as the responses are not being registered. I am afraid I am doing something worng with the way I am adding the question. I am explaining the approach for one food category, bakery. My approach has been this:
1. I created a question for each product category (ex. bakery, fruit. As mentioned I will give you only the example for bakery as it is the same logic for the rest)
2. I have 5 products under the bakery category.
3. I created a question in qualtrics as text and in the html view I added the following script:
<div>
<h2>Available Items</h2>
<ul id="available-items">
<li data-id="1" data-name="Farm house bread" data-price="4.25">
<img src="https://readingagriculture.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6RSmhAKaqgKde0C" alt="Farm house bread Image">
<br>Farm house bread - £4.25/kg
<button onclick="addItem(1, 'Farm house bread', 4.25)">Add to Basket</button>
</li>
<li data-id="2" data-name="Loaf of bread" data-price="2.10">
<img src="https://readingagriculture.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bI2NaljqXDEYbDU" alt="Loaf of bread Image">
<br>Loaf of bread - £2.10/kg
<button onclick="addItem(2, 'Loaf of bread', 2.10)">Add to Basket</button>
</li>
<li data-id="3" data-name="Ciabatta" data-price="1.85">
<img src="https://readingagriculture.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8AOOXYTyjLu8UVE" alt="Ciabatta Image">
<br>Ciabatta - £1.85/kg
<button onclick="addItem(3, 'Ciabatta', 1.85)">Add to Basket</button>
</li>
<li data-id="4" data-name="Croissant" data-price="3.99">
<img src="https://readingagriculture.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_cOPjSzEvcwwrnym" alt="Croissant Image">
<br>Croissant - £3.99/kg
<button onclick="addItem(4, 'Croissant', 3.99)">Add to Basket</button>
</li>
<li data-id="5" data-name="Pain au chocolat" data-price="5.22">
<img src="https://readingagriculture.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0CcMCtFV3KmdFxY" alt="Pain au chocolat Image">
<br>Pain au chocolat - £5.22/kg
<button onclick="addItem(5, 'Pain au chocolat', 5.22)">Add to Basket</button>
</li>
</ul>
</div>
<div>
<h2>Shopping Basket</h2>
<ul id="basket-items"></ul>
<p>Total Price: £<span id="total-price">0.00</span></p>
<button onclick="clearBasket()">Clear Basket</button>
</div>
<script>
var basket = ];
function addItem(itemId, itemName, itemPrice) {
var newItem = {
id: itemId,
name: itemName,
price: itemPrice
};
basket.push(newItem);
updateBasket();
}
function removeItem(itemId) {
// Find the index of the item to remove
var indexToRemove = basket.findIndex(item => item.id === itemId);
// Remove the item from the basket
if (indexToRemove !== -1) {
basket.splice(indexToRemove, 1);
updateBasket();
}
}
function updateBasket() {
var basketList = document.getElementById('basket-items');
var totalPriceElement = document.getElementById('total-price');
var totalPrice = 0;
// Clear existing items in the list
basketList.innerHTML = '';
// Iterate through the basket and display items
basket.forEach(function (item) {
var listItem = document.createElement('li');
listItem.textContent = `${item.name} - £${item.price.toFixed(2)}`;
// Add a remove button next to each item
var removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = function () {
removeItem(item.id);
};
listItem.appendChild(removeButton);
basketList.appendChild(listItem);
totalPrice += item.price;
});
// Display the total price
totalPriceElement.textContent = totalPrice.toFixed(2);
// Update embedded data based on the current basket
var embeddedData = {};
// Iterate through all available items and set embedded data
for (var i = 1; i <= 5; i++) {
var selected = basket.find(item => item.id === i);
if (selected) {
// Item is selected, set embedded data
embeddedData`selected_${i}_name`] = selected.name;
embeddedData`selected_${i}_price`] = selected.price.toFixed(2);
} else {
// Item is not selected, set embedded data to blank
embeddedDatae`selected_${i}_name`] = '';
embeddedData`selected_${i}_price`] = '';
}
}
// Set embedded data in Qualtrics
Qualtrics.SurveyEngine.setEmbeddedData(embeddedData);
}
</script>
- Under the "Question Behaviour" I selected JavaScript and I added the following code: var basket = ];
Qualtrics.SurveyEngine.addOnload(function () {
function addItem(itemId, itemName, itemPrice) {
var newItem = {
id: itemId,
name: itemName,
price: itemPrice
};
basket.push(newItem);
updateBasket();
}
function removeItem(itemId) {
var indexToRemove = basket.findIndex(item => item.id === itemId);
if (indexToRemove !== -1) {
basket.splice(indexToRemove, 1);
updateBasket();
}
}
function updateBasket() {
var basketList = document.getElementById('basket-items');
var totalPriceElement = document.getElementById('total-price');
var totalPrice = 0;
basketList.innerHTML = '';
basket.forEach(function (item) {
var listItem = document.createElement('li');
listItem.textContent = `${item.name} - £${item.price.toFixed(2)}`;
var removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = function () {
removeItem(item.id);
};
listItem.appendChild(removeButton);
basketList.appendChild(listItem);
totalPrice += item.price;
});
totalPriceElement.textContent = totalPrice.toFixed(2);
}
function clearBasket() {
// Clear the basket and update the display
basket = ];
updateBasket();
}
});
Qualtrics.SurveyEngine.addOnReady(function () {
var embeddedData = {};
for (var i = 1; i <= 5; i++) {
var selected = basket.find(item => item.id === i);
if (selected) {
embeddedDatas`selected_${i}_name`] = selected.name;
embeddedData<`selected_${i}_price`] = selected.price.toFixed(2);
} else {
embeddedData`selected_${i}_name`] = '';
embeddedData`selected_${i}_price`] = '';
}
}
function clearBasket() {
// Clear the basket and update the display
basket = l];
updateBasket();
}
});
Qualtrics.SurveyEngine.addOnUnload(function () {
Qualtrics.SurveyEngine.setEmbeddedData(embeddedData);
function clearBasket() {
basket = i];
updateBasket();
}
});
5. In qualtrics survey flow I created embedded data to capture the name of the product and the price that corresponds to each product:
selected_1_name = Value will be set from Panel or URL.
selected_1_price = Value will be set from Panel or URL.
until
selected_5_name = Value will be set from Panel or URL.
selected_5_price = Value will be set from Panel or URL.
6. The embedded data were placed before the block contanining the bakery question.
What have I donw wrong? The responses are not being registered.