Exam review question number styling

[tomasflopes]

Let's be honest, the current styling for question numbering in the website is not great. The usage of red and orange colors for the numbering makes it difficult to distinguish between the two, especially in certain brightness settings where the difference becomes barely noticeable. To enhance the user experience and improve the visual appeal of the website, it is necessary to rethink the way this information is displayed.

By reevaluating the styling approach for question numbering, we can find a better solution that ensures clarity and ease of differentiation. It is important to select colors that have a sufficient contrast and are distinguishable across various display settings. This will enhance the overall beauty of the website while also improving the usability and user experience for visitors.

Additionally, it would be beneficial to display the score of the exam on the review page, emphasizing the result of the taken exam. This provides users with immediate visibility of their performance and adds much needed information in the review process.

Hint: When revising the styling for question numbering, ensure that the difference between wrong and correct answers is noticeable at first glance.

[pintohen]

Hey, I had an idea, however you might not find it the most appealing one. As we can see the challenging part of this is that we can't really change some colors since it goes along with the rest of the website, so we are limited to changing the wrong answer one. I could easily find a color that fits almost all your requirements, is distinguishable from right ones, does not confuse with the selected one and is aesthetically appealing, however it doesn't really vibrate mentally the sensation that the question is wrong, contrary to the red color, an alarming one.

So instead of changing the background color, i changed the text color to black, so it contrasts with all of the other options, looks somewhat fine and you can notice it is wrong, visually.

Here it is, let me know what you think, I already read some code and can deliver it quickly.

[Eduardoooxd]

Imo this approach seems like a quick win and I approve it.

But still, we have a major problem with the accessibility of the whole website (in a lot of sections, the contrast between the text and the background color is not enough, for example background color of orange with white on middle), the color in the stats graphs is weird as well imo.

Now that the exam phase is almost ending, the number of users is decreasing, so we have a lot of time to tweak and try different things. So any suggestion is really helpful !

[pintohen]

I will create a branch to commit related to this issue then, if any idea comes meanwhile i can implement it no issue.

Related to the stats graph i will look into that and see what comes to mind.

Anything needed contact me via GitHub/any social on my profile :)

[pintohen]

Also, is this the chart you're talking about?

[Eduardoooxd]

I was talking about the circular graph but the series graph could also have both an UX improvement (better design with other colors) as well the line graph (I think that's the correct name).

Currently, we are using chart-js to create the graphs as show here StatsLineChart, but perhaps in future, we could change to echarts, due to the higher customization with the trade off of being a little more complex.

What do you think @tomasflopes ?

[tomasflopes]

The animations in the documentation examples do indeed look better, and the complexity level doesn't appear to increase significantly. Also, for what I've seen the library doesn't remove any features we already have with Chart.js (such as hiding certain chart components, hover and reveal animation).

Considering this, I believe an almost direct port would be easy to implement and could be highly beneficial for the project.

[Eduardoooxd]

I created an PR to add dark mode to AntiRecurso, and this of course impacts the aesthetic and colors of the graph.

We should also take dark mode in account from now on.