Many websites let users rate items by selecting some number of stars. On the web, this is usually implemented with a small Javascript program that runs in the browser. In any state, a sequence of stars is displayed, with a (possibly empty) prefix in a distinct color, representing the current selection. The user can extend and contract the prefix simply by hovering over the displayed stars. When the user clicks on a star, the current selection is submitted, and the browser issues an HTTP POST request to the server. The selection may start showing no stars (that is, the empty prefix), or it may already show one star or more. To allow the user to reset to no stars, a click on the final star in the previous submission is treated as a reset. Model this mechanism as a transition system. You should start by designating events; you may need to refine your designations as you think more carefully about the problem. You should include, in addition to the user inputs, the outputs needed both to update the display and to send the final value to the server.
Many websites let users rate items by selecting some number of stars. On the
web, this is usually implemented with a small Javascript program that runs in the
browser. In any state, a sequence of stars is displayed, with a (possibly empty) prefix in a
distinct color, representing the current selection. The user can extend and contract the
prefix simply by hovering over the displayed stars. When the user clicks on a star, the
current selection is submitted, and the browser issues an HTTP POST request to the
server. The selection may start showing no stars (that is, the empty prefix), or it may
already show one star or more. To allow the user to reset to no stars, a click on the final
star in the previous submission is treated as a reset.
Model this
may need to refine your designations as you think more carefully about the problem. You
should include, in addition to the user inputs, the outputs needed both to update the
display and to send the final value to the server.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 6 images
