A client has requested the ability to rate their projects in half star increments, not just full stars (i.e. give 3 and a half stars out of 5).
The "whole star" rating works fine "out of the box" for the view box, but I am having a heck of a time trying to figure out how to all the user to rate in half star increments.
Here is the code in the view box for whole stars:
Any assistance would be greatly appreciated.
The "whole star" rating works fine "out of the box" for the view box, but I am having a heck of a time trying to figure out how to all the user to rate in half star increments.
Here is the code in the view box for whole stars:
<div>
<div class="star {*if [temp].value >=1}selected{*endif} " style="display:inline-block;" a5-item="starclick" a5-value=1>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=2}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=2>
<svg width="30" height="30" viewBox="0 0 15 15"><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=3}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=3>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=4}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=4>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=5}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=5>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
</div>
<div class="star {*if [temp].value >=1}selected{*endif} " style="display:inline-block;" a5-item="starclick" a5-value=1>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=2}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=2>
<svg width="30" height="30" viewBox="0 0 15 15"><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=3}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=3>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=4}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=4>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
<div class="star {*if [temp].value >=5}selected{*endif}" style="display:inline-block;" a5-item="starclick" a5-value=5>
<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z" /></svg>
</div>
</div>
Comment