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 12th, 2026 (Sunday)

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.

Workflow Steps (3 Stages)

You must submit all three stages:

Stage 1: Plan the Outline of Structure
Stage 2: Website Implementation
Stage 3: Reflection: what changed and why

Stage 1: Plan the Outline of Structure (5 Points)

Before building your website, plan the structure of your project.

What to submit

  1. Option A: A clear photo of a hand-drawn outline, OR
  2. Option B: A text file named outline5.txt

Outline requirements

Your outline must show the structure of your website/application and include:

  1. A page title area (H1)
  2. A navigation bar with links
  3. Main page layouts
  4. Key sections/components
  5. Buttons/actions area
  6. A display/content area
  7. A footer or bottom section

Stage 2: Website Implementation (90 Points)

Step 1: Project Setup

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 (5 Points)

Create a file named php_quiz.json and populate it with your own PHP-related fill-in-the-blank questions along with their correct answers. You should create at least 10 original questions.. 

	[
		  {
		    "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 (40 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. (15 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)

Stage 3: Reflection (5 Points)

At the bottom of your outline5.txt, include a section titled Reflection. Answer each question in 2–3 sentences:

  1. What changed between your Stage 1 outline and your final implementation? Why did you change it?
  2. What was the hardest part to implement correctly, and why?
  3. Describe one mistake you made and how you fixed it.

Submission Instructions

Please compress your project folder into a single ZIP archive and submit it through D2L. If your project contains large dependency folders, you may remove them before creating the ZIP archive.

Please include:

  1. Stage 1: outline5.txt or a clear photo of your hand-drawn outline
  2. Stage 2: your website/project files
  3. Stage 3: reflection written at the bottom of outline5.txt

Grading:

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

Part Points
Stage 1: Outline of Structure 5 Points
Create the JSON File 5 Points
Build the Quiz Form 35 Points
Process and Grade the Quiz 40 Points
Input Validation & Security 10 Points
Stage 3: Reflection 5 Points
Total 100 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.


⇧