qualtrics - Record response for survey block using html+JavaScript - Stack Overflow

admin管理员组

文章数量:1291295

I am using a toy example for the purpose of my questions. I would like to ask what should I change in below code so that I can record QID and the starRating in response data.

Thank you.

I have a survey block QID1 in html,

<div class="form-group">
    <label for="rating">Rate Our Service:</label>
    <div class="stars" id="starRating">
        <span data-value="1">★</span>
        <span data-value="2">★</span>
        <span data-value="3">★</span>
        <span data-value="4">★</span>
        <span data-value="5">★</span>
    </div>
    <input type="hidden" id="ratingInput" name="rating" required>
</div>

and the CCS code I pass to Qualtrics -> Look at Feel is here:

.stars span {
    font-size: 32px;
    color: gray;
    cursor: pointer;
    transition: color 0.2s;
}
.stars span.selected {
    color: gold;
}

This is the JavaScript I put for this survey block:

Qualtrics.SurveyEngine.addOnload(function() {
    // Interactive star rating
    const stars = document.querySelectorAll('#starRating span');
    const ratingInput = document.getElementById('ratingInput');

    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
            ratingInput.value = ratingValue;

            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }
        });
    });
});

I tried to edit the JavaScript as below, it certainly did not work:

Qualtrics.SurveyEngine.addOnload(function() {
    const stars = document.querySelectorAll('#QID1 span');
    const ratingInput = document.getElementById('QID1_ratingInput');
    const serviceRatingQuestion = Qualtrics.SurveyEngine.getQuestionById("QID1");

    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
            ratingInput.value = ratingValue;

            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }

            // Set the selected choice in Qualtrics
            serviceRatingQuestion.setChoiceValue(ratingValue, true);
        });
    });
});

Appreciate if you can point me to some thread that is relevant to the problem I have.

I am using a toy example for the purpose of my questions. I would like to ask what should I change in below code so that I can record QID and the starRating in response data.

Thank you.

I have a survey block QID1 in html,

<div class="form-group">
    <label for="rating">Rate Our Service:</label>
    <div class="stars" id="starRating">
        <span data-value="1">★</span>
        <span data-value="2">★</span>
        <span data-value="3">★</span>
        <span data-value="4">★</span>
        <span data-value="5">★</span>
    </div>
    <input type="hidden" id="ratingInput" name="rating" required>
</div>

and the CCS code I pass to Qualtrics -> Look at Feel is here:

.stars span {
    font-size: 32px;
    color: gray;
    cursor: pointer;
    transition: color 0.2s;
}
.stars span.selected {
    color: gold;
}

This is the JavaScript I put for this survey block:

Qualtrics.SurveyEngine.addOnload(function() {
    // Interactive star rating
    const stars = document.querySelectorAll('#starRating span');
    const ratingInput = document.getElementById('ratingInput');

    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
            ratingInput.value = ratingValue;

            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }
        });
    });
});

I tried to edit the JavaScript as below, it certainly did not work:

Qualtrics.SurveyEngine.addOnload(function() {
    const stars = document.querySelectorAll('#QID1 span');
    const ratingInput = document.getElementById('QID1_ratingInput');
    const serviceRatingQuestion = Qualtrics.SurveyEngine.getQuestionById("QID1");

    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
            ratingInput.value = ratingValue;

            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }

            // Set the selected choice in Qualtrics
            serviceRatingQuestion.setChoiceValue(ratingValue, true);
        });
    });
});

Appreciate if you can point me to some thread that is relevant to the problem I have.

• qualtrics

Share Improve this question Follow asked Feb 13 at 15:04 babyababya 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I assume you know that Qualtrics has a built-in star rating question so this example is doing it the hard way. I also assume that your html and JS is attached to a multiple choice question.

A few things to note:

1. Within addOnload 'this' points to the question object and getQuestionById isn't a Qualtrics JS API function
2. Since 'this' points to the question object you don't need to hard code the question id (QID1)
3. The hidden ratingInput element in your html serves no purpose

So your JS should look like the following:

Qualtrics.SurveyEngine.addOnload(function() {
    const qobj = this;
    const stars = document.querySelectorAll('#starRating span');
        
    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
                
            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }

            // Set the selected choice in Qualtrics
            qobj.setChoiceValue(ratingValue, true);
        });
    });
});

本文标签： qualtricsRecord response for survey block using htmlJavaScriptStack Overflow