steps

User Feedback Step

The end of an interaction. This step is used to gather data on the value of the interaction and communicate to the user that the resolution is finished.

v1.0.0Requires JS

View raw

<!-- Version: 1.0.0 -->
<div class='body-container body-container--feedback'>
  <!-- Step Header -->
<header class='step-header'>
    <!-- Right Header Button -->
    <button onclick='cancelButtonClicked()' class='step-header__action right-0 '>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
  <!-- Step Article -->
  <article class='step-body overflow-y-auto h-full items-center justify-around'>

    <div class='feedback--content text-center'>
      <img class="feedback--content__image" src="/images/success.svg" alt="Success icon">
      <!-- <div class='animation animation--feedback' data-renderer='svg' data-json='success2.json'></div> -->
      <h1 class='step-title step-title--feedback'></h1>
      <div class='step-description step-description--feedback'>
        <p></p>
      </div>
    </div>

    <div class='feedback--stars'>
      <h3 class='feedback--stars__title'>How did I do?</h3>
      <input class='feedback--star__input' type='radio' id='star5' name='rating' value='5' /><label for='star5' class='feedback--star__label'><svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 107'><path d='M49.997 3.977L36.54 31.513 6.106 35.86c-5.383.828-7.453 7.453-3.52 11.387l21.739 21.324-5.176 30.02c-.828 5.383 4.969 9.523 9.73 7.039l27.122-14.285 26.914 14.285c4.761 2.484 10.558-1.656 9.73-7.04L87.47 68.572l21.738-21.324c3.933-3.934 1.863-10.559-3.52-11.387l-30.226-4.347L61.798 3.977c-2.278-4.761-9.317-4.968-11.801 0z' fill='currentColor' /></svg></label>

      <input class='feedback--star__input' type='radio' id='star4' name='rating' value='4' /><label for='star4' class='feedback--star__label'><svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 107'><path d='M49.997 3.977L36.54 31.513 6.106 35.86c-5.383.828-7.453 7.453-3.52 11.387l21.739 21.324-5.176 30.02c-.828 5.383 4.969 9.523 9.73 7.039l27.122-14.285 26.914 14.285c4.761 2.484 10.558-1.656 9.73-7.04L87.47 68.572l21.738-21.324c3.933-3.934 1.863-10.559-3.52-11.387l-30.226-4.347L61.798 3.977c-2.278-4.761-9.317-4.968-11.801 0z' fill='currentColor' /></svg></label>

      <input class='feedback--star__input' type='radio' id='star3' name='rating' value='3' /><label for='star3' class='feedback--star__label'><svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 107'><path d='M49.997 3.977L36.54 31.513 6.106 35.86c-5.383.828-7.453 7.453-3.52 11.387l21.739 21.324-5.176 30.02c-.828 5.383 4.969 9.523 9.73 7.039l27.122-14.285 26.914 14.285c4.761 2.484 10.558-1.656 9.73-7.04L87.47 68.572l21.738-21.324c3.933-3.934 1.863-10.559-3.52-11.387l-30.226-4.347L61.798 3.977c-2.278-4.761-9.317-4.968-11.801 0z' fill='currentColor' /></svg></label>

      <input class='feedback--star__input' type='radio' id='star2' name='rating' value='2' /><label for='star2' class='feedback--star__label'><svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 107'><path d='M49.997 3.977L36.54 31.513 6.106 35.86c-5.383.828-7.453 7.453-3.52 11.387l21.739 21.324-5.176 30.02c-.828 5.383 4.969 9.523 9.73 7.039l27.122-14.285 26.914 14.285c4.761 2.484 10.558-1.656 9.73-7.04L87.47 68.572l21.738-21.324c3.933-3.934 1.863-10.559-3.52-11.387l-30.226-4.347L61.798 3.977c-2.278-4.761-9.317-4.968-11.801 0z' fill='currentColor' /></svg></label>

      <input class='feedback--star__input' type='radio' id='star1' name='rating' value='1' /><label for='star1' class='feedback--star__label'><svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 107'><path d='M49.997 3.977L36.54 31.513 6.106 35.86c-5.383.828-7.453 7.453-3.52 11.387l21.739 21.324-5.176 30.02c-.828 5.383 4.969 9.523 9.73 7.039l27.122-14.285 26.914 14.285c4.761 2.484 10.558-1.656 9.73-7.04L87.47 68.572l21.738-21.324c3.933-3.934 1.863-10.559-3.52-11.387l-30.226-4.347L61.798 3.977c-2.278-4.761-9.317-4.968-11.801 0z' fill='currentColor' /></svg></label>

    </div>

  </article>
  <!-- Modal Popup -->
<div class='modal modal--feedback'>
    <!-- Step Header -->
<header class='step-header'>
    <!-- Right Header Button -->
    <button onclick='cancelButtonClicked()' class='step-header__action right-0 text-whitepopup-modal__close'>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
    <article class='modal--feedback__content'>
        <img class="feedback--content__image" src="/images/success2.svg" alt="Success icon">
        <!-- <div class='animation animation--feedback-submitted' data-renderer='svg' data-json='thumbsup.json'></div> -->
        <h2 class='modal--feedback__title'>Thanks for the feedback!</h2>
        <button id='btn-finished' onclick='respondWithFeedBack(feedbackValue)' class='btn btn--lg btn--primary mt-6'>I'm finished</button>
    </article>
</div>
<!-- /End Modal Popup -->
</div>

//Activate lottie for avoidant diagnostic
const feedbackContainer = document.querySelector('.animation--feedback'),
    feedbackSubmittedContainer = document.querySelector('.animation--feedback-submitted');

if (feedbackContainer) {
    const feedbackRenderedValue = feedbackContainer.dataset.renderer,
          feedbackJsonFile = feedbackContainer.dataset.json;

    var feedbackAnimation = bodymovin.loadAnimation({
        container: feedbackContainer,
        renderer: feedbackRenderedValue,
        loop: false,
        autoplay: true,
        path: `/animations/${feedbackJsonFile}`
    })
}

if (feedbackSubmittedContainer) {

    const feedbackSubmittedRenderedValue = feedbackSubmittedContainer.dataset.renderer,
          feedbackSubmittedJsonFile = feedbackSubmittedContainer.dataset.json;

    var feedbackSubmittedAnimation = bodymovin.loadAnimation({
        container: feedbackSubmittedContainer,
        renderer: feedbackSubmittedRenderedValue,
        loop: false,
        autoplay: false,
        path: `/animations/${feedbackSubmittedJsonFile}`
    })
}

// function respondWithFeedBack() {
//     var score = feedbackValue * 20
//     var message = { "dialog_response": "cancel", "FEEDBACK_SCORE": score }
//     window.webkit.messageHandlers.SweeprNativeCallback.postMessage(message)
//     return message
// }

//FEEDBACK RATING
// function respondWithFeedBack() {
//     let feedbackStar = document.querySelectorAll('.feedback--star__label'),
//         feedbackModal = document.querySelector('.modal--feedback'),
//         feedbackValue = 0;

//     // for each star element, respond with value
//     feedbackStar.forEach((feedbackStarItem) => {
//         feedbackStarItem.addEventListener('click', function () {
//             feedbackValue = feedbackStarItem.previousElementSibling.value;
//             //Trigger feedback modal after delay
//             setTimeout(function () {
//                 feedbackModal.classList.add('is--visible');
//             }, 1000);
//             console.log(feedbackValue)
//         })
//     })
//     document.querySelector('#btn-finished').addEventListener('click', function () {
//         var score = feedbackValue * 20
//         var message = { "dialog_response": "cancel", "FEEDBACK_SCORE": score }
//         // console.log("Feedback Value : " + feedbackValue)
//         console.log("Score: " + score)
//     })
//     //window.webkit.messageHandlers.SweeprNativeCallback.postMessage(message)
//     //return message
// }

// respondWithFeedBack()




let feedbackStar = document.querySelectorAll('.feedback--star__label'),
    feedbackModal = document.querySelector('.modal--feedback'),
    feedbackValue = 0;


// for each star element, respond with value
feedbackStar.forEach((feedbackStarItem) => {
    feedbackStarItem.addEventListener('click', function () {
        feedbackValue = feedbackStarItem.previousElementSibling.value;
        //Trigger feedback modal after delay
        setTimeout(function () {
            feedbackModal.classList.add('is--visible');
        }, 1000);
        console.log(feedbackValue)
    })
})

//FEEDBACK RATING
function respondWithFeedBack() {
    var score = feedbackValue * 20
    var message = { "dialog_response": "cancel", "FEEDBACK_SCORE": score }
    // console.log("Feedback Value: " + feedbackValue)
    console.log("Score: " + score)
    window.webkit.messageHandlers.SweeprNativeCallback.postMessage(message)
    return message
}