Update app.py

app.py

@@ -47,7 +47,7 @@ def generate_quiz_page():
     if request.method == "POST":
         context = request.form.get("context")
         response = generate_quiz(context)
-        
+
         if "error" in response:
             response = generate_quiz(context)
 
@@ -82,10 +82,22 @@ def generate_quiz_page():
                 }}
                 .quiz-container pre {{
                     white-space: pre-wrap; /* Preserve line breaks in quiz response */
+                    background-color: #f0f0f0; /* Light grey background */
+                    padding: 10px;
+                    border-radius: 4px;
                 }}
                 .generate-link {{
-                    display: block; /* Make the link block-level for spacing */
+                    display: inline-block; /* Make the link block-level for spacing */
                     margin-top: 10px;
+                    padding: 10px 20px;
+                    background-color: #ffc107; /* Yellow background for link */
+                    color: #333; /* Dark grey text color */
+                    text-decoration: none;
+                    border-radius: 5px;
+                    font-weight: bold;
+                }}
+                .generate-link:hover {{
+                    background-color: #ffca28; /* Lighter yellow on hover */
                 }}
                 a {{
                     color: #ffc107; /* Yellow text color for links */
@@ -101,6 +113,8 @@ def generate_quiz_page():
                     border-radius: 4px;
                     resize: vertical; /* Allow vertical resizing of textarea */
                     min-height: 150px; /* Minimum height for textarea */
+                    background-color: #f0f0f0; /* Light grey background */
+                    color: #333; /* Dark grey text color */
                 }}
                 input[type="submit"] {{
                     background-color: #ffc107; /* Yellow background for submit button */
@@ -119,7 +133,7 @@ def generate_quiz_page():
             <div class="quiz-container">
                 <h2>Generated Quiz</h2>
                 <pre>{response}</pre>
-                <a href="/" class="generate-link">Generate another quiz</a>
+                <a href="/" class="generate-link">Back to generate another quiz</a>
             </div>
         </body>
         </html>
@@ -136,47 +150,49 @@ def generate_quiz_page():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Generate Quiz</title>
         <style>
-            body {
+            body {{
                 font-family: Arial, sans-serif;
                 background-color: #f0f0f0; /* Light grey background */
                 color: #333; /* Dark grey text color */
                 margin: 20px;
-            }
-            h2 {
+            }}
+            h2 {{
                 background-color: #ffc107; /* Yellow background for heading */
                 padding: 10px;
                 border-radius: 5px;
-            }
-            form {
+            }}
+            form {{
                 background-color: #fff; /* White background for form */
                 padding: 20px;
                 border-radius: 5px;
                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
                 margin-bottom: 20px;
-            }
-            label {
+            }}
+            label {{
                 display: block;
                 margin-bottom: 10px;
-            }
-            textarea {
+            }}
+            textarea {{
                 width: 98%;
                 padding: 10px;
                 border: 1px solid #ccc;
                 border-radius: 4px;
                 resize: vertical; /* Allow vertical resizing of textarea */
                 min-height: 150px; /* Minimum height for textarea */
-            }
-            input[type="submit"] {
+                background-color: #f0f0f0; /* Light grey background */
+                color: #333; /* Dark grey text color */
+            }}
+            input[type="submit"] {{
                 background-color: #ffc107; /* Yellow background for submit button */
                 color: #333; /* Dark grey text color */
                 border: none;
                 padding: 10px 20px;
                 cursor: pointer;
                 border-radius: 4px;
-            }
-            input[type="submit"]:hover {
+            }}
+            input[type="submit"]:hover {{
                 background-color: #ffca28; /* Lighter yellow on hover */
-            }
+            }}
         </style>
     </head>
     <body>
@@ -193,4 +209,4 @@ def generate_quiz_page():
     return default_html
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run(debug=True)