javascript and qualtrics

Can you maybe add the JavaScript here, so we can see what you are doing?

If you for example set the value as embedded data, then it will only be visible when you open the next page. I’m sure it is possible to have it updating dynamically on the same page, but this will require quite a bit more work.

Hi Jesper,

Thank you very much for your response. Below is my script. I also added an embedded data at qualtrics survey flow before the block where the multiple choice question is and named it TotalAmout. Then I added a pipped text in the text where it should be shown the total amount spent like this: Total amount Spent${e://Field/TotalAmount}. Here is the code:

Qualtrics.SurveyEngine.addOnload(function() {
    // Map of bakery items to their prices
    var prices = {
        "1": 4.25,
        "2": 2.10,
        "3": 1.85,
        // Add more items as needed
    };

    // Function to update the total amount
    function updateTotal() {
        var total = 0;
        // Loop through selected choices and add their prices
        jQuery("#BAKERY input[type=checkbox]:checked").each(function() {
            var choiceId = jQuery(this).attr("id");
            total += prices[choiceId];
        });
        // Set embedded data field with the calculated total (outside the loop)
        Qualtrics.SurveyEngine.setEmbeddedData('TotalAmount', total.toFixed(2));
        // Update the value of the Text/Graphic question
        jQuery("#EXP_BAKERY").text("Total amount spent: $" + total.toFixed(2)); // Adjust the format as needed
    }

    // Attach the updateTotal function to the click event of the checkboxes
    jQuery("#BAKERY input[type=checkbox]").change(updateTotal);
    
});

Hi @Vi86 

I made this work:

Qualtrics.SurveyEngine.addOnload(function() {
    // Map of food items to their prices. !, 2 and 3 are the codes of the choice options in qualtrics
    var prices = {
        "1": 4.25,
        "2": 2.10,
        "3": 1.85,
            };
    
    var total = 0;
    
    this.questionclick = function(event,element){
        //for a single answer multiple choice question, the element type will be radio
        if (element.type == 'checkbox')
        {
            var choiceNum = element.id.split('~')[2];
            total += prices[choiceNum];
            alert("Total: " + total.toFixed(2));
            Qualtrics.SurveyEngine.setEmbeddedData('TotalAmount', total.toFixed(2));
        }
    }
 
});

It seemed like your

You might also need to set the embedded data in this part:

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)

I don’t think it will work in the addOnload  part.

Additionally I was thinking that my code might have a flaw as it will keep on adding, so you might need to change it to check on if the boxes are selected like your code did.

Hi Jesper,

Thank you very much! I tried your code and it shows as a pop up window everytime I click on a product, the total amount of money. However, if I unselect one of the choices it keeps adding. In addition, the text question shows the total amount only if placed in a seperate page after the multiple choice question.

I also added the script under the “Qualtrics.SurveyEngine.addOnPageSubmit(function(type)” but it doesnt show anything.

I also tried instead of adding multiple choice questions I added the question as html. That resolves the problem of having the updated total amount in the same page but there are problems on the way responses are registered in qualtrics. I created an embedded data “basket” and assign the value “survey question” and I selected the question ID where the html is but it gives me only the cance to select the text question. In this way qualtrics registers the question but of course it is just the html code but not on what they clicked. When allow the value to be registered by the panel it doesnt register anything. In other words, I dont have the choices that clicked on. I assume I should create within html liek sort of variables but I dont have any idea on how to do that. Do you have any experience with this? Thank you very very much!! Here is the code I created for the html option:

<div>
    <h2>Available Items</h2>
    <ul id="available-items">
        <li data-id="1" data-name="Farm house bread" data-price="4.25">
            <img src=" " 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=" " 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=" " alt="Ciabatta Image">
            <br>Ciabatta - £1.85/kg
            <button onclick="addItem(3, 'Ciabatta', 1.85)">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);
    }

    function clearBasket() {
        // Clear the basket and update the display
        basket = [];
        updateBasket();
    }
</script>

​

Hi @Vi86,

First of all, you should hide the brand name from your code above. Please edit the post and change it so it is not visible.

The code that checks the options selected, should be placed in the Qualtrics.SurveyEngine.addOnload(function()

or the

Qualtrics.SurveyEngine.addOnReady(function()

Would it be enough to have the data as embedded data in the survey?

Then you can use the HTML as is, and then use the Qualtrics.SurveyEngine.setEmbeddedData to add values for each bread selected in the

Qualtrics.SurveyEngine.addOnUnload(function()

or in the

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)

These different functions define when the code is loaded an when it will run. setEmbeddedData can only be done in the last two, and wont have any effect in the first two.

If you need to define global values, then you just define them at the very top of the page, before the Qualtrics.SurveyEngine.addOnload(function() line. This way all 4 functions can access and change the variable.

​

@Vi86.

You might be interested in the orderFormMatrix function. If so, send me a private message.

Hi Jesper and Tom,
Thank you very much for stopping by and helping me with my issue. So I think it is better to go with the html version of teh data. As I mentioned previoulsy I had a problem with registering respondents’ choices. However, I resolved it through adding an embedded data write before the question that it takes the value based on the javascript. Now the embedded data shows in the dataset and the value it gets is this” - £” when people choose only one option and the it repeats with the number of choices they make but doesnt show any id of the item or anything else. I think it is related with another issue which is the way “Shopping basket” shows. I am sending the code but jsut to explain that the code does update the total value correctly but the name and the price of the items selected are not displayed correctly. They are displayed “- £”. I think the problems are connected. This is the code:
<div>
    <h2>Available Items</h2>
    <ul id="available-items">
        <li data-id="1" data-name="Farm house bread" data-price="4.25">
            <img src="it shows the folder where the image is stored" 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="it shows the folder where the image is stored" 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="it shows the folder where the image is stored" alt="Ciabatta Image">
            <br>Ciabatta - £1.85/kg
            <button onclick="addItem(3, 'Ciabatta', 1.85)">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);

        // Set embedded data with selected items
        setEmbeddedData();
    }

    function setEmbeddedData() {
        var selectedItems = basket.map(item => `${item.name} - £${item.price.toFixed(2)}`).join(';');
        Qualtrics.SurveyEngine.setEmbeddedData('SelectedItems', selectedItems);
    }

    function clearBasket() {
        // Clear the basket and update the display
        basket = [];
        updateBasket();
    }
</script>