Tag: rating

Emoji ratings feedback – Javascript

Posted on by adnanafzal565

Learn how to get feedback from your website users using emoji ratings. We will be using plain Javascript. No external library has been used in this tutorial.

Below is a list of all possible emojis at the time of writing this. You can found any new emoji missing, please do inform us in the comments section below.

SmileyHTML code
😀😀
😁😁
😂😂
😃😃
😄😄
😅😅
😆😆
😇😇
😈😈
😉😉
😊😊
😋😋
😌😌
😍😍
😎😎
😏😏
😐😐
😑😑
😒😒
😓😓
😔😔
😕😕
😖😖
😗😗
😘😘
😙😙
😚😚
😛😛
😜😜
😝😝
😞😞
😟😟
😠😠
😡😡
😢😢
😣😣
😤😤
😥😥
😦😦
😧😧
😨😨
😩😩
😪😪
😫😫
😬😬
😭😭
😮😮
😯😯
😰😰
😱😱
😲😲
😳😳
😴😴
😵😵
😶😶
😷😷
🙁🙁
🙂🙂
🙃🙃
🙄🙄
🤐🤐
🤑🤑
🤒🤒
🤓🤓
🤔🤔
🤕🤕
🤠🤠
🤡🤡
🤢🤢
🤣🤣
🤤🤤
🤥🤥
🤧🤧
🤨🤨
🤩🤩
🤪🤪
🤫🤫
🤬🤬
🤭🤭
🤮🤮
🤯🤯
🧐🧐

Create input slider range

Create a div to display default emoji ratings, for example if you want the default feedback about communication to be “satisfied” then display the following emoji:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="emoji-container">
 
<h3>Communication</h3>
 
<div class="emoji">
    🙂
</div>
 
<p class="emoji-text">Satisfied</p>
 
<input type="range" name="status[communication]" min="0" max="4" step="1">
</div>

To view the emoji in large size, simply change the font size of emoji class. If you want to show the horizontal arrows for input type range, just change the cursor CSS property.

1
2
3
4
5
6
7
8
<style>
    .emoji {
        font-size: 60px;
    }
    input[type="range"] {
        cursor: ew-resize;
    }
</style>

Change emoji ratings with slider

Now create an array to store all type of emojis you want to display with your slider, and the meaning of each emoji in array of objects. Then we need to loop through all input type ranges and attach onmousemove listener to each slider.

Whenever the value of slider changes, we will get the emoji object using value of slider, and display it in emoji-container. This will replace emoji and its meaning text to whatever the value of current slider is.

If you are using only one slider in your document, you can use simply document.querySelector(“.emoji-container”) to get the container div of that emoji.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var emojis = [
        { emoji: "&#x1F621", text: "Hate it"},
        { emoji: "&#x1F613", text: "Difficult to understand"},
        { emoji: "&#x1F642", text: "Satisfied"},
        { emoji: "&#x1F600", text: "Very happy"},
        { emoji: "&#x1F618", text: "Loved it"}
    ];
 
    var range = document.querySelectorAll("input[type='range']");
    for (var a = 0; a < range.length; a++) {
        range[a].onmousemove = function (event) {
            var index = this.value;
            var emojiContainer = this.closest(".emoji-container");
 
            emojiContainer.querySelector(".emoji").innerHTML = emojis[index].emoji;
            emojiContainer.querySelector(".emoji-text").innerHTML = emojis[index].text;
        };
    }
</script>

To save these feedback in database, enclose all your emoji-container divs in form tag and specify method as POST, and action to the file which will process this form data. If you sending input type file too, you also need to add an attribute enctype=”multipart/form-data” to form tag.

1
2
3
4
<form method="POST" action="save-feedback.php">
    <!-- All above emoji containers here -->
    <input type="submit">
</form>

Save data in database

We have created a simple database named tutorials and a table named feedback. It just has three columns, communication, service and support. The data type of these columns will be INTEGER as in database we just be saving ratings on a scale of 1 to 5. First parameter in $_POST array will be name of input type range, and second will be the associative index we have set. Here we are receiving 3 types of feedback from user. The insert query is pretty basic.

save-feedback.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
$conn = mysqli_connect("localhost", "root", "", "tutorials");
 
$communication = $_POST["status"]["communication"];
$service = $_POST["status"]["service"];
$support = $_POST["status"]["support"];
 
$sql = "INSERT INTO feedback(communication, service, support) VALUES('$communication', '$service', '$support')";
mysqli_query($conn, $sql);
 
echo "Done";
 
?>

Change the emoji using slider and hit the submit button. You will see a new row will be inserted in database with integer value in respective columns. These integer values will tell the user feedback on a scale of 1 to 5.

Display on admin side

Now you might have an admin panel where you want to see the ratings given by user. So we will call a simple AJAX request to fetch those feedbacks from database. Our emojis array will remain same, and we can display the respective emoji based on database column value. First create an API page that will return all feedbacks in JSON format.

get-feedback.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
$conn = mysqli_connect("localhost", "root", "", "tutorials");
 
$sql = "SELECT * FROM feedback";
$result = mysqli_query($conn, $sql);
 
$data = array();
while ($row = mysqli_fetch_object($result))
{
    array_push($data, $row);
}
echo json_encode($data);
 
?>

Now back in index.php, we will send a simple AJAX request which will return all feedbacks in JSON string. We will parse that JSON into javascript arrays and objects. Create a div where all emojis needs to be displayed and display them using simple for loop.

1
<div id="feedback"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ajax = new XMLHttpRequest();
ajax.open("GET", "get-feedback.php", true);
ajax.send();
 
ajax.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        var html = "";
 
        for (var a = 0; a < data.length; a++) {
            var communicationIndex = data[a].communication;
            var communication = emojis[communicationIndex];
 
            var serviceIndex = data[a].service;
            var service = emojis[serviceIndex];
 
            var supportIndex = data[a].support;
            var support = emojis[supportIndex];
                 
            html += "<p>Communication: <span class='emoji'>" + communication.emoji + "</span>" + communication.text + "";
 
            html += "<p>Service: <span class='emoji'>" + service.emoji + "</span>" + service.text + "</p>";
 
            html += "<p>Support: <span class='emoji'>" + support.emoji + "</span>" + support.text + "</p>";
        }
 
        document.getElementById("feedback").innerHTML = html;
    }
};

Run this script on your admin panel and you will be able to view the user added feedback in emoji ratings and their meaning.

Learn how to calculate average ratings from here.

[wpdm_package id=’216′]

jQuery ratings plugin with database & average calculation

Posted on by adnanafzal565

There is a jQuery ratings plugin called “Starrr”. It allows you to get feedback input from the user by displaying him stars. Lower stars means they didn’t liked your product or service. And higher stars means they liked your product or services.

Let’s get started

First you need to download and integrate a small and lightweight Javascript library in your project. The name of library is Starrr and you can download it from here. You may get the downloaded file in ZIP format so unzip it (of course). In the unzipped folder, you will find a folder named “dist”. You will find 2 files, one is CSS and second will be of JS. You need to copy both these files and place them in your project folder. To setup the star ratings in your website, you need to include 3 CSS files and 2 JS files.

CSS

  1. Bootstrap
  2. Font Awesome
  3. Starrr

JS

  1. jQuery
  2. Starrr

So paste the following code at the top of file where you want to show ratings. We have used the CDN for Bootstrap, Font Awesome and jQuery for direct integration. But you can download them in your project and give relative path if you want. If you are already working on some project, then most probably you already have those CSS & JS files. Because they are used mostly in design part.

1
2
3
4
5
6
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="starrr.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="starrr.js"></script>

Database integration

You might already have a database with all the data and you just want to integrate this star ratings in it. So you might have an E-commerce site where you want to give ratings to products, or may have an online Job Portal where you want to give ratings to Clients or Freelancers etc. So for the sake of simplicity we are are creating simple products with just 2 fields, you might have a lot of other fields too but it will give you enough idea how to implement in your project. Create a new database in your phpMyAdmin named tutorials and run the following queries to create 1 table named products and other ratings where all ratings of each product will be stored:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
--
-- Database: `tutorials`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `products`
--
 
CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` text NOT NULL
);
 
--
-- Dumping data for table `products`
--
 
INSERT INTO `products` (`id`, `name`) VALUES
(1, 'Macintosh'),
(2, 'iMac'),
(3, 'iPod'),
(4, 'Apple II');
 
-- --------------------------------------------------------
 
--
-- Table structure for table `ratings`
--
 
CREATE TABLE `ratings` (
  `id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `ratings` int(11) NOT NULL
);

Display all products

Now you need to display all products stored in your database. We are just displaying product name but surely you will be displaying other details too. Along with each product we will create a form to get product ID and show 5 stars from where user can give ratings and a submit button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
    // Connecting with database
    $conn = mysqli_connect("localhost", "root", "", "tutorials");
 
    // Getting all products
    $result = mysqli_query($conn, "SELECT * FROM products");
 
    // Displaying each product
    while ($row = mysqli_fetch_object($result)) {
?>
 
    <p>
        <?php
            echo $row->name;
        ?>
    </p>
 
    <form method="POST" onsubmit="return saveRatings(this);">
        <input type="hidden" name="product_id" value="<?php echo $row->id; ?>">
 
        <div class="starrr"></div>
 
        <input type="submit">
    </form>
 
<?php
    }
?>
 
<script>
    $(function () {
        $(".starrr").starrr();
    });
</script>

Run the project now and you will be able to see all products stored in your database along with 5 stars to give ratings. Now you need to save ratings in ratings table when user click on submit button.

Save ratings

Our form creates a hidden input field where it is storing product ID, so now we first need to get the ratings and save those ratings in that particular product. This jQuery ratings plugin will return the value as an integer. You need to change the starrr() function to attach an change event that will be fired when user change his ratings and we will save that in a variable. Then we will attach an submit event in form and call an AJAX request and send the product ID and rating of user.

Creates a new file named save-ratings.php that will store the ratings in database. You can also store user ID if you have login & registration system in your website, by getting the user ID from session or from cookies. So make the following changes in your above code and it will be able to save ratings in database:

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var ratings = 0;
$(function () {
    $(".starrr").starrr().on("starrr:change", function (event, value) {
        ratings = value;
    });
});
 
function saveRatings(form) {
    var product_id = form.product_id.value;
 
    $.ajax({
        url: "save-ratings.php",
        method: "POST",
        data: {
            "product_id": product_id,
            "ratings": ratings
        },
        success: function (response) {
            // whatever server echo, that will be displayed here in alert
            alert(response);
        }
    });
 
    return false;
}

save-ratings.php

1
2
3
4
5
6
7
8
9
10
11
<?php
 
$product_id = $_POST["product_id"];
$ratings = $_POST["ratings"];
 
$conn = mysqli_connect("localhost", "root", "", "tutorials");
 
mysqli_query($conn, "INSERT INTO ratings (product_id, ratings) VALUES ('$product_id', '$ratings')");
 
// whatever you echo here, will be displayed in alert on user side
echo "Saved";

Go ahead and give ratings to some products and check your ratings table in your database, you will see your ratings along with product ID. This is where you can store user ID too from session or cookies if you are using login or sign up features.

Display average rating

We are already creating a loop to display all products, this is where we will get all ratings of each product and calculate it’s average and display as stars. jQuery “starrr” ratings plugin also allows you to initialize the stars widget with an integer valule. So go ahead and paste the following code in your product’s while loop block:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
while ($row = mysqli_fetch_object($result)) {
 
    // Getting ratings of current product using ID
    $result_ratings = mysqli_query($conn, "SELECT * FROM ratings WHERE product_id = '" . $row->id . "'");
 
    // Adding total ratings from each user
    $ratings = 0;
    while ($row_ratings = mysqli_fetch_object($result_ratings))
    {
        $ratings += $row_ratings->ratings;
    }
 
    // Calculating average from all ratings
    $average_ratings = 0;
    $ratings_count = mysqli_num_rows($result_ratings);
    if ($ratings_count > 0)
    {
        $average_ratings = $ratings / $ratings_count;
    }
?>
 
    <!-- This is where product stars will be displayed -->
    <!-- data-rating attribute will be used in Javascript below -->
    <div class="ratings" data-rating="<?php echo $average_ratings; ?>"></div>
 
    <!-- Product name and other fields -->
 
    <!-- Form goes here -->
 
<?php
    }
?>
     
<script>
    // Getting all div with ratings class
    var rating = document.getElementsByClassName("ratings");
 
    // Loop through all divs
    for (var a = 0; a < rating.length; a++)
    {
 
        // Display star on each div based on data-rating attribute value
        // readOnly will prevent the user changing it's value
        $(rating[a]).starrr({
            readOnly: true,
            rating: rating[a].getAttribute("data-rating")
        });
    }
<script>

That’s it, you have successfully added a star rating widget in your website. Everyone will be using this according to his project requirements and everyone will have different scenarios based on his needs. So if you have any problem, feel free to ask in the comments section below.

Another jQuery ratings plugin

You can also get the feedback from your users by displaying them emojis. User can select an emoji to describe his experience with your product or service. You can learn how to integrate that in your website from here.