Test online zaznaczenie poprawnej odpowiedzi i odpowiedzi użytkownika

Witam

W ramach ćwiczeń postanowiłem stworzyć sobie test online i napotkałem problem , którego nie mogę rozwiązać mianowicie gdy użytkownik skończy wypełniać test skrypt sprawdzi jego odpowiedzi i wyświetli wynik i to udało mi się zrobić ale chciałbym jeszcze , żeby zostały zaznaczone odpowiedzi użytkownika i poprawne odpowiedzi i w zależności czy odpowiedz jest dobra czy zła zostanie ona zaznaczona odpowiednim kolorem ( dobra zielony zła czerwony) i nie wiem jak mógłbym to zrobić. Czy ktoś mógłby mi w tym pomóc?. Z góry dziękuję i poniżej zamieszczam kod:

skrypt z pytaniami:

<?php
    require_once('../function.php');

?>


<!doctype html>
<html lang="pl">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>testy</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
  <style>
    body {
      background: #2F3237;
      ;
    }

    header h1 {
      color: #FA6C65;
      padding-top: 50px;
    }

    header span {
      color: #d2d3d6;
    }

    header p {
      color: #8E9198;
      font-weight: normal;
    }

    #zegar1 {
      ont-family: 'Open Sans', sans-serif;
      font-weight: 400;
      font-size: 20px;
      color: #D2D3D6;
      letter-spacing: 0.025em;
      word-wrap: break-word;
      margin-top: 15px;
      margin-bottom: 15px;
      text-align: center;
      line-height: 150%;
      min-height: 30px;
    }

    .pytania {
      color: #D2D3D6;
    }

    .tresc {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 50px;
    }

    .odp {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 20px;
    }

    .math {
      display: inline-block;
      padding: 0px;
      margin: 0px;
      text-align: center;

    }

    input[type=submit] {
      background-color: #FA6C65;
      padding: 5px;
      margin-top: 25px;
      margin-bottom: 25px;
      width: 400px;
      text-align: center;
      font-size: x-large;
      color: white;
      font-weight: bold;
    }
  </style>

</head>

<body>
  <header>
    <div class="container text-center">
      <div class="row">
        <div class="col-12 ">
          <h1>Arkusz Maturalny-<span>Test 34 pytań</span> </h1>
        </div>
      </div>
      <div class="row">
        <div class="col-12 ">
          <p>Sprawdź się w dokładnie takim samym trybie, jaki obowiązuje podczas rzeczywistego egzaminu! Na rozwiązanie
            <br>
            trzydziestu czterech pytań otrzymujesz maksymalnie 170 minut Powodzenia

          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;" data-aos="fade-up">

          <div id="zegar1">Czas jaki pozostał do zakończenia egzaminu → 48 min 22 sek</div>

        </div>
      </div>
  </header>
  <section class="pytania">
    <div class="container">
      <div class="row ">
        <div class="col-6 text-center offset-3">
          <form action="wynik.php" method="post">
            <?php
                $rows = get_pytania();
                
                foreach($rows as $r)
                {
                  echo '<div class = "tresc">'.$r['tresc']. '</div>';
                  if ($r['img'] != NULL) {
                    echo '<div class = "obrazek">'.'<img src="../jpg/'.$r['img'].'">'. '</div>';
                  }
                  echo '<div class="odp">'. '<input type="radio" clase = "odp" name="'.$r['id'].'" value="A">'." A. ".$r['odpA'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="B" required>'." B. ".$r['odpB'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="C">'." C.  ".$r['odpC'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="D">'." D. ".$r['odpD'].'</div>';

                 
                }
            ?>
            
            <div class="row">
              <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;"
                data-aos="fade-up">

                <div id="zegar1">Czas jaki pozostał do zakończenia egzaminu → 48 min 22 sek</div>

              </div>
            </div>
            <div class="row offset-2">
              <input type="submit" value="Koniec testu. Sprawdz odpowiedzi">
            </div>


          </form>
        </div>



      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
</body>

</html>

skrypt , który oblicza wynik:

<?php
    require_once('../function.php');

  //Pobranie odpowiedzi użytkownika
      foreach ($_POST as $p)
      {
        $odpowiedzi[] = $p;
      }

 // PObranie z bazy danych poprawnych odpowiedzi 
  
 $row = get_pytania();

 foreach($row as $r)
 {
  $Poprawne_odp[] = $r['Poprawna']; 
 }

 //Sprawdzenie odpowiedzi i obliczenie wyniku 

 $pkt = 0;

 for ($i=0; $i <count($odpowiedzi) ; $i++) { 
     if ($odpowiedzi[$i] == $Poprawne_odp[$i]) {
         $pkt = $pkt + 1;
     }
 }
 $max_pkt = 25; // Maksymalna ilość punktów do uzyskania
 $procent = ($pkt / $max_pkt) * 100;

?>


<!doctype html>
<html lang="pl"> 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>testy</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
  <style>
    body {
      background: #2F3237;
      ;
    }

    header h1 {
      color: #FA6C65;
      padding-top: 50px;
    }

    header span {
      color: #d2d3d6;
    }

    header p {
      color: #8E9198;
      font-weight: normal;
    }

    #zegar1 {
      ont-family: 'Open Sans', sans-serif;
      font-weight: 400;
      font-size: 20px;
      color: #D2D3D6;
      letter-spacing: 0.025em;
      word-wrap: break-word;
      margin-top: 15px;
      margin-bottom: 15px;
      text-align: center;
      line-height: 150%;
      min-height: 30px;
    }

    .pytania {
      color: #D2D3D6;
    }

    .tresc {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 50px;
    }

    .odp {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 20px;
    }

    .math {
      display: inline-block;
      padding: 0px;
      margin: 0px;
      text-align: center;

    }

    input[type=submit] {
      background-color: #FA6C65;
      padding: 5px;
      margin-top: 25px;
      margin-bottom: 25px;
      width: 400px;
      text-align: center;
      font-size: x-large;
      color: white;
      font-weight: bold;
    }
  </style>

</head>

<body>
  <header>
    <div class="container text-center">
      <div class="row">
        <div class="col-12 ">
          <h1>Arkusz Maturalny-<span>Wynik testu</span> </h1>
        </div>
      </div>
      <div class="row">
        <div class="col-12 ">
          <p>Egzamin maturalny został zakonczony. Przeanalizuj popełnione błędy, sporządzaj notatki oraz popracuj nad rzeczmi , które sprawiają ci jeszcze problemy, to najlepszy sposób przygotowania się do prawdziwego egzaminu. Analiza odpowiedzi to etap ważniejszy nawet od samego rozwiązywania testu.
           

          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;" data-aos="fade-up">

          <div id="zegar1">Egzamin został 
            <?php
                if ($procent < 30) {
                  echo '<span style= "color:red"> Niezaliczony ';
                } else{
                  echo '<span style= "color:green"> Zaliczony ';
                }
                
                echo '<span style= "color:#FA6C65">Uzyskany wynik:  '.$procent. '%   (' .$pkt. '/'.$max_pkt.')</span>';
            ?> 
          </div>
        </div>
      </div>
  </header>
  <section class="pytania">
    <div class="container">
      <div class="row ">
        <div class="col-6 text-center offset-3">
          <form action="testy.php" method="post">
            <?php
                $rows = get_pytania();
                
                foreach($rows as $r)
                {
                  
                  echo '<div class = "tresc">'.$r['tresc']. '</div>';
                  if ($r['img'] != NULL) {
                    echo '<div class = "obrazek">'.'<img src="../jpg/'.$r['img'].'">'. '</div>';
                  }
                  echo '<div class="odp">'. '<input type="radio" clase = "odp" name="'.$r['id'].'" value="A">'." A. ".$r['odpA'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="B">'." B. ".$r['odpB'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="C">'." C.  ".$r['odpC'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="D">'." D. ".$r['odpD'].'</div>';

                 
                }
            
            ?>
            
            <div class="row">
              <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;"
                data-aos="fade-up">

                <div id="zegar1">Czas jaki pozostał do zakończenia egzaminu → 48 min 22 sek</div>

              </div>
            </div>
            <div class="row offset-2">
              <input type="submit" value="Nowy test">
            </div>


          </form>
        </div>



      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
</body>

</html>