"Hey! I just came across something that instantly reminded me of you. I thought you might enjoy it! Let me know what you think! 😊"
"Generate a responsive web application for creating, managing, and taking tests with the following features. The data should be saved and retrieved in JSON format using PHP for server-side functionality.**
General Requirements
1. Styling:
Use a modern framework like Bootstrap or TailwindCSS for responsive and user-friendly design.
Include smooth animations, hover effects, and tooltips for better UX.
Ensure accessibility using ARIA attributes and proper focus states.
2. Data Storage:
Store test details, user responses, and results in JSON files:
tests.json: Stores all created tests.
user_responses.json: Stores user answers.
results.json: Stores calculated test results.
Pages and Features
1. create.html (Admin Panel for Test Creation)
A visually appealing form with the following fields:
1. Test Title: A text input field.
2. Upload Questions: File upload for .jpg, .png, or .pdf files.
3. Number of Questions: A number input field.
Dynamically generate sections with:
Only radio button options (A, B, C, D) for selecting the correct answer for each question.
Labels like "Correct Answer for Question 1," "Correct Answer for Question 2," etc.
4. Schedule Time: A date-time picker to set the test schedule.
5. Submit Button: Save the test details to the tests.json file and upload the question file to the uploads/ folder.
2. admin.html (Test Management Panel)
Display all created tests fetched from tests.json in a card or table format. Each test should display:
Test Title.
Scheduled Time.
Edit Button: Opens create.html with prefilled data for editing.
Delete Button: Deletes the test from tests.json and removes associated files from the server.
Include pagination for large lists of tests.
3. index.html (User Test Dashboard)
Display a list of available tests from tests.json:
Test Title.
Countdown timer to the scheduled time.
"Start Test" button (enabled only when the test is live) that links to test.html.
Add search and filter options (e.g., by test title or date).
4. test.html (Test Interface)
Display uploaded questions in the main content area:
Render images or PDFs in a scrollable and zoomable container.
Sidebar:
Initially collapsed (10% width) with a toggle button.
Expands to 90% width on toggle.
Show question numbers with multiple-choice options (A, B, C, D) for user answers.
Submit Button:
Save user responses to user_responses.json.
Show a confirmation dialog before submission.
5. result.html (Result Page)
Compare user responses from user_responses.json with correct answers from tests.json:
Display the score, percentage, and a ranking (e.g., "Top 10%").
Use a progress bar or chart (e.g., pie or bar chart) to visualize the result.
Store results in results.json.
Server-Side PHP Functionality
Required PHP Files:
1.
save_test.php:
Accept data from create.html (test title, schedule time, correct answers, etc.).
Save test details as a JSON object in tests.json.
Save uploaded files in the uploads/ folder.
Return a success/failure response.
2.
fetch_tests.php:
Read and return all test data from tests.json for admin.html and index.html.
3.
edit_test.php:
Fetch a specific test by its ID from tests.json.
Update the test details and save them back to tests.json.
4.
delete_test.php:
Remove a test from tests.json based on its ID.
Delete associated uploaded files from the uploads/ folder.
5.
submit_test.php:
Accept user responses via POST from test.html.
Save the responses as a JSON object in user_responses.json.
6.
calculate_results.php:
Compare user responses from user_responses.json with the correct answers in tests.json.
Calculate the score and percentage.
Save the results to results.json.
Return the calculated result for result.html.
File Structure
project/ ├── index.html ├── create.html ├── admin.html ├── test.html ├── result.html ├── css/ │ └── styles.css ├── js/ │ └── script.js ├── uploads/ │ └── [uploaded question files] ├── data/ │ ├── tests.json │ ├── user_responses.json │ └── results.json ├── php/ │ ├── save_test.php │ ├── fetch_tests.php │ ├── edit_test.php │ ├── delete_test.php │ ├── submit_test.php │ └── calculate_results.php
Additional Notes
1. Use file_get_contents and file_put_contents in PHP for reading/writing JSON files.
2. Validate all inputs to prevent invalid data and ensure secure file uploads.
3. Add error handling for file read/write operations.
4. Make all pages fully responsive and cross-browser compatible.
5. Include clear error/success messages for all operations.
Write html codes for the prompt with logics and styling