Responsive interactive rating component

ok, if I can help you:

-the circle elements, their right backgroung-color is:#262f38, not darkgrey.

-the easiest way to do the select of the note (at least was the way I did) is: first: to have a class .selected with the format to selected. second:when the user clicks in a note you remove this class from all the 5 note buttons third: right after add this, add the class .selected to the button that was clicked.

This may correct your problem with having multiple notes selected at the same time

-you box sizing is bigger also, is not fitting the mobile.

-I noticed that the second page doesn't show off. If You are beginner in Javascript, the usual approach is to create the two boxes (the one to evaluate and the one with the evaluation done), and hide the second one until the rating is done in the first. So in the first screen the second is already there but with display:none; and after the note is submitted, the first box receives display:none, and the second receives display: block. disappearing with the first and showing up the second.

Hope have helped. :)

Did you upload 2 pages? The results page doesn't show up or doesn't work. Either way, I suggest you practice working it as a single component so that it doesn't need to go to another page.

Right now, I can select several numbers at the same time. I suggest tracking the currently selected button so you can inactivate it before activating the clicked one.

Regarding the design, I suggest increasing button size and lessening the button spacing.

All in all a good try! Make the appropriate changes and it'll be great!