OLA 5: PHP Word Bank Fill-in-the-Blank Quiz

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang

Due date: 11:59 pm April 8th, 2025 (Tuesday)

Objective:

In this assignment, you will build a dynamic PHP Word Bank Fill-in-the-Blank Quiz. Your task is to create an interactive web page where users can fill in missing words based on PHP-related questions using a provided word bank. You will implement PHP form handling to process user input, read questions from a JSON file, and evaluate answers using string comparison and input sanitization. Your quiz app will display instant feedback and scoring after submission. By completing this project, you will strengthen your understanding of PHP superglobals, server-side input processing, and JSON-based data management in a real-world interactive application.

Note: Input sanitization means cleaning the user’s input to prevent things like harmful code or unexpected behavior. In PHP, we often use htmlspecialchars() to sanitize input

Step 1: Set Up Your Project Folder

Start by creating a new folder for your PHP quiz project and adding the necessary files. 
 
	/php-word-bank-quiz 
	│── index.php 
	│── php_quiz.json 
	│── style.css
In this project, you'll use PHP to build a dynamic quiz, and JSON to store quiz data.

☆ index.php contains your PHP logic and HTML form.
☆ php_quiz.json stores the quiz questions and answers.

Step 2: Create the JSON File (6 Points)

Create a file named php_quiz.json and add PHP-related fill-in-the-blank questions with correct answers. 
		[
		  {
		    "question": "PHP code is executed on the __________.",
		    "answer": "server"
		  },
		  {
		    "question": "To display text in PHP, we use the __________ statement.",
		    "answer": "echo"
		  },
		  {
		    "question": "To collect form data sent via POST, we use __________.",
		    "answer": "$_POST"
		  },
		  {
		    "question": "To check if a variable is set in PHP, we use the __________ function.",
		    "answer": "isset"
		  },
		  {
		    "question": "In PHP, variables start with the __________ symbol.",
		    "answer": "$"
		  }
		]

Step 3: Build the Quiz Form (35 Points)

In this step, you'll dynamically generate quiz questions based on data from a JSON file and allow users to fill in the blanks.

(1) ♣ Load the quiz data from php_quiz.json. (5 points)
a. Use json_decode(file_get_contents(...),true) to read the questions.
b. Store them in a PHP associate array.


(2) ♣ Create a form using PHP that loops through the questions and displays each one with a text input field for the user’s answer. (20 points)
a. Create a <form></form> using post method.
b. Use foreach loop through the questions to dynamically display each one with a blank input.
c. Please use text type for the blank input field.
d. Use Submit to submit the form.


(3) ♣ Style the form for clarity and readability. (5 points)
a. Use CSS styles.
b. Highlight the Word Bank at the top.


(4) ♣ Include a visible Word Bank section that lists all possible answers to help users. (5 points)

Step 4: Process and Grade the Quiz (45 Points)

This step focuses on processing the user's answers and giving instant feedback.

(1) ♣ Use $_SERVER["REQUEST_METHOD"] to detect form submission. (5 points)

(2) ♣ Use $_POST to collect submitted answers. (5 points)
a. Use isset() and loop through each submitted answer.


(3) ♣ Use string comparison to check if the user's answer matches the correct answer from the JSON file. (10 points)
a. You can use strtolower() to convert both the correct answer and the submitted answer to lowercase before checking it.
b. Track the total number of correct answers


(4) ♣ Display the correct answer and the user's answer with color-coded feedback. (20 points)
a. Display each question along with the user’s answer
b. Show "Correct" or "Incorrect" next to each answer
c. Use green/red or styled spans to show feedback
d. Show the final score


(5) ♣ Create a link to retry the quiz. (5 points)
a. Add a "Restart Quiz" button that clears the form


Step 5: Input Validation & Security (10 Points)

Sanitize and secure user input using PHP best practices.

(1) ♣ Use htmlspecialchars() to prevent code injection. (5 points)

(2) ♣ Ensure input fields are required in the form and display a message if left blank. (5 points)

Step 6: Submission Instructions

Please compress your php-word-bank-quiz folder into a single ZIP archive and submit it through D2L.

Grading:

The assignment is worth a total of 100 points, distributed as follows:

Part Points
Build the Quiz Form 35 Points
Process and Grade the Quiz 45 Points
Input Validation & Security 10 points
Create the JSON File 6 Points
AI Disclaimer 4 Points

If you have any questions, please feel free to reach out to me at Xin.Yang@mtsu.edu or stop by my office in ROTC annex 113E.


⇧