OzoneAsai commited on
Commit
35a716d
1 Parent(s): 7d421c7

Create quiz_capital.html

Browse files
Files changed (1) hide show
  1. templates/quiz_capital.html +80 -0
templates/quiz_capital.html ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>首都のクイズ</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f0f0f0;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ .container {
16
+ max-width: 600px;
17
+ margin: 50px auto;
18
+ background-color: #fff;
19
+ padding: 20px;
20
+ border-radius: 8px;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ }
23
+
24
+ h1 {
25
+ text-align: center;
26
+ color: #333;
27
+ }
28
+
29
+ p {
30
+ margin-bottom: 20px;
31
+ }
32
+
33
+ label {
34
+ display: block;
35
+ margin-bottom: 10px;
36
+ }
37
+
38
+ input[type="text"] {
39
+ width: 100%;
40
+ padding: 10px;
41
+ margin-bottom: 20px;
42
+ border: 1px solid #ccc;
43
+ border-radius: 5px;
44
+ }
45
+
46
+ .btn {
47
+ display: block;
48
+ width: 100%;
49
+ padding: 10px;
50
+ background-color: #007bff;
51
+ color: #fff;
52
+ border: none;
53
+ border-radius: 5px;
54
+ cursor: pointer;
55
+ transition: background-color 0.3s ease;
56
+ }
57
+
58
+ .btn:hover {
59
+ background-color: #0056b3;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container">
65
+ <h1>首都のクイズ</h1>
66
+ <p>次の国の首都は何でしょう?: <strong>{{ element }}</strong></p>
67
+ <form action="/" method="post">
68
+ <label for="user_input">首都を入力してください:</label>
69
+ <input type="text" id="user_input" name="user_input" required>
70
+ <button type="submit" class="btn">答え合わせ</button>
71
+ </form>
72
+ {% if result %}
73
+ <p>{{ result }}</p>
74
+ {% endif %}
75
+ <form action="/next_capital" method="post">
76
+ <button type="submit" class="btn">次の問題</button>
77
+ </form>
78
+ </div>
79
+ </body>
80
+ </html>