trivia_question.php

<?php
/** DATABASE SETUP **/
include("database_credentials.php"); // define variables

/** SETUP **/
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$db = new mysqli($dbhost, $dbusername, $dbpasswd, $dbname);
// $db = new mysql("localhost", "root", "", "dbname"); // XAMPP Settings
$user = null;

// Example using URL rewriting: we add the user information
// directly to the URI with a query string (GET parameters)

// Deal with the current session 
if (isset($_GET["email"])) { // validate the email coming in
    $stmt = $mysqli->prepare("select * from user where email = ?;");
    $stmt->bind_param("s", $_GET["email"]);
    if (!$stmt->execute()) {
        die("Error checking for user");
    } else { 
        // result succeeded
        $res = $stmt->get_result();
        $data = $res->fetch_all(MYSQLI_ASSOC);
        
        if (empty($data)) {
            // user was NOT found!
            header("Location: trivia_login.php");
            exit();
        } 
        // The user WAS found (SECURITY ALERT: we only checked against
        // their email address -- this is not a secure method of
        // keeping track of users!  We more likely want a unique
        // session ID for this user instead!
        $user = $data[0];
    }
} else {
    // User did not supply email GET parameter, so send them
    // to the login page
    header("Location: trivia_login.php");
    exit();
}



// Read a random question from the database
$res = $mysqli->query("select id, question from question order by rand() limit 1;");
if ($res === false) {
    die("MySQL database failed");
}
$data = $res->fetch_all(MYSQLI_ASSOC);
if (!isset($data[0])) {
    die("No questions in the database");
}
$question = $data[0];


// Message variable to display if needed
$message = "";

// If the user submitted (POST) an answer to a question, we should check
// to see if they got it right!
if (isset($_POST["questionid"])) {
    $qid = $_POST["questionid"];
    $answer = $_POST["answer"];
    
    // Use prepare with parameter binding to avoid SQL injection and
    // other attacks.  This will ensure that MySQL correctly escapes
    // the passed value and ensure that it is an integer.
    $stmt = $mysqli->prepare("select * from question where id = ?;");
    $stmt->bind_param("i", $qid);
    if (!$stmt->execute()) {
        // did not work
        $message = "<div class='alert alert-info'>Error: could not find previous question</div>";
    } else {
        // worked
        $res = $stmt->get_result();
        $data = $res->fetch_all(MYSQLI_ASSOC);
        
        if (!isset($data[0])) {
            $message = "<div class='alert alert-info'>Error: could not find previous question</div>";
        } else {
            // found question
            if ($data[0]["answer"] == $answer) {
                $message = "<div class='alert alert-success'><b>$answer</b> was correct!</div>";
            } else { 
                $message = "<div class='alert alert-danger'><b>$answer</b> was incorrect! The answer was: {$data[0]['answer']}</div>";
            }
        }
        
    }
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">  

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="your name">
        <meta name="description" content="include some description about your page">  

        <title>Trivia Game</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> 
    </head>

    <body>


        <div class="container" style="margin-top: 15px;">
            <div class="row col-xs-8">
                <h1>CS4640 Television Trivia Game</h1>
                <h3>Hello <?=$user["name"]?>! Score: <?=$user["score"]?></h3>
            </div>
            <div class="row">
                <div class="col-xs-8 mx-auto">
                <form action="trivia_question.php?email=<?=$user["email"]?>" method="post">
                    <div class="h-100 p-5 bg-light border rounded-3">
                    <h2>Question</h2>
                    <p><?=$question["question"]?></p>
                    <input type="hidden" name="questionid" value="<?=$question["id"]?>"/>
                    </div>
                    <?=$message?>
                    <div class="h-10 p-5 mb-3">
                        <input type="text" class="form-control" id="answer" name="answer" placeholder="Type your answer here">
                    </div>
                    <div class="text-center">                
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <a href="trivia_login.php" class="btn btn-danger">Log out</a>
                    </div>
                </form>
                </div>
            </div>
        </div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    </body>
</html>

trivia_login.php

<?php
/** DATABASE SETUP **/
include("database_credentials.php"); // define variables

/** SETUP **/
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$db = new mysqli($dbhost, $dbusername, $dbpasswd, $dbname);
// $db = new mysql("localhost", "root", "", "dbname"); // XAMPP Settings

$error_msg = "";

// Check if the user submitted the form (the form in the HTML below
// submits back to this page, which is okay for now.  We will check for
// form data and determine whether to re-show this form with a message
// or to redirect the user to the trivia game.
if (isset($_POST["email"])) { // validate the email coming in
    $stmt = $mysqli->prepare("select * from user where email = ?;");
    $stmt->bind_param("s", $_POST["email"]);
    if (!$stmt->execute()) {
        $error_msg = "Error checking for user";
    } else { 
        // result succeeded
        $res = $stmt->get_result();
        $data = $res->fetch_all(MYSQLI_ASSOC);
        
        if (!empty($data)) {
            // user was found!  Send to the game (with a GET parameter containing their email)
            header("Location: trivia_question.php?email={$data[0]["email"]}");
            exit();
        } else {
            // User was not found.  For our game, we'll just insert them!
            $insert = $mysqli->prepare("insert into user (name, email) values (?, ?);");
            $insert->bind_param("ss", $_POST["name"], $_POST["email"]);
            if (!$insert->execute()) {
                $error_msg = "Error creating new user";
            } 
            // Send them to the game (with a GET parameter containing their email)
            header("Location: trivia_question.php?email={$_POST["email"]}");
            exit();
        }
    }

}


?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">  

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="your name">
        <meta name="description" content="include some description about your page">  

        <title>Trivia Game Login</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> 
    </head>

    <body>


        <div class="container" style="margin-top: 15px;">
            <div class="row col-xs-8">
                <h1>CS4640 Television Trivia Game - Get Started</h1>
                <p> Welcome to our trivia game!  To get started, login below or enter a new username and password to create an account</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-4">
                <?php
                    if (!empty($error_msg)) {
                        echo "<div class='alert alert-danger'>$error_msg</div>";
                    }
                ?>
                <form action="trivia_login.php" method="post">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email"/>
                    </div>
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name"/>
                    </div>
                    <!--
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password"/>
                    </div>
                    -->
                    <div class="text-center">                
                    <button type="submit" class="btn btn-primary">Log in / Create Account</button>
                    </div>
                </form>
                </div>
            </div>
        </div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    </body>
</html>