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>  

4. 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.