Positive, Neutral, Negative, Feedback System

You may have seen one of these unattended user-feedback panels at Hartsfield-Jackson Airport. Panels like these can be an effective way to get basic feedback without requiring much user-effort. The ubiquitous thumb up or down you see on every social networking site is the same idea, but with no neutral option. If you don't let users express their indifference, you don't know if a person didn't bother to offer feedback or chose not to because their preference wasn't offered.

Were I to use this feedback system, I'm not sure I would echo the user data to the screen, as a user might be influenced by the numbers they see. There's also no way to ensure a user doesn't offer feedback more than once, so the numbers aren't reliable in that way either. If there were a login system, a user_id could be associated with the system and then a user could be kept from skewing the data. Emoji aren't universally cross-cultural, so that might also be a problem.

If you want this script, you need to have access to a file server that can run php scripts and you would need to use the .php extension for the file using this code.

<?php
// File to store the count of thumbs up and thumbs down
$filename = 'emotivotes.txt';

// Check if the file exists, if not create it with initial values
if (!file_exists($filename)) {
    file_put_contents($filename, json_encode(['up' => 0, 'down' => 0, 'flat' => 0]));
}

// Read the current counts
$votes = json_decode(file_get_contents($filename), true);

// Check if a vote has been submitted
if (isset($_POST['vote'])) {
    if ($_POST['vote'] === 'up') {
        $votes['up']++;
    } elseif ($_POST['vote'] === 'down') {
        $votes['down']++;
    } elseif ($_POST['vote'] === 'flat') {
        $votes['flat']++;
    }
    // Save the updated counts
    file_put_contents($filename, json_encode($votes));
}

// HTML and PHP to display the voting buttons and current counts
?>

If you want the 3d on hover effect, us the following style:

<style>
button {border:0;background-color:#ffffff;}
button:hover {border:0;background-color:;box-shadow: 0px 8px 16px 0px  #bbbbbb;}
</style>