Create a project and connect it to the database.
this is database table
public function up(): void
{
Schema::create('quizzes', function (Blueprint $table) {
$table->id();
$table->string('question');
$table->json('options'); // store options as JSON
$table->string('answer'); // correct answer
$table->timestamps();
});
}
create a quiz model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Quiz extends Model
{
use HasFactory;
protected $fillable = ['question', 'options', 'answer'];
protected $casts = [
'options' => 'array', // automatically converts JSON to array
];
}
creaate a quiz controller and
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Quiz;
class QuizController extends Controller
{
// Show all questions and form to add new question
public function index()
{
$quizzes = Quiz::all();
return view('quiz.index', compact('quizzes'));
}
// Store new question
public function store(Request $request)
{
$request->validate([
'question' => 'required|string',
'options' => 'required|array|min:2',
'answer' => 'required|string',
]);
Quiz::create([
'question' => $request->question,
'options' => $request->options,
'answer' => $request->answer,
]);
return back()->with('success', 'Question added!');
}
// Check quiz answer
public function checkAnswer(Request $request, $id)
{
$quiz = Quiz::findOrFail($id);
$isCorrect = $request->answer == $quiz->answer;
return back()->with('result', $isCorrect ? 'Correct!' : 'Wrong!');
}
}
Simnplified and short version of the controller code is here
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Quiz;
class QuizController extends Controller
{
/**
* Display all quiz questions.
*/
public function index()
{
// Fetch all quizzes from the database and pass them to the view
return view('quiz.index', ['quizzes' => Quiz::all()]);
}
/**
* Store a new quiz question.
*/
public function store(Request $request)
{
// Validate request input
$data = $request->validate([
'question' => 'required|string',
'options' => 'required|array|min:2',
'answer' => 'required|string',
]);
// Create a new quiz record
Quiz::create($data);
// Redirect back with a success message
return back()->with('success', 'Question added!');
}
/**
* Check if the submitted answer is correct.
*/
public function checkAnswer(Request $request, $id)
{
// Retrieve quiz by ID or fail if not found
$quiz = Quiz::findOrFail($id);
// Compare submitted answer to the correct one
$result = $request->answer === $quiz->answer ? 'Correct!' : 'Wrong!';
// Redirect back with the result
return back()->with('result', $result);
}
}
set up routes
use App\Http\Controllers\QuizController;
Route::get('/quiz', [QuizController::class, 'index']);
Route::post('/quiz', [QuizController::class, 'store'])->name('quiz.store');
Route::post('/quiz/{id}', [QuizController::class, 'checkAnswer'])->name('quiz.check');
create blade view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Quiz</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="p-6">
<h1 class="text-2xl font-bold mb-4">Add New Question</h1>
@if(session('success'))
<div class="mb-2 p-2 bg-green-200">{{ session('success') }}</div>
@endif
<form action="{{ route('quiz.store') }}" method="POST" class="mb-6">
@csrf
<input type="text" name="question" placeholder="Question" class="border p-1 w-full mb-2" required>
<input type="text" name="options[]" placeholder="Option 1" class="border p-1 w-full mb-2" required>
<input type="text" name="options[]" placeholder="Option 2" class="border p-1 w-full mb-2" required>
<input type="text" name="options[]" placeholder="Option 3 (optional)" class="border p-1 w-full mb-2">
<input type="text" name="options[]" placeholder="Option 4 (optional)" class="border p-1 w-full mb-2">
<input type="text" name="answer" placeholder="Correct Answer" class="border p-1 w-full mb-2" required>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Add Question</button>
</form>
<h1 class="text-2xl font-bold mb-4">Play Quiz</h1>
@foreach ($quizzes as $quiz)
<div class="mb-4 p-4 border rounded">
<h3 class="font-bold">{{ $quiz->question }}</h3>
<form action="{{ route('quiz.check', $quiz->id) }}" method="POST">
@csrf
@foreach ($quiz->options as $option)
@if($option) <!-- skip empty options -->
<div>
<input type="radio" name="answer" value="{{ $option }}" required> {{ $option }}
</div>
@endif
@endforeach
<button type="submit" class="mt-2 p-2 bg-green-500 text-white rounded">Submit</button>
</form>
</div>
@endforeach
@if(session('result'))
<div class="mt-4 p-2 bg-yellow-200">{{ session('result') }}</div>
@endif
</body>
</html>
Smi[lified and short version of the code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Quiz</title>
<style>
/* Basic styling without Tailwind */
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { font-size: 20px; margin-bottom: 10px; }
form { margin-bottom: 20px; }
input, button { margin: 5px 0; padding: 5px; }
.box { border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; }
.success { background: #d4edda; padding: 5px; }
.result { background: #fff3cd; padding: 5px; }
</style>
</head>
<body>
<!-- Form to add a new quiz question -->
<h1>Add New Question</h1>
@if(session('success'))
<div class="success">{{ session('success') }}</div>
@endif
<form action="{{ route('quiz.store') }}" method="POST">
@csrf
<input type="text" name="question" placeholder="Question" required>
<input type="text" name="options[]" placeholder="Option 1" required>
<input type="text" name="options[]" placeholder="Option 2" required>
<input type="text" name="options[]" placeholder="Option 3 (optional)">
<input type="text" name="options[]" placeholder="Option 4 (optional)">
<input type="text" name="answer" placeholder="Correct Answer" required>
<button type="submit">Add Question</button>
</form>
<!-- Display quiz questions to play -->
<h1>Play Quiz</h1>
@foreach ($quizzes as $quiz)
<div class="box">
<strong>{{ $quiz->question }}</strong>
<form action="{{ route('quiz.check', $quiz->id) }}" method="POST">
@csrf
<!-- Loop through options -->
@foreach ($quiz->options as $option)
@if($option)
<div>
<input type="radio" name="answer" value="{{ $option }}" required> {{ $option }}
</div>
@endif
@endforeach
<button type="submit">Submit</button>
</form>
</div>
@endforeach
<!-- Display result after answering -->
@if(session('result'))
<div class="result">{{ session('result') }}</div>
@endif
</body>
</html>
Run the project basic quiz app is ready for you now.