![\"It](\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/It-makes-sense-to-rate-products-on-a-scale-of-1-5.png\")
<\/a>Consider rating a movie with a 5-star scale; It’s too easy to choose 3 stars and sit on the fence instead of choosing sides. Now consider rating with a 4-star scale; Tell me if you liked it! (3-stars). Or if you really liked it (4-stars). Or if you thought it was terrible (single star)! But at least you provide an opinion<\/em> for this completely subjective experience, not just the ratings-equivalent of “no comment”. Tell me yes or no, not maybe. <\/p>\n\n\n\n This isn’t everyone’s opinion, The Dallas News changed to the “standard 4-star scale”<\/a> for restaurant reviews, but they consider 1 star “good” and zero stars bad. I like to consider no stars as “unrated”.<\/p>\n\n\n\n All that 4-star nonsense I just said aside, it’s easy to add stars (or take them away). Just copy\/paste a new checkbox input with the labels, titles, and values updated to reflect the new star ratings’ values. See the image below, where I pasted in another star input, but changed several values to include a “5” instead of the “4’s” I copied . <\/p>\n\n\n\n The stars come from Font Awesome 4.7<\/a>, as referenced in the HTML But what if we use a different character than the star? How about 5-Fighter Jets? So if you want to change your rating icon, just get the Font Awesome Unicode string and replace it in the CSS as shown below. <\/p>\n\n\n\n Remember, I’m referencing an older version of the Font Awesome icons pack in my HTML. You may want to use a newer version, and it may change the availability of icons. To update to a newer version, change the HTML file Actually, after reading the Font Awesome site, I just realized I’m way out of date using version 4.7<\/a>. So I updated the Gist (below) to show the updated HTML file’s head section. <\/p>\n\n\n\n I wrote a PHP file that will test if your form is submitting to server and show you what it is submitting. <\/p>\n\n\n\n It should work on forms with other inputs also, as it has a “for each” function to parse inputs rather than looking for specific input variable names. As such, it is not a server-side validator of any sort, just a visual check to see what your form is putting out there. And it only works with the POST method, not the GET method. But if you know about that, you’ll be able to change it to a “_REQUEST” or “_GET” setup rather quickly.<\/p>\n\n\n\n Download the 3 files, and upload them to the same directory to get them to work correctly (or change the external style sheet and form submit destination in the HTML file if you want to save the files in different directories). <\/p>\n\n\n\n I was thinking about adding a jQuery script to set “0” stars as “default” and then onclick of any other stars (checkbox inputs) in the div, the variable holding the “default 0 stars” value would update to the checked value. But I decided not to spend any more time on this, and then it would have scripting involved instead of being purely CSS3 and HTML5, if that matters. I’m sure someone has a clever way of doing this “default zero stars” scheme that will update to other checked star box values without scripting. I wasn’t able to think of it right away. <\/p>\n\n\n\n I also don’t know if zero stars is an appropriate value for a star ratings system. Shouldn’t it just be that an object is either un<\/span><\/strong><\/em>rated (not<\/strong><\/em> rated zero), or rated at 1-to-more stars? It would be a very harsh ratings system that–by default–gave every object the worst possible rating, right? (is that what’s wrong with Rotten Tomatoes<\/a>?) The way this is set up currently, if no star is clicked (or clicked but then unclicked) no value is submitted, and I think that’s appropriate from a data structure POV. Unless it’s very important that each input submit at least a placeholder character, as is sometimes the case–but that could also be structured on the back end, to have default values that may be overwritten from the front end inputs or not. <\/p>\n\n\n\n I’m asking myself why I didn’t make this out of radio buttons instead of checkboxes, as radio buttons are easy to set up in “there can be only one selection” groups, as is how you want a star rating to be. But there was a reason for it at the time. I made this months ago and didn’t write that reason in notes, so maybe it was a dumb reason. As with most web development pursuits, there are many ways to do things. <\/p>\n\n\n\n Below are a few GitHub Gists that contain a CSS file, an HTML file, and a PHP file that you can upload all to the same directory (folder on your web server) and try out. If the Gist code snippets are not showing up below, try this link: https:\/\/gist.github.com\/bunda3d\/d3c5ee0d119a6e3b2930c96a06ad8001<\/a> <\/p>\n\n\n\n<\/a>You can make it 5-stars or 3-Stars or 10-stars (or 4-Fighter Jets)<\/h4>\n\n\n\n
<\/a>Want to rate 5-Thumbs Ups? Or Hearts? Or Beer Steins? <\/h3>\n\n\n\n
<head><\/code> font import and in the CSS attribute content: \"\\f005\"<\/code> unicode for the Font Awesome star icon. (see Gist below for full code).<\/p>\n\n\n\n<\/a>Changing the Unicode Icon<\/h4>\n\n\n\n
f0fb<\/code> 5-Hearts? f004<\/code> 5-Thumbs Up? f164<\/code> How about… uh, the rejected Pied Piper logo from HBO’s Silicon Valley?! f1a8<\/code> <\/p>\n\n\n\n<\/a><\/a><\/a>…what’s the expiration date on this font?<\/h3>\n\n\n\n
<head><\/code> reference as shown to a newer version of CSS stylesheet link snippet you find on the font awesome website (you may have to create a login and a “kit” to get a CSS stylesheet link, if they still let users import their fonts that way)<\/a>: <\/p>\n\n\n\n<\/a>Test your form input submission by uploading a simple php file<\/h2>\n\n\n\n
<?php\n echo "<h2>Your Input:<\/h2>";\n \n foreach($_POST as $key=>$value){\n echo $key, ' => ', $value, "<br\/>";\n }\n ?><\/pre><\/div>\n\n\n\n<\/a>nuohbruther… More star ratings philosophy?<\/h2>\n\n\n\n
Default Zero Stars? Nope. <\/h3>\n\n\n\n
Zero Stars Default is… Harsh<\/h3>\n\n\n\n
Why not radio buttons instead of checkboxes?<\/h2>\n\n\n\n
<\/a>Well, I’m rambling. <\/h3>\n\n\n\n
But if you’re here, hopefully these files help! <\/h4>\n\n\n\n