Customer Satisfaction Score with Oracle APEX

This material should be implemented as a region Plugin but not enough time and overall, it’s quite easy to adapt it manually.
Approach used is to generate button from a pl/sql code and implement the needed JS code.

Another approach using regular APEX buttons with Dynamic Actions did’nt give acceptable result.
Color scheme is picked from Redwood Light look and feel.

Code

Create a region PL/SQL dynamic content

Add a page Item Pnn_RATE

Add the Following code intro the PL/SQL code property and change :P6_RATE by your item page name and choose between three or five emoticons (l_nb number :=5)

DECLARE
    l_css apex_t_varchar2;
    tout varchar2(32000) := '';
    l_emoji apex_t_varchar2;
    l_size varchar2(100) := ' fa-2x fa-lg ';
    l_gap varchar2(100) := '' ;     -- gap between two icons
    l_js varchar2(32000);
    l_rate varchar2(2);     -- rate value
    l_nb    number :=5;     -- number of emoji (3 or 5)


BEGIN
    l_rate := :P6_RATE;
    htp.p('
        <STYLE>
            .btn {
                padding: 0;
                border: none;
                background: none;
                font-size: 10px;
                cursor: pointer;
            }
            .btn1 {
                background: radial-gradient(#d63b25 50%, transparent 50%);
            }
            .btn2 {
                background: radial-gradient(#ac630c 50%, transparent 50%);
            }
            .btn3{
                background: radial-gradient(#d8d0b5 50%, transparent 50%);
            }
            .btn4{
                background: radial-gradient(#c2d4d4 50%, transparent 50%);
            }
            .btn5{
                background: radial-gradient(#bdd9ae 50%, transparent 50%);
            }
            
            .btnsel {
                padding: 0;
                border: none;
                color: white;
                //background: none;
                background-color: silver; //#bac9ba;
                font-size: 10px;
                cursor: pointer;
            }

        /* Darker background on mouse-over */
        
        .btn:hover {
            background-color: silver;
        }
    </STYLE>  
    ');
    if l_nb = 5 then
        l_emoji := apex_t_varchar2('fa-emoji-frown','fa-emoji-slight-frown','fa-emoji-neutral','fa-emoji-slight-smile','fa-emoji-sweet-smile');
        l_css := apex_t_varchar2('btn btn1','btn btn2','btn btn3', 'btn btn4', 'btn btn5');
    elsif l_nb = 3 then
        l_emoji := apex_t_varchar2('fa-emoji-slight-frown','fa-emoji-neutral','fa-emoji-slight-smile');
        l_css := apex_t_varchar2('btn btn1','btn btn3','btn btn5');
    end if;
    
    -- Displaying the icons
    
    tout := '<div>';
    if l_rate in (1,2,3,4,5) then
        l_css(l_rate) := l_css(l_rate)|| ' btnsel';
    end if;
    for i in 1..l_nb loop
        
        tout := tout ||
        '<button type="button" id = "pb' ||i || '" class="'||l_css(i) ||'" ><i class="fa '||l_emoji(i) || l_size ||'" ></i></button>'|| l_gap
        ;
    end loop;
    tout := tout || '</div>';
    htp.p(tout);        -- renders html markup

    -- Builds JS code

    l_js := '
    <script type="text/javascript">
        function clearcss () {
            for (i=1;i<=5;i++) {
            document.getElementById("pb" + i).classList.remove("btnsel");
            }
        }
        function setRate(pnro) {
            apex.item( "P6_RATE" ).setValue( pnro, null, true );
            clearcss();
            document.getElementById("pb" + pnro).classList.add("btnsel");
        }';
    -- adding Listeners
    for i in 1..l_nb loop
        l_js := l_js || '
        pb'||i||'.onclick = function() {
            setRate("'||i||'"); 
        }            
        ';
    end loop;
    l_js := l_js || '</script>';
    htp.p(l_js);

END;