diff --git a/app/Http/Controllers/AutograderController.php b/app/Http/Controllers/AutograderController.php
index 4e467cc4d95b046a3e5ec90a36c0b0ab58c534c7..6221b3b9fca390ac8a2af8ce34847252ec972405 100644
--- a/app/Http/Controllers/AutograderController.php
+++ b/app/Http/Controllers/AutograderController.php
@@ -27,15 +27,43 @@ class AutograderController extends Controller
     {
         $answer_keys = DB::table('spreadsheets')->where('id', $id_topic)->get();
         $cells = [];
+        $cells_temp = [];
         $keys = [];
         foreach($answer_keys as $answer_key) {
             $cells[] = 'Sheet1!' . $answer_key->cell;
+            $cells_temp[] = $answer_key->cell;
             $keys[] = $answer_key->value;
         }
 
         $answers = AutograderController::getStudentAnswer($request->id_spreadsheet, $cells);
         
-        AutograderController::grade($keys, $answers);
+        $results = AutograderController::grade($keys, $answers);
+
+        echo '
+        <table class="table">
+            <thead>
+                <tr>
+                <th scope="col">Cell</th>
+                <th scope="col">Kunci</th>
+                <th scope="col">Jawaban</th>
+                <th scope="col">Skor</th>
+                </tr>
+            </thead>
+            <tbody>             
+        ';
+        for ($i=0; $i<count($results); $i++) {
+            echo '<tr>';
+            echo '<th>' . $cells_temp[$i] . '</th>';
+            echo '<td>' . $keys[$i] . '</td>';
+            echo '<td>' . $answers[$i] . '</td>';
+            echo '<td>' . $results[$i]*100 . '/100</td>';
+            echo '</tr>';
+        }
+        echo '
+                </tbody>
+            </table>
+            <a href="/course/ ' . $id_course . '" style="float: right;" class="btn btn-primary" role="button">Kembali ke Kelas</a>
+        ';
     }
 
     /**
@@ -67,9 +95,7 @@ class AutograderController extends Controller
             $results[] = AutograderController::jaccardIndex($key, $answer);
         }
 
-        foreach($results as $result) {
-            echo $result . " <br/> ";
-        }
+        return $results;
     }
 
     /**
diff --git a/public/js/learn.js b/public/js/learn.js
new file mode 100644
index 0000000000000000000000000000000000000000..c710941b621753f923850121541647e7d0988e19
--- /dev/null
+++ b/public/js/learn.js
@@ -0,0 +1,17 @@
+function submit(id_spreadsheet, url) {
+    document.getElementById("submit").disabled = true;
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            document.getElementById("result-detail").innerHTML = this.responseText;
+            var x = document.getElementById("result");
+            if (x.style.display === "none") {
+                x.style.display = "block";
+            }
+        }
+    };
+    xmlhttp.open("POST", url, true);
+    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xmlhttp.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
+    xmlhttp.send("id_spreadsheet=" + id_spreadsheet);
+}
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 407fd88f135dcb4d194e35e9e11243119dd00d37..4d7ae8364dc99a98734821db7ab180e66dafe610 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -12,6 +12,7 @@
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>
     <script src="{{ asset('js/text.js') }}" defer></script>
+    <script src="{{ asset('js/learn.js') }}" defer></script>
     <script src="https://cdn.tiny.cloud/1/yaezxtmh9h1roazzxnkx70is63n62nbov3xskxim3rpnbcoj/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
     <script>tinymce.init({selector:'textarea'});</script>
 
diff --git a/resources/views/learn.blade.php b/resources/views/learn.blade.php
index 26361af8a5c876e653d49400d4f13c624716aa16..856d9afa09f650d3790c5f71e8d4537e31bc6ba6 100644
--- a/resources/views/learn.blade.php
+++ b/resources/views/learn.blade.php
@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="container-fluid">
-    <div class="row">
+    <div class="row justify-content-center">
         <div class="col-lg-4">
             <div class="card">
                 <div class="card-header">Judul</div>
@@ -17,11 +17,13 @@
                 frameBorder="0"
                 src="https://docs.google.com/spreadsheets/d/<?php echo $id_spreadsheet; ?>/edit?usp=drivesdk&rm=embedded">
             </iframe>
-            <form action="<?php echo Request::url(); ?>/submit" name="myform" id="myform" method="post">
-                @csrf
-                <input type="hidden" value="<?php echo $id_spreadsheet; ?>" class="form-control" name="id_spreadsheet" id="id_spreadsheet">
-                <button style="float: right;" type="submit" class="btn btn-success"><b>Submit</b></button>
-            </form>
+            <button id="submit" style="float: right;" type="text" onclick="submit('<?php echo $id_spreadsheet; ?>', '<?php echo Request::url(); ?>/submit')" class="btn btn-success"><b>Submit</b></button>
+        </div>
+        <div  id="result" class="col-lg-10" style="margin-top: 1rem; display:none">
+            <div class="card">
+                <div class="card-header">Hasil</div>
+                <div id="result-detail" class="card-body"></div>
+            </div>
         </div>
     </div>
 </div>