Add OnlineQuiz app

2025-10-26 19:35:59 +01:00
parent bd757d5ceb
commit aae358b2be
19 changed files with 1367 additions and 6 deletions
--- a/OnlineQuiz/src/main/resources/templates/addQuiz.html
+++ b/OnlineQuiz/src/main/resources/templates/addQuiz.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>Add Quiz</title>
+    <style>
+        /* General styles */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        /* Form container */
+        .form-container {
+            background-color: #fff;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            max-width: 500px;
+            width: 100%;
+        }
+
+        /* Form header */
+        .form-header {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        /* Form group (label + input) */
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+            color: #555;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+
+        .form-group input:focus {
+            border-color: #2196F3;
+            outline: none;
+            box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
+        }
+
+        /* Error messages */
+        .error-message {
+            color: #f44336;
+            font-size: 14px;
+            margin-top: 5px;
+        }
+
+        /* Submit button */
+        .submit-button {
+            width: 100%;
+            padding: 12px;
+            background-color: #2196F3;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .submit-button:hover {
+            background-color: #1976D2;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="form-container">
+        <!-- Form header -->
+        <div class="form-header">Add a New Quiz</div>
+
+        <!-- Form -->
+        <form th:action="@{/addQuiz}" method="post" th:object="${quiz}">
+            <!-- Question -->
+            <div class="form-group">
+                <label for="questionText">Question:</label>
+                <input type="text" id="questionText" th:field="*{questionText}" required>
+                <span th:if="${#fields.hasErrors('questionText')}" th:errors="*{questionText}" class="error-message"></span>
+            </div>
+
+            <!-- Options -->
+            <div class="form-group">
+                <label for="options">Options (comma-separated):</label>
+                <input type="text" id="options" th:field="*{options}" required>
+                <span th:if="${#fields.hasErrors('options')}" th:errors="*{options}" class="error-message"></span>
+            </div>
+
+            <!-- Correct Answer -->
+            <div class="form-group">
+                <label for="correctAnswer">Correct Answer:</label>
+                <input type="text" id="correctAnswer" th:field="*{correctAnswer}" required>
+                <span th:if="${#fields.hasErrors('correctAnswer')}" th:errors="*{correctAnswer}" class="error-message"></span>
+            </div>
+
+            <!-- Submit button -->
+            <button type="submit" class="submit-button">Add Quiz</button>
+        </form>
+    </div>
+</body>
+</html>