star rating widget

html

<div  id='rating1'></div>
<div  id="dp1"><SpotfireControl id="3611e2f370ae4c2ab6786da2afd8c5e0" />
</div>

js

//script parameters
dp="dp1"

id="rating1"

options="1,2,3,4,5"

icon="★"

let inputs=[]

options.split(",").reverse().forEach((el,i)=>{

let anInput = `

    <input type="radio" name="rate_${options.split(",").join("")}" id="star${i}" value="${el}" />

<label for="star${i}" title="${el} rating">${el} rating</label>

`

inputs.push(anInput)

})

document.getElementById(id).innerHTML  = `

  <div class="rate_${id}">

${inputs.join("")}

  </div> 

  <span style="clear:both"> </span>

  

  <style>  

.rate_${id} {

float: left;

height: 50px;

padding: 0 0 0 54px;

}

.rate_${id}:not(:checked) > input {

position:absolute;

top:-9999px;

}

.rate_${id}:not(:checked) > label {

float:right;

width:1em;

overflow:hidden;

white-space:nowrap;

cursor:pointer;

font-size:30px; 

color:#ccc;

}

.rate_${id}:not(:checked) > label:before {

content: '${icon}';

padding:8px;

}

.rate_${id} > input:checked ~ label {

color: #ffc700;    

}

.rate_${id}:not(:checked) > label:hover,

.rate_${id}:not(:checked) > label:hover ~ label {

color: #deb217;  

}

.rate_${id} > input:checked + label:hover,

.rate_${id} > input:checked + label:hover ~ label,

.rate_${id} > input:checked ~ label:hover,

.rate_${id} > input:checked ~ label:hover ~ label,

.rate_${id} > label:hover ~ input:checked ~ label {

color: #c59b08;

}

  </style>`;

document.querySelectorAll(`.rate_${id} input`).forEach(e => {

e.addEventListener('click',(ev) => {

sfInput = document.querySelector("#"+dp+" input")

sfInput.value=ev.srcElement.value

sfInput.focus()

sfInput.blur()

});

})