<script type="application/javascript">

//this array holds the emoji that are used as the radio button options (in order)

const emojis = [ `😁`, `🙂`, `😐`, `😢`, `😭`]

  

window.addEventListener('DOMContentLoaded',function(){

// All Labels in the Radio Button element

const ratingLabel = document.querySelectorAll('.label.postField')

const radioBtns = document.querySelectorAll(".inputWrapper input[type='radio']")

ratingLabel.forEach((rating,index) =>{

    rating.innerHTML = emojis[index]; // change each label from text to the corresponding emoji

    rating.classList.add('deselected') // changes color for clicked selection

    rating.addEventListener('click',()=>{

    setActiveEmoji(index) // updates opacity of emojis to highlight the one just selected

    })

})

function setActiveEmoji(idx){

  ratingLabel.forEach((choice,index)=>{

    if(index == idx){

      choice.classList.remove('deselected')

    } else {

      choice.classList.add('deselected')

    }

  })

}  

  

})//END OF DOMCONTENTLOADED

</script>

<style type="text/css">

  .wForm .inputWrapper .choices.horizontal{

    display:flex !important; 

    flex-direction:row-reverse !important;

    /* This is required even if placed as horizontal in the Form Builder */

}

  .inputWrapper label{

    font-size:3rem;

    cursor:pointer;

  }

  

  /* This hides the radio buttons by default */

  .inputWrapper input[type="radio"]{

display:none !important;

  }

  

  .inputWrapper input[type="radio"].hide{

    display:inline-flex;

  }

  label.label.postField.deselected{

/*   color:orange !important; */

      opacity: 50%

  }

  .wFormContainer .htmlSection#tfa_4{

    margin:0px;

  }

}

</style>