How to concisely represent a set of statistics on a dashboard?

I'm designing a dashboard for a web app representing statistics related to a quiz/test. I'm using visual aids like charts, icons and other cards displaying a small piece of information. Each such card contains the statistic and an icon with a color. I've ended up with a bunch of cards taking up more than half of the page:

enter image description here

This is how it would look on a wider screen: enter image description here

As it can be seen in the image, there are eight cards each representing data about the quiz. That is too many for a dashboard. These cards take all the spotlight. The charts are all below the cards and not even fully visible when a user first navigates to this page.

One of the charts I have is a donut chart representing the pass rate and the other is a column chart representing questions' difficulty distribution(number of beginner, intermediate and expert level questions).

Is there a better way to represent this information instead of a set of cards with icons? Or can any subset of this information be a good candidate for a chart? This is most of the information I have:

  • start time, end time and duration of the test
  • average time taken to submit
  • total score, average score, the maximum and minimum score.
  • the number of questions and the passing score(not displayed in the image, or it would've made 10 cards!)
  • the number of candidates and their scores

Below the visual aids at the end of the page, there would go a table containing candidate details and their scores. I do not mind if some of the information is not displayed/ignored. I'm looking for a better representation of the info I have to be displayed on the dashboard.

I'm using HTML and CSS with Bootstrap 4.6 and its standard color scheme with some custom CSS for gradients, Font Awesome for the icons and Chart.js to create charts.

Tags: , , , , , ,