GHL 5 star feedback snippet

feedback.html

<style>
    .star-rating {
        display: flex;
        flex-direction: row-reverse;
        gap: 15px;
        cursor: pointer;
        justify-content: center;
        margin: 20px 0;
    }

    .star {
        width: 120px;
        height: 120px;
        fill: #ccc;
        transition: fill 0.2s;
    }

    /* Hover Effect */
    .star-rating:hover .star {
        fill: #ccc;
    }
    
    .star:hover,
    .star:hover ~ .star {
        fill: gold !important;
    }

    /* Selected Stars */
    .star.selected {
        fill: gold;
    }
</style>

<!-- Star Rating Container -->
<div class="star-rating">
    <svg class="star" data-value="5" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
    </svg>
    <svg class="star" data-value="4" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
    </svg>
    <svg class="star" data-value="3" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
    </svg>
    <svg class="star" data-value="2" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
    </svg>
    <svg class="star" data-value="1" viewBox="0 0 24 24">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
    </svg>
</div>

<script>
    const stars = document.querySelectorAll('.star');
    
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const value = this.getAttribute('data-value');
            
            // Uncheck all radio inputs first
            const allRadios = document.querySelectorAll('input[data-q="customer_rating"]');
            allRadios.forEach(radio => radio.checked = false);
            
            // Find and update the radio input
            const radioInput = document.querySelector(`input[data-q="customer_rating"][value="${value}"]`);
            if (radioInput) {
                radioInput.checked = true;
                // Trigger change event
                const event = new Event('change', { bubbles: true });
                const inputEvent = new Event('input', { bubbles: true });
                radioInput.dispatchEvent(event);
            }

            // Reset all stars
            stars.forEach(s => s.classList.remove('selected'));

            // Select this star and all before it
            const selectedValue = parseInt(value);
            stars.forEach(s => {
                if (parseInt(s.getAttribute('data-value')) <= selectedValue) {
                    s.classList.add('selected');
                }
            });
        });
    });
</script>