PHP Trivia Game - Starter Code
Here is the starter code for the Trivia game that we’ll be looking at in class.
/web/www/index.php
<?php
// DEBUGGING ONLY! Show all errors.
error_reporting(E_ALL);
ini_set("display_errors", 1);
// Class autoloading by name. All our classes will be in a directory
// that Apache does not serve publicly. They will be in /opt/src/, which
// is our src/ directory in Docker.
spl_autoload_register(function ($classname) {
include "/opt/src/trivia/$classname.php";
});
// CS4640 server
// public files: public_html
// private files: anything OUTSIDE of public_html
// create a "private" next to public_html
// include "/students/mst3k/students/mst3k/private"
//
// if I created "private/triviagame"
// include "/students/mst3k/students/mst3k/private/triviagame/$classname.php";:
// Other global things that we need to do
// Instantiate the front controller
$trivia = new TriviaController($_GET);
// Run the controller
$trivia->run();
/web/src/trivia/TriviaController.php
Our controller!
<?php
class TriviaController {
private $questions = [];
private $db;
private $errorMessage = "";
/**
* Constructor
*/
public function __construct($input) {
$this->input = $input;
$this->loadQuestions();
}
/**
* Run the server
*
* Given the input (usually $_GET), then it will determine
* which command to execute based on the given "command"
* parameter. Default is the welcome page.
*/
public function run() {
// Get the command
$command = "question";
if (isset($this->input["command"]))
$command = $this->input["command"];
switch($command) {
case "answer":
$this->answerQuestion();
break;
case "question":
default:
$this->showQuestion();
break;
}
}
/**
* Load questions from a file, store them as an array
* in the current object.
*/
public function loadQuestions() {
$this->questions = [
[
"question" => "What is the largest desert in the world?",
"answer" => "Antarctica"
],
[
"question" => "Who discovered gravity?",
"answer" => "Newton"
],
[
"question" => "What is the smallest mammal in the world?",
"answer" => "Etruscan Shrew"
]
];
}
/**
* Our getQuestion function, now as a method!
*/
function getQuestion($id = null) {
// global $questions;
if ($id == null) {
$randid = array_rand($this->questions);
return $this->questions[$randid];
}
}
/**
* Show a question to the user. This function loads a
* template PHP file and displays it to the user based on
* properties of this object.
*/
public function showQuestion($message = "") {
$question = $this->getQuestion();
include("/opt/src/trivia/templates/question.php");
}
/**
* Check the user's answer to a question.
*/
public function answerQuestion() {
}
}
/web/src/trivia/templates/question.php
Our view
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="CS4640 Spring 2025">
<meta name="description" content="Our Front-Controller Trivia Game">
<title>PHP Form Example - Trivia</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container" style="margin-top: 15px;">
<div class="row">
<div class="col-xs-12">
<h1>Trivia Game</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<?=$message?>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-header">
Question
</div>
<div class="card-body">
<h5 class="card-title"></h5>
</div>
</div>
<div class="m-4">
<form action="?command=answer" method="post">
<div class="mb-3">
<label for="answer" class="form-label">Trivia Answer: </label>
<input type="text" class="form-control" id="trivia-answer" name="answer">
</div>
<button type="submit" class="btn btn-primary">Submit Answer</button>
</form>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header">
Game Info
</div>
<div class="card-body">
<p class="card-text">Score:</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
/web/src/trivia/data/trivia-s25.json
Our questions!
[
{
"question": "What is the largest desert in the world?",
"answer": "Antarctica"
},
{
"question": "Who discovered gravity?",
"answer": "Newton"
},
{
"question": "What is the smallest mammal in the world?",
"answer": "Etruscan Shrew"
},
{
"question": "What is the answer to the ultimate question of life, the universe, and everything?",
"answer": "forty-two"
}
]