diff --git a/app.py b/app.py
index 989b5f2ff0cf2acbc2b309d511708ae16e352d6b..0a42b20840c1e65a4e0dbe24882fa1598f51db70 100644
--- a/app.py
+++ b/app.py
@@ -1,7 +1,6 @@
from flask import Flask, render_template, request, redirect, url_for, flash, session
from flask_sqlalchemy import SQLAlchemy
from flask_basicauth import BasicAuth
-import os
app = Flask(__name__)
app.secret_key = 'fsdfsfsd52352' # set the secret key here
diff --git a/templates/index.html b/templates/index.html
index 1ad9af74340f1cbd13bba41814679371a6757178..7567ea605c0832030b40ab92ca6dff9a22357725 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,21 +10,40 @@
</head>
<body class="bg-gray-100 "><!--使用tailwind css的背景颜色类-->
- <div class="max-w-md mx-auto mt-32 py-20">
- <h1 class="text-4xl font-bold text-center text-gray-800 mb-32">Welcome to AAT system</h1>
- <div class="flex justify-center items-center space-x-12">
- <button
- class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-full focus:outline-none focus:ring shadow-lg transition-all duration-300"
- onclick="window.location.href='{{ url_for('selectquestion') }}'">
- I am Staff
- </button>
- <button
- class="bg-red-500 hover:bg-red-700 text-white font-bold py-4 px-6 rounded-full focus:outline-none focus:ring shadow-lg transition-all duration-300"
- onclick="window.location.href='{{ url_for('test') }}'">
- I am Student
- </button>
+ <!-- component -->
+ <div class="bg-white relative lg:py-20">
+ <div class="flex flex-col items-center justify-between pt-0 pr-10 pb-0 pl-10 mt-0 mr-auto mb-0 ml-auto max-w-7xl
+ xl:px-5 lg:flex-row">
+ <div class="flex flex-col items-center w-full pt-5 pr-10 pb-20 pl-10 lg:pt-20 lg:flex-row">
+ <div class="w-full bg-cover relative max-w-md lg:max-w-2xl lg:w-7/12">
+ <div class="flex flex-col items-center justify-center w-full h-full relative lg:pr-10">
+ <img src="https://res.cloudinary.com/macxenon/image/upload/v1631570592/Run_-_Health_qcghbu.png"
+ class="btn-" />
+ </div>
+ </div>
+ <div class="w-full mt-20 mr-0 mb-0 ml-0 relative z-10 max-w-2xl lg:mt-0 lg:w-5/12">
+ <div class="flex flex-col items-start justify-start pt-10 pr-10 pb-10 pl-10 bg-white shadow-2xl rounded-xl
+ relative z-10">
+ <p class="w-full text-4xl mb-20 font-medium text-center leading-snug font-serif">Welcome to AAT system
+ </p>
+ <div class="flex justify-center items-center space-x-12">
+ <button
+ class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-full focus:outline-none focus:ring shadow-lg transition-all duration-300"
+ onclick="window.location.href='{{ url_for('selectquestion') }}'">
+ I am Staff
+ </button>
+ <button
+ class="bg-red-500 hover:bg-red-700 text-white font-bold py-4 px-6 rounded-full focus:outline-none focus:ring shadow-lg transition-all duration-300"
+ onclick="window.location.href='{{ url_for('test') }}'">
+ I am Student
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/templates/test.html b/templates/test.html
index 3b584e0e53d49b8fd8c8c665deef4d153fbb965f..b13b269e1440dc8e6d7cf27cb668c0f8c11a4606 100644
--- a/templates/test.html
+++ b/templates/test.html
@@ -3,66 +3,69 @@
<head>
<meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
- <div class="container mx-auto bg-gray-100">
+ <div class=" bg-gray-100">
<h1 class="text-3xl font-bold mb-8 text-center">{{test_type}}
Test</h1>
<div id="countdown" class="text-center mb-10"></div>
- <form class="max-w-md mx-auto "
- action="{{ url_for('result') }}" method="POST">
- <div class="grid gap-6">
+ <form action="{{ url_for('result') }}" method="POST">
+ <section class="text-gray-600 body-font">
+ <div class="container px-5 py-5 mx-auto">
+ <div
+ class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
+ <div class="relative flex-grow w-full">
+ <label for="full-name" class="leading-7 text-sm text-gray-900">Student number</label>
+ <input type="text" id="full-name" name="full-name"
+ class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+ spellcheck="false" data-ms-editor="true">
+ </div>
+ <div class="relative flex-grow w-full">
+ <label for="email" class="leading-7 text-sm text-gray-900">Email</label>
+ <input type="email" id="email" name="email"
+ class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+ </div>
+ </div>
+ </section>
+ <div class="grid gap-6 max-w-md mx-auto">
{% for question in questions %}
<div class="bg-white rounded-lg shadow-md px-8 py-6">
<h2 class="text-2xl font-bold mb-4 text-blue-900">
- {{ question.question }}
+ {{ loop.index }}. {{ question.question }}
</h2>
<div class="flex flex-col space-y-2">
<label class="inline-flex items-center">
- <input type="radio"
- name="answer_{{ question.id }}"
- value="{{ question.option1 }}"
+ <input type="radio" name="answer_{{ question.id }}" value="{{ question.option1 }}"
class="form-radio h-5 w-5 checked:bg-blue-500">
- <label
- class="ml-2 text-gray-800 font-medium">{{ question.option1 }}</label>
+ <label class="ml-2 text-gray-800 font-medium">{{ question.option1 }}</label>
</label>
<label class="inline-flex items-center">
- <input type="radio"
- name="answer_{{ question.id }}"
- value="{{ question.option2 }}"
+ <input type="radio" name="answer_{{ question.id }}" value="{{ question.option2 }}"
class="form-radio h-5 w-5 text-indigo-600">
- <span
- class="ml-2 text-gray-800 font-medium">{{ question.option2 }}</span>
+ <span class="ml-2 text-gray-800 font-medium">{{ question.option2 }}</span>
</label>
<label class="inline-flex items-center">
- <input type="radio"
- name="answer_{{ question.id }}"
- value="{{ question.option3 }}"
+ <input type="radio" name="answer_{{ question.id }}" value="{{ question.option3 }}"
class="form-radio h-5 w-5 text-indigo-600">
- <span
- class="ml-2 text-gray-800 font-medium">{{ question.option3 }}</span>
+ <span class="ml-2 text-gray-800 font-medium">{{ question.option3 }}</span>
</label>
<label class="inline-flex items-center">
- <input type="radio"
- name="answer_{{ question.id }}"
- value="{{ question.option4 }}"
+ <input type="radio" name="answer_{{ question.id }}" value="{{ question.option4 }}"
class="form-radio h-5 w-5 text-indigo-600">
- <span
- class="ml-2 text-gray-800 font-medium">{{ question.option4 }}</span>
+ <span class="ml-2 text-gray-800 font-medium">{{ question.option4 }}</span>
</label>
</div>
</div>
{% endfor %}
+ <button type="submit"
+ class=" text-white bg-indigo-500 text-lg focus:outline-none hover:bg-indigo-600 font-bold py-2 px-6 mt-5 mb-10 mx-40 rounded">
+ Submit
+ </button>
</div>
- <button type="submit"
- class=" bg-indigo-200 hover:bg-indigo-300 text-gray-800 font-bold py-2 px-6 mt-5 mb-10 mx-40 rounded">
- Submit
- </button>
</form>
</div>
</body>
diff --git a/templates/testresult.html b/templates/testresult.html
index 441f072189a3153cbef0cfa2272620a0b82362c4..393dc9f11cf11fcb439508b944f37a3b8a994a0e 100644
--- a/templates/testresult.html
+++ b/templates/testresult.html
@@ -3,45 +3,48 @@
<head>
<meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Result</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
-<body class="container mx-auto bg-white">
- <div>
- <h1 class="text-3xl font-bold mb-8 text-center">
- {{ score }}/{{ questions|length }} - {{ test_type }} Test
- Result</h1>
- <table class="table-auto mx-auto mb-8">
- <thead class="bg-gray-100 border-b">
- <tr>
- <th class="px-4 py-2">Question</th>
- <th class="px-4 py-2">Your answer</th>
- <th class="px-4 py-2">Correct answer</th>
- <th class="px-4 py-2"> explanation </th>
- </tr>
- </thead>
- <tbody>
- {% for question in questions %}
- <tr>
- <td class="border px-4 py-2">
- {{ question.question }}</td>
- <td class="border px-4 py-2">
- {{ user_answers[question.id] }}</td>
- <td class="border px-4 py-2">{{ question.answer }}
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- <div class="text-center">
- <a href="{{ url_for('index') }}"
- class="bg-indigo-200 hover:bg-indigo-300 text-gray-800 font-bold py-2 px-6 rounded">Take
- another test</a>
+<section class="antialiased bg-gray-100 text-gray-600 h-screen px-4">
+ <div class="flex flex-col justify-center h-full">
+ <div class="bg-white shadow-lg rounded-sm border border-gray-200">
+ <h1 class="text-3xl font-bold mb-8 mt-8 text-center">
+ {{ score }}/{{ questions|length }} - {{ test_type }} Test
+ Result</h1>
+ <table class="table-auto mx-auto mb-8">
+ <thead class="bg-gray-100 border-b">
+ <tr>
+ <th class="px-4 py-2">Question</th>
+ <th class="px-4 py-2">Your answer</th>
+ <th class="px-4 py-2">Correct answer</th>
+ <th class="px-4 py-2"> explanation </th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for question in questions %}
+ <tr>
+ <td class="border px-4 py-2">
+ {{ question.question }}</td>
+ <td class="border px-4 py-2">
+ {{ user_answers[question.id] }}</td>
+ <td class="border px-4 py-2">{{ question.answer }}
+ </td>
+ <td class="border px-4 py-2">{{ question.feedback }}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ <div class="text-center mb-4">
+ <a href="{{ url_for('index') }}"
+ class="bg-indigo-200 hover:bg-indigo-300 text-gray-800 font-bold py-2 px-6 rounded">Take
+ another test</a>
+ </div>
</div>
</div>
-</body>
+</section>
</html>
\ No newline at end of file