16-4 產生考試結果

一、修改控制器

1. 考試結果理論上應該要看起來和考試當下的畫面差不多，唯一的差別是多了分數，並且顯示每題的作答及正確答案。
2. 路由的test.show是用控制器TestController@show來產生，故開啟/專案/app/Http/Controllers/TestController.php，修改 show 的方法

       public function show(Test $test)
       {
           $topics  = json_decode($test->content, true);
           $content = [];
           $i       = 1;
           foreach ($topics as $topic_id => $ans) {
               $content[$i]['topic'] = Topic::find($topic_id);
               $content[$i]['ans']   = $ans;
               $i++;
   
           }
           return view('exam.test', compact('test', 'content'));
       }

3. 首先，此處一樣用路由模型綁定，$test即為Test的資料物件，由於有設定關聯，所以，會一併抓出$test->exam及$test->user的資料。

4. 由於我們用的是比較簡易的作法，把考試者的填答做成json格式存入content中，故讀出時，可以利用json_decode($id->content, true)將json資料轉回陣列。

5. 接著把陣列一個一個讀出，其陣列索引為題目編號$topic_id，值為使用者填寫的答案，因此每跑一圈，我們就可以利用Topic::find($topic_id)來抓取該題目的資訊，並將題目資訊存到$content陣列中。

6. $content的索引一樣從0開始，以方便等一下製作題號。

7. 此外，我們也順便把使用者的作答一併存入$content陣列中，以便待會比對是否作答正確。

二、修改樣板

1. 由於控制器show的最後會呼叫exam.test樣板，因此，我們建立一個/專案/resources/views/exam/test.blade.php樣板：

   @extends('layouts.app')
   @section('content')
       <h1 class="text-center">{{$test->exam->title}}</h1>
       <h3 class="row">
           <div class="col-sm-6">時間：<u>{{$test->created_at->format("Y年m月d日 H:i:s")}}</u></div>
           <div class="col-sm-6 text-right">姓名：<u>{{$test->user->name}}</u> 得分：<u>{{$test->score}}</u></div>   
       </h3>
       <hr>
   
       <dl>
           @forelse ($content as $key => $data)
               <dt>
                   <h3>            
                       @if($data['ans']==$data['topic']->ans)
                           <img src="{{asset('yes.png')}}" alt="yes" title="正確答案為 {{$data['topic']->ans}}">
                       @else
                           <img src="{{asset('no.png')}}" alt="no" title="正確答案為 {{$data['topic']->ans}}">
                       @endif
                       {{ bs()->badge()->text($key+1) }}
                       （{{$data['ans']}}）
                       {{$data['topic']->topic}}
                   </h3>
               </dt>
               
               <dd>
                   <div class="ml-5 my-2 opt">
                       &#10102; {{$data['topic']->opt1}}
                   </div>
                   <div class="ml-5 my-2 opt">
                       &#10103; {{$data['topic']->opt2}}
                   </div>
                   <div class="ml-5 my-2 opt">
                       &#10104; {{$data['topic']->opt3}}
                   </div>
                   <div class="ml-5 my-2 opt">
                       &#10105; {{$data['topic']->opt4}}
                   </div>
               </dd>
           @empty
               <div class="alert alert-danger">尚無任何題目</div>
           @endforelse
       </dl>
   
   @endsection
   

2. 其中會用到以下兩個圖檔，故請下載之，並存到public底下：

3. 要使用public下的資源，可以直接用asset('檔案名稱')來取用之即可。