Online Quiz Platform in laravel | Online exam system | Online quiz system in laravel | part- 5
Online quiz system
Controller
Frontend/ExamController.php
<?php
namespace App\Http\Controllers\Frontend;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Model\Quizes;
use App\Model\Questions;
use App\Model\Exams;
use App\Model\Results;
use Sentinel;
class ExamController extends Controller
{
public function __construct()
{
return $this->middleware('member');
}
public function quizList()
{
$quizes=Quizes::orderBy('id','desc')->get();
return view('frontend.exam.quiz_list',compact('quizes'));
}
public function exam($id)
{
$quiz=Quizes::find($id);
$questions=Questions::inRandomOrder()->limit($quiz->number_of_question)->where('quizes_id',$id)->get();
return view('frontend.exam.exam',compact('questions','quiz'));
}
public function examPost(Request $request)
{
$userId=Sentinel::getUser()->id;
$date=date('Y-m-d');
$yes=0;
$no=0;
$data=$request->all();
$result=array();
for($i=1; $i<=$request->index;$i++){
if(isset($data['questions_id'.$i])){
if($exam=Exams::where('user_id',$userId)->where('questions_id',$data['questions_id'.$i])->first()){
}else{
$exam=new Exams;
}
$question=Questions::where('id',$data['questions_id'.$i])->get()->first();
if($question->answer==$data['ans'.$i])
{
$result[$data['questions_id'.$i]]='Yes';
$exam->is_ans="yes";
$yes++;
}else{
$result[$data['questions_id'.$i]]='No';
$exam->is_ans="No";
$no++;
}
$exam->user_id= $userId;
$exam->quizes_id= $question->quizes_id;
$exam->questions_id=$data['questions_id'.$i];
$exam->ans=$data['ans'.$i];
$exam->save();
}
}
if($res=Results::where('user_id',$userId)->where('quizes_id',$request->quizes_id)->first()){
}else{
$res=new Results;
}
$res->user_id= $userId;
$res->quizes_id= $request->quizes_id;
$res->date= $date;
$res->yes_ans=$yes;
$res->no_ans=$no;
$res->result_json=json_encode($result);
$res->save();
return redirect('/MyExamResult')->with('success','Thaks For Join This Exam');
}
public function examResult()
{
$userId=Sentinel::getUser()->id;
$results=Results::orderBy('id','desc')->where('user_id',$userId)->paginate(10);
return view('frontend.exam.result',compact('results'));
}
public function ResultDetails($id)
{
$userId=Sentinel::getUser()->id;
$exams=Exams::where('user_id', $userId)->where('quizes_id',$id)->get();
$quiz=Quizes::find($id);
$questions=Questions::where('quizes_id',$id)->get();
return view('frontend.exam.resultDetails',compact('exams','quiz','questions'));
}
}
namespace App\Http\Controllers\Frontend;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Model\Quizes;
use App\Model\Questions;
use App\Model\Exams;
use App\Model\Results;
use Sentinel;
class ExamController extends Controller
{
public function __construct()
{
return $this->middleware('member');
}
public function quizList()
{
$quizes=Quizes::orderBy('id','desc')->get();
return view('frontend.exam.quiz_list',compact('quizes'));
}
public function exam($id)
{
$quiz=Quizes::find($id);
$questions=Questions::inRandomOrder()->limit($quiz->number_of_question)->where('quizes_id',$id)->get();
return view('frontend.exam.exam',compact('questions','quiz'));
}
public function examPost(Request $request)
{
$userId=Sentinel::getUser()->id;
$date=date('Y-m-d');
$yes=0;
$no=0;
$data=$request->all();
$result=array();
for($i=1; $i<=$request->index;$i++){
if(isset($data['questions_id'.$i])){
if($exam=Exams::where('user_id',$userId)->where('questions_id',$data['questions_id'.$i])->first()){
}else{
$exam=new Exams;
}
$question=Questions::where('id',$data['questions_id'.$i])->get()->first();
if($question->answer==$data['ans'.$i])
{
$result[$data['questions_id'.$i]]='Yes';
$exam->is_ans="yes";
$yes++;
}else{
$result[$data['questions_id'.$i]]='No';
$exam->is_ans="No";
$no++;
}
$exam->user_id= $userId;
$exam->quizes_id= $question->quizes_id;
$exam->questions_id=$data['questions_id'.$i];
$exam->ans=$data['ans'.$i];
$exam->save();
}
}
if($res=Results::where('user_id',$userId)->where('quizes_id',$request->quizes_id)->first()){
}else{
$res=new Results;
}
$res->user_id= $userId;
$res->quizes_id= $request->quizes_id;
$res->date= $date;
$res->yes_ans=$yes;
$res->no_ans=$no;
$res->result_json=json_encode($result);
$res->save();
return redirect('/MyExamResult')->with('success','Thaks For Join This Exam');
}
public function examResult()
{
$userId=Sentinel::getUser()->id;
$results=Results::orderBy('id','desc')->where('user_id',$userId)->paginate(10);
return view('frontend.exam.result',compact('results'));
}
public function ResultDetails($id)
{
$userId=Sentinel::getUser()->id;
$exams=Exams::where('user_id', $userId)->where('quizes_id',$id)->get();
$quiz=Quizes::find($id);
$questions=Questions::where('quizes_id',$id)->get();
return view('frontend.exam.resultDetails',compact('exams','quiz','questions'));
}
}
database/migrations
For Exams
Schema::create('exams', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->integer('questions_id')->unsigned();
$table->integer('quizes_id')->unsigned();
$table->string('ans')->nullable();
$table->string('is_ans')->nullable();
$table->string('status')->nullable();
$table->timestamps();
});
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->integer('questions_id')->unsigned();
$table->integer('quizes_id')->unsigned();
$table->string('ans')->nullable();
$table->string('is_ans')->nullable();
$table->string('status')->nullable();
$table->timestamps();
});
For Results
Schema::create('results', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned()->nullable();
$table->integer('quizes_id')->unsigned();
$table->string('total_mark')->nullable();
$table->string('yes_ans')->nullable();
$table->string('no_ans')->nullable();
$table->string('status')->nullable();
$table->string('date')->nullable();
$table->timestamps();
});
Views/
frontend/ exam
resutl.blade.php
@extends('layouts.frontend.master')
@section('title','Exam')
@section('banner')
<section class="page-banner services-banner">
<div class="container">
<div class="banner-header">
<h2> Exam Result</h2>
<span class="underline center"></span>
<p class="lead"></p>
</div>
<div class="breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li>Exam Result</li>
</ul>
</div>
</div>
</section>
@endsection
@section('css')
<style type="text/css">
/*.ul-list li:nth-child(2n+1){
background-color: #b30000;
color: #ffffff;
}
.ul-list li:nth-child(2n+1){
background-color: #ff4d4d;
color: #fff;
}*/
.ul-list li:hover{
background-color: #ffffff;
color: red;
}
.ul-list li{
padding: 10px;
}
.ul-list li a{
font-size:16px;
}
</style>
@endsection
@section('content')
<section class=" ">
<div class="container">
<div class="row">
<section class="company-info-box">
<div class="company-info">
<div class="container">
<div class="row">
<div class="col-md-10 aligncenter">
<div class="col-md-6 border-dark-left">
<div class="row">
<div class="col-md-12">
<div class="company-detail bg-dark margin-left">
<h3 class="section-title">Mr. {{Sentinel::getUser()->first_name}}</h3>
<span class="underline left"></span>
<p> Welcome to Online Quiz </p>
<p>Share With your friends </p>
<a href="/" class="btn btn-primary">Home</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 border-dark">
<div class="row">
<div class="col-md-12">
<div class="company-detail bg-light margin-right">
<h3 class="section-title">Exam Reult</h3>
<span class="underline left"></span>
<p><table class="table table-bordered table-hover">
<thead>
<tr>
<th>Sl</th>
<th>Exan Title</th>
<th>Date</th>
<th>Result</th>
<!-- <th>Details</th> -->
</tr>
</thead>
<tbody>
@foreach($results as $key=>$res)
<tr><td>{{++$key}}</td>
<td> {{$res->quizes->quiz_name}} </td>
<td>{{$res->date}} </td>
<td>{{$res->yes_ans}}/{{$res->yes_ans+$res->no_ans}} </td>
<td><a href="/MyExamDetails/{{$res->quizes_id}}">Details</a></td>
</tr>
@endforeach
</tbody>
</table> </p>
<a href="/quiz" class="btn btn-dark-gray">Today Exam</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
@endsection
@section('title','Exam')
@section('banner')
<section class="page-banner services-banner">
<div class="container">
<div class="banner-header">
<h2> Exam Result</h2>
<span class="underline center"></span>
<p class="lead"></p>
</div>
<div class="breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li>Exam Result</li>
</ul>
</div>
</div>
</section>
@endsection
@section('css')
<style type="text/css">
/*.ul-list li:nth-child(2n+1){
background-color: #b30000;
color: #ffffff;
}
.ul-list li:nth-child(2n+1){
background-color: #ff4d4d;
color: #fff;
}*/
.ul-list li:hover{
background-color: #ffffff;
color: red;
}
.ul-list li{
padding: 10px;
}
.ul-list li a{
font-size:16px;
}
</style>
@endsection
@section('content')
<section class=" ">
<div class="container">
<div class="row">
<section class="company-info-box">
<div class="company-info">
<div class="container">
<div class="row">
<div class="col-md-10 aligncenter">
<div class="col-md-6 border-dark-left">
<div class="row">
<div class="col-md-12">
<div class="company-detail bg-dark margin-left">
<h3 class="section-title">Mr. {{Sentinel::getUser()->first_name}}</h3>
<span class="underline left"></span>
<p> Welcome to Online Quiz </p>
<p>Share With your friends </p>
<a href="/" class="btn btn-primary">Home</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 border-dark">
<div class="row">
<div class="col-md-12">
<div class="company-detail bg-light margin-right">
<h3 class="section-title">Exam Reult</h3>
<span class="underline left"></span>
<p><table class="table table-bordered table-hover">
<thead>
<tr>
<th>Sl</th>
<th>Exan Title</th>
<th>Date</th>
<th>Result</th>
<!-- <th>Details</th> -->
</tr>
</thead>
<tbody>
@foreach($results as $key=>$res)
<tr><td>{{++$key}}</td>
<td> {{$res->quizes->quiz_name}} </td>
<td>{{$res->date}} </td>
<td>{{$res->yes_ans}}/{{$res->yes_ans+$res->no_ans}} </td>
<td><a href="/MyExamDetails/{{$res->quizes_id}}">Details</a></td>
</tr>
@endforeach
</tbody>
</table> </p>
<a href="/quiz" class="btn btn-dark-gray">Today Exam</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
@endsection
Views/
frontend/ exam
resultDetails.blade.php
@extends('layouts.frontend.master')
@section('title','Exam')
@section('banner')
<section class="page-banner services-banner">
<div class="container">
<div class="banner-header">
<h2> Exam</h2>
<span class="underline center"></span>
<p class="lead"></p>
</div>
<div class="breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li>Exam</li>
</ul>
</div>
</div>
</section>
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}
.icon-bar {
position: fixed;
top: 50%;
right: 10%;
z-index: 9999;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@media only screen and (max-width: 800px) {
.icon-bar {
position: fixed;
top:95%;
right:0;
z-index: 9999;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
</style>
<style type="text/css">
/*.ul-list li:nth-child(2n+1){
background-color: #b30000;
color: #ffffff;
}
.ul-list li:nth-child(2n+1){
background-color: #ff4d4d;
color: #fff;
}*/
/*.ul-list li:hover{*/
/* background-color: #ffffff;*/
/* color: red;*/
/*}*/
.ul-list li{
padding: 10px;
}
.ul-list li a{
font-size:16px;
}
</style>
@endsection
@section('content')
<section class=" ">
<div class="container">
<div class="row">
<h3>{{$quiz->quiz_name}}</h3><hr>
<div class="col-md-12">
@php $sl=0; @endphp
@foreach($exams as $key=>$exam)
@foreach($questions as $ques)
@if($exam->questions_id==$ques->id)
<h5> {{++$sl}}. {{$ques->question}}</h5>
<ol class="ul-list" style="list-style-type: lower-alpha;" >
@foreach($ques->optionsdata as $opt)
@if($ques->answer==$exam->ans)
<li style="color: green;"> <input type="radio" {{$opt->option==$ques->answer ? 'checked' : ''}} /> {{$opt->option}} </li>
@else
@if($opt->option==$ques->answer)
<li style="color: green;"><input type="radio" value="{{$opt->option}}" checked="" /> {{$opt->option}} </li>
@elseif($opt->option==$exam->ans)
<li style="color: red;"><input type="radio" value="{{$opt->option}}" checked="" /> {{$opt->option}} </li>
@else
<li ><input type="radio" value="{{$opt->option}}" /> {{$opt->option}} </li>
@endif
@endif
@endforeach
</ol>
@if($ques->note!="")
<h5 style="color: blue;padding-bottom:20px;">Note: {{$ques->note}}</h5>
@endif
@endif
@endforeach
@endforeach
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
<script type="text/javascript">
var interval;
var form=document.forms.exam;
function countdown() {
clearInterval(interval);
interval = setInterval( function() {
var timer = $('.js-timeout').html();
timer = timer.split(':');
var minutes = timer[0];
var seconds = timer[1];
seconds -= 1;
if (minutes < 0) return;
else if (seconds < 0 && minutes != 0) {
minutes -= 1;
seconds = 59;
}
else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
$('.js-timeout').html(minutes + ':' + seconds);
if (minutes == 0 && seconds == 0) { clearInterval(interval); form.submit(); alert("Time Over Please Click Ok Button");}
}, 1000);
}
$('.js-timeout').text("{{ $quiz->quiz_time }}");
countdown();
</script>
@endsection
@section('title','Exam')
@section('banner')
<section class="page-banner services-banner">
<div class="container">
<div class="banner-header">
<h2> Exam</h2>
<span class="underline center"></span>
<p class="lead"></p>
</div>
<div class="breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li>Exam</li>
</ul>
</div>
</div>
</section>
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}
.icon-bar {
position: fixed;
top: 50%;
right: 10%;
z-index: 9999;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@media only screen and (max-width: 800px) {
.icon-bar {
position: fixed;
top:95%;
right:0;
z-index: 9999;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
</style>
<style type="text/css">
/*.ul-list li:nth-child(2n+1){
background-color: #b30000;
color: #ffffff;
}
.ul-list li:nth-child(2n+1){
background-color: #ff4d4d;
color: #fff;
}*/
/*.ul-list li:hover{*/
/* background-color: #ffffff;*/
/* color: red;*/
/*}*/
.ul-list li{
padding: 10px;
}
.ul-list li a{
font-size:16px;
}
</style>
@endsection
@section('content')
<section class=" ">
<div class="container">
<div class="row">
<h3>{{$quiz->quiz_name}}</h3><hr>
<div class="col-md-12">
@php $sl=0; @endphp
@foreach($exams as $key=>$exam)
@foreach($questions as $ques)
@if($exam->questions_id==$ques->id)
<h5> {{++$sl}}. {{$ques->question}}</h5>
<ol class="ul-list" style="list-style-type: lower-alpha;" >
@foreach($ques->optionsdata as $opt)
@if($ques->answer==$exam->ans)
<li style="color: green;"> <input type="radio" {{$opt->option==$ques->answer ? 'checked' : ''}} /> {{$opt->option}} </li>
@else
@if($opt->option==$ques->answer)
<li style="color: green;"><input type="radio" value="{{$opt->option}}" checked="" /> {{$opt->option}} </li>
@elseif($opt->option==$exam->ans)
<li style="color: red;"><input type="radio" value="{{$opt->option}}" checked="" /> {{$opt->option}} </li>
@else
<li ><input type="radio" value="{{$opt->option}}" /> {{$opt->option}} </li>
@endif
@endif
@endforeach
</ol>
@if($ques->note!="")
<h5 style="color: blue;padding-bottom:20px;">Note: {{$ques->note}}</h5>
@endif
@endif
@endforeach
@endforeach
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
<script type="text/javascript">
var interval;
var form=document.forms.exam;
function countdown() {
clearInterval(interval);
interval = setInterval( function() {
var timer = $('.js-timeout').html();
timer = timer.split(':');
var minutes = timer[0];
var seconds = timer[1];
seconds -= 1;
if (minutes < 0) return;
else if (seconds < 0 && minutes != 0) {
minutes -= 1;
seconds = 59;
}
else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
$('.js-timeout').html(minutes + ':' + seconds);
if (minutes == 0 && seconds == 0) { clearInterval(interval); form.submit(); alert("Time Over Please Click Ok Button");}
}, 1000);
}
$('.js-timeout').text("{{ $quiz->quiz_time }}");
countdown();
</script>
@endsection
No comments