Hugging Face's logo

Spaces:
OzoneAsai
/
testSpace1
Sleeping

App Files Community
OzoneAsai commited on
Commit
8afab12
•
1 Parent(s): 52096ed

Upload 5 files

Browse files
Files changed (4) hide show
  1. templates/quiz_capital.html +55 -72
  2. templates/quiz_element.html +55 -72
  3. templates/quiz_element2num.html +56 -74
  4. templates/quiz_index.html +51 -0
templates/quiz_capital.html CHANGED
@@ -1,80 +1,63 @@
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>
 
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
+ h1 {
15
+ color: #333;
16
+ text-align: center;
17
+ }
18
+ form {
19
+ text-align: center;
20
+ }
21
+ input[type="text"] {
22
+ padding: 5px;
23
+ margin-top: 10px;
24
+ width: 200px;
25
+ border: 1px solid #ccc;
26
+ border-radius: 5px;
27
+ }
28
+ input[type="submit"] {
29
+ padding: 8px 20px;
30
+ margin-top: 10px;
31
+ background-color: #007bff;
32
+ color: #fff;
33
+ border: none;
34
+ border-radius: 5px;
35
+ cursor: pointer;
36
+ }
37
+ input[type="submit"]:hover {
38
+ background-color: #0056b3;
39
+ }
40
+ p {
41
+ color: #666;
42
+ text-align: center;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <h1>{{ element }}の首都は?</h1>
48
 
49
+ <form method="POST">
50
+ <label>答え: <input type="text" name="user_input"></label>
51
+ <br>
52
+ <input type="submit" value="回答">
53
+ </form>
 
 
54
 
55
+ {% if result %}
56
+ <p>{{ result }}</p>
57
+ <form method="POST" action="/next_capital">
58
+ <input type="submit" value="次の問題">
59
+ </form>
60
+ {% endif %}
 
 
 
 
 
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </body>
63
  </html>
templates/quiz_element.html CHANGED
@@ -1,80 +1,63 @@
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="number"] {
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="number" id="user_input" name="user_input" min="1" required>
70
- <button type="submit" class="btn">答え合わせ</button>
71
- </form>
72
- {% if result %}
73
- <p>{{ result }}</p>
74
- {% endif %}
75
- <form action="/next" method="post">
76
- <button type="submit" class="btn">次の問題</button>
77
- </form>
78
- </div>
79
  </body>
80
  </html>
 
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
+ h1 {
15
+ color: #333;
16
+ text-align: center;
17
+ }
18
+ form {
19
+ text-align: center;
20
+ }
21
+ input[type="number"] {
22
+ padding: 5px;
23
+ margin-top: 10px;
24
+ width: 100px;
25
+ border: 1px solid #ccc;
26
+ border-radius: 5px;
27
+ }
28
+ input[type="submit"] {
29
+ padding: 8px 20px;
30
+ margin-top: 10px;
31
+ background-color: #007bff;
32
+ color: #fff;
33
+ border: none;
34
+ border-radius: 5px;
35
+ cursor: pointer;
36
+ }
37
+ input[type="submit"]:hover {
38
+ background-color: #0056b3;
39
+ }
40
+ p {
41
+ color: #666;
42
+ text-align: center;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <h1>{{ element }}の最外殻電子は?\n{{ element }}</h1>
48
 
49
+ <form method="POST">
50
+ <label>答え: <input type="number" name="user_input"></label>
51
+ <br>
52
+ <input type="submit" value="回答">
53
+ </form>
 
 
54
 
55
+ {% if result %}
56
+ <p>{{ result }}</p>
57
+ <form method="POST" action="/next_element">
58
+ <input type="submit" value="次の問題">
59
+ </form>
60
+ {% endif %}
 
 
 
 
 
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </body>
63
  </html>
templates/quiz_element2num.html CHANGED
@@ -1,81 +1,63 @@
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="number"] {
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="number" id="user_input" name="user_input" min="1" required>
70
- <button type="submit" class="btn">答え合わせ</button>
71
- </form>
72
- {% if result %}
73
- <p>{{ result }}</p>
74
- {% endif %}
75
- <form action="{{ url_for('next_question_element2num') }}" method="post">
76
- <button type="submit" class="btn">次の問題</button>
77
- </form>
78
- </div>
79
  </body>
80
-
81
  </html>
 
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
+ h1 {
15
+ color: #333;
16
+ text-align: center;
17
+ }
18
+ form {
19
+ text-align: center;
20
+ }
21
+ input[type="text"] {
22
+ padding: 5px;
23
+ margin-top: 10px;
24
+ width: 100px;
25
+ border: 1px solid #ccc;
26
+ border-radius: 5px;
27
+ }
28
+ input[type="submit"] {
29
+ padding: 8px 20px;
30
+ margin-top: 10px;
31
+ background-color: #007bff;
32
+ color: #fff;
33
+ border: none;
34
+ border-radius: 5px;
35
+ cursor: pointer;
36
+ }
37
+ input[type="submit"]:hover {
38
+ background-color: #0056b3;
39
+ }
40
+ p {
41
+ color: #666;
42
+ text-align: center;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <h1>{{ element }}の原子番号は?</h1>
48
 
49
+ <form method="POST">
50
+ <label>答え: <input type="text" name="user_input"></label>
51
+ <br>
52
+ <input type="submit" value="回答">
53
+ </form>
 
 
54
 
55
+ {% if result %}
56
+ <p>{{ result }}</p>
57
+ <form method="POST" action="/next_element2num">
58
+ <input type="submit" value="次の問題">
59
+ </form>
60
+ {% endif %}
 
 
 
 
 
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </body>
 
63
  </html>
templates/quiz_index.html ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ h1 {
15
+ color: #333;
16
+ text-align: center;
17
+ }
18
+ p {
19
+ color: #666;
20
+ text-align: center;
21
+ }
22
+ ul {
23
+ list-style-type: none;
24
+ padding: 0;
25
+ text-align: center;
26
+ }
27
+ li {
28
+ margin-bottom: 10px;
29
+ }
30
+ a {
31
+ text-decoration: none;
32
+ color: #007bff;
33
+ }
34
+ a:hover {
35
+ text-decoration: underline;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body>
40
+ <h1>クイズアプリへようこそ!</h1>
41
+
42
+ <p>以下のクイズから選択してください:</p>
43
+
44
+ <ul>
45
+ <li><a href="/quiz_capital">国の首都当てクイズ</a></li>
46
+ <li><a href="/quiz_element">元素の最外殻電子数当てクイズ</a></li>
47
+ <li><a href="/quiz_element2num">元素記号から原子番号当てクイズ</a></li>
48
+ </ul>
49
+
50
+ </body>
51
+ </html>